style(ui): 全站 el-tag 状态语义统一为纯文本样式

- 按用户要求,将全站所有状态语义的 el-tag 加入 class="status-text"
- 覆盖范围包括业务状态、启用停用、工作流状态、是否封存等多达 35 余处文件
- 保留 el-tag 的 :type 绑定,仅通过样式隐藏背景边框及圆点,变为纯文本呈现
- 修正 .status-text 的 font-size、line-height、height、vertical-align,确保字体和单元格普通文本完全对齐
- 例外保留原样式的标签类型有类型标签、值类字段等,未受影响
- 更新 element-ui.scss 添加 .el-tag.status-text 的全局统一样式
- 相关模板中均添加了 class="status-text",保证样式一致自动生效
This commit is contained in:
2026-08-25 11:56:16 +08:00
parent 01c3bb5b57
commit 2bd9d8c047
43 changed files with 85 additions and 64 deletions
+14
View File
@@ -24,3 +24,17 @@
- 嵌套网格:bill-payment、bill-ledger 拆成每个字段独立 `el-col :span="6"`(真 4 列),gutter 48→24;备注保留 `:span="24"` 整行。
- 媒体查询同步:`.el-col-12`/`.el-col-8` 窄屏折叠规则改成 `.el-col-6`(≤1024/1200/900/768px 折叠为整行)。
- 结论:全 /payment 表单页板块表单控件统一为 4 列网格,备注/长文本仍整行;pre-settlement-editor「结算基本信息」此前也已改 `:span="8"``span="6"`
## 全站 el-tag 状态语义统一转纯文本(status-text
- 需求:用户要求"全站看看还有哪些地方使用 el-tag 的?都要统一改一下",保持与调度状态一致的纯文本风格。
- 范围确认:用 AskUserQuestion 确认采用"所有状态语义"——业务状态(审批/调度/运单/匹配/认领) + 启用停用 + 工作流激活挂起/完成 + 其它状态(statusName/是否封存/否是/认证/锁状态/合同阶段) 一律转 `.status-text` 纯文本;类型标签/版本号/分类名/值类(车牌颜色、锁类型、运输方式、categoryName、code、apiKey 等) 保留 tag。
- 改动文件(约 35 个,仅加 `class="status-text"`,不动逻辑/`:type` 绑定):
- 启用/停用:base(railway-station/airport-master/currency/customer-type/fee-item/port-terminal)、system/dept、transportCapacity(vehicle/driver/ship)、authority(apikey/ratelimit)
- 业务状态遗漏补:settlement/formal-settlement、business/temporary-credit-limit、business/contract-manage(合同阶段+审批)、payment(invoice-application/bill-payment-table/receipt-flow/receipt-claim-record/invoice-receipt/payment-application)、settlement/components/transport-reconciliation-editor(匹配结果/状态/更新结果)、transit/risk-disposal(column.tag/field.tag)
- 工作流/其它:flow(manager/follow 激活挂起)、work(start 激活挂起/send 完成)、transportCapacity/vehicle 认证状态、system/authlock lockStatus、tool/codesetting、resource(sms/oss) statusName、vehicle/customer-archive(审批+启用停用)、system/dict+dictbiz 及 util/demo 各 dict 页 是否封存
- 校验:重新 grep `el-tag[^>]*:type=` 确认除 authlock lockType、vehicle-ledger plateColor 两个刻意保留的"类型标签"外,所有状态语义 el-tag 均已带 status-text。改动为纯属性添加,Vite HMR 自动生效。
## 业务状态文字化后字号/行高对齐单元格
- 根因:用户截图反馈 customer-archive 的"准入类型/审批状态/状态"列文字比其它列小/错位。`.el-tag` 默认 `font-size: var(--el-tag-font-size)`12px)且 `height` 固定,即便 `.status-text` 去掉了背景边框,字号和盒模型仍与单元格普通文本不一致。
- 修复:在 `src/styles/element-ui.scss``.el-tag.status-text` 全局规则追加 `font-size: inherit !important; height: auto !important; vertical-align: baseline; line-height: inherit;`,强制继承父级字号与行高,高度随内容自适应,基线对齐与普通 inline 文本一致。
- 结论:所有使用 `.status-text` 的状态列(customer-archive 准入类型/审批状态/状态、transport-plan 调度状态、waybill 运单状态、payment 审批状态、启用停用等)自动与相邻普通文字列的字体字号/行高/基线完全统一,无需逐页修改。
+3 -3
View File
@@ -41,10 +41,10 @@
### 业务状态标签文字化:全局 `.status-text` 工具类
- 需求:全站"调度状态/运单状态/审批状态"等用 `el-tag` 展示的字段,统一改为**普通文字,不带颜色、不显示 tag 背景/边框/圆点**。
- 实现:`element-ui.scss` 末尾 `.el-tag.status-text { background:transparent!important; border-color:transparent!important; color:var(--el-text-color-regular)!important; padding:0; margin:0; font-weight:normal!important }`,并隐藏 `&::before` 圆点。`el-tag``:type` 继续保留在模板中(无需改动),但颜色已被全局 CSS 强制覆盖为正文色
- 实现:`element-ui.scss` 末尾 `.el-tag.status-text { background:transparent!important; border-color:transparent!important; color:var(--el-text-color-regular)!important; padding:0; margin:0; font-weight:normal!important; font-size:inherit!important; height:auto!important; vertical-align:baseline; line-height:inherit }`,并隐藏 `&::before` 圆点。`el-tag``:type` 继续保留在模板中(无需改动),但颜色/字号/行高已被全局 CSS 强制覆盖为与单元格普通文本一致
- 用法:业务状态 `el-tag``class="status-text"`
- 已覆盖:`business-crud-page.vue`#status/#businessStatus/#approvalStatus 插槽 + 运输计划详情头 + 运单详情头 + 调度弹窗头)、`master-order.vue`/`master-order-detail.vue`/`master-order-dispatch.vue` 的 businessStatus、`loading-manage.vue` 详情弹窗、结算三处 approvalStatus、`process-config.vue` 流程状态、`credit-score-quantification.vue` 状态列
- 例外:`loading-manage.vue` 列表状态列本就`<span class="loading-manage-page__status is-${status}">` 文字化(先例),不动"类型标签"transport-flow-tag、transportTypeName`type="primary"`)非状态语义,保持 tag 样式
- **全站统一完成(2026-08-25**:所有"状态语义"的 el-tag 均已加 `class="status-text"` 转纯文本,含:business-crud-page#status/#businessStatus/#approvalStatus + 调度弹窗头)、master-order 系列、loading-manage 详情、结算(settlement-adjustment/pre-settlement/formal-settlement/formal-settlement-table-panel/transport-reconciliation-editor 匹配结果·状态)、paymentinvoice-application/bill-payment-table/receipt-flow/receipt-claim-record/invoice-receipt/payment-application 审批·认领状态)、contract-manage(合同阶段 + 审批)、temporary-credit-limit、process-config、credit-score-quantification、flowmanager/follow 激活·挂起)、workstart 激活·挂起 / send 完成)、transportCapacityvehicle 启用·认证 / driver / ship 启用)、baserailway-station/airport-master/currency/customer-type/fee-item/port-terminal 启用停用)、systemdept/authority apikey·ratelimit 启用禁用 / authlock lockStatus / dict·dictbiz 是否封存 / codesetting 否是)、resourcesms/oss statusName)、customer-archive(审批 + 启用停用)、transit/risk-disposalcolumn.tag/field.tag
- 例外(刻意保留 tag 样式,非状态语义)`loading-manage.vue` 列表状态列用 `<span class="loading-manage-page__status is-${status}">`(先例);"类型标签"——transport-flow-tag、transportTypeName、business-crud-page:3252 运输方式、loading-manage:399 运输方式 warning、authlock lockType(锁类型)、vehicle-ledger plateColor/businessRelation、cron-editor、以及 categoryName/version/code/tenantId/roleName/deptName/apiKey/remoteIp/env/tableName/method/recordLevel/pattern/modelTable/fileSize/node.tags 等"值/标签/提示"类。注:customer-archive 准入类型原在例外中,2026-08-25 用户要求也转纯文本(已加 status-text
## 关键文件
- 分组白卡:`src/components/section-card/main.vue`