fix(system): 修复部门管理操作列错位问题并统一客商档案弹窗风格
- 修复/system/dept页面操作列竖排错位问题,通过提升CSS选择器特异性并强制inline-flex布局 - 在department页面添加scoped样式,双保险保证操作列横排显示及间距正确 - 将客商档案/vehicle/customer-archive中的表单分组和弹窗内容统一改为section-card组件风格 - 清理废弃旧样式类,提升界面一致性及可维护性 - 调整相关弹窗中卡片内容结构,消除双层灰色背景,使弹窗风格与/business/project-apply一致 - 对评分、联系人、收款信息、发票信息、客商材料、变更记录和证明材料等模块使用全局section-card组件包裹 - 优化样式细节,确保按钮组进入卡头右侧,保证操作体验一致 - 验证构建成功及热更新生效,提醒用户发布需清除旧CSS缓存
This commit is contained in:
@@ -88,3 +88,23 @@
|
||||
- 共享工厂函数 `createCrudOption` 新增 `showOverflowTooltip: true`,覆盖 business 模块通过该工厂生成的所有 CRUD option。
|
||||
- 覆盖范围:全站所有表格可见文本列(含 Avue 与手写 el-table),`type="selection"` 选择列由 Element Plus 自动豁免;操作列通过 CSS 豁免不被影响。
|
||||
- 验证:`npm run build` 成功(exit code 0);构建日志中 CSS `*` 告警来自第三方库压缩,与本次无关(历史既有)。
|
||||
|
||||
## 修复 /system/dept 操作栏错位(链接竖排)
|
||||
- 现象:用户截图反馈机构管理页操作列「查看 / 编辑 / 删除 / 新增子项」竖排且偏右错位。
|
||||
- 根因:Avue 自带默认样式 `.avue-crud .avue-crud__menu{display:block}`(特异性 0,2,0)与项目全局覆盖样式选择器完全相同;项目原规则虽带 `!important`,但在 dev 模式 CSS 注入时序或浏览器缓存旧 element-ui.scss 时,`.avue-crud__menu` 退化成 block,导致内部按钮/链接竖排。
|
||||
- 修复:
|
||||
- `src/styles/element-ui.scss`:把 `.avue-crud .avue-crud__menu` 改为重复类名 `.avue-crud .avue-crud__menu.avue-crud__menu`(特异性升到 0,3,0),并新增 `width: 100% !important` 让操作列容器占满单元格、左对齐横排更稳。
|
||||
- `src/views/system/dept.vue`:scoped 样式新增 `:deep(.avue-crud__menu)` 兜底(inline-flex + gap 8px + 子元素 inline-flex),双保险确保本页操作列横排。
|
||||
- 验证:dev server 已热更新,curl 确认两处编译结果均含 `display: inline-flex !important`;构建需用户硬刷新浏览器清旧 CSS 缓存。
|
||||
|
||||
## 客商档案 /vehicle/customer-archive 弹窗风格统一为 section-card
|
||||
- 需求:用户截图反馈弹窗有「双层灰色背景」,且「工商信息」等标题没有放到卡片里面;要求改成和 `/business/project-apply` 一致的白卡风格。
|
||||
- 根因:原页面主表单使用 `.archive-form__group` 灰色容器,内部再包一层白色 `.el-row` 卡片,标题坐在灰色背景上,形成外层 dialog body 灰 + 分组灰的「双层灰」;客商材料、变更记录、评分材料、发票/邮寄信息也沿用旧的分节标题样式。
|
||||
- 改动:`src/views/vehicle/customer-archive.vue`
|
||||
- 主表单 4 个分组改为 `<section-card title="工商信息 / 联系信息 / 财务/信用信息 / 其他信息">` 全局白卡组件,删除外层「基本信息」大标题。
|
||||
- 评分/联系人/收款/发票 4 个 Tab 内容改为 `<section-card>` + `<template #extra>`,按钮组进入卡头右侧。
|
||||
- 客商材料改为 `<section-card title="客商材料" #extra>`,变更记录改为 `<section-card title="变更记录">`。
|
||||
- 发票信息弹窗的「发票信息 / 邮寄信息」改为两张 `<section-card>`。
|
||||
- 评分详情弹窗的「证明材料」改为 `<section-card title="证明材料" class="score-material-card">`。
|
||||
- 清理不再使用的样式:`.archive-form__group`、`.section-title`、`.section-head`、`.customer-material-section`、`.change-record-section`、`.invoice-form__section-title`、`.score-material-section` 等。
|
||||
- 验证:`npm run build` 成功(exit code 0)。
|
||||
|
||||
Reference in New Issue
Block a user