ソースを参照

feat: 优化主题色系统

1. 更新Light主题主色调为深蓝色(50, 50, 222)
2. 优化Dark主题主色调为亮蓝色(93, 135, 255)
3. 优化文本颜色系统
4. 增强Element Plus组件主题配置
5. 更新前端开发规范文档
6. 添加变更记录
zlwu 1 年間 前
親
コミット
963e2f80d4

+ 107 - 0
.cursor/cursorrules-frontend.md

@@ -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 组件的主题配置必须通过全局变量覆盖

+ 73 - 0
docs/变更管理/code-adjust-record-2025-07-05-wuzilong.md

@@ -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
web/src/assets/styles/art-variables.scss

@@ -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;
+
 }
 
 // 媒体查询-设备尺寸