From ca499029905674a66fb2248ed14965e6d140e14f Mon Sep 17 00:00:00 2001
From: zhangtao <9480807882@qq.com>
Date: Tue, 6 Jan 2026 00:40:33 +0800
Subject: [PATCH] =?UTF-8?q?style(layouts):=20=E7=A7=BB=E9=99=A4=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E8=BE=B9=E6=A1=86=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor(views): 调整AI页面容器样式和输入区域交互效果
feat(dashboard): 替换快速链接按钮为卡片并优化交互
---
 .../src/layouts/components/AppLogo/index.vue  |  5 +-
 .../src/layouts/components/TagsView/index.vue |  2 -
 frontend/src/layouts/views/MixLayout.vue      |  1 -
 frontend/src/styles/variables.scss            |  6 +--
 frontend/src/views/dashboard/workplace.vue    | 52 ++++++++++---------
 .../src/views/module_application/ai/index.vue | 40 +++++++-------
 6 files changed, 56 insertions(+), 50 deletions(-)

diff --git a/frontend/src/layouts/components/AppLogo/index.vue b/frontend/src/layouts/components/AppLogo/index.vue
index 2f4fa188..365ff1a8 100644
--- a/frontend/src/layouts/components/AppLogo/index.vue
+++ b/frontend/src/layouts/components/AppLogo/index.vue
@@ -30,11 +30,14 @@ defineProps({
   background-color: $sidebar-logo-background;
 
   .title {
-    flex-shrink: 0;
+    max-width: 100px;
     margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
     font-size: 14px;
     font-weight: bold;
     color: $sidebar-logo-text-color;
+    white-space: nowrap;
   }
 }
 </style>
diff --git a/frontend/src/layouts/components/TagsView/index.vue b/frontend/src/layouts/components/TagsView/index.vue
index 6d84e388..7a9b4310 100644
--- a/frontend/src/layouts/components/TagsView/index.vue
+++ b/frontend/src/layouts/components/TagsView/index.vue
@@ -790,8 +790,6 @@ onUnmounted(() => {
   box-shadow: 0 1px 1px var(--el-box-shadow-light);
 
   .btn {
-    top: 1px;
-    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/frontend/src/layouts/views/MixLayout.vue b/frontend/src/layouts/views/MixLayout.vue
index a4eda3ba..2013c17b 100644
--- a/frontend/src/layouts/views/MixLayout.vue
+++ b/frontend/src/layouts/views/MixLayout.vue
@@ -149,7 +149,6 @@ watch(
     width: 100%;
     height: $navbar-height;
     background-color: var(--menu-background);
-    border-bottom: 1px solid var(--el-border-color-lighter);
 
     &-content {
       display: flex;
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index ff74825c..18f21db8 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -36,7 +36,7 @@
   ); // 菜单激活文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
 
   --menu-hover: #e6f4ff; // 菜单悬停背景色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
-  --sidebar-logo-background: #f5f5f5; // 侧边栏 Logo 背景色
+  --sidebar-logo-background: #fff; // 侧边栏 Logo 背景色
   --sidebar-logo-text-color: #333; // 侧边栏 Logo 文字颜色
 }
 
@@ -46,7 +46,7 @@ html.sidebar-color-blue {
   --menu-text: #bfcbd9; // 菜单文字颜色
   --menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
   --menu-hover: #263445; // 菜单悬停背景色
-  --sidebar-logo-background: #2d3748; // 侧边栏 Logo 背景色
+  --sidebar-logo-background: #304156; // 侧边栏 Logo 背景色
   --sidebar-logo-text-color: #fff; // 侧边栏 Logo 文字颜色
 }
 
@@ -56,7 +56,7 @@ html.dark {
   --menu-text: #fff;
   --menu-active-text: var(--el-menu-active-color);
   --menu-hover: rgb(0 0 0 / 20%);
-  --sidebar-logo-background: rgb(0 0 0 / 20%);
+  --sidebar-logo-background: var(--el-bg-color-overlay);
   --sidebar-logo-text-color: #fff;
 
   /** WangEditor Dark */
diff --git a/frontend/src/views/dashboard/workplace.vue b/frontend/src/views/dashboard/workplace.vue
index 70536c12..12b5e23a 100644
--- a/frontend/src/views/dashboard/workplace.vue
+++ b/frontend/src/views/dashboard/workplace.vue
@@ -179,36 +179,38 @@
                 </ElButton>
               </div>
             </template>
-            <ElRow v-if="quickLinks.length > 0" :gutter="8">
-              <ElCol v-for="(item, index) in quickLinks" :key="index" :span="6" class="group mb-4">
-                <ElButton
-                  plain
-                  type="default"
-                  class="w-full relative"
+            <ElRow v-if="quickLinks.length > 0" :gutter="12">
+              <ElCol v-for="(item, index) in quickLinks" :key="index" :span="6" class="mb-4">
+                <ElCard
+                  shadow="hover"
+                  class="h-full transition-all duration-300 hover:scale-[1.02] cursor-pointer relative"
                   @click="handleQuickLinkClick(item)"
                 >
+                  <div class="flex flex-col items-center justify-center py-1 px-1">
+                    <div class="text-2xl mb-1">
+                      <el-icon
+                        v-if="item.icon && item.icon.startsWith('el-icon')"
+                        :color="getRandomColor()"
+                      >
+                        <component :is="item.icon.replace('el-icon-', '')" />
+                      </el-icon>
+                      <div
+                        v-else-if="item.icon"
+                        :class="`i-svg:${item.icon}`"
+                        :style="{ color: getRandomColor() }"
+                      />
+                      <div v-else :class="`i-svg:menu`" :style="{ color: getRandomColor() }" />
+                    </div>
+                    <div class="text-center text-sm font-medium">{{ item.title }}</div>
+                  </div>
                   <el-icon
-                    v-if="item.icon && item.icon.startsWith('el-icon')"
-                    :color="getRandomColor()"
-                  >
-                    <component :is="item.icon.replace('el-icon-', '')" />
-                  </el-icon>
-                  <div
-                    v-else-if="item.icon"
-                    :class="`i-svg:${item.icon} mr-2`"
-                    :style="{ color: getRandomColor() }"
-                  />
-                  <div v-else :class="`i-svg:menu mr-2`" :style="{ color: getRandomColor() }" />
-
-                  <span>{{ item.title }}</span>
-                  <el-icon
-                    color="var(--el-color-danger)"
-                    class="absolute top-0 right-0 opacity-0 group-hover:opacity-100"
+                    color="var(--el-color-warning)"
+                    class="absolute top-2 right-2 opacity-100"
                     @click.stop="handleDeleteLink(item)"
                   >
-                    <CircleClose />
+                    <StarFilled />
                   </el-icon>
-                </ElButton>
+                </ElCard>
               </ElCol>
             </ElRow>
             <el-empty v-else :image-size="80" description="暂无数据" />
@@ -243,7 +245,7 @@ import NoticeAPI, { NoticeTable } from "@/api/module_system/notice";
 import { ref, onMounted, reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import { QuestionFilled, Delete, CircleClose } from "@element-plus/icons-vue";
+import { QuestionFilled, Delete, StarFilled } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { quickStartManager, type QuickLink } from "@/utils/quickStartManager";
 
diff --git a/frontend/src/views/module_application/ai/index.vue b/frontend/src/views/module_application/ai/index.vue
index 58f04345..4d0d85df 100644
--- a/frontend/src/views/module_application/ai/index.vue
+++ b/frontend/src/views/module_application/ai/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="chatgpt-container">
+  <div class="app-container">
     <!-- 主聊天区域 -->
     <div class="main-chat">
       <!-- 顶部导航栏 -->
@@ -513,13 +513,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.chatgpt-container {
-  display: flex;
-  height: calc(100vh - 120px);
-  overflow: hidden;
-  background: var(--el-bg-color);
-}
-
 // 主聊天区域
 .main-chat {
   position: relative;
@@ -841,9 +834,8 @@ onUnmounted(() => {
     }
   }
 
-  // 输入区域
   .chat-input {
-    position: fixed;
+    position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
@@ -851,9 +843,12 @@ onUnmounted(() => {
     padding: 16px 24px 24px;
     background: var(--el-bg-color);
     border-top: 1px solid var(--el-border-color-light);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
 
     .input-wrapper {
-      max-width: 800px;
+      width: 100%;
+      max-width: 1000px;
       margin: 0 auto;
 
       .input-container {
@@ -871,9 +866,10 @@ onUnmounted(() => {
 
         .message-input {
           :deep(.el-textarea__inner) {
-            padding: 16px 60px 16px 16px;
+            min-height: 52px;
+            padding: 18px 70px 18px 20px;
             font-size: 15px;
-            line-height: 1.5;
+            line-height: 1.6;
             resize: none;
             background: transparent;
             border: none;
@@ -888,12 +884,20 @@ onUnmounted(() => {
 
         .send-button {
           position: absolute;
-          right: 12px;
-          bottom: 12px;
-          width: 32px;
-          height: 32px;
-          min-height: 32px;
+          right: 10px;
+          bottom: 10px;
+          width: 40px;
+          height: 40px;
+          min-height: 40px;
           padding: 0;
+          border-radius: 50%;
+          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
+          transition: all 0.2s ease;
+
+          &:hover {
+            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
+            transform: translateY(-2px);
+          }
         }
       }