docs: 添加参数配置类型显示设计文档
- 在项目详情页面添加配置类型标签显示 - 使用纯前端实现方案，无需后端修改 - 默认配置显示蓝色标签，自定义配置显示橙色标签
This commit is contained in:
240
docs/plans/2026-03-09-param-config-type-display-design.md
Normal file
240
docs/plans/2026-03-09-param-config-type-display-design.md
Normal file
@@ -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
|
||||||
|
<template>
|
||||||
|
<div class="detail-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<el-button size="small" icon="el-icon-back" @click="handleBack"
|
||||||
|
>返回</el-button
|
||||||
|
>
|
||||||
|
<div class="title-section">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<p class="update-time">
|
||||||
|
最后更新时间：{{ formatUpdateTime(projectInfo.updateTime) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ... 其他代码 ... -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
// ... 现有方法 ...
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取配置类型标签文字
|
||||||
|
* @param {string} configType - 配置类型
|
||||||
|
* @returns {string} 标签文字
|
||||||
|
*/
|
||||||
|
getConfigTypeLabel(configType) {
|
||||||
|
const configTypeMap = {
|
||||||
|
'default': '默认配置',
|
||||||
|
'custom': '自定义配置'
|
||||||
|
};
|
||||||
|
return configTypeMap[configType] || '默认配置';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取配置类型标签样式
|
||||||
|
* @param {string} configType - 配置类型
|
||||||
|
* @returns {string} Element UI tag 类型
|
||||||
|
*/
|
||||||
|
getConfigTypeStyle(configType) {
|
||||||
|
const styleMap = {
|
||||||
|
'default': 'info', // 蓝色
|
||||||
|
'custom': 'warning' // 橙色
|
||||||
|
};
|
||||||
|
return styleMap[configType] || 'info';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 后端依赖
|
||||||
|
|
||||||
|
**无需修改后端代码**
|
||||||
|
|
||||||
|
**已有数据支持：**
|
||||||
|
- `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
|
||||||
|
**审核状态：** 待审核
|
||||||
Reference in New Issue
Block a user