336 lines
7.8 KiB
Markdown
336 lines
7.8 KiB
Markdown
# 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`.
|