refactor(ui): 优化多页面表单布局及样式统一
- 统一用 section-card 组件替换原有分段结构,简化模板结构 - 调整表单列宽为 6 栅格,提高响应式适配效果 - 修改标题类名,采用一致的 archive-page-form__title - 精简并合并样式,移除各页面冗余标题和分段样式声明 - 全站业务状态标签改为普通文字,不显示背景和圆点,字体颜色统一 - 优化 element-ui.scss 中表格操作列的 el-link 样式,兼容多层 DOM 结构 - 增加表格操作列 el-tooltip 单元格自动宽度,防止内容裁切 - 调整正式结算列表操作列宽度,提升显示空间 - 简化部分页面表单控件宽度样式,统一控件宽度及间距 - 删除多处无用样式,减少样式冗余,提高代码可维护性
This commit is contained in:
@@ -40,9 +40,9 @@
|
||||
- 已覆盖:pre-settlement-editor「结算明细调整」弹窗(adjustDialog 列内 el-input-number/el-input 全宽)、transport-reconciliation-editor/formal-settlement-editor/settlement-adjustment-editor 同款结构。
|
||||
|
||||
### 业务状态标签文字化:全局 `.status-text` 工具类
|
||||
- 需求:全站"调度状态/运单状态/审批状态"等用 `el-tag` 展示的字段,统一改为"纯文字 + 颜色"(不用 tag 背景/边框)。
|
||||
- 实现:`element-ui.scss` 末尾新增 `.el-tag.status-text { background:transparent!important; border-color:transparent!important; padding:0; margin-left:8px; font-weight:500 }` + `&::before` 6px 圆点(`background:currentColor`,颜色随 el-tag 的 `:type`)。
|
||||
- 用法:业务状态 `el-tag` 加 `class="status-text"`,颜色仍由现有 `statusTagType/statusType/waybillStatusType/detailStatusType` 返回的 success/warning/danger/info/primary 决定。
|
||||
- 需求:全站"调度状态/运单状态/审批状态"等用 `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 强制覆盖为正文色。
|
||||
- 用法:业务状态 `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 样式。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user