ccdi/docs/plans/frontend/2026-03-16-model-param-csv-alignment-frontend-implementation.md

# Model Param CSV Alignment Frontend Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Make the global and project model-parameter pages render all model information dynamically from the query API, remove any thousand-separator related design, and keep unified save behavior stable.

**Architecture:** Reuse the existing `listAll/saveAll` front-end flow and current card-based layout. Only adjust the page internals so rendering depends entirely on API payloads and modified-state tracking becomes reliably reactive in Vue 2.

**Tech Stack:** Vue 2, Element UI, Axios, npm

---

### Task 1: 盘点当前页面与 API 的真实状态

**Files:**
- Reference: `ruoyi-ui/src/api/ccdi/modelParam.js`
- Reference: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
- Reference: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`

**Step 1: 查看 API 层**

运行：

```bash
Get-Content -Raw 'ruoyi-ui/src/api/ccdi/modelParam.js'
```

预期：`listAllParams`、`saveAllParams` 已存在，无需重复新增接口方法。

**Step 2: 查看全局配置页**

运行：

```bash
Get-Content -Raw 'ruoyi-ui/src/views/ccdi/modelParam/index.vue'
```

预期：页面已按模型卡片展示，但要确认修改记录实现、动态渲染边界和空状态处理。

**Step 3: 查看项目配置页**

运行：

```bash
Get-Content -Raw 'ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue'
```

预期：页面已按模型卡片展示，但与全局页一样需要做实现收敛。

**Step 4: 记录结论**

确认本次前端重点不是“重做布局”，而是：

- 完全依赖接口动态展示
- 去掉千分位相关设计
- 优化修改记录实现

### Task 2: 重构全局参数页的动态展示实现

**Files:**
- Modify: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`

**Step 1: 先写一个失败前检查**

启动前端前先做静态检查：

```bash
Get-Content -Raw 'ruoyi-ui/src/views/ccdi/modelParam/index.vue'
```

重点确认是否存在以下问题：

- 使用 `Set + $forceUpdate`
- 对模型或参数数量有隐含假设
- 对格式化值有额外处理

**Step 2: 写最小实现改动**

将页面调整为：

- 直接渲染 `res.data.models || []`
- 通过 `model.modelCode`、`model.modelName`、`row.paramName`、`row.paramDesc`、`row.paramValue`、`row.paramUnit` 动态展示
- 不做任何千分位格式化或清洗
- 将修改记录改为响应式对象，例如：

```javascript
modifiedParams: {}
```

并使用类似下面的键：

```javascript
const modifiedKey = `${modelCode}:${row.paramCode}`
```

**Step 3: 写保存组装逻辑**

保证 `handleSaveAll` 只提交已修改项，且请求体继续符合现有接口：

```json
{
  "projectId": 0,
  "models": [
    {
      "modelCode": "LARGE_TRANSACTION",
      "params": [
        {
          "paramCode": "SINGLE_TRANSACTION_AMOUNT",
          "paramValue": "1111"
        }
      ]
    }
  ]
}
```

**Step 4: 本地编译验证**

运行：

```bash
cd ruoyi-ui
npm run build:prod
```

预期：构建成功，无语法错误。

**Step 5: 提交**

```bash
git add ruoyi-ui/src/views/ccdi/modelParam/index.vue
git commit -m "feat: 优化全局模型参数页动态展示"
```

### Task 3: 重构项目参数页的动态展示实现

**Files:**
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`

**Step 1: 查看当前实现**

运行：

```bash
Get-Content -Raw 'ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue'
```

预期：与全局页类似，也在使用 `Set + $forceUpdate` 或同类逻辑。

**Step 2: 写最小实现改动**

将页面调整为：

- 完全根据 `listAllParams({ projectId: this.projectId })` 返回结果动态渲染
- 不写死模型名称、数量、顺序和参数结构
- 复用与全局页一致的响应式修改记录方案
- 保存成功后重新加载接口数据

**Step 3: 校验默认项目和自定义项目行为**

确保页面本身不做 `default/custom` 分支拼装，只消费接口返回结果。

**Step 4: 本地编译验证**

运行：

```bash
cd ruoyi-ui
npm run build:prod
```

预期：构建成功。

**Step 5: 提交**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
git commit -m "feat: 优化项目模型参数页动态展示"
```

### Task 4: 统一前端修改记录与保存逻辑

**Files:**
- Modify: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`

**Step 1: 抽出共同规则**

两个页面都应满足：

- 修改后才计入 `modifiedCount`
- 未修改时点击保存提示“没有需要保存的修改”
- 保存成功后清空修改记录并重新拉取数据

**Step 2: 移除不稳定实现**

删除或替换：

- `new Set()`
- `$forceUpdate()`

改为 Vue 2 可稳定追踪的普通对象结构。

**Step 3: 静态验证**

运行：

```bash
Get-Content -Raw 'ruoyi-ui/src/views/ccdi/modelParam/index.vue'
Get-Content -Raw 'ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue'
```

预期：页面内部不再依赖 `Set` 的响应式边界。

**Step 4: 构建验证**

运行：

```bash
cd ruoyi-ui
npm run build:prod
```

预期：构建成功。

**Step 5: 提交**

```bash
git add ruoyi-ui/src/views/ccdi/modelParam/index.vue ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
git commit -m "refactor: 收敛模型参数页修改状态管理"
```

### Task 5: 验证“无千分位设计”和“接口驱动展示”

**Files:**
- Optional Record: `docs/tests/records/model-param-frontend-alignment-test.md`

**Step 1: 启动前端开发服务**

运行：

```bash
cd ruoyi-ui
npm run dev
```

**Step 2: 验证全局参数页**

检查：

- 页面根据接口返回显示全部模型
- 模型标题、参数名称、描述、单位均来自接口
- 输入框不自动插入千分位逗号

**Step 3: 验证项目参数页**

检查：

- 默认配置项目展示系统默认参数全集
- 历史 `custom` 项目只展示自身已有参数
- 页面不写死模型数量和参数数量

**Step 4: 验证统一保存**

检查：

- 修改一个参数后 `modifiedCount` 正确增加
- 保存后成功提示正常
- 重新加载后值与接口一致

**Step 5: 停止前端进程并记录结果**

测试结束后关闭 `npm run dev` 启动的进程，并把结果写入：

```text
docs/tests/records/model-param-frontend-alignment-test.md
```

然后提交：

```bash
git add docs/tests/records/model-param-frontend-alignment-test.md
git commit -m "test: 记录模型参数前端动态展示验证"
```

### Task 6: 做一次前后端联调验收

**Files:**
- Reference: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
- Reference: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
- Reference: `ccdi-project/src/main/java/com/ruoyi/ccdi/project/service/impl/CcdiModelParamServiceImpl.java`

**Step 1: 同时启动前后端**

运行：

```bash
mvn -pl ruoyi-admin -am spring-boot:run
```

```bash
cd ruoyi-ui
npm run dev
```

**Step 2: 联调全局参数页**

验证：

- 接口返回的 5 个模型全部显示
- 参数值与系统默认参数一致
- 修改并保存后，刷新仍保持最新值

**Step 3: 联调项目参数页**

验证：

- `default` 项目读取系统默认参数
- 首次保存后项目切为 `custom`
- 历史 `custom` 项目不补新增模型或参数

**Step 4: 结束测试进程**

按仓库约定，测试结束后关闭前后端进程。

**Step 5: 提交联调记录**

```bash
git add docs/tests/records/model-param-frontend-alignment-test.md docs/tests/records/model-param-backend-alignment-test.md
git commit -m "test: 完成模型参数前后端联调验收"
```

---

Plan complete and saved to `docs/plans/frontend/2026-03-16-model-param-csv-alignment-frontend-implementation.md`.