create-koa-boot 1.0.0

package/templates/example/frontend/src/layout/index.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="layout-container">
+    <!-- 侧边栏 -->
+    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar">
+      <div class="logo" :style="{ width: isCollapse ? '64px' : '200px' }">
+        <img src="../assets/koa-boot-2.png" alt="">
+      </div>
+      <el-menu
+        :default-active="activeMenu"
+        class="el-menu-vertical-demo"
+        :collapse="isCollapse"
+        :background-color="'#001529'"
+        :text-color="'#fff'"
+        :active-text-color="'#409EFF'"
+        router
+      >
+        <template v-for="item in menuList" :key="item.path">
+          <el-menu-item v-if="!item.children" :index="item.path">
+            <component :is="item.meta.icon" class="el-icon" />
+            <template #title>{{ item.meta.title }}</template>
+          </el-menu-item>
+          <el-sub-menu v-else :index="item.path">
+            <template #title>
+              <component :is="item.meta.icon" class="el-icon" />
+              <span>{{ item.meta.title }}</span>
+            </template>
+            <el-menu-item
+              v-for="child in item.children"
+              :key="child.path"
+              :index="child.path"
+            >
+              {{ child.meta.title }}
+            </el-menu-item>
+          </el-sub-menu>
+        </template>
+      </el-menu>
+    </el-aside>
+    
+    <!-- 主内容区域 -->
+    <el-container class="main-container">
+      <!-- 顶部导航栏 -->
+      <el-header class="header">
+        <el-button
+          link
+          class="collapse-btn"
+          @click="isCollapse = !isCollapse"
+        >
+          <el-icon><Menu /></el-icon>
+
+          <el-breadcrumb separator=">" class="breadcrumb">
+            <el-breadcrumb-item :to="'/dashboard'">首页</el-breadcrumb-item>
+            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+              {{ item.meta.title }}
+            </el-breadcrumb-item>
+          </el-breadcrumb>
+
+        </el-button>
+        <div class="header-right">
+          <MessageCenter />
+          <el-dropdown>
+            <el-button link class="user-btn">
+              <el-avatar :size="32" :src="userStore.userInfo?.avatar || ''">
+                {{ userStore.userInfo?.name?.[0] || 'U' }}
+              </el-avatar>
+              <span class="user-name">{{ userStore.userInfo?.name || '用户' }}</span>
+              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item @click="handleUserInfo">
+                  <el-icon><User /></el-icon>
+                  <span>个人信息</span>
+                </el-dropdown-item>
+                <el-dropdown-item @click="handleSetting">
+                  <el-icon><Setting /></el-icon>
+                  <span>账号设置</span>
+                </el-dropdown-item>
+                <el-dropdown-item divided @click="handleLogout">
+                  <el-icon><SwitchButton /></el-icon>
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-header>
+      
+      <!-- 内容区域 -->
+      <el-main class="content">
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </el-main>
+    </el-container>
+
+    <!-- AI 业务助手（右侧悬浮） -->
+    <AiAssistant />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useUserStore, type MenuNode } from '../stores/user'
+import { resetRoutes } from '../router'
+import MessageCenter from '../components/MessageCenter.vue'
+import AiAssistant from '../components/AiAssistant.vue'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+
+const isCollapse = ref(false)
+
+// 计算当前激活的菜单
+const activeMenu = computed(() => route.path)
+
+// 计算面包屑列表
+const breadcrumbList = computed(() => route.matched.slice(1))
+
+/** 将后端 MenuNode 转换为 Element Plus Menu 组件所需的格式 */
+function toMenuItems(nodes: MenuNode[]): any[] {
+  return nodes
+    .filter(n => n.visible !== false && n.type !== 'button')
+    .sort((a, b) => a.sort - b.sort)
+    .map(node => ({
+      path: node.path || '',
+      meta: {
+        title: node.name,
+        icon: node.icon || 'Menu',
+        permission: node.code
+      },
+      children: node.children && node.children.length > 0
+        ? toMenuItems(node.children)
+        : undefined
+    }))
+}
+
+/** 兜底菜单：数据库无数据时（首次安装），只显示首页 */
+const FALLBACK_MENU = [
+  {
+    path: '/dashboard',
+    meta: { title: '首页', icon: 'House', permission: 'dashboard' }
+  }
+]
+
+/** 菜单列表：优先使用后端动态菜单，空数据时使用兜底菜单 */
+const menuList = computed(() => {
+  if (userStore.menus.length === 0) {
+    return FALLBACK_MENU
+  }
+  const converted = toMenuItems(userStore.menus)
+  // 确保首页始终存在
+  if (!converted.some(m => m.path === '/dashboard')) {
+    converted.unshift({
+      path: '/dashboard',
+      meta: { title: '首页', icon: 'House', permission: 'dashboard' }
+    })
+  }
+  return converted
+})
+
+// 处理用户信息
+const handleUserInfo = () => {
+  router.push('/system/user/profile')
+}
+
+// 处理设置
+const handleSetting = () => {
+  router.push('/system/user/setting')
+}
+
+// 处理登出
+const handleLogout = async () => {
+  try {
+    // 清除动态路由
+    resetRoutes()
+    await userStore.logout()
+    router.push('/login')
+  } catch (error) {
+    console.error('登出失败:', error)
+  }
+}
+
+onMounted(() => {
+  // 无需要初始化的数据（消息中心组件内部自管轮询）
+})
+</script>
+
+<style scoped>
+.layout-container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sidebar {
+  background-color: #001529;
+  overflow-y: auto;
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #001529;
+  border-bottom: 1px solid #002140;
+  margin-bottom: 20px;
+}
+
+.logo img {
+  height: 40px;
+}
+
+.el-menu {
+  border-right: none;
+}
+
+.main-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+.header {
+  height: 60px;
+  background-color: #fff;
+  border-bottom: 1px solid #e4e7ed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+}
+
+.collapse-btn {
+  font-size: 18px;
+  margin-right: 20px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+}
+
+.user-btn {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+}
+
+.user-name {
+  margin-left: 8px;
+  margin-right: 4px;
+}
+
+.notification-badge {
+  margin-right: 20px;
+}
+
+.content {
+  padding: 20px;
+  background-color: #f5f7fa;
+  overflow-y: auto;
+  height: calc(100vh - 60px);
+}
+
+.breadcrumb {
+  padding-left: 20px;
+  padding-top: 2px;
+}
+
+/* 动画效果 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 响应式布局 */
+@media (max-width: 768px) {
+  .sidebar {
+    width: 64px !important;
+  }
+  
+  .el-menu {
+    collapse: true;
+  }
+  
+  .content {
+    padding: 10px;
+  }
+}
+</style>

package/templates/example/frontend/src/main.ts

@@ -0,0 +1,29 @@
+import { createApp } from 'vue'
+import './styles/index.scss'
+import App from './App.vue'
+import router from './router'
+import pinia from './stores'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { permissionDirective, roleDirective, vHasPerm, vHasRole } from './directives/permission'
+
+const app = createApp(App)
+
+// 注册Element Plus图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
+// 注册权限指令
+app.directive('permission', permissionDirective)
+app.directive('role', roleDirective)
+app.directive('has-perm', vHasPerm)
+app.directive('has-role', vHasRole)
+
+app.use(ElementPlus, { locale: zhCn })
+app.use(router)
+app.use(pinia)
+
+app.mount('#app')

package/templates/example/frontend/src/router/componentMap.ts

@@ -0,0 +1,136 @@
+/**
+ * 视图组件映射表
+ *
+ * 使用 Vite 的 import.meta.glob 自动发现所有 views/**\/index.vue 组件，
+ * 将后端菜单表 sys_menus.component 字段（如 views/system/user/index.vue）
+ * 解析为实际的动态导入函数。
+ */
+
+/** 所有 views 目录下的 index.vue 组件（key 相对于本文件） */
+const viewModules: Record<string, () => Promise<any>> = import.meta.glob(
+  '../views/**/index.vue'
+)
+
+/** 路径解析缓存 */
+const resolveCache = new Map<string, (() => Promise<any>) | null>()
+
+/**
+ * 生成路径的复数和单数变体列表用于模糊匹配
+ *
+ * 例如 "views/system/users/index.vue" 会生成：
+ *   - views/system/users/index.vue (原路径)
+ *   - views/system/user/index.vue  (去 s)
+ *   - views/system/usere/index.vue (ies→y 变体备选)
+ */
+function generatePathVariants(componentPath: string): string[] {
+  const normalized = componentPath.replace(/\\/g, '/')
+  const variants: string[] = [normalized]
+
+  // 提取路径中的目录部分（最后一个目录名可能带复数）
+  const lastSlash = normalized.lastIndexOf('/')
+  if (lastSlash <= 0) return variants
+
+  const dirPath = normalized.substring(0, lastSlash)
+  const lastDirStart = dirPath.lastIndexOf('/')
+  const lastDir = dirPath.substring(lastDirStart + 1)
+
+  // 常见复数 → 单数转换规则
+  const singulars: string[] = []
+
+  // 规则1: ies → y (如 "histories" → "history")
+  if (lastDir.endsWith('ies') && lastDir.length > 3) {
+    singulars.push(lastDir.slice(0, -3) + 'y')
+  }
+  // 规则2: ses/xes/zes/ches/shes → 去末尾2个字符 (如 "boxes" → "box", "batches" → "batch")
+  if (
+    (lastDir.endsWith('ses') || lastDir.endsWith('xes') ||
+     lastDir.endsWith('zes') || lastDir.endsWith('ches') ||
+     lastDir.endsWith('shes')) && lastDir.length > 3
+  ) {
+    singulars.push(lastDir.slice(0, -2))
+  }
+  // 规则3: 简单去末尾 s（最常见的复数形式）
+  if (lastDir.endsWith('s') && !lastDir.endsWith('ss') && lastDir.length > 1) {
+    singulars.push(lastDir.slice(0, -1))
+  }
+
+  // 为每个单数变体生成完整路径
+  for (const singular of singulars) {
+    if (singular !== lastDir) {
+      const newDirPath = dirPath.substring(0, lastDirStart + 1) + singular
+      variants.push(newDirPath + normalized.substring(lastSlash))
+    }
+  }
+
+  return variants
+}
+
+/**
+ * 尝试多个路径变体，找到第一个匹配的 glob key
+ */
+function tryGlobMatch(globKey: string): (() => Promise<any>) | null {
+  // 1) 精确匹配
+  if (viewModules[globKey]) {
+    return viewModules[globKey]
+  }
+
+  // 2) 大小写不敏感匹配
+  const lowerTarget = globKey.toLowerCase()
+  for (const [key, loader] of Object.entries(viewModules)) {
+    if (key.toLowerCase() === lowerTarget) {
+      return loader
+    }
+  }
+
+  return null
+}
+
+/**
+ * 根据菜单 component 路径解析对应的 Vue 组件导入函数
+ *
+ * @param componentPath - 数据库存储的组件路径，如 "views/system/user/index.vue"
+ * @returns 组件动态导入函数，未找到时返回 null
+ */
+export function resolveComponent(
+  componentPath: string | null | undefined
+): (() => Promise<any>) | null {
+  if (!componentPath) return null
+
+  const normalized = componentPath.replace(/\\/g, '/')
+
+  // 检查缓存
+  if (resolveCache.has(normalized)) {
+    return resolveCache.get(normalized)!
+  }
+
+  // 生成路径变体（包含单数/复数变换）
+  const variants = generatePathVariants(normalized)
+
+  for (const variant of variants) {
+    const globKey = `../${variant}`
+    const match = tryGlobMatch(globKey)
+    if (match) {
+      // 缓存：使用数据库中的原始路径作为 key
+      resolveCache.set(normalized, match)
+      return match
+    }
+  }
+
+  // 未找到
+  console.warn(
+    `[componentMap] 未找到组件: ${componentPath}`,
+    `已尝试变体: ${variants.map(v => `../${v}`).join(', ')}`,
+    `可用组件: ${Object.keys(viewModules).length} 个`
+  )
+  resolveCache.set(normalized, null)
+  return null
+}
+
+/**
+ * 获取所有已知的组件路径（用于调试）
+ */
+export function getAvailableComponents(): string[] {
+  return Object.keys(viewModules).map((k) =>
+    k.replace(/^\.\.\//, '')
+  )
+}

package/templates/example/frontend/src/router/generateRoutes.ts

@@ -0,0 +1,123 @@
+/**
+ * 动态路由生成
+ *
+ * 根据后端返回的菜单树（MenuNode[]）生成 Vue Router 的 RouteRecordRaw[]。
+ *
+ * 规则：
+ * 1. type="directory" 且无 component → 使用 ParentView（只渲染 <router-view>）
+ * 2. type="menu" 且有 component → 通过 componentMap 解析为实际组件
+ * 3. type="menu" 但组件未找到 → 使用 ModulePlaceholder 占位（不跳过，仍加入父级 children）
+ * 4. 同一层级按 sort 升序排列
+ * 5. 不可见（visible=false）的菜单跳过
+ */
+
+import type { RouteRecordRaw } from 'vue-router'
+import type { MenuNode } from '../stores/user'
+import { resolveComponent } from './componentMap'
+
+/** 兜底：当 directory 无 component 时使用 ParentView（渲染子路由） */
+function getParentView(): () => Promise<any> {
+  return () => import('../views/ParentView.vue')
+}
+
+/** 兜底：当菜单组件未找到时使用占位页面 */
+function getPlaceholder(): () => Promise<any> {
+  return () => import('../views/ModulePlaceholder.vue')
+}
+
+/**
+ * 递归将菜单节点树转换为路由记录数组
+ */
+function menusToRoutes(menus: MenuNode[], depth: number = 0): RouteRecordRaw[] {
+  // 过滤不可见菜单 + 排除 button 类型（按钮仅用于权限控制，不参与路由/菜单渲染）
+  const visible = menus
+    .filter((m) => m.visible !== false && m.type !== 'button')
+    .sort((a, b) => a.sort - b.sort)
+
+  const routes: RouteRecordRaw[] = []
+
+  for (const menu of visible) {
+    const childRoutes =
+      menu.children && menu.children.length > 0
+        ? menusToRoutes(menu.children, depth + 1)
+        : []
+
+    const hasChildren = childRoutes.length > 0
+
+    if (menu.type === 'directory') {
+      // 目录节点：生成一个带 children 的路由分组
+      routes.push({
+        path: menu.path || '',
+        name: menu.code,
+        component: resolveComponent(menu.component) || getParentView(),
+        redirect: hasChildren ? childRoutes[0]!.path : undefined,
+        children: hasChildren ? childRoutes : [],
+        meta: {
+          title: menu.name,
+          icon: menu.icon,
+          permission: menu.code,
+        },
+      } as RouteRecordRaw)
+    } else {
+      // 叶子菜单节点
+      let component = resolveComponent(menu.component)
+
+      if (!component) {
+        // 组件未找到：使用占位页面，不跳过，确保父级 children 不为空
+        console.warn(
+          `[generateRoutes] 菜单 "${menu.name}" (${menu.code}) ` +
+          `组件路径 "${menu.component}" 未匹配到实际文件，使用占位页面`
+        )
+        component = getPlaceholder()
+      }
+
+      routes.push({
+        path: menu.path || '',
+        name: menu.code,
+        component,
+        children: hasChildren ? childRoutes : [],
+        meta: {
+          title: menu.name,
+          icon: menu.icon,
+          permission: menu.code,
+        },
+      } as RouteRecordRaw)
+    }
+  }
+
+  return routes
+}
+
+/**
+ * 从菜单树生成完整路由记录（用于 addRoute 动态注册）
+ *
+ * @param menus - 后端返回的菜单树
+ * @returns 可注册到 Layout.children 的路由记录数组
+ */
+export function generateRoutes(menus: MenuNode[]): RouteRecordRaw[] {
+  if (!menus || menus.length === 0) {
+    console.warn('[generateRoutes] 菜单数据为空，只保留首页路由')
+    return []
+  }
+
+  const routes = menusToRoutes(menus)
+
+  // 递归统计路由总数（含嵌套）
+  function countRoutes(rs: RouteRecordRaw[]): number {
+    let count = 0
+    for (const r of rs) {
+      count++
+      if (r.children && r.children.length > 0) {
+        count += countRoutes(r.children)
+      }
+    }
+    return count
+  }
+
+  console.log(
+    `[generateRoutes] 生成 ${routes.length} 个顶级路由（共 ${countRoutes(routes)} 个路由）:`,
+    routes.map((r) => `${String(r.path)} [${(r.children || []).length} 子路由] → ${String(r.name)}`)
+  )
+
+  return routes
+}