b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
2bd9d8c0475a4a65d13a19701134537fc5459c05
tms-erp-web/.workbuddy/memory/2026-08-25.md
T
gxwebsoft 2bd9d8c047 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"，保证样式一致自动生效
2026-08-25 11:56:16 +08:00

6.5 KiB
Raw Blame History

2026-08-25

全站操作列按钮居中统一

  • 根因：pre-settlement 等手写操作列用 <div class="xxx__links"> 包裹 el-link，而全局 element-ui.scss 第 904 行原选择器为 :has(> .el-link)（仅命中直接子元素），导致包了一层 div 的操作列未被居中规则命中，按钮靠左。
  • 修复：将 .el-table .el-table__body .cell:not(.avue-crud__menu) 相关的三处选择器 :has(> .el-link) 全部放宽为 :has(.el-link)（第 904 / 935 / 954 行），兼容"el-link 被 div 包裹"的手写操作列；.avue-crud__menu（Avue 内置操作列）原已居中不受影响。
  • 另在 pre-settlement.vue 的 .pre-settlement-page__links 补 justify-content:center 兜底。
  • 结论：全站所有基于 el-link 的操作列（无论是否包裹 div）统一居中，符合 AGENTS.md 操作列规范。

全站业务状态标签改为普通文字（无颜色圆点）

  • 根因：用户反馈审批状态列显示为带彩色圆点的文字（如截图），要求改成"普通的文字不要颜色"。此前 .status-text 是"文字 + 彩色圆点"风格。
  • 修复：修改 src/styles/element-ui.scss 中 .el-tag.status-text 全局规则，去掉 &::before 圆点，并将 color 强制设为 var(--el-text-color-regular)，font-weight:normal，margin:0，背景边框保持透明。所有带 class="status-text" 的 el-tag 自动生效，无需逐页改模板。
  • 结论：全站业务状态（调度状态/运单状态/审批状态等）统一为普通文字，不再带彩色圆点。

/payment 下全部表单页板块风格统一

  • 需求：所有 /payment 表单页（invoice-receipt / invoice-application / payment-application / bill-ledger / bill-payment / receipt-claim-record / receipt-flow）统一为"页面标题无蓝标 + 每个蓝标板块用白底卡片包裹 + 板块间距 12px"，参考 business/project-apply/form。
  • 实现：页面标题改用全局 archive-page-form__title（蓝标已注释，无竖条）；各 <section class="X-form-page__section"><div class="X-form-page__section-title">标题</div> 整体改为全局组件 <section-card title="标题">（白底卡片 + 4px 主色竖条 + 卡间 12px，由 src/styles/element-ui.scss 全局 .section-card 提供）；带按钮的板块（附件信息/开票内容）用 <section-card title="..."><template #extra>按钮</template>。
  • 清理：删除各文件 scoped 中 __title/__section 相关的废弃 CSS（蓝标 ::before、板块间距、heading 等）；payment-application 的 .payment-form-page__section-actions（按钮行右对齐）属有效独立样式，清理时被误删，已补回。
  • 校验：用 @vue/compiler-sfc 对 7 个文件做 template/script 编译，全部通过。

/payment 板块表单控件统一 4 列（span=6）

  • 需求：用户要求 /payment 下"板块表单控件都改成 4 列"。此前列数不一致：多数页用 el-col :span="12"（2 列），invoice-application 用 :span="8"（3 列），bill-payment / bill-ledger 是"两列各叠多个控件"的嵌套结构。
  • 实现：
    • 直接网格（每列一个控件）：payment-application、invoice-receipt、receipt-claim-record、receipt-flow 的 :span="12" → :span="6"；invoice-application 的 :span="8" → :span="6"（两处 el-row）。
    • 嵌套网格：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 View Git Blame Copy Permalink