diff --git a/docs/plans/2026-03-09-param-config-type-display-design.md b/docs/plans/2026-03-09-param-config-type-display-design.md new file mode 100644 index 0000000..1bb514a --- /dev/null +++ b/docs/plans/2026-03-09-param-config-type-display-design.md @@ -0,0 +1,240 @@ +# 参数配置类型显示设计文档 + +## 概述 + +在项目详情页面的参数配置页面,显示当前参数配置是默认配置还是自定义配置。 + +## 需求分析 + +### 背景 + +当前系统中,项目可以使用两种参数配置方式: +- **默认配置**:使用系统级默认参数(`configType = 'default'`) +- **自定义配置**:项目独立的自定义参数(`configType = 'custom'`) + +用户在查看项目详情时,无法直观地识别当前项目使用的是哪种配置方式。 + +### 目标 + +在项目详情页面顶部,项目名称旁边添加配置类型标签,让用户能够快速识别当前项目的参数配置类型。 + +## 设计方案 + +### 1. 展示位置 + +**页面位置:** 项目详情页面顶部(`detail.vue`) + +**具体位置:** 项目名称和状态标签旁边 + +**展示效果:** +``` +[返回] 2024年Q1初核项目 [进行中] [默认配置] + 最后更新时间:2026-03-09 10:30:00 +``` + +### 2. 标签样式 + +使用 Element UI 的 `el-tag` 组件,采用不同颜色区分: + +| 配置类型 | 标签文字 | 颜色类型 | 视觉效果 | +|---------|---------|---------|---------| +| 默认配置 | "默认配置" | `info`(蓝色) | 蓝色背景标签 | +| 自定义配置 | "自定义配置" | `warning`(橙色) | 橙色背景标签 | + +### 3. 实现方案 + +**方案选择:** 纯前端实现 + +**理由:** +- ✅ 实现简单快速 +- ✅ 不需要修改后端代码 +- ✅ 利用现有数据(`projectInfo.configType`) +- ✅ 性能最优(无额外请求) +- ✅ 风险最小 + +**数据流:** +1. 用户打开项目详情页面 +2. 前端调用 `getProject(projectId)` 获取项目信息 +3. 后端返回包含 `configType` 字段的项目数据 +4. 前端根据 `configType` 值显示对应的配置类型标签 + +## 技术实现 + +### 前端修改 + +**修改文件:** `ruoyi-ui/src/views/ccdiProject/detail.vue` + +**修改位置:** 第 10-19 行的页面标题区域 + +**代码实现:** + +```vue + + + +``` + +### 后端依赖 + +**无需修改后端代码** + +**已有数据支持:** +- `CcdiProject` 实体类已包含 `configType` 字段 +- `getProject()` 接口已返回完整的 `configType` 数据 +- 数据库表 `ccdi_project` 已存储 `config_type` 字段 + +### 数据字典 + +系统已存在配置类型字典(在 `sql/ccdi_project.sql` 中初始化): + +```sql +INSERT INTO sys_dict_type (dict_name, dict_type, status, create_by, create_time, remark) +VALUES ('配置方式', 'ccdi_config_type', '0', 'admin', NOW(), '项目配置方式'); + +INSERT INTO sys_dict_data (dict_sort, dict_label, dict_value, dict_type, css_class, list_class, is_default, status, create_by, create_time) +VALUES +(1, '全局默认配置', 'default', 'ccdi_config_type', '', 'primary', 'Y', '0', 'admin', NOW()), +(2, '自定义配置', 'custom', 'ccdi_config_type', '', 'warning', 'N', '0', 'admin', NOW()); +``` + +**注意:** 虽然系统已有配置类型字典,但本设计采用纯前端硬编码方式,理由是: +- 配置类型固定(仅两种),无需动态配置 +- 避免增加字典查询的复杂度 +- 简化实现,提高性能 + +## 测试方案 + +### 功能测试 + +**测试场景:** + +1. **默认配置项目** + - 前提:项目 `configType = 'default'` + - 预期:显示蓝色标签 "默认配置" + +2. **自定义配置项目** + - 前提:项目 `configType = 'custom'` + - 预期:显示橙色标签 "自定义配置" + +3. **配置类型为空** + - 前提:项目 `configType` 为 `null` 或 `undefined` + - 预期:显示蓝色标签 "默认配置"(默认值) + +4. **配置类型切换** + - 前提:用户修改参数后保存 + - 预期:配置类型从 `default` 切换为 `custom`,标签从蓝色变为橙色 + +### 边界测试 + +- 新建项目默认使用默认配置 +- 刷新页面后标签状态保持一致 +- 不同浏览器显示效果一致 + +### 兼容性测试 + +- Chrome、Firefox、Edge 等主流浏览器 +- 不同分辨率下的显示效果 + +## 实施影响 + +### 用户影响 + +- **正面影响:** 用户可以直观识别项目的参数配置类型 +- **负面影响:** 无 + +### 系统影响 + +- **性能影响:** 极小(仅增加一个标签渲染) +- **兼容性:** 完全向后兼容 +- **风险:** 无(纯前端展示,不影响业务逻辑) + +## 实施步骤 + +1. **修改前端代码** - 修改 `detail.vue` 文件 +2. **本地测试** - 验证标签显示正确 +3. **提交代码** - 提交到 Git 仓库 +4. **部署上线** - 正式环境部署 + +## 验收标准 + +✅ 项目详情页面顶部显示配置类型标签 +✅ 默认配置显示蓝色 "默认配置" 标签 +✅ 自定义配置显示橙色 "自定义配置" 标签 +✅ 标签位置在状态标签旁边 +✅ 标签样式与设计一致 +✅ 不影响现有功能 + +## 后续优化 + +暂无后续优化计划。 + +--- + +**设计日期:** 2026-03-09 +**设计人员:** Claude Code +**审核状态:** 待审核