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

2026-05-06 16:18:03 +08:00
parent 369c682564
commit ef8147892e
5 changed files with 143 additions and 63 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,28 +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: 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 {
@@ -274,14 +277,15 @@ export default {
 }

 .abnormal-table {
-  border-radius: 12px;
+  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 {
@@ -303,7 +307,7 @@ export default {
 .tag-list {
  display: flex;
  flex-wrap: wrap;
-  gap: 16px;
+  gap: 10px;
 }

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

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

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

 .object-card__snapshot-label {
@@ -392,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
@@ -223,7 +223,7 @@ export default {
 }

 .project-analysis-header {
-  padding: 32px 36px 24px;
+  padding: 38px 54px 34px;
  border-bottom: 1px solid #dde3ec;
  background: #ffffff;
 }
@@ -241,15 +241,15 @@ export default {

 .project-analysis-header__eyebrow {
  color: #65758d;
-  font-size: 16px;
-  font-weight: 600;
+  font-size: 17px;
+  font-weight: 700;
  line-height: 1;
 }

 .project-analysis-header__title {
-  margin-top: 18px;
+  margin-top: 24px;
  color: #101a2b;
-  font-size: 30px;
+  font-size: 34px;
  font-weight: 700;
  line-height: 1;
 }
@@ -280,10 +280,10 @@ export default {
 .project-analysis-workspace {
  display: flex;
  align-items: flex-start;
-  gap: 36px;
-  min-height: 700px;
+  gap: 56px;
+  min-height: 720px;
  max-height: calc(96vh - 168px);
-  padding: 36px;
+  padding: 28px 54px 42px;
  overflow: auto;
  background: #ffffff;
 }
@@ -295,14 +295,15 @@ export default {
 }

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

 .project-analysis-layout__main {
  flex: 1;
  min-width: 0;
  border-left: 1px solid #dde3ec;
-  padding-left: 36px;
+  padding-left: 56px;
 }

 .project-analysis-layout__alert {
@@ -310,7 +311,7 @@ export default {
 }

 .project-analysis-tabs {
-  margin-top: -6px;
+  margin-top: -2px;
 }
 </style>

@@ -342,26 +343,26 @@ export default {
  }

  .el-tabs__item {
-    height: 46px;
-    padding: 0 24px !important;
+    height: 58px;
+    padding: 0 32px !important;
    color: #2a374a;
-    font-size: 16px;
+    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: 3px;
+    height: 4px;
    background: #245b8f;
  }

  .el-tabs__content {
-    padding-top: 20px;
+    padding-top: 28px;
  }
 }
 </style>
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
@@ -91,21 +91,21 @@ export default {
 }

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

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

 .sidebar-profile__identity-label {
  color: #637187;
-  font-size: 15px;
-  font-weight: 600;
-  margin-bottom: 16px;
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 28px;
 }

 .sidebar-profile__name-row {
@@ -117,7 +117,7 @@ export default {

 .sidebar-profile__name {
  color: #111827;
-  font-size: 30px;
+  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
 }
@@ -126,30 +126,30 @@ export default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  min-width: 64px;
-  height: 28px;
-  padding: 0 10px;
-  border: 1px solid #edcaca;
+  min-width: 102px;
+  height: 44px;
+  padding: 0 16px;
+  border: 1px solid #f0c6c1;
  border-radius: 2px;
-  background: #fbefef;
-  color: #ad2f2f;
-  font-size: 14px;
+  background: #fff3f2;
+  color: #c43d33;
+  font-size: 17px;
  font-weight: 600;
-  line-height: 26px;
+  line-height: 42px;
  text-align: center;
 }

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

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

@@ -160,46 +160,46 @@ export default {
 .sidebar-profile__label,
 .sidebar-summary__count-label {
  color: #637187;
-  font-size: 15px;
+  font-size: 16px;
 }

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

 .sidebar-summary__title {
-  margin: 0 0 18px;
+  margin: 0 0 24px;
  color: #223047;
-  font-size: 16px;
+  font-size: 18px;
  font-weight: 700;
 }

 .sidebar-summary__count {
  display: flex;
  align-items: baseline;
-  gap: 12px;
+  gap: 16px;
  margin-top: 0;
-  margin-bottom: 22px;
+  margin-bottom: 28px;
 }

 .sidebar-summary__tags {
  display: grid;
-  gap: 10px;
+  gap: 16px;
  margin-top: 0;
 }

 .sidebar-summary__count-label {
-  font-size: 15px;
+  font-size: 17px;
 }

 .sidebar-summary__count-value {
  color: #172033;
-  font-size: 22px;
+  font-size: 40px;
  font-weight: 700;
  line-height: 1;
 }
@@ -212,14 +212,14 @@ export default {
 }

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