From 2fde76d180c3d368411b87cc378eede557b7b50c Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Fri, 6 Mar 2026 11:24:52 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=96=BD=E8=AE=A1?=
 =?UTF-8?q?=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/plans/2026-03-06-theme-light-default.md | 304 +++++++++++++++++++
 1 file changed, 304 insertions(+)
 create mode 100644 docs/plans/2026-03-06-theme-light-default.md

diff --git a/docs/plans/2026-03-06-theme-light-default.md b/docs/plans/2026-03-06-theme-light-default.md
new file mode 100644
index 0000000..11d2997
--- /dev/null
+++ b/docs/plans/2026-03-06-theme-light-default.md
@@ -0,0 +1,304 @@
+# 默认主题修改为浅色模式 - 实施计划
+
+> **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` - 设计文档