فهرست منبع

style: 修复 SCSS 文件 @use 规范和冗余样式

- 添加缺失的 @use 规则到 6 个文件
- 移除 knowledgeLib/detail 目录下与 global.scss 重复的 .ant-typography 定义
- 修复 questionAnswer/info/style.scss 中的硬编码字体大小
- 更新 .claude-rules.md 添加 Ant Design 样式覆盖原则

修复的文件:
- src/components/chat/welcome.scss
- src/pages/deepseek/dataExport/style.scss
- src/pages/system/contentManagement/style.scss
- src/pages/system/usageStatistics/style.scss
- src/pages/system/audit/components/style.scss
- src/pages/questionAnswer/form/style.scss
- src/pages/knowledgeLib/detail/style.scss
- src/pages/knowledgeLib/detail/components/style.scss
- src/pages/questionAnswer/info/style.scss

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Ryuiso 1 ماه پیش
والد
کامیت
fe5cb35f76

+ 31 - 6
jk-rag-platform/.claude-rules.md

@@ -91,7 +91,32 @@ src/
 }
 ```
 
-### 3. 色彩系统 (v3.2 企业品牌色)
+### 3. Ant Design 组件样式覆盖原则
+
+**优先使用全局主题定制**:
+- Ant Design 组件样式统一在 `src/styles/global.scss` 中定义
+- 组件文件中不要重复定义 Ant Design 覆盖样式
+- 能使用 Ant Design 官方 props 实现的(如 `size`, `type`, `color`),不要写自定义样式
+
+**换色优先,少用覆盖**:
+- ✅ 正确:使用全局变量换色(如 `$primary-color`, `$radius-lg`)
+- ❌ 错误:大量 `!important` 覆盖 Ant Design 默认行为
+
+**全局已定义的组件样式**:
+- `.ant-btn` - 按钮(圆角、颜色、悬停效果)
+- `.ant-input`, `.ant-select` - 输入框和下拉选择
+- `.ant-table` - 表格(圆角、表头背景、悬停效果)
+- `.ant-card` - 卡片(圆角、边框、阴影)
+- `.ant-tag` - 标签(圆角、颜色)
+- `.ant-modal`, `.ant-drawer` - 模态框和抽屉
+- `.ant-tooltip`, `.ant-popover` - 提示框
+- `.ant-picker` - 日期选择器
+- `.ant-form-item` - 表单项
+- `.ant-radio`, `.ant-checkbox` - 单选和复选框
+- `.ant-steps` - 步骤条
+- `.ant-upload` - 上传组件
+
+### 4. 色彩系统 (v3.2 企业品牌色)
 
 主色调(基于 favicon #005D80):
 | 变量 | 值 | 用途 |
@@ -130,7 +155,7 @@ src/
 - 渐变仅用于大图形/按钮背景,不得用于文字
 - 文字必须使用纯色,确保对比度安全
 
-### 4. 间距系统 (4px 基准)
+### 5. 间距系统 (4px 基准)
 
 | 变量 | 值 | 用途 |
 |------|------|------|
@@ -141,7 +166,7 @@ src/
 | `$spacing-5` | 20px | 大间距 |
 | `$spacing-6` | 24px | 加大间距 |
 | `$spacing-8` | 32px | 特大间距 |
-| `$spacing-10` | 40px | 页面级间距 |
+
 
 快捷别名:
 ```scss
@@ -153,7 +178,7 @@ $spacing-xl: $spacing-6;
 $spacing-2xl: $spacing-8;
 ```
 
-### 5. 圆角系统
+### 6. 圆角系统
 
 | 变量 | 值 | 用途 |
 |------|------|------|
@@ -164,7 +189,7 @@ $spacing-2xl: $spacing-8;
 | `$radius-2xl` | 16px | 模态框、大卡片 |
 | `$radius-full` | 9999px | 圆形 |
 
-### 6. 布局容器规范
+### 7. 布局容器规范
 
 #### 页面容器
 ```scss
@@ -226,7 +251,7 @@ $spacing-2xl: $spacing-8;
 }
 ```
 
-### 7. 响应式断点
+### 8. 响应式断点
 
 | 变量 | 值 | 说明 |
 |------|------|------|

+ 4 - 1
jk-rag-platform/src/components/chat/welcome.scss

@@ -1,4 +1,7 @@
-.welcome-container{
+@use '@/styles/variables.scss' as *;
+// Chat 欢迎组件样式
+
+.welcome-container {
     width: 100%;
     height: 100%;
 }

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

@@ -1,2 +1,3 @@
+@use '@/styles/variables.scss' as *;
 // DeepSeek 数据导出页面样式
-// 注意:.content-section 已在全局 global.less 中定义,此处不需要重复
+// 注意:.content-section 已在全局 global.scss 中定义,此处不需要重复

+ 4 - 34
jk-rag-platform/src/pages/knowledgeLib/detail/components/style.scss

@@ -1,44 +1,14 @@
 @use '@/styles/variables.scss' as *;
-// 覆盖 markdown 渲染出来的样式 - 使用全局变量
-
-.ant-typography {
-    h1 {
-        font-size: $font-4xl;   // 20px
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h2 {
-        font-size: $font-3xl;
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h3 {
-        font-size: $font-2xl;
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h4 {
-        font-size: $font-lg;
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h5, h6 {
-        font-size: $font-base;
-        color: $text-primary;
-        margin: 2px 0;
-    }
-}
+// 知识库详情组件样式
+// 说明:.ant-typography 标题样式已在全局 global.scss 中定义,此处不需要重复
 
+// PDF 预览相关样式(组件特定)
 .ant-spin-container {
     width: 100%;
 }
 
 .md_center {
     .ant-tabs-tab {
-        padding: 0 !important;
+        padding: 0 !important;  // 使用 !important 覆盖 Ant Design 默认
     }
 }

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

@@ -3,39 +3,7 @@
 // 说明:优先使用全局样式,本文件只定义页面特定的 Markdown 渲染样式
 
 // ===== Markdown 渲染样式(页面特定)=====
-// 注意:这些样式覆盖 markdown 渲染出来的内容
-
-.ant-typography {
-    h1 {
-        font-size: $font-4xl;   // 20px - 使用全局变量
-        color: $text-primary;   // 使用全局变量
-        margin: 2px 0;
-    }
-
-    h2 {
-        font-size: $font-3xl;   // 18px
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h3 {
-        font-size: $font-2xl;   // 16px
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h4 {
-        font-size: $font-lg;    // 14px
-        color: $text-primary;
-        margin: 2px 0;
-    }
-
-    h5, h6 {
-        font-size: $font-base;  // 12px
-        color: $text-primary;
-        margin: 2px 0;
-    }
-}
+// 注意:.ant-typography 标题样式已在全局 global.scss 中定义,此处不需要重复
 
 // PDF 预览相关样式(页面特定)
 .ant-spin-container {

+ 2 - 3
jk-rag-platform/src/pages/questionAnswer/form/style.scss

@@ -1,4 +1,3 @@
 @use '@/styles/variables.scss' as *;
-// 导入全局样式变量
-
-// ===== 问答表单样式 =====
+// 问答表单样式
+// 使用全局变量,避免硬编码

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

@@ -40,13 +40,13 @@
             gap: $spacing-2;
 
             .question-icon {
-                font-size: 18px;
+                font-size: $icon-lg;  // 18px
                 color: $primary-color;
                 cursor: pointer;
                 transition: all 0.2s ease;
 
                 &:hover {
-                    color: $primary-color-hover;
+                    color: $primary-light;  // 使用全局变量替代 $primary-color-hover
                     transform: scale(1.1);
                 }
             }

+ 2 - 7
jk-rag-platform/src/pages/system/audit/components/style.scss

@@ -1,8 +1,3 @@
 @use '@/styles/variables.scss' as *;
-// 导入全局样式变量
-
-// ===== 创建/编辑表单组件样式 =====
-// 注意:
-// 1. 本样式文件只服务于 form 目录下的组件
-// 2. 不覆盖全局样式(.page-layout, .list-header 等)
-// 3. 使用局部类名避免冲突
+// 系统管理 - 审核组件样式
+// 注意:只定义组件特定样式,不覆盖全局样式

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

@@ -1,2 +1,3 @@
+@use '@/styles/variables.scss' as *;
 // 系统管理 - 内容管理页面样式
-// 注意:.content-section 已在全局 global.less 中定义,此处不需要重复
+// 注意:.content-section 已在全局 global.scss 中定义,此处不需要重复

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

@@ -1,2 +1,3 @@
+@use '@/styles/variables.scss' as *;
 // 系统管理 - 使用统计页面样式
-// 注意:.content-section 已在全局 global.less 中定义,此处不需要重复
+// 注意:.content-section 已在全局 global.scss 中定义,此处不需要重复