From 2c6abbe7e4e60b0d6c5fda71094d07cbaf8aaaa5 Mon Sep 17 00:00:00 2001
From: GeekMaster <yangjian102621@gmail.com>
Date: Mon, 5 May 2025 14:57:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96=EF=BC=9A?=
 =?UTF-8?q?=E5=9C=A8=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E5=88=97=E8=A1=A8=E5=B1=95=E5=BC=80=E5=92=8C?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                      |  1 +
 web/src/assets/css/chat-plus.styl |  2 +-
 web/src/assets/css/suno.styl      |  1 +
 web/src/views/ChatPlus.vue        | 22 +++++++++++++++++++---
 web/src/views/Home.vue            | 29 +++++++++++++++--------------
 5 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f58642dd..c9f7a25f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Bug 修复：修复 MJ 绘画 U1-V1,拼写错误
 - 功能优化：支持自动迁移数据表结构，无需在手动执行 SQL 了
 - 功能优化：移除首页的文字动画效果
+- 功能优化：在聊天页面增加对话列表展开和隐藏功能
 
 ## v4.2.2
 
diff --git a/web/src/assets/css/chat-plus.styl b/web/src/assets/css/chat-plus.styl
index ab4a566a..f1ccb937 100644
--- a/web/src/assets/css/chat-plus.styl
+++ b/web/src/assets/css/chat-plus.styl
@@ -19,7 +19,7 @@
       padding 10px
       width var(--el-aside-width, 320px)
 
-      .media-page {
+      .chat-list-container {
         display: flex
         flex-flow: column
         border-radius 10px
diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl
index a01041ba..aa95d9dc 100644
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -216,6 +216,7 @@
             .el-image {
               height 90px
               border-radius 5px
+              width 100%
             }
 
             .duration {
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index c3e14ceb..eeacc290 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -7,7 +7,7 @@
           <h2 v-else>{{ title }}</h2>
         </div>
 
-        <div class="media-page">
+        <div class="chat-list-container">
           <el-button @click="_newChat" type="primary" class="newChat">
             <i class="iconfont icon-new-chat mr-1"></i>
             新建对话
@@ -88,7 +88,23 @@
           </el-button>
         </div>
       </el-aside>
-      <el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
+
+      <el-main
+        v-loading="loading"
+        element-loading-background="rgba(122, 122, 122, 0.3)"
+        class="relative"
+      >
+        <div class="absolute top-2 left-2 cursor-pointer">
+          <div @click="store.setChatListExtend(!store.chatListExtend)">
+            <el-tooltip content="隐藏对话列表" placement="right" v-if="store.chatListExtend">
+              <i class="iconfont icon-colspan text-xl"></i>
+            </el-tooltip>
+            <el-tooltip content="展开对话列表" placement="right" v-else>
+              <i class="iconfont icon-expand text-xl"></i>
+            </el-tooltip>
+          </div>
+        </div>
+
         <div class="chat-container">
           <div class="chat-config">
             <el-select
@@ -910,7 +926,7 @@ const loadChat = function (chat) {
   chatId.value = chat.chat_id
   showStopGenerate.value = false
   loadChatHistory(chatId.value)
-  router.replace(`/chat/${chatId.value}`)
+  router.push(`/chat/${chatId.value}`)
 }
 
 // 编辑会话标题
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 4d946412..8e0f4516 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <div class="tab-box">
-      <div class="flex-center-col pt-2 mb-2">
+      <!-- <div class="flex-center-col pt-2 mb-2">
         <div class="flex flex-center-col">
           <div class="menuIcon" @click="store.setChatListExtend(!store.chatListExtend)">
             <el-tooltip content="隐藏对话列表" placement="right" v-if="store.chatListExtend">
@@ -12,16 +12,16 @@
             </el-tooltip>
           </div>
         </div>
-      </div>
+      </div> -->
 
-      <div class="menu-list">
+      <div class="menu-list pt-2">
         <ul>
           <li
             class="menu-list-item flex-center-col"
             v-for="item in mainNavs"
             :key="item.url"
             @click="changeNav(item)"
-            :class="item.url === curPath ? 'active' : ''"
+            :class="curPath.startsWith(item.url) ? 'active' : ''"
           >
             <span v-if="item.icon.startsWith('icon')">
               <i class="iconfont" :class="item.icon"></i>
@@ -48,7 +48,7 @@
                   v-for="(item, index) in moreNavs"
                   :key="item.url"
                   :class="{
-                    active: item.url === curPath,
+                    active: curPath.startsWith(item.url),
                     moreTitle: index !== 3 && index !== 4,
                     twoTittle: index === 3 || index === 4,
                   }"
@@ -58,7 +58,7 @@
                       <i class="iconfont" :class="item.icon"></i>
                     </span>
                     <el-image :src="item.icon" style="width: 20px; height: 20px" v-else />
-                    <span :class="item.url === curPath ? 'title active' : 'title'">{{
+                    <span class="title" :class="curPath.startsWith(item.url) ? 'active' : ''">{{
                       item.name
                     }}</span>
                   </a>
@@ -142,18 +142,18 @@
 </template>
 
 <script setup>
-import { UserFilled } from '@element-plus/icons-vue'
+import LoginDialog from '@/components/LoginDialog.vue'
 import ThemeChange from '@/components/ThemeChange.vue'
-import { useRouter } from 'vue-router'
-import { computed, onMounted, ref, watch } from 'vue'
-import { httpGet } from '@/utils/http'
-import { ElMessage } from 'element-plus'
+import ConfigDialog from '@/components/UserInfoDialog.vue'
 import { checkSession, getLicenseInfo, getSystemInfo } from '@/store/cache'
 import { removeUserToken } from '@/store/session'
 import { useSharedStore } from '@/store/sharedata'
-import ConfigDialog from '@/components/UserInfoDialog.vue'
 import { showMessageError } from '@/utils/dialog'
-import LoginDialog from '@/components/LoginDialog.vue'
+import { httpGet } from '@/utils/http'
+import { UserFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const logo = ref('')
@@ -209,6 +209,7 @@ watch(
 // 监听路由变化;
 router.beforeEach((to, from, next) => {
   curPath.value = to.path
+  console.log(curPath.value)
   next()
 })
 
@@ -246,7 +247,7 @@ onMounted(() => {
     .then((res) => {
       mainNavs.value = res.data
       // 根据窗口的高度计算应该显示多少菜单
-      const rows = Math.floor((window.innerHeight - 100) / 90)
+      const rows = Math.floor((window.innerHeight - 100) / 75)
       if (res.data.length > rows) {
         mainNavs.value = res.data.slice(0, rows)
         moreNavs.value = res.data.slice(rows)