|
|
@@ -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. 响应式断点
|
|
|
|
|
|
| 变量 | 值 | 说明 |
|
|
|
|------|------|------|
|