305 lines
6.2 KiB
Markdown
305 lines
6.2 KiB
Markdown
# 默认主题修改为浅色模式 - 实施计划
|
||
|
||
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
||
|
||
**目标:** 将前端默认主题从深色模式改为浅色模式，新用户首次访问时看到浅色侧边栏
|
||
|
||
**架构:** 修改 `settings.js` 中的默认配置，Vuex store 会自动读取该配置并应用到界面
|
||
|
||
**技术栈:** Vue.js 2.6, Vuex 3.6, Element UI 2.15
|
||
|
||
---
|
||
|
||
## Task 1: 修改默认主题配置
|
||
|
||
**文件:**
|
||
- Modify: `ruoyi-ui/src/settings.js:10`（修改第 10 行）
|
||
|
||
### Step 1: 读取当前配置文件
|
||
|
||
**操作:** 使用 Read 工具读取文件
|
||
|
||
```
|
||
Read: ruoyi-ui/src/settings.js
|
||
```
|
||
|
||
**预期结果:** 看到第 10 行为 `sideTheme: 'theme-dark',`
|
||
|
||
### Step 2: 修改默认主题为浅色模式
|
||
|
||
**操作:** 使用 Edit 工具修改配置
|
||
|
||
```javascript
|
||
// 修改 ruoyi-ui/src/settings.js 第 10 行
|
||
// 修改前：
|
||
sideTheme: 'theme-dark',
|
||
|
||
// 修改后：
|
||
sideTheme: 'theme-light',
|
||
```
|
||
|
||
**完整代码:**
|
||
|
||
```javascript
|
||
module.exports = {
|
||
/**
|
||
* 网页标题
|
||
*/
|
||
title: process.env.VUE_APP_TITLE,
|
||
|
||
/**
|
||
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
|
||
*/
|
||
sideTheme: 'theme-light',
|
||
|
||
/**
|
||
* 系统布局配置
|
||
*/
|
||
showSettings: true,
|
||
|
||
/**
|
||
* 菜单导航模式 1、纯左侧 2、混合（左侧+顶部） 3、纯顶部
|
||
*/
|
||
navType: 1,
|
||
|
||
/**
|
||
* 是否显示 tagsView
|
||
*/
|
||
tagsView: true,
|
||
|
||
/**
|
||
* 显示页签图标
|
||
*/
|
||
tagsIcon: false,
|
||
|
||
/**
|
||
* 是否固定头部
|
||
*/
|
||
fixedHeader: true,
|
||
|
||
/**
|
||
* 是否显示logo
|
||
*/
|
||
sidebarLogo: true,
|
||
|
||
/**
|
||
* 是否显示动态标题
|
||
*/
|
||
dynamicTitle: false,
|
||
|
||
/**
|
||
* 是否显示底部版权
|
||
*/
|
||
footerVisible: false,
|
||
|
||
/**
|
||
* 底部版权文本内容
|
||
*/
|
||
footerContent: 'Copyright © 2018-2026 RuoYi. All Rights Reserved.'
|
||
}
|
||
```
|
||
|
||
### Step 3: 提交代码变更
|
||
|
||
**命令:**
|
||
|
||
```bash
|
||
git add ruoyi-ui/src/settings.js
|
||
git commit -m "feat: 将默认主题修改为浅色模式
|
||
|
||
- 修改 settings.js 中 sideTheme 默认值从 'theme-dark' 改为 'theme-light'
|
||
- 新用户首次访问时将看到浅色模式侧边栏
|
||
- 老用户的自定义设置不受影响（localStorage 优先）"
|
||
```
|
||
|
||
**预期结果:** Git 提交成功
|
||
|
||
---
|
||
|
||
## Task 2: 手动测试验证
|
||
|
||
**说明:** 此任务需要手动在浏览器中测试，无法自动化
|
||
|
||
### Step 1: 启动前端开发服务器
|
||
|
||
**命令:**
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run dev
|
||
```
|
||
|
||
**预期结果:** 前端服务启动在 http://localhost:80
|
||
|
||
### Step 2: 测试新用户体验
|
||
|
||
**操作步骤:**
|
||
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 进入 Application/应用 标签
|
||
3. 在左侧找到 Local Storage
|
||
4. 删除所有 `layout-setting` 相关的存储项
|
||
5. 刷新页面（Ctrl+F5 强制刷新）
|
||
|
||
**预期结果:**
|
||
- 侧边栏为浅色模式（白色背景，深色文字）
|
||
- 侧边栏 Logo 区域为浅色
|
||
- 菜单项为深色文字
|
||
|
||
### Step 3: 测试老用户体验（深色模式）
|
||
|
||
**操作步骤:**
|
||
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 进入 Application/应用 标签
|
||
3. 在 Local Storage 中添加/修改 `layout-setting`：
|
||
```json
|
||
{
|
||
"sideTheme": "theme-dark",
|
||
"theme": "#409EFF"
|
||
}
|
||
```
|
||
4. 刷新页面（Ctrl+F5 强制刷新）
|
||
|
||
**预期结果:**
|
||
- 侧边栏为深色模式（深色背景，浅色文字）
|
||
- 老用户的设置被保留
|
||
|
||
### Step 4: 测试主题切换功能
|
||
|
||
**操作步骤:**
|
||
|
||
1. 登录系统
|
||
2. 点击右上角设置图标（齿轮图标）
|
||
3. 在右侧抽屉中找到"主题风格设置"
|
||
4. 点击深色模式图标
|
||
5. 观察侧边栏变化
|
||
|
||
**预期结果:**
|
||
- 侧边栏立即切换为深色模式
|
||
- 菜单颜色变为浅色文字
|
||
|
||
### Step 5: 测试主题保存功能
|
||
|
||
**操作步骤:**
|
||
|
||
1. 在设置抽屉中切换为深色模式
|
||
2. 点击底部的"保存配置"按钮
|
||
3. 等待提示"正在保存到本地"
|
||
4. 刷新页面（F5）
|
||
|
||
**预期结果:**
|
||
- 刷新后侧边栏仍为深色模式
|
||
- localStorage 中保存了 `layout-setting` 数据
|
||
|
||
### Step 6: 测试主题重置功能
|
||
|
||
**操作步骤:**
|
||
|
||
1. 在设置抽屉中切换为深色模式并保存
|
||
2. 点击底部的"重置配置"按钮
|
||
3. 等待页面自动刷新
|
||
|
||
**预期结果:**
|
||
- 页面自动刷新
|
||
- 侧边栏恢复为浅色模式（默认值）
|
||
- localStorage 中的 `layout-setting` 被清除
|
||
|
||
---
|
||
|
||
## Task 3: 更新项目文档（可选）
|
||
|
||
**文件:**
|
||
- Modify: `CLAUDE.md` 或 `README.md`（如果有主题相关的说明）
|
||
|
||
### Step 1: 更新 CLAUDE.md 中的主题说明
|
||
|
||
**操作:** 检查 CLAUDE.md 中是否有关于默认主题的说明，如果有则更新
|
||
|
||
**修改位置:** 如果文档中提到"默认深色模式"，需要更新为"默认浅色模式"
|
||
|
||
### Step 2: 提交文档更新
|
||
|
||
**命令:**
|
||
|
||
```bash
|
||
git add CLAUDE.md
|
||
git commit -m "docs: 更新文档中的默认主题说明"
|
||
```
|
||
|
||
---
|
||
|
||
## 验收清单
|
||
|
||
在完成所有任务后，请验证以下内容：
|
||
|
||
- [ ] `ruoyi-ui/src/settings.js` 中 `sideTheme` 值为 `'theme-light'`
|
||
- [ ] 新用户首次访问看到浅色模式侧边栏
|
||
- [ ] 老用户的深色模式设置被保留
|
||
- [ ] 主题切换功能正常（深色 ↔ 浅色）
|
||
- [ ] 主题保存功能正常（保存到 localStorage）
|
||
- [ ] 主题重置功能正常（恢复为浅色模式）
|
||
- [ ] 浏览器控制台无错误信息
|
||
- [ ] 代码已提交到 Git
|
||
|
||
---
|
||
|
||
## 回滚方案
|
||
|
||
如果发现问题需要回滚：
|
||
|
||
### 回滚步骤
|
||
|
||
**命令:**
|
||
|
||
```bash
|
||
git revert <commit-hash>
|
||
```
|
||
|
||
或手动修改 `ruoyi-ui/src/settings.js`:
|
||
|
||
```javascript
|
||
sideTheme: 'theme-dark', // 改回深色模式
|
||
```
|
||
|
||
然后重新构建：
|
||
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
---
|
||
|
||
## 部署说明
|
||
|
||
### 开发环境
|
||
|
||
无需额外操作，修改后自动生效（热更新）
|
||
|
||
### 生产环境
|
||
|
||
1. 构建前端：
|
||
```bash
|
||
cd ruoyi-ui
|
||
npm run build:prod
|
||
```
|
||
|
||
2. 部署 `ruoyi-ui/dist/` 目录到生产服务器
|
||
|
||
3. 用户刷新浏览器即可看到效果
|
||
|
||
**注意:**
|
||
- 不需要重启后端服务
|
||
- 不需要清理数据库
|
||
- 不需要用户做任何操作
|
||
|
||
---
|
||
|
||
## 相关文件
|
||
|
||
- `ruoyi-ui/src/settings.js` - 默认配置文件（本次修改）
|
||
- `ruoyi-ui/src/store/modules/settings.js` - Vuex 状态管理（无需修改）
|
||
- `ruoyi-ui/src/layout/components/Settings/index.vue` - 设置界面（无需修改）
|
||
- `docs/plans/2026-03-06-theme-light-default-design.md` - 设计文档
|