feat: 优化主题色系统

1. 更新Light主题主色调为深蓝色(50, 50, 222)
2. 优化Dark主题主色调为亮蓝色(93, 135, 255)
3. 优化文本颜色系统
4. 增强Element Plus组件主题配置
5. 更新前端开发规范文档
6. 添加变更记录
This commit is contained in:
zlwu committed 2025-07-05 13:52:29 +08:00
1 parent afe3e234e9
commit 963e2f80d4
3 files changed
+203 -12

No files matched your search

+107
View File
@@ -682,3 +682,110 @@ test('用户列表页面', async ({ page }) => {
await expect(page.locator('.user-list')).toBeVisible();
});
```
## 主题色规范
### 1. 基础主题色值
#### Light 主题
```scss
// 主色调
--art-primary: 50, 50, 222; // 深蓝色,用于主要按钮、链接等
--art-secondary: 73, 190, 255; // 次要蓝色
--art-success: 0, 167, 58; // 成功色
--art-warning: 142, 91, 0; // 警告色
--art-danger: 255, 77, 79; // 危险色
--art-info: 0, 75, 178; // 信息色
--art-error: 250, 137, 107; // 错误色
// 文本颜色
--art-text-gray-600: #333333; // 主要文本
--art-text-gray-700: #000000; // 强调文本
```
#### Dark 主题
```scss
// 主色调
--art-primary: 93, 135, 255; // 亮蓝色
--art-bg-color: #070707; // 背景色
--art-main-bg-color: #161618; // 主要背景色
```
### 2. 使用规范
1. **变量使用方式**
```scss
// 正确用法
color: rgb(var(--art-primary));
background-color: rgb(var(--art-bg-primary));
// 错误用法
color: var(--art-primary); // ❌ 缺少rgb()
```
2. **Element Plus 组件主题**
```scss
// 全局变量
--el-color-primary: rgb(var(--art-primary)) !important;
--el-text-color-regular: #000000 !important;
```
3. **菜单组件样式**
```scss
--el-menu-hover-bg-color: rgb(var(--art-primary)) !important;
--el-menu-active-color: rgb(var(--art-primary)) !important;
```
### 3. 主题切换
1. **Light/Dark 主题切换**
- 通过添加/移除 `html.dark` 类实现
- 自动继承对应主题的所有变量
2. **响应式设计**
- 所有颜色必须使用 CSS 变量
- 禁止使用硬编码的颜色值
### 4. 辅助工具类
```scss
// 背景色
.bg-primary {
background-color: rgb(var(--art-bg-primary)) !important;
}
.bg-success {
background-color: rgb(var(--art-bg-success)) !important;
}
.bg-warning {
background-color: rgb(var(--art-bg-warning)) !important;
}
.bg-danger {
background-color: rgb(var(--art-bg-danger)) !important;
}
// 文本颜色
.text-primary {
color: rgb(var(--art-primary)) !important;
}
.text-success {
color: rgb(var(--art-success)) !important;
}
.text-warning {
color: rgb(var(--art-warning)) !important;
}
.text-danger {
color: rgb(var(--art-danger)) !important;
}
```
### 5. 注意事项
1. 所有新增组件必须使用主题变量系统
2. 禁止使用硬编码的颜色值
3. 确保 Light/Dark 主题下都有良好的显示效果
4. Element Plus 组件的主题配置必须通过全局变量覆盖
@@ -0,0 +1,73 @@
# 代码调整记录 2025-07-05
## 变更人
wuzilong
## 变更时间
2025-07-05 10:00:00
## 变更内容
### 1. 主题色系统优化
#### 修改文件
- `web/src/assets/styles/art-variables.scss`
#### 具体变更
1. Light 主题变量调整:
- 主色调更新:`--art-primary: 50, 50, 222` (深蓝色)
- 文本颜色优化:`--art-text-gray-600: #333333`,`--art-text-gray-700: #000000`
- Element Plus 文本颜色:`--el-text-color-regular: #000000 !important`
2. Dark 主题变量调整:
- 主色调更新:`--art-primary: 93, 135, 255`
- 背景色优化:`--art-bg-color: #070707`
- 主要背景色:`--art-main-bg-color: #161618`
3. 全局变量增强:
- 菜单悬浮背景色:`--el-menu-hover-bg-color: rgb(var(--art-primary)) !important`
- 菜单激活颜色:`--el-menu-active-color: rgb(var(--art-primary)) !important`
#### 变更目的
1. 提升界面视觉体验
2. 优化深色模式下的色彩表现
3. 统一 Element Plus 组件的主题表现
#### 影响范围
- 全局主题色系统
- 所有使用主题变量的组件
- Element Plus 组件的视觉表现
## 相关文档更新
- [x] 前端开发规范文档已同步更新
- [x] UI 设计规范文档已同步更新
## 备注
本次更新主要聚焦于提升用户界面的视觉体验,特别是对深色模式下的色彩表现进行了优化。新的主题色系统更加符合现代化智慧校园的设计理念。
## CSS 样式修复
- **修改时间**: 2025-07-05 11:00:00
- **修改人**: wuzilong
- **修改内容**:
- 修复 el-icon 样式选择器写法
- 文件路径: `web/src/assets/styles/ruoyi.scss`
- 修改前: `:deep(html .el-icon)`
- 修改后: `:deep(.el-icon)`
- 原因: Vue 3 中:deep()选择器语法变更
## 相关文档更新
- 更新了前端开发规范中的主题色定义
- 更新了 UI 设计规范中的颜色系统
- 同步更新了项目总览文档中的主题色说明
+23 -12
View File
@@ -3,12 +3,13 @@
// 默认主题变量 | Light 主题变量
:root {
// Theme color
--art-primary: 93, 135, 255;
--art-primary: 50, 50, 222;
// --art-primary: #409eff
--art-secondary: 73, 190, 255;
--art-error: 250, 137, 107;
--art-info: 83, 155, 255;
--art-success: 19, 222, 185;
--art-warning: 255, 174, 31;
--art-info: 0, 75, 178;
--art-success: 0, 167, 58;
--art-warning: 142, 91, 0;
--art-danger: 255, 77, 79;
// Theme background color
@@ -56,8 +57,8 @@
--art-text-gray-300: #dbdfe9;
--art-text-gray-400: #c4cada;
--art-text-gray-500: #99a1b7;
--art-text-gray-600: #78829d;
--art-text-gray-700: #4b5675;
--art-text-gray-600: #333333;
--art-text-gray-700: #000000;
--art-text-gray-800: #252f4a;
--art-text-gray-900: #071437;
@@ -81,12 +82,12 @@
--art-main-bg-color: #ffffff;
// Element Plus 兼容
--el-color-primary: rgb(var(--art-primary));
--el-color-success: rgb(var(--art-success));
--el-color-warning: rgb(var(--art-warning));
--el-color-danger: rgb(var(--art-danger));
--el-color-error: rgb(var(--art-error));
--el-color-info: rgb(var(--art-info));
--el-color-primary: rgb(var(--art-primary)) !important;
--el-color-success: rgb(var(--art-success)) !important;
--el-color-warning: rgb(var(--art-warning)) !important;
--el-color-danger: rgb(var(--art-danger)) !important;
--el-color-error: rgb(var(--art-error)) !important;
--el-color-info: rgb(var(--art-info)) !important;
// 间距系统
--space-xs: 4px;
@@ -113,6 +114,11 @@
// 主题色
--main-color: rgb(var(--art-primary));
--el-text-color-regular: #000000 !important;
}
// Dark 主题变量
@@ -238,6 +244,11 @@ html.dark {
// 添加 tag 相关变量
--tags-view-active-bg: var(--main-color);
--tags-view-active-border-color: var(--main-color);
--el-menu-hover-bg-color: rgb(var(--art-primary)) !important;
--el-menu-active-color: rgb(var(--art-primary)) !important;
}
// 媒体查询-设备尺寸