fix(sidebar): 修复子路由高亮丢失问题
- 新增 menuPaths 计算属性,递归收集全站菜单路径 - 修改 activeMenu 逻辑,针对无匹配菜单路径尝试最长前缀匹配 - 解决子路由菜单高亮消失问题,支持全站多场景适用 - 优化 master-order-dispatch 页面 select 宽度,防止 append 区域撑爆 - 修正运输单位 select 固定宽度为 92px,并防止被父容器拉伸 - 调整 business-crud-page 任务备注和附加选择器宽度及样式 - 减少 process-config 备注输入区域行数,提升界面紧凑度
This commit is contained in:
@@ -133,3 +133,20 @@
|
||||
- 定位:`src/views/vehicle/customer-archive.vue` 第 4637-4666 行 `.qualification-upload-bar`(grid 1fr auto 1fr 改 flex 的二次修正)。
|
||||
- 修复:保留 flex 容器,按钮区 `.vehicle-attachment-upload > :deep(.el-upload)` `flex: 0 0 auto` 贴左固定;描述 `:deep(.el-upload__tip)` `margin-left: 30px + white-space: nowrap + overflow:hidden + text-overflow:ellipsis + text-align:left`,与按钮同行紧贴、间距固定 30px、超长文案省略号。
|
||||
- 结论:布局"「上传附件」按钮 ←30px→ 「支持pdf…」描述",单行两端对齐。
|
||||
|
||||
## sidebar 子路由高亮回退(方案B)
|
||||
- 需求:用户反馈点「客商档案」菜单后,再点新增/编辑/查看(跳子路由 /vehicle/customer-archive/form),左侧菜单选中灰底消失。
|
||||
- 根因:sidebar `activeMenu` getter 在无 `meta.activeMenu` 时退到 `route.path`(即子路由 /vehicle/customer-archive/form),与菜单 path /vehicle/customer-archive 不匹配,`<el-menu :default-active>` 找不到项 → 高亮丢失。同因还影响 /business/contract-manage/change 等独立子路由。
|
||||
- 修复(方案B,通用兜底,改 1 文件):`src/page/index/sidebar/index.vue`
|
||||
- 新增 `menuPaths` computed:递归收集全站菜单 `website.menu` 的 `path` 字段进 Set。
|
||||
- `activeMenu` 在 `return path` 前加分支:当 `path` 不在 menuPaths 时,过滤出所有 `path.startsWith(p + '/')` 的菜单路径,按长度降序取最长前缀匹配者作为高亮项(即 /vehicle/customer-archive/form → /vehicle/customer-archive)。
|
||||
- 原有 `meta.activeMenu` 与 `menuIndexes`(带参菜单精确匹配)分支保持不变;路径完全相同的路由仍精确匹配,不受影响。
|
||||
- 结论:一次改动全站受益,所有"父菜单 + 独立子表单页"场景(customer-archive/form、contract-manage/change 等)自动保持父菜单高亮,无需逐路由配 activeMenu。HMR 已生效。
|
||||
|
||||
## master-order-dispatch 运费单位 select 撑爆 append 槽
|
||||
- 需求:用户截图 dispatch 页"任务信息"块下"数量 → 吨"与"单价 → 元/吨"两个 select 宽度比左侧 input 还宽,红框标记要求改小。
|
||||
- 根因:`src/views/business/components/master-order-dispatch.vue` 第 702 行 `.dispatch-form` 全局规则 `:deep(.el-input), :deep(.el-select), :deep(.el-date-editor), :deep(.el-input-number) { width: 100%; }` 把整个 dispatch 表单内**所有** el-select 强制 100% 宽;这两个 select 处于 `el-input` 的 `#append` slot 内,被强制撑开 append 容器,append 又把整个 `el-col :span="6"` 列占满。第 707 行 `.freight-form { :deep(.freight-unit-select) { width: 92px; } }` 想兜底 92px,但因 specificity 与覆盖时机问题未生效。
|
||||
- 修复(最小改动,2 处):
|
||||
- 行 702 末尾追加 `:deep(.el-input-group__append .el-select) { width: auto; }`,使 append 内的 select 退回内容自适应宽度(避免被 100% 拉伸)。
|
||||
- 行 707 强化兜底:`.freight-unit-select` 加 `flex: 0 0 92px; min-width: 0;`,固定 92px 防止 append flex 拉伸。
|
||||
- 结论:单位 select(吨/元/吨)宽度由内容决定(≈92px),不再撑爆 append 与列;其它顶层 select(承运商/币种等)仍维持 100% 宽,行为不变。
|
||||
|
||||
Reference in New Issue
Block a user