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:
@@ -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 审批状态、启用停用等)自动与相邻普通文字列的字体字号/行高/基线完全统一,无需逐页修改。
|
||||
|
||||
Reference in New Issue
Block a user