wkc/ccdi

Files

- 详细的前端实施步骤
- 包含测试验证方案
- 提供验收清单和回滚方案

2026-03-09 11:14:35 +08:00

7.0 KiB

Raw Blame History

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

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 方法后面）：

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

步骤 2: 添加 getConfigTypeStyle 方法

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

/** 获取配置类型标签样式 */
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 行后）：

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

完整上下文:

<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: 启动前端开发服务器

cd ruoyi-ui
npm run dev

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

步骤 2: 登录系统

访问 http://localhost:80，使用测试账号登录：

用户名: admin
密码: admin123

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

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

预期结果:

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

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

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

预期结果:

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

步骤 5: 测试边界情况

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

预期结果:

刷新后标签颜色和文字与刷新前一致
无 JavaScript 控制台错误

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

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

预期结果:

各浏览器显示效果一致
标签样式正常

任务 4: 提交代码到 Git

步骤 1: 查看修改内容

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

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

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

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

步骤 3: 提交更改

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

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

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

步骤 4: 验证提交

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

回滚方案

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

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

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

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

常见问题

Q1: 标签不显示怎么办？

检查：

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

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

检查：

getConfigTypeStyle 方法返回值是否正确
Element UI 版本是否支持 info/warning 类型

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

检查：

参数保存是否成功
后端是否正确更新了 configType
页面是否重新加载了 projectInfo

7.0 KiB Raw Blame History Unescape Escape

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

前置条件

任务列表

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

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

任务 3: 本地测试验证

任务 4: 提交代码到 Git

验收清单

回滚方案

常见问题

相关文档

7.0 KiB

Raw Blame History