From 940603bd7d9f36e659f0ac744513d7011de0a330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E6=98=B1=E8=BE=BE?= <chen.yuda@ebiz-digits.com>
Date: Mon, 12 May 2025 17:21:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(app):=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整标题和文本样式，提升视觉效果
- 优化卡片布局，增加悬浮效果
- 更新最近使用列表标题和样式
- 调整图表容器高度
---
 src/views/app/Home.vue | 52 +++++++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/views/app/Home.vue b/src/views/app/Home.vue
index 7d8cdbb..a86f0a8 100644
--- a/src/views/app/Home.vue
+++ b/src/views/app/Home.vue
@@ -3,7 +3,7 @@
     <div class="home-container">
       <div class="home-top-container flex align-items-c justify-content-b">
         <div class="left-container">
-          <H4 class="title">你好，{{ userInfo.realName }}</H4>
+          <span class="title">你好，{{ userInfo.realName }}</span>
           <div class="subtitle">欢迎使用{{ title }}</div>
           <div class="role-info">
             当前角色：{{ userInfo.roleCode || '未指定' }}
@@ -22,15 +22,15 @@
       <div class="home-center-container">
         <div class="card-container">
           <div class="card-item" @click="jumpUrl('knowledge/list')">
-            <div class="card-title">知识库</div>
+            <span class="card-title">知识库</span>
             <div class="card-content">知识库管理列表</div>
           </div>
           <div class="card-item" @click="jumpUrl('/intelligentAgent/list')">
-            <div class="card-title">智能体</div>
+            <span class="card-title">智能体</span>
             <div class="card-content">智能体管理列表</div>
           </div>
           <div class="card-item" @click="jumpUrl('/system/user')">
-            <div class="card-title">用户管理</div>
+            <span class="card-title">用户管理</span>
             <div class="card-content">管理员快速入口</div>
           </div>
         </div>
@@ -38,7 +38,7 @@
       <div class="home-bottom-container">
         <div class="latest-section flex align-items-c justify-content-b">
           <div class="latest-knowledge">
-            <div class="section-title">最新知识库</div>
+            <span class="section-title">最近使用知识库</span>
             <div
               class="section-content"
               @click="jumpUrl(`/knowledge/detail?datasetId=${dataset.id}`)"
@@ -66,7 +66,7 @@
             ></lineEcharts>
           </div>
           <div class="latest-agent">
-            <div class="section-title">最新智能体</div>
+            <span class="section-title">最近使用智能体</span>
             <div class="section-content" @click="jumpAgent(agent)">
               <div class="knowledge-item flex align-items-c">
                 <div class="knowledge-image">
@@ -419,6 +419,7 @@ export default {
       margin-bottom: 10px;
       padding: 20px;
       //background: linear-gradient(135deg, #6a11cb, #2575fc);
+
       background: #fff;
       border-radius: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -431,16 +432,21 @@ export default {
           font-size: 18px;
           font-weight: bold;
           margin-bottom: 10px;
+          background: linear-gradient(135deg, #6a11cb, #2575fc);
+          -webkit-background-clip: text; /* 关键：将背景裁剪为文字 */
+          background-clip: text; /* 标准属性 */
+          color: transparent; /* 文字颜色透明，显示背景渐变 */
         }
 
         .subtitle {
-          font-size: 14px;
+          font-size: 13px;
           opacity: 0.8;
           margin-bottom: 5px;
+          margin-top: 10px;
         }
 
         .role-info {
-          font-size: 14px;
+          font-size: 13px;
           opacity: 0.7;
         }
       }
@@ -476,20 +482,30 @@ export default {
         .card-item {
           cursor: pointer;
           flex: 1;
-          padding: 20px;
+          padding: 40px 20px;
           background-color: #fff;
           border-radius: 10px;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+          transition: all 0.3s ease-in-out;
+          //&:hover {
+          //  transform: translateY(-5px);
+          //  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
+          //}
 
           .card-title {
             font-size: 18px;
             font-weight: bold;
-            margin-bottom: 10px;
+
+            background: linear-gradient(135deg, #6a11cb, #2575fc);
+            -webkit-background-clip: text; /* 关键：将背景裁剪为文字 */
+            background-clip: text; /* 标准属性 */
+            color: transparent; /* 文字颜色透明，显示背景渐变 */
           }
 
           .card-content {
             font-size: 14px;
             color: #666;
+            margin-top: 20px;
           }
         }
       }
@@ -499,7 +515,7 @@ export default {
       //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
       margin-top: 10px;
       border-radius: 8px;
-      height: calc(100vh - 240px);
+      height: calc(100vh - 290px);
       //background-color: #fff;
       .latest-section {
         display: flex;
@@ -511,19 +527,23 @@ export default {
         .latest-agent {
           height: 100%;
           background: #fff;
-          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+          //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
           flex: 1;
           border-radius: 8px;
           padding: 15px;
 
           .section-title {
-            font-size: 18px;
+            font-size: 17px;
             font-weight: bold;
-            margin-bottom: 10px;
-            color: #333;
+
+            //background: linear-gradient(135deg, #6a11cb, #2575fc);
+            //-webkit-background-clip: text; /* 关键：将背景裁剪为文字 */
+            //background-clip: text; /* 标准属性 */
+            //color: transparent; /* 文字颜色透明，显示背景渐变 */
           }
 
           .section-content {
+            margin-top: 10px;
             cursor: pointer;
             .knowledge-item {
               display: flex;
@@ -560,7 +580,7 @@ export default {
 
                 .knowledge-title {
                   font-size: 16px;
-                  font-weight: bold;
+                  font-weight: 600;
                   margin-bottom: 5px;
                 }