ccdi/docs/plans/2026-03-06-theme-light-default.md

默认主题修改为浅色模式 - 实施计划

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 工具修改配置

// 修改 ruoyi-ui/src/settings.js 第 10 行
// 修改前：
  sideTheme: 'theme-dark',

// 修改后：
  sideTheme: 'theme-light',

完整代码:

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: 提交代码变更

命令:

git add ruoyi-ui/src/settings.js
git commit -m "feat: 将默认主题修改为浅色模式

- 修改 settings.js 中 sideTheme 默认值从 'theme-dark' 改为 'theme-light'
- 新用户首次访问时将看到浅色模式侧边栏
- 老用户的自定义设置不受影响（localStorage 优先）"

预期结果: Git 提交成功

---

Task 2: 手动测试验证

说明: 此任务需要手动在浏览器中测试，无法自动化

Step 1: 启动前端开发服务器

命令:

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：

   {
     "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: 提交文档更新

命令:

git add CLAUDE.md
git commit -m "docs: 更新文档中的默认主题说明"

---

验收清单

在完成所有任务后，请验证以下内容：

• ruoyi-ui/src/settings.js 中 sideTheme 值为 'theme-light'
• 新用户首次访问看到浅色模式侧边栏
• 老用户的深色模式设置被保留
• 主题切换功能正常（深色 ↔ 浅色）
• 主题保存功能正常（保存到 localStorage）
• 主题重置功能正常（恢复为浅色模式）
• 浏览器控制台无错误信息
• 代码已提交到 Git

---

回滚方案

如果发现问题需要回滚：

回滚步骤

命令:

git revert <commit-hash>

或手动修改 ruoyi-ui/src/settings.js:

sideTheme: 'theme-dark',  // 改回深色模式

然后重新构建：

cd ruoyi-ui
npm run build:prod

---

部署说明

开发环境

无需额外操作，修改后自动生效（热更新）

生产环境

1. 构建前端：

   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 - 设计文档