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:
@@ -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 匹配结果·状态)、payment(invoice-application/bill-payment-table/receipt-flow/receipt-claim-record/invoice-receipt/payment-application 审批·认领状态)、contract-manage(合同阶段 + 审批)、temporary-credit-limit、process-config、credit-score-quantification、flow(manager/follow 激活·挂起)、work(start 激活·挂起 / send 完成)、transportCapacity(vehicle 启用·认证 / driver / ship 启用)、base(railway-station/airport-master/currency/customer-type/fee-item/port-terminal 启用停用)、system(dept/authority apikey·ratelimit 启用禁用 / authlock lockStatus / dict·dictbiz 是否封存 / codesetting 否是)、resource(sms/oss statusName)、customer-archive(审批 + 启用停用)、transit/risk-disposal(column.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`。
|
||||
|
||||
Reference in New Issue
Block a user