style: 全局UI适配原型样式

1. main.scss - 完善全局样式变量和组件：
   - CSS变量与原型保持一致（primary, ai-gradient 等）
   - 统计卡片、模板卡片、AI对话入口样式
   - 快捷操作、上传区域、文件项样式
   - 实体高亮、要素标签完整样式定义
   - 数据表格样式
   - 全局滚动条美化

2. App.vue - 头部和侧边栏：
   - 固定头部 (position: fixed)
   - 搜索框圆角胶囊样式
   - 侧边栏菜单项圆角、激活态左边框
   - 用户头像渐变背景

3. Home.vue - 首页：
   - AI输入框圆角样式
   - 思考模式按钮胶囊样式
   - 模板卡片悬停删除按钮

4. Templates.vue - 模板管理：
   - 筛选栏样式优化
   - 模板预览悬停效果

5. Login.vue - 登录页：
   - 背景渐变改为主题色

6. TaskCenterFab.vue - 任务中心悬浮按钮：
   - 渐变色改为主题色

参考原型: frontend/灵越智报_完整交互版.html

frontend/vue-demo/src/App.vue

@@ -141,15 +141,22 @@ function handleUserCommand(command) {
   flex-direction: column;
 }
 
+// ==========================================
+// 全局头部 - 匹配原型
+// ==========================================
 .app-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 56px;
-  background: #fff;
-  border-bottom: 1px solid #e8e8e8;
+  background: var(--white);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
-  flex-shrink: 0;
+  z-index: 1000;
 }
 
 .header-left {
@@ -164,13 +171,13 @@ function handleUserCommand(command) {
   gap: 8px;
   font-size: 17px;
   font-weight: 600;
-  color: #1890ff;
+  color: var(--primary);
   cursor: pointer;
 
   .logo-icon {
     width: 32px;
     height: 32px;
-    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+    background: var(--primary-gradient);
     border-radius: 8px;
     display: flex;
     align-items: center;
@@ -182,64 +189,145 @@ function handleUserCommand(command) {
 
 .search-input {
   width: 320px;
+  
+  :deep(.el-input__wrapper) {
+    border-radius: 18px;
+    background: var(--bg);
+    box-shadow: none;
+    border: 1px solid var(--border);
+    
+    &:hover, &.is-focus {
+      background: var(--white);
+      border-color: var(--primary);
+    }
+  }
 }
 
 .header-right {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 10px;
 }
 
 .notification-badge {
   .el-button {
+    width: 36px;
+    height: 36px;
+    border: none;
+    background: transparent;
     font-size: 18px;
+    color: var(--text-2);
+    
+    &:hover {
+      background: var(--bg);
+      color: var(--primary);
+    }
   }
 }
 
 .user-menu {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   cursor: pointer;
-  padding: 4px 8px;
+  padding: 4px 8px 4px 4px;
   border-radius: 20px;
   
   &:hover {
-    background: #f5f7fa;
+    background: var(--bg);
   }
 }
 
 .user-avatar {
-  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  width: 30px;
+  height: 30px;
+  background: var(--primary-gradient);
+  font-weight: 600;
+  font-size: 12px;
 }
 
 .user-name {
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 500;
 }
 
+// ==========================================
+// 侧边栏 - 匹配原型
+// ==========================================
 .app-body {
   flex: 1;
   display: flex;
   overflow: hidden;
+  margin-top: 56px; // 为固定头部留出空间
 }
 
 .app-sidebar {
   width: 200px;
-  background: #fff;
-  border-right: 1px solid #e8e8e8;
+  background: var(--white);
+  border-right: 1px solid var(--border);
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  transition: width 0.3s;
 
   .sidebar-menu {
     border-right: none;
     height: 100%;
+    padding: 10px;
+    
+    // 菜单项样式
+    .el-menu-item {
+      height: 40px;
+      line-height: 40px;
+      border-radius: 8px;
+      margin-bottom: 2px;
+      padding: 0 12px !important;
+      font-size: 13px;
+      font-weight: 500;
+      position: relative;
+      
+      &:hover {
+        background: var(--primary-light);
+        color: var(--primary);
+      }
+      
+      &.is-active {
+        background: var(--primary-light);
+        color: var(--primary);
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 3px;
+          height: 18px;
+          background: var(--primary);
+          border-radius: 0 2px 2px 0;
+        }
+      }
+      
+      .el-icon {
+        font-size: 16px;
+        margin-right: 10px;
+      }
+    }
+    
+    // 分隔线
+    .el-divider {
+      margin: 10px 0;
+    }
   }
 }
 
+// ==========================================
+// 主内容区
+// ==========================================
 .app-main {
   flex: 1;
   overflow-y: auto;
-  background: #f5f7fa;
+  background: var(--bg);
   padding: 20px;
 
   &.full-width {

frontend/vue-demo/src/assets/main.scss

@@ -1,18 +1,36 @@
-// 全局变量
+// ==========================================
+// 灵越智报 - 全局样式（匹配原型 UI）
+// ==========================================
+
+// 全局 CSS 变量（与原型保持一致）
 :root {
+  // 主色调
   --primary: #1890ff;
   --primary-dark: #096dd9;
   --primary-light: #e6f7ff;
+  --primary-gradient: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  
+  // 功能色
   --success: #52c41a;
   --warning: #faad14;
   --danger: #ff4d4f;
+  
+  // 文字颜色
   --text-1: #262626;
   --text-2: #595959;
   --text-3: #8c8c8c;
-  --border: #e8e8e8;
+  
+  // 背景和边框
+  --white: #ffffff;
   --bg: #f5f7fa;
+  --border: #e8e8e8;
+  
+  // 渐变色
+  --ai-gradient: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
+  --data-gradient: linear-gradient(135deg, #52c41a 0%, #13c2c2 100%);
 }
 
+// 重置样式
 * {
   margin: 0;
   padding: 0;
@@ -25,79 +43,53 @@ body {
   line-height: 1.6;
   color: var(--text-1);
   background: var(--bg);
+  height: 100vh;
+  overflow: hidden;
 }
 
-// 实体高亮样式
-.entity-highlight {
-  display: inline;
-  padding: 2px 8px;
-  border-radius: 4px;
+// ==========================================
+// 通用组件样式
+// ==========================================
+
+// 卡片
+.card {
+  background: var(--white);
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+// 按钮
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 7px 14px;
+  border: 1px solid var(--border);
+  background: var(--white);
+  border-radius: 6px;
   cursor: pointer;
+  font-size: 12px;
   transition: all 0.2s;
-  font-weight: 500;
-
-  &.entity {
-    border: 1px solid var(--primary);
+  
+  &:hover {
+    border-color: var(--primary);
     color: var(--primary);
-    background: rgba(24, 144, 255, 0.1);
-
-    &:hover {
-      background: var(--primary);
-      color: white;
-    }
   }
-
-  &.concept {
-    border: 1px solid #722ed1;
-    color: #722ed1;
-    background: rgba(114, 46, 209, 0.1);
-
+  
+  &-primary {
+    background: var(--primary-gradient);
+    color: white;
+    border: none;
+    
     &:hover {
-      background: #722ed1;
-      color: white;
-    }
-  }
-
-  &.data {
-    border: 1px solid #52c41a;
-    color: #52c41a;
-    background: rgba(82, 196, 26, 0.1);
-
-    &:hover {
-      background: #52c41a;
-      color: white;
-    }
-  }
-
-  &.location {
-    border: 1px solid #faad14;
-    color: #d48806;
-    background: rgba(250, 173, 20, 0.1);
-
-    &:hover {
-      background: #faad14;
-      color: white;
-    }
-  }
-
-  &.asset {
-    border: 1px solid #eb2f96;
-    color: #eb2f96;
-    background: rgba(235, 47, 150, 0.1);
-
-    &:hover {
-      background: #eb2f96;
-      color: white;
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
     }
   }
 }
 
-// 卡片样式
-.card {
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
+// ==========================================
+// 页面通用样式
+// ==========================================
 
 // 页面标题
 .page-header {
@@ -112,7 +104,9 @@ body {
   }
 }
 
+// ==========================================
 // 统计卡片
+// ==========================================
 .stat-card {
   padding: 18px;
   cursor: pointer;
@@ -152,13 +146,16 @@ body {
 
   .stat-trend {
     font-size: 12px;
+    color: var(--text-3);
 
     &.up { color: var(--success); }
     &.down { color: var(--danger); }
   }
 }
 
+// ==========================================
 // 模板卡片
+// ==========================================
 .tpl-card {
   overflow: hidden;
   cursor: pointer;
@@ -210,10 +207,315 @@ body {
 
     &.hot { background: #fff1f0; color: var(--danger); }
   }
+  
+  .tpl-btn {
+    width: 100%;
+    padding: 8px;
+    background: var(--primary-gradient);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    &:hover {
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    }
+  }
+}
+
+// ==========================================
+// AI 对话区域
+// ==========================================
+.ai-card {
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.ai-welcome {
+  background: linear-gradient(135deg, #f0f7ff, #f5f0ff);
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.ai-avatar {
+  width: 44px;
+  height: 44px;
+  background: var(--ai-gradient);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  margin-bottom: 10px;
+}
+
+.ai-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.ai-list {
+  list-style: none;
+  margin-bottom: 10px;
+  padding: 0;
+  
+  li {
+    color: var(--text-2);
+    padding: 3px 0;
+    font-size: 13px;
+
+    &::before {
+      content: '•';
+      color: var(--primary);
+      margin-right: 8px;
+    }
+  }
+}
+
+.ai-tip {
+  font-size: 12px;
+  color: var(--text-3);
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 6px;
+  border-left: 3px solid var(--primary);
+}
+
+.ai-input-wrap {
+  position: relative;
+  margin-bottom: 14px;
+}
+
+.ai-input {
+  width: 100%;
+  height: 46px;
+  padding: 0 100px 0 18px;
+  border: 2px solid var(--border);
+  border-radius: 23px;
+  font-size: 14px;
+  outline: none;
+  transition: all 0.3s;
+  
+  &:focus {
+    border-color: var(--primary);
+  }
 }
 
-// 变量标签样式
-.var-tag {
+.thinking-modes {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mode-btn {
+  padding: 6px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    border-color: var(--primary);
+    background: var(--primary-light);
+  }
+  
+  &.active {
+    background: var(--primary-light);
+    border-color: var(--primary);
+    color: var(--primary);
+  }
+}
+
+// ==========================================
+// 区块标题
+// ==========================================
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.section-link {
+  font-size: 13px;
+  color: var(--primary);
+  cursor: pointer;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// ==========================================
+// 快捷操作
+// ==========================================
+.quick-actions {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 14px;
+}
+
+.quick-action {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--white);
+  border: 2px dashed var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    border-color: var(--primary);
+    background: var(--primary-light);
+  }
+  
+  .quick-action-icon {
+    width: 40px;
+    height: 40px;
+    background: var(--bg);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+  }
+  
+  .quick-action-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+  }
+  
+  .quick-action-desc {
+    font-size: 12px;
+    color: var(--text-3);
+  }
+}
+
+// ==========================================
+// 实体高亮样式
+// ==========================================
+.entity-highlight {
+  display: inline;
+  padding: 2px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+  border: 1px solid var(--primary);
+  color: var(--primary);
+  background: rgba(24, 144, 255, 0.1);
+
+  &:hover {
+    background: var(--primary);
+    color: white;
+  }
+
+  // 核心实体
+  &.entity {
+    border-color: var(--primary);
+    color: var(--primary);
+    background: rgba(24, 144, 255, 0.1);
+    &:hover { background: var(--primary); color: white; }
+  }
+
+  // 概念/技术
+  &.concept {
+    border-color: #722ed1;
+    color: #722ed1;
+    background: rgba(114, 46, 209, 0.1);
+    &:hover { background: #722ed1; color: white; }
+  }
+
+  // 数据/指标
+  &.data {
+    border-color: #52c41a;
+    color: #52c41a;
+    background: rgba(82, 196, 26, 0.1);
+    &:hover { background: #52c41a; color: white; }
+  }
+
+  // 位置/地点
+  &.location {
+    border-color: #faad14;
+    color: #d48806;
+    background: rgba(250, 173, 20, 0.1);
+    &:hover { background: #faad14; color: white; }
+  }
+
+  // 资产/产品
+  &.asset {
+    border-color: #eb2f96;
+    color: #eb2f96;
+    background: rgba(235, 47, 150, 0.1);
+    &:hover { background: #eb2f96; color: white; }
+  }
+  
+  // 人物
+  &.person {
+    border-color: var(--primary);
+    color: var(--primary);
+    background: rgba(24, 144, 255, 0.1);
+    &:hover { background: var(--primary); color: white; }
+  }
+  
+  // 组织
+  &.org {
+    border-color: #722ed1;
+    color: #722ed1;
+    background: rgba(114, 46, 209, 0.1);
+    &:hover { background: #722ed1; color: white; }
+  }
+  
+  // 日期
+  &.date {
+    border-color: #13c2c2;
+    color: #13c2c2;
+    background: rgba(19, 194, 194, 0.1);
+    &:hover { background: #13c2c2; color: white; }
+  }
+  
+  // 产品
+  &.product {
+    border-color: #eb2f96;
+    color: #eb2f96;
+    background: rgba(235, 47, 150, 0.1);
+    &:hover { background: #eb2f96; color: white; }
+  }
+  
+  // 事件
+  &.event {
+    border-color: #fa8c16;
+    color: #fa8c16;
+    background: rgba(250, 140, 22, 0.1);
+    &:hover { background: #fa8c16; color: white; }
+  }
+  
+  // 法规
+  &.law {
+    border-color: #2f54eb;
+    color: #2f54eb;
+    background: rgba(47, 84, 235, 0.1);
+    &:hover { background: #2f54eb; color: white; }
+  }
+}
+
+// ==========================================
+// 变量/要素标签
+// ==========================================
+.var-tag, .element-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -222,7 +524,7 @@ body {
   border: 1px solid var(--border);
   border-radius: 16px;
   font-size: 12px;
-  cursor: pointer;
+  cursor: grab;
   transition: all 0.2s;
   user-select: none;
 
@@ -231,6 +533,10 @@ body {
     background: var(--primary-light);
     transform: translateY(-1px);
   }
+  
+  &:active {
+    cursor: grabbing;
+  }
 
   &.entity { border-left: 3px solid var(--primary); }
   &.concept { border-left: 3px solid #722ed1; }
@@ -241,3 +547,181 @@ body {
   .tag-icon { font-size: 12px; }
   .tag-name { font-weight: 500; }
 }
+
+// ==========================================
+// 上传区域
+// ==========================================
+.upload-zone {
+  border: 2px dashed var(--border);
+  border-radius: 10px;
+  padding: 24px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    border-color: var(--primary);
+    background: var(--primary-light);
+  }
+  
+  .upload-icon {
+    font-size: 32px;
+    margin-bottom: 8px;
+    color: var(--text-3);
+  }
+  
+  .upload-text {
+    font-size: 13px;
+    color: var(--text-2);
+    margin-bottom: 4px;
+  }
+  
+  .upload-hint {
+    font-size: 11px;
+    color: var(--text-3);
+  }
+}
+
+// ==========================================
+// 文件项
+// ==========================================
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover, &.active {
+    border-color: var(--primary);
+    background: var(--primary-light);
+  }
+  
+  .file-icon {
+    font-size: 28px;
+    flex-shrink: 0;
+    
+    &.pdf { color: #ff4d4f; }
+    &.docx { color: #1890ff; }
+    &.xlsx { color: #52c41a; }
+    &.md { color: #8c8c8c; }
+  }
+  
+  .file-info {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  .file-name {
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .file-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 11px;
+    color: var(--text-3);
+  }
+  
+  .file-status {
+    font-size: 11px;
+    white-space: nowrap;
+    
+    &.parsing { color: var(--primary); }
+    &.done { color: var(--success); }
+  }
+}
+
+// ==========================================
+// 数据表格
+// ==========================================
+.data-table-card {
+  background: var(--white);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  margin: 16px 0;
+  overflow: hidden;
+}
+
+.data-table-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.data-table-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.data-table-source {
+  font-size: 11px;
+  color: var(--text-3);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  
+  th {
+    background: var(--bg);
+    padding: 10px 16px;
+    text-align: left;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-2);
+    border-bottom: 1px solid var(--border);
+  }
+  
+  td {
+    padding: 10px 16px;
+    font-size: 13px;
+    border-bottom: 1px solid var(--border);
+  }
+  
+  tr:last-child td {
+    border-bottom: none;
+  }
+  
+  tr:hover td {
+    background: var(--primary-light);
+  }
+}
+
+// ==========================================
+// 滚动条样式
+// ==========================================
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+  
+  &:hover {
+    background: var(--text-3);
+  }
+}

frontend/vue-demo/src/components/TaskCenter/TaskCenterFab.vue

@@ -42,8 +42,8 @@ watch(() => store.runningTotal, (newVal, oldVal) => {
   width: 56px;
   height: 56px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+  box-shadow: 0 4px 20px rgba(24, 144, 255, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,12 +54,12 @@ watch(() => store.runningTotal, (newVal, oldVal) => {
 
 .task-fab:hover {
   transform: scale(1.1);
-  box-shadow: 0 6px 28px rgba(102, 126, 234, 0.5);
+  box-shadow: 0 6px 28px rgba(24, 144, 255, 0.5);
 }
 
 .task-fab.has-running {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  box-shadow: 0 4px 20px rgba(79, 172, 254, 0.4);
+  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
+  box-shadow: 0 4px 20px rgba(24, 144, 255, 0.4);
   animation: pulse 2s infinite;
 }
 
@@ -103,10 +103,10 @@ watch(() => store.runningTotal, (newVal, oldVal) => {
 
 @keyframes pulse {
   0%, 100% {
-    box-shadow: 0 4px 20px rgba(79, 172, 254, 0.4);
+    box-shadow: 0 4px 20px rgba(24, 144, 255, 0.4);
   }
   50% {
-    box-shadow: 0 4px 30px rgba(79, 172, 254, 0.6);
+    box-shadow: 0 4px 30px rgba(24, 144, 255, 0.6);
   }
 }
 

frontend/vue-demo/src/views/Home.vue

@@ -452,6 +452,7 @@ async function handleUploadTemplate() {
   margin: 0 auto;
 }
 
+// 欢迎区
 .welcome-section {
   margin-bottom: 20px;
 
@@ -462,7 +463,7 @@ async function handleUploadTemplate() {
   }
 
   .gradient-text {
-    background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
+    background: var(--ai-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
@@ -476,71 +477,45 @@ async function handleUploadTemplate() {
   margin-bottom: 20px;
 }
 
+// AI 对话入口 - 使用全局样式
 .ai-card {
-  padding: 20px;
-  margin-bottom: 20px;
-
-  .ai-welcome {
-    background: linear-gradient(135deg, #f0f7ff, #f5f0ff);
-    border-radius: 10px;
-    padding: 16px;
-    margin-bottom: 16px;
-  }
-
-  .ai-avatar {
-    width: 44px;
-    height: 44px;
-    background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 22px;
-    margin-bottom: 10px;
-  }
-
-  .ai-title {
-    font-size: 14px;
-    font-weight: 600;
-    margin-bottom: 8px;
-  }
-
-  .ai-list {
-    list-style: none;
-    margin-bottom: 10px;
-
-    li {
-      color: var(--text-2);
-      padding: 3px 0;
-      font-size: 13px;
-
-      &::before {
-        content: '•';
-        color: var(--primary);
-        margin-right: 8px;
-      }
-    }
-  }
-
-  .ai-tip {
-    font-size: 12px;
-    color: var(--text-3);
-    padding: 8px 12px;
-    background: rgba(255, 255, 255, 0.7);
-    border-radius: 6px;
-    border-left: 3px solid var(--primary);
-  }
-
   .ai-input {
     margin-bottom: 14px;
+    
+    :deep(.el-input__wrapper) {
+      border-radius: 23px;
+      padding: 0 10px 0 18px;
+      height: 46px;
+      border: 2px solid var(--border);
+      box-shadow: none;
+      
+      &:hover, &.is-focus {
+        border-color: var(--primary);
+      }
+    }
   }
 
   .thinking-modes {
     display: flex;
     justify-content: center;
+    
+    :deep(.el-radio-button__inner) {
+      border-radius: 18px;
+      border: 1px solid var(--border);
+      background: var(--bg);
+      font-size: 12px;
+      padding: 6px 12px;
+    }
+    
+    :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+      background: var(--primary-light);
+      border-color: var(--primary);
+      color: var(--primary);
+    }
   }
 }
 
+// 区块
 .section {
   margin-bottom: 20px;
 
@@ -557,12 +532,10 @@ async function handleUploadTemplate() {
   }
 }
 
-.tpl-btn {
-  width: 100%;
-}
-
+// 模板卡片
 .tpl-card {
   position: relative;
+  margin-bottom: 16px;
   
   .tpl-delete-btn {
     position: absolute;
@@ -576,15 +549,20 @@ async function handleUploadTemplate() {
   &:hover .tpl-delete-btn {
     opacity: 1;
   }
+  
+  .tpl-btn {
+    width: 100%;
+  }
 }
 
+// 快捷操作
 .quick-actions {
   .quick-action {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px;
-    background: #fff;
+    background: var(--white);
     border: 2px dashed var(--border);
     border-radius: 10px;
     cursor: pointer;
@@ -618,13 +596,23 @@ async function handleUploadTemplate() {
   }
 }
 
+// 上传区域
 .upload-area {
   width: 100%;
   
+  :deep(.el-upload-dragger) {
+    border: 2px dashed var(--border);
+    border-radius: 10px;
+    
+    &:hover {
+      border-color: var(--primary);
+    }
+  }
+  
   .upload-success {
     text-align: center;
     padding: 20px;
-    color: #52c41a;
+    color: var(--success);
 
     div {
       margin-top: 8px;

frontend/vue-demo/src/views/Login.vue

@@ -146,7 +146,7 @@ async function handleLogin() {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #1890ff 0%, #096dd9 50%, #722ed1 100%);
   padding: 20px;
 }
 

frontend/vue-demo/src/views/Templates.vue

@@ -277,14 +277,41 @@ async function handleCreateTemplate() {
   margin: 0 auto;
 }
 
+// 筛选栏
 .filter-bar {
   display: flex;
   gap: 16px;
   margin-bottom: 20px;
+  
+  :deep(.el-input__wrapper) {
+    border-radius: 6px;
+  }
+  
+  :deep(.el-radio-button__inner) {
+    border-radius: 0;
+    
+    &:first-child {
+      border-radius: 6px 0 0 6px;
+    }
+    
+    &:last-child {
+      border-radius: 0 6px 6px 0;
+    }
+  }
 }
 
+// 模板卡片
 .tpl-card {
   margin-bottom: 16px;
+  
+  .tpl-preview {
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
 
   .tpl-actions {
     display: flex;
@@ -297,4 +324,8 @@ async function handleCreateTemplate() {
   }
 }
 
+// 空状态
+:deep(.el-empty) {
+  padding: 60px 0;
+}
 </style>