# 项目详情风险明细统一导出前端 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:** 将项目详情风险明细的导出入口收口为总卡片右上角的统一按钮，并改为调用新的统一后端导出接口。

**Architecture:** 前端保持最小改动，继续复用 `RiskDetailSection.vue` 内现有 `this.download(...)` 模式，不额外新增导出页状态管理或 API 包装层。页面仅调整按钮位置、调用路径和禁用逻辑，不改变现有分页、筛选和详情弹窗行为。

**Tech Stack:** Vue 2, Element UI, RuoYi 前端下载工具链

---

## File Map

**Modify:**

- `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`
  - 调整统一导出按钮位置，移除区块内导出按钮，切换下载路径
- `docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md`
  - 记录前端改动与验证结果

**No Change Expected:**

- `ruoyi-ui/src/api/ccdi/projectOverview.js`
  - 本轮不强制新增导出 API；组件继续直接调用 `this.download`
- `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js`
  - 数据结构未改，不需要为按钮位置调整补 mock 字段

## Task 1: 收口风险明细导出入口

**Files:**

- Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue`

- [ ] **Step 1: 先记录当前页面结构和回归点**

执行前先确认当前组件里有两处导出按钮：

- `涉疑交易明细` 区块右上角 `导出`
- `异常账户人员信息` 区块右上角 `导出`

同时记录这些行为后续不能回归：

- `涉疑交易明细` 下拉筛选仍可切换
- 涉疑交易详情弹窗仍可打开
- 员工负面征信分页仍可切换

- [ ] **Step 2: 修改组件模板，先让构建暴露问题**

把统一 `导出` 按钮移动到总卡片头部：

```vue
<div class="section-header">
  <div>
    <div class="section-title">风险明细</div>
    <div class="section-subtitle">展示涉疑交易与异常账户关联人员信息</div>
  </div>
  <el-button size="mini" type="text" :disabled="!projectId" @click="handleRiskDetailExport">
    导出
  </el-button>
</div>
```

同时删除两个区块内部的导出按钮。

- [ ] **Step 3: 调整下载方法**

把旧的 `handleExport` 收口成统一方法：

```js
handleRiskDetailExport() {
  if (!this.projectId) {
    return
  }
  this.download(
    "ccdi/project/overview/risk-details/export",
    { projectId: this.projectId },
    `风险明细_${this.projectId}_${new Date().getTime()}.xlsx`
  )
}
```

注意：

- 不再传 `suspiciousType`
- 不再依赖 `suspiciousTotal === 0`

- [ ] **Step 4: 运行前端构建验证**

Run:

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

Expected:

- PASS

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

```bash
git add ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
git commit -m "调整风险明细统一导出入口"
```

## Task 2: 做前端回归检查并补实施记录

**Files:**

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

- [ ] **Step 1: 做页面回归检查**

至少验证以下 5 项：

1. 风险明细总卡片右上角显示唯一导出按钮
2. `涉疑交易明细` 区块内不再显示导出按钮
3. `异常账户人员信息` 区块内不再显示导出按钮
4. 切换涉疑交易筛选仍能正常刷新列表
5. 点击 `详情` 仍能打开流水详情弹窗

如果本轮需要本地启动页面，可使用：

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

验证完成后记得关闭前端进程。

- [ ] **Step 2: 联调统一导出**

在后端接口完成后，手工点击统一导出按钮，确认：

- 请求路径为 `ccdi/project/overview/risk-details/export`
- 浏览器开始下载 `.xlsx`
- 不再请求旧的 `suspicious-transactions/export`

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

在 `docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md` 中记录：

- 按钮位置调整
- 删除的两个局部导出入口
- 新下载路径和文件名
- `npm run build:prod` 结果
- 手工回归点

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

```bash
git add docs/reports/implementation/2026-03-30-project-detail-risk-details-unified-export-frontend-implementation.md \
  ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
git commit -m "完成风险明细统一导出前端实现"
```

## Final Verification

- [ ] 运行：

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

- [ ] 确认页面只剩一个统一导出按钮
- [ ] 确认统一导出按钮只依赖 `projectId`
- [ ] 确认旧区块按钮全部移除
- [ ] 如启动了 `npm run dev`，验证结束后手动关闭前端进程