wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
666253eb41685adc7831148d2d973843a3c0394a
ccdi/docs/plans/2026-03-16-model-param-csv-alignment-frontend-implementation.md
wkc a40c44f8b8 Align backend model params CSV
2026-03-16 13:35:40 +08:00

7.7 KiB
Raw Blame History

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 层

运行：

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

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

Step 2: 查看全局配置页

运行：

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

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

Step 3: 查看项目配置页

运行：

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: 先写一个失败前检查

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

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 动态展示
  • 不做任何千分位格式化或清洗
  • 将修改记录改为响应式对象，例如：
modifiedParams: {}

并使用类似下面的键：

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

Step 3: 写保存组装逻辑

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

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

Step 4: 本地编译验证

运行：

cd ruoyi-ui
npm run build:prod

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

Step 5: 提交

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: 查看当前实现

运行：

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: 本地编译验证

运行：

cd ruoyi-ui
npm run build:prod

预期：构建成功。

Step 5: 提交

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: 静态验证

运行：

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: 构建验证

运行：

cd ruoyi-ui
npm run build:prod

预期：构建成功。

Step 5: 提交

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/test-records/model-param-frontend-alignment-test.md

Step 1: 启动前端开发服务

运行：

cd ruoyi-ui
npm run dev

Step 2: 验证全局参数页

检查：

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

Step 3: 验证项目参数页

检查：

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

Step 4: 验证统一保存

检查：

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

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

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

docs/test-records/model-param-frontend-alignment-test.md

然后提交：

git add docs/test-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: 同时启动前后端

运行：

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

cd ruoyi-ui
npm run dev

Step 2: 联调全局参数页

验证：

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

Step 3: 联调项目参数页

验证：

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

Step 4: 结束测试进程

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

Step 5: 提交联调记录

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

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

Reference in New Issue View Git Blame Copy Permalink