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 38e85325..26ecd188 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue @@ -336,6 +336,7 @@ export default { .abnormal-card { border: 1px solid #d9e1ed; + border-radius: 6px; background: #fff; overflow: hidden; } @@ -368,7 +369,8 @@ export default { } .abnormal-table { - border-radius: 0; + border: 1px solid #e2e8f0; + border-radius: 6px; overflow: hidden; } @@ -411,6 +413,7 @@ export default { padding: 16px; border: 1px solid #d9e1ed; background: #ffffff; + border-radius: 6px; } .object-card__header { @@ -460,6 +463,7 @@ export default { padding: 12px; border: 1px solid #dbeafe; border-left: 3px solid #245b8f; + border-radius: 6px; background: #f4f8fd; } @@ -513,7 +517,7 @@ export default { height: 28px; padding: 0 10px; border: 1px solid #c8d6e8; - border-radius: 2px; + border-radius: 6px; background: #ffffff; color: #245b8f; font-size: 12px; diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue index 68f04586..4c722a3d 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue @@ -269,14 +269,13 @@ export default { display: flex; flex-direction: column; min-height: calc(92vh - 64px); - border: 1px solid #dde3ec; - background: #ffffff; + background: #f5f7fb; overflow: hidden; } .project-analysis-header { padding: 14px 24px; - border-bottom: 1px solid #dde3ec; + border-bottom: 1px solid #dbe4ef; background: #ffffff; } @@ -305,20 +304,20 @@ export default { min-height: 30px; 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-header__close { @@ -326,7 +325,7 @@ export default { width: 34px; height: 34px; border: none; - border-radius: 2px; + border-radius: 6px; background: transparent; color: #8d99aa; font-size: 18px; @@ -348,7 +347,7 @@ export default { max-height: calc(92vh - 96px); padding: 20px 28px 28px; overflow: auto; - background: #ffffff; + background: #f5f7fb; } .project-analysis-workspace--sidebar-collapsed { @@ -377,29 +376,50 @@ export default { .project-analysis-layout__main { flex: 1; min-width: 0; - border-left: 0; - padding-left: 24px; + margin-left: 24px; + border: 1px solid #dbe4ef; + border-radius: 6px; background: #ffffff; + overflow: hidden; } .project-analysis-workspace--sidebar-collapsed .project-analysis-layout__main { - padding-left: 18px; + margin-left: 18px; } .project-analysis-layout__alert { - margin-bottom: 20px; + margin-bottom: 16px; } .project-analysis-tabs { - margin-top: -2px; + margin-top: 0; +} + +@media (max-width: 1100px) { + .project-analysis-workspace { + flex-direction: column; + } + + .project-analysis-layout__sidebar { + position: static; + flex: none; + max-width: none; + width: 100%; + } + + .project-analysis-layout__main { + width: 100%; + margin-top: 16px; + margin-left: 0; + } } diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue index 37a0c7ac..94bc5abe 100644 --- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue +++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue @@ -141,10 +141,11 @@ export default { .sidebar-profile-card { position: relative; - border: 1px solid #dfe6ef; - border-radius: 3px; + border: 1px solid #dbe4ef; + border-radius: 6px; background: #ffffff; box-shadow: none; + overflow: hidden; } .sidebar-card-toggle { @@ -159,7 +160,7 @@ export default { height: 24px; padding: 0; border: 1px solid #d5dfeb; - border-radius: 2px; + border-radius: 6px; background: #ffffff; color: #4f6077; font-size: 12px; @@ -193,16 +194,16 @@ export default { .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: 26px; - font-weight: 700; + margin-top: 8px; + font-size: 24px; + font-weight: 600; line-height: 1.2; + color: #0f172a; min-width: 0; word-break: break-all; } @@ -211,17 +212,15 @@ export default { display: inline-flex; align-items: center; justify-content: center; - min-width: 74px; - height: 32px; + min-height: 26px; padding: 0 10px; - border: 1px solid #f0c6c1; - border-radius: 2px; - background: #fff3f2; - color: #c43d33; - font-size: 14px; + border: 1px solid #edcaca; + border-radius: 6px; + background: #fbefef; + font-size: 12px; font-weight: 600; - line-height: 30px; - text-align: center; + line-height: 24px; + color: #ad2f2f; } .sidebar-profile__meta { @@ -244,16 +243,15 @@ export default { .sidebar-profile__label, .sidebar-summary__count-label { - color: #637187; - font-size: 13px; + font-size: 12px; + color: #64748b; } .sidebar-profile__value, .sidebar-summary__count-value { - color: #172033; - font-size: 14px; - font-weight: 500; - line-height: 1.4; + font-size: 13px; + line-height: 1.6; + color: #0f172a; word-break: break-all; } @@ -289,15 +287,15 @@ export default { } .sidebar-tag-list ::v-deep(.el-tag) { - height: 28px; - padding: 0 10px; - border: 1px solid #cad8eb; - border-radius: 2px; + height: 26px; + padding: 0 9px; + border: 1px solid #bfd0e2; + border-radius: 6px; background: #ffffff; color: #245b8f; font-size: 12px; font-weight: 600; - line-height: 26px; + line-height: 24px; } .sidebar-collapsed-card { @@ -308,8 +306,8 @@ export default { min-height: 220px; width: 46px; padding: 44px 0 14px; - border: 1px solid #dfe6ef; - border-radius: 3px; + border: 1px solid #dbe4ef; + border-radius: 6px; background: #ffffff; color: #637187; writing-mode: vertical-rl; 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..dd21a345 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 @@ -45,8 +45,8 @@ assert(!dialog.includes("project-analysis-layout__main-scroll"), "主区不应 ':page-size="statementPageSize"', '@current-change="handleStatementPageChange(group, $event)"', "交易时间", - "本方账户", - "对方账户", + "本方信息", + "对方信息", "摘要/交易类型", "异常标签", "交易金额", @@ -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..624f8e80 100644 --- a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js +++ b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js @@ -34,18 +34,20 @@ 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)); [ - 'width="92%"', + 'width="88%"', 'top="2vh"', "project-analysis-header__main", "project-analysis-header__meta", - "border-left: 1px solid #dde3ec", - "padding: 36px", + "project-analysis-layout__main", + "flex: 0 0 286px", + "project-analysis-workspace--sidebar-collapsed", + "border-radius: 6px", ].forEach((token) => assert(dialog.includes(token), token)); [ @@ -56,7 +58,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"'), "入口页应继续透传模型摘要");