# 参数配置类型显示实施计划

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**目标:** 在项目详情页面顶部添加配置类型标签，显示当前项目使用默认配置还是自定义配置

**架构:** 纯前端实现，利用已有的 projectInfo.configType 字段，使用 Element UI 的 el-tag 组件在不同颜色区分配置类型

**技术栈:** Vue.js 2.6.12, Element UI 2.15.14

---

## 前置条件

- ✅ 后端 CcdiProject 实体类已包含 configType 字段
- ✅ getProject() 接口已返回 configType 数据
- ✅ 数据库表 ccdi_project 已存储 config_type 字段
- ✅ 前端项目详情页面已存在 detail.vue 文件

---

## 任务列表

### 任务 1: 添加配置类型标签转换方法

**文件:**
- 修改: `ruoyi-ui/src/views/ccdiProject/detail.vue` (methods 部分)

**步骤 1: 添加 getConfigTypeLabel 方法**

在 `methods` 对象中添加配置类型标签文字转换方法（建议添加在 `getStatusLabel` 方法后面）：

```javascript
/** 获取配置类型标签文字 */
getConfigTypeLabel(configType) {
  const configTypeMap = {
    'default': '默认配置',
    'custom': '自定义配置'
  };
  return configTypeMap[configType] || '默认配置';
},
```

**步骤 2: 添加 getConfigTypeStyle 方法**

在刚才添加的方法后面添加配置类型样式转换方法：

```javascript
/** 获取配置类型标签样式 */
getConfigTypeStyle(configType) {
  const styleMap = {
    'default': 'info',      // 蓝色
    'custom': 'warning'     // 橙色
  };
  return styleMap[configType] || 'info';
},
```

**预期位置:** 在第 220 行 `getStatusLabel` 方法后面

**注意:** 两个方法之间需要逗号分隔

---

### 任务 2: 在模板中添加配置类型标签

**文件:**
- 修改: `ruoyi-ui/src/views/ccdiProject/detail.vue:10-19`

**步骤 1: 在状态标签后添加配置类型标签**

在项目标题区域，在状态标签 `</el-tag>` 后面添加配置类型标签（约第 18 行后）：

```vue
<!-- 配置类型标签 -->
<el-tag
  :type="getConfigTypeStyle(projectInfo.configType)"
  size="small"
>
  {{ getConfigTypeLabel(projectInfo.configType) }}
</el-tag>
```

**完整上下文:**

```vue
<div class="page-title">
  <h2>
    {{ projectInfo.projectName }}
  </h2>
  <el-tag
    :type="getStatusType(projectInfo.projectStatus)"
    size="small"
  >
    {{ getStatusLabel(projectInfo.projectStatus) }}
  </el-tag>
  <!-- 配置类型标签 - 新增 -->
  <el-tag
    :type="getConfigTypeStyle(projectInfo.configType)"
    size="small"
  >
    {{ getConfigTypeLabel(projectInfo.configType) }}
  </el-tag>
</div>
```

**注意:**
- 标签使用 `size="small"` 与状态标签保持一致
- 使用 `:type` 动态绑定样式
- 位置在状态标签后面，与状态标签同级

---

### 任务 3: 本地测试验证

**步骤 1: 启动前端开发服务器**

```bash
cd ruoyi-ui
npm run dev
```

**预期:** 前端服务启动在 http://localhost:80

**步骤 2: 登录系统**

访问 http://localhost:80，使用测试账号登录：
- 用户名: `admin`
- 密码: `admin123`

**步骤 3: 测试默认配置项目**

1. 进入"纪检初核管理" -> "项目管理"
2. 点击一个使用默认配置的项目（configType='default'）
3. 查看项目详情页面顶部

**预期结果:**
- 项目名称旁边显示两个标签：[状态] [默认配置]
- "默认配置"标签为蓝色（info 类型）
- 标签显示正常，无样式错乱

**步骤 4: 测试自定义配置项目**

1. 在参数配置页面修改任意参数值
2. 点击"保存所有修改"
3. 观察页面顶部标签变化

**预期结果:**
- 保存成功后，标签从蓝色 "默认配置" 变为橙色 "自定义配置"
- 配置类型已从 'default' 切换为 'custom'

**步骤 5: 测试边界情况**

刷新页面，验证标签状态保持一致

**预期结果:**
- 刷新后标签颜色和文字与刷新前一致
- 无 JavaScript 控制台错误

**步骤 6: 测试浏览器兼容性**

在不同浏览器（Chrome、Firefox、Edge）中重复步骤 3-5

**预期结果:**
- 各浏览器显示效果一致
- 标签样式正常

---

### 任务 4: 提交代码到 Git

**步骤 1: 查看修改内容**

```bash
git status
git diff ruoyi-ui/src/views/ccdiProject/detail.vue
```

**预期:** 只修改了 detail.vue 文件，修改内容符合设计

**步骤 2: 添加文件到暂存区**

```bash
git add ruoyi-ui/src/views/ccdiProject/detail.vue
```

**步骤 3: 提交更改**

```bash
git commit -m "$(cat <<'EOF'
feat(ui): 在项目详情页面添加配置类型标签显示

- 在项目名称旁添加配置类型标签
- 默认配置显示蓝色"默认配置"标签
- 自定义配置显示橙色"自定义配置"标签
- 添加 getConfigTypeLabel 和 getConfigTypeStyle 方法
- 纯前端实现，无需后端修改

Ref: docs/plans/2026-03-09-param-config-type-display-design.md
EOF
)"
```

**步骤 4: 验证提交**

```bash
git log -1 --stat
```

**预期输出:**
```
commit [hash]
Author: [Your Name] <[Your Email]>
Date:   [Date]

    feat(ui): 在项目详情页面添加配置类型标签显示

    - 在项目名称旁添加配置类型标签
    - 默认配置显示蓝色"默认配置"标签
    - 自定义配置显示橙色"自定义配置"标签
    - 添加 getConfigTypeLabel 和 getConfigTypeStyle 方法
    - 纯前端实现，无需后端修改

    Ref: docs/plans/2026-03-09-param-config-type-display-design.md

 ruoyi-ui/src/views/ccdiProject/detail.vue | [lines changed]
 1 file changed, [stats]
```

---

## 验收清单

实施完成后，请确认以下验收标准：

- [ ] 项目详情页面顶部显示配置类型标签
- [ ] 默认配置显示蓝色 "默认配置" 标签
- [ ] 自定义配置显示橙色 "自定义配置" 标签
- [ ] 标签位置在状态标签旁边
- [ ] 标签样式与设计一致（大小、颜色）
- [ ] 修改参数保存后，标签正确切换
- [ ] 刷新页面后标签状态保持一致
- [ ] 无 JavaScript 控制台错误
- [ ] 不影响现有功能
- [ ] 代码已提交到 Git

---

## 回滚方案

如果实施后出现问题，可以快速回滚：

```bash
# 查看最近的提交
git log --oneline -5

# 回滚到上一个版本
git revert HEAD

# 或者硬回滚（谨慎使用）
git reset --hard HEAD~1
```

---

## 常见问题

**Q1: 标签不显示怎么办？**

检查：
1. `projectInfo.configType` 是否有值（在浏览器控制台打印）
2. 方法名是否正确拼写
3. 模板语法是否正确

**Q2: 标签颜色不对怎么办？**

检查：
1. `getConfigTypeStyle` 方法返回值是否正确
2. Element UI 版本是否支持 info/warning 类型

**Q3: 修改参数后标签不变化怎么办？**

检查：
1. 参数保存是否成功
2. 后端是否正确更新了 configType
3. 页面是否重新加载了 projectInfo

---

## 相关文档

- 设计文档: `docs/plans/2026-03-09-param-config-type-display-design.md`
- Element UI Tag 组件: https://element.eleme.cn/#/zh-CN/component/tag
- 项目 CLAUDE.md: `CLAUDE.md`

---

**计划创建日期:** 2026-03-09
**预计实施时间:** 15-30 分钟
**难度等级:** 简单