共享组件启动

2025-12-06 17:04:49 +08:00
parent 39579ff75f
commit fd02caf921
14 changed files with 296 additions and 4 deletions
--- a/urbanLifelineWeb/packages/shared/src/router/index.ts
+++ b/urbanLifelineWeb/packages/shared/src/router/index.ts
@@ -0,0 +1,121 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import { defineAsyncComponent } from 'vue'
+
+// 扩展 ImportMeta 接口
+declare global {
+  interface ImportMeta {
+    glob: (pattern: string) => Record<string, () => Promise<any>>
+  }
+}
+
+// 定义路由项类型
+interface RouteItem {
+  path: string
+  name: string
+}
+
+// 布局组件
+const DefaultLayout = defineAsyncComponent(
+  () => import('../layouts/DefaultLayout.vue')
+)
+
+// 首页组件
+const Home = {
+  props: {
+    routes: {
+      type: Array as () => RouteItem[],
+      required: true
+    }
+  },
+  template: `
+    <div>
+      <h2>Welcome</h2>
+      <p>This is the shared components demo home.</p>
+      <ul>
+        <li v-for="route in routes" :key="route.path">
+          <router-link :to="route.path">
+            {{ route.path === '/' ? 'Home' : route.path.slice(1) }}
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  `
+}
+
+// 生成路由配置
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: DefaultLayout,
+    children: [
+      { 
+        path: '', 
+        component: Home,
+        props: {
+          routes: [] as RouteItem[]
+        }
+      }
+    ]
+  }
+]
+
+// 自动导入所有以 Test.vue 结尾的组件
+const testComponents = import.meta.glob('../components/**/*Test.vue')
+
+// 为每个测试组件创建路由
+Object.entries(testComponents).forEach(([path, component]) => {
+  // 从路径中提取路由路径
+  // 例如: ../components/fileupload/FileUploadTest.vue -> /fileupload
+  const routePath = path
+    .replace('../components/', '/') // 移除相对路径
+    .replace(/\/\w+Test\.vue$/, '') // 移除 Test.vue 部分
+    .toLowerCase() // 统一小写
+
+  const routeName = routePath.slice(1) || 'home'
+  const routeConfig: RouteRecordRaw = {
+    path: routePath,
+    name: routeName,
+    component: DefaultLayout,
+    children: [
+      {
+        path: '',
+        name: `${routeName}-content`,
+        component: defineAsyncComponent(component as any),
+        meta: { title: `${routeName} Demo` }
+      }
+    ]
+  }
+
+  // 添加路由
+  if (routePath === '/') {
+    // 如果是根路径，合并到现有路由
+    const rootRoute = routes[0]
+    if (rootRoute.children) {
+      rootRoute.children.push(...routeConfig.children!)
+    }
+  } else {
+    routes.push(routeConfig)
+  }
+
+  // 将路由添加到首页的 props 中
+  const homeRoute = routes[0]
+  if (homeRoute.props && typeof homeRoute.props === 'object' && !Array.isArray(homeRoute.props)) {
+    const props = homeRoute.props as { routes: RouteItem[] }
+    props.routes.push({
+      path: routePath,
+      name: routeName
+    })
+  }
+})
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+// 设置页面标题
+router.beforeEach((to) => {
+  document.title = (to.meta.title as string) || 'Component Demo'
+})
+
+export default router