craftlabs-authorization-sdk/docs/superpowers/specs/2026-05-27-ui-pattern-consolidation.md

UI 交互模式复盘 — 导航/弹框一致性 + 侧栏分组

日期: 2026-05-27 范围: 全部 38 个 Vue 视图

---

1. 当前 CRUD 模式盘点

页面	Create	Edit	Detail	评估
客户管理	弹框 el-dialog	弹框	独立页面	✅ 一致
项目管理	弹框 el-dialog	弹框	无独立详情(干系人管理在弹框)	✅ 一致
合同管理	向导页 /contracts/new	详情页内编辑	独立详情页	✅ 合理(多步)
交付管理	向导页 /deliveries/new	详情页内编辑	独立详情页	✅ 合理(多步)
许可 SN	向导页 /licenses/sn/new	详情页内编辑	独立详情页	✅ 合理
Callback	无(来源Webhook)	详情页内操作	独立详情页	✅
设备管理	弹框	详情页内编辑	独立详情页	✅ 一致
用户管理	弹框	弹框	无独立详情	✅ 一致

结论：当前模式基本合理

场景	推荐模式	示例
简单表单 (≤5 字段)	弹框 el-dialog	客户、项目、设备、用户
复杂表单/向导 (≥2 步)	独立页面	合同向导、交付向导、SN 向导
详情展示	独立页面	合同详情、交付详情、SN 详情、设备详情
关联数据管理	弹框	项目干系人、SN 批量导入、合同明细行

不建议强行统一为弹框 — 合同向导有 3 步（选择客户项目→填写信息→明细行），用弹框会撑爆视口。

---

2. 发现的不一致问题

#	问题	当前行为	建议
1	合同列表行操作	「详情」跳转详情页，无直接「编辑」入口	详情页支持编辑即可（已有）
2	交付列表行操作	同上	同上
3	SN 列表行操作	同上	同上
4	客户列表行操作	「详情」「编辑」「冻结」「删除」都在列表页	✅ 正确
5	设备列表无编辑	只有「详情」→详情页编辑	详情页已支持编辑，可接受
6	项目无独立详情页	编辑、干系人都在列表弹框	对于简单实体，弹框够用 ✅

---

3. 侧栏分组实现方案

当前结构（扁平）

📊 首页
👥 客户管理
📋 合同管理
📦 交付管理
🔑 许可 SN
🛡️ 许可证管理
📨 Callback 收件箱
🌐 集成环境
📱 产品线
🖥️ 设备管理
🔔 待办中心
📊 报表中心
📧 报表订阅
👤 用户管理

目标结构（三级分组）

📊 首页
──── 业务管理 ────
👥 客户管理
📋 合同管理
📦 交付管理
🔑 许可 SN
🛡️ 许可证管理
──── 运营管理 ────
📨 Callback 收件箱
🌐 集成环境
📱 产品线
🖥️ 设备管理
🔔 待办中心
──── 分析管理 ────
📊 报表中心
📧 报表订阅
──── 系统管理 ────
⚙️ 系统参数
👤 用户管理
🔐 审计日志

实现方式

方案: 修改 MainLayout.vue 中的 menuItems 数组为分组结构，模板中循环渲染组。

Step 1: 改造 menuItems 数据结构

const menuGroups = [
  {
    label: '业务管理',
    items: [
      { path: "/customers", icon: "👥", label: "客户管理", roles: ["SYS_ADMIN","SALES"] },
      { path: "/contracts", icon: "📋", label: "合同管理", roles: ["SYS_ADMIN","SALES"] },
      { path: "/deliveries", icon: "📦", label: "交付管理", roles: ["SYS_ADMIN","SALES","DELIVERY"] },
      { path: "/licenses/sn", icon: "🔑", label: "许可 SN", roles: ["SYS_ADMIN","SALES"] },
      { path: "/licenses", icon: "🛡️", label: "许可证管理", roles: ["SYS_ADMIN","SALES"] },
    ]
  },
  {
    label: '运营管理',
    items: [
      { path: "/callbacks", icon: "📨", label: "Callback 收件箱", roles: ["SYS_ADMIN","LICENSE_OPS"] },
      { path: "/integration/environments", icon: "🌐", label: "集成环境", roles: ["SYS_ADMIN","SALES","LICENSE_OPS"] },
      { path: "/integration/product-lines", icon: "📱", label: "产品线", roles: ["SYS_ADMIN","SALES","LICENSE_OPS"] },
      { path: "/devices", icon: "🖥️", label: "设备管理", roles: ["SYS_ADMIN","SALES","DELIVERY"] },
      { path: "/todos", icon: "🔔", label: "待办中心", roles: ["SYS_ADMIN","SALES","LICENSE_OPS"] },
    ]
  },
  {
    label: '分析管理',
    items: [
      { path: "/reports/contract-sn", icon: "📊", label: "报表中心", roles: ["SYS_ADMIN"] },
      { path: "/reports/subscriptions", icon: "📧", label: "报表订阅", roles: ["SYS_ADMIN"] },
    ]
  },
  {
    label: '系统管理',
    items: [
      { path: "/audit", icon: "🔐", label: "审计日志", roles: ["SYS_ADMIN"] },
      { path: "/admin/params", icon: "⚙️", label: "系统参数", roles: ["SYS_ADMIN"] },
      { path: "/admin/users", icon: "👤", label: "用户管理", roles: ["SYS_ADMIN"] },
    ]
  },
];

Step 2: 改造模板渲染

<aside class="app-sidebar">
  <div class="sidebar-section-label">📊 首页</div>
  <div class="sidebar-item" :class="{ active: isActive(homeItem) }" @click="$router.push(homeItem.path)">
    <span class="sidebar-item-icon">{{ homeItem.icon }}</span>
    <span class="sidebar-item-text">{{ homeItem.label }}</span>
  </div>
  
  <template v-for="group in visibleGroups" :key="group.label">
    <div class="sidebar-group-label">{{ group.label }}</div>
    <div
      v-for="item in group.items"
      :key="item.path"
      :class="['sidebar-item', { active: isActive(item) }]"
      @click="$router.push(item.path)"
    >
      <span class="sidebar-item-icon">{{ item.icon }}</span>
      <span class="sidebar-item-text">{{ item.label }}</span>
    </div>
  </template>
  
  <div class="sidebar-footer">CraftLabs Platform v0.1.0</div>
</aside>

Step 3: CSS 调整

.sidebar-group-label {
  font-size: 11px;
  color: #999;
  padding: 12px 16px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}