v3-upsert-route

创建或更新路由

根据用户提供的路由信息，在 src/router/index.ts 中生成或更新路由配置。

本 Skill 定义的是项目默认路由模式，当用户的实际需求与本 Skill 约定冲突时，以用户需求为准。

输入要求

用户需提供：

1. 路由路径（如 /school、/user）
2. 路由标题（中文，如 学校管理、用户管理）
3. 路由类型：
   • 常驻路由（constantRoutes）：所有登录用户可访问
   • 动态路由（dynamicRoutes）：需要角色或权限控制
4. 权限配置（仅动态路由）：角色如 ["admin"]、["admin", "editor"]，权限标识字符如 ["permission:page-level"]
5. 图标：Element Plus 图标名（elIcon）或 SVG 图标名（svgIcon）
6. 子路由信息：路径、标题、权限配置、图标等

如果用户信息不完整，主动询问补全后再生成。

路由文件结构

路由配置在 src/router/index.ts 中。

其他路由文件（通常无需修改）：

• src/router/config.ts — 路由模式、动态路由开关、三级路由缓存配置、路径常量（DASHBOARD_PATH、REDIRECT_PATH）
• src/router/guard.ts — 导航守卫（登录验证、权限加载）
• src/router/helper.ts — 路由降级（三级路由转二级）
• src/router/whitelist.ts — 免登录白名单

侧边栏显示规则

理解这套规则是正确配置路由的关键：

• 1 个非隐藏叶子子路由 → 子路由直接显示在侧边栏（扁平化，不显示父级折叠）
• 多个非隐藏子路由 → 自动嵌套显示（父级作为折叠组）
• alwaysShow: true → 强制始终显示父级折叠，即使只有 1 个子路由

因此：

• 单页面模块不需要设置 alwaysShow，侧边栏会直接显示子路由
• 多页面模块不需要设置 alwaysShow，自动嵌套
• 只有 "单子路由但仍想显示为折叠组" 的特殊需求才用 alwaysShow: true
• 动态路由的特殊情况：如果角色或权限过滤可能导致只剩 1 个可见子路由，建议加 alwaysShow: true 防止意外扁平化

图标放置规则

场景	图标位置	原因
单子路由（扁平显示）	children[0].meta	子路由直接作为菜单项展示
多子路由（嵌套显示）	父级 meta	父级作为折叠组的标题

路由配置示例

单页面模块

侧边栏中显示为一个菜单项（不显示父级折叠），图标放在子路由：

{
  path: "/school",
  component: Layouts,
  redirect: "/school/list",
  children: [
    {
      path: "list",
      component: () => import("@/pages/school/index.vue"),
      name: "SchoolList",
      meta: {
        title: "学校管理",
        elIcon: "School"
      }
    }
  ]
}

多页面模块

侧边栏中显示为折叠组，图标放在父级：

{
  path: "/school",
  component: Layouts,
  redirect: "/school/list",
  name: "School",
  meta: {
    title: "学校管理",
    elIcon: "School"
  },
  children: [
    {
      path: "list",
      component: () => import("@/pages/school/list/index.vue"),
      name: "SchoolList",
      meta: { title: "学校列表" }
    },
    {
      path: "grade",
      component: () => import("@/pages/school/grade/index.vue"),
      name: "SchoolGrade",
      meta: { title: "年级管理" }
    }
  ]
}