diff --git a/docs/reports/implementation/2026-05-06-project-analysis-dialog-radius-unification.md b/docs/reports/implementation/2026-05-06-project-analysis-dialog-radius-unification.md new file mode 100644 index 00000000..1b60f2a7 --- /dev/null +++ b/docs/reports/implementation/2026-05-06-project-analysis-dialog-radius-unification.md @@ -0,0 +1,53 @@ +# 项目分析弹窗圆角显示方案调整实施记录 + +## 变更日期 + +- 2026-05-06 + +## 保存路径确认 + +- 本次实施记录保存到 `docs/reports/implementation/`,符合项目实施记录目录规范。 + +## 变更范围 + +- 前端:`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/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-abnormal-tab.test.js` + +## 实施内容 + +### 1. 弹窗外壳统一 + +- 将项目分析弹窗重新收口为单一弹窗壳显示方案。 +- 外层 `el-dialog` 统一使用 `8px` 圆角,标题栏与内容区使用同一浅灰工作台背景。 +- 移除内部 `24px` 大圆角壳层,避免外层默认圆角、内部大圆角和直角内容区混杂。 + +### 2. 左侧人物档案面板统一 + +- 将左侧人物档案和命中模型摘要合并到同一个 `6px` 面板内。 +- 人物档案与命中模型摘要之间通过分隔线区分层次,不再使用两个独立大圆角白卡。 +- 风险等级和异常标签统一使用 `6px` 状态标识样式。 + +### 3. 右侧内容区统一 + +- 右侧主承载区统一为 `6px` 面板,tabs 顶部与内容区共享同一边界。 +- 异常明细卡片、流水表格、对象摘要卡片和异常原因快照统一使用 `6px` 圆角。 +- 不修改接口、字段、分页、证据库按钮或异常明细业务逻辑。 + +## 验证情况 + +- 已通过 Node 版本切换验证:`nvm use`,实际使用 `v14.21.3`。 +- 已执行并通过: + - `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` + - `node tests/unit/project-analysis-dialog-empty-field.test.js` +- 已执行 `git diff --check`,相关改动无空白错误。 +- 已使用 `browser-use` 打开真实页面 `http://localhost:1025/ccdiProject/detail/90338?tab=overview`,在结果总览页点击“查看详情”打开“项目分析”弹窗验证: + - 页面标题与业务项目数据正常显示。 + - 弹窗打开后详情接口加载完成,人员工号、异常明细表格与异常对象摘要正常渲染。 + - 左侧面板不再出现大圆角白卡和直角灰底混用。 + - 当前浏览器视口下弹窗无框架错误覆盖,控制台无相关 error/warn。 diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue index d5cf8d61..9981aede 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue @@ -250,6 +250,7 @@ export default { .abnormal-card { padding: 20px; border: 1px solid #e2e8f0; + border-radius: 6px; background: #fff; } @@ -274,7 +275,8 @@ export default { } .abnormal-table { - border-radius: 12px; + border: 1px solid #e2e8f0; + border-radius: 6px; overflow: hidden; } @@ -315,6 +317,7 @@ export default { .object-card { padding: 16px; border: 1px solid #e2e8f0; + border-radius: 6px; background: #f8fafc; } @@ -364,6 +367,7 @@ export default { margin-top: 12px; padding: 12px; border: 1px solid #dbeafe; + border-radius: 6px; background: #eff6ff; } diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue index ce0c8ee7..30864254 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue @@ -217,22 +217,21 @@ export default { display: flex; flex-direction: column; min-height: calc(96vh - 64px); - border: 1px solid #dde3ec; - background: #ffffff; + background: #f5f7fb; overflow: hidden; } .project-analysis-header { - padding: 32px 36px 24px; - border-bottom: 1px solid #dde3ec; + padding: 20px 28px 18px; + border-bottom: 1px solid #dbe4ef; background: #ffffff; } .project-analysis-header__main { display: flex; - align-items: flex-end; + align-items: flex-start; justify-content: space-between; - gap: 24px; + gap: 16px; } .project-analysis-header__title-group { @@ -240,52 +239,52 @@ export default { } .project-analysis-header__eyebrow { - color: #65758d; - font-size: 16px; + font-size: 12px; font-weight: 600; - line-height: 1; + letter-spacing: 0; + color: #64748b; } .project-analysis-header__title { - margin-top: 18px; - color: #101a2b; - font-size: 30px; - font-weight: 700; - line-height: 1; + margin-top: 8px; + font-size: 24px; + font-weight: 600; + line-height: 1.2; + color: #0f172a; } .project-analysis-header__meta { display: inline-flex; align-items: center; - gap: 10px; - min-height: 34px; + gap: 12px; + min-height: 32px; padding: 0 12px; border: 1px solid #bfd0e2; - border-radius: 2px; + border-radius: 6px; background: #eef4f9; } .project-analysis-header__meta-label { - color: #637187; - font-size: 13px; + font-size: 12px; font-weight: 600; + color: #637187; } .project-analysis-header__meta-value { - color: #245b8f; font-size: 13px; font-weight: 600; + color: #245b8f; } .project-analysis-workspace { display: flex; align-items: flex-start; - gap: 36px; + gap: 20px; min-height: 700px; - max-height: calc(96vh - 168px); - padding: 36px; + max-height: calc(96vh - 164px); + padding: 24px; overflow: auto; - background: #ffffff; + background: #f5f7fb; } .project-analysis-layout { @@ -295,57 +294,90 @@ export default { } .project-analysis-layout__sidebar { - flex: 0 0 420px; + flex: 0 0 320px; } .project-analysis-layout__main { flex: 1; min-width: 0; - border-left: 1px solid #dde3ec; - padding-left: 36px; + border: 1px solid #dbe4ef; + border-radius: 6px; + background: #ffffff; + overflow: hidden; } .project-analysis-layout__alert { - margin-bottom: 20px; + margin-bottom: 16px; } .project-analysis-tabs { - margin-top: -6px; + margin-top: 0; +} + +@media (max-width: 1100px) { + .project-analysis-workspace { + flex-direction: column; + } + + .project-analysis-layout__sidebar { + flex: none; + width: 100%; + } + + .project-analysis-layout__main { + width: 100%; + } } diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue index aa1cce6e..ad49471d 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue @@ -1,52 +1,51 @@ @@ -82,126 +81,97 @@ export default { .project-analysis-sidebar { width: 100%; align-self: flex-start; + border: 1px solid #dbe4ef; + border-radius: 6px; + background: #ffffff; + overflow: hidden; } -.sidebar-profile-card { - border: 1px solid #dde3ec; - border-radius: 3px; +.sidebar-profile, +.sidebar-summary { + padding: 22px 24px; background: #ffffff; } .sidebar-profile { - padding: 24px 26px 20px; border-bottom: 1px solid #edf1f5; } .sidebar-summary { - padding: 22px 26px 26px; - border-top: 1px solid #dde3ec; - background: #fcfdfe; + margin-top: 0; + background: #fbfcfe; } -.sidebar-profile__identity-label { - color: #637187; - font-size: 15px; +.sidebar-section__eyebrow { + font-size: 12px; font-weight: 600; - margin-bottom: 16px; + letter-spacing: 0; + color: #64748b; } .sidebar-profile__name-row { display: flex; - align-items: center; - justify-content: space-between; - gap: 20px; + align-items: flex-start; + gap: 12px; } .sidebar-profile__name { - color: #111827; - font-size: 30px; - font-weight: 700; + margin-top: 8px; + font-size: 24px; + font-weight: 600; line-height: 1.2; + color: #0f172a; } .sidebar-risk-badge { display: inline-flex; align-items: center; - justify-content: center; - min-width: 64px; - height: 28px; + min-height: 26px; padding: 0 10px; border: 1px solid #edcaca; - border-radius: 2px; + border-radius: 6px; background: #fbefef; - color: #ad2f2f; - font-size: 14px; + font-size: 12px; font-weight: 600; - line-height: 26px; - text-align: center; + line-height: 24px; + color: #ad2f2f; } .sidebar-profile__meta { display: grid; - gap: 0; - margin-top: 18px; + gap: 14px; + margin-top: 20px; } .sidebar-profile__item { display: grid; - grid-template-columns: 88px minmax(0, 1fr); - gap: 12px; - padding: 10px 0; - border-bottom: 1px solid #edf1f5; -} - -.sidebar-profile__item:last-child { - border-bottom: 0; + gap: 6px; } .sidebar-profile__label, .sidebar-summary__count-label { - color: #637187; - font-size: 15px; + font-size: 12px; + color: #64748b; } .sidebar-profile__value, .sidebar-summary__count-value { - color: #172033; - font-size: 16px; - font-weight: 500; - line-height: 1.4; + font-size: 13px; + line-height: 1.6; + color: #0f172a; word-break: break-all; } -.sidebar-summary__title { - margin: 0 0 18px; - color: #223047; - font-size: 16px; - font-weight: 700; -} - .sidebar-summary__count { - display: flex; - align-items: baseline; - gap: 12px; - margin-top: 0; - margin-bottom: 22px; + display: grid; + gap: 6px; + margin-top: 16px; } .sidebar-summary__tags { display: grid; gap: 10px; - margin-top: 0; -} - -.sidebar-summary__count-label { - font-size: 15px; -} - -.sidebar-summary__count-value { - color: #172033; - font-size: 22px; - font-weight: 700; - line-height: 1; + margin-top: 18px; } .sidebar-tag-list { @@ -212,14 +182,14 @@ export default { } .sidebar-tag-list ::v-deep(.el-tag) { - height: 28px; - padding: 0 10px; + height: 26px; + padding: 0 9px; border: 1px solid #bfd0e2; - border-radius: 2px; + border-radius: 6px; background: #ffffff; color: #245b8f; - font-size: 14px; + font-size: 12px; font-weight: 600; - line-height: 26px; + line-height: 24px; } diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js index 0e2e64b4..ee9311a0 100644 --- a/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js +++ b/ruoyi-ui/tests/unit/project-analysis-dialog-abnormal-tab.test.js @@ -57,8 +57,11 @@ assert(!dialog.includes("project-analysis-layout__main-scroll"), "主区不应 "summary", "extraFields", "grid-template-columns: minmax(0, 1fr)", + "border-radius: 6px", ].forEach((token) => assert(abnormalTab.includes(token), token)); +assert(!abnormalTab.includes("border-radius: 12px"), "异常明细内部不应继续使用独立 12px 圆角"); + [ "placeholder-panel", "placeholder-panel__title", diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js index 2c3791bd..ff50b9b4 100644 --- a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js +++ b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js @@ -34,9 +34,9 @@ const mockSource = fs.readFileSync( "detailLoading", "detailError", "handleRetryDetail()", - "border: 1px solid #dde3ec", - "background: #f5f6f8", - "font-size: 30px", + "background: #f5f7fb", + "border: 1px solid #dbe4ef", + "border-radius: 8px", ].forEach((token) => assert(dialog.includes(token), token)); [ @@ -44,8 +44,9 @@ const mockSource = fs.readFileSync( 'top="2vh"', "project-analysis-header__main", "project-analysis-header__meta", - "border-left: 1px solid #dde3ec", - "padding: 36px", + "project-analysis-layout__main", + "flex: 0 0 320px", + "border-radius: 6px", ].forEach((token) => assert(dialog.includes(token), token)); [ @@ -56,7 +57,8 @@ const mockSource = fs.readFileSync( "overflow-y: auto", "max-height: calc(90vh - 120px)", "border-radius: 24px", - "background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)", + "border-radius: 20px", + "letter-spacing: 0.08em", ].forEach((token) => assert(!dialog.includes(token), token)); [ diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js index 5dc6604b..908620e6 100644 --- a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js +++ b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js @@ -25,28 +25,27 @@ const entry = fs.readFileSync( ); [ - "sidebar-profile-card", "sidebar-profile", "sidebar-profile__name", - "sidebar-profile__identity-label", "sidebar-risk-badge", "sidebar-profile__meta", "sidebar-summary", - "sidebar-summary__title", "sidebar-summary__count", "sidebar-tag-list", "formatRiskTag", "tag.ruleName", "flex-wrap: wrap", - "justify-content: space-between", - "border: 1px solid #dde3ec", + "align-items: flex-start", + "border: 1px solid #dbe4ef", + "border-radius: 6px", ].forEach((token) => assert(sidebar.includes(token), token)); assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当前命中模型字段"); assert(!sidebar.includes("排查记录摘要"), "侧栏应移除排查记录摘要"); assert(!sidebar.includes("position: sticky"), "左侧整卡不应保持固定"); -assert(!sidebar.includes("border-radius: 20px"), "侧栏不应继续保留旧圆角卡片样式"); +assert(!sidebar.includes("border-radius: 20px"), "侧栏不应继续保留旧大圆角卡片样式"); assert(!sidebar.includes("background: rgba(255, 255, 255, 0.9)"), "侧栏不应继续保留旧半透明卡片底色"); +assert(!sidebar.includes("justify-content: space-between"), "不应继续以表单式左右对齐作为主体布局"); assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块"); assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块"); @@ -54,7 +53,7 @@ assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块"); [ "this.detailData && this.detailData.basicInfo", "...(this.modelSummary || {})", - "align-items: flex-end", + "align-items: flex-start", ].forEach((token) => assert(dialog.includes(token), token)); assert(entry.includes(':model-summary="projectAnalysisModelSummary"'), "入口页应继续透传模型摘要");