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

# 参数配置类型显示设计文档

## 概述

在项目详情页面的参数配置页面，显示当前参数配置是默认配置还是自定义配置。

## 需求分析

### 背景

当前系统中，项目可以使用两种参数配置方式：
- **默认配置**：使用系统级默认参数（`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
**审核状态：** 待审核