From 6f2ea5994ade0060814b46a0144a5485fbab2d89 Mon Sep 17 00:00:00 2001
From: wjj <2069666735@qq.com>
Date: Wed, 29 Apr 2026 17:19:45 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=BF=A1=E6=81=AF=E7=BB=B4?=
 =?UTF-8?q?=E6=8A=A4=E6=AD=A3=E5=BC=8F=E5=8C=96=E5=A4=96=E5=A3=B3=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...nt-formal-shell-frontend-implementation.md |  34 +++
 ...l-shell-rollout-frontend-implementation.md |  65 +++++
 ...og-formal-shell-frontend-implementation.md |  56 ++++
 ...recruitment-formal-shell-implementation.md |  40 +++
 ...tch-formal-shell-rollout-implementation.md |  92 ++++++
 ...6-04-29-formal-style-adjustment-summary.md | 101 +++++++
 ...ysis-dialog-formal-shell-implementation.md |  44 +++
 ruoyi-ui/src/views/ccdiAccountInfo/index.vue  | 104 ++++++-
 ruoyi-ui/src/views/ccdiBaseStaff/index.vue    | 228 +++++++++++----
 ruoyi-ui/src/views/ccdiCreditInfo/index.vue   | 116 +++++++-
 .../ccdiCustEnterpriseRelation/index.vue      | 117 +++++++-
 .../src/views/ccdiCustFmyRelation/index.vue   | 117 +++++++-
 .../ccdiIntermediary/components/DataTable.vue |  42 ++-
 .../components/DetailDialog.vue               |  24 ++
 .../components/EditDialog.vue                 |  27 ++
 .../components/ImportDialog.vue               |  20 +-
 .../components/SearchForm.vue                 |  20 ++
 ruoyi-ui/src/views/ccdiIntermediary/index.vue |  41 +++
 .../detail/ProjectAnalysisDialog.vue          | 119 ++++++--
 .../detail/ProjectAnalysisSidebar.vue         | 204 ++++++++-----
 .../views/ccdiPurchaseTransaction/index.vue   | 118 +++++++-
 .../ccdiStaffEnterpriseRelation/index.vue     | 117 +++++++-
 .../src/views/ccdiStaffFmyRelation/index.vue  | 117 +++++++-
 .../src/views/ccdiStaffRecruitment/index.vue  | 273 ++++++++++++------
 .../src/views/ccdiStaffTransfer/index.vue     | 118 +++++++-
 .../project-analysis-dialog-layout.test.js    |   9 +-
 .../project-analysis-dialog-sidebar.test.js   |  12 +-
 27 files changed, 2037 insertions(+), 338 deletions(-)
 create mode 100644 docs/plans/frontend/2026-04-29-base-staff-and-staff-recruitment-formal-shell-frontend-implementation.md
 create mode 100644 docs/plans/frontend/2026-04-29-batch-formal-shell-rollout-frontend-implementation.md
 create mode 100644 docs/plans/frontend/2026-04-29-results-overview-project-analysis-dialog-formal-shell-frontend-implementation.md
 create mode 100644 docs/reports/implementation/2026-04-29-base-staff-and-staff-recruitment-formal-shell-implementation.md
 create mode 100644 docs/reports/implementation/2026-04-29-batch-formal-shell-rollout-implementation.md
 create mode 100644 docs/reports/implementation/2026-04-29-formal-style-adjustment-summary.md
 create mode 100644 docs/reports/implementation/2026-04-29-results-overview-project-analysis-dialog-formal-shell-implementation.md

diff --git a/docs/plans/frontend/2026-04-29-base-staff-and-staff-recruitment-formal-shell-frontend-implementation.md b/docs/plans/frontend/2026-04-29-base-staff-and-staff-recruitment-formal-shell-frontend-implementation.md
new file mode 100644
index 00000000..1826d4d6
--- /dev/null
+++ b/docs/plans/frontend/2026-04-29-base-staff-and-staff-recruitment-formal-shell-frontend-implementation.md
@@ -0,0 +1,34 @@
+# 员工信息维护与招聘信息管理正式化外壳前端实施计划
+
+## 目标
+
+- 基于当前本地最新代码，为 `ccdiBaseStaff` 与 `ccdiStaffRecruitment` 试套正式化外壳样式。
+- 仅调整查询区、工具条、表格区、分页区与弹窗壳层视觉。
+- 不改字段顺序、不改按钮位置、不改功能块结构。
+
+## 范围
+
+- `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
+- `ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue`
+- `ruoyi-ui/tests/unit/base-staff-formal-shell-layout.test.js`
+- `ruoyi-ui/tests/unit/staff-recruitment-formal-shell-layout.test.js`
+
+## 方案
+
+- 复用现有 `app-container`、`query-form`、`mb8`、弹窗 class，只补最少样式。
+- 给列表区新增最小表格外壳，保证分页和表格归一。
+- 通过边框、浅底、留白和表头背景统一正式化视觉。
+
+## 验证
+
+- `node tests/unit/base-staff-formal-shell-layout.test.js`
+- `node tests/unit/staff-recruitment-formal-shell-layout.test.js`
+- `node tests/unit/employee-asset-maintenance-layout.test.js`
+- `node tests/unit/staff-recruitment-import-toolbar.test.js`
+
+## 完成标准
+
+- 两个页面外壳样式统一
+- 按钮顺序和功能入口保持不变
+- 单测通过
+- 浏览器实测通过
diff --git a/docs/plans/frontend/2026-04-29-batch-formal-shell-rollout-frontend-implementation.md b/docs/plans/frontend/2026-04-29-batch-formal-shell-rollout-frontend-implementation.md
new file mode 100644
index 00000000..80c86a83
--- /dev/null
+++ b/docs/plans/frontend/2026-04-29-batch-formal-shell-rollout-frontend-implementation.md
@@ -0,0 +1,65 @@
+# 2026-04-29 批量正式化外壳样式实施计划
+
+## 目标
+
+- 基于当前本地最新前端代码，批量推进信息维护相关页面的正式化外壳样式。
+- 严格保持“只改样式、不改内容和功能”的边界。
+- 复用已经在详情弹窗、员工信息维护页、招聘信息管理页验证过的正式化样式骨架。
+
+## 范围
+
+- `ruoyi-ui/src/views/ccdiAccountInfo/index.vue`
+- `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
+- `ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue`
+- `ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue`
+- `ruoyi-ui/src/views/ccdiIntermediary/index.vue`
+- `ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue`
+- `ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue`
+- `ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue`
+- `ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue`
+- `ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue`
+- `ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue`
+- `ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue`
+- `ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue`
+- `ruoyi-ui/src/views/ccdiStaffTransfer/index.vue`
+
+## 实施策略
+
+### 1. 查询区统一正式化
+
+- 保留原有查询字段、排布逻辑和按钮位置。
+- 为查询区补统一白色面板、边框、克制圆角和更稳重的标签文字。
+- 收紧表单项底部留白，统一输入框、下拉框、日期控件的边框和圆角。
+
+### 2. 工具条统一正式化
+
+- 保留搜索、重置、新增、导入、失败记录入口及其相对位置。
+- 统一工具条外层白色承载区。
+- 按钮仅调整圆角、边框与视觉重量，不改变语义和行为。
+
+### 3. 表格承载区统一正式化
+
+- 新增或复用 `formal-table-shell` 包裹列表表格与分页区。
+- 收紧表头和行高，提升单屏信息密度。
+- 主体文本尽量左对齐，保留选择列和操作列居中。
+
+### 4. 弹窗与详情区统一正式化
+
+- 统一弹窗圆角、头部下边线、正文浅底。
+- 详情区、导入弹窗、编辑弹窗使用更克制的信息面板样式。
+- 不重排现有字段，不新增删减交互块。
+
+## 验证计划
+
+- 复用现有样式契约单测，确保已完成页面没有回退。
+- 使用浏览器打开真实业务路由进行验证，禁止使用 prototype 页面替代。
+- 核对关键页面是否保持：
+  - 查询区与工具条仍在原位置
+  - 新增、导入、失败记录按钮仍按原顺序出现
+  - 表格列和弹窗内容结构不变
+
+## 风险控制
+
+- 不使用旧 patch 中的结构改法，只借用可复用的正式化视觉参数。
+- 每个页面只处理最外层承载和控件外观，不触碰业务字段、接口、校验、按钮逻辑。
+- 若真实页面路由可访问，则以真实页面结果为准；若不可访问，保留源码级验证说明。
diff --git a/docs/plans/frontend/2026-04-29-results-overview-project-analysis-dialog-formal-shell-frontend-implementation.md b/docs/plans/frontend/2026-04-29-results-overview-project-analysis-dialog-formal-shell-frontend-implementation.md
new file mode 100644
index 00000000..d2e4e281
--- /dev/null
+++ b/docs/plans/frontend/2026-04-29-results-overview-project-analysis-dialog-formal-shell-frontend-implementation.md
@@ -0,0 +1,56 @@
+# 结果总览项目分析详情正式化外壳前端实施计划
+
+## 目标
+
+- 基于 `output/mockups/project-analysis-formal-soft-preview.html` 的静态预览稿，恢复“项目分析详情”弹窗的正式化、去卡片化外壳样式。
+- 本次仅调整详情弹窗整体框架、标题区、左侧人物档案区、右侧主承载区与页签外层视觉。
+- 不修改“异常明细”页签内部业务结构、分页、按钮、接口与数据逻辑。
+
+## 范围
+
+- 修改 `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+- 修改 `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
+- 修改 `ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+- 修改 `ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`
+
+## 实施方案
+
+### 1. 弹窗外壳正式化
+
+- 将当前偏渐变、大圆角的详情弹窗外壳改为更平直的正式化工作台样式。
+- 顶部保留“结果总览 / 项目分析详情”的信息层级，但改成浅边线、弱装饰、明确留白的标题区。
+- 调整整体布局间距，让左侧档案区和右侧主区以纵向分隔线形成清晰结构。
+
+### 2. 左侧档案区映射静态稿
+
+- 保留当前姓名、风险等级、工号、部门、所属项目、命中模型数、核心异常标签的数据字段。
+- 通过信息头、字段列表、摘要区三段式样式，映射静态稿的人物档案视觉。
+- 不新增额外字段、不新增辅助业务区块。
+
+### 3. 右侧主区外层收口
+
+- 保持 `el-tabs`、错误提示、加载逻辑、默认页签逻辑不变。
+- 只调整页签外层、内容承载区、主区边界与留白，不进入各 tab 内部重做内容样式。
+
+## 验证计划
+
+### 代码校验
+
+- 在 `ruoyi-ui` 目录执行：
+  - `node tests/unit/project-analysis-dialog-layout.test.js`
+  - `node tests/unit/project-analysis-dialog-sidebar.test.js`
+  - `node tests/unit/project-analysis-dialog-empty-field.test.js`
+
+### 浏览器验证
+
+- 先通过 `nvm use` 确认前端 Node 版本。
+- 启动真实前端页面后，使用 `browser-use` 在系统真实页面打开“项目分析详情”弹窗。
+- 重点核对：
+  - 标题区是否为正式化平直样式
+  - 左侧档案区是否按预览稿形成清晰三段层次
+  - 右侧主区是否只改外层、不影响“异常明细”内部内容与交互
+
+## 风险控制
+
+- 不改接口、不改 mock 数据、不改异常明细内部组件，避免把外壳样式改动扩大成业务结构调整。
+- 单测只更新与外层视觉契约直接相关的断言，避免引入无关回归。
diff --git a/docs/reports/implementation/2026-04-29-base-staff-and-staff-recruitment-formal-shell-implementation.md b/docs/reports/implementation/2026-04-29-base-staff-and-staff-recruitment-formal-shell-implementation.md
new file mode 100644
index 00000000..f78324aa
--- /dev/null
+++ b/docs/reports/implementation/2026-04-29-base-staff-and-staff-recruitment-formal-shell-implementation.md
@@ -0,0 +1,40 @@
+# 员工信息维护与招聘信息管理正式化外壳实施记录
+
+## 变更日期
+
+- 2026-04-29
+
+## 变更范围
+
+- 前端：`ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
+- 前端：`ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue`
+- 单测：`ruoyi-ui/tests/unit/base-staff-formal-shell-layout.test.js`
+- 单测：`ruoyi-ui/tests/unit/staff-recruitment-formal-shell-layout.test.js`
+
+## 实施内容
+
+### 1. 页面外壳调整
+
+- 复用 `app-container`、`query-form`、`mb8` 等现有结构，只补最少样式。
+- 为 `ccdiBaseStaff` 与 `ccdiStaffRecruitment` 的查询区增加正式化外壳视觉，包括浅底、边框、留白和输入框边线统一。
+- 保持搜索、重置、新增、导入、失败记录等按钮原有顺序不变。
+- 为两个页面新增 `formal-table-shell`，将表格和分页收口到同一视觉区域内。
+
+### 2. 弹窗外壳调整
+
+- 复用员工页已有 `employee-edit-dialog`、`employee-detail-dialog` class，只调整弹窗圆角、标题分隔线和弹窗正文背景。
+- 复用招聘页现有弹窗结构，只补统一的弹窗标题区和正文背景样式。
+- 未改动员工资产、历史工作经历等内部功能块结构。
+
+### 3. 验证情况
+
+- 单测通过：
+  - `node tests/unit/base-staff-formal-shell-layout.test.js`
+  - `node tests/unit/staff-recruitment-formal-shell-layout.test.js`
+  - `node tests/unit/staff-recruitment-import-toolbar.test.js`
+- 现有单测异常：
+  - `node tests/unit/employee-asset-maintenance-layout.test.js`
+  - 失败原因为当前仓库源码不满足既有字符串断言 `createEmptyAssetRow(defaultPersonId = "")`，与本次外壳样式改动无关。
+- 浏览器验证：
+  - 已使用 `browser-use` 打开 `http://localhost/prototype/staff-recruitment`，确认招聘信息管理页查询区、工具条、表格区已切换为正式化外壳，按钮仍保持原位。
+  - 尝试打开 `http://localhost/ccdiBaseStaff` 时，当前本地前端路由返回 404 页面，因此未能在浏览器内完成员工信息维护页真实页面验证。
diff --git a/docs/reports/implementation/2026-04-29-batch-formal-shell-rollout-implementation.md b/docs/reports/implementation/2026-04-29-batch-formal-shell-rollout-implementation.md
new file mode 100644
index 00000000..c9da5722
--- /dev/null
+++ b/docs/reports/implementation/2026-04-29-batch-formal-shell-rollout-implementation.md
@@ -0,0 +1,92 @@
+# 2026-04-29 批量正式化外壳样式实施记录
+
+## 本次实施内容
+
+本轮基于当前本地最新代码，批量将信息维护相关页面收口为统一的正式化外壳样式，继续保持“只改样式、不改内容和功能”的边界。
+
+### 覆盖页面
+
+- 账户库管理：`ruoyi-ui/src/views/ccdiAccountInfo/index.vue`
+- 征信维护：`ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
+- 信贷客户实体关联：`ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue`
+- 信贷客户家庭关系：`ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue`
+- 中介库管理：
+  - `ruoyi-ui/src/views/ccdiIntermediary/index.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue`
+- 招投标信息维护：`ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue`
+- 员工亲属实体关联：`ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue`
+- 员工亲属关系维护：`ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue`
+- 员工调动记录：`ruoyi-ui/src/views/ccdiStaffTransfer/index.vue`
+
+## 具体调整
+
+### 查询区
+
+- 将筛选区统一收进白色边框面板。
+- 统一标签颜色、控件边框、控件圆角和表单项间距。
+- 保留全部原始筛选条件和原始布局顺序。
+
+### 工具条
+
+- 为工具条增加统一白色承载面板。
+- 按钮圆角统一收敛到约 4px。
+- 不调整搜索、重置、新增、导入、失败记录等按钮的位置和语义。
+
+### 表格
+
+- 为列表页统一增加 `formal-table-shell` 外层承载。
+- 收紧表头和表体留白，提升单屏显示密度。
+- 统一普通列左对齐，操作列和选择列保持居中。
+
+### 弹窗
+
+- 编辑、详情、导入弹窗统一使用更正式的边界和浅底信息面板风格。
+- 去掉原有偏演示感的悬浮和装饰感。
+- 不改变弹窗中的字段组织和业务交互。
+
+## 修正项
+
+- 批量调整过程中，`ccdiPurchaseTransaction/index.vue` 样式块曾出现一个多余的 `}`，导致前端编译报错。
+- 已在本轮内修正，重新通过真实页面检查。
+- 批量将 `.mb8` 统一为 `flex` 承载后，`right-toolbar` 的“显示/隐藏 / 刷新”按钮组一度被挤到左侧。
+- 已通过为各列表页补充 `.mb8 ::v-deep .top-right-btn { margin-left: auto; }` 恢复原有靠右位置。
+
+## 验证结果
+
+### 单测
+
+- `node ruoyi-ui/tests/unit/base-staff-formal-shell-layout.test.js` 通过
+- `node ruoyi-ui/tests/unit/staff-recruitment-formal-shell-layout.test.js` 通过
+- `node ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js` 通过
+- `node ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js` 通过
+
+### 真实页面浏览器验证
+
+已通过真实业务路由验证以下页面可以打开且关键外壳区域仍保持原有功能结构：
+
+- `http://localhost/maintain/accountInfo`
+- `http://localhost/maintain/creditInfo`
+- `http://localhost/maintain/intermediary`
+- `http://localhost/maintain/purchaseTransaction`
+- `http://localhost/maintain/staffTransfer`
+- `http://localhost/maintain/staffEnterpriseRelation`
+- `http://localhost/maintain/staffFmyRelation`
+- `http://localhost/maintain/custEnterpriseRelation`
+- `http://localhost/maintain/custFmyRelation`
+- `http://localhost/maintain/staffRecruitment`
+
+验证点：
+
+- 页面标题、搜索按钮、新增按钮、导入按钮仍可见
+- 查询区与工具条仍位于原位置
+- 未发生按钮左右换位
+- 表格区与分页区仍按原内容结构展示
+
+## 现有环境问题
+
+- `staffRecruitment` 页面当前仍存在后端返回的字符集排序规则冲突报错：`utf8mb4_0900_ai_ci` 与 `utf8mb4_general_ci` 混用。
+- 该问题来自现有后端/数据库环境，不是本次样式改动引入的问题。
diff --git a/docs/reports/implementation/2026-04-29-formal-style-adjustment-summary.md b/docs/reports/implementation/2026-04-29-formal-style-adjustment-summary.md
new file mode 100644
index 00000000..9843e488
--- /dev/null
+++ b/docs/reports/implementation/2026-04-29-formal-style-adjustment-summary.md
@@ -0,0 +1,101 @@
+# 2026-04-29 正式化样式调整总说明
+
+## 目标边界
+
+- 本轮所有改动都基于当前本地最新代码进行。
+- 仅调整页面与弹窗外壳样式，不改变原有内容、字段、按钮语义、交互流程和功能逻辑。
+- 不参考 `2026-04-29-dev-ui-style-mixed-stash.patch` 中的结构性和功能性变动。
+
+## 本轮纳入的页面
+
+### 1. 项目分析详情弹窗
+
+- 文件：
+  - `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+  - `ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
+- 调整方向：
+  - 详情页外壳正式化、去卡片化
+  - 标题区更平直，人物档案区更规整
+  - 页签和主区承载更克制
+- 不变内容：
+  - 异常明细、资产分析、征信摘要等业务内容结构不变
+  - 数据请求、分页、按钮逻辑不变
+
+### 2. 员工信息维护页
+
+- 文件：
+  - `ruoyi-ui/src/views/ccdiBaseStaff/index.vue`
+- 调整方向：
+  - 筛选区收进统一白色区域
+  - 工具条按钮外观更正式，圆角收小
+  - 表格与分页统一收进正式信息面板
+  - 表格更紧凑、阅读更集中
+  - 编辑/详情弹窗外壳更像正式信息面板
+- 不变内容：
+  - 查询字段、按钮顺序、导入入口、资产信息与党员信息功能不变
+
+### 3. 招聘信息管理页
+
+- 文件：
+  - `ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue`
+- 调整方向：
+  - 筛选区、工具条、表格区统一正式化
+  - 按钮、输入框、下拉框视觉更稳重
+  - 表格行高与表头高度适当收紧
+  - 弹窗外壳更克制
+- 不变内容：
+  - 招聘类型、历史工作经历、导入入口、按钮位置和业务流程不变
+
+### 4. 批量推进的信息维护页面
+
+- 文件：
+  - `ruoyi-ui/src/views/ccdiAccountInfo/index.vue`
+  - `ruoyi-ui/src/views/ccdiCreditInfo/index.vue`
+  - `ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue`
+  - `ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/index.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue`
+  - `ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue`
+  - `ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue`
+  - `ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue`
+  - `ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue`
+  - `ruoyi-ui/src/views/ccdiStaffTransfer/index.vue`
+- 调整方向：
+  - 查询区、工具条、列表区统一成正式化白色信息面板
+  - 输入框、下拉框、日期控件边框与圆角统一收敛
+  - 表格与分页通过 `formal-table-shell` 统一承载
+  - 中介库的搜索、列表、详情、编辑、导入弹窗统一到相同视觉语言
+  - 各列表维护页的弹窗边界与留白更克制
+- 不变内容：
+  - 按钮顺序、字段结构、导入流程、失败记录入口、详情内容和业务逻辑不变
+
+## 统一视觉原则
+
+- 筛选区更规整：统一白色面板承载，结构清晰
+- 按钮更正式：圆角约 4px，弱化轻飘感
+- 表单控件更稳重：圆角更小，边框更统一
+- 表格更紧凑：降低表头和行内容留白，一屏展示更多信息
+- 列表阅读性更好：尽量左对齐，减少长字段换行和大片空白
+- 视觉装饰收敛：移除不必要的阴影、渐变、悬浮感
+- 卡片感减弱：边界、留白、圆角更克制，保留原有内容结构
+
+## 验证说明
+
+- 项目分析详情弹窗已完成真实页面验证
+- 员工信息维护页已完成源码与单测级校验
+- 招聘信息管理页和批量推进页面已通过真实业务路由验证：
+  - `http://localhost/maintain/staffRecruitment`
+  - `http://localhost/maintain/accountInfo`
+  - `http://localhost/maintain/creditInfo`
+  - `http://localhost/maintain/intermediary`
+  - `http://localhost/maintain/purchaseTransaction`
+  - `http://localhost/maintain/staffTransfer`
+  - `http://localhost/maintain/staffEnterpriseRelation`
+  - `http://localhost/maintain/staffFmyRelation`
+  - `http://localhost/maintain/custEnterpriseRelation`
+  - `http://localhost/maintain/custFmyRelation`
+- 浏览器验证过程中发现并修复了 `ccdiPurchaseTransaction/index.vue` 的样式编译错误
+- `staffRecruitment` 页面仍存在现有数据库字符集排序规则冲突报错，该问题不属于本轮样式改动
diff --git a/docs/reports/implementation/2026-04-29-results-overview-project-analysis-dialog-formal-shell-implementation.md b/docs/reports/implementation/2026-04-29-results-overview-project-analysis-dialog-formal-shell-implementation.md
new file mode 100644
index 00000000..953b08ab
--- /dev/null
+++ b/docs/reports/implementation/2026-04-29-results-overview-project-analysis-dialog-formal-shell-implementation.md
@@ -0,0 +1,44 @@
+# 结果总览项目分析详情正式化外壳实施记录
+
+## 变更日期
+
+- 2026-04-29
+
+## 变更范围
+
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue`
+- 前端：`ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue`
+- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js`
+- 单测：`ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js`
+
+## 实施内容
+
+### 1. 弹窗外壳样式正式化
+
+- 调整 `ProjectAnalysisDialog.vue` 的外层壳样式，去掉旧版渐变大圆角卡片视觉。
+- 将弹窗主体改为浅灰外层背景 + 白色内容工作台，强化边线、留白和分栏结构。
+- 将标题区改成“结果总览 / 项目分析详情”的正式化层级，保留当前命中模型提示，但收口为弱装饰信息块。
+- 调整右侧主区与左侧档案区之间的分隔线和间距，只改外壳，不进入各 tab 内部内容结构。
+
+### 2. 左侧人物档案区样式映射
+
+- 调整 `ProjectAnalysisSidebar.vue`，按“人物档案 + 命中模型摘要”两段式结构重排视觉。
+- 姓名、风险等级、工号、部门、所属项目继续沿用现有数据字段，不新增业务字段。
+- 将风险等级改为细边框状态标识，字段列表改为规整的标签/值双列展示。
+- 核心异常标签保留为现有标签数据，仅更新标签外观，不改渲染逻辑。
+
+### 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-empty-field.test.js`
+- 浏览器实测：
+  - 使用 `browser-use` 打开本地真实系统 `http://localhost/`
+  - 进入项目详情页 `http://localhost/ccdiProject/detail/90337?tab=overview`
+  - 在“结果总览”页点击“查看详情”，确认“项目分析详情”弹窗已应用正式化外壳样式
+  - 确认左侧人物档案区样式已按预览稿方向收口，右侧“异常明细”内部业务内容未被重做
+- 环境记录：
+  - `ruoyi-ui/.nvmrc` 期望版本为 `14.21.3`
+  - 当前终端执行 `nvm use` 失败，原因是 `nvm` 未安装到 PowerShell PATH
+  - 本次前端校验在当前可用 Node `v22.22.0` 下完成，相关单测通过
diff --git a/ruoyi-ui/src/views/ccdiAccountInfo/index.vue b/ruoyi-ui/src/views/ccdiAccountInfo/index.vue
index 6872cd24..c66843d0 100644
--- a/ruoyi-ui/src/views/ccdiAccountInfo/index.vue
+++ b/ruoyi-ui/src/views/ccdiAccountInfo/index.vue
@@ -113,7 +113,8 @@
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
       </el-row>
 
-      <el-table v-loading="loading" :data="rows" stripe border class="account-table">
+      <div class="formal-table-shell">
+        <el-table v-loading="loading" :data="rows" stripe border class="account-table">
         <el-table-column label="员工姓名" prop="staffName" min-width="120">
           <template slot-scope="scope">{{ scope.row.staffName || '-' }}</template>
         </el-table-column>
@@ -193,9 +194,10 @@
             >删除</el-button>
           </template>
         </el-table-column>
-      </el-table>
+        </el-table>
 
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </div>
     </div>
 
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1160px" append-to-body>
@@ -872,19 +874,89 @@ export default {
 
 .account-page {
   min-height: calc(100vh - 84px);
-  background: #f5f7fa;
+  padding: 24px;
+  background: #f5f6f8;
 }
 
 .board {
-  padding: 20px;
-  border-radius: 8px;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  border: 0;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
   background: #fff;
-  border: 1px solid #ebeef5;
+}
+
+.query-form ::v-deep .el-form-item {
+  margin-bottom: 16px;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
 }
 
 .account-table ::v-deep .el-table__header th {
-  background: #f8f8f9;
-  color: #515a6e;
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.account-table ::v-deep .el-table td,
+.account-table ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.account-table ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.account-table ::v-deep .el-table th > .cell,
+.account-table ::v-deep .el-table td > .cell {
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .form-section {
@@ -913,4 +985,18 @@ export default {
   font-weight: 700;
 }
 
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
+
 </style>
diff --git a/ruoyi-ui/src/views/ccdiBaseStaff/index.vue b/ruoyi-ui/src/views/ccdiBaseStaff/index.vue
index 50210638..6f6da26a 100644
--- a/ruoyi-ui/src/views/ccdiBaseStaff/index.vue
+++ b/ruoyi-ui/src/views/ccdiBaseStaff/index.vue
@@ -112,64 +112,66 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="baseStaffList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
-      <el-table-column label="柜员号" align="center" prop="staffId" :show-overflow-tooltip="true"/>
-      <el-table-column label="身份证号" align="center" prop="idCard" :show-overflow-tooltip="true"/>
-      <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
-      <el-table-column label="电话" align="center" prop="phone" width="120"/>
-      <el-table-column label="年收入" align="center" prop="annualIncome" width="140"/>
-      <el-table-column label="是否党员" align="center" prop="partyMember" width="100">
-        <template slot-scope="scope">
-          <span>{{ formatPartyMember(scope.row.partyMember) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="状态" align="center" prop="status" width="100">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.status === '0'" type="success">在职</el-tag>
-          <el-tag v-else type="danger">离职</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleDetail(scope.row)"
-            v-hasPermi="['ccdi:employee:query']"
-          >详情</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ccdi:employee:edit']"
-          >编辑</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['ccdi:employee:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="baseStaffList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true"/>
+        <el-table-column label="柜员号" align="center" prop="staffId" :show-overflow-tooltip="true"/>
+        <el-table-column label="身份证号" align="center" prop="idCard" :show-overflow-tooltip="true"/>
+        <el-table-column label="所属部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
+        <el-table-column label="电话" align="center" prop="phone" width="120"/>
+        <el-table-column label="年收入" align="center" prop="annualIncome" width="140"/>
+        <el-table-column label="是否党员" align="center" prop="partyMember" width="100">
+          <template slot-scope="scope">
+            <span>{{ formatPartyMember(scope.row.partyMember) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" prop="status" width="100">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === '0'" type="success">在职</el-tag>
+            <el-tag v-else type="danger">离职</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+              v-hasPermi="['ccdi:employee:query']"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['ccdi:employee:edit']"
+            >编辑</el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['ccdi:employee:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body class="employee-edit-dialog">
@@ -1472,6 +1474,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -1483,6 +1491,84 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner,
+.query-form ::v-deep .vue-treeselect__control {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-form .el-form-item {
@@ -1495,8 +1581,9 @@ export default {
 }
 
 .employee-detail-dialog .info-section {
-  background: #f9fafb;
-  border-radius: 8px;
+  background: #ffffff;
+  border: 1px solid #dde3ec;
+  border-radius: 4px;
   padding: 16px;
   margin-bottom: 16px;
 }
@@ -1509,7 +1596,7 @@ export default {
   color: #303133;
   margin-bottom: 12px;
   padding-bottom: 10px;
-  border-bottom: 1px solid #e4e7ed;
+  border-bottom: 1px solid #edf1f5;
 }
 
 .employee-detail-dialog .section-title i {
@@ -1567,9 +1654,9 @@ export default {
   align-items: center;
   margin-bottom: 16px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #e4e7ed;
+  border-bottom: 1px solid #edf1f5;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   color: #303133;
 }
 
@@ -1650,6 +1737,23 @@ export default {
   font-size: 13px;
   margin-right: 8px;
 }
+
+.employee-edit-dialog ::v-deep .el-dialog,
+.employee-detail-dialog ::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.employee-edit-dialog ::v-deep .el-dialog__header,
+.employee-detail-dialog ::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+.employee-edit-dialog ::v-deep .el-dialog__body,
+.employee-detail-dialog ::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
 
 <!-- 导入结果弹窗已抽离为独立组件 ImportResultDialog -->
diff --git a/ruoyi-ui/src/views/ccdiCreditInfo/index.vue b/ruoyi-ui/src/views/ccdiCreditInfo/index.vue
index 038d364b..4d19a0d2 100644
--- a/ruoyi-ui/src/views/ccdiCreditInfo/index.vue
+++ b/ruoyi-ui/src/views/ccdiCreditInfo/index.vue
@@ -40,7 +40,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
 
-    <el-table :data="creditInfoList" v-loading="loading">
+    <div class="formal-table-shell">
+      <el-table :data="creditInfoList" v-loading="loading">
       <el-table-column label="姓名" prop="name" align="center" />
       <el-table-column label="身份证号" prop="idCard" align="center" />
       <el-table-column label="最近征信查询日期" align="center" width="160">
@@ -59,15 +60,16 @@
           <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <el-dialog title="批量上传征信HTML" :visible.sync="uploadDialogVisible" width="720px" append-to-body>
       <el-upload
@@ -335,6 +337,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -346,6 +354,82 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .upload-result {
@@ -385,4 +469,18 @@ export default {
   font-weight: 600;
   color: #303133;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue b/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue
index b4e4a378..cd88da08 100644
--- a/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue
+++ b/ruoyi-ui/src/views/ccdiCustEnterpriseRelation/index.vue
@@ -90,7 +90,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="身份证号" align="center" prop="personId" width="180" :show-overflow-tooltip="true"/>
       <el-table-column label="企业名称" align="center" prop="enterpriseName" :show-overflow-tooltip="true"/>
@@ -135,15 +136,16 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -841,6 +843,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -852,6 +860,83 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-container {
@@ -861,4 +946,18 @@ export default {
 .el-divider {
   margin: 16px 0;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue b/ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue
index 474c3614..fc893124 100644
--- a/ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue
+++ b/ruoyi-ui/src/views/ccdiCustFmyRelation/index.vue
@@ -91,7 +91,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="信贷客户身份证号" align="center" prop="personId" width="180"/>
       <el-table-column label="关系类型" align="center" prop="relationType" width="100">
@@ -143,15 +144,16 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -1097,6 +1099,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -1108,9 +1116,100 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-container {
   padding: 0 20px;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue b/ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue
index 360760b5..3ab635fe 100644
--- a/ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue
+++ b/ruoyi-ui/src/views/ccdiIntermediary/components/DataTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="formal-table-shell">
     <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="名称" align="center" prop="name" :show-overflow-tooltip="true" />
@@ -74,3 +74,43 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
+}
+</style>
diff --git a/ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue b/ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue
index 967e04ea..125414d3 100644
--- a/ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue
+++ b/ruoyi-ui/src/views/ccdiIntermediary/components/DetailDialog.vue
@@ -113,6 +113,30 @@ export default {
   justify-content: space-between;
   align-items: center;
   margin: 18px 0 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #edf1f5;
   font-weight: 600;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
+
+::v-deep .el-descriptions {
+  background: #ffffff;
+}
+
+::v-deep .el-table th {
+  background: #f6f8fb;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue b/ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue
index a5f34ab6..034be127 100644
--- a/ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue
+++ b/ruoyi-ui/src/views/ccdiIntermediary/components/EditDialog.vue
@@ -207,3 +207,30 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 16px;
+}
+
+::v-deep .el-input__inner,
+::v-deep .el-select .el-input__inner,
+::v-deep .el-textarea__inner {
+  border-radius: 3px;
+  border-color: #dde3ec;
+}
+</style>
diff --git a/ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue b/ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue
index b1715653..44344d01 100644
--- a/ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue
+++ b/ruoyi-ui/src/views/ccdiIntermediary/components/ImportDialog.vue
@@ -332,8 +332,9 @@ export default {
 
 .scene-tips {
   padding: 12px 14px;
-  background: #f5f7fa;
-  border-radius: 4px;
+  background: #f8fafc;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
   color: #606266;
   line-height: 1.7;
 
@@ -349,6 +350,7 @@ export default {
   .el-button {
     min-width: 110px;
     margin: 0 8px;
+    border-radius: 4px;
   }
 }
 
@@ -386,4 +388,18 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+::v-deep .import-dialog-wrapper {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .import-dialog-wrapper .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .import-dialog-wrapper .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue b/ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
index 21d97b15..9cc2217a 100644
--- a/ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
+++ b/ruoyi-ui/src/views/ccdiIntermediary/components/SearchForm.vue
@@ -80,5 +80,25 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
 }
 </style>
diff --git a/ruoyi-ui/src/views/ccdiIntermediary/index.vue b/ruoyi-ui/src/views/ccdiIntermediary/index.vue
index e1a029bd..b6f1c46f 100644
--- a/ruoyi-ui/src/views/ccdiIntermediary/index.vue
+++ b/ruoyi-ui/src/views/ccdiIntermediary/index.vue
@@ -788,3 +788,44 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
+</style>
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
index 5f7cedc3..ce0c8ee7 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisDialog.vue
@@ -216,23 +216,23 @@ export default {
 .project-analysis-dialog__body {
   display: flex;
   flex-direction: column;
-  border: 1px solid #e2e8f0;
-  border-radius: 24px;
-  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+  min-height: calc(96vh - 64px);
+  border: 1px solid #dde3ec;
+  background: #ffffff;
   overflow: hidden;
 }
 
 .project-analysis-header {
-  padding: 24px 28px 18px;
-  border-bottom: 1px solid #e2e8f0;
-  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 65%);
+  padding: 32px 36px 24px;
+  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 {
@@ -240,49 +240,52 @@ export default {
 }
 
 .project-analysis-header__eyebrow {
-  font-size: 12px;
+  color: #65758d;
+  font-size: 16px;
   font-weight: 600;
-  letter-spacing: 0.08em;
-  color: #64748b;
+  line-height: 1;
 }
 
 .project-analysis-header__title {
-  margin-top: 8px;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 1.2;
-  color: #0f172a;
+  margin-top: 18px;
+  color: #101a2b;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 1;
 }
 
 .project-analysis-header__meta {
   display: inline-flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 14px;
-  border: 1px solid #fde68a;
-  border-radius: 999px;
-  background: #fffbeb;
+  gap: 10px;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid #bfd0e2;
+  border-radius: 2px;
+  background: #eef4f9;
 }
 
 .project-analysis-header__meta-label {
-  font-size: 12px;
-  color: #92400e;
+  color: #637187;
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .project-analysis-header__meta-value {
+  color: #245b8f;
   font-size: 13px;
   font-weight: 600;
-  color: #b45309;
 }
 
 .project-analysis-workspace {
   display: flex;
   align-items: flex-start;
-  gap: 24px;
+  gap: 36px;
   min-height: 700px;
-  max-height: calc(96vh - 170px);
-  padding: 24px 28px 28px;
+  max-height: calc(96vh - 168px);
+  padding: 36px;
   overflow: auto;
+  background: #ffffff;
 }
 
 .project-analysis-layout {
@@ -292,21 +295,73 @@ export default {
 }
 
 .project-analysis-layout__sidebar {
-  flex: 0 0 340px;
+  flex: 0 0 420px;
 }
 
 .project-analysis-layout__main {
   flex: 1;
   min-width: 0;
-  border-left: 1px solid #e2e8f0;
-  padding-left: 24px;
+  border-left: 1px solid #dde3ec;
+  padding-left: 36px;
 }
 
 .project-analysis-layout__alert {
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 .project-analysis-tabs {
-  margin-top: -8px;
+  margin-top: -6px;
+}
+</style>
+
+<style lang="scss">
+.project-analysis-dialog {
+  margin-top: 2vh !important;
+  border-radius: 0;
+  background: #f5f6f8;
+  overflow: hidden;
+
+  .el-dialog__header {
+    display: none;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+    background: #f5f6f8;
+  }
+}
+
+.project-analysis-tabs {
+  .el-tabs__header {
+    margin: 0;
+  }
+
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+    background: #dde3ec;
+  }
+
+  .el-tabs__item {
+    height: 46px;
+    padding: 0 24px !important;
+    color: #2a374a;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 46px;
+  }
+
+  .el-tabs__item.is-active {
+    color: #245b8f;
+    font-weight: 600;
+  }
+
+  .el-tabs__active-bar {
+    height: 3px;
+    background: #245b8f;
+  }
+
+  .el-tabs__content {
+    padding-top: 20px;
+  }
 }
 </style>
diff --git a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
index 2b15851f..aa1cce6e 100644
--- a/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
+++ b/ruoyi-ui/src/views/ccdiProject/components/detail/ProjectAnalysisSidebar.vue
@@ -1,51 +1,52 @@
 <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>
+          <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-profile__meta">
-        <div class="sidebar-profile__item">
-          <span class="sidebar-profile__label">工号</span>
-          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.staffCode || "-" }}</span>
+      <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>
-        <div class="sidebar-profile__item">
-          <span class="sidebar-profile__label">部门</span>
-          <span class="sidebar-profile__value">{{ sidebarData.basicInfo.department || "-" }}</span>
+        <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>
-        <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>
+      </section>
+    </div>
   </aside>
 </template>
 
@@ -83,85 +84,124 @@ export default {
   align-self: flex-start;
 }
 
-.sidebar-profile,
-.sidebar-summary {
-  padding: 20px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
+.sidebar-profile-card {
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.sidebar-profile {
+  padding: 24px 26px 20px;
+  border-bottom: 1px solid #edf1f5;
 }
 
 .sidebar-summary {
-  margin-top: 16px;
+  padding: 22px 26px 26px;
+  border-top: 1px solid #dde3ec;
+  background: #fcfdfe;
 }
 
-.sidebar-section__eyebrow {
-  font-size: 12px;
+.sidebar-profile__identity-label {
+  color: #637187;
+  font-size: 15px;
   font-weight: 600;
-  letter-spacing: 0.08em;
-  color: #64748b;
+  margin-bottom: 16px;
 }
 
 .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: 30px;
+  font-weight: 700;
   line-height: 1.2;
-  color: #0f172a;
 }
 
 .sidebar-risk-badge {
   display: inline-flex;
   align-items: center;
-  padding: 6px 12px;
-  border-radius: 999px;
-  background: #fee2e2;
-  font-size: 12px;
+  justify-content: center;
+  min-width: 64px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #edcaca;
+  border-radius: 2px;
+  background: #fbefef;
+  color: #ad2f2f;
+  font-size: 14px;
   font-weight: 600;
-  color: #b91c1c;
+  line-height: 26px;
+  text-align: center;
 }
 
 .sidebar-profile__meta {
   display: grid;
-  gap: 14px;
-  margin-top: 20px;
+  gap: 0;
+  margin-top: 18px;
 }
 
 .sidebar-profile__item {
   display: grid;
-  gap: 6px;
+  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;
 }
 
 .sidebar-profile__label,
 .sidebar-summary__count-label {
-  font-size: 12px;
-  color: #64748b;
+  color: #637187;
+  font-size: 15px;
 }
 
 .sidebar-profile__value,
 .sidebar-summary__count-value {
-  font-size: 13px;
-  line-height: 1.6;
-  color: #0f172a;
+  color: #172033;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.4;
   word-break: break-all;
 }
 
+.sidebar-summary__title {
+  margin: 0 0 18px;
+  color: #223047;
+  font-size: 16px;
+  font-weight: 700;
+}
+
 .sidebar-summary__count {
-  display: grid;
-  gap: 6px;
-  margin-top: 16px;
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  margin-top: 0;
+  margin-bottom: 22px;
 }
 
 .sidebar-summary__tags {
   display: grid;
   gap: 10px;
-  margin-top: 18px;
+  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;
 }
 
 .sidebar-tag-list {
@@ -170,4 +210,16 @@ export default {
   flex-wrap: wrap;
   gap: 8px;
 }
+
+.sidebar-tag-list ::v-deep(.el-tag) {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #bfd0e2;
+  border-radius: 2px;
+  background: #ffffff;
+  color: #245b8f;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 26px;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue b/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
index 45bc38f4..a964955d 100644
--- a/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
+++ b/ruoyi-ui/src/views/ccdiPurchaseTransaction/index.vue
@@ -92,7 +92,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
     </el-row>
 
-    <el-table v-loading="loading" :data="transactionList" @selection-change="handleSelectionChange">
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="transactionList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="采购事项ID" align="center" prop="purchaseId" width="150" :show-overflow-tooltip="true" />
       <el-table-column label="采购类别" align="center" prop="purchaseCategory" width="110" />
@@ -146,15 +147,16 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="140px">
@@ -1370,6 +1372,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -1381,6 +1389,84 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner,
+.query-form ::v-deep .el-range-editor.el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-container {
@@ -1420,4 +1506,18 @@ export default {
   color: #909399;
   font-size: 12px;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue b/ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue
index 4d242134..f54df9fc 100644
--- a/ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue
+++ b/ruoyi-ui/src/views/ccdiStaffEnterpriseRelation/index.vue
@@ -114,7 +114,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="亲属身份证号" align="center" prop="personId" width="180" :show-overflow-tooltip="true"/>
       <el-table-column label="亲属姓名" align="center" prop="relationName" width="120" :show-overflow-tooltip="true" />
@@ -165,15 +166,16 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
@@ -990,6 +992,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -1001,6 +1009,83 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-container {
@@ -1010,4 +1095,18 @@ export default {
 .el-divider {
   margin: 16px 0;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue b/ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
index 7fb26ef8..b9aea512 100644
--- a/ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
+++ b/ruoyi-ui/src/views/ccdiStaffFmyRelation/index.vue
@@ -105,7 +105,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="员工姓名" align="center" prop="personName" :show-overflow-tooltip="true"/>
       <el-table-column label="员工身份证号" align="center" prop="personId" width="180"/>
@@ -159,15 +160,16 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body class="relation-edit-dialog">
@@ -1565,6 +1567,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -1576,6 +1584,83 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-container {
@@ -1641,4 +1726,18 @@ export default {
 .empty-assets span {
   font-size: 13px;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue b/ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue
index 2f1d0234..41a91f27 100644
--- a/ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue
+++ b/ruoyi-ui/src/views/ccdiStaffRecruitment/index.vue
@@ -132,94 +132,96 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="recruitmentList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="招聘记录编号" align="center" prop="recruitId" width="150" :show-overflow-tooltip="true"/>
-      <el-table-column label="招聘项目名称" align="center" prop="recruitName" min-width="220" :show-overflow-tooltip="true"/>
-      <el-table-column label="职位名称" align="center" prop="posName" :show-overflow-tooltip="true"/>
-      <el-table-column label="候选人姓名" align="center" prop="candName" width="120"/>
-      <el-table-column label="录用情况" align="center" prop="admitStatus" width="100">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.admitStatus === '录用'" type="success" size="small">录用</el-tag>
-          <el-tag v-else-if="scope.row.admitStatus === '未录用'" type="info" size="small">未录用</el-tag>
-          <el-tag v-else type="warning" size="small">放弃</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="学历 / 毕业学校" align="center" min-width="180">
-        <template slot-scope="scope">
-          <span>{{ formatEducationSchool(scope.row) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="招聘类型" align="center" prop="recruitType" width="100">
-        <template slot-scope="scope">
-          <el-tag :type="scope.row.recruitType === 'SOCIAL' ? 'success' : 'info'" size="small">
-            {{ formatRecruitType(scope.row.recruitType) }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="历史工作经历" align="center" prop="workExperienceCount" width="120">
-        <template slot-scope="scope">
-          {{ formatWorkExperienceCount(scope.row) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
-        <template slot-scope="scope">
-          <el-button
-            v-if="isPreviewMode()"
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleDetail(scope.row)"
-          >详情</el-button>
-          <el-button
-            v-else
-            size="mini"
-            type="text"
-            icon="el-icon-view"
-            @click="handleDetail(scope.row)"
-            v-hasPermi="['ccdi:staffRecruitment:query']"
-          >详情</el-button>
-          <el-button
-            v-if="isPreviewMode()"
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-          >编辑</el-button>
-          <el-button
-            v-else
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['ccdi:staffRecruitment:edit']"
-          >编辑</el-button>
-          <el-button
-            v-if="isPreviewMode()"
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-          >删除</el-button>
-          <el-button
-            v-else
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['ccdi:staffRecruitment:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="recruitmentList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="招聘记录编号" align="center" prop="recruitId" width="150" :show-overflow-tooltip="true"/>
+        <el-table-column label="招聘项目名称" align="center" prop="recruitName" min-width="220" :show-overflow-tooltip="true"/>
+        <el-table-column label="职位名称" align="center" prop="posName" :show-overflow-tooltip="true"/>
+        <el-table-column label="候选人姓名" align="center" prop="candName" width="120"/>
+        <el-table-column label="录用情况" align="center" prop="admitStatus" width="100">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.admitStatus === '录用'" type="success" size="small">录用</el-tag>
+            <el-tag v-else-if="scope.row.admitStatus === '未录用'" type="info" size="small">未录用</el-tag>
+            <el-tag v-else type="warning" size="small">放弃</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="学历 / 毕业学校" align="center" min-width="180">
+          <template slot-scope="scope">
+            <span>{{ formatEducationSchool(scope.row) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="招聘类型" align="center" prop="recruitType" width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.recruitType === 'SOCIAL' ? 'success' : 'info'" size="small">
+              {{ formatRecruitType(scope.row.recruitType) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="历史工作经历" align="center" prop="workExperienceCount" width="120">
+          <template slot-scope="scope">
+            {{ formatWorkExperienceCount(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+          <template slot-scope="scope">
+            <el-button
+              v-if="isPreviewMode()"
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+            >详情</el-button>
+            <el-button
+              v-else
+              size="mini"
+              type="text"
+              icon="el-icon-view"
+              @click="handleDetail(scope.row)"
+              v-hasPermi="['ccdi:staffRecruitment:query']"
+            >详情</el-button>
+            <el-button
+              v-if="isPreviewMode()"
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+            >编辑</el-button>
+            <el-button
+              v-else
+              size="mini"
+              type="text"
+              icon="el-icon-edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['ccdi:staffRecruitment:edit']"
+            >编辑</el-button>
+            <el-button
+              v-if="isPreviewMode()"
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+            >删除</el-button>
+            <el-button
+              v-else
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['ccdi:staffRecruitment:remove']"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
@@ -1515,6 +1517,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -1526,6 +1534,83 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
 }
 
 .detail-container {
@@ -1557,4 +1642,18 @@ export default {
 .work-experience-edit-table ::v-deep .el-textarea__inner {
   min-height: 54px !important;
 }
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
+}
 </style>
diff --git a/ruoyi-ui/src/views/ccdiStaffTransfer/index.vue b/ruoyi-ui/src/views/ccdiStaffTransfer/index.vue
index 1dc19fce..65c4867a 100644
--- a/ruoyi-ui/src/views/ccdiStaffTransfer/index.vue
+++ b/ruoyi-ui/src/views/ccdiStaffTransfer/index.vue
@@ -130,7 +130,8 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange">
+    <div class="formal-table-shell">
+      <el-table v-loading="loading" :data="transferList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="员工工号" align="center" prop="staffId" width="120"/>
       <el-table-column label="员工姓名" align="center" prop="staffName" :show-overflow-tooltip="true"/>
@@ -169,15 +170,16 @@
           >删除</el-button>
         </template>
       </el-table-column>
-    </el-table>
+      </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
 
     <!-- 添加或修改对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
@@ -969,6 +971,12 @@ export default {
 </script>
 
 <style scoped>
+.app-container {
+  min-height: calc(100vh - 84px);
+  padding: 24px;
+  background: #f5f6f8;
+}
+
 .query-form ::v-deep .el-row {
   display: flex;
   flex-wrap: wrap;
@@ -980,5 +988,97 @@ export default {
 
 .query-form ::v-deep .el-form-item {
   margin-right: 0;
+  margin-bottom: 16px;
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 18px 20px 2px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.query-form ::v-deep .el-form-item__label {
+  color: #637187;
+  font-weight: 600;
+}
+
+.query-form ::v-deep .el-input__inner,
+.query-form ::v-deep .el-select .el-input__inner,
+.query-form ::v-deep .el-range-editor.el-input__inner {
+  border-color: #dde3ec;
+  border-radius: 3px;
+}
+
+.mb8 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 14px 20px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+}
+
+.mb8 ::v-deep .el-button {
+  border-radius: 4px;
+}
+
+.mb8 ::v-deep .top-right-btn {
+  margin-left: auto;
+}
+
+.formal-table-shell {
+  padding: 4px 0 16px;
+  border: 1px solid #dde3ec;
+  border-radius: 3px;
+  background: #ffffff;
+  overflow: hidden;
+}
+
+.formal-table-shell ::v-deep .el-table th {
+  background: #f6f8fb;
+  color: #607086;
+  padding: 9px 0;
+}
+
+.formal-table-shell ::v-deep .el-table td,
+.formal-table-shell ::v-deep .el-table th.is-leaf {
+  border-bottom-color: #edf1f5;
+}
+
+.formal-table-shell ::v-deep .el-table td {
+  padding: 8px 0;
+}
+
+.formal-table-shell ::v-deep .el-table th > .cell,
+.formal-table-shell ::v-deep .el-table td > .cell {
+  text-align: left;
+  line-height: 1.4;
+}
+
+.formal-table-shell ::v-deep .fixed-width .cell,
+.formal-table-shell ::v-deep .el-table-column--selection .cell {
+  text-align: center;
+}
+
+.formal-table-shell ::v-deep .pagination-container {
+  padding: 16px 20px 0;
+}
+
+::v-deep .el-dialog {
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+::v-deep .el-dialog__header {
+  border-bottom: 1px solid #dde3ec;
+  background: #ffffff;
+}
+
+::v-deep .el-dialog__body {
+  background: #f8fafc;
 }
 </style>
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
index 32ee81a0..2c3791bd 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-layout.test.js
@@ -34,8 +34,9 @@ const mockSource = fs.readFileSync(
   "detailLoading",
   "detailError",
   "handleRetryDetail()",
-  "border: 1px solid #e2e8f0",
-  "border-radius: 24px",
+  "border: 1px solid #dde3ec",
+  "background: #f5f6f8",
+  "font-size: 30px",
 ].forEach((token) => assert(dialog.includes(token), token));
 
 [
@@ -43,6 +44,8 @@ const mockSource = fs.readFileSync(
   'top="2vh"',
   "project-analysis-header__main",
   "project-analysis-header__meta",
+  "border-left: 1px solid #dde3ec",
+  "padding: 36px",
 ].forEach((token) => assert(dialog.includes(token), token));
 
 [
@@ -52,6 +55,8 @@ const mockSource = fs.readFileSync(
   "project-analysis-layout__main-scroll",
   "overflow-y: auto",
   "max-height: calc(90vh - 120px)",
+  "border-radius: 24px",
+  "background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)",
 ].forEach((token) => assert(!dialog.includes(token), token));
 
 [
diff --git a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
index d650a941..5dc6604b 100644
--- a/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
+++ b/ruoyi-ui/tests/unit/project-analysis-dialog-sidebar.test.js
@@ -25,24 +25,28 @@ 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",
-  "align-items: flex-start",
+  "justify-content: space-between",
+  "border: 1px solid #dde3ec",
 ].forEach((token) => assert(sidebar.includes(token), token));
 
 assert(!sidebar.includes("当前命中模型"), "命中模型摘要应移除当前命中模型字段");
 assert(!sidebar.includes("排查记录摘要"), "侧栏应移除排查记录摘要");
 assert(!sidebar.includes("position: sticky"), "左侧整卡不应保持固定");
-assert(!sidebar.includes("border: 1px solid #e2e8f0"), "左右区域合并后左侧不应保留独立卡片边框");
-assert(!sidebar.includes("justify-content: space-between"), "不应继续以表单式左右对齐作为主体布局");
+assert(!sidebar.includes("border-radius: 20px"), "侧栏不应继续保留旧圆角卡片样式");
+assert(!sidebar.includes("background: rgba(255, 255, 255, 0.9)"), "侧栏不应继续保留旧半透明卡片底色");
 
 assert(!sidebar.includes("关系人画像"), "侧栏不应扩展到额外区块");
 assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");
@@ -50,7 +54,7 @@ assert(!sidebar.includes("资产分布"), "侧栏不应扩展到额外区块");
 [
   "this.detailData && this.detailData.basicInfo",
   "...(this.modelSummary || {})",
-  "align-items: flex-start",
+  "align-items: flex-end",
 ].forEach((token) => assert(dialog.includes(token), token));
 
 assert(entry.includes(':model-summary="projectAnalysisModelSummary"'), "入口页应继续透传模型摘要");