补充项目分析个人详情页正式化样式

2026-05-06 16:18:03 +08:00
parent 0ea504f6b3
commit 9d3e8beceb
5 changed files with 256 additions and 182 deletions
--- a/docs/plans/frontend/2026-05-06-project-analysis-person-detail-style-alignment-frontend-implementation.md
+++ b/docs/plans/frontend/2026-05-06-project-analysis-person-detail-style-alignment-frontend-implementation.md
@@ -0,0 +1,24 @@
+# 2026-05-06 项目分析个人详情页样式对齐前端实施计划
+
+## 目标
+
+- 将项目分析个人详情页样式对齐到用户提供的参考图。
+- 本次只调整前端样式表现，不改接口、字段、交互逻辑和业务内容。
+
+## 范围
+
+- `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`
+
+## 实施要点
+
+- 调整详情弹窗头部、左右分栏比例、页签尺寸和间距。
+- 调整左侧人物档案与命中模型摘要区块的标题、信息行、风险徽标和标签样式。
+- 调整右侧异常明细内容区的区块标题、表格头部、单元格留白、异常对象摘要卡片和快照块样式。
+- 保持现有数据绑定、页签切换、证据库按钮和分页逻辑不变。
+
+## 验证
+
+- 在真实业务页面打开项目总览详情弹窗，检查个人详情页视觉是否与参考图一致。
+- 确认异常明细、对象摘要、加入证据库按钮和分页仍可正常显示。
--- a/docs/reports/implementation/2026-05-06-project-analysis-person-detail-style-alignment-implementation.md
+++ b/docs/reports/implementation/2026-05-06-project-analysis-person-detail-style-alignment-implementation.md
@@ -0,0 +1,18 @@
+# 2026-05-06 项目分析个人详情页样式对齐实施记录
+
+## 本次修改
+
+- 调整 `ProjectAnalysisDialog.vue`，补齐参考图中的标题区、内容区留白、左右分栏间距和页签样式。
+- 调整 `ProjectAnalysisSidebar.vue`，补齐人物档案区、风险等级徽标、命中模型摘要和标签的正式化版式。
+- 调整 `ProjectAnalysisAbnormalTab.vue`，补齐流水异常明细表格、异常对象摘要区、快照块和信息行样式。
+
+## 未改内容
+
+- 未改接口请求和数据拼装逻辑。
+- 未改页签切换、分页、加入证据库、异常分组和字段内容。
+- 未新增或删除业务区块。
+
+## 验证方式
+
+- 使用真实业务页面 `http://localhost/ccdiProject/detail/90337?tab=overview` 打开个人详情弹窗进行样式核对。
+- 核对左侧人物档案、右侧页签、表格块和异常对象摘要块的正式化效果。
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
@@ -244,29 +244,31 @@ export default {
 .project-analysis-abnormal-tab {
  display: flex;
  flex-direction: column;
-  gap: 16px;
+  gap: 20px;
 }

 .abnormal-card {
-  padding: 20px;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
+  border: 1px solid #d9e1ed;
  background: #fff;
+  overflow: hidden;
 }

 .abnormal-card__header {
-  margin-bottom: 14px;
+  margin-bottom: 0;
+  padding: 22px 30px;
+  border-bottom: 1px solid #e3eaf3;
 }

 .abnormal-card__title {
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 18px;
+  font-weight: 700;
  color: #0f172a;
 }

 .abnormal-card__content {
  display: grid;
-  gap: 16px;
+  gap: 0;
+  background: #ffffff;
 }

 .abnormal-card__subtitle {
@@ -275,15 +277,15 @@ export default {
 }

 .abnormal-table {
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
+  border-radius: 0;
  overflow: hidden;
 }

 .abnormal-pagination {
  display: flex;
  justify-content: flex-end;
-  margin-top: 16px;
+  padding: 18px 24px 20px;
+  border-top: 1px solid #e8eef6;
 }

 .multi-line-cell {
@@ -305,7 +307,7 @@ export default {
 .tag-list {
  display: flex;
  flex-wrap: wrap;
-  gap: 16px;
+  gap: 10px;
 }

 .object-card-grid {
@@ -316,9 +318,8 @@ export default {

 .object-card {
  padding: 16px;
-  border: 1px solid #e2e8f0;
-  border-radius: 6px;
-  background: #f8fafc;
+  border: 1px solid #d9e1ed;
+  background: #ffffff;
 }

 .object-card__header {
@@ -367,8 +368,8 @@ export default {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #dbeafe;
-  border-radius: 6px;
-  background: #eff6ff;
+  border-left: 3px solid #245b8f;
+  background: #f4f8fd;
 }

 .object-card__snapshot-label {
@@ -396,4 +397,36 @@ export default {
  color: #1e293b;
  text-align: right;
 }
+
+.abnormal-table ::v-deep(.el-table__header-wrapper th) {
+  height: 58px;
+  padding: 0 22px;
+  border-bottom: 1px solid #d9e1ed;
+  background: #f3f6fa;
+  color: #5f7592;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.abnormal-table ::v-deep(.el-table__body-wrapper td) {
+  padding: 22px;
+  border-bottom: 1px solid #e6edf5;
+}
+
+.abnormal-table ::v-deep(.cell) {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.tag-list ::v-deep(.el-tag) {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #c8d6e8;
+  border-radius: 2px;
+  background: #ffffff;
+  color: #245b8f;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 26px;
+}
 </style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -217,21 +217,22 @@ export default {
  display: flex;
  flex-direction: column;
  min-height: calc(96vh - 64px);
-  background: #f5f7fb;
+  border: 1px solid #dde3ec;
+  background: #ffffff;
  overflow: hidden;
 }

 .project-analysis-header {
-  padding: 20px 28px 18px;
-  border-bottom: 1px solid #dbe4ef;
+  padding: 38px 54px 34px;
+  border-bottom: 1px solid #dde3ec;
  background: #ffffff;
 }

 .project-analysis-header__main {
  display: flex;
-  align-items: flex-start;
+  align-items: flex-end;
  justify-content: space-between;
-  gap: 16px;
+  gap: 24px;
 }

 .project-analysis-header__title-group {
@@ -239,52 +240,52 @@ export default {
 }

 .project-analysis-header__eyebrow {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0;
-  color: #64748b;
+  color: #65758d;
+  font-size: 17px;
+  font-weight: 700;
+  line-height: 1;
 }

 .project-analysis-header__title {
-  margin-top: 8px;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-  color: #0f172a;
+  margin-top: 24px;
+  color: #101a2b;
+  font-size: 34px;
+  font-weight: 700;
+  line-height: 1;
 }

 .project-analysis-header__meta {
  display: inline-flex;
  align-items: center;
-  gap: 12px;
-  min-height: 32px;
+  gap: 10px;
+  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #bfd0e2;
-  border-radius: 6px;
+  border-radius: 2px;
  background: #eef4f9;
 }

 .project-analysis-header__meta-label {
-  font-size: 12px;
-  font-weight: 600;
  color: #637187;
+  font-size: 13px;
+  font-weight: 600;
 }

 .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: 20px;
-  min-height: 700px;
-  max-height: calc(96vh - 164px);
-  padding: 24px;
+  gap: 56px;
+  min-height: 720px;
+  max-height: calc(96vh - 168px);
+  padding: 28px 54px 42px;
  overflow: auto;
-  background: #f5f7fb;
+  background: #ffffff;
 }

 .project-analysis-layout {
@@ -294,107 +295,74 @@ export default {
 }

 .project-analysis-layout__sidebar {
-  flex: 0 0 320px;
+  flex: 0 0 38%;
+  max-width: 520px;
 }

 .project-analysis-layout__main {
  flex: 1;
  min-width: 0;
-  border: 1px solid #dbe4ef;
-  border-radius: 6px;
-  background: #ffffff;
-  overflow: hidden;
+  border-left: 1px solid #dde3ec;
+  padding-left: 56px;
 }

 .project-analysis-layout__alert {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }

 .project-analysis-tabs {
-  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%;
-  }
+  margin-top: -2px;
 }
 </style>

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

  .el-dialog__header {
-    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;
+    display: none;
  }

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

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

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

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

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

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

  .el-tabs__content {
-    padding: 20px;
-    background: #ffffff;
+    padding-top: 28px;
  }
 }
 </style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
@@ -1,51 +1,53 @@
 <template>
  <aside class="project-analysis-sidebar">
-    <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 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>
        </div>
-        <div class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</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 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>
-        <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>
+      </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>
+      <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>
-        <span v-else class="sidebar-profile__value">暂无异常标签</span>
-      </div>
-    </section>
+        <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>
+    </div>
  </aside>
 </template>

@@ -81,97 +83,126 @@ export default {
 .project-analysis-sidebar {
  width: 100%;
  align-self: flex-start;
-  border: 1px solid #dbe4ef;
-  border-radius: 6px;
-  background: #ffffff;
-  overflow: hidden;
 }

-.sidebar-profile,
-.sidebar-summary {
-  padding: 22px 24px;
+.sidebar-profile-card {
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
  background: #ffffff;
 }

 .sidebar-profile {
+  padding: 34px 42px 28px;
  border-bottom: 1px solid #edf1f5;
 }

 .sidebar-summary {
-  margin-top: 0;
-  background: #fbfcfe;
+  padding: 30px 42px 34px;
+  border-top: 1px solid #dde3ec;
+  background: #fcfdfe;
 }

-.sidebar-section__eyebrow {
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0;
-  color: #64748b;
+.sidebar-profile__identity-label {
+  color: #637187;
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 28px;
 }

 .sidebar-profile__name-row {
  display: flex;
-  align-items: flex-start;
-  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
 }

 .sidebar-profile__name {
-  margin-top: 8px;
-  font-size: 24px;
-  font-weight: 600;
+  color: #111827;
+  font-size: 34px;
+  font-weight: 700;
  line-height: 1.2;
-  color: #0f172a;
 }

 .sidebar-risk-badge {
  display: inline-flex;
  align-items: center;
-  min-height: 26px;
-  padding: 0 10px;
-  border: 1px solid #edcaca;
-  border-radius: 6px;
-  background: #fbefef;
-  font-size: 12px;
+  justify-content: center;
+  min-width: 102px;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px solid #f0c6c1;
+  border-radius: 2px;
+  background: #fff3f2;
+  color: #c43d33;
+  font-size: 17px;
  font-weight: 600;
-  line-height: 24px;
-  color: #ad2f2f;
+  line-height: 42px;
+  text-align: center;
 }

 .sidebar-profile__meta {
  display: grid;
-  gap: 14px;
-  margin-top: 20px;
+  gap: 0;
+  margin-top: 30px;
 }

 .sidebar-profile__item {
  display: grid;
-  gap: 6px;
+  grid-template-columns: 116px minmax(0, 1fr);
+  gap: 16px;
+  padding: 18px 0;
+  border-bottom: 1px solid #edf1f5;
+}
+
+.sidebar-profile__item:last-child {
+  border-bottom: 0;
 }

 .sidebar-profile__label,
 .sidebar-summary__count-label {
-  font-size: 12px;
-  color: #64748b;
+  color: #637187;
+  font-size: 16px;
 }

 .sidebar-profile__value,
 .sidebar-summary__count-value {
-  font-size: 13px;
-  line-height: 1.6;
-  color: #0f172a;
+  color: #172033;
+  font-size: 17px;
+  font-weight: 500;
+  line-height: 1.4;
  word-break: break-all;
 }

+.sidebar-summary__title {
+  margin: 0 0 24px;
+  color: #223047;
+  font-size: 18px;
+  font-weight: 700;
+}
+
 .sidebar-summary__count {
-  display: grid;
-  gap: 6px;
-  margin-top: 16px;
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  margin-top: 0;
+  margin-bottom: 28px;
 }

 .sidebar-summary__tags {
  display: grid;
-  gap: 10px;
-  margin-top: 18px;
+  gap: 16px;
+  margin-top: 0;
+}
+
+.sidebar-summary__count-label {
+  font-size: 17px;
+}
+
+.sidebar-summary__count-value {
+  color: #172033;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1;
 }

 .sidebar-tag-list {
@@ -182,14 +213,14 @@ export default {
 }

 .sidebar-tag-list ::v-deep(.el-tag) {
-  height: 26px;
-  padding: 0 9px;
-  border: 1px solid #bfd0e2;
-  border-radius: 6px;
+  height: 38px;
+  padding: 0 16px;
+  border: 1px solid #cad8eb;
+  border-radius: 2px;
  background: #ffffff;
  color: #245b8f;
-  font-size: 12px;
+  font-size: 15px;
  font-weight: 600;
-  line-height: 24px;
+  line-height: 36px;
 }
 </style>