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

2026-05-06 17:03:55 +08:00
parent bf7a4c0538
commit bbc6a2050b
7 changed files with 230 additions and 166 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
@@ -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;
 }

--- 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%;
+  }
 }
 </style>

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

  .el-dialog__header {
-    display: none;
+    padding: 18px 24px;
+    border-bottom: 1px solid #dbe4ef;
+    background: #ffffff;
+  }
+
+  .el-dialog__title {
+    color: #101a2b;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  .el-dialog__headerbtn {
+    top: 18px;
+    right: 22px;
  }

  .el-dialog__body {
    padding: 0;
-    background: #f5f6f8;
+    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: 46px;
-    padding: 0 24px !important;
+    padding: 0 22px !important;
    color: #2a374a;
-    font-size: 16px;
+    font-size: 14px;
    font-weight: 500;
    line-height: 46px;
  }
@@ -356,12 +388,13 @@ export default {
  }

  .el-tabs__active-bar {
-    height: 3px;
+    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
@@ -1,52 +1,51 @@
 <template>
  <aside class="project-analysis-sidebar">
-    <div class="sidebar-profile-card">
-      <section class="sidebar-profile">
-        <div class="sidebar-profile__identity">
-          <div class="sidebar-profile__identity-label">人物档案</div>
-          <div class="sidebar-profile__name-row">
-            <div class="sidebar-profile__name">{{ sidebarData.basicInfo.name || "-" }}</div>
-            <div class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</div>
-          </div>
+    <section class="sidebar-profile">
+      <div class="sidebar-profile__name-row">
+        <div>
+          <div class="sidebar-section__eyebrow">人物档案</div>
+          <div class="sidebar-profile__name">{{ sidebarData.basicInfo.name || "-" }}</div>
        </div>
-        <div class="sidebar-profile__meta">
-          <div class="sidebar-profile__item">
-            <span class="sidebar-profile__label">工号</span>
-            <span class="sidebar-profile__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
-          </div>
-          <div class="sidebar-profile__item">
-            <span class="sidebar-profile__label">部门</span>
-            <span class="sidebar-profile__value">{{ sidebarData.basicInfo.department || "-" }}</span>
-          </div>
-          <div class="sidebar-profile__item">
-            <span class="sidebar-profile__label">所属项目</span>
-            <span class="sidebar-profile__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
-          </div>
-        </div>
-      </section>
+        <div class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</div>
+      </div>

-      <section class="sidebar-summary">
-        <div class="sidebar-summary__title">命中模型摘要</div>
-        <div class="sidebar-summary__count">
-          <span class="sidebar-summary__count-label">命中模型数</span>
-          <span class="sidebar-summary__count-value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
+      <div class="sidebar-profile__meta">
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">工号</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
        </div>
-        <div class="sidebar-summary__tags">
-          <span class="sidebar-profile__label">核心异常标签</span>
-          <div v-if="sidebarData.modelSummary.riskTags.length" class="sidebar-tag-list">
-            <el-tag
-              v-for="(tag, index) in sidebarData.modelSummary.riskTags"
-              :key="`${formatRiskTag(tag)}-${index}`"
-              size="mini"
-              effect="plain"
-            >
-              {{ formatRiskTag(tag) }}
-            </el-tag>
-          </div>
-          <span v-else class="sidebar-profile__value">暂无异常标签</span>
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">部门</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.department || "-" }}</span>
        </div>
-      </section>
-    </div>
+        <div class="sidebar-profile__item">
+          <span class="sidebar-profile__label">所属项目</span>
+          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.projectName || "-" }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="sidebar-summary">
+      <div class="sidebar-section__eyebrow">命中模型摘要</div>
+      <div class="sidebar-summary__count">
+        <span class="sidebar-summary__count-label">命中模型数</span>
+        <span class="sidebar-summary__count-value">{{ sidebarData.modelSummary.modelCount || "-" }}</span>
+      </div>
+      <div class="sidebar-summary__tags">
+        <span class="sidebar-profile__label">核心异常标签</span>
+        <div v-if="sidebarData.modelSummary.riskTags.length" class="sidebar-tag-list">
+          <el-tag
+            v-for="(tag, index) in sidebarData.modelSummary.riskTags"
+            :key="`${formatRiskTag(tag)}-${index}`"
+            size="mini"
+            effect="plain"
+          >
+            {{ formatRiskTag(tag) }}
+          </el-tag>
+        </div>
+        <span v-else class="sidebar-profile__value">暂无异常标签</span>
+      </div>
+    </section>
  </aside>
 </template>

@@ -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;
 }
 </style>
--- 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",
--- 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));

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