diff --git a/.cursor/cursorrules-frontend.md b/.cursor/cursorrules-frontend.md index 0763616e..0f2a6d7e 100644 --- a/.cursor/cursorrules-frontend.md +++ b/.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 组件的主题配置必须通过全局变量覆盖 diff --git a/docs/变更管理/code-adjust-record-2025-07-05-wuzilong.md b/docs/变更管理/code-adjust-record-2025-07-05-wuzilong.md new file mode 100644 index 00000000..1c3ea9e1 --- /dev/null +++ b/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 设计规范中的颜色系统 +- 同步更新了项目总览文档中的主题色说明 diff --git a/web/src/assets/styles/art-variables.scss b/web/src/assets/styles/art-variables.scss index 55b2ced4..dd21cc6f 100644 --- a/web/src/assets/styles/art-variables.scss +++ b/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; + } // 媒体查询-设备尺寸