feat: 优化主题色系统
1. 更新Light主题主色调为深蓝色(50, 50, 222) 2. 优化Dark主题主色调为亮蓝色(93, 135, 255) 3. 优化文本颜色系统 4. 增强Element Plus组件主题配置 5. 更新前端开发规范文档 6. 添加变更记录
This commit is contained in:
1 parent
afe3e234e9
commit
963e2f80d4
3 files changed
+203
-12
No files matched your search
@@ -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 设计规范中的颜色系统
|
||||
- 同步更新了项目总览文档中的主题色说明
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
|
||||
// 媒体查询-设备尺寸
|
||||
|
||||
Reference in new issue
Block a user