# Bank Tag Placeholder Models Frontend Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 确认本次“银行流水模型占位补齐”不会引入前端改动需求，并为后端落地后的页面兼容性和回归验证提供明确执行步骤。

**Architecture:** 本次需求的主变更点在后端规则定义、XML 占位 SQL 和打标调度，不新增前端接口或页面。前端计划采用“先核查现有动态渲染能力，再做最小 smoke 验证”的策略；如果验证通过，则前端不做代码改动。

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

---

### Task 1: 核查本次需求是否影响现有前端代码

**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`
- Reference: `docs/design/2026-03-18-bank-tag-model-placeholder-design.md`

- [ ] **Step 1: 查看模型参数 API**

运行：

```bash
sed -n '1,220p' ruoyi-ui/src/api/ccdi/modelParam.js
```

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

- [ ] **Step 2: 查看全局参数页**

运行：

```bash
sed -n '1,220p' ruoyi-ui/src/views/ccdi/modelParam/index.vue
```

预期：页面按接口返回的 `modelGroups` 动态渲染，不写死模型数量或固定模型清单。

- [ ] **Step 3: 查看项目参数页**

运行：

```bash
sed -n '1,220p' ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
```

预期：页面同样根据接口返回动态渲染，不依赖固定模型代码。

- [ ] **Step 4: 记录结论**

确认本次前端边界为：

- 不新增页面
- 不新增按钮或交互
- 不修改路由
- 不修改 API 契约
- 仅在后端新增模型参数分组无法被页面展示时才补前端代码

### Task 2: 做“无需前端改动”的验证

**Files:**
- Reference: `ruoyi-ui/src/views/ccdi/modelParam/index.vue`
- Reference: `ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue`
- Optional Record: `docs/tests/records/bank-tag-placeholder-frontend-test.md`

- [ ] **Step 1: 做静态差异检查**

运行：

```bash
git diff -- ruoyi-ui/src/api/ccdi/modelParam.js ruoyi-ui/src/views/ccdi/modelParam/index.vue ruoyi-ui/src/views/ccdiProject/components/detail/ParamConfig.vue
```

预期：在开始前无本次需求相关前端改动，作为“无代码变更”基线。

- [ ] **Step 2: 运行前端构建 smoke test**

运行：

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

预期：构建成功，证明本次后端计划不依赖任何前端同步改造。

- [ ] **Step 3: 人工核查两个页面的动态能力**

重点确认以下行为已由现有页面支持：

- 接口返回多少模型卡片就展示多少模型卡片
- 每个模型下的参数表格由 `params` 数组驱动
- 模型代码新增不会导致页面白屏或字段读取异常

若以上三点都成立，则本次前端结论为“无需代码改动”。

- [ ] **Step 4: 只有验证失败时才进入最小修补**

如果发现页面写死了模型列表，再新增一个单独前端实施分支，最小修改以下文件：

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

且只允许做动态渲染修补，不扩大范围到样式重做或交互重构。

### Task 3: 联调与交付说明

**Files:**
- Reference: `docs/plans/backend/2026-03-18-bank-tag-model-placeholder-backend-implementation.md`
- Optional Record: `docs/tests/records/bank-tag-placeholder-frontend-test.md`

- [ ] **Step 1: 等待后端完成并提供可用数据**

后端完成后，联调时重点看两类场景：

- 规则占位补齐后，前端没有新增入口需求
- 如后端顺带补了新模型参数，模型参数页仍能正常展示

- [ ] **Step 2: 做最小联调验证**

建议验证：

1. 打开全局模型参数页
2. 打开项目详情中的参数配置页
3. 确认页面可以正常加载、保存按钮状态正常、无控制台报错

- [ ] **Step 3: 如开启前端本地服务，验证后关闭进程**

运行：

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

完成验证后必须关闭该进程，避免残留端口占用。

- [ ] **Step 4: 若最终无前端改动，提交测试记录而不是代码提交**

可选记录：

```bash
git add docs/tests/records/bank-tag-placeholder-frontend-test.md
git commit -m "补充流水模型占位前端联调记录"
```

如果没有新增测试记录文件，则本次前端任务以“无代码改动，验证通过”结束，不额外提交。
