From 4b2f79bd2833ef99aa0c3825b03074be3f2f7196 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 28 三月 2025 10:39:46 +0800
Subject: [PATCH] 首页左侧完善
---
src/views/Index.vue | 285 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 226 insertions(+), 59 deletions(-)
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 60b1ea4..612eb7a 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -5,78 +5,142 @@
<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>
+ <div class="add-chat">
+ <i class="el-icon-plus"/>鏂板缓瀵硅瘽
+ </div>
+ <div :class="{tab: true, activeTab: activeTab === 2}" style="margin-top: 2px" @click="changeTab(2)">
+ <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="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 class="session-list">
+ <div :class="{session: true, 'active-session': currentSession == index}" v-for="(session, index) in sessionList" :key="'session' + index">
+ <div style="width: 100%" @mouseenter="activeSession = index" @mouseleave="activeSession = null">
+ <div @click="sessionChange(session, index)">{{session.name}}</div>
+ <div v-show="activeSession != null && activeSession == index" 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 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>
+<!-- <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>
+ <session-config :session-name="sessionName" @saveConfig="saveConfig" 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">纭畾</el-button>
+ </span>
+ </el-dialog>
</div>
</template>
<script>
+import SessionConfig from "@/components/SessionConfig";
+
export default {
name: "IndexView",
+ components: {
+ SessionConfig
+ },
data() {
return {
+ renameShow: false,
+ rename: '',
+ sessionName: '',
+ config: {
+ chatType: 'kb',
+ kb: 'kb1',
+ hisChatNum: 3,
+ matchKbNum: 3,
+ matchKbScore: 1,
+ returnMatchResult: false
+ },
+ sessionList: [
+ {
+ name: '浼氳瘽1'
+ },
+ {
+ name: '浼氳瘽2'
+ },
+ {
+ name: '浼氳瘽3'
+ },
+ ],
fileList: [],
activeTab: 0,
+ activeSession: null,
+ currentSession: null,
activeSetting: 'util',
enableAgent: false,
selectUtil: null,
@@ -102,6 +166,54 @@
this.changeRoute(this.activeTab)
},
methods: {
+ sessionChange(session, index) {
+ console.log("瑙﹀彂浜嗗悧")
+ this.currentSession = index
+ if (this.$router.currentRoute.path !== "/chat") {
+ this.$router.push("/chat")
+ }
+ },
+ renameSubmit() {
+ // TODO 淇濆瓨鍒板璇濅腑
+ this.renameShow = false
+ this.$message({
+ type: 'success',
+ message: '瀵硅瘽鍚嶇О宸蹭慨鏀�'
+ });
+ },
+ saveConfig(config) {
+ // TODO 淇濆瓨鍒板璇濅腑
+ console.log(config, "鐖剁粍浠惰幏鍙栧埌閰嶇疆浜�")
+ },
+ handleCommand(session, command) {
+ console.log(session, command)
+ if (command === 'config') {
+ this.sessionName = session.name
+ this.$refs.sessionConfig.setConfig(this.config)
+ 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)
@@ -122,9 +234,9 @@
},
changeRoute(index) {
console.log(this.$router.currentRoute.path, "璺敱")
- if (index === 0 && this.$router.currentRoute.path !== "/chat") {
+ if ((index === 0 || index === 1) && this.$router.currentRoute.path !== "/chat") {
this.$router.push("/chat")
- } else if (index === 1 && this.$router.currentRoute.path !== "/knowledge") {
+ } else if (index === 2 && this.$router.currentRoute.path !== "/knowledge") {
this.$router.push("/knowledge")
}
}
@@ -162,6 +274,24 @@
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;
@@ -170,15 +300,52 @@
justify-content: flex-start;
border-radius: 8px;
align-items: center;
+ box-sizing: border-box;
}
.activeTab {
- background-color: #bed7f5;
- color: blue;
+ background-color: #dcdcdc;
}
.tab:hover {
cursor: pointer;
- background-color: #bed7f5;
- color: blue;
+ 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;
}
.setting {
margin-top: 20px;
--
Gitblit v1.8.0