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

12 KiB
Raw Blame History

Results Overview Project Analysis Dialog Display Optimization 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 作为结果总览唯一入口，不新增页面和抽屉。ProjectAnalysisDialog.vue 负责重构弹窗整体壳层、头部信息头带、来源上下文和主区节奏；ProjectAnalysisSidebar.vue 改为人物档案面板；ProjectAnalysisAbnormalTab.vue 与 ProjectAnalysisPlaceholderTab.vue 统一成同一套工作台区块。实现顺序遵循“先锁定视觉契约测试，再最小实现，再做回归验证与记录”。

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

Task 1: 锁定弹窗外层骨架与头带契约

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

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

  • Step 1: Write the failing test

在 3 个现有单测里补充断言，锁定以下展示契约：

  • 弹窗不再依赖内部 project-analysis-shell 大白卡作为主壳
  • 存在自定义头带容器，例如 project-analysis-header
  • 头带里能看到：
    • 姓名主标题
    • 风险等级状态位
    • 工号 / 部门 / 所属项目元信息
  • “当前命中模型”不再作为主区顶部单独提示块，而是并入头带
  • 主区中存在风险摘要条或等价概览块
  • 关闭时仍会重置 activeTab，再次打开默认回到 异常明细

示例断言片段：

assert(source.includes("project-analysis-header"), "缺少弹窗头带");
assert(source.includes("project-analysis-overview"), "缺少主区风险摘要条");
assert(!source.includes("project-analysis-shell"), "不应继续保留内部大白卡外壳");
assert(!source.includes('class=\"source-summary\"'), "当前命中模型不应停留在主区顶部");
  • 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-default-tab.test.js
node tests/unit/project-analysis-dialog-source-highlight.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 ProjectAnalysisDialog.vue 中完成最小结构重排：

  • 去掉内部 project-analysis-shell 大白卡容器

  • 改为“头带 + 主体工作区”的单一主壳结构

  • 将“当前命中模型”合并到头带上下文区域

  • 新增主区风险摘要条骨架

  • 保持现有详情请求、错误态、重试和默认页签逻辑不变

  • 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-default-tab.test.js
node tests/unit/project-analysis-dialog-source-highlight.test.js

Expected:

  • PASS

  • Step 5: Commit

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 ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js
git commit -m "重构结果总览详情弹窗外层骨架"

Task 2: 将左侧侧栏改为人物档案面板

Files:

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

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

  • 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

补充断言，锁定以下侧栏边界：

  • 侧栏主视觉改为人物档案面板，而不是字段平铺式表单
  • 存在人物身份区、模型摘要区、辅助提示区 3 级组织
  • 风险等级改为状态徽标或等价状态块
  • 核心异常标签继续保留，但要与人物元信息分层展示
  • 空值仍统一显示 -
  • 不恢复整卡独立边框、固定定位或额外扩展区块

示例断言片段：

assert(source.includes("sidebar-profile"), "缺少人物身份区");
assert(source.includes("sidebar-summary"), "缺少辅助提示区");
assert(source.includes("sidebar-risk-badge"), "缺少风险等级状态徽标");
assert(!source.includes("justify-content: space-between"), "不应继续以表单式左右对齐作为主体布局");
  • Step 2: Run test to verify it fails

Run:

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

在 ProjectAnalysisSidebar.vue 中按设计完成重排：

  • 身份区突出姓名、工号、部门、项目和风险等级
  • 模型摘要区保留命中模型数与异常标签
  • 辅助提示区只承载简短说明，不硬凑大块空内容
  • 统一侧栏背景、分组标题和纵向间距

如需要，在 ProjectAnalysisDialog.vue 中整理透传给侧栏的数据结构，但不改变数据来源边界。

  • Step 4: Run test to verify it passes

Run:

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

git add ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue 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 3: 统一主区、页签和异常明细区块视觉语言

Files:

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

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

  • Step 1: Write the failing test

补充断言，锁定主区视觉收口：

  • 主区存在统一的工作台区块类名，而不是多套卡片/占位板样式并存
  • 异常明细区支持“分组标题 + 一句摘要 + 表格/对象块”的连续阅读流
  • 占位页签外观与异常明细区块采用相同容器基线
  • 表格、对象摘要块、占位区块的圆角、边框和背景风格统一

示例断言片段：

assert(source.includes("analysis-panel"), "缺少统一主区面板样式");
assert(source.includes("abnormal-card__summary"), "缺少异常分组摘要位");
assert(!source.includes("background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)"), "占位页签不应继续单独使用旧渐变底");
  • 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-layout.test.js

Expected:

  • FAIL

  • Step 3: Write minimal implementation

在 3 个组件中完成最小统一：

  • 把主区内容块统一收口为同一套 analysis-panel 风格

  • 给异常分组补一行摘要位或等价的次级说明位

  • 统一页签承载块、对象摘要块、表格容器的边框、圆角、背景和间距

  • 不改动现有真实数据渲染规则和分页逻辑

  • 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-layout.test.js

Expected:

  • PASS

  • Step 5: Commit

git add 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/ProjectAnalysisDialog.vue ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
git commit -m "统一结果总览详情弹窗主区视觉"

Task 4: 做前端专项回归并补充记录

Files:

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

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

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

  • Test: ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.test.js

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

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

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

  • Test: ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js

  • 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: Run the focused regression suite

Run:

cd ruoyi-ui
node tests/unit/project-analysis-dialog-layout.test.js
node tests/unit/project-analysis-dialog-default-tab.test.js
node tests/unit/project-analysis-dialog-source-highlight.test.js
node tests/unit/project-analysis-dialog-sidebar.test.js
node tests/unit/project-analysis-dialog-empty-field.test.js
node tests/unit/project-analysis-dialog-abnormal-tab.test.js
node tests/unit/preliminary-check-project-analysis-entry.test.js
node tests/unit/preliminary-check-project-analysis-source-context.test.js

Expected:

  • 全部 PASS

  • Step 2: Record the verification result

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

  • 执行命令

  • 执行日期

  • 结果是否通过

  • 若有人工核验，记录首屏层级、侧栏、主区和入口行为观察结果

  • Step 3: Write the implementation record

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

  • 头带重排

  • 侧栏改为档案面板

  • 主区和页签统一视觉

  • 本轮未改动接口与路由

  • Step 4: Review git status

Run:

git status --short

Expected:

  • 只包含本次前端改动、验证记录和实施记录

  • 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/ProjectAnalysisAbnormalTab.vue ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisPlaceholderTab.vue 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-source-highlight.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/preliminary-check-project-analysis-entry.test.js ruoyi-ui/tests/unit/preliminary-check-project-analysis-source-context.test.js docs/reports/implementation/2026-03-25-results-overview-project-analysis-dialog-display-optimization-frontend-record.md docs/tests/records/2026-03-25-results-overview-project-analysis-dialog-display-optimization-frontend-verification.md
git commit -m "优化结果总览详情弹窗整体展示"

完成标准

  • 结果总览两个入口继续打开同一个详情弹窗
  • 首屏能先看到人、风险和来源上下文
  • 弹窗内不再出现明显“套娃”结构
  • 左右分栏比例更稳定，主区成为视觉中心
  • 现有详情接口与默认页签行为保持不变
Reference in New Issue View Git Blame Copy Permalink