docs: 合并设计规范到 .claude-rules.md 并清理旧文档

- 更新 .claude-rules.md 至 v4.0
- 合并色彩系统、间距系统、圆角系统、布局容器规范
- 合并响应式断点、组件规范、Header 尺寸规范
- 合并完整 Mock API 列表和 Git 操作规范
- 删除旧设计规范文档避免冗余：
  - 建科小智设计规范.md
  - 页面布局与间距控制规范.md
  - 知识库路由和 Mock 数据说明.md
- 修复 SCSS 文件：恢复误删的 style.scss 文件
- 迁移所有 SCSS 文件从 @import 到 @use 语法

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jk-rag-platform/.claude-rules.md

@@ -1,7 +1,7 @@
 # Claude Project Rules - jk-rag-platform
 
 **项目名称**: 建科小智开放平台
-**版本**: v3.8
+**版本**: v4.0
 **更新日期**: 2026-04-02
 **技术栈**: React 18 + TypeScript + Vite + Ant Design + SCSS + Zustand
 
@@ -56,163 +56,191 @@ src/
 
 ---
 
-## 样式修改规范
+## 样式规范
 
-### 1. 全局变量优先原则
+### 1. SCSS 语法规范
+
+**所有 SCSS 文件必须在第一行导入变量**：
+
+```scss
+@use '@/styles/variables.scss' as *;
+@use 'sass:color';  // 如需使用颜色函数
+```
+
+- `@use` 规则必须在文件最前面，不能有任何注释或代码在其之前
+- 使用 `as *` 避免命名空间前缀
+- 颜色函数（如 `darken`）改用 `color.adjust($var, $lightness: -10%)`
+
+### 2. 全局变量优先原则
 
 - **必须使用** `src/styles/variables.scss` 中定义的变量
 - **禁止硬编码** 颜色值、间距值、圆角值等
-- 所有组件样式文件必须以 **SCSS** 格式，导入全局变量
 
 ```scss
-// 文件顶部必须导入
-@import '@/styles/variables.scss';
-
+// ✅ 正确
 .my-component {
-    // ✅ 使用变量
     color: $text-primary;
     padding: $spacing-4;
     border-radius: $radius-lg;
+}
 
-    // ❌ 禁止硬编码
-    color: #1F2937;
-    padding: 16px;
+// ❌ 错误
+.my-component {
+    color: #1F2937;  // 硬编码
+    padding: 16px;   // 硬编码
 }
 ```
 
-### 2. 间距控制规范
-
-- 使用 `$spacing-*` 系列变量（4px 基准）
-- 页面容器：`.page-container { padding: $spacing-4 $spacing-6 }`
-- 内容区块：`.content-section { margin-bottom: $spacing-4; padding: $spacing-3 }`
-
-间距变量定义：
-- `$spacing-1`: 4px - 最小间距
-- `$spacing-2`: 8px - 小间距
-- `$spacing-3`: 12px - 中等间距
-- `$spacing-4`: 16px - 标准间距
-- `$spacing-5`: 20px - 大间距
-- `$spacing-6`: 24px - 加大间距
-
-### 3. 色彩使用规范 (v3.2 企业品牌色)
-
-主色调：
-- `$primary-color`: #005D80 - 企业主色 (WCAG AAA)
-- `$primary-light`: #007A99 - 悬停/强调
-- `$primary-dark`: #004060 - 点击/激活
+### 3. 色彩系统 (v3.2 企业品牌色)
+
+主色调（基于 favicon #005D80）：
+| 变量 | 值 | 用途 |
+|------|------|------|
+| `$primary-color` | #005D80 | 企业主色 (WCAG AAA) |
+| `$primary-light` | #007A99 | 悬停/强调 |
+| `$primary-dark` | #004060 | 点击/激活 |
+| `$primary-gradient-start` | #00A0CA | 渐变起点 |
+| `$primary-gradient-end` | #005D80 | 渐变终点 |
+
+功能性颜色：
+| 变量 | 值 | 用途 |
+|------|------|------|
+| `$success-color` | #059669 | 成功 |
+| `$warning-color` | #F59E0B | 警告 |
+| `$error-color` | #DC2626 | 错误 |
+| `$info-color` | #00A0C7 | 信息 |
 
 文字色：
-- `$text-primary`: #1F2937 - 主文字色
-- `$text-secondary`: #6B7280 - 次要文字色
-
-规范：
-- **渐变仅用于背景** - 不得用于文字
-- **文字必须使用纯色** - 确保对比度安全
-
-### 4. 圆角系统
-
-- `$radius-sm`: 4px
-- `$radius-md`: 6px
-- `$radius-lg`: 8px
-- `$radius-xl`: 12px
-- `$radius-2xl`: 16px
-- `$radius-full`: 9999px
-
----
-
-## Mock 数据规范
-
-### 1. Mock 数据位置
-
-- 主文件：`src/mock/index.ts`
-- API 特定 Mock: `src/mock/{apiName}.ts`
-- 启用/禁用：在 `src/apis/api.ts` 中修改 `const USE_MOCK = true/false`
-
-### 2. 已完成的 Mock 配置
+| 变量 | 值 | 用途 |
+|------|------|------|
+| `$text-primary` | #1F2937 | 主文字 |
+| `$text-secondary` | #6B7280 | 次要文字 |
+| `$text-hint` | #9CA3AF | 提示文字 |
+| `$text-disabled` | #D1D5DB | 禁用文字 |
+
+背景色：
+| 变量 | 值 | 用途 |
+|------|------|------|
+| `$bg-primary` | #F9FAFB | 主背景 |
+| `$bg-secondary` | #FFFFFF | 次背景 |
+| `$bg-tertiary` | #F3F4F6 | 第三背景 |
+| `$bg-hover` | #F9FAFB | 悬停背景 |
+
+**规范**：
+- 渐变仅用于大图形/按钮背景，不得用于文字
+- 文字必须使用纯色，确保对比度安全
+
+### 4. 间距系统 (4px 基准)
+
+| 变量 | 值 | 用途 |
+|------|------|------|
+| `$spacing-1` | 4px | 最小间距 |
+| `$spacing-2` | 8px | 小间距 |
+| `$spacing-3` | 12px | 中等间距 |
+| `$spacing-4` | 16px | 标准间距 |
+| `$spacing-5` | 20px | 大间距 |
+| `$spacing-6` | 24px | 加大间距 |
+| `$spacing-8` | 32px | 特大间距 |
+| `$spacing-10` | 40px | 页面级间距 |
+
+快捷别名：
+```scss
+$spacing-xs: $spacing-1;
+$spacing-sm: $spacing-2;
+$spacing-md: $spacing-3;
+$spacing-lg: $spacing-4;
+$spacing-xl: $spacing-6;
+$spacing-2xl: $spacing-8;
+```
 
-#### 知识库管理 API
-- `POST /bigmodel/api/knowledgeList`
-- `GET /bigmodel/api/detailKnowledge/:id`
-- `POST /bigmodel/api/createKnowledge`
-- `PUT /bigmodel/api/updateKnowledge/:id`
-- `DELETE /bigmodel/api/delKnowledge/:id`
-- `GET /bigmodel/api/embedding`
+### 5. 圆角系统
 
-#### 文档管理 API
-- `POST /bigmodel/api/documentList`
-- `GET /bigmodel/api/documentDetail/:id`
-- `PUT /bigmodel/api/updateDocument/:id`
-- `DELETE /bigmodel/api/delDocument/:id`
-- `POST /bigmodel/api/uploadDocument/:knowledgeId`
-- `GET /bigmodel/api/documentSetting/:id`
-- `PUT /bigmodel/api/updateDocumentSetting/:id`
+| 变量 | 值 | 用途 |
+|------|------|------|
+| `$radius-sm` | 4px | 标签、徽章 |
+| `$radius-md` | 6px | 小按钮 |
+| `$radius-lg` | 8px | 按钮、输入框 |
+| `$radius-xl` | 12px | 卡片 |
+| `$radius-2xl` | 16px | 模态框、大卡片 |
+| `$radius-full` | 9999px | 圆形 |
 
-#### 切片管理 API
-- `POST /bigmodel/api/getSliceList`
-- `GET /bigmodel/api/getSliceDetail/:sliceId/:knowledgeId`
-- `POST /bigmodel/api/add/slice`
-- `PUT /bigmodel/api/updateSliceInfo`
-- `DELETE /bigmodel/api/deleteSlice/:sliceId/:knowledgeId/:documentId`
+### 6. 布局容器规范
 
-#### 修订工具 API
-- `GET /deepseek/revise/pageList`
-- `GET /deepseek/revise/list`
-- `GET /deepseek/revise/sliceList`
-- `PUT /deepseek/revise/reviseSlice`
-- `GET /deepseek/revise/reviseHistoryList`
+#### 页面容器
+```scss
+.page-container {
+    padding: $spacing-4 $spacing-6;  // 16px / 24px
+    min-height: calc(100vh - $header-height);
+    background: $bg-primary;
+}
+```
 
-#### 字典数据 API
-- `GET /deepseek/api/standard_classification`
-- `GET /deepseek/api/parsing_type`
-- `GET /deepseek/api/splitting_type`
-- `GET /deepseek/api/revision_status`
+#### 内容区块
+```scss
+.content-section {
+    margin-bottom: $spacing-4;  // 16px
+    padding: $spacing-3;        // 12px
+    background: $bg-secondary;
+    border-radius: $radius-lg;
+}
+```
 
-#### 聊天记录 API
-- `POST /bigmodel/api/chatHistory/list`
-- `POST /bigmodel/api/dialog/export/:id`
+#### 列表头部
+```scss
+.list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    margin-bottom: $spacing-4;
+    padding-bottom: $spacing-3;
+    border-bottom: 1px solid $border-base;
+
+    &.with-tips {
+        margin-bottom: $spacing-3;  // 与 GuideTips 间距
+    }
+
+    &.with-back {
+        align-items: center;
+    }
+}
+```
 
-### 3. 需要补充的 Mock 数据
+#### 卡片网格
+```scss
+.app-card-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: $spacing-4;  // 16px
+
+    @media (max-width: $screen-xl) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (max-width: $screen-lg) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: $screen-md) {
+        grid-template-columns: 1fr;
+    }
+}
+```
 
-#### 高优先级
-- `/auth/login` (POST) - 用户登录
-- `/auth/code` (GET) - 获取验证码
-- `/system/user/getInfo` (GET) - 获取用户信息
-- `/deepseek/overview/topData` (GET) - 首页统计数据
-- `/bigmodel/api/getApplicationList` (POST) - 获取应用列表
-- `/deepseek/api/app/audit/list` (POST) - 审核列表
+### 7. 响应式断点
 
-#### 中优先级
-- `/bigmodel/api/selectApplication/:id` (GET) - 应用详情
-- `/deepseek/overview/onlineUserData` (GET) - 在线用户数据
-- `/deepseek/overview/conversationData` (GET) - 会话数据
-- `/deepseek/dataset/pageList` (GET) - 数据集列表
+| 变量 | 值 | 说明 |
+|------|------|------|
+| `$screen-sm` | 640px | 手机横屏 |
+| `$screen-md` | 768px | 平板竖屏 |
+| `$screen-lg` | 1024px | 平板横屏 |
+| `$screen-xl` | 1280px | 桌面小屏 |
+| `$screen-2xl` | 1536px | 桌面大屏 |
 
 ---
 
-## 页面路由规范
-
-### 1. 路由配置
-
-**业务路由** (`src/store/route.tsx`):
-
-- `/overview` - `home/index` - 概览/首页
-- `/appCenter` - `appPlazaList/index` - 应用中心
-- `/appCenter/questionAnswer` - `questionAnswer/list` - 我创建的应用
-- `/appCenter/questionAnswer/create` - `questionAnswer/form/index` - 创建应用
-- `/knowledge/knowledgeLib` - `knowledgeLib/list` - 知识库列表
-- `/knowledge/knowledgeLib/:id/:createBy` - `knowledgeLib/detail/index` - 知识库详情
-- `/knowledge/revisionTool` - `revisionTool/list` - 修订工具
-- `/system/apiKey` - `apiKey/index` - API Key 管理
-- `/system/audit` - `audit/index.placeholder` - 应用审核 (待实现)
+## 组件规范
 
-**公共路由** (`src/router.tsx`):
-
-- `/login` - 登录页
-- `/universalChat` - 智能问答 (独立)
-- `/mobile-test` - H5 测试
-- `/404` - 404 页面
-
-### 2. 标准列表页结构
+### 1. 标准列表页结构
 
 ```tsx
 <div className="page-container">
@@ -235,9 +263,9 @@ src/
 </div>
 ```
 
-### 3. 卡片网格页结构
+### 2. 卡片网格页结构
 
-```text
+```tsx
 <div className="page-container">
     <div className="list-header">...</div>
     <FilterBar tabs={[]} />
@@ -250,90 +278,141 @@ src/
 </div>
 ```
 
+### 3. Header 尺寸规范
+
+```scss
+$header-height: 64px;
+$sidebar-width: 240px;  // 紧凑布局
+$sidebar-collapsed-width: 80px;
+$logo-size: 40px;
+$search-height: 40px;
+```
+
 ---
 
-## Git 操作规范
+## 路由配置
 
-### 1. 提交前检查
+### 业务路由 (`src/store/route.tsx`)
 
-- 确认所有必要的文件已存在或已删除
-- 避免误删重要组件文件
-- 备份关键配置文件
+| 路由 | 组件 | 说明 |
+|------|------|------|
+| `/overview` | `home/index` | 概览/首页 |
+| `/appCenter` | `appPlazaList/index` | 应用中心 |
+| `/appCenter/questionAnswer` | `questionAnswer/list` | 我创建的应用 |
+| `/appCenter/questionAnswer/create` | `questionAnswer/form/index` | 创建应用 |
+| `/knowledge/knowledgeLib` | `knowledgeLib/list` | 知识库列表 |
+| `/knowledge/knowledgeLib/:id/:createBy` | `knowledgeLib/detail/index` | 知识库详情 |
+| `/knowledge/revisionTool` | `revisionTool/list` | 修订工具 |
+| `/system/apiKey` | `apiKey/index` | API Key 管理 |
+| `/system/audit` | `audit/index` | 应用审核 |
 
-### 2. 分支管理
+### 公共路由 (`src/router.tsx`)
 
-- 主分支：`master`
-- 开发分支：当前分支 (如 `zy`)
-- 不要直接 push 到 master
+| 路由 | 说明 |
+|------|------|
+| `/login` | 登录页 |
+| `/universalChat` | 智能问答 (独立) |
+| `/mobile-test` | H5 测试 |
+| `/404` | 404 页面 |
 
-### 3. 当前状态
+---
 
-```bash
-# 查看修改
-git status
-git diff HEAD --stat
-```
+## Mock 数据规范
 
-### 4. 重要规则
+### Mock 配置位置
 
-- **每次修改功能模块之前必须先提交 git** - 确保当前修改已保存后再开始新任务
-- 提交时使用清晰的 commit message
-- 修改完成后自动执行 git commit
+- 主文件：`src/mock/index.ts`
+- API 特定 Mock：`src/mock/{apiName}.ts`
+- 启用/禁用：在 `src/apis/api.ts` 中修改 `const USE_MOCK = true/false`
 
----
+### 已完成的 Mock API
 
-## TODO List
+#### 知识库管理
+- `POST /bigmodel/api/knowledgeList`
+- `GET /bigmodel/api/detailKnowledge/:id`
+- `POST /bigmodel/api/createKnowledge`
+- `PUT /bigmodel/api/updateKnowledge/:id`
+- `DELETE /bigmodel/api/delKnowledge/:id`
+- `GET /bigmodel/api/embedding`
 
-### P0 - 紧急且重要
+#### 文档管理
+- `POST /bigmodel/api/documentList`
+- `GET /bigmodel/api/documentDetail/:id`
+- `PUT /bigmodel/api/updateDocument/:id`
+- `DELETE /bigmodel/api/delDocument/:id`
+- `POST /bigmodel/api/uploadDocument/:knowledgeId`
 
-- [x] **补充核心 API Mock 数据**
-  - [x] 登录 API (`/auth/login`, `/auth/code`) - 已完成于 `src/mock/authApi.ts`
-  - [x] 首页统计 API (`/deepseek/overview/topData`) - 已完成于 `src/mock/overviewApi.ts`
-  - [x] 应用列表 API (`/bigmodel/api/getApplicationList`) - 已完成于 `src/mock/applicationApi.ts`
-  - [x] 审核列表 API (`/deepseek/api/app/audit/list`) - 已完成于 `src/mock/auditApi.ts`
+#### 切片管理
+- `POST /bigmodel/api/getSliceList`
+- `GET /bigmodel/api/getSliceDetail/:sliceId/:knowledgeId`
+- `POST /bigmodel/api/add/slice`
+- `PUT /bigmodel/api/updateSliceInfo`
+- `DELETE /bigmodel/api/deleteSlice/:sliceId/:knowledgeId/:documentId`
 
-- [x] **完成审核页面实现**
-  - 已完成审核列表、审核操作（通过/拒绝）、详情查看、统计数据功能
-  - 文件：`src/pages/system/audit/index.tsx`, `src/pages/system/audit/store.ts`
+#### 修订工具
+- `GET /deepseek/revise/pageList`
+- `GET /deepseek/revise/list`
+- `GET /deepseek/revise/sliceList`
+- `PUT /deepseek/revise/reviseSlice`
+- `GET /deepseek/revise/reviseHistoryList`
+
+#### 字典数据
+- `GET /deepseek/api/standard_classification`
+- `GET /deepseek/api/parsing_type`
+- `GET /deepseek/api/splitting_type`
+- `GET /deepseek/api/revision_status`
+
+#### 聊天记录
+- `POST /bigmodel/api/chatHistory/list`
+- `POST /bigmodel/api/dialog/export/:id`
+
+#### 审核管理
+- `POST /deepseek/api/app/audit/list`
+- `POST /deepseek/api/app/audit/apply`
+- `GET /deepseek/overview/topData`
+
+---
 
-### P1 - 重要不紧急
+## Git 操作规范
+
+### 分支管理
+
+- 主分支：`master`
+- 开发分支：当前分支 (如 `zy`)
+- 不要直接 push 到 master
 
-- [x] **统一样式变量使用**
-  - [x] 检查所有 `.scss` 文件是否导入 `variables.scss`
-  - [x] 移除硬编码的颜色值和间距值
-  - [x] 确保使用 `$spacing-*` 系列变量
-  - 已修复文件：`layout/style.scss`, `layout/components/sidebar.scss`, `system/audit/style.scss`, `styles/global.scss`
+### 重要规则
 
-- [x] **补充应用管理 API Mock**
-  - [x] 应用列表 API
-  - [x] 应用详情 API
-  - [x] 创建应用 API
-  - [x] 更新应用 API
-  - [x] 删除应用 API
+- **每次修改功能模块之前必须先提交 git** - 确保当前修改已保存后再开始新任务
+- 提交时使用清晰的 commit message
+- 修改完成后自动执行 git commit
 
-- [x] **完善文档**
-  - [x] 更新 README.md
-  - [x] 补充 API 接口文档 (`docs/API.md`)
-  - API 文档已参考 Dify 风格，保留：应用调用接口、知识库检索接口
+### 常用命令
 
-### P2 - 可选优化 (待执行)
+```bash
+# 查看状态
+git status
+git diff HEAD --stat
 
-- [ ] 响应式布局优化 - **待确认页面清单**
-- [ ] 主题切换功能 (dark/light)
-- [ ] 性能优化 (代码分割、图片压缩)
+# 提交
+git add -A
+git commit -m "type: description"
+```
 
 ---
 
 ## 技术栈版本
 
-- React: 18.2.0
-- TypeScript: 5.7.0
-- Vite: 7.1.11
-- Ant Design: 5.23.0
-- Zustand: 5.0.12
-- React Router: 7.1.0
-- TailwindCSS: 4.1.17
-- SCSS (Sass): 1.98.0
+| 技术 | 版本 |
+|------|------|
+| React | 18.2.0 |
+| TypeScript | 5.7.0 |
+| Vite | 7.1.11 |
+| Ant Design | 5.23.0 |
+| Zustand | 5.0.12 |
+| React Router | 7.1.0 |
+| TailwindCSS | 4.1.17 |
+| SCSS (Sass) | 1.98.0 |
 
 ---
 
@@ -351,26 +430,9 @@ npm run build:prod      # 构建生产版
 
 ---
 
-## 登录认证
-
-### SSO 认证地址
-
-`http://esc.sribs.com.cn:8080/esc-sso/oauth2.0/authorize?client_id=e97f94cf93761f4d69e8&response_type=code`
-
-### Token 验证
-
-在 `src/router.tsx` 中实现：
-- Token 登录验证
-- Code 换 Token 流程
-- 白名单路由 (`/login`)
-
----
-
 ## 相关文件
 
 - `README.md` - 项目说明
-- `页面布局与间距控制规范.md` - 布局规范
-- `知识库路由和 Mock 数据说明.md` - Mock 数据说明
-
-
-**最后更新**: 2026-04-02
+- `src/styles/variables.scss` - 全局样式变量
+- `src/styles/global.scss` - 全局样式
+- `docs/API.md` - API 接口文档

jk-rag-platform/.claude/settings.local.json

@@ -103,7 +103,8 @@
       "Bash(for file:*)",
       "Bash(rm -rf node_modules/.vite)",
       "Bash(find . -name \"*.vite\" -type d -exec rm -rf {} +)",
-      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:3100/)"
+      "Bash(curl -s -o /dev/null -w \"%{http_code}\" http://localhost:3100/)",
+      "Bash(ls -la *.md)"
     ]
   }
 }

jk-rag-platform/package.json

@@ -39,7 +39,6 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^7.1.0",
     "tailwindcss": "^4.1.17",
-    "xlsx": "^0.18.5",
     "zustand": "^5.0.12"
   },
   "devDependencies": {

jk-rag-platform/src/components/404/style.scss

@@ -1,3 +1,4 @@
+@use '@/styles/variables.scss' as *;
 .notFound {
     width: 100%;
     height: 100%;

jk-rag-platform/src/pages/deepseek/dataExport/style.scss

@@ -0,0 +1,2 @@
+// DeepSeek 数据导出页面样式
+// 注意：.content-section 已在全局 global.less 中定义，此处不需要重复

jk-rag-platform/src/pages/knowledgeLib/detail/style.scss

@@ -1,3 +1,4 @@
+@use '@/styles/variables.scss' as *;
 // 知识库详情页面样式
 // 说明：优先使用全局样式，本文件只定义页面特定的 Markdown 渲染样式
 

jk-rag-platform/src/pages/otherApps/style.scss

@@ -0,0 +1,29 @@
+@use '@/styles/variables.scss' as *;
+// 导入全局样式变量
+
+// 其他应用列表页面样式
+// 说明：
+// - .list-header 已在全局 global.less 中定义
+// - .sort-buttons 已在全局 global.less 中定义
+// - .filter-btn 已在全局 global.less 中定义
+// - .pagination-container 已在全局 global.less 中定义
+// 本文件仅保留页面特定的响应式样式
+
+.app-plaza-list {
+    padding: $spacing-4 $spacing-6;  // 16px/24px - 紧凑间距
+    min-height: calc(100vh - $header-height);
+    background: $bg-primary;
+}
+
+// 响应式适配
+@media (max-width: 1024px) {
+    .app-plaza-list {
+        padding: $spacing-4 $spacing-6;
+    }
+}
+
+@media (max-width: 768px) {
+    .app-plaza-list {
+        padding: $spacing-4;
+    }
+}

jk-rag-platform/src/pages/questionAnswer/info/style.scss

@@ -0,0 +1,105 @@
+@use '@/styles/variables.scss' as *;
+// 导入全局样式变量
+
+// ===== 创建应用页面样式 =====
+// 注意：
+// 1. 主容器使用全局的 .page-layout（已定义在 PageLayout/index.less）
+// 2. 标题栏使用 .list-header.with-back（已定义在 global.less）
+// 3. 此处只定义页面特定的表单和布局样式，不要覆盖全局样式
+
+// ===== 预设问题区域 =====
+.preset-questions {
+    margin: $spacing-6 0;
+
+    h4 {
+        margin-bottom: $spacing-4;
+        color: $text-primary;
+        font-size: $font-lg;
+        font-weight: $font-weight-medium;
+    }
+
+    .question-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: $spacing-3;
+        gap: $spacing-3;
+
+        label {
+            min-width: 80px;
+            color: $text-secondary;
+            font-size: $font-md;
+        }
+
+        .question-input {
+            flex: 1;
+            min-width: 200px;
+        }
+
+        .question-actions {
+            display: flex;
+            gap: $spacing-2;
+
+            .question-icon {
+                font-size: 18px;
+                color: $primary-color;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+                    color: $primary-color-hover;
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+}
+
+// ===== Splitter 布局 =====
+.app-splitter {
+    border: 1px solid $border-light;
+    border-radius: $radius-lg;
+    height: calc(100vh - 200px);
+    min-height: 400px;
+
+    .splitter-panel {
+        padding: $spacing-5;
+        overflow-y: auto;
+    }
+}
+
+// ===== Prompt 编辑区 =====
+.prompt-editor {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .prompt-info {
+        margin-bottom: $spacing-3;
+
+        .variable-highlight {
+            color: $primary-color;
+            font-weight: $font-weight-medium;
+            padding: 2px 6px;
+            border-radius: $radius-sm;
+            background: rgba(0, 93, 128, 0.1);
+            font-family: $font-family-mono;
+        }
+    }
+
+    .prompt-textarea {
+        flex: 1;
+        min-height: 300px;
+        resize: vertical;
+    }
+}
+
+// ===== 隐藏滚动条 =====
+.hide-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}

jk-rag-platform/src/pages/system/contentManagement/style.scss

@@ -0,0 +1,2 @@
+// 系统管理 - 内容管理页面样式
+// 注意：.content-section 已在全局 global.less 中定义，此处不需要重复

jk-rag-platform/src/pages/system/usageStatistics/style.scss

@@ -0,0 +1,2 @@
+// 系统管理 - 使用统计页面样式
+// 注意：.content-section 已在全局 global.less 中定义，此处不需要重复

jk-rag-platform/知识库路由和 Mock 数据说明.md

@@ -1,279 +0,0 @@
-# 知识库页面路由和 Mock 数据说明
-
-## 一、知识库页面路由结构
-
-### 1. 主路由 `/knowledge`
-- **面包屑名称**: 知识库管理
-- **显示**: 是
-
-### 2. 二级路由
-
-#### 2.1 知识库列表 `/knowledge/knowledgeLib`
-- **面包屑名称**: 知识库
-- **显示**: 是
-- **页面文件**: `src/pages/knowledgeLib/list/index.tsx`
-- **子路由**:
-  - `/knowledge/knowledgeLib` (列表首页)
-  - `/knowledge/knowledgeLib/create` (创建知识库)
-  - `/knowledge/knowledgeLib/:knowledgeId/:createBy` (知识库详情)
-
-#### 2.2 修订工具 `/knowledge/revisionTool`
-- **面包屑名称**: 修订工具
-- **显示**: 是
-- **页面文件**: `src/pages/knowledgeLib/revisionTool/list/index.tsx`
-
-### 3. 三级页面和弹出层
-
-#### 3.1 知识库详情页面 `/knowledge/knowledgeLib/:knowledgeId/:createBy`
-- **面包屑名称**: 知识库详情
-- **显示**: 否（隐藏）
-- **页面文件**: `src/pages/knowledgeLib/detail/index.tsx`
-- **功能**:
-  - 文档列表管理
-  - 文档上传
-  - 文档编辑
-  - 文档删除
-  - 文档配置
-  - 切片管理
-  - 引用知识库
-
-#### 3.2 弹出层组件
-
-##### 3.2.1 InfoModal
-- **用途**: 文档重命名
-- **文件**: `src/pages/knowledgeLib/detail/components/InfoModal.tsx`
-
-##### 3.2.2 InfoModalSetting
-- **用途**: 文档配置设置
-- **文件**: `src/pages/knowledgeLib/detail/components/InfoModalSetting.tsx`
-
-##### 3.2.3 UploadModal
-- **用途**: 文档上传
-- **文件**: `src/pages/knowledgeLib/detail/components/UploadModal.tsx`
-
-##### 3.2.4 MdModal
-- **用途**: 切片查看和编辑
-- **文件**: `src/pages/knowledgeLib/detail/components/MdModal.tsx`
-
-##### 3.2.5 QuoteModal
-- **用途**: 引用知识库
-- **文件**: `src/pages/knowledgeLib/detail/components/QuoteModal.tsx`
-
-##### 3.2.6 PrevewSlice
-- **用途**: 切片预览
-- **文件**: `src/pages/knowledgeLib/detail/components/prevewSlice.tsx`
-
-#### 3.3 修订工具页面组件
-
-##### 3.3.1 ReviseDrawer
-- **用途**: 修订抽屉组件
-- **文件**: `src/pages/knowledgeLib/revisionTool/components/reviseDrawer.tsx`
-
-##### 3.3.2 RevisionHistory
-- **用途**: 修订历史记录
-- **文件**: `src/pages/knowledgeLib/revisionTool/components/revisionHistory.tsx`
-
-## 二、API 接口 Mock 数据
-
-### 1. Mock 数据文件
-
-#### 1.1 主 Mock 数据文件
-- **文件**: `src/mock/index.ts`
-- **包含数据**:
-  - `mockKnowledgeLibList`: 知识库列表数据（8 条）
-  - `mockKnowledgeLibDetail`: 知识库详情数据
-  - `mockDocumentList`: 文档列表数据（5 条）
-  - `mockSliceList`: 切片列表数据（5 条）
-  - `mockReviseToolList`: 修订工具列表数据（3 条）
-  - `mockReviseHistoryList`: 修订历史数据（2 条）
-  - `mockEmbeddingList`: 向量化模型列表（3 条）
-  - `mockParsingTypeList`: 解析类型列表（4 条）
-  - `mockSplittingTypeList`: 切分规则列表（4 条）
-  - `mockStandardClassificationList`: 标准分类列表（3 条）
-  - `mockRevisionStatusList`: 修订状态列表（2 条）
-  - `mockChatHistoryList`: 聊天记录列表（2 条）
-
-#### 1.2 Mock API 拦截器
-- **文件**: `src/mock/knowledgeApi.ts`
-- **功能**: 提供所有知识库相关 API 的 Mock 实现
-
-### 2. Mock API 接口列表
-
-#### 2.1 知识库管理 API
-
-| 接口 | 方法 | Mock 函数 | 说明 |
-|------|------|----------|------|
-| `/bigmodel/api/knowledgeList` | POST | `mockFetchKnowledgeLibList` | 获取知识库列表 |
-| `/bigmodel/api/detailKnowledge/:id` | GET | `mockFetchKnowledgeLibDetail` | 获取知识库详情 |
-| `/bigmodel/api/createKnowledge` | POST | `mockCreateKnowledgeLib` | 创建知识库 |
-| `/bigmodel/api/updateKnowledge/:id` | PUT | `mockModifyKnowledgeLib` | 修改知识库 |
-| `/bigmodel/api/delKnowledge/:id` | DELETE | `mockDeleteKnowledgeLib` | 删除知识库 |
-| `/bigmodel/api/embedding` | GET | `mockFetchEmbeddingList` | 获取向量化模型列表 |
-
-#### 2.2 文档管理 API
-
-| 接口 | 方法 | Mock 函数 | 说明 |
-|------|------|----------|------|
-| `/bigmodel/api/documentList` | POST | `mockFetchDocumentLibList` | 获取文档列表 |
-| `/bigmodel/api/documentDetail/:id` | GET | `mockFetchDocumentLibDetail` | 获取文档详情 |
-| `/bigmodel/api/updateDocument/:id` | PUT | `mockModifyDocumentLib` | 修改文档 |
-| `/bigmodel/api/delDocument/:id` | DELETE | `mockDeleteDocumentLib` | 删除文档 |
-| `/bigmodel/api/uploadDocument/:knowledgeId` | POST | `mockUploadDocument` | 上传文档 |
-| `/bigmodel/api/documentSetting/:id` | GET | `mockFetchDocumentSetting` | 获取文档配置 |
-| `/bigmodel/api/updateDocumentSetting/:id` | PUT | `mockModifyDocumentSetting` | 修改文档配置 |
-
-#### 2.3 切片管理 API
-
-| 接口 | 方法 | Mock 函数 | 说明 |
-|------|------|----------|------|
-| `/bigmodel/api/getSliceList` | POST | `mockFetchSliceList` | 获取切片列表 |
-| `/bigmodel/api/getSliceDetail/:sliceId/:knowledgeId` | GET | `mockFetchSliceDetail` | 获取切片详情 |
-| `/bigmodel/api/add/slice` | POST | `mockAddSlice` | 新增切片 |
-| `/bigmodel/api/updateSliceInfo` | PUT | `mockModifySlice` | 修改切片 |
-| `/bigmodel/api/deleteSlice/:sliceId/:knowledgeId/:documentId` | DELETE | `mockDeleteSlice` | 删除切片 |
-
-#### 2.4 修订工具 API
-
-| 接口 | 方法 | Mock 函数 | 说明 |
-|------|------|----------|------|
-| `/deepseek/revise/pageList` | GET | `mockFetchReviseToolList` | 获取修订工具列表（分页） |
-| `/deepseek/revise/list` | GET | `mockFetchReviseToolAllList` | 获取修订工具列表（不分页） |
-| `/deepseek/revise/sliceList` | GET | `mockFetchReviseToolSliceList` | 获取修订切片列表 |
-| `/deepseek/revise/reviseSlice` | PUT | `mockSubmitReviseSlice` | 提交修订切片 |
-| `/deepseek/revise/reviseHistoryList` | GET | `mockFetchReviseHistoryList` | 获取修订历史列表 |
-
-#### 2.5 字典数据 API
-
-| 接口 | 方法 | Mock 函数 | 说明 |
-|------|------|----------|------|
-| `/deepseek/api/standard_classification` | GET | `mockFetchTakaiAppTypeList` | 获取标准分类 |
-| `/deepseek/api/parsing_type` | GET | `mockFetchTakaiAppTypeList` | 获取解析类型 |
-| `/deepseek/api/splitting_type` | GET | `mockFetchTakaiAppTypeList` | 获取切分规则 |
-| `/deepseek/api/revision_status` | GET | `mockFetchTakaiAppTypeList` | 获取修订状态 |
-
-#### 2.6 聊天记录 API
-
-| 接口 | 方法 | Mock 函数 | 说明 |
-|------|------|----------|------|
-| `/bigmodel/api/chatHistory/list` | POST | `mockFetchChatHistoryList` | 获取聊天记录列表 |
-| `/bigmodel/api/dialog/export/:id` | POST | `mockExportChatHistory` | 导出聊天记录 |
-
-## 三、Mock 数据示例
-
-### 3.1 知识库列表数据示例
-
-```json
-{
-  "knowledgeId": "kb001",
-  "name": "政务公文知识库",
-  "createBy": "admin",
-  "standardClassification": "0",
-  "splittingType": "1",
-  "docCount": 128,
-  "sliceCount": 1024,
-  "createTime": "2024-01-15 10:30:00",
-  "updateTime": "2024-01-19 10:30"
-}
-```
-
-### 3.2 文档列表数据示例
-
-```json
-{
-  "id": "doc001",
-  "name": "政务服务指南.pdf",
-  "url": "/files/doc001.pdf",
-  "length": 1024000,
-  "sentenceSize": 150,
-  "knowledgeType": 1,
-  "customSeparator": ["\\n"],
-  "embeddingStat": 1,
-  "wordNum": 5000,
-  "parseImage": 0,
-  "createTime": "2024-01-15 10:30:00",
-  "updateTime": "2024-01-19 10:30",
-  "knowledgeId": "kb001",
-  "knowledgeName": "政务公文知识库",
-  "status": "completed"
-}
-```
-
-### 3.3 切片列表数据示例
-
-```json
-{
-  "sliceId": "slice001",
-  "knowledgeId": "kb001",
-  "documentId": "doc001",
-  "sliceText": "政务服务是指政府机关通过多种渠道和方式，为公民、法人和其他组织提供的各类公共服务。",
-  "sliceNum": 1,
-  "createTime": "2024-01-15 10:30:00",
-  "updateTime": "2024-01-19 10:30",
-  "status": "active"
-}
-```
-
-## 四、启用/禁用 Mock
-
-在 `src/apis/api.ts` 中修改 `USE_MOCK` 常量：
-
-```typescript
-// 是否启用 Mock 模式
-const USE_MOCK = true;  // 启用 Mock
-// const USE_MOCK = false;  // 禁用 Mock，使用真实 API
-```
-
-## 五、测试路由
-
-### 5.1 访问知识库列表
-```
-http://localhost:3100/knowledge/knowledgeLib
-```
-
-### 5.2 访问创建知识库页面
-```
-http://localhost:3100/knowledge/knowledgeLib/create
-```
-
-### 5.3 访问知识库详情页面
-```
-http://localhost:3100/knowledge/knowledgeLib/kb001/admin
-```
-
-### 5.4 访问修订工具页面
-```
-http://localhost:3100/knowledge/revisionTool
-```
-
-## 六、注意事项
-
-1. **路由配置**: 所有路由已在 `src/store/route.tsx` 中配置完成
-2. **Mock 数据**: 所有 API 接口已配置 Mock 数据，无需后端即可测试
-3. **弹出层**: 所有弹出层组件均为页面内组件，不需要单独路由
-4. **路由参数**: 知识库详情页面使用 `:knowledgeId/:createBy` 作为路由参数
-5. **权限控制**: 页面中的操作按钮根据用户权限和配置显示/隐藏
-
-## 七、文件清单
-
-### 7.1 路由文件
-- `src/store/route.tsx` - 路由配置
-
-### 7.2 页面文件
-- `src/pages/knowledgeLib/list/index.tsx` - 知识库列表
-- `src/pages/knowledgeLib/detail/index.tsx` - 知识库详情
-- `src/pages/knowledgeLib/revisionTool/list/index.tsx` - 修订工具列表
-
-### 7.3 组件文件
-- `src/pages/knowledgeLib/detail/components/InfoModal.tsx`
-- `src/pages/knowledgeLib/detail/components/InfoModalSetting.tsx`
-- `src/pages/knowledgeLib/detail/components/UploadModal.tsx`
-- `src/pages/knowledgeLib/detail/components/MdModal.tsx`
-- `src/pages/knowledgeLib/detail/components/QuoteModal.tsx`
-- `src/pages/knowledgeLib/detail/components/prevewSlice.tsx`
-- `src/pages/knowledgeLib/revisionTool/components/reviseDrawer.tsx`
-- `src/pages/knowledgeLib/revisionTool/components/revisionHistory.tsx`
-
-### 7.4 Mock 文件
-- `src/mock/index.ts` - Mock 数据
-- `src/mock/knowledgeApi.ts` - Mock API 拦截器
-- `src/apis/api.ts` - API 配置（含 Mock 支持）

jk-rag-platform/页面布局与间距控制规范.md

@@ -1,436 +0,0 @@
-# 页面布局与间距控制规范
-
-**版本**: v3.8
-**更新时间**: 2026-03-24
-
----
-
-## 📋 一、路由与页面布局对应表
-
-### 1.1 主布局容器
-
-所有页面都使用统一的布局结构：
-
-```
-<div className="page-container">          ← 页面容器（全局统一）
-    <div className="list-header">         ← 标题区域
-        <h1>页面标题</h1>
-        <p>页面描述</p>
-        <div className="list-header-actions">
-            <Button>创建</Button>
-        </div>
-    </div>
-    
-    <GuideTips />                         ← Tips 提示（可选）
-    
-    <FilterBar />                         ← 筛选工具栏（可选）
-    
-    <div className="content-section">     ← 内容区块（白色背景）
-        {/* 表格/卡片/列表等 */}
-    </div>
-</div>
-```
-
-### 1.2 路由与页面布局详细对应
-
-| 路由 | 页面组件 | 标题 | 筛选栏 | 内容类型 | 使用组件 |
-|------|---------|------|--------|---------|---------|
-| **`/overview`** | `home/index` | 概览 | ❌ | 统计卡片 | `StatsGrid` |
-| **`/appCenter`** | `appPlazaList/index` | 全部 RAG 应用 | ✅ | 卡片网格 | `AppCard` + `.app-card-grid` |
-| **`/appCenter/category/*`** | `categoryApps/index` | 分类应用 | ✅ | 卡片网格 | `AppCard` + `.app-card-grid` |
-| **`/appCenter/questionAnswer`** | `questionAnswer/list` | 我创建的应用 | ❌ | 卡片网格 | `AppCard` + `.app-card-grid` |
-| **`/appCenter/questionAnswer/create`** | `questionAnswer/form` | 创建应用 | ❌ | 表单 | `Step1Drawer` |
-| **`/knowledge/knowledgeLib`** | `knowledgeLib/list` | 知识库 | ✅ | 表格 | `Table` |
-| **`/knowledge/knowledgeLib/create`** | `knowledgeLib/list` | 创建知识库 | ❌ | 表单 | `InfoModal` |
-| **`/system/apiKey`** | `apiKey/index` | API Key 管理 | ✅ | 表格 | `Table` |
-| **`/system/audit`** | `audit/index` | 应用审核 | ✅ | 表格 | `Table` |
-| **`/universalChat`** | `universalChat/index` | 智能问答 | ❌ | 对话界面 | `ChatInterface` |
-| **`/mobile-test`** | `mobile/MobileH5` | H5 测试 | ✅ | 混合 | `FilterBar` + `ChatInterface` |
-
----
-
-## 📐 二、全局间距控制
-
-### 2.1 间距变量系统
-
-所有间距使用全局变量，定义在 `src/styles/variables.less`：
-
-```less
-// 4px 基准间距系统
-@spacing-1: 4px;    // 最小间距
-@spacing-2: 8px;    // 小间距
-@spacing-3: 12px;   // 中等间距
-@spacing-4: 16px;   // 标准间距
-@spacing-5: 20px;   // 大间距
-@spacing-6: 24px;   // 加大间距
-@spacing-8: 32px;   // 特大间距
-@spacing-10: 40px;  // 页面级间距
-```
-
-### 2.2 容器间距控制
-
-#### **页面容器（`.page-container`）**
-
-```less
-.page-container {
-    padding: @spacing-4 @spacing-6;  // 上下 16px，左右 24px
-    min-height: calc(100vh - @header-height);
-    background: @bg-primary;
-}
-```
-
-**修改方式**：
-```less
-// 在 global.less 中统一修改
-.page-container {
-    padding: @spacing-6 @spacing-8;  // 改为更宽松的间距
-}
-```
-
-#### **内容区块（`.content-section`）**
-
-```less
-.content-section {
-    margin-bottom: @spacing-6;  // 与下一区块间距 24px
-    padding: @spacing-4;        // 内边距 20px
-    background: @bg-secondary;
-    border-radius: @radius-lg;
-}
-```
-
-**修改方式**：
-```less
-// 在 global.less 中统一修改
-.content-section {
-    margin-bottom: @spacing-5;  // 改为 20px
-    padding: @spacing-4;        // 改为 16px
-}
-```
-
-#### **区块间距（`.section-gap`）**
-
-```less
-.section-gap {
-    margin-bottom: @spacing-5;  // 20px 统一间距
-}
-```
-
-### 2.3 列表头部间距
-
-```less
-.list-header {
-    margin-bottom: @spacing-4;  // 与下方内容间距 16px
-    padding-bottom: @spacing-3; // 标题栏底部内边距 12px
-    border-bottom: 1px solid @border-base;
-    
-    // 紧跟 GuideTips 时
-    &.with-tips {
-        margin-bottom: 0;  // 紧贴 GuideTips
-    }
-}
-```
-
-### 2.4 筛选工具栏间距
-
-```less
-.filter-bar {
-    padding: @spacing-3 0;  // 上下 12px
-    margin-bottom: 0;       // 无外边距（让内容容器控制）
-}
-```
-
----
-
-## 🎯 三、全局控制方法
-
-### 3.1 修改全局间距（推荐）
-
-**位置**：`src/styles/global.less`
-
-**示例 1**：增加所有页面容器的内边距
-```less
-// 修改前
-.page-container {
-    padding: @spacing-4 @spacing-6;  // 16px / 24px
-}
-
-// 修改后
-.page-container {
-    padding: @spacing-6 @spacing-8;  // 24px / 32px - 更宽松
-}
-```
-
-**示例 2**：统一内容区块间距
-```less
-// 修改前
-.content-section {
-    margin-bottom: @spacing-6;  // 24px
-}
-
-// 修改后
-.content-section {
-    margin-bottom: @spacing-5;  // 20px - 更紧凑
-}
-```
-
-### 3.2 修改特定页面间距
-
-**位置**：页面自己的 `style.less` 文件
-
-**示例**：知识库列表页面增加额外间距
-```less
-// src/pages/knowledgeLib/list/style.less
-
-.knowledgeLibList {
-    // 覆盖全局间距
-    .page-container {
-        padding-top: @spacing-8;  // 顶部增加间距
-    }
-    
-    .content-section {
-        margin-bottom: @spacing-8;  // 增加底部间距
-    }
-}
-```
-
-### 3.3 使用间距工具类
-
-**在 JSX 中使用**：
-
-```tsx
-// 增加顶部间距
-<div className="mt-4">内容</div>  {/* margin-top: 16px */}
-
-// 增加底部间距
-<div className="mb-6">内容</div>  {/* margin-bottom: 24px */}
-
-// 增加内边距
-<div className="p-5">内容</div>   {/* padding: 20px */}
-```
-
-**可用的工具类**：
-
-| 类名 | 说明 | 值 |
-|------|------|-----|
-| `.mt-1` ~ `.mt-6` | 上外边距 | 4px ~ 24px |
-| `.mb-1` ~ `.mb-6` | 下外边距 | 4px ~ 24px |
-| `.p-1` ~ `.p-6` | 内边距 | 4px ~ 24px |
-
----
-
-## 📊 四、常见布局场景
-
-### 4.1 标准列表页（知识库、API Key、审核）
-
-```tsx
-<div className="page-container">
-    {/* 标题区域 */}
-    <div className="list-header">
-        <div className="list-header-title">
-            <h1>知识库管理</h1>
-            <p>管理您的所有知识库</p>
-        </div>
-        <div className="list-header-actions">
-            <Button type="primary" icon={<PlusOutlined />}>创建</Button>
-        </div>
-    </div>
-    
-    {/* Tips 提示 */}
-    <GuideTips visible={true} title="..." steps={...} />
-    
-    {/* 筛选工具栏 */}
-    <FilterBar tabs={...} searchValue={...} />
-    
-    {/* 内容区块 */}
-    <div className="content-section">
-        <Table ... />
-    </div>
-</div>
-```
-
-**间距说明**：
-- `.list-header` → `.guide-tips-wrapper`: 0px (紧贴)
-- `.guide-tips-wrapper` → `.filter-bar`: 0px (紧贴)
-- `.filter-bar` → `.content-section`: 0px (紧贴)
-- `.content-section` 内部：`padding: 20px`
-
-### 4.2 卡片网格页（应用中心）
-
-```tsx
-<div className="page-container">
-    <div className="list-header">
-        <h1>应用中心</h1>
-        <p>浏览所有 RAG 应用</p>
-    </div>
-    
-    <FilterBar tabs={...} />
-    
-    <div className="app-card-grid">
-        <AppCard ... />
-        <AppCard ... />
-    </div>
-    
-    <div className="pagination-container">
-        <Pagination ... />
-    </div>
-</div>
-```
-
-**间距说明**：
-- `.filter-bar` → `.app-card-grid`: 0px (紧贴)
-- `.app-card-grid` 内部：`gap: 16px`
-- `.app-card-grid` → `.pagination-container`: 24px
-
-### 4.3 统计概览页（首页）
-
-```tsx
-<div className="page-container">
-    <div className="list-header">
-        <h1>概览</h1>
-        <p>查看系统使用情况</p>
-    </div>
-    
-    <StatsGrid stats={...} />
-</div>
-```
-
-**间距说明**：
-- `.list-header` → `StatsGrid`: 24px (默认)
-
----
-
-## 🔧 五、快速修改指南
-
-### 5.1 增加所有页面的上下间距
-
-**修改位置**：`src/styles/global.less`
-
-```less
-.page-container {
-    padding: @spacing-6 @spacing-8;  // 改为 24px / 32px
-}
-```
-
-### 5.2 增加内容区块之间的间距
-
-```less
-.content-section {
-    margin-bottom: @spacing-8;  // 改为 32px
-}
-```
-
-### 5.3 增加标题与内容的间距
-
-```less
-.list-header {
-    margin-bottom: @spacing-6;  // 改为 24px
-}
-```
-
-### 5.4 增加筛选栏与内容的间距
-
-**方法 1**：在 `FilterBar` 组件样式中修改
-```less
-// src/components/common/FilterBar/index.less
-.filter-bar {
-    margin-bottom: @spacing-4;  // 改为 16px
-}
-```
-
-**方法 2**：在内容区块上增加上边距
-```less
-.content-section {
-    margin-top: @spacing-4;  // 增加顶部间距 16px
-}
-```
-
----
-
-## 📋 六、最佳实践
-
-### ✅ 推荐做法
-
-1. **使用全局变量**
-   ```less
-   // ✅ 正确
-   .my-class {
-       margin-bottom: @spacing-5;
-   }
-   
-   // ❌ 错误
-   .my-class {
-       margin-bottom: 20px;  // 硬编码
-   }
-   ```
-
-2. **优先修改全局样式**
-   ```less
-   // ✅ 在 global.less 中统一修改
-   .content-section {
-       margin-bottom: @spacing-8;
-   }
-   ```
-
-3. **使用工具类**
-   ```tsx
-   // ✅ 使用现有工具类
-   <div className="mb-4">内容</div>
-   ```
-
-### ❌ 避免的做法
-
-1. **不要在组件中硬编码间距**
-   ```tsx
-   // ❌ 错误
-   <div style={{ marginBottom: '20px' }}>内容</div>
-   
-   // ✅ 正确
-   <div className="mb-5">内容</div>
-   ```
-
-2. **不要重复定义全局样式**
-   ```less
-   // ❌ 错误 - 在组件样式中重复定义
-   .my-component .content-section {
-       margin-bottom: 24px;
-   }
-   
-   // ✅ 正确 - 使用全局类
-   <div className="content-section">内容</div>
-   ```
-
----
-
-## 🎯 七、总结
-
-### 全局间距控制层级
-
-```
-1. 页面容器 (.page-container)
-   └─ padding: @spacing-4 @spacing-6
-
-2. 标题区域 (.list-header)
-   └─ margin-bottom: @spacing-4
-
-3. Tips 提示 (.guide-tips-wrapper)
-   └─ margin-bottom: @spacing-4
-
-4. 筛选工具栏 (.filter-bar)
-   └─ margin-bottom: 0
-
-5. 内容区块 (.content-section)
-   └─ margin-bottom: @spacing-6
-   └─ padding: @spacing-5
-```
-
-### 修改优先级
-
-1. **全局修改** → `src/styles/global.less`
-2. **页面特定** → `src/pages/xxx/style.less`
-3. **组件特定** → `src/components/xxx/index.less`
-
----
-
-**文档维护**: AI Assistant
-**最后更新**: 2026-03-24
-**版本**: v3.8