wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wjj
2026-05-06 16:18:03 +08:00
committed by wkc
parent 0ea504f6b3
commit 9d3e8beceb
5 changed files with 256 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/plans/frontend/2026-05-06-project-analysis-person-detail-style-alignment-frontend-implementation.md Normal file
View File

@@ -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`
## 实施要点
- 调整详情弹窗头部、左右分栏比例、页签尺寸和间距。
- 调整左侧人物档案与命中模型摘要区块的标题、信息行、风险徽标和标签样式。
- 调整右侧异常明细内容区的区块标题、表格头部、单元格留白、异常对象摘要卡片和快照块样式。
- 保持现有数据绑定、页签切换、证据库按钮和分页逻辑不变。
## 验证
- 在真实业务页面打开项目总览详情弹窗，检查个人详情页视觉是否与参考图一致。
- 确认异常明细、对象摘要、加入证据库按钮和分页仍可正常显示。

18
docs/reports/implementation/2026-05-06-project-analysis-person-detail-style-alignment-implementation.md Normal file
View File

@@ -0,0 +1,18 @@
# 2026-05-06 项目分析个人详情页样式对齐实施记录
## 本次修改
- 调整 `ProjectAnalysisDialog.vue`，补齐参考图中的标题区、内容区留白、左右分栏间距和页签样式。
- 调整 `ProjectAnalysisSidebar.vue`，补齐人物档案区、风险等级徽标、命中模型摘要和标签的正式化版式。
- 调整 `ProjectAnalysisAbnormalTab.vue`，补齐流水异常明细表格、异常对象摘要区、快照块和信息行样式。
## 未改内容
- 未改接口请求和数据拼装逻辑。
- 未改页签切换、分页、加入证据库、异常分组和字段内容。
- 未新增或删除业务区块。
## 验证方式
- 使用真实业务页面 `http://localhost/ccdiProject/detail/90337?tab=overview` 打开个人详情弹窗进行样式核对。
- 核对左侧人物档案、右侧页签、表格块和异常对象摘要块的正式化效果。

67
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisAbnormalTab.vue
View File

@@ -244,29 +244,31 @@ export default {
.project-analysis-abnormal-tab { .project-analysis-abnormal-tab {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 20px;
} }
.abnormal-card { .abnormal-card {
padding: 20px; border: 1px solid #d9e1ed;
border: 1px solid #e2e8f0;
border-radius: 6px;
background: #fff; background: #fff;
overflow: hidden;
} }
.abnormal-card__header { .abnormal-card__header {
margin-bottom: 14px; margin-bottom: 0;
padding: 22px 30px;
border-bottom: 1px solid #e3eaf3;
} }
.abnormal-card__title { .abnormal-card__title {
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 700;
color: #0f172a; color: #0f172a;
} }
.abnormal-card__content { .abnormal-card__content {
display: grid; display: grid;
gap: 16px; gap: 0;
background: #ffffff;
} }
.abnormal-card__subtitle { .abnormal-card__subtitle {
@@ -275,15 +277,15 @@ export default {
} }
.abnormal-table { .abnormal-table {
border: 1px solid #e2e8f0; border-radius: 0;
border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
.abnormal-pagination { .abnormal-pagination {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 16px; padding: 18px 24px 20px;
border-top: 1px solid #e8eef6;
} }
.multi-line-cell { .multi-line-cell {
@@ -305,7 +307,7 @@ export default {
.tag-list { .tag-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 10px;
} }
.object-card-grid { .object-card-grid {
@@ -316,9 +318,8 @@ export default {
.object-card { .object-card {
padding: 16px; padding: 16px;
border: 1px solid #e2e8f0; border: 1px solid #d9e1ed;
border-radius: 6px; background: #ffffff;
background: #f8fafc;
} }
.object-card__header { .object-card__header {
@@ -367,8 +368,8 @@ export default {
margin-top: 12px; margin-top: 12px;
padding: 12px; padding: 12px;
border: 1px solid #dbeafe; border: 1px solid #dbeafe;
border-radius: 6px; border-left: 3px solid #245b8f;
background: #eff6ff; background: #f4f8fd;
} }
.object-card__snapshot-label { .object-card__snapshot-label {
@@ -396,4 +397,36 @@ export default {
color: #1e293b; color: #1e293b;
text-align: right; 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> </style>

122
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
View File

@@ -217,21 +217,22 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: calc(96vh - 64px); min-height: calc(96vh - 64px);
background: #f5f7fb; border: 1px solid #dde3ec;
background: #ffffff;
overflow: hidden; overflow: hidden;
} }
.project-analysis-header { .project-analysis-header {
padding: 20px 28px 18px; padding: 38px 54px 34px;
border-bottom: 1px solid #dbe4ef; border-bottom: 1px solid #dde3ec;
background: #ffffff; background: #ffffff;
} }
.project-analysis-header__main { .project-analysis-header__main {
display: flex; display: flex;
align-items: flex-start; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 24px;
} }
.project-analysis-header__title-group { .project-analysis-header__title-group {
@@ -239,52 +240,52 @@ export default {
} }
.project-analysis-header__eyebrow { .project-analysis-header__eyebrow {
font-size: 12px; color: #65758d;
font-weight: 600; font-size: 17px;
letter-spacing: 0; font-weight: 700;
color: #64748b; line-height: 1;
} }
.project-analysis-header__title { .project-analysis-header__title {
margin-top: 8px; margin-top: 24px;
font-size: 24px; color: #101a2b;
font-weight: 600; font-size: 34px;
line-height: 1.2; font-weight: 700;
color: #0f172a; line-height: 1;
} }
.project-analysis-header__meta { .project-analysis-header__meta {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
min-height: 32px; min-height: 34px;
padding: 0 12px; padding: 0 12px;
border: 1px solid #bfd0e2; border: 1px solid #bfd0e2;
border-radius: 6px; border-radius: 2px;
background: #eef4f9; background: #eef4f9;
} }
.project-analysis-header__meta-label { .project-analysis-header__meta-label {
font-size: 12px;
font-weight: 600;
color: #637187; color: #637187;
font-size: 13px;
font-weight: 600;
} }
.project-analysis-header__meta-value { .project-analysis-header__meta-value {
color: #245b8f;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: #245b8f;
} }
.project-analysis-workspace { .project-analysis-workspace {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 20px; gap: 56px;
min-height: 700px; min-height: 720px;
max-height: calc(96vh - 164px); max-height: calc(96vh - 168px);
padding: 24px; padding: 28px 54px 42px;
overflow: auto; overflow: auto;
background: #f5f7fb; background: #ffffff;
} }
.project-analysis-layout { .project-analysis-layout {
@@ -294,107 +295,74 @@ export default {
} }
.project-analysis-layout__sidebar { .project-analysis-layout__sidebar {
flex: 0 0 320px; flex: 0 0 38%;
max-width: 520px;
} }
.project-analysis-layout__main { .project-analysis-layout__main {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
border: 1px solid #dbe4ef; border-left: 1px solid #dde3ec;
border-radius: 6px; padding-left: 56px;
background: #ffffff;
overflow: hidden;
} }
.project-analysis-layout__alert { .project-analysis-layout__alert {
margin-bottom: 16px; margin-bottom: 20px;
} }
.project-analysis-tabs { .project-analysis-tabs {
margin-top: 0; margin-top: -2px;
}
@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>
<style lang="scss"> <style lang="scss">
.project-analysis-dialog { .project-analysis-dialog {
margin-top: 2vh !important; margin-top: 2vh !important;
border-radius: 8px; border-radius: 0;
background: #f5f7fb; background: #f5f6f8;
overflow: hidden; overflow: hidden;
.el-dialog__header { .el-dialog__header {
padding: 18px 24px; display: none;
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 { .el-dialog__body {
padding: 0; padding: 0;
background: #f5f7fb; background: #f5f6f8;
} }
} }
.project-analysis-tabs { .project-analysis-tabs {
.el-tabs__header { .el-tabs__header {
margin: 0; margin: 0;
padding: 0 20px;
border-bottom: 1px solid #dbe4ef;
background: #ffffff;
} }
.el-tabs__nav-wrap::after { .el-tabs__nav-wrap::after {
display: none; height: 1px;
background: #dde3ec;
} }
.el-tabs__item { .el-tabs__item {
height: 46px; height: 58px;
padding: 0 22px !important; padding: 0 32px !important;
color: #2a374a; color: #2a374a;
font-size: 14px; font-size: 18px;
font-weight: 500; font-weight: 500;
line-height: 46px; line-height: 58px;
} }
.el-tabs__item.is-active { .el-tabs__item.is-active {
color: #245b8f; color: #245b8f;
font-weight: 600; font-weight: 700;
} }
.el-tabs__active-bar { .el-tabs__active-bar {
height: 2px; height: 4px;
background: #245b8f; background: #245b8f;
} }
.el-tabs__content { .el-tabs__content {
padding: 20px; padding-top: 28px;
background: #ffffff;
} }
} }
</style> </style>

207
ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
View File

@@ -1,51 +1,53 @@
<template> <template>
<aside class="project-analysis-sidebar"> <aside class="project-analysis-sidebar">
<section class="sidebar-profile"> <div class="sidebar-profile-card">
<div class="sidebar-profile__name-row"> <section class="sidebar-profile">
<div> <div class="sidebar-profile__identity">
<div class="sidebar-section__eyebrow">人物档案</div> <div class="sidebar-profile__identity-label">人物档案</div>
<div class="sidebar-profile__name">{{ sidebarData.basicInfo.name || "-" }}</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>
<div class="sidebar-risk-badge">{{ sidebarData.basicInfo.riskLevel || "-" }}</div>
</div>
<div class="sidebar-profile__meta"> <div class="sidebar-profile__meta">
<div class="sidebar-profile__item"> <div class="sidebar-profile__item">
<span class="sidebar-profile__label">工号</span> <span class="sidebar-profile__label">工号</span>
<span class="sidebar-profile__value">{{ sidebarData.basicInfo.staffCode || "-" }}</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>
<div class="sidebar-profile__item"> </section>
<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 class="sidebar-summary"> <section class="sidebar-summary">
<div class="sidebar-section__eyebrow">命中模型摘要</div> <div class="sidebar-summary__title">命中模型摘要</div>
<div class="sidebar-summary__count"> <div class="sidebar-summary__count">
<span class="sidebar-summary__count-label">命中模型数</span> <span class="sidebar-summary__count-label">命中模型数</span>
<span class="sidebar-summary__count-value">{{ sidebarData.modelSummary.modelCount || "-" }}</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> </div>
<span v-else class="sidebar-profile__value">暂无异常标签</span> <div class="sidebar-summary__tags">
</div> <span class="sidebar-profile__label">核心异常标签</span>
</section> <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> </aside>
</template> </template>
@@ -81,97 +83,126 @@ export default {
.project-analysis-sidebar { .project-analysis-sidebar {
width: 100%; width: 100%;
align-self: flex-start; align-self: flex-start;
border: 1px solid #dbe4ef;
border-radius: 6px;
background: #ffffff;
overflow: hidden;
} }
.sidebar-profile, .sidebar-profile-card {
.sidebar-summary { border: 1px solid #dde3ec;
padding: 22px 24px; border-radius: 3px;
background: #ffffff; background: #ffffff;
} }
.sidebar-profile { .sidebar-profile {
padding: 34px 42px 28px;
border-bottom: 1px solid #edf1f5; border-bottom: 1px solid #edf1f5;
} }
.sidebar-summary { .sidebar-summary {
margin-top: 0; padding: 30px 42px 34px;
background: #fbfcfe; border-top: 1px solid #dde3ec;
background: #fcfdfe;
} }
.sidebar-section__eyebrow { .sidebar-profile__identity-label {
font-size: 12px; color: #637187;
font-weight: 600; font-size: 16px;
letter-spacing: 0; font-weight: 700;
color: #64748b; margin-bottom: 28px;
} }
.sidebar-profile__name-row { .sidebar-profile__name-row {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 12px; justify-content: space-between;
gap: 20px;
} }
.sidebar-profile__name { .sidebar-profile__name {
margin-top: 8px; color: #111827;
font-size: 24px; font-size: 34px;
font-weight: 600; font-weight: 700;
line-height: 1.2; line-height: 1.2;
color: #0f172a;
} }
.sidebar-risk-badge { .sidebar-risk-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-height: 26px; justify-content: center;
padding: 0 10px; min-width: 102px;
border: 1px solid #edcaca; height: 44px;
border-radius: 6px; padding: 0 16px;
background: #fbefef; border: 1px solid #f0c6c1;
font-size: 12px; border-radius: 2px;
background: #fff3f2;
color: #c43d33;
font-size: 17px;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 42px;
color: #ad2f2f; text-align: center;
} }
.sidebar-profile__meta { .sidebar-profile__meta {
display: grid; display: grid;
gap: 14px; gap: 0;
margin-top: 20px; margin-top: 30px;
} }
.sidebar-profile__item { .sidebar-profile__item {
display: grid; 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-profile__label,
.sidebar-summary__count-label { .sidebar-summary__count-label {
font-size: 12px; color: #637187;
color: #64748b; font-size: 16px;
} }
.sidebar-profile__value, .sidebar-profile__value,
.sidebar-summary__count-value { .sidebar-summary__count-value {
font-size: 13px; color: #172033;
line-height: 1.6; font-size: 17px;
color: #0f172a; font-weight: 500;
line-height: 1.4;
word-break: break-all; word-break: break-all;
} }
.sidebar-summary__title {
margin: 0 0 24px;
color: #223047;
font-size: 18px;
font-weight: 700;
}
.sidebar-summary__count { .sidebar-summary__count {
display: grid; display: flex;
gap: 6px; align-items: baseline;
margin-top: 16px; gap: 16px;
margin-top: 0;
margin-bottom: 28px;
} }
.sidebar-summary__tags { .sidebar-summary__tags {
display: grid; display: grid;
gap: 10px; gap: 16px;
margin-top: 18px; 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 { .sidebar-tag-list {
@@ -182,14 +213,14 @@ export default {
} }
.sidebar-tag-list ::v-deep(.el-tag) { .sidebar-tag-list ::v-deep(.el-tag) {
height: 26px; height: 38px;
padding: 0 9px; padding: 0 16px;
border: 1px solid #bfd0e2; border: 1px solid #cad8eb;
border-radius: 6px; border-radius: 2px;
background: #ffffff; background: #ffffff;
color: #245b8f; color: #245b8f;
font-size: 12px; font-size: 15px;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 36px;
} }
</style> </style>