From ab903e3cc1237b4dcf6ab263052c87e047468c38 Mon Sep 17 00:00:00 2001
From: lqins <lqins168@gmail.com>
Date: Sun, 22 Dec 2024 12:37:32 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=86=E8=8A=82=E5=A4=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/assets/css/chat-plus.styl      | 10 +++-
 web/src/assets/css/common.styl         |  3 +-
 web/src/assets/css/custom-scroll.styl  | 11 ++++
 web/src/assets/css/image-mj.styl       |  2 +-
 web/src/assets/css/luma.styl           |  2 +-
 web/src/assets/css/member.styl         |  2 +
 web/src/assets/css/sd-task-dialog.styl | 13 ++---
 web/src/assets/css/suno.styl           | 19 +++++--
 web/src/assets/css/theme-dark.styl     |  6 ++-
 web/src/components/ChatReply.vue       |  8 +--
 web/src/components/UserOrder.vue       |  4 +-
 web/src/components/ui/BlackDialog.vue  | 69 ++++++++++++--------------
 web/src/views/ChatPlus.vue             | 12 ++---
 web/src/views/Home.vue                 | 15 ++++--
 14 files changed, 111 insertions(+), 65 deletions(-)

diff --git a/web/src/assets/css/chat-plus.styl b/web/src/assets/css/chat-plus.styl
index f6989cb2..e9485086 100644
--- a/web/src/assets/css/chat-plus.styl
+++ b/web/src/assets/css/chat-plus.styl
@@ -8,6 +8,9 @@
     ::v-deep (.el-message-box__message){
       font-size: 18px !important
     }
+    .newChat{
+      margin-bottom: 10px  
+    }
     // left side
     .el-container{
       height: 100%;
@@ -115,7 +118,7 @@
               background-color :var(--theme-bg);
               box-shadow: 0px 3px 9px rgba(112,144,176,0.12);
             
-            border: 1px solid var(--border-active);
+            border: 1px solid var(--shadow-color);
           }
         }
       }
@@ -219,6 +222,8 @@
           .chat-box {
             overflow-y: auto;
             //border-bottom: 1px solid #4f4f4f
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+  -ms-overflow-style: none; /* 隐藏滚动条（IE、Edge） */
 
             // 变量定义
             --content-font-size: 16px;
@@ -234,6 +239,9 @@
               
 
             }
+            ::-webkit-scrollbar {
+  display: none; /* 隐藏滚动条（Webkit 浏览器） */
+}
           }
 
           .input-box {
diff --git a/web/src/assets/css/common.styl b/web/src/assets/css/common.styl
index b7be7059..f6412161 100644
--- a/web/src/assets/css/common.styl
+++ b/web/src/assets/css/common.styl
@@ -23,7 +23,8 @@
  --el-input-focus-border-color: #b0a0f8;
  --little-btn-bg:#e9d3f6;
  --gray-btn-bg:#ededf591;
-  --a-link-color: #3561ff
+  // --a-link-color: #3561ff
+  --a-link-color: #6e8eff
   --shadow-color:rgba(223,71,255,0.6)
   --sm-btn-bg:#6052ed;
 --theme-text-tertiary: #595959;
diff --git a/web/src/assets/css/custom-scroll.styl b/web/src/assets/css/custom-scroll.styl
index 61784075..bd427a56 100644
--- a/web/src/assets/css/custom-scroll.styl
+++ b/web/src/assets/css/custom-scroll.styl
@@ -23,4 +23,15 @@
   ::-webkit-scrollbar-thumb:hover {
     background-color: #666666;
   }
+  overflow: auto; /* 保持滚动功能 */
+  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
+  -ms-overflow-style: none; /* 隐藏滚动条（IE、Edge） */
+  ::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条（Webkit 浏览器） */
+  }
+  &.showScrollbar {
+    ::-webkit-scrollbar {
+      display: none; /* 隐藏滚动条（Webkit 浏览器） */
+    }
+  }
 }
\ No newline at end of file
diff --git a/web/src/assets/css/image-mj.styl b/web/src/assets/css/image-mj.styl
index 0e7f9760..bcfc8e5d 100644
--- a/web/src/assets/css/image-mj.styl
+++ b/web/src/assets/css/image-mj.styl
@@ -379,7 +379,7 @@
                             display block
                             cursor pointer
                             background-color #4E5058
-                            color var(--text-theme-color)
+                            color #fff
 
                             &:hover {
                               background-color #6D6F78
diff --git a/web/src/assets/css/luma.styl b/web/src/assets/css/luma.styl
index 9dd30236..474cf4f9 100644
--- a/web/src/assets/css/luma.styl
+++ b/web/src/assets/css/luma.styl
@@ -259,7 +259,7 @@
               background none
               padding 6px
               transition background 0.6s ease 0s
-              color #726E6C
+              color #919191
 
               &:hover {
                 // background #5f5958
diff --git a/web/src/assets/css/member.styl b/web/src/assets/css/member.styl
index d638d087..ed44a70d 100644
--- a/web/src/assets/css/member.styl
+++ b/web/src/assets/css/member.styl
@@ -164,6 +164,8 @@
           &:hover {
             // box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
             transform: translateY(-10px); /* 向上移动10像素 */
+            box-shadow: 0 0 10px var(--shadow-color);
+            background-color: #30323c;
           }
         }
       }
diff --git a/web/src/assets/css/sd-task-dialog.styl b/web/src/assets/css/sd-task-dialog.styl
index 1395207e..959ae918 100644
--- a/web/src/assets/css/sd-task-dialog.styl
+++ b/web/src/assets/css/sd-task-dialog.styl
@@ -1,6 +1,6 @@
 .el-overlay-dialog {
   .el-dialog {
-    background-color #1a1b1e
+    // background-color #1a1b1e
 
     .el-dialog__header {
       .el-dialog__title {
@@ -33,14 +33,15 @@
         }
 
         .task-info {
-          background-color #25262b
+          // background-color #25262b
           padding 1rem 1.5rem
+         
 
           .info-line {
             width 100%
 
             .prompt {
-              background-color #35363b
+              // background-color #35363b
               padding 10px
               color #999999
               overflow auto
@@ -64,16 +65,16 @@
               label {
                 display flex
                 width 100px
-                color #a5a5a5
+                color :var(--el-text-color-primary)
               }
 
               .item-value {
                 display flex
                 width 100%
-                background-color #35363b
+                // background-color #35363b
                 padding 2px 5px
                 border-radius 5px
-                color #F5F5F5
+                color: var(--text-theme-color);
               }
             }
 
diff --git a/web/src/assets/css/suno.styl b/web/src/assets/css/suno.styl
index adf528f7..c038fc2a 100644
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -3,7 +3,14 @@
   height 100%
   // background-color #0E0808
   overflow auto
-
+  .item-group{
+    scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
+  -ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
+  ::-webkit-scrollbar {
+    display: block !important; 
+  }
+    }
+ 
   .left-bar {
     max-width 340px
     min-width 340px
@@ -147,8 +154,14 @@
         position relative
         overflow-x auto
         overflow-y hidden
+        scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
+        -ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
         width 100%
 
+        ::-webkit-scrollbar {
+          display: block !important; 
+        }
+
         .inner {
           display flex
           flex-flow row
@@ -256,7 +269,7 @@
             font-weight 700
 
             a {
-              color vae( --a-link-color)
+              color var( --a-link-color)
               &:hover {
                 text-decoration underline
               }
@@ -309,7 +322,7 @@
               background none
               padding 6px
               transition background 0.6s ease 0s
-              color #726E6C
+              color #919191
 
               &:hover {
                 // background #5f5958
diff --git a/web/src/assets/css/theme-dark.styl b/web/src/assets/css/theme-dark.styl
index 591cc15f..83fc2318 100644
--- a/web/src/assets/css/theme-dark.styl
+++ b/web/src/assets/css/theme-dark.styl
@@ -21,7 +21,8 @@
   --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
   --border-active:rgba(255, 255, 255, 0.1);
   // --card-bg: rgba(17, 28, 68, 1);
-  --card-bg: #1f243f;
+  // --card-bg: #1f243f;
+  --card-bg:#252d58;
    --card-bg-table: rgba(17, 28, 68, 1);
   --theme-bg:rgb(13, 20, 53);
   --theme-bg-all:rgb(13, 20, 53);
@@ -34,7 +35,8 @@
    --el-bg-color-overlay: rgba(17, 28, 68, 1);
    --el-border-color-light: rgba(255, 255, 255, 0.2);
   --line-box:rgba(255, 255, 255, 0.1);
-  --chat-bg:#141a36;
+  // --chat-bg:#141a36;
+  --chat-bg:#1f243f
   --el-bg-color:#141a36;
   --el-fill-color-blank: rgba(17, 28, 68, 1);
   --el-fill-color-light: rgba(86, 86, 95, .2);
diff --git a/web/src/components/ChatReply.vue b/web/src/components/ChatReply.vue
index c258a1c0..d345f3a7 100644
--- a/web/src/components/ChatReply.vue
+++ b/web/src/components/ChatReply.vue
@@ -432,10 +432,12 @@ const reGenerate = (prompt) => {
               line-height 1.5
 
               code {
-                color:var(--theme-text-color-primary);
-                background-color var( --little-btn-bg)
+                color:#fff;
+                background-color var( --el-color-primary)
                 padding 0 3px;
                 border-radius 5px;
+                font-size: 16px;
+                padding: 5px 7px;
               }
             }
 
@@ -539,7 +541,7 @@ const reGenerate = (prompt) => {
           }
 
           .bar-item.bg {
-            background-color var( --gray-btn-bg)
+            // background-color var( --gray-btn-bg)
             cursor pointer
           }
 
diff --git a/web/src/components/UserOrder.vue b/web/src/components/UserOrder.vue
index 52149acd..e49a0808 100644
--- a/web/src/components/UserOrder.vue
+++ b/web/src/components/UserOrder.vue
@@ -41,7 +41,7 @@
         </el-table-column>
       </el-table>
     </el-row>
-    <el-empty :image-size="100" v-else />
+    <el-empty :image-size="100" v-else :image="nodata" description="暂无数据" />
     <div class="pagination">
       <el-pagination
         v-if="total > 0"
@@ -59,6 +59,8 @@
 </template>
 
 <script setup>
+import nodata from "@/assets/img/no-data.png";
+
 import { onMounted, ref } from "vue";
 import { httpGet } from "@/utils/http";
 import { ElMessage } from "element-plus";
diff --git a/web/src/components/ui/BlackDialog.vue b/web/src/components/ui/BlackDialog.vue
index 1c3f4196..79323156 100644
--- a/web/src/components/ui/BlackDialog.vue
+++ b/web/src/components/ui/BlackDialog.vue
@@ -1,29 +1,25 @@
 <template>
   <div class="black-dialog">
     <el-dialog
-        v-model="showDialog"
-        style="--el-dialog-bg-color:#414141;
-        --el-text-color-primary:#f1f1f1;
-        --el-border-color:#414141;
-        --el-color-primary:#21aa93;
-        --el-color-primary-dark-2:#41555d;
-        --el-color-white: #e1e1e1;
-        --el-color-primary-light-3:#549688;
-        --el-fill-color-blank:#616161;
-         --el-color-primary-light-7:#717171;
-        --el-color-primary-light-9:#717171;
-        --el-text-color-regular:#e1e1e1"
-        :title="title"
-        :width="width"
-        :before-close="cancel"
+      v-model="showDialog"
+      :title="title"
+      :width="width"
+      :before-close="cancel"
     >
       <div class="dialog-body">
         <slot></slot>
       </div>
       <template #footer v-if="!hideFooter">
         <div class="dialog-footer">
-          <el-button @click="cancel">{{cancelText}}</el-button>
-          <el-button type="primary" @click="$emit('confirm')" v-if="!hideConfirm">{{confirmText}}</el-button>
+          <el-button @click="cancel" style="--el-border-radius-base: 8px">{{
+            cancelText
+          }}</el-button>
+          <el-button
+            type="primary"
+            @click="$emit('confirm')"
+            v-if="!hideConfirm"
+            >{{ confirmText }}</el-button
+          >
         </div>
       </template>
     </el-dialog>
@@ -31,45 +27,47 @@
 </template>
 
 <script setup>
-
-import {ref, watch} from "vue";
+import { ref, watch } from "vue";
 const props = defineProps({
-  show : Boolean,
+  show: Boolean,
   title: {
     type: String,
-    default: 'Tips',
+    default: "Tips"
   },
   width: {
     type: String,
-    default: 'auto',
+    default: "auto"
   },
-  hideFooter:{
+  hideFooter: {
     type: Boolean,
     default: false
   },
-  hideConfirm:{
+  hideConfirm: {
     type: Boolean,
     default: false
   },
   confirmText: {
     type: String,
-    default: '确定',
+    default: "确定"
   },
   cancelText: {
     type: String,
-    default: '取消',
-  },
+    default: "取消"
+  }
 });
-const emits = defineEmits(['confirm','cancal']);
-const showDialog = ref(props.show)
+const emits = defineEmits(["confirm", "cancal"]);
+const showDialog = ref(props.show);
 
-watch(() => props.show, (newValue) => {
-  showDialog.value = newValue
-})
+watch(
+  () => props.show,
+  (newValue) => {
+    showDialog.value = newValue;
+  }
+);
 const cancel = () => {
-  showDialog.value = false
-  emits('cancal')
-}
+  showDialog.value = false;
+  emits("cancal");
+};
 </script>
 
 <style lang="stylus">
@@ -110,5 +108,4 @@ const cancel = () => {
     }
   }
 }
-
 </style>
diff --git a/web/src/views/ChatPlus.vue b/web/src/views/ChatPlus.vue
index 429b005f..01288db2 100644
--- a/web/src/views/ChatPlus.vue
+++ b/web/src/views/ChatPlus.vue
@@ -3,12 +3,12 @@
     <el-container>
       <el-aside>
         <div class="media-page">
-          <!-- <el-button @click="_newChat" color="#21aa93">
+          <el-button @click="_newChat" type="primary" class="newChat">
             <el-icon style="margin-right: 5px">
-              <Plus/>
+              <Plus />
             </el-icon>
             新建对话
-          </el-button> -->
+          </el-button>
 
           <div class="search-box">
             <el-input
@@ -248,7 +248,7 @@
                         </textarea>
                       </div>
                       <div class="flex-between">
-                        <div @click="_newChat" class="flex-center add-new">
+                        <!-- <div @click="_newChat" class="flex-center add-new">
                           <el-tooltip
                             class="box-item"
                             effect="dark"
@@ -256,7 +256,7 @@
                           >
                             <el-icon><CirclePlusFilled /></el-icon>
                           </el-tooltip>
-                        </div>
+                        </div> -->
                         <div class="flex little-btns">
                           <span class="send-btn tool-item-btn">
                             <!-- showStopGenerate -->
@@ -688,7 +688,7 @@ const resizeElement = function () {
 
   // leftBoxHeight.value = window.innerHeight - 90 - 45 - 82;
   // leftBoxHeight.value = window.innerHeight - 90 - 82;
-  leftBoxHeight.value = window.innerHeight - 90 - 50;
+  leftBoxHeight.value = window.innerHeight - 90 - 100;
 };
 
 const _newChat = () => {
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 5dcbe992..bc97b80b 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -181,7 +181,7 @@
       </div>
     </div>
     <!-- :style="{ 'padding-left': isCollapse ? '65px' : '170px' }" -->
-    <div class="right-main">
+    <el-scrollbar class="right-main">
       <div
         v-if="loginUser.id === undefined || !loginUser.id"
         class="loginMask"
@@ -205,7 +205,7 @@
         </router-view>
       </div>
       <!-- </div> -->
-    </div>
+    </el-scrollbar>
     <config-dialog
       v-if="loginUser.id"
       :show="showConfigDialog"
@@ -309,13 +309,20 @@ const changeNav = (item) => {
   curPath.value = item.url;
   if (item.url.indexOf("http") !== -1) {
     // 外部链接
-    router.push({ name: "ExternalLink", query: { url: item.url } });
+    window.open(item.url, "_blank");
   } else {
-    router.push(item.url);
+    // 路由切换，确保路径变化
+    if (router.currentRoute.value.path !== item.url) {
+      router.push(item.url).then(() => {
+        // 刷新 `routerViewKey` 触发视图重新渲染
+        routerViewKey.value += 1;
+      });
+    }
   }
 };
 
 onMounted(() => {
+  curPath.value = router.currentRoute.value.path;
   getSystemInfo()
     .then((res) => {
       logo.value = res.data.logo;