2026-06-29-fresh-mint-content-ui-step0-1.md 3.0 KB

Fresh Mint 内容区 UI 对齐(Step 0 + Step 1)

基准项目:zkxw/web-admin(中科兴皖)
目标项目:shanxia2.0/web-admin(山峡化工)
日期:2026-06-29

改造边界(硬约束)

允许 禁止
src/assets/styles/core/*.scss 内容区相关段落 修改 views/**/*.vue 的 <script>
可选 main.ts 一行全局表格 border 默认值 修改 API、路由、权限、校验逻辑
文档与验收清单 替换 Portal 布局壳层、侧栏结构
保留 shanxia 四列 ViewKvGrid、Portal 顶栏 整文件覆盖 app.scss(避免 bx/db/Portal 冲突)

客户要求:只影响 UI 样式,不影响功能。

对照页(Step 0 基线)

模块 路径 Hash 示例
系统 views/system/user/index.vue 用户管理
CRM views/crm/customer/index.vue 客户管理
PL views/pl/plan/index.vue 运输计划
报销 views/bx/reimburse/apply/index.vue 报销申请
地磅 views/db/weighing/index.vue 过磅记录

功能回归清单(每模块抽 1 页)

  • 列表:查询、重置、分页、排序、多选
  • 新增/编辑:弹窗打开、校验、保存、关闭
  • 删除/批量:确认框、成功提示
  • 查看详情:字段完整、附件预览/下载
  • 权限:无权限按钮仍隐藏/禁用

Step 1 改动范围

文件 改动说明
fresh-mint-tokens.scss 补 --mint-success-*、--primary 别名;保留 --mint-text-placeholder
el-ui.scss 恢复 secondary/表头 muted 层次;同步 primary light 色阶
el-light.scss success base 与 zkxw 对齐 #059669
app.scss 移除「消除 muted 灰字」;补筛选 label 11px;补弹窗遮罩顶对齐兜底
main.ts 不改(两项目均为 ElTable border: true,避免额外变量)

Step 1b:Portal 顶栏 / 侧栏 / WorkTab(2026-06-29 补充)

文件 改动说明
views/index/style.portal.scss 顶栏高度 72px → 56px(与 zkxw 一致)
art-portal-header/index.vue 56px、品牌区分隔线、标题 16px/700
art-portal-top-nav/index.vue 一级模块卡片对齐 ArtMixedMenu(48px 高、实心绿选中)
art-sidebar-menu/theme.scss 与 zkxw 同步:muted 菜单字、选中实心绿底白字、子菜单竖线
art-sidebar-menu/style.scss 侧栏右边框 Mint、长菜单名省略
art-work-tab/index.vue WorkTab 底 padding 与 zkxw 对齐(4px)
app.scss Portal 顶栏 / 侧栏 / WorkTab 全局兜底

Step 1 验收(视觉)

  • 筛选区 label 为 11px 次要色(muted)
  • 表头文字为 muted,正文为主色,层次清晰
  • 弹窗 dialog-form-layout 顶对齐留白、无 backdrop blur
  • Portal 顶栏/侧栏外观与改前一致

后续(Step 2+,本次不做)

  • 页面级 title-bar-heading、:loading 补齐
  • bx/db 模块样式收敛
  • Demo 模板页从 zkxw 拷贝