# Results Overview Project Analysis Dialog Real Detail Frontend Implementation Plan > **For agentic workers:** REQUIRED: Use superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** 将结果总览“项目分析”弹窗从静态高保真壳子升级为真实详情工作台，支持加宽弹窗、请求真实详情接口、展示员工基础信息、按类型渲染流水表格与对象摘要卡。 **Architecture:** 保持 `PreliminaryCheck.vue` 为结果总览唯一入口，不新增路由。`projectOverview.js` 新增详情接口方法，`PreliminaryCheck.vue` 继续统一维护弹窗开关、来源上下文和外层命中模型摘要；`ProjectAnalysisDialog.vue` 负责请求详情、处理加载与错误态，`ProjectAnalysisSidebar.vue` 只消费“真实基础信息 + 外层透传模型摘要”，`ProjectAnalysisAbnormalTab.vue` 按 `BANK_STATEMENT` / `OBJECT` 两种分组类型拆分展示。 **Tech Stack:** Vue 2, Element UI, SCSS, Node.js --- ### Task 1: 先锁定 API 契约与入口状态流 **Files:** - Modify: `ruoyi-ui/src/api/ccdi/projectOverview.js` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue` - Test: `ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js` - [ ] **Step 1: Write the failing test** 补充断言，锁定以下内容： - `projectOverview.js` 新增 `getOverviewPersonAnalysisDetail` - 请求路径为 `/ccdi/project/overview/person-analysis/detail` - `PreliminaryCheck.vue` 在打开弹窗时仍会保存： - 当前人员 - 当前来源 - 外层命中模型摘要 - 详情请求所需的 `projectId` 和 `staffIdCard` 可从入口上下文中拿到 示例断言片段： ```js assert(source.includes('getOverviewPersonAnalysisDetail'), '缺少详情 API'); assert(source.includes('/ccdi/project/overview/person-analysis/detail'), '详情接口路径错误'); assert(source.includes('projectAnalysisSource'), '缺少弹窗来源状态'); ``` - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/preliminary-check-api-integration.test.js node tests/unit/preliminary-check-project-analysis-source-context.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在 `projectOverview.js` 中新增： ```js export function getOverviewPersonAnalysisDetail(params) { return request({ url: '/ccdi/project/overview/person-analysis/detail', method: 'get', params: { projectId: params.projectId, staffIdCard: params.staffIdCard } }) } ``` 在 `PreliminaryCheck.vue` 中： - 保持现有打开弹窗入口不变 - 明确存储 `projectAnalysisPerson`、`projectAnalysisSource` - 新增或整理 `projectAnalysisModelSummary` - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/preliminary-check-api-integration.test.js node tests/unit/preliminary-check-project-analysis-source-context.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js git commit -m "补充结果总览详情弹窗前端接线" ``` ### Task 2: 锁定弹窗宽度、加载态和错误态 **Files:** - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js` - [ ] **Step 1: Write the failing test** 在现有弹窗测试中补充断言，锁定： - 弹窗宽度由 `1280px` 调整为 `1440px` - 侧栏宽度调到 `340px` - 弹窗打开时触发详情请求 - 存在详情加载态 - 存在错误提示与重试入口 - 再次打开时仍回到 `异常明细` 示例断言片段： ```js assert(source.includes('width="1440px"'), '弹窗未加宽到 1440px'); assert(source.includes('fetchDetailData'), '缺少详情请求方法'); assert(source.includes('detailLoading'), '缺少详情加载态'); assert(source.includes('handleRetryDetail'), '缺少重试方法'); ``` - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-layout.test.js node tests/unit/project-analysis-dialog-default-tab.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在 `ProjectAnalysisDialog.vue` 中完成： - 宽度调为 `1440px` - 新增 `detailLoading`、`detailError` - 打开弹窗时调用 `fetchDetailData` - 重试时再次调用同一详情接口 - 关闭时重置 `activeTab`、`detailLoading`、`detailError`、`detailData` - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-layout.test.js node tests/unit/project-analysis-dialog-default-tab.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js git commit -m "完善结果总览详情弹窗状态" ``` ### Task 3: 将侧栏改为真实基础信息 + 外层模型摘要 **Files:** - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js` - [ ] **Step 1: Write the failing test** 锁定侧栏展示边界： - `人员基础信息` 来自真实详情接口返回的 `basicInfo` - `命中模型摘要` 来自外层透传，不依赖详情接口 - `排查记录摘要` 仍为占位文案 - 基础信息缺失时统一展示 `-` - 异常标签为空时展示“暂无异常标签” - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-sidebar.test.js node tests/unit/project-analysis-dialog-empty-field.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在 `ProjectAnalysisDialog.vue` 中把弹窗数据源拆成两部分： - `detailData.basicInfo` - `sourceSummary/modelSummary` 在 `ProjectAnalysisSidebar.vue` 中只负责渲染： - 真实 `basicInfo` - 外层传入的 `modelSummary` - 静态 `recordSummary` 在 `preliminaryCheck.mock.js` 中保留： - 占位页签 - 默认空结构 移除对真实基础信息和异常明细的 mock 拼装依赖。 - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-sidebar.test.js node tests/unit/project-analysis-dialog-empty-field.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js git commit -m "改造结果总览详情弹窗侧栏数据源" ``` ### Task 4: 把异常明细主视图改为分组渲染 **Files:** - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue` - Modify: `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js` - Test: `ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js` - [ ] **Step 1: Write the failing test** 锁定异常明细渲染规则： - 遍历 `abnormalDetail.groups` - `BANK_STATEMENT` 分组渲染表格 - 表格字段贴近流水明细查询： - 交易时间 - 本方账户 - 对方账户 - 摘要 / 交易类型 - 异常标签 - 交易金额 - `OBJECT` 分组渲染摘要卡 - 来源于模型列表时仍显示“当前命中模型”强调，但异常明细不按当前模型过滤 - [ ] **Step 2: Run test to verify it fails** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-abnormal-tab.test.js node tests/unit/project-analysis-dialog-source-highlight.test.js node tests/unit/detail-query-hit-tags-list.test.js ``` Expected: - `FAIL` - [ ] **Step 3: Write minimal implementation** 在 `ProjectAnalysisAbnormalTab.vue` 中按类型拆分渲染： - `BANK_STATEMENT` - 复用 `DetailQuery.vue` 里的表格字段节奏和金额/标签展示样式 - `OBJECT` - 输出卡片列表 - 每张卡只展示 `title/subtitle/riskTags/summary/extraFields` 若某个分组没有记录： - 不单独渲染空壳卡片 若全部分组为空： - 渲染统一空态 - [ ] **Step 4: Run test to verify it passes** Run: ```bash cd ruoyi-ui node tests/unit/project-analysis-dialog-abnormal-tab.test.js node tests/unit/project-analysis-dialog-source-highlight.test.js node tests/unit/detail-query-hit-tags-list.test.js ``` Expected: - `PASS` - [ ] **Step 5: Commit** ```bash git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js git commit -m "实现结果总览详情弹窗异常分组展示" ``` ### Task 5: 做前端回归、手工验证和文档沉淀 **Files:** - Test: `ruoyi-ui/tests/unit/preliminary-check-summary-and-people.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-linkage-flow.test.js` - Test: `ruoyi-ui/tests/unit/preliminary-check-model-and-detail.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js` - Test: `ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js` - Create: `docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-real-detail-frontend-verification.md` - Create: `docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-real-detail-frontend-implementation.md` - Verify: `docs/design/2026-03-25-results-overview-project-analysis-dialog-real-detail-design.md` - [ ] **Step 1: Run focused regression** Run: ```bash cd ruoyi-ui node tests/unit/preliminary-check-summary-and-people.test.js node tests/unit/preliminary-check-model-linkage-flow.test.js node tests/unit/preliminary-check-model-and-detail.test.js node tests/unit/project-analysis-dialog-layout.test.js node tests/unit/project-analysis-dialog-sidebar.test.js node tests/unit/project-analysis-dialog-abnormal-tab.test.js ``` Expected: - 全部 `PASS` - [ ] **Step 2: Run production build** Run: ```bash cd ruoyi-ui npm run build:prod ``` Expected: - `BUILD SUCCESS` 或等价成功输出 - [ ] **Step 3: Manual verification** Run: ```bash cd ruoyi-ui npm run dev ``` 手工检查： - 结果总览两个入口都能打开同一个弹窗 - 弹窗宽度已加宽 - 打开时先看到加载态，再展示真实数据 - 基础信息为真实员工信息 - 模型摘要仍取自外层入口 - 流水型异常显示表格 - `OBJECT` 型异常显示摘要卡 验证完成后主动关闭前端开发进程。 - [ ] **Step 4: Write verification and implementation records** 在 `docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-real-detail-frontend-verification.md` 记录： - 单测命令 - build 命令 - 手工验证步骤与结果 在 `docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-real-detail-frontend-implementation.md` 记录： - API 接线 - 弹窗状态改造 - 侧栏真实数据与外层摘要拆分 - 分组展示实现 - [ ] **Step 5: Review changed files and commit** Run: ```bash git diff --name-only ``` Expected: - 只包含本次前端实现、测试和文档文件 Commit: ```bash git add ruoyi-ui/src/api/ccdi/projectOverview.js ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.js ruoyi-ui/tests/unit/preliminary-check-api-integration.test.js ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js ruoyi-ui/tests/unit/detail-query-hit-tags-list.test.js docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-real-detail-frontend-verification.md docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-real-detail-frontend-implementation.md git commit -m "实现结果总览详情弹窗前端接线" ```