style(ui): 统一全站 el-table 表头背景色及弹窗卡片化风格

- 将所有 el-table 表头背景色统一设为浅灰 #fafafa,覆盖普通表格、avue-crud 和固定列
- 移除业务组件内冗余的表头样式,改由全局样式统一控制
- 调整多处弹窗(预结算单、正式结算单、运输对账单、应收明细等)内容板块,改用全局 section-card 组件实现白底卡片分组
- 为多个弹窗内的搜索区域增加白底、圆角和阴影样式,提升视觉层次感
- 缩减多处表格“操作”列宽度以适配新布局
- 付款申请弹窗按钮由主色调 primary 改为 success,符合全站按钮风格规范
- 统一调整弹窗内表单、按钮、间距及背景细节,改善界面体验和视觉一致性
This commit is contained in:
2026-08-20 14:47:29 +08:00
parent f6b05ed71d
commit 8f35e6b265
12 changed files with 250 additions and 191 deletions
+83
View File
@@ -17,3 +17,86 @@
- 调整文件:`src/views/business/components/business-crud-page.vue`
- 修改内容:在“计划调度”弹窗的待调度列表 `el-table` 上增加 `:header-cell-style="{ background: '#fafafa' }"`,将表头背景由白色改为浅灰。
- 原因:用户反馈 `/business/transport-plan` 页面白色表头需统一改为灰色 `#fafafa`
## 运单管理货物信息表头背景色调整
- 调整文件:`src/views/business/components/business-crud-page.vue`
- 修改内容:在 `goodsJson-form` 货物信息表格上增加 `:header-cell-style="{ background: '#fafafa' }"`,表头背景改为浅灰。
- 原因:用户反馈 `/business/waybill-manage` 页面货物信息表头需统一改为灰色 `#fafafa`
## 全站 el-table 表头背景色统一
- 调整文件:`src/styles/element-ui.scss`(修改原仅限 `.avue-crud` 的表头规则)
- 修改内容:将表头背景规则扩展为全站 `.el-table` 表头(含普通表格、avue-crud、固定列),统一 `background-color: #fafafa !important`
- 连带清理:移除 `business-crud-page.vue` 中两处冗余的 `:header-cell-style="{ background: '#fafafa' }"`(调度表、货物表),改由全局规则兜底。
- 影响:`/business/loading-manage``/business/waybill-manage``/business/transport-plan` 以及全站所有白色 el-table 表头均统一为 `#fafafa``!important` 同时覆盖了部分组件内 scoped 设定的 `#f5f7fa` 表头背景。
## 应收明细调整费用弹窗按钮间距
- 调整文件:`src/views/settlement/receivable-payable-detail.vue`
- 修改内容:为“调整费用”弹窗内的 `.settlement-detail-page__adjust-toolbar` 增加 `margin-bottom: 16px`,让“新增费用项”按钮与下方表格拉开间距。
- 原因:用户反馈 `/settlement/receivable-detail` 页面调整费用弹窗中“新增费用项”按钮与表格贴得太近。
## 应收明细生成费用弹窗搜索区域加白底
- 调整文件:`src/views/settlement/receivable-payable-detail.vue`
- 修改内容:为“生成费用”弹窗内的搜索 `el-form` 增加 class `settlement-detail-page__generate-search`,设置白底、圆角 6px、轻阴影,并与下方表格保留 16px 间距。
- 原因:用户反馈 `/settlement/receivable-detail` 页面生成费用弹窗中搜索区域缺少白底卡片效果。
## 应收明细更新费用弹窗表单加白底
- 调整文件:`src/views/settlement/receivable-payable-detail.vue`
- 修改内容:为“更新费用”弹窗的 `.settlement-detail-page__dialog-form` 增加白底、圆角 6px、轻阴影;将 padding 由 `16px 20px 0` 改为 `16px 20px`,并去掉最后一个表单项的底部外边距。
- 原因:用户反馈 `/settlement/receivable-detail` 页面更新费用弹窗中表单区域缺少白底卡片效果。
## 应收明细批量转结算弹窗搜索区域加白底
- 调整文件:`src/views/settlement/receivable-payable-detail.vue`
- 修改内容:为“批量转结算”弹窗的 `.settlement-detail-page__transfer-form` 搜索区域增加白底、圆角 6px、轻阴影,并保留与下方表格 16px 间距。
- 原因:用户反馈 `/settlement/receivable-detail` 页面批量转结算弹窗中搜索区域缺少白底卡片效果。
## 预结算单编辑弹窗改白底卡片分组
- 调整文件:`src/views/settlement/components/pre-settlement-editor.vue`
- 修改内容:将“新增/编辑预结算单”弹窗内的全部板块由自定义 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件,包括:结算基本信息、结算合计、结算明细、附件、预付信息(readonly)、变更记录(readonly)。结算合计/结算明细头部右侧按钮改为 section-card 的 `#extra` 插槽;删除了不再使用的 `.pre-settlement-editor__section``.pre-settlement-editor__section-head` 样式,并去掉了 `.pre-settlement-editor__form` 多余的 `margin-top`
- 间距:卡片间距沿用全局 `.section-card``margin-bottom: 12px`(符合用户要求)。候选弹窗(添加应收应付明细)的 `dialog-section-title` 保持不变。
- 原因:用户要求预结算单弹窗各板块使用白底卡片分隔,统一项目视觉规范。
## 应收明细详情弹窗 tabs 内容区背景改白
- 调整文件:`src/views/settlement/receivable-payable-detail.vue`
- 修改内容:在 scoped 样式末尾新增 `.settlement-detail-dialog` 规则块,对 `:deep(.el-tabs__content)` 设置 `background: #fff; padding: 16px; border-radius: 0 0 6px 6px;``:deep(.el-tab-pane)` 设为透明。
- 原因:全局 `.el-dialog__body { background: #f5f6fa }` 灰底透到 tabs 内容区(费用明细/变更记录),用户要求改为白色背景。
## 预结算单打印弹窗白底卡片化
- 调整文件:`src/views/settlement/pre-settlement.vue`
- 修改内容:将“打印”弹窗内的手写 `.dialog-section-title` + 普通 `el-form` 改为全局 `<section-card title="选择打印模板">` 包裹表单;为打印弹窗增加 `class="pre-settlement-print-dialog"`;删除页面底部不再使用的 `.dialog-section-title` 样式块,并去掉 `.pre-settlement-page__print-form``margin-top`
- 原因:用户要求 `/settlement/pre-settlement` 打印弹窗按项目规范使用白底卡片分组,与预结算单编辑弹窗风格统一。
## 正式结算付款申请弹窗白底卡片化
- 调整文件:`src/views/settlement/formal-settlement.vue`
- 修改内容:将“付款申请”弹窗内的普通 `el-form` 改为全局 `<section-card title="付款信息">` 包裹;为弹窗增加 `class="formal-payment-dialog"`;按全站按钮规范将“提交”按钮由 `type="primary"` 改为 `type="success"`
- 原因:用户要求 `/settlement/formal-settlement` 付款申请弹窗使用白底卡片分组,并与项目统一按钮风格对齐。
## 正式结算单编辑弹窗改白底卡片分组
- 调整文件:`src/views/settlement/components/formal-settlement-editor.vue`
- 修改内容:将“新增/编辑正式结算单”弹窗内的全部板块由 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件,包括:结算基本信息、来源预结算单、结算明细、附件、付款信息(readonly)。“来源预结算单”头部按钮改为 section-card 的 `#extra` 插槽;删除了不再使用的 `.formal-editor__section``.formal-editor__section-head` 样式。
- 间距:沿用全局 `.section-card``margin-bottom: 12px`
- 原因:用户要求 `/settlement/formal-settlement` 页面与预结算单弹窗统一使用白底卡片分隔。
## 正式结算选择预结算单/选择结算明细弹窗搜索区白底
- 调整文件:`src/views/settlement/components/formal-settlement-editor.vue`
- 修改内容:为"选择预结算单"和"选择结算明细"两个弹窗内的搜索 `el-form` 分别增加 class `formal-editor__candidate-search` / `formal-editor__detail-search`,统一样式:白底、圆角 6px、12px 内边距、16px 底间距、轻阴影。
- 原因:用户反馈 `/settlement/formal-settlement` 页面"选择预结算单"弹窗搜索区域缺少白底卡片效果。
## 运输对账单编辑弹窗改白底卡片分组
- 调整文件:`src/views/settlement/components/transport-reconciliation-editor.vue`
- 修改内容:将"新增/编辑运输对账单"弹窗内的全部板块由 `dialog-section-title` + `<section>` 改为全局 `<section-card>` 组件,包括:导入外部账单与内部账单核对、内部账单、导入外部账单、操作说明。"导入外部账单"头部按钮改为 section-card 的 `#extra` 插槽;删除了不再使用的 `.reconciliation-editor__section``.reconciliation-editor__section-head` 样式。
- 间距:沿用全局 `.section-card``margin-bottom: 12px`
- 验证:已通过 SFC 解析与模板编译检查。
- 原因:用户要求 `/settlement/transport-reconciliation` 页面与预结算单/正式结算单弹窗统一使用白底卡片分隔。