From 08cc9b2927b4a580ad052e717a2450b12c5c5d8c Mon Sep 17 00:00:00 2001
From: wkc <978997012@qq.com>
Date: Mon, 9 Mar 2026 11:12:43 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E7=B1=BB=E5=9E=8B=E6=98=BE=E7=A4=BA=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在项目详情页面添加配置类型标签显示
- 使用纯前端实现方案，无需后端修改
- 默认配置显示蓝色标签，自定义配置显示橙色标签
---
 ...-03-09-param-config-type-display-design.md | 240 ++++++++++++++++++
 1 file changed, 240 insertions(+)
 create mode 100644 docs/plans/2026-03-09-param-config-type-display-design.md

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
+<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
+**审核状态：** 待审核