ccdi/docs/plans/frontend/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation-plan.md

# 项目详情风险明细异常账户人员信息前端 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.
>
> 仓库约束：当前仓库明确禁止开启 subagent，执行时统一使用 `superpowers:executing-plans`。

**Goal:** 将 `RiskDetailSection.vue` 中的“异常账户人员信息”从占位表格改为真实接口驱动的列表，并与统一导出的 6 个字段保持一致。

**Architecture:** 前端保持最小改动，继续复用 `RiskDetailSection.vue` 内现有的独立分区加载模式，为异常账户区块补一套与员工负面征信相同风格的 `loading/pageNum/pageSize/total/list` 状态。数据请求通过 `@/api/ccdi/projectOverview` 新增一个轻量 GET 方法，不改 `PreliminaryCheck.vue` 的页面编排逻辑。

**Tech Stack:** Vue 2, Element UI, RuoYi request 封装, Node 静态单测, Vue CLI 构建

---

## File Map

**Create:**

- `ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js`
  - 覆盖异常账户区块的真实列结构和空态文案
- `ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js`
  - 覆盖异常账户独立分页状态与加载方法

**Modify:**

- `ruoyi-ui/src/api/ccdi/projectOverview.js`
  - 新增异常账户分页查询 API 封装
- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
  - 接入真实异常账户列表、独立分页、独立 loading、移除旧占位操作列
- `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
  - 对齐 mock 中异常账户字段名，避免静态预览口径落后于真实页面
- `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`
  - 更新旧断言，移除对“查看详情”的占位依赖
- `docs/reports/implementation/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation.md`
  - 记录前端实施与验证结果

**No Change Expected:**

- `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue`
  - 仍只负责把 `projectId` 传给 `RiskDetailSection`

## Task 1: 锁定异常账户区块的静态结构与测试期望

**Files:**

- Create: `ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`

- [ ] **Step 1: 先写新的静态布局测试**

创建 `risk-detail-abnormal-account-layout.test.js`，直接读取 `RiskDetailSection.vue` 源码并断言以下 token：

```js
[
  "异常账户人员信息",
  "账号",
  "开户人",
  "银行",
  "异常类型",
  "异常发生时间",
  "状态",
  "当前项目暂无异常账户人员信息",
]
```

- [ ] **Step 2: 更新旧测试，先让它失败**

在 `preliminary-check-model-and-detail.test.js` 中把这一段：

```js
["风险明细", "涉疑交易明细", "异常账户人员信息", "查看详情"]
```

改成断言新的异常账户列名，不再要求旧占位的“查看详情”。

- [ ] **Step 3: 运行静态单测确认失败**

Run:

```bash
cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-layout.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
```

Expected:

- FAIL，提示 `RiskDetailSection.vue` 仍包含旧列结构或缺少新字段

- [ ] **Step 4: 提交本任务**

本任务先不提交，等待真实模板改完后与 Task 2 一起提交。

## Task 2: 接入异常账户真实 API 与独立分页状态

**Files:**

- Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
- Create: `ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js`

- [ ] **Step 1: 先写分页/加载相关静态测试**

创建 `risk-detail-abnormal-account-pagination.test.js`，断言源码已包含：

- `getOverviewAbnormalAccountPeople`
- `abnormalAccountLoading`
- `abnormalAccountPageNum`
- `abnormalAccountPageSize`
- `abnormalAccountTotal`
- `abnormalAccountList`
- `handleAbnormalAccountPageChange`
- `loadAbnormalAccountPeople`

- [ ] **Step 2: 跑静态测试确认失败**

Run:

```bash
cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-pagination.test.js
```

Expected:

- FAIL，提示 API 方法或分页状态尚未接入

- [ ] **Step 3: 在 API 文件中增加轻量请求封装**

在 `projectOverview.js` 中新增：

```js
export function getOverviewAbnormalAccountPeople(params) {
  return request({
    url: "/ccdi/project/overview/abnormal-account-people",
    method: "get",
    params: {
      projectId: params.projectId,
      pageNum: params.pageNum,
      pageSize: params.pageSize
    }
  })
}
```

- [ ] **Step 4: 在 `RiskDetailSection.vue` 中补齐独立状态与加载函数**

按员工负面征信区块的模式补充：

1. `data()` 中新增：
   - `abnormalAccountLoading`
   - `abnormalAccountPageNum`
   - `abnormalAccountPageSize`
   - `abnormalAccountTotal`
   - `abnormalAccountList`
2. `watch.sectionData` 中初始化：
   - `projectId`
   - 默认页码 1
   - 页大小 5
   - 初始列表为空
3. 新增：
   - `loadAbnormalAccountPeople()`
   - `handleAbnormalAccountPageChange(pageInfo)`

加载规则：

- 无 `projectId` 时直接清空列表并结束
- 请求失败时仅清空异常账户区块并提示 `加载异常账户人员信息失败`
- 不影响涉疑交易和员工负面征信区块

- [ ] **Step 5: 重新运行静态测试**

Run:

```bash
cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-pagination.test.js
```

Expected:

- PASS

- [ ] **Step 6: 提交本任务**

```bash
git add ruoyi-ui/src/api/ccdi/projectOverview.js \
  ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue \
  ruoyi-ui/tests/unit/risk-detail-abnormal-account-pagination.test.js
git commit -m "补充异常账户人员前端查询状态"
```

## Task 3: 把异常账户表格从占位列改成真实 6 列

**Files:**

- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
- Create: `ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js`
- Modify: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js`

- [ ] **Step 1: 修改异常账户表格模板**

把旧占位表格：

- `账户号`
- `账户人姓名`
- `开户银行`
- `异常发生时间`
- `状态`
- `操作`

改为真实 6 列：

- `账号`
- `开户人`
- `银行`
- `异常类型`
- `异常发生时间`
- `状态`

并删除“操作 / 查看详情”列。

- [ ] **Step 2: 补独立空态与分页组件**

将异常账户区块从纯 `el-table` 升级为与员工负面征信一致的结构：

- `v-loading="abnormalAccountLoading"`
- `:data="abnormalAccountList"`
- `<el-empty description="当前项目暂无异常账户人员信息" />`
- 独立 `pagination`

- [ ] **Step 3: 对齐 mock 字段命名**

在 `preliminaryCheck.mock.js` 中把异常账户 mock 数据对齐成：

- `accountNo`
- `accountName`
- `bankName`
- `abnormalType`
- `abnormalTime`
- `status`

说明：

- 这里不要求 mock 走真实接口
- 只是避免静态数据结构继续停留在旧字段名

- [ ] **Step 4: 运行静态布局测试**

Run:

```bash
cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-layout.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
```

Expected:

- PASS

- [ ] **Step 5: 提交本任务**

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue \
  ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js \
  ruoyi-ui/tests/unit/risk-detail-abnormal-account-layout.test.js \
  ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js
git commit -m "调整异常账户人员信息前端展示列"
```

## Task 4: 做前端联调与构建回归

**Files:**

- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
- Modify: `docs/reports/implementation/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation.md`

- [ ] **Step 1: 本地执行静态单测**

Run:

```bash
cd ruoyi-ui
node tests/unit/risk-detail-abnormal-account-layout.test.js
node tests/unit/risk-detail-abnormal-account-pagination.test.js
node tests/unit/preliminary-check-model-and-detail.test.js
node tests/unit/risk-detail-employee-credit-negative-layout.test.js
```

Expected:

- PASS

- [ ] **Step 2: 跑前端生产构建**

Run:

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

Expected:

- PASS

- [ ] **Step 3: 如需手工联调，启动前端并在验证后关闭**

Run:

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

至少验证：

1. `异常账户人员信息` 区块只显示 6 个目标字段
2. 翻页只刷新异常账户区块
3. 统一导出按钮仍请求 `ccdi/project/overview/risk-details/export`
4. 异常账户查询失败时只影响当前区块

验证结束后必须关闭 `npm run dev` 进程。

- [ ] **Step 4: 编写前端实施记录**

在实施记录中写清：

- 新增 API 方法
- `RiskDetailSection.vue` 的状态与模板调整
- mock 字段对齐
- 静态单测与构建结果
- 如有手工联调，记录启动与关闭前端进程情况

- [ ] **Step 5: 提交本任务**

```bash
git add docs/reports/implementation/2026-03-31-project-detail-risk-details-abnormal-account-frontend-implementation.md
git commit -m "记录异常账户人员信息前端实施"
```

## Final Verification

- [ ] 页面与导出统一使用 `账号 / 开户人 / 银行 / 异常类型 / 异常发生时间 / 状态`
- [ ] 页面已移除旧占位“查看详情”列
- [ ] 异常账户分页状态与员工负面征信分页状态互不干扰
- [ ] 构建命令 `npm run build:prod` 通过
- [ ] 如启动了前端进程，验证结束后已手动关闭