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

11 KiB
Raw Blame History

Results Overview Project Analysis Dialog Display Fix 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 四个组件内，按“TDD 锁契约 -> 最小样式与结构改造 -> 聚焦回归 -> 补文档记录”的顺序推进。滚动策略统一改为弹窗内容区单一纵向滚动，左侧档案栏按内容自然高度展开，当前命中模型并入头带。

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

Task 1: 锁定弹窗尺寸、头带和统一滚动契约

Files:

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

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

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

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

  • Step 1: Write the failing test

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

  • 弹窗尺寸明显放大，不再保留当前 width="80%" 与 top="5vh" 组合
  • 不再存在 project-analysis-shell
  • 存在头带容器，例如 project-analysis-header
  • “当前命中模型”并入头带，不再保留主区顶部 source-summary
  • 不再存在 project-analysis-layout__main-scroll
  • 不再存在 overflow-y: auto 与 max-height: calc(90vh - 120px) 这种右侧独立滚动实现
  • 关闭后再次打开仍默认回到 异常明细

示例断言片段：

assert(source.includes("project-analysis-header"), "缺少弹窗头带");
assert(!source.includes('width="80%"'), "不应继续使用 80% 宽度");
assert(!source.includes('top="5vh"'), "不应继续保留过大的顶部空白");
assert(!source.includes("project-analysis-layout__main-scroll"), "不应继续保留右侧独立滚动容器");
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-source-highlight.test.js
node tests/unit/project-analysis-dialog-default-tab.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-source-highlight.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/tests/unit/project-analysis-dialog-layout.test.js ruoyi-ui/tests/unit/project-analysis-dialog-source-highlight.test.js ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.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

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

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

  • Step 1: Write the failing test

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

  • 左侧侧栏不再被右侧主区强制拉满
  • 存在人物档案结构块，例如 sidebar-profile
  • 风险等级改为状态块或等价样式位
  • “核心异常标签”区域占满可用宽度，并支持完整换行
  • 不允许恢复表单式强左右对齐布局
  • 空值仍统一显示 -

示例断言片段：

assert(source.includes("sidebar-profile"), "缺少人物档案区");
assert(source.includes("sidebar-risk-badge"), "缺少风险等级状态块");
assert(source.includes("flex-wrap: wrap"), "核心异常标签必须支持换行");
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

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

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

  • Step 1: Write the failing test

补充断言，锁定右侧主区边界：

  • 头带下方紧跟页签，减少无效留白
  • 异常明细保持“分组标题 + 主体内容”的连续阅读流
  • 主区容器与占位页签采用统一面板基线
  • 不恢复主区内部独立滚动

示例断言片段：

assert(source.includes("project-analysis-tabs"), "缺少主区页签容器");
assert(source.includes("abnormal-card__title"), "异常明细应保留分组标题");
assert(!source.includes("project-analysis-layout__main-scroll"), "主区不应再有独立滚动");
  • 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 个组件中完成最小样式与结构收口：

  • 页签导航上移，紧跟头带

  • 异常明细区块保持连续阅读流，不再被多层壳体打断

  • 占位页签与异常明细主视图统一容器基线

  • 保持现有真实数据渲染规则和分页逻辑不变

  • 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-26-results-overview-project-analysis-dialog-display-fix-frontend-record.md

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

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

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

  • Test: ruoyi-ui/tests/unit/project-analysis-dialog-default-tab.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-source-highlight.test.js
node tests/unit/project-analysis-dialog-default-tab.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: Run the production build

Run:

cd ruoyi-ui
npm run build:prod

Expected:

  • BUILD SUCCESS 或等价成功输出

  • Step 3: Write the verification record

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

  • 执行命令

  • 执行时间

  • 测试结果

  • 验收结论：顶部留白、统一滚动、侧栏高度和标签展示问题已被覆盖验证

  • Step 4: Write the implementation record

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

  • 头带与弹窗尺寸调整

  • 统一滚动实现

  • 侧栏自然高度与标签换行展示

  • 主区阅读节奏收口

  • Step 5: Commit

git add docs/reports/implementation/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-record.md docs/tests/records/2026-03-26-results-overview-project-analysis-dialog-display-fix-frontend-verification.md
git commit -m "补充项目分析弹窗前端修复记录"

Done When

  • 顶部空白明显收紧，弹窗尺寸较现状更大
  • 弹窗改为统一滚动，右侧不再独立滚动
  • 左侧侧栏按内容自然结束，不再被强制拉满
  • 左下角“核心异常标签”在长标签、多标签场景下可完整换行展示
  • 结果总览入口、默认页签、详情接口链路和现有业务边界保持不变
Reference in New Issue View Git Blame Copy Permalink