From ef8147892e6c5b3e84bce838b59d46d29b57e7d2 Mon Sep 17 00:00:00 2001 From: wjj <2069666735@qq.com> Date: Wed, 6 May 2026 16:18:03 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E9=A1=B9=E7=9B=AE=E5=88=86?= =?UTF-8?q?=E6=9E=90=E4=B8=AA=E4=BA=BA=E8=AF=A6=E6=83=85=E9=A1=B5=E6=AD=A3?= =?UTF-8?q?=E5=BC=8F=E5=8C=96=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...style-alignment-frontend-implementation.md | 24 +++++++ ...n-detail-style-alignment-implementation.md | 18 ++++++ .../detail/ProjectAnalysisAbnormalTab.vue | 63 ++++++++++++++---- .../detail/ProjectAnalysisDialog.vue | 37 +++++------ .../detail/ProjectAnalysisSidebar.vue | 64 +++++++++---------- 5 files changed, 143 insertions(+), 63 deletions(-) create mode 100644 docs/plans/frontend/2026-05-06-project-analysis-person-detail-style-alignment-frontend-implementation.md create mode 100644 docs/reports/implementation/2026-05-06-project-analysis-person-detail-style-alignment-implementation.md diff --git 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 new file mode 100644 index 00000000..253a4496 --- /dev/null +++ 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` + +## 实施要点 + +- 调整详情弹窗头部、左右分栏比例、页签尺寸和间距。 +- 调整左侧人物档案与命中模型摘要区块的标题、信息行、风险徽标和标签样式。 +- 调整右侧异常明细内容区的区块标题、表格头部、单元格留白、异常对象摘要卡片和快照块样式。 +- 保持现有数据绑定、页签切换、证据库按钮和分页逻辑不变。 + +## 验证 + +- 在真实业务页面打开项目总览详情弹窗，检查个人详情页视觉是否与参考图一致。 +- 确认异常明细、对象摘要、加入证据库按钮和分页仍可正常显示。 diff --git 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 new file mode 100644 index 00000000..1e97591b --- /dev/null +++ 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` 打开个人详情弹窗进行样式核对。 +- 核对左侧人物档案、右侧页签、表格块和异常对象摘要块的正式化效果。 diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue index d5cf8d61..57d5d3a6 100644 --- 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; +} diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue index ce0c8ee7..2071bcf6 100644 --- 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; } @@ -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; } } diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue index aa1cce6e..9b8d781a 100644 --- 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; }