wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2793cf437c73bcd56e0d986988f1d13d1c47652e
ccdi/docs/plans/frontend/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md

11 KiB
Raw Blame History

Results Overview Project Analysis Dialog 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: 保持 PreliminaryCheck.vue 作为结果总览入口，不新增路由或平行页面。两个列表区块只负责抛出“查看项目”事件，统一由入口页维护弹窗状态并挂载新的 ProjectAnalysisDialog.vue。弹窗内按“人物分析侧栏 + 页签工作区”拆分，异常明细 作为本轮唯一完整主视图，其余页签只做高保真静态承载，不接新接口。

Tech Stack: Vue 2, Element UI, SCSS, Node.js

Task 1: 打通两个入口到统一弹窗状态

Files:

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue

  • Test: ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js

  • Test: ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js

  • Step 1: Write the failing test

新增静态断言，锁定以下边界：

  • PreliminaryCheck.vue 引入 ProjectAnalysisDialog

  • 入口页新增统一弹窗状态，如 projectAnalysisDialogVisible

  • RiskPeopleSection.vue 的操作列按钮改为触发查看项目事件

  • RiskModelSection.vue 的操作列按钮改为触发查看项目事件

  • 入口页同时接收“来源区块 + 当前行数据”

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-project-analysis-entry.test.js
node tests/unit/preliminary-check-project-analysis-source-context.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 PreliminaryCheck.vue 中新增：

  • 弹窗显示状态
  • 当前选中人员对象
  • 当前来源标记，建议使用 riskPeople / riskModelPeople
  • 打开、关闭、重置页签的统一方法

在两个列表组件中：

  • 把纯展示型“查看详情”按钮改成 @click 事件

  • 统一向上抛出当前行数据

  • 不在区块内部自行维护弹窗状态

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/preliminary-check-project-analysis-entry.test.js
node tests/unit/preliminary-check-project-analysis-source-context.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/PreliminaryCheck.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskPeopleSection.vue ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue ruoyi-ui/tests/unit/preliminary-check-project-analysis-entry.test.js ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js
git commit -m "打通结果总览项目分析弹窗入口"

Task 2: 搭建统一项目分析弹窗壳子与人物侧栏

Files:

  • Create: ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue

  • Create: ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue

  • Modify: ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.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-default-tab.test.js

  • Step 1: Write the failing test

新增静态断言，锁定以下内容：

  • 存在 ProjectAnalysisDialog.vue

  • 弹窗标题为“项目分析”

  • 默认页签为“异常明细”

  • 弹窗包含 5 个页签：

    • 异常明细
    • 资产分析
    • 征信摘要
    • 关系图谱
    • 资金流向

  • 左侧仅保留“人员基础信息”“命中模型摘要”“排查记录摘要”三组

  • Step 2: Run test to verify it fails

Run:

cd ruoyi-ui
node tests/unit/project-analysis-dialog-layout.test.js
node tests/unit/project-analysis-dialog-sidebar.test.js
node tests/unit/project-analysis-dialog-default-tab.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在弹窗壳子中完成：

  • 大尺寸 el-dialog 布局
  • 左右分栏结构
  • 默认活动页签状态
  • 关闭时清空上下文、再次打开回到“异常明细”

在侧栏组件中完成：

  • 姓名
  • 工号
  • 部门
  • 风险等级
  • 所属项目
  • 命中模型数/当前命中模型
  • 核心异常标签
  • 排查记录摘要占位

在 preliminaryCheck.mock.js 中补充静态页签与异常明细组装所需 mock 结构，但不要反向污染结果总览已有真实数据映射。

  • Step 4: Run test to verify it passes

Run:

cd ruoyi-ui
node tests/unit/project-analysis-dialog-layout.test.js
node tests/unit/project-analysis-dialog-sidebar.test.js
node tests/unit/project-analysis-dialog-default-tab.test.js

Expected:

  • PASS

  • Step 5: Commit

git add 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/preliminaryCheck.mock.js ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js
git commit -m "搭建结果总览项目分析弹窗骨架"

Task 3: 实现异常明细主视图与来源上下文强调

Files:

  • Create: ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue

  • Create: ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.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-abnormal-tab.test.js

  • Test: ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js

  • Test: ruoyi-ui/tests/unit/project-analysis-dialog-empty-field.test.js

  • Step 1: Write the failing test

锁定以下展示和交互：

  • “异常明细”页签包含主表格区与补充摘要区

  • 主表格至少包含：

    • 交易时间
    • 本方账号/主体
    • 对方名称/账户
    • 摘要/交易类型
    • 交易金额
    • 标记状态

  • 来源于模型命中列表时，顶部摘要或侧栏出现“当前命中模型”强调

  • 缺工号、部门、异常标签时以 - 或“暂无异常标签”展示

  • Step 2: Run test to verify it fails

Run:

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/project-analysis-dialog-empty-field.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 ProjectAnalysisAbnormalTab.vue 中按设计文档完成：

  • 异常明细主表格
  • 频繁转账账户异常摘要块
  • 关联交易异常摘要块

在 ProjectAnalysisDialog.vue 中：

  • 把来源区块差异转成顶部摘要和侧栏模型强调
  • 其余 4 个页签用 ProjectAnalysisPlaceholderTab.vue 统一承载高保真静态内容
  • 不伪装成真实接口返回，不增加新的请求逻辑

在 mock 组装逻辑中：

  • 允许使用当前行数据 + 静态模板拼装主视图

  • 缺字段不做额外推导

  • Step 4: Run test to verify it passes

Run:

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/project-analysis-dialog-empty-field.test.js

Expected:

  • PASS

  • Step 5: Commit

git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/preliminaryCheck.mock.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/project-analysis-dialog-empty-field.test.js
git commit -m "实现结果总览项目分析弹窗主视图"

Task 4: 做结果总览回归并补充文档记录

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-abnormal-tab.test.js

  • Create: docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-frontend-verification.md

  • Create: docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md

  • Step 1: Run focused regression

Run:

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-abnormal-tab.test.js

Expected:

  • 全部 PASS

  • Step 2: Manual verification

Run:

cd ruoyi-ui
npm run dev

手工检查：

  • 结果总览页两个入口都能打开同一个弹窗
  • 默认页签是“异常明细”
  • 关闭再打开后页签会重置
  • 来源于模型命中列表时存在“当前命中模型”强调
  • 常见桌面宽度下布局不塌

结束验证后，主动停止前端进程。

  • Step 3: Write verification record

在 docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-frontend-verification.md 记录：

  • 执行命令

  • 执行时间

  • 结果

  • 手工检查结论

  • Step 4: Write implementation record

在 docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md 记录：

  • 新增弹窗入口链路

  • 新增组件与职责

  • 主视图内容与静态页签边界

  • 验证结果

  • Step 5: Commit

git add docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-frontend-verification.md docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-frontend-implementation.md
git commit -m "补充结果总览项目分析弹窗前端记录"
Reference in New Issue View Git Blame Copy Permalink