# 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 数据结构

```javascript
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: 改造模板渲染

```html
<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 调整

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