<template>
|
<div class="index">
|
<div class="common-op">
|
<el-dropdown @command="handleCommand" trigger="hover">
|
<span class="el-dropdown-link" style="user-select: none">
|
张三<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="a">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div class="left">
|
<div class="logo">
|
<img style="width: 60px;height: 60px" src="@/assets/img/logo.png"/>
|
</div>
|
<div class="menu">
|
<div class="add-chat" @click="addSession">
|
<i class="el-icon-plus"/>新建对话
|
</div>
|
<div :class="{tab: true, activeTab: this.$router.currentRoute.path == '/knowledge'}" style="margin-top: 2px" @click="changeTab()">
|
<svg t="1743057471863" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3047" width="16" height="16">
|
<path fill="grey" d="M32.2592 294.4l409.6 211.2c19.2 12.8 44.8 12.8 70.4 12.8s51.2-6.4 70.4-12.8l409.6-211.2c38.4-19.2 38.4-51.2 0-70.4l-409.6-211.2c-19.2-6.4-44.8-12.8-70.4-12.8s-51.2 6.4-70.4 12.8l-409.6 211.2c-38.4 19.2-38.4 51.2 0 70.4z m441.6-204.8c12.8-6.4 25.6-6.4 38.4-6.4s32 6.4 38.4 6.4l339.2 172.8-339.2 172.8c-6.4 6.4-19.2 6.4-38.4 6.4-12.8 0-32-6.4-38.4-6.4l-339.2-172.8 339.2-172.8z" p-id="3048"></path>
|
<path fill="grey" d="M19.4592 550.4l403.2 204.8c25.6 12.8 57.6 19.2 89.6 19.2s64-6.4 89.6-19.2l403.2-204.8c12.8-6.4 25.6-32 12.8-51.2s-32-32-51.2-19.2l-403.2 204.8c-32 12.8-83.2 12.8-108.8 0l-403.2-204.8c-12.8-12.8-25.6-12.8-38.4 0-6.4 12.8-12.8 25.6-12.8 38.4 0 19.2 6.4 25.6 19.2 32z" p-id="3049"></path>
|
<path fill="grey" d="M1024.2592 748.8c-12.8-19.2-32-32-51.2-19.2l-403.2 204.8c-32 12.8-83.2 12.8-108.8 0l-403.2-204.8c-12.8-6.4-38.4 6.4-51.2 19.2-12.8 12.8-6.4 38.4 12.8 51.2l403.2 204.8c25.6 12.8 57.6 19.2 89.6 19.2s64-6.4 96-19.2l403.2-204.8c12.8-6.4 25.6-32 12.8-51.2z" p-id="3050"></path></svg>
|
<span style="margin-left: 8px">知识库管理</span>
|
</div>
|
</div>
|
<div class="session-list">
|
<div class="session-block">
|
<div class="time">今天</div>
|
<div :class="{session: true, 'active-session': currentSession == session.id}" v-for="(session) in sessionList.today" :key="'todaysession' + session.id">
|
<div style="width: 100%" @mouseenter="activeSession = session.id" @mouseleave="activeSession = null">
|
<div @click="sessionChange(session, session.id)">{{session.sessionName}}</div>
|
<div v-show="activeSession != null && activeSession == session.id" class="session-more">
|
<el-dropdown @command="(command) => handleCommand(session, command)" trigger="click">
|
<span class="el-dropdown-link">
|
<svg t="1743058876802" class="icon more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2795" width="12" height="12">
|
<path fill="gray" d="M480 320C533.184 320 576 277.184 576 224S533.184 128 480 128 384 170.816 384 224 426.816 320 480 320zM480 448C426.816 448 384 490.816 384 544S426.816 640 480 640 576 597.184 576 544 533.184 448 480 448zM480 768c-53.184 0-96 42.816-96 96S426.816 960 480 960 576 917.184 576 864c0-52.672-42.816-96-96-96z" p-id="2796"></path></svg>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="config">会话设置</el-dropdown-item>
|
<el-dropdown-item command="rename">重命名</el-dropdown-item>
|
<el-dropdown-item command="del">删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="session-block" v-show="sessionList.yesterday && sessionList.yesterday.length > 0">
|
<div class="time">昨天</div>
|
<div :class="{session: true, 'active-session': currentSession == session.id}" v-for="(session) in sessionList.yesterday" :key="'yesterdaysession' + session.id">
|
<div style="width: 100%" @mouseenter="activeSession = session.id" @mouseleave="activeSession = null">
|
<div @click="sessionChange(session, session.id)">{{session.sessionName}}</div>
|
<div v-show="activeSession != null && activeSession == session.id" class="session-more">
|
<el-dropdown @command="(command) => handleCommand(session, command)" trigger="click">
|
<span class="el-dropdown-link">
|
<svg t="1743058876802" class="icon more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2795" width="12" height="12">
|
<path fill="gray" d="M480 320C533.184 320 576 277.184 576 224S533.184 128 480 128 384 170.816 384 224 426.816 320 480 320zM480 448C426.816 448 384 490.816 384 544S426.816 640 480 640 576 597.184 576 544 533.184 448 480 448zM480 768c-53.184 0-96 42.816-96 96S426.816 960 480 960 576 917.184 576 864c0-52.672-42.816-96-96-96z" p-id="2796"></path></svg>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="config">会话设置</el-dropdown-item>
|
<el-dropdown-item command="rename">重命名</el-dropdown-item>
|
<el-dropdown-item command="del">删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="session-block" v-show="sessionList.old && sessionList.old.length > 0">
|
<div class="time">更早</div>
|
<div :class="{session: true, 'active-session': currentSession == session.id}" v-for="(session) in sessionList.old" :key="'oldsession' + session.id">
|
<div style="width: 100%" @mouseenter="activeSession = session.id" @mouseleave="activeSession = null">
|
<div @click="sessionChange(session, session.id)">{{session.sessionName}}</div>
|
<div v-show="activeSession != null && activeSession == session.id" class="session-more">
|
<el-dropdown @command="(command) => handleCommand(session, command)" trigger="click">
|
<span class="el-dropdown-link">
|
<svg t="1743058876802" class="icon more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2795" width="12" height="12">
|
<path fill="gray" d="M480 320C533.184 320 576 277.184 576 224S533.184 128 480 128 384 170.816 384 224 426.816 320 480 320zM480 448C426.816 448 384 490.816 384 544S426.816 640 480 640 576 597.184 576 544 533.184 448 480 448zM480 768c-53.184 0-96 42.816-96 96S426.816 960 480 960 576 917.184 576 864c0-52.672-42.816-96-96-96z" p-id="2796"></path></svg>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="config">会话设置</el-dropdown-item>
|
<el-dropdown-item command="rename">重命名</el-dropdown-item>
|
<el-dropdown-item command="del">删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="right">
|
<ai-chat v-if="showWhich == 'chat'"/>
|
<knowledge-base v-else-if="showWhich == 'kb'"/>
|
</div>
|
<session-config :id="editSessionId" ref="sessionConfig" />
|
|
<el-dialog
|
:title="'重命名对话'"
|
:visible.sync="renameShow"
|
:close-on-click-modal="false"
|
:destroy-on-close="true"
|
width="600px"
|
>
|
<el-input v-model="rename"/>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="renameSubmit" size="medium">确定</el-button>
|
</span>
|
</el-dialog>
|
<login/>
|
</div>
|
</template>
|
|
<script>
|
import SessionConfig from "@/components/SessionConfig";
|
import AiChat from "@/components/AiChat";
|
import KnowledgeBase from "@/components/KnowledgeBase";
|
import Login from "@/components/Login";
|
import {sessionList} from "@/api/session";
|
|
export default {
|
name: "IndexView",
|
components: {
|
SessionConfig, Login, AiChat, KnowledgeBase
|
},
|
data() {
|
return {
|
editSessionId: '',
|
showWhich: '',
|
renameShow: false,
|
rename: '',
|
editSession: '',
|
config: {
|
chatType: 'kb',
|
kb: 'kb1',
|
hisChatNum: 3,
|
matchKbNum: 3,
|
matchKbScore: 1,
|
returnMatchResult: false
|
},
|
sessionList: {
|
today: [],
|
yesterday: [],
|
old: []
|
},
|
fileList: [],
|
activeSession: null,
|
currentSession: null,
|
activeSetting: 'util',
|
enableAgent: false,
|
selectUtil: null,
|
options: [{
|
value: '选项1',
|
label: '黄金糕'
|
}, {
|
value: '选项2',
|
label: '双皮奶'
|
}, {
|
value: '选项3',
|
label: '蚵仔煎'
|
}, {
|
value: '选项4',
|
label: '龙须面'
|
}, {
|
value: '选项5',
|
label: '北京烤鸭'
|
}],
|
}
|
},
|
mounted() {
|
this.getSessionList()
|
},
|
methods: {
|
addSession() {
|
this.currentSession = null
|
this.showWhich = 'chat'
|
},
|
// 获取会话列表
|
getSessionList() {
|
sessionList().then(res => {
|
this.sessionList = res.data.data
|
})
|
},
|
sessionChange(session, id) {
|
this.currentSession = id
|
this.showWhich = 'chat'
|
},
|
renameSubmit() {
|
// TODO 保存到对话中
|
this.renameShow = false
|
this.$message({
|
type: 'success',
|
message: '对话名称已修改'
|
});
|
},
|
handleCommand(session, command) {
|
console.log(session, command)
|
if (command === 'config') {
|
this.editSessionId = session.id
|
this.$refs.sessionConfig.setShow(true)
|
} else if (command === 'rename') {
|
this.rename = session.name
|
this.renameShow = true
|
} else if (command === 'del') {
|
this.$alert(`确认要删除对话【${session.name}】吗？`, '删除提醒', {
|
confirmButtonText: '确定',
|
callback: action => {
|
if (action == 'confirm') {
|
// TODO 删除
|
this.$message({
|
type: 'success',
|
message: '成功删除对话'
|
});
|
} else {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
}
|
}
|
});
|
}
|
},
|
handleUpload(file) {
|
if (this.fileList.indexOf(file) === -1) {
|
this.fileList.push(file)
|
}
|
return false
|
},
|
handleChange(file, fileList) {
|
this.fileList = fileList;
|
},
|
changeTab() {
|
this.showWhich = 'kb'
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.index {
|
display: flex;
|
position: relative;
|
}
|
.left {
|
width: 250px;
|
min-height: calc(100vh - 20px);
|
height: calc(100vh);
|
background-color: #f3f3f3;
|
padding: 0px 40px;
|
border-top-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
}
|
.right {
|
width: 1600px;
|
height: 100vh;
|
overflow-y: scroll;
|
position: relative;
|
}
|
.logo {
|
width: 100%;
|
height: 80px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.menu {
|
height: 150px;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border-bottom: 1px solid lightgray;
|
}
|
.add-chat {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: white;
|
border-radius: 8px;
|
margin-top: 15px;
|
margin-bottom: 15px;
|
user-select: none;
|
box-sizing: border-box;
|
}
|
.add-chat:hover {
|
cursor: pointer;
|
border: 1px solid lightgray;
|
}
|
.tab {
|
width: 100%;
|
line-height: 30px;
|
padding-left: 16px;
|
display: flex;
|
justify-content: flex-start;
|
border-radius: 8px;
|
align-items: center;
|
box-sizing: border-box;
|
}
|
.activeTab {
|
background-color: #dcdcdc;
|
}
|
.tab:hover {
|
cursor: pointer;
|
background-color: #dcdcdc;
|
}
|
.session-list {
|
margin-top: 20px;
|
width: 100%;
|
}
|
.session {
|
width: 100%;
|
display: flex;
|
height: 30px;
|
line-height: 30px;
|
align-items: center;
|
border-radius: 8px;
|
padding: 10px 10px;
|
box-sizing: border-box;
|
position: relative;
|
margin-bottom: 4px;
|
}
|
.active-session {
|
background-color: #dcdcdc;
|
}
|
.session:hover {
|
background-color: #dcdcdc;
|
}
|
.session-more {
|
position: absolute;
|
right: 8px;
|
top: 2px;
|
}
|
.more {
|
width: 20px;
|
height: 25px;
|
display: flex;
|
align-items: center;
|
}
|
.more:hover {
|
border-radius: 50%;
|
cursor: pointer;
|
background-color: #e8e8e8;
|
}
|
.common-op {
|
position: absolute;
|
top: 20px;
|
right: 50px;
|
z-index: 10;
|
}
|
.setting {
|
margin-top: 20px;
|
}
|
.normal-text {
|
color: #606266;
|
font-size: 12px;
|
}
|
::v-deep(.el-upload-dragger) {
|
width: 250px !important;
|
}
|
::v-deep(.el-dialog) {
|
border-radius: 16px!important;
|
}
|
|
.session-block {
|
width: 100%;
|
margin-bottom: 20px;
|
}
|
|
.time {
|
padding-left: 10px;
|
margin-bottom: 10px;
|
font-style: italic;
|
font-weight: bold;
|
}
|
</style>
|
