统一项目分析弹窗圆角样式

2026-05-06 17:03:55 +08:00
parent 266108ac06
commit 6f6f2d264c
7 changed files with 158 additions and 75 deletions
--- 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
@@ -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。
--- 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;
--- 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;
+  }
 }
 </style>

 <style lang="scss">
 .project-analysis-dialog {
  margin-top: 2vh !important;
-  border-radius: 0;
-  background: #ffffff;
+  border-radius: 8px;
+  background: #f5f7fb;
  overflow: hidden;

  .el-dialog__header {
@@ -408,41 +428,44 @@ export default {

  .el-dialog__body {
    padding: 0;
-    background: #ffffff;
+    background: #f5f7fb;
  }
 }

 .project-analysis-tabs {
  .el-tabs__header {
    margin: 0;
+    padding: 0 20px;
+    border-bottom: 1px solid #dbe4ef;
+    background: #ffffff;
  }

  .el-tabs__nav-wrap::after {
-    height: 1px;
-    background: #dde3ec;
+    display: none;
  }

  .el-tabs__item {
-    height: 52px;
-    padding: 0 24px !important;
+    height: 46px;
+    padding: 0 22px !important;
    color: #2a374a;
-    font-size: 16px;
+    font-size: 14px;
    font-weight: 500;
-    line-height: 52px;
+    line-height: 46px;
  }

  .el-tabs__item.is-active {
    color: #245b8f;
-    font-weight: 700;
+    font-weight: 600;
  }

  .el-tabs__active-bar {
-    height: 4px;
+    height: 2px;
    background: #245b8f;
  }

  .el-tabs__content {
-    padding-top: 20px;
+    padding: 20px;
+    background: #ffffff;
  }
 }
 </style>
--- 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;
--- 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",
--- 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));

 [
--- 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"'), "入口页应继续透传模型摘要");