feat: 搭建后台管理框架

src/router/index.ts

@@ -0,0 +1,217 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
+import type { App } from 'vue'
+import { Layout } from '@/utils/routerHelper'
+import { customMenus } from '@/data/customMenus'
+
+export const constantRouterMap: AppRouteRecordRaw[] = [
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard/index',
+    name: 'Root',
+    meta: {
+      hidden: true
+    }
+  },
+  {
+    path: '/redirect',
+    component: Layout,
+    name: 'RedirectParent',
+    children: [
+      {
+        path: '/redirect/:path(.*)',
+        name: 'Redirect',
+        component: () => import('@/views/Redirect/Redirect.vue'),
+        meta: {}
+      }
+    ],
+    meta: {
+      hidden: true,
+      noTagsView: true
+    }
+  },
+  {
+    path: '/login',
+    component: () => import('@/views/Login/Login.vue'),
+    name: 'Login',
+    meta: {
+      hidden: true,
+      title: '登录',
+      noTagsView: true
+    }
+  },
+  {
+    path: '/404',
+    component: () => import('@/views/Error/404.vue'),
+    name: 'NoFind',
+    meta: {
+      hidden: true,
+      title: '404',
+      noTagsView: true
+    }
+  }
+]
+
+export const asyncRouterMap: AppRouteRecordRaw[] = [
+  {
+    path: '/dashboard',
+    component: Layout,
+    redirect: '/dashboard/index',
+    name: 'Dashboard',
+    meta: {
+      title: '工作台',
+      icon: 'ant-design:dashboard-filled'
+    },
+    children: [
+      {
+        path: 'index',
+        name: 'dashboard',
+        component: () => import('@/views/common/DashboardView.vue'),
+        meta: {
+          title: '工作台',
+          icon: 'ant-design:dashboard-filled',
+          affix: true
+        }
+      }
+    ]
+  },
+  {
+    path: '/content',
+    component: Layout,
+    redirect: '/content/dramas',
+    name: 'Content',
+    meta: {
+      title: '内容管理',
+      icon: 'ep:video-camera',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'dramas',
+        name: 'dramas',
+        component: () => import('@/views/contentManagement/DramaManagementView.vue'),
+        meta: {
+          title: '短剧管理'
+        }
+      },
+      {
+        path: 'episodes',
+        name: 'episodes',
+        component: () => import('@/views/contentManagement/EpisodeManagementView.vue'),
+        meta: {
+          title: '剧集管理'
+        }
+      }
+    ]
+  },
+  {
+    path: '/system',
+    component: Layout,
+    redirect: '/system/access',
+    name: 'System',
+    meta: {
+      title: '后台管理',
+      icon: 'ep:setting',
+      alwaysShow: true
+    },
+    children: [
+      {
+        path: 'access',
+        name: 'access',
+        component: () => import('@/views/permission/RoleManagementView.vue'),
+        meta: {
+          title: '角色权限配置'
+        }
+      },
+      {
+        path: 'admin-users',
+        name: 'admin-users',
+        component: () => import('@/views/userManagement/AdminUsersView.vue'),
+        meta: {
+          title: '管理员用户列表'
+        }
+      },
+      {
+        path: 'menus',
+        name: 'menus',
+        component: () => import('@/views/permission/MenuManagementView.vue'),
+        meta: {
+          title: '菜单管理'
+        }
+      },
+      {
+        path: 'role-categories',
+        name: 'role-categories',
+        component: () => import('@/views/permission/RoleCategoriesView.vue'),
+        meta: {
+          title: '角色分类'
+        }
+      },
+      {
+        path: 'settings',
+        name: 'settings',
+        component: () => import('@/views/systemManagement/SettingsView.vue'),
+        meta: {
+          title: '系统设置'
+        }
+      }
+    ]
+  }
+]
+
+export function registerCustomMenu(menu: {
+  key: string
+  title: string
+  route?: string
+  type?: string
+}) {
+  const name = `custom-menu-${menu.key}`
+  if (router.hasRoute(name)) return
+  if (menu.type === '按钮') return
+  const path = `/${String(menu.route || `custom/${menu.key}`).replace(/^\/+/, '')}`
+  router.addRoute({
+    path,
+    name,
+    component: Layout,
+    meta: {
+      title: menu.title,
+      hidden: true
+    },
+    children: [
+      {
+        path: '',
+        name: `${name}-page`,
+        component: () => import('@/views/permission/CustomMenuView.vue'),
+        meta: {
+          title: menu.title
+        }
+      }
+    ]
+  })
+}
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  strict: true,
+  routes: constantRouterMap as RouteRecordRaw[],
+  scrollBehavior: () => ({ left: 0, top: 0 })
+})
+
+customMenus.forEach(registerCustomMenu)
+
+export const resetRouter = (): void => {
+  const resetWhiteNameList = ['Redirect', 'RedirectParent', 'Login', 'NoFind', 'Root']
+  router.getRoutes().forEach((route) => {
+    const { name } = route
+    if (name && !resetWhiteNameList.includes(name as string)) {
+      router.hasRoute(name) && router.removeRoute(name)
+    }
+  })
+}
+
+export const setupRouter = (app: App<Element>) => {
+  app.use(router)
+}
+
+export default router