<template>
|
<div class="index">
|
<div class="left">
|
<div class="logo">
|
<img style="width: 60px;height: 60px" src="@/assets/img/logo.png"/>
|
</div>
|
<div class="menu">
|
<div :class="{tab: true, activeTab: activeTab === 0}" @click="changeTab(0)">
|
<svg t="1742895429099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1205" width="18" height="18">
|
<path d="M174.72 855.68l130.048-43.392 23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352 0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8-44.16 110.528z m-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z" p-id="1206" :fill="activeTab === 0 ? 'blue' : 'grey'">
|
</path></svg>
|
<span style="margin-left: 10px">对话</span></div>
|
<div :class="{tab: true, activeTab: activeTab === 1}" style="margin-top: 2px" @click="changeTab(1)">
|
<svg style="margin-left: -1px" t="1742895849411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1227" width="20" height="20"><path d="M921.6 366.592L512 102.4 102.4 366.592l409.6 264.192z m-409.6-153.6L759.296 358.4 512 503.296 264.704 358.4z m0 621.568l-361.472-224.256-48.128 47.104L512 921.6l409.6-264.192-48.64-48.128z m0-145.408L150.528 464.896 102.4 512l409.6 264.192L921.6 512l-48.64-48.128z" p-id="1228" :fill="activeTab === 1 ? 'blue' : 'grey'"></path></svg>
|
<span style="margin-left: 8px">知识库管理</span>
|
</div>
|
</div>
|
<div class="setting">
|
<el-tabs v-model="activeSetting" @tab-click="tabSelect">
|
<el-tab-pane label="工具设置" name="util">
|
<div style="display: flex; align-items: center">
|
<el-checkbox v-model="enableAgent">启用Agent</el-checkbox>
|
<el-tooltip style="margin-left: 10px" content="Top center" placement="right" effect="light">
|
<svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
|
</el-tooltip>
|
</div>
|
<div style="margin-top: 15px">
|
<div class="normal-text">选择工具</div>
|
<div style="margin-top: 5px">
|
<el-select v-model="selectUtil" size="mini" placeholder="未选择" style="width: 100%">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
<div style="margin-top: 15px">
|
<div class="normal-text" style="display: flex;align-items: center">
|
<div>上传附件</div>
|
<el-tooltip style="margin-left: 10px" content="单个文件不超过200M" placement="right" effect="light">
|
<svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
|
</el-tooltip>
|
</div>
|
<div style="margin-top: 5px">
|
<el-upload
|
class="upload"
|
drag
|
:on-change="handleChange"
|
:before-upload="handleUpload"
|
:file-list="fileList"
|
multiple>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">
|
<div>将文件拖到此处，或<em>点击上传</em></div>
|
</div>
|
</el-upload>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="会话设置" name="session"></el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<div class="right">
|
<router-view></router-view>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "IndexView",
|
data() {
|
return {
|
fileList: [],
|
activeTab: 0,
|
activeSetting: 'util',
|
enableAgent: false,
|
selectUtil: null,
|
options: [{
|
value: '选项1',
|
label: '黄金糕'
|
}, {
|
value: '选项2',
|
label: '双皮奶'
|
}, {
|
value: '选项3',
|
label: '蚵仔煎'
|
}, {
|
value: '选项4',
|
label: '龙须面'
|
}, {
|
value: '选项5',
|
label: '北京烤鸭'
|
}],
|
}
|
},
|
mounted() {
|
this.changeRoute(this.activeTab)
|
},
|
methods: {
|
handleUpload(file) {
|
if (this.fileList.indexOf(file) === -1) {
|
this.fileList.push(file)
|
}
|
return false
|
},
|
handleChange(file, fileList) {
|
this.fileList = fileList;
|
},
|
tabSelect(tab, event) {
|
console.log(tab, event)
|
},
|
changeTab(index) {
|
if (index !== this.activeTab) {
|
this.activeTab = index
|
this.changeRoute(index)
|
}
|
},
|
changeRoute(index) {
|
console.log(this.$router.currentRoute.path, "路由")
|
if (index === 0 && this.$router.currentRoute.path !== "/chat") {
|
this.$router.push("/chat")
|
} else if (index === 1 && this.$router.currentRoute.path !== "/knowledge") {
|
this.$router.push("/knowledge")
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.index {
|
display: flex;
|
}
|
.left {
|
width: 250px;
|
height: calc(100vh - 20px);
|
min-height: 600px;
|
background-color: #f3f3f3;
|
padding: 0px 40px;
|
}
|
.right {
|
width: 1600px;
|
}
|
.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;
|
}
|
.tab {
|
width: 100%;
|
line-height: 30px;
|
padding-left: 16px;
|
display: flex;
|
justify-content: flex-start;
|
border-radius: 8px;
|
align-items: center;
|
}
|
.activeTab {
|
background-color: #bed7f5;
|
color: blue;
|
}
|
.tab:hover {
|
cursor: pointer;
|
background-color: #bed7f5;
|
color: blue;
|
}
|
.setting {
|
margin-top: 20px;
|
}
|
.normal-text {
|
color: #606266;
|
font-size: 12px;
|
}
|
::v-deep(.el-upload-dragger) {
|
width: 250px !important;
|
}
|
</style>
|
