feat: 搭建后台管理框架
This commit is contained in:
Vicky committed
1 parent
6d28bab72b
commit
40546bfd01
238 files changed
+18160
-3837
No files matched your search
@@ -1,47 +0,0 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { useAuth } from '../stores/auth'
|
||||
import { useRbac } from '../stores/rbac'
|
||||
import { customMenus } from '../data/customMenus'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: '/login', name: 'login', component: () => import('@/views/common/LoginView.vue'), meta: { public: true } },
|
||||
{ path: '/', name: 'admin', component: () => import('@/layouts/AdminLayout.vue'), children: [
|
||||
{ path: '', name: 'dashboard', component: () => import('@/views/common/DashboardView.vue'), meta: { title: '工作台', permission: '查看短剧列表' } },
|
||||
{ path: 'dramas', name: 'dramas', component: () => import('@/views/contentManagement/DramaManagementView.vue'), meta: { title: '短剧管理', permission: '查看短剧列表' } },
|
||||
{ path: 'episodes', name: 'episodes', component: () => import('@/views/contentManagement/EpisodeManagementView.vue'), meta: { title: '剧集管理', permission: '查看剧集列表' } },
|
||||
{ path: 'access', name: 'access', component: () => import('@/views/permission/RoleManagementView.vue'), meta: { title: '角色权限配置', permission: '角色与权限配置' } },
|
||||
{ path: 'admin-users', name: 'admin-users', component: () => import('@/views/userManagement/AdminUsersView.vue'), meta: { title: '管理员用户列表', permission: '管理员用户列表' } },
|
||||
{ path: 'menus', name: 'menus', component: () => import('@/views/permission/MenuManagementView.vue'), meta: { title: '菜单管理', permission: '菜单管理' } },
|
||||
{ path: 'role-categories', name: 'role-categories', component: () => import('@/views/permission/RoleCategoriesView.vue'), meta: { title: '角色分类', permission: '角色分类管理' } },
|
||||
{ path: 'settings', name: 'settings', component: () => import('@/views/systemManagement/SettingsView.vue'), meta: { title: '系统设置', permission: '角色与权限配置' } },
|
||||
] },
|
||||
{ path: '/:pathMatch(.*)*', redirect: '/' },
|
||||
],
|
||||
})
|
||||
|
||||
export function registerCustomMenu(menu) {
|
||||
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('admin', {
|
||||
path,
|
||||
name,
|
||||
component: () => import('@/views/permission/CustomMenuView.vue'),
|
||||
meta: { title: menu.title, permission: menu.permission, menuKey: menu.key },
|
||||
})
|
||||
}
|
||||
|
||||
customMenus.forEach(registerCustomMenu)
|
||||
|
||||
router.beforeEach(to => {
|
||||
const { isAuthenticated } = useAuth()
|
||||
const { can } = useRbac()
|
||||
if (!to.meta.public && !isAuthenticated.value) return { name: 'login' }
|
||||
if (to.name === 'login' && isAuthenticated.value) return { name: 'dashboard' }
|
||||
if (to.meta.permission && !can(to.meta.permission)) return { name: 'dashboard' }
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -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
|
||||
Reference in new issue
Block a user