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

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