refactor(app): 优化首页样式和布局

- 调整标题和文本样式，提升视觉效果
- 优化卡片布局，增加悬浮效果
- 更新最近使用列表标题和样式
- 调整图表容器高度

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;
                 }