wkc/ccdi

Files

- 在项目详情页面添加配置类型标签显示
- 使用纯前端实现方案，无需后端修改
- 默认配置显示蓝色标签，自定义配置显示橙色标签

2026-03-09 11:12:43 +08:00

6.5 KiB

Raw Blame History

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

概述

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

需求分析

背景

当前系统中，项目可以使用两种参数配置方式：

默认配置：使用系统级默认参数（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）
✅ 性能最优（无额外请求）
✅ 风险最小

数据流：

用户打开项目详情页面
前端调用 getProject(projectId) 获取项目信息
后端返回包含 configType 字段的项目数据
前端根据 configType 值显示对应的配置类型标签

技术实现

前端修改

修改文件： ruoyi-ui/src/views/ccdiProject/detail.vue

修改位置： 第 10-19 行的页面标题区域

代码实现：

<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 中初始化）：

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());

注意： 虽然系统已有配置类型字典，但本设计采用纯前端硬编码方式，理由是：

配置类型固定（仅两种），无需动态配置
避免增加字典查询的复杂度
简化实现，提高性能

测试方案

功能测试

测试场景：

默认配置项目
- 前提：项目 configType = 'default'
- 预期：显示蓝色标签 "默认配置"
自定义配置项目
- 前提：项目 configType = 'custom'
- 预期：显示橙色标签 "自定义配置"
配置类型为空
- 前提：项目 configType 为 null 或 undefined
- 预期：显示蓝色标签 "默认配置"（默认值）
配置类型切换
- 前提：用户修改参数后保存
- 预期：配置类型从 default 切换为 custom，标签从蓝色变为橙色

边界测试

新建项目默认使用默认配置
刷新页面后标签状态保持一致
不同浏览器显示效果一致

兼容性测试

Chrome、Firefox、Edge 等主流浏览器
不同分辨率下的显示效果

实施影响

用户影响

正面影响： 用户可以直观识别项目的参数配置类型
负面影响： 无

系统影响

性能影响： 极小（仅增加一个标签渲染）
兼容性： 完全向后兼容
风险： 无（纯前端展示，不影响业务逻辑）

实施步骤

修改前端代码 - 修改 detail.vue 文件
本地测试 - 验证标签显示正确
提交代码 - 提交到 Git 仓库
部署上线 - 正式环境部署

验收标准

✅ 项目详情页面顶部显示配置类型标签 ✅ 默认配置显示蓝色 "默认配置" 标签 ✅ 自定义配置显示橙色 "自定义配置" 标签 ✅ 标签位置在状态标签旁边 ✅ 标签样式与设计一致 ✅ 不影响现有功能

后续优化

暂无后续优化计划。

设计日期： 2026-03-09 设计人员： Claude Code 审核状态： 待审核

6.5 KiB Raw Blame History Unescape Escape