diff --git a/docs/plans/2026-03-09-param-config-type-display-implementation.md b/docs/plans/2026-03-09-param-config-type-display-implementation.md new file mode 100644 index 0000000..49c372c --- /dev/null +++ b/docs/plans/2026-03-09-param-config-type-display-implementation.md @@ -0,0 +1,300 @@ +# 参数配置类型显示实施计划 + +> **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: 在状态标签后添加配置类型标签** + +在项目标题区域,在状态标签 `` 后面添加配置类型标签(约第 18 行后): + +```vue + + + {{ getConfigTypeLabel(projectInfo.configType) }} + +``` + +**完整上下文:** + +```vue +
+

+ {{ projectInfo.projectName }} +

+ + {{ getStatusLabel(projectInfo.projectStatus) }} + + + + {{ getConfigTypeLabel(projectInfo.configType) }} + +
+``` + +**注意:** +- 标签使用 `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 分钟 +**难度等级:** 简单