tansci/.claude/skills/fa-route-generator/SKILL.md
xuewuerduo f468d532b1 feat: 初始化tansci资产管理项目
包含以下模块:
- antdv-next-admin: Vue 3 + TypeScript + Ant Design Vue 管理后台
  - 设备/许可证/配件/耗材 CRUD 管理页面
  - 基础数据管理 (分类/位置/制造商/型号/供应商)
  - 业务管理 (故障报修/盘点/资产分配/资产申请/交易记录)
  - 下拉选项改造 (ID输入框 → 搜索下拉选择)
  - 资产状态字典化 (接入sys_dict系统)
  - 界面文案优化 (设备→资产, 在库/在用/维修中/已报废)
  - 修复 console 警告 (popupClassName, 重复组件注册)
- our-itam: Java Spring Boot + magic-api 后端服务
- fantastic-admin: 前端底层框架 (pnpm monorepo)
- ciyo-itasset: CIYO 资产模块
- magic-script-skill: Claude Code skill 定义
- .claude: 对话历史记录

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-05-17 21:41:22 +08:00

3.6 KiB
Raw Blame History

name description
fa-route-generator 管理 Vue Router 路由配置,用于 Fantastic-admin 框架。当用户提到以下任何需求时必须使用此技能:新建页面需要加路由、详情页不想显示在菜单里、新增页和编辑页老是开两个标签、从列表跳详情返回后状态丢失、给菜单项加 NEW 标签或红点、路由需要权限控制、配置页面保活、修改路由 meta、添加面包屑配置。即使用户只是说"加个路由"或"新建了一个页面",也应触发此技能。

路由生成器

框架通过路由自动生成导航菜单,路由配置需要遵循特定约定。

第一步:确认工作区(必须阻塞等待用户回复)

本项目是 monorepo 架构,apps/ 目录下存放各应用。在执行任何文件读写操作之前,必须先确认目标应用:

  1. 执行 ls apps/ 列出所有可用应用
  2. 立即向用户提问,明确询问要在哪个应用中操作路由,并停止等待回复
  3. 收到用户明确回复后,才能继续后续步骤

严格规则:如果用户没有在请求中明确说明目标应用(例如"在 example 应用中"、"apps/core"),则必须提问,不得自行猜测或默认选择任何应用。

确认后,后续所有文件路径均以该应用目录为根,例如 apps/<app>/src/router/

前置检查

读取 apps/<app>/src/settings.ts,检查 app.routeBaseOn 的值:

  • 'frontend'(默认):可以继续
  • 'backend':路由由后端驱动,手动创建的路由文件会被忽略,告知用户此模式不支持前端路由文件生成

工作流程

场景 A: 创建新路由

1. 收集路由信息

向用户询问或确认:路由路径、页面标题、图标(可选)、是否多级路由、所属主导航分组。

2. 创建路由文件

apps/<app>/src/router/modules/ 下创建 <模块名>.ts

import type { RouteRecordRaw } from 'vue-router'

function Layout() {
  return import('@/layouts/index.vue')
}

const routes: RouteRecordRaw = {
  path: '/example',
  component: Layout,
  name: 'example',
  meta: {
    title: '示例',
    icon: 'i-ep:menu',
  },
  children: [
    {
      path: '',
      name: 'exampleIndex',
      component: () => import('@/views/example/index.vue'),
      meta: {
        title: '示例页面',
      },
    },
  ],
}

export default routes

3. 更新 routes.ts

apps/<app>/src/router/routes.ts 中添加 import 并注册到对应主导航分组的 children 数组。

场景 B: 修改现有路由

定位路由文件(在 apps/<app>/src/router/modules/ 下搜索),读取后按需修改 meta 属性。常见修改:

权限控制

meta: { auth: 'user:view' }  // 或数组 ['user:view', 'user:edit']

页面保活(从详情返回列表时保留列表状态):

// 列表页
meta: { keepAlive: ['productDetail'] }
// 详情页
meta: { menu: false, activeMenu: '/product', noKeepAlive: 'productList' }

隐藏菜单项

meta: { menu: false, activeMenu: '/parent/path' }

框架约定

  • 一级路由 path 必须以 / 开头,component 必须是 Layout
  • 子路由 path 不要以 / 开头
  • 多级路由的中间层级无需设置 component
  • 所有路由的 name 必须全局唯一

Meta 属性配置

详细属性说明见 references/route-meta.md,更多示例见 references/examples.md

常用属性:title(必需)、iconmenuauthkeepAliveactiveMenubreadcrumb