mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-06 03:57:54 +08:00
fix: remove meta. perfix
This commit is contained in:
chansee97
parent
bf5445b6e4
commit
39d185b132
@ -12,7 +12,7 @@ const value = defineModel<LayoutMode>('value', { required: true })
|
|||||||
:class="{
|
:class="{
|
||||||
'outline outline-2': value === 'leftMenu',
|
'outline outline-2': value === 'leftMenu',
|
||||||
}"
|
}"
|
||||||
class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2)"
|
class="grid grid-cols-[20%_1fr] grid-rows-[20%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
|
||||||
@click="value = 'leftMenu'"
|
@click="value = 'leftMenu'"
|
||||||
>
|
>
|
||||||
<div class="bg-[var(--primary-color)] row-span-2" />
|
<div class="bg-[var(--primary-color)] row-span-2" />
|
||||||
@ -29,7 +29,7 @@ const value = defineModel<LayoutMode>('value', { required: true })
|
|||||||
:class="{
|
:class="{
|
||||||
'outline outline-2': value === 'topMenu',
|
'outline outline-2': value === 'topMenu',
|
||||||
}"
|
}"
|
||||||
class="grid grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2)"
|
class="grid grid-rows-[30%_1fr] outline-[var(--primary-color)] hover:(outline outline-2) cursor-pointer"
|
||||||
@click="value = 'topMenu'"
|
@click="value = 'topMenu'"
|
||||||
>
|
>
|
||||||
<div class="bg-[var(--primary-color)]" />
|
<div class="bg-[var(--primary-color)]" />
|
||||||
|
|||||||
18
src/layouts/components/common/Setting.vue
Normal file
18
src/layouts/components/common/Setting.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useAppStore } from '@/store'
|
||||||
|
|
||||||
|
const appStore = useAppStore()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-tooltip placement="bottom" trigger="hover">
|
||||||
|
<template #trigger>
|
||||||
|
<CommonWrapper @click="appStore.showSetting = !appStore.showSetting">
|
||||||
|
<div>
|
||||||
|
<icon-park-outline-setting-two />
|
||||||
|
</div>
|
||||||
|
</CommonWrapper>
|
||||||
|
</template>
|
||||||
|
<span>{{ $t('app.setting') }}</span>
|
||||||
|
</n-tooltip>
|
||||||
|
</template>
|
||||||
143
src/layouts/components/common/SettingDrawer.vue
Normal file
143
src/layouts/components/common/SettingDrawer.vue
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import LayoutSelector from './LayoutSelector.vue'
|
||||||
|
import { useAppStore } from '@/store'
|
||||||
|
|
||||||
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const transitionSelectorOptions = computed(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: t('app.transitionNull'),
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('app.transitionFadeSlide'),
|
||||||
|
value: 'fade-slide',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('app.transitionFadeBottom'),
|
||||||
|
value: 'fade-bottom',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('app.transitionFadeScale'),
|
||||||
|
value: 'fade-scale',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('app.transitionZoomFade'),
|
||||||
|
value: 'zoom-fade',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('app.transitionZoomOut'),
|
||||||
|
value: 'zoom-out',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t('app.transitionSoft'),
|
||||||
|
value: 'fade',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
const palette = [
|
||||||
|
'#ffb8b8',
|
||||||
|
'#d03050',
|
||||||
|
'#F0A020',
|
||||||
|
'#fff200',
|
||||||
|
'#ffda79',
|
||||||
|
'#18A058',
|
||||||
|
'#006266',
|
||||||
|
'#22a6b3',
|
||||||
|
'#18dcff',
|
||||||
|
'#2080F0',
|
||||||
|
'#c56cf0',
|
||||||
|
'#be2edd',
|
||||||
|
'#706fd3',
|
||||||
|
'#4834d4',
|
||||||
|
'#130f40',
|
||||||
|
'#4b4b4b',
|
||||||
|
]
|
||||||
|
|
||||||
|
function resetSetting() {
|
||||||
|
window.$dialog.warning({
|
||||||
|
title: t('app.resetSettingTitle'),
|
||||||
|
content: t('app.resetSettingContent'),
|
||||||
|
positiveText: t('common.confirm'),
|
||||||
|
negativeText: t('common.cancel'),
|
||||||
|
onPositiveClick: () => {
|
||||||
|
appStore.resetAlltheme()
|
||||||
|
window.$message.success(t('app.resetSettingMeaasge'))
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<n-drawer v-model:show="appStore.showSetting" :width="360">
|
||||||
|
<n-drawer-content :title="t('app.systemSetting')" closable>
|
||||||
|
<n-space vertical>
|
||||||
|
<n-divider>{{ $t('app.layoutSetting') }}</n-divider>
|
||||||
|
<LayoutSelector v-model:value="appStore.layoutMode" />
|
||||||
|
<n-divider>{{ $t('app.themeSetting') }}</n-divider>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.colorWeak') }}
|
||||||
|
<n-switch :value="appStore.colorWeak" @update:value="appStore.toggleColorWeak" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.blackAndWhite') }}
|
||||||
|
<n-switch :value="appStore.grayMode" @update:value="appStore.toggleGrayMode" />
|
||||||
|
</n-space>
|
||||||
|
<n-space align="center" justify="space-between">
|
||||||
|
{{ $t('app.themeColor') }}
|
||||||
|
<n-color-picker
|
||||||
|
v-model:value="appStore.primaryColor" class="w-10em" :swatches="palette"
|
||||||
|
@update:value="appStore.setPrimaryColor"
|
||||||
|
/>
|
||||||
|
</n-space>
|
||||||
|
<n-space align="center" justify="space-between">
|
||||||
|
{{ $t('app.pageTransition') }}
|
||||||
|
<n-select
|
||||||
|
v-model:value="appStore.transitionAnimation" class="w-10em"
|
||||||
|
:options="transitionSelectorOptions" @update:value="appStore.reloadPage"
|
||||||
|
/>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
|
<n-divider>{{ $t('app.interfaceDisplay') }}</n-divider>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.logoDisplay') }}
|
||||||
|
<n-switch v-model:value="appStore.showLogo" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.topProgress') }}
|
||||||
|
<n-switch v-model:value="appStore.showProgress" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.multitab') }}
|
||||||
|
<n-switch v-model:value="appStore.showTabs" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.bottomCopyright') }}
|
||||||
|
<n-switch v-model:value="appStore.showFooter" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.breadcrumb') }}
|
||||||
|
<n-switch v-model:value="appStore.showBreadcrumb" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.BreadcrumbIcon') }}
|
||||||
|
<n-switch v-model:value="appStore.showBreadcrumbIcon" />
|
||||||
|
</n-space>
|
||||||
|
<n-space justify="space-between">
|
||||||
|
{{ $t('app.watermake') }}
|
||||||
|
<n-switch v-model:value="appStore.showWatermark" />
|
||||||
|
</n-space>
|
||||||
|
</n-space>
|
||||||
|
|
||||||
|
<template #footer>
|
||||||
|
<n-button type="error" @click="resetSetting">
|
||||||
|
{{ $t('app.reset') }}
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
</n-drawer-content>
|
||||||
|
</n-drawer>
|
||||||
|
</template>
|
||||||
@ -38,15 +38,15 @@ const options = computed(() => {
|
|||||||
|
|
||||||
return routeStore.rowRoutes.filter((item) => {
|
return routeStore.rowRoutes.filter((item) => {
|
||||||
const conditions = [
|
const conditions = [
|
||||||
t(`route.${String(item.name)}`, item['meta.title'] || item.name)?.includes(searchValue.value),
|
t(`route.${String(item.name)}`, item.title || item.name)?.includes(searchValue.value),
|
||||||
item.path?.includes(searchValue.value),
|
item.path?.includes(searchValue.value),
|
||||||
]
|
]
|
||||||
return conditions.some(condition => !item['meta.hide'] && condition)
|
return conditions.some(condition => !item.hide && condition)
|
||||||
}).map((item) => {
|
}).map((item) => {
|
||||||
return {
|
return {
|
||||||
label: t(`route.${String(item.name)}`, item['meta.title'] || item.name),
|
label: t(`route.${String(item.name)}`, item.title || item.name),
|
||||||
value: item.path,
|
value: item.path,
|
||||||
icon: item['meta.icon'],
|
icon: item.icon,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@ -1,158 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import LayoutSelector from '../common/LayoutSelector.vue'
|
|
||||||
import { useAppStore } from '@/store'
|
|
||||||
|
|
||||||
const appStore = useAppStore()
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const drawerActive = ref(false)
|
|
||||||
function openSetting() {
|
|
||||||
drawerActive.value = !drawerActive.value
|
|
||||||
}
|
|
||||||
|
|
||||||
const transitionSelectorOptions = computed(() => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: t('app.transitionNull'),
|
|
||||||
value: '',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.transitionFadeSlide'),
|
|
||||||
value: 'fade-slide',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.transitionFadeBottom'),
|
|
||||||
value: 'fade-bottom',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.transitionFadeScale'),
|
|
||||||
value: 'fade-scale',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.transitionZoomFade'),
|
|
||||||
value: 'zoom-fade',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.transitionZoomOut'),
|
|
||||||
value: 'zoom-out',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: t('app.transitionSoft'),
|
|
||||||
value: 'fade',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
const palette = [
|
|
||||||
'#ffb8b8',
|
|
||||||
'#d03050',
|
|
||||||
'#F0A020',
|
|
||||||
'#fff200',
|
|
||||||
'#ffda79',
|
|
||||||
'#18A058',
|
|
||||||
'#006266',
|
|
||||||
'#22a6b3',
|
|
||||||
'#18dcff',
|
|
||||||
'#2080F0',
|
|
||||||
'#c56cf0',
|
|
||||||
'#be2edd',
|
|
||||||
'#706fd3',
|
|
||||||
'#4834d4',
|
|
||||||
'#130f40',
|
|
||||||
'#4b4b4b',
|
|
||||||
]
|
|
||||||
|
|
||||||
function resetSetting() {
|
|
||||||
window.$dialog.warning({
|
|
||||||
title: t('app.resetSettingTitle'),
|
|
||||||
content: t('app.resetSettingContent'),
|
|
||||||
positiveText: t('common.confirm'),
|
|
||||||
negativeText: t('common.cancel'),
|
|
||||||
onPositiveClick: () => {
|
|
||||||
appStore.resetAlltheme()
|
|
||||||
window.$message.success(t('app.resetSettingMeaasge'))
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<n-tooltip placement="bottom" trigger="hover">
|
|
||||||
<template #trigger>
|
|
||||||
<CommonWrapper @click="openSetting">
|
|
||||||
<div>
|
|
||||||
<icon-park-outline-setting-two />
|
|
||||||
<n-drawer v-model:show="drawerActive" :width="360">
|
|
||||||
<n-drawer-content :title="t('app.systemSetting')" closable>
|
|
||||||
<n-space vertical>
|
|
||||||
<n-divider>{{ $t('app.layoutSetting') }}</n-divider>
|
|
||||||
<LayoutSelector v-model:value="appStore.layoutMode" />
|
|
||||||
<n-divider>{{ $t('app.themeSetting') }}</n-divider>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.colorWeak') }}
|
|
||||||
<n-switch :value="appStore.colorWeak" @update:value="appStore.toggleColorWeak" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.blackAndWhite') }}
|
|
||||||
<n-switch :value="appStore.grayMode" @update:value="appStore.toggleGrayMode" />
|
|
||||||
</n-space>
|
|
||||||
<n-space align="center" justify="space-between">
|
|
||||||
{{ $t('app.themeColor') }}
|
|
||||||
<n-color-picker
|
|
||||||
v-model:value="appStore.primaryColor" class="w-10em" :swatches="palette"
|
|
||||||
@update:value="appStore.setPrimaryColor"
|
|
||||||
/>
|
|
||||||
</n-space>
|
|
||||||
<n-space align="center" justify="space-between">
|
|
||||||
{{ $t('app.pageTransition') }}
|
|
||||||
<n-select
|
|
||||||
v-model:value="appStore.transitionAnimation" class="w-10em"
|
|
||||||
:options="transitionSelectorOptions" @update:value="appStore.reloadPage"
|
|
||||||
/>
|
|
||||||
</n-space>
|
|
||||||
|
|
||||||
<n-divider>{{ $t('app.interfaceDisplay') }}</n-divider>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.logoDisplay') }}
|
|
||||||
<n-switch v-model:value="appStore.showLogo" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.topProgress') }}
|
|
||||||
<n-switch v-model:value="appStore.showProgress" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.multitab') }}
|
|
||||||
<n-switch v-model:value="appStore.showTabs" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.bottomCopyright') }}
|
|
||||||
<n-switch v-model:value="appStore.showFooter" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.breadcrumb') }}
|
|
||||||
<n-switch v-model:value="appStore.showBreadcrumb" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.BreadcrumbIcon') }}
|
|
||||||
<n-switch v-model:value="appStore.showBreadcrumbIcon" />
|
|
||||||
</n-space>
|
|
||||||
<n-space justify="space-between">
|
|
||||||
{{ $t('app.watermake') }}
|
|
||||||
<n-switch v-model:value="appStore.showWatermark" />
|
|
||||||
</n-space>
|
|
||||||
</n-space>
|
|
||||||
|
|
||||||
<template #footer>
|
|
||||||
<n-button type="error" @click="resetSetting">
|
|
||||||
{{ $t('app.reset') }}
|
|
||||||
</n-button>
|
|
||||||
</template>
|
|
||||||
</n-drawer-content>
|
|
||||||
</n-drawer>
|
|
||||||
</div>
|
|
||||||
</CommonWrapper>
|
|
||||||
</template>
|
|
||||||
<span>{{ $t('app.setting') }}</span>
|
|
||||||
</n-tooltip>
|
|
||||||
</template>
|
|
||||||
@ -1,22 +1,18 @@
|
|||||||
/* 侧边栏组件 */
|
|
||||||
import Logo from './sider/Logo.vue'
|
import Logo from './sider/Logo.vue'
|
||||||
import Menu from './sider/Menu.vue'
|
import Menu from './sider/Menu.vue'
|
||||||
|
|
||||||
/* 头部栏组件 */
|
|
||||||
import Breadcrumb from './header/Breadcrumb.vue'
|
import Breadcrumb from './header/Breadcrumb.vue'
|
||||||
import CollapaseButton from './header/CollapaseButton.vue'
|
import CollapaseButton from './header/CollapaseButton.vue'
|
||||||
import FullScreen from './header/FullScreen.vue'
|
import FullScreen from './header/FullScreen.vue'
|
||||||
import Setting from './header/Setting.vue'
|
|
||||||
import Notices from './header/Notices.vue'
|
import Notices from './header/Notices.vue'
|
||||||
import UserCenter from './header/UserCenter.vue'
|
import UserCenter from './header/UserCenter.vue'
|
||||||
import Search from './header/Search.vue'
|
import Search from './header/Search.vue'
|
||||||
|
|
||||||
/* 标签栏组件 */
|
|
||||||
import TabBar from './tab/TabBar.vue'
|
import TabBar from './tab/TabBar.vue'
|
||||||
|
|
||||||
/* 其他组件 */
|
|
||||||
// 返回顶部
|
|
||||||
import BackTop from './common/BackTop.vue'
|
import BackTop from './common/BackTop.vue'
|
||||||
|
import Setting from './common/Setting.vue'
|
||||||
|
import SettingDrawer from './common/SettingDrawer.vue'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
@ -25,6 +21,7 @@ export {
|
|||||||
Logo,
|
Logo,
|
||||||
FullScreen,
|
FullScreen,
|
||||||
Setting,
|
Setting,
|
||||||
|
SettingDrawer,
|
||||||
Notices,
|
Notices,
|
||||||
UserCenter,
|
UserCenter,
|
||||||
Search,
|
Search,
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import type { MenuInst } from 'naive-ui'
|
import type { MenuInst } from 'naive-ui'
|
||||||
import { useAppStore } from '@/store'
|
import { useAppStore, useRouteStore } from '@/store'
|
||||||
import { useRouteStore } from '@/store/route'
|
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
@ -27,5 +26,3 @@ watch(
|
|||||||
:value="routesStore.activeMenu"
|
:value="routesStore.activeMenu"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import leftMenu from './leftMenu.layout.vue'
|
import leftMenu from './leftMenu.layout.vue'
|
||||||
import topMenu from './topMenu.layout.vue'
|
import topMenu from './topMenu.layout.vue'
|
||||||
|
import { SettingDrawer } from './components'
|
||||||
import { useAppStore } from '@/store/app'
|
import { useAppStore } from '@/store/app'
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
@ -11,5 +12,6 @@ const layoutMap = {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<SettingDrawer />
|
||||||
<component :is="layoutMap[appStore.layoutMode]" />
|
<component :is="layoutMap[appStore.layoutMode]" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -6,7 +6,6 @@ export const routes: RouteRecordRaw[] = [
|
|||||||
path: '/',
|
path: '/',
|
||||||
name: 'root',
|
name: 'root',
|
||||||
redirect: '/appRoot',
|
redirect: '/appRoot',
|
||||||
// component: () => import('@/layouts/index'),
|
|
||||||
children: [
|
children: [
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,407 +1,407 @@
|
|||||||
export const staticRoutes: AppRoute.RowRoute[] = [
|
export const staticRoutes: AppRoute.RowRoute[] = [
|
||||||
{
|
{
|
||||||
'name': 'dashboard',
|
name: 'dashboard',
|
||||||
'path': '/dashboard',
|
path: '/dashboard',
|
||||||
'meta.title': '仪表盘',
|
title: '仪表盘',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:analysis',
|
icon: 'icon-park-outline:analysis',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 1,
|
id: 1,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'workbench',
|
name: 'workbench',
|
||||||
'path': '/dashboard/workbench',
|
path: '/dashboard/workbench',
|
||||||
'meta.title': '工作台',
|
title: '工作台',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:alarm',
|
icon: 'icon-park-outline:alarm',
|
||||||
'meta.pinTab': true,
|
pinTab: true,
|
||||||
'meta.menuType': 'page',
|
menuType: 'page',
|
||||||
'componentPath': '/dashboard/workbench/index.vue',
|
componentPath: '/dashboard/workbench/index.vue',
|
||||||
'id': 2,
|
id: 2,
|
||||||
'pid': 1,
|
pid: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'monitor',
|
name: 'monitor',
|
||||||
'path': '/dashboard/monitor',
|
path: '/dashboard/monitor',
|
||||||
'meta.title': '监控页',
|
title: '监控页',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:anchor',
|
icon: 'icon-park-outline:anchor',
|
||||||
'meta.menuType': 'page',
|
menuType: 'page',
|
||||||
'componentPath': '/dashboard/monitor/index.vue',
|
componentPath: '/dashboard/monitor/index.vue',
|
||||||
'id': 3,
|
id: 3,
|
||||||
'pid': 1,
|
pid: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'test',
|
name: 'test',
|
||||||
'path': '/test',
|
path: '/test',
|
||||||
'meta.title': '多级菜单演示',
|
title: '多级菜单演示',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 4,
|
id: 4,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'test2',
|
name: 'test2',
|
||||||
'path': '/test/test2',
|
path: '/test/test2',
|
||||||
'meta.title': '多级菜单子页',
|
title: '多级菜单子页',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
'meta.menuType': 'page',
|
menuType: 'page',
|
||||||
'componentPath': '/test/test2/index.vue',
|
componentPath: '/test/test2/index.vue',
|
||||||
'id': 6,
|
id: 6,
|
||||||
'pid': 4,
|
pid: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'test2Detail',
|
name: 'test2Detail',
|
||||||
'path': '/test/test2/detail',
|
path: '/test/test2/detail',
|
||||||
'meta.title': '多级菜单的详情页',
|
title: '多级菜单的详情页',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
'meta.hide': true,
|
hide: true,
|
||||||
'meta.activeMenu': '/test/test2',
|
activeMenu: '/test/test2',
|
||||||
'meta.menuType': 'page',
|
menuType: 'page',
|
||||||
'componentPath': '/test/test2/detail/index.vue',
|
componentPath: '/test/test2/detail/index.vue',
|
||||||
'id': 7,
|
id: 7,
|
||||||
'pid': 4,
|
pid: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'test3',
|
name: 'test3',
|
||||||
'path': '/test/test3',
|
path: '/test/test3',
|
||||||
'meta.title': '多级菜单',
|
title: '多级菜单',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 8,
|
id: 8,
|
||||||
'pid': 4,
|
pid: 4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'test4',
|
name: 'test4',
|
||||||
'path': '/test/test3/test4',
|
path: '/test/test3/test4',
|
||||||
'meta.title': '多级菜单3-1',
|
title: '多级菜单3-1',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list',
|
icon: 'icon-park-outline:list',
|
||||||
'componentPath': '/test/test3/test4/index.vue',
|
componentPath: '/test/test3/test4/index.vue',
|
||||||
'id': 9,
|
id: 9,
|
||||||
'pid': 8,
|
pid: 8,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'list',
|
name: 'list',
|
||||||
'path': '/list',
|
path: '/list',
|
||||||
'meta.title': '列表页',
|
title: '列表页',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list-two',
|
icon: 'icon-park-outline:list-two',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 10,
|
id: 10,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'commonList',
|
name: 'commonList',
|
||||||
'path': '/list/commonList',
|
path: '/list/commonList',
|
||||||
'meta.title': '常用列表',
|
title: '常用列表',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:list-view',
|
icon: 'icon-park-outline:list-view',
|
||||||
'componentPath': '/list/commonList/index.vue',
|
componentPath: '/list/commonList/index.vue',
|
||||||
'id': 11,
|
id: 11,
|
||||||
'pid': 10,
|
pid: 10,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'cardList',
|
name: 'cardList',
|
||||||
'path': '/list/cardList',
|
path: '/list/cardList',
|
||||||
'meta.title': '卡片列表',
|
title: '卡片列表',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:view-grid-list',
|
icon: 'icon-park-outline:view-grid-list',
|
||||||
'componentPath': '/list/cardList/index.vue',
|
componentPath: '/list/cardList/index.vue',
|
||||||
'id': 12,
|
id: 12,
|
||||||
'pid': 10,
|
pid: 10,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'demo',
|
name: 'demo',
|
||||||
'path': '/demo',
|
path: '/demo',
|
||||||
'meta.title': '功能示例',
|
title: '功能示例',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:application-one',
|
icon: 'icon-park-outline:application-one',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 13,
|
id: 13,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'fetch',
|
name: 'fetch',
|
||||||
'path': '/demo/fetch',
|
path: '/demo/fetch',
|
||||||
'meta.title': '请求示例',
|
title: '请求示例',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:international',
|
icon: 'icon-park-outline:international',
|
||||||
'componentPath': '/demo/fetch/index.vue',
|
componentPath: '/demo/fetch/index.vue',
|
||||||
'id': 5,
|
id: 5,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'echarts',
|
name: 'echarts',
|
||||||
'path': '/demo/echarts',
|
path: '/demo/echarts',
|
||||||
'meta.title': 'ECharts',
|
title: 'ECharts',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:chart-proportion',
|
icon: 'icon-park-outline:chart-proportion',
|
||||||
'componentPath': '/demo/echarts/index.vue',
|
componentPath: '/demo/echarts/index.vue',
|
||||||
'id': 15,
|
id: 15,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'map',
|
name: 'map',
|
||||||
'path': '/demo/map',
|
path: '/demo/map',
|
||||||
'meta.title': '地图',
|
title: '地图',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'carbon:map',
|
icon: 'carbon:map',
|
||||||
'meta.keepAlive': true,
|
keepAlive: true,
|
||||||
'componentPath': '/demo/map/index.vue',
|
componentPath: '/demo/map/index.vue',
|
||||||
'id': 17,
|
id: 17,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'editor',
|
name: 'editor',
|
||||||
'path': '/demo/editor',
|
path: '/demo/editor',
|
||||||
'meta.title': '编辑器',
|
title: '编辑器',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:editor',
|
icon: 'icon-park-outline:editor',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 18,
|
id: 18,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'editorMd',
|
name: 'editorMd',
|
||||||
'path': '/demo/editor/md',
|
path: '/demo/editor/md',
|
||||||
'meta.title': 'MarkDown',
|
title: 'MarkDown',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'ri:markdown-line',
|
icon: 'ri:markdown-line',
|
||||||
'componentPath': '/demo/editor/md/index.vue',
|
componentPath: '/demo/editor/md/index.vue',
|
||||||
'id': 19,
|
id: 19,
|
||||||
'pid': 18,
|
pid: 18,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'editorRich',
|
name: 'editorRich',
|
||||||
'path': '/demo/editor/rich',
|
path: '/demo/editor/rich',
|
||||||
'meta.title': '富文本',
|
title: '富文本',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:edit-one',
|
icon: 'icon-park-outline:edit-one',
|
||||||
'componentPath': '/demo/editor/rich/index.vue',
|
componentPath: '/demo/editor/rich/index.vue',
|
||||||
'id': 20,
|
id: 20,
|
||||||
'pid': 18,
|
pid: 18,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'clipboard',
|
name: 'clipboard',
|
||||||
'path': '/demo/clipboard',
|
path: '/demo/clipboard',
|
||||||
'meta.title': '剪贴板',
|
title: '剪贴板',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:clipboard',
|
icon: 'icon-park-outline:clipboard',
|
||||||
'componentPath': '/demo/clipboard/index.vue',
|
componentPath: '/demo/clipboard/index.vue',
|
||||||
'id': 21,
|
id: 21,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'icons',
|
name: 'icons',
|
||||||
'path': '/demo/icons',
|
path: '/demo/icons',
|
||||||
'meta.title': '图标',
|
title: '图标',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:winking-face-with-open-eyes',
|
icon: 'icon-park-outline:winking-face-with-open-eyes',
|
||||||
'componentPath': '/demo/icons/index.vue',
|
componentPath: '/demo/icons/index.vue',
|
||||||
'id': 22,
|
id: 22,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'QRCode',
|
name: 'QRCode',
|
||||||
'path': '/demo/QRCode',
|
path: '/demo/QRCode',
|
||||||
'meta.title': '二维码',
|
title: '二维码',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:two-dimensional-code',
|
icon: 'icon-park-outline:two-dimensional-code',
|
||||||
'componentPath': '/demo/QRCode/index.vue',
|
componentPath: '/demo/QRCode/index.vue',
|
||||||
'id': 23,
|
id: 23,
|
||||||
'pid': 13,
|
pid: 13,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'docments',
|
name: 'docments',
|
||||||
'path': '/docments',
|
path: '/docments',
|
||||||
'meta.title': '外链文档',
|
title: '外链文档',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:file-doc',
|
icon: 'icon-park-outline:file-doc',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 24,
|
id: 24,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'docmentsVue',
|
name: 'docmentsVue',
|
||||||
'path': '/docments/vue',
|
path: '/docments/vue',
|
||||||
'meta.title': 'Vue',
|
title: 'Vue',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'logos:vue',
|
icon: 'logos:vue',
|
||||||
'componentPath': '/docments/vue/index.vue',
|
componentPath: '/docments/vue/index.vue',
|
||||||
'id': 25,
|
id: 25,
|
||||||
'pid': 24,
|
pid: 24,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'docmentsVite',
|
name: 'docmentsVite',
|
||||||
'path': '/docments/vite',
|
path: '/docments/vite',
|
||||||
'meta.title': 'Vite',
|
title: 'Vite',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'logos:vitejs',
|
icon: 'logos:vitejs',
|
||||||
'componentPath': '/docments/vite/index.vue',
|
componentPath: '/docments/vite/index.vue',
|
||||||
'id': 26,
|
id: 26,
|
||||||
'pid': 24,
|
pid: 24,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'docmentsVueuse',
|
name: 'docmentsVueuse',
|
||||||
'path': '/docments/vueuse',
|
path: '/docments/vueuse',
|
||||||
'meta.title': 'VueUse（外链）',
|
title: 'VueUse（外链）',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'logos:vueuse',
|
icon: 'logos:vueuse',
|
||||||
'meta.href': 'https://vueuse.org/guide/',
|
href: 'https://vueuse.org/guide/',
|
||||||
'componentPath': 'null',
|
componentPath: 'null',
|
||||||
'id': 27,
|
id: 27,
|
||||||
'pid': 24,
|
pid: 24,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'permission',
|
name: 'permission',
|
||||||
'path': '/permission',
|
path: '/permission',
|
||||||
'meta.title': '权限',
|
title: '权限',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:people-safe',
|
icon: 'icon-park-outline:people-safe',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 28,
|
id: 28,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'permissionDemo',
|
name: 'permissionDemo',
|
||||||
'path': '/permission/permission',
|
path: '/permission/permission',
|
||||||
'meta.title': '权限示例',
|
title: '权限示例',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:right-user',
|
icon: 'icon-park-outline:right-user',
|
||||||
'componentPath': '/permission/permission/index.vue',
|
componentPath: '/permission/permission/index.vue',
|
||||||
'id': 29,
|
id: 29,
|
||||||
'pid': 28,
|
pid: 28,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'justSuper',
|
name: 'justSuper',
|
||||||
'path': '/permission/justSuper',
|
path: '/permission/justSuper',
|
||||||
'meta.title': 'super可见',
|
title: 'super可见',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.roles': [
|
roles: [
|
||||||
'super',
|
'super',
|
||||||
],
|
],
|
||||||
'meta.icon': 'icon-park-outline:wrong-user',
|
icon: 'icon-park-outline:wrong-user',
|
||||||
'componentPath': '/permission/justSuper/index.vue',
|
componentPath: '/permission/justSuper/index.vue',
|
||||||
'id': 30,
|
id: 30,
|
||||||
'pid': 28,
|
pid: 28,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'error',
|
name: 'error',
|
||||||
'path': '/error',
|
path: '/error',
|
||||||
'meta.title': '异常页',
|
title: '异常页',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:error-computer',
|
icon: 'icon-park-outline:error-computer',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 31,
|
id: 31,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'demo403',
|
name: 'demo403',
|
||||||
'path': '/error/403',
|
path: '/error/403',
|
||||||
'meta.title': '403',
|
title: '403',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'carbon:error',
|
icon: 'carbon:error',
|
||||||
'meta.order': 3,
|
order: 3,
|
||||||
'componentPath': '/error/403/index.vue',
|
componentPath: '/error/403/index.vue',
|
||||||
'id': 32,
|
id: 32,
|
||||||
'pid': 31,
|
pid: 31,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'demo404',
|
name: 'demo404',
|
||||||
'path': '/error/404',
|
path: '/error/404',
|
||||||
'meta.title': '404',
|
title: '404',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:error',
|
icon: 'icon-park-outline:error',
|
||||||
'meta.order': 2,
|
order: 2,
|
||||||
'componentPath': '/error/404/index.vue',
|
componentPath: '/error/404/index.vue',
|
||||||
'id': 33,
|
id: 33,
|
||||||
'pid': 31,
|
pid: 31,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'demo500',
|
name: 'demo500',
|
||||||
'path': '/error/500',
|
path: '/error/500',
|
||||||
'meta.title': '500',
|
title: '500',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'carbon:data-error',
|
icon: 'carbon:data-error',
|
||||||
'meta.order': 1,
|
order: 1,
|
||||||
'componentPath': '/error/500/index.vue',
|
componentPath: '/error/500/index.vue',
|
||||||
'id': 34,
|
id: 34,
|
||||||
'pid': 31,
|
pid: 31,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'setting',
|
name: 'setting',
|
||||||
'path': '/setting',
|
path: '/setting',
|
||||||
'meta.title': '系统设置',
|
title: '系统设置',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:setting',
|
icon: 'icon-park-outline:setting',
|
||||||
'meta.menuType': 'dir',
|
menuType: 'dir',
|
||||||
'componentPath': null,
|
componentPath: null,
|
||||||
'id': 35,
|
id: 35,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'accountSetting',
|
name: 'accountSetting',
|
||||||
'path': '/setting/account',
|
path: '/setting/account',
|
||||||
'meta.title': '用户设置',
|
title: '用户设置',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:every-user',
|
icon: 'icon-park-outline:every-user',
|
||||||
'componentPath': '/setting/account/index.vue',
|
componentPath: '/setting/account/index.vue',
|
||||||
'id': 36,
|
id: 36,
|
||||||
'pid': 35,
|
pid: 35,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'dictionarySetting',
|
name: 'dictionarySetting',
|
||||||
'path': '/setting/dictionary',
|
path: '/setting/dictionary',
|
||||||
'meta.title': '字典设置',
|
title: '字典设置',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:book-one',
|
icon: 'icon-park-outline:book-one',
|
||||||
'componentPath': '/setting/dictionary/index.vue',
|
componentPath: '/setting/dictionary/index.vue',
|
||||||
'id': 37,
|
id: 37,
|
||||||
'pid': 35,
|
pid: 35,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'menuSetting',
|
name: 'menuSetting',
|
||||||
'path': '/setting/menu',
|
path: '/setting/menu',
|
||||||
'meta.title': '菜单设置',
|
title: '菜单设置',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:application-menu',
|
icon: 'icon-park-outline:application-menu',
|
||||||
'componentPath': '/setting/menu/index.vue',
|
componentPath: '/setting/menu/index.vue',
|
||||||
'id': 38,
|
id: 38,
|
||||||
'pid': 35,
|
pid: 35,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'userCenter',
|
name: 'userCenter',
|
||||||
'path': '/userCenter',
|
path: '/userCenter',
|
||||||
'meta.title': '个人中心',
|
title: '个人中心',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'carbon:user-avatar-filled-alt',
|
icon: 'carbon:user-avatar-filled-alt',
|
||||||
'componentPath': '/userCenter/index.vue',
|
componentPath: '/userCenter/index.vue',
|
||||||
'id': 39,
|
id: 39,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'about',
|
name: 'about',
|
||||||
'path': '/about',
|
path: '/about',
|
||||||
'meta.title': '关于',
|
title: '关于',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.icon': 'icon-park-outline:info',
|
icon: 'icon-park-outline:info',
|
||||||
'componentPath': '/about/index.vue',
|
componentPath: '/about/index.vue',
|
||||||
'id': 40,
|
id: 40,
|
||||||
'pid': null,
|
pid: null,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
@ -33,6 +33,7 @@ export const useAppStore = defineStore('app-store', {
|
|||||||
showBreadcrumb: true,
|
showBreadcrumb: true,
|
||||||
showBreadcrumbIcon: true,
|
showBreadcrumbIcon: true,
|
||||||
showWatermark: false,
|
showWatermark: false,
|
||||||
|
showSetting: false,
|
||||||
transitionAnimation: 'fade-slide' as TransitionAnimation,
|
transitionAnimation: 'fade-slide' as TransitionAnimation,
|
||||||
layoutMode: 'leftMenu' as LayoutMode,
|
layoutMode: 'leftMenu' as LayoutMode,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { useRouteStore } from './route'
|
import { useRouteStore } from './router'
|
||||||
import { useTabStore } from './tab'
|
import { useTabStore } from './tab'
|
||||||
import { fetchLogin } from '@/service'
|
import { fetchLogin } from '@/service'
|
||||||
import { router } from '@/router'
|
import { router } from '@/router'
|
||||||
@ -33,7 +33,7 @@ export const useAuthStore = defineStore('auth-store', {
|
|||||||
// 清空标签栏数据
|
// 清空标签栏数据
|
||||||
const tabStore = useTabStore()
|
const tabStore = useTabStore()
|
||||||
tabStore.clearAllTabs()
|
tabStore.clearAllTabs()
|
||||||
// 重制当前存储库
|
// 重置当前存储库
|
||||||
this.$reset()
|
this.$reset()
|
||||||
// 重定向到登录页
|
// 重定向到登录页
|
||||||
if (route.meta.requiresAuth) {
|
if (route.meta.requiresAuth) {
|
||||||
@ -59,14 +59,14 @@ export const useAuthStore = defineStore('auth-store', {
|
|||||||
return
|
return
|
||||||
|
|
||||||
// 处理登录信息
|
// 处理登录信息
|
||||||
await this.handleAfterLogin(data)
|
await this.handleLoginInfo(data)
|
||||||
}
|
}
|
||||||
catch (e) {
|
catch (e) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 登录后的处理函数 */
|
/* 处理登录返回的数据 */
|
||||||
async handleAfterLogin(data: Api.Login.Info) {
|
async handleLoginInfo(data: Api.Login.Info) {
|
||||||
// 将token和userInfo保存下来
|
// 将token和userInfo保存下来
|
||||||
local.set('userInfo', data)
|
local.set('userInfo', data)
|
||||||
local.set('accessToken', data.accessToken)
|
local.set('accessToken', data.accessToken)
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import piniaPluginPersist from 'pinia-plugin-persist'
|
|||||||
|
|
||||||
export * from './app/index'
|
export * from './app/index'
|
||||||
export * from './auth'
|
export * from './auth'
|
||||||
export * from './route'
|
export * from './router'
|
||||||
export * from './tab'
|
export * from './tab'
|
||||||
|
|
||||||
// 安装pinia全局状态库
|
// 安装pinia全局状态库
|
||||||
|
|||||||
@ -1,207 +0,0 @@
|
|||||||
import type { MenuOption } from 'naive-ui'
|
|
||||||
import { RouterLink } from 'vue-router'
|
|
||||||
import { h } from 'vue'
|
|
||||||
import { clone, construct, min } from 'radash'
|
|
||||||
import type { RouteRecordRaw } from 'vue-router'
|
|
||||||
import { $t, arrayToTree, local, renderIcon } from '@/utils'
|
|
||||||
import { router } from '@/router'
|
|
||||||
import { fetchUserRoutes } from '@/service'
|
|
||||||
import { staticRoutes } from '@/router/routes.static'
|
|
||||||
import { usePermission } from '@/hooks'
|
|
||||||
import Layout from '@/layouts/index.vue'
|
|
||||||
import { useAuthStore } from '@/store/auth'
|
|
||||||
|
|
||||||
interface RoutesStatus {
|
|
||||||
isInitAuthRoute: boolean
|
|
||||||
menus: AppRoute.Route[]
|
|
||||||
rowRoutes: AppRoute.RowRoute[]
|
|
||||||
activeMenu: string | null
|
|
||||||
cacheRoutes: string[]
|
|
||||||
}
|
|
||||||
export const useRouteStore = defineStore('route-store', {
|
|
||||||
state: (): RoutesStatus => {
|
|
||||||
return {
|
|
||||||
isInitAuthRoute: false,
|
|
||||||
menus: [],
|
|
||||||
rowRoutes: [],
|
|
||||||
activeMenu: null,
|
|
||||||
cacheRoutes: [],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
resetRouteStore() {
|
|
||||||
this.resetRoutes()
|
|
||||||
this.$reset()
|
|
||||||
},
|
|
||||||
resetRoutes() {
|
|
||||||
router.removeRoute('appRoot')
|
|
||||||
},
|
|
||||||
// set the currently highlighted menu key
|
|
||||||
setActiveMenu(key: string) {
|
|
||||||
this.activeMenu = key
|
|
||||||
},
|
|
||||||
/* 生成侧边菜单的数据 */
|
|
||||||
createMenus(userRoutes: AppRoute.RowRoute[]) {
|
|
||||||
const resultMenus = clone(userRoutes).map(i => construct(i)) as AppRoute.Route[]
|
|
||||||
|
|
||||||
// filter menus that do not need to be displayed
|
|
||||||
const visibleMenus = resultMenus.filter(route => !route.meta.hide)
|
|
||||||
|
|
||||||
// generate side menu
|
|
||||||
this.menus = arrayToTree(this.transformAuthRoutesToMenus(visibleMenus))
|
|
||||||
},
|
|
||||||
|
|
||||||
// render the returned routing table as a sidebar
|
|
||||||
transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] {
|
|
||||||
const { hasPermission } = usePermission()
|
|
||||||
// Filter out side menus without permission
|
|
||||||
return userRoutes.filter(i => hasPermission(i.meta.roles))
|
|
||||||
// Sort the menu according to the order size
|
|
||||||
.sort((a, b) => {
|
|
||||||
if (a.meta && a.meta.order && b.meta && b.meta.order)
|
|
||||||
return a.meta.order - b.meta.order
|
|
||||||
else if (a.meta && a.meta.order)
|
|
||||||
return -1
|
|
||||||
else if (b.meta && b.meta.order)
|
|
||||||
return 1
|
|
||||||
else return 0
|
|
||||||
})
|
|
||||||
|
|
||||||
// Convert to side menu data structure
|
|
||||||
.map((item) => {
|
|
||||||
const target: MenuOption = {
|
|
||||||
id: item.id,
|
|
||||||
pid: item.pid,
|
|
||||||
label:
|
|
||||||
(!item.meta.menuType || item.meta.menuType === 'page')
|
|
||||||
? () =>
|
|
||||||
h(
|
|
||||||
RouterLink,
|
|
||||||
{
|
|
||||||
to: {
|
|
||||||
path: item.path,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ default: () => $t(`route.${String(item.name)}`, item.meta.title) },
|
|
||||||
)
|
|
||||||
: () => $t(`route.${String(item.name)}`, item.meta.title),
|
|
||||||
key: item.path,
|
|
||||||
icon: item.meta.icon ? renderIcon(item.meta.icon) : undefined,
|
|
||||||
}
|
|
||||||
return target
|
|
||||||
})
|
|
||||||
},
|
|
||||||
createRoutes(routes: AppRoute.RowRoute[]) {
|
|
||||||
const { hasPermission } = usePermission()
|
|
||||||
|
|
||||||
// Structure the meta field
|
|
||||||
let resultRouter = clone(routes).map(i => construct(i)) as AppRoute.Route[]
|
|
||||||
|
|
||||||
// Route permission filtering
|
|
||||||
resultRouter = resultRouter.filter(i => hasPermission(i.meta.roles))
|
|
||||||
|
|
||||||
// Generate an array of route names that need to be kept alive
|
|
||||||
this.cacheRoutes = resultRouter.filter((i) => {
|
|
||||||
return i.meta.keepAlive
|
|
||||||
})
|
|
||||||
.map(i => i.name)
|
|
||||||
|
|
||||||
// Generate routes, no need to import files for those with redirect
|
|
||||||
const modules = import.meta.glob('@/views/**/*.vue')
|
|
||||||
resultRouter = resultRouter.map((item: AppRoute.Route) => {
|
|
||||||
if (item.componentPath && !item.redirect)
|
|
||||||
item.component = modules[`/src/views${item.componentPath}`]
|
|
||||||
return item
|
|
||||||
})
|
|
||||||
|
|
||||||
// Generate route tree
|
|
||||||
resultRouter = arrayToTree(resultRouter) as AppRoute.Route[]
|
|
||||||
|
|
||||||
const appRootRoute: RouteRecordRaw = {
|
|
||||||
path: '/appRoot',
|
|
||||||
name: 'appRoot',
|
|
||||||
redirect: import.meta.env.VITE_HOME_PATH,
|
|
||||||
component: Layout,
|
|
||||||
meta: {
|
|
||||||
title: '',
|
|
||||||
icon: 'icon-park-outline:home',
|
|
||||||
},
|
|
||||||
children: [],
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the correct redirect path for the route
|
|
||||||
this.setRedirect(resultRouter)
|
|
||||||
|
|
||||||
// Insert the processed route into the root route
|
|
||||||
appRootRoute.children = resultRouter as unknown as RouteRecordRaw[]
|
|
||||||
router.addRoute(appRootRoute)
|
|
||||||
},
|
|
||||||
setRedirect(routes: AppRoute.Route[]) {
|
|
||||||
routes.forEach((route) => {
|
|
||||||
if (route.children) {
|
|
||||||
if (!route.redirect) {
|
|
||||||
// Filter out a collection of child elements that are not hidden
|
|
||||||
const visibleChilds = route.children.filter(child => !child.meta.hide)
|
|
||||||
|
|
||||||
// Redirect page to the path of the first child element by default
|
|
||||||
let target = visibleChilds[0]
|
|
||||||
|
|
||||||
// Filter out pages with the order attribute
|
|
||||||
const orderChilds = visibleChilds.filter(child => child.meta.order)
|
|
||||||
|
|
||||||
if (orderChilds.length > 0)
|
|
||||||
target = min(orderChilds, i => i.meta.order!) as AppRoute.Route
|
|
||||||
|
|
||||||
route.redirect = target.path
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setRedirect(route.children)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async initRouteInfo() {
|
|
||||||
if (import.meta.env.VITE_AUTH_ROUTE_MODE === 'dynamic') {
|
|
||||||
const userInfo = local.get('userInfo')
|
|
||||||
|
|
||||||
if (!userInfo || !userInfo.id) {
|
|
||||||
const authStore = useAuthStore()
|
|
||||||
authStore.resetAuthStore()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get user's route
|
|
||||||
const { data } = await fetchUserRoutes({
|
|
||||||
id: userInfo.id,
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!data)
|
|
||||||
return
|
|
||||||
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.rowRoutes = staticRoutes
|
|
||||||
return staticRoutes
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async initAuthRoute() {
|
|
||||||
this.isInitAuthRoute = false
|
|
||||||
|
|
||||||
// Initialize route information
|
|
||||||
const rowRoutes = await this.initRouteInfo()
|
|
||||||
if (!rowRoutes) {
|
|
||||||
window.$message.error($t(`app.getRouteError`))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.rowRoutes = rowRoutes
|
|
||||||
|
|
||||||
// Generate actual route and insert
|
|
||||||
this.createRoutes(rowRoutes)
|
|
||||||
|
|
||||||
// Generate side menu
|
|
||||||
this.createMenus(rowRoutes)
|
|
||||||
|
|
||||||
this.isInitAuthRoute = true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
142
src/store/router/helper.ts
Normal file
142
src/store/router/helper.ts
Normal file
@ -0,0 +1,142 @@
|
|||||||
|
import { clone, min, omit, pick } from 'radash'
|
||||||
|
import type { RouteRecordRaw } from 'vue-router'
|
||||||
|
import type { MenuOption } from 'naive-ui'
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
import Layout from '@/layouts/index.vue'
|
||||||
|
import { usePermission } from '@/hooks'
|
||||||
|
import { $t, arrayToTree, renderIcon } from '@/utils'
|
||||||
|
|
||||||
|
const metaFields: AppRoute.MetaKeys[]
|
||||||
|
= ['title', 'icon', 'requiresAuth', 'roles', 'keepAlive', 'hide', 'order', 'href', 'activeMenu', 'withoutTab', 'pinTab', 'menuType']
|
||||||
|
|
||||||
|
function standardizedRoutes(route: AppRoute.RowRoute[]) {
|
||||||
|
return clone(route).map((i) => {
|
||||||
|
const route = omit(i, metaFields)
|
||||||
|
|
||||||
|
Reflect.set(route, 'meta', pick(i, metaFields))
|
||||||
|
return route
|
||||||
|
}) as AppRoute.Route[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createRoutes(routes: AppRoute.RowRoute[]) {
|
||||||
|
const { hasPermission } = usePermission()
|
||||||
|
|
||||||
|
// Structure the meta field
|
||||||
|
let resultRouter = standardizedRoutes(routes)
|
||||||
|
|
||||||
|
// Route permission filtering
|
||||||
|
resultRouter = resultRouter.filter(i => hasPermission(i.meta.roles))
|
||||||
|
|
||||||
|
// Generate routes, no need to import files for those with redirect
|
||||||
|
const modules = import.meta.glob('@/views/**/*.vue')
|
||||||
|
resultRouter = resultRouter.map((item: AppRoute.Route) => {
|
||||||
|
if (item.componentPath && !item.redirect)
|
||||||
|
item.component = modules[`/src/views${item.componentPath}`]
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
|
||||||
|
// Generate route tree
|
||||||
|
resultRouter = arrayToTree(resultRouter) as AppRoute.Route[]
|
||||||
|
|
||||||
|
const appRootRoute: RouteRecordRaw = {
|
||||||
|
path: '/appRoot',
|
||||||
|
name: 'appRoot',
|
||||||
|
redirect: import.meta.env.VITE_HOME_PATH,
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
title: '',
|
||||||
|
icon: 'icon-park-outline:home',
|
||||||
|
},
|
||||||
|
children: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the correct redirect path for the route
|
||||||
|
setRedirect(resultRouter)
|
||||||
|
|
||||||
|
// Insert the processed route into the root route
|
||||||
|
appRootRoute.children = resultRouter as unknown as RouteRecordRaw[]
|
||||||
|
return appRootRoute
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate an array of route names that need to be kept alive
|
||||||
|
export function generateCacheRoutes(routes: AppRoute.RowRoute[]) {
|
||||||
|
return routes
|
||||||
|
.filter(i => i.keepAlive)
|
||||||
|
.map(i => i.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setRedirect(routes: AppRoute.Route[]) {
|
||||||
|
routes.forEach((route) => {
|
||||||
|
if (route.children) {
|
||||||
|
if (!route.redirect) {
|
||||||
|
// Filter out a collection of child elements that are not hidden
|
||||||
|
const visibleChilds = route.children.filter(child => !child.meta.hide)
|
||||||
|
|
||||||
|
// Redirect page to the path of the first child element by default
|
||||||
|
let target = visibleChilds[0]
|
||||||
|
|
||||||
|
// Filter out pages with the order attribute
|
||||||
|
const orderChilds = visibleChilds.filter(child => child.meta.order)
|
||||||
|
|
||||||
|
if (orderChilds.length > 0)
|
||||||
|
target = min(orderChilds, i => i.meta.order!) as AppRoute.Route
|
||||||
|
|
||||||
|
route.redirect = target.path
|
||||||
|
}
|
||||||
|
|
||||||
|
setRedirect(route.children)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 生成侧边菜单的数据 */
|
||||||
|
export function createMenus(userRoutes: AppRoute.RowRoute[]) {
|
||||||
|
const resultMenus = standardizedRoutes(userRoutes)
|
||||||
|
|
||||||
|
// filter menus that do not need to be displayed
|
||||||
|
const visibleMenus = resultMenus.filter(route => !route.meta.hide)
|
||||||
|
|
||||||
|
// generate side menu
|
||||||
|
return arrayToTree(transformAuthRoutesToMenus(visibleMenus))
|
||||||
|
}
|
||||||
|
|
||||||
|
// render the returned routing table as a sidebar
|
||||||
|
function transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]) {
|
||||||
|
const { hasPermission } = usePermission()
|
||||||
|
// Filter out side menus without permission
|
||||||
|
return userRoutes.filter(i => hasPermission(i.meta.roles))
|
||||||
|
// Sort the menu according to the order size
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (a.meta && a.meta.order && b.meta && b.meta.order)
|
||||||
|
return a.meta.order - b.meta.order
|
||||||
|
else if (a.meta && a.meta.order)
|
||||||
|
return -1
|
||||||
|
else if (b.meta && b.meta.order)
|
||||||
|
return 1
|
||||||
|
else return 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// Convert to side menu data structure
|
||||||
|
.map((item) => {
|
||||||
|
const target: MenuOption = {
|
||||||
|
id: item.id,
|
||||||
|
pid: item.pid,
|
||||||
|
label:
|
||||||
|
(!item.meta.menuType || item.meta.menuType === 'page')
|
||||||
|
? () =>
|
||||||
|
h(
|
||||||
|
RouterLink,
|
||||||
|
{
|
||||||
|
to: {
|
||||||
|
path: item.path,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ default: () => $t(`route.${String(item.name)}`, item.meta.title) },
|
||||||
|
)
|
||||||
|
: () => $t(`route.${String(item.name)}`, item.meta.title),
|
||||||
|
key: item.path,
|
||||||
|
icon: item.meta.icon ? renderIcon(item.meta.icon) : undefined,
|
||||||
|
}
|
||||||
|
return target
|
||||||
|
})
|
||||||
|
}
|
||||||
84
src/store/router/index.ts
Normal file
84
src/store/router/index.ts
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { createMenus, createRoutes } from './helper'
|
||||||
|
import { $t, local } from '@/utils'
|
||||||
|
import { router } from '@/router'
|
||||||
|
import { fetchUserRoutes } from '@/service'
|
||||||
|
import { staticRoutes } from '@/router/routes.static'
|
||||||
|
import { useAuthStore } from '@/store/auth'
|
||||||
|
|
||||||
|
interface RoutesStatus {
|
||||||
|
isInitAuthRoute: boolean
|
||||||
|
menus: AppRoute.Route[]
|
||||||
|
rowRoutes: AppRoute.RowRoute[]
|
||||||
|
activeMenu: string | null
|
||||||
|
cacheRoutes: string[]
|
||||||
|
}
|
||||||
|
export const useRouteStore = defineStore('route-store', {
|
||||||
|
state: (): RoutesStatus => {
|
||||||
|
return {
|
||||||
|
isInitAuthRoute: false,
|
||||||
|
menus: [],
|
||||||
|
rowRoutes: [],
|
||||||
|
activeMenu: null,
|
||||||
|
cacheRoutes: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
resetRouteStore() {
|
||||||
|
this.resetRoutes()
|
||||||
|
this.$reset()
|
||||||
|
},
|
||||||
|
resetRoutes() {
|
||||||
|
router.removeRoute('appRoot')
|
||||||
|
},
|
||||||
|
// set the currently highlighted menu key
|
||||||
|
setActiveMenu(key: string) {
|
||||||
|
this.activeMenu = key
|
||||||
|
},
|
||||||
|
|
||||||
|
async initRouteInfo() {
|
||||||
|
if (import.meta.env.VITE_AUTH_ROUTE_MODE === 'dynamic') {
|
||||||
|
const userInfo = local.get('userInfo')
|
||||||
|
|
||||||
|
if (!userInfo || !userInfo.id) {
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
authStore.resetAuthStore()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get user's route
|
||||||
|
const { data } = await fetchUserRoutes({
|
||||||
|
id: userInfo.id,
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!data)
|
||||||
|
return
|
||||||
|
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.rowRoutes = staticRoutes
|
||||||
|
return staticRoutes
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async initAuthRoute() {
|
||||||
|
this.isInitAuthRoute = false
|
||||||
|
|
||||||
|
// Initialize route information
|
||||||
|
const rowRoutes = await this.initRouteInfo()
|
||||||
|
if (!rowRoutes) {
|
||||||
|
window.$message.error($t(`app.getRouteError`))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.rowRoutes = rowRoutes
|
||||||
|
|
||||||
|
// Generate actual route and insert
|
||||||
|
const routes = createRoutes(rowRoutes)
|
||||||
|
router.addRoute(routes)
|
||||||
|
|
||||||
|
// Generate side menu
|
||||||
|
this.menus = createMenus(rowRoutes)
|
||||||
|
|
||||||
|
this.isInitAuthRoute = true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
6
src/typings/route.d.ts
vendored
6
src/typings/route.d.ts
vendored
@ -29,6 +29,8 @@ declare namespace AppRoute {
|
|||||||
menuType?: MenuType
|
menuType?: MenuType
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type MetaKeys = keyof RouteMeta
|
||||||
|
|
||||||
interface baseRoute {
|
interface baseRoute {
|
||||||
/** 路由名称(路由唯一标识) */
|
/** 路由名称(路由唯一标识) */
|
||||||
name: string
|
name: string
|
||||||
@ -45,9 +47,7 @@ declare namespace AppRoute {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
|
/** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
|
||||||
type RowRoute = {
|
type RowRoute = RouteMeta & baseRoute
|
||||||
[K in keyof RouteMeta as `meta.${K}`]?: RouteMeta[K]
|
|
||||||
} & baseRoute
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 挂载到项目上的真实路由结构
|
* 挂载到项目上的真实路由结构
|
||||||
|
|||||||
@ -1,20 +1,50 @@
|
|||||||
import { arrayToTree as _arrayToTree } from 'performant-array-to-tree'
|
// import { arrayToTree as _arrayToTree } from 'performant-array-to-tree'
|
||||||
import { omit } from 'radash'
|
// import { omit } from 'radash'
|
||||||
|
|
||||||
export function arrayToTree(data: any) {
|
// export function arrayToTree(data: any) {
|
||||||
const rowTree = _arrayToTree(data, {
|
// const rowTree = _arrayToTree(data, {
|
||||||
parentId: 'pid',
|
// parentId: 'pid',
|
||||||
dataField: null,
|
// dataField: null,
|
||||||
|
// })
|
||||||
|
|
||||||
|
// const transform = (node: any) => {
|
||||||
|
// if (node.children.length > 0) {
|
||||||
|
// return ({
|
||||||
|
// ...node,
|
||||||
|
// children: node.children.map(transform),
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// return omit(node, ['children'])
|
||||||
|
// }
|
||||||
|
// return rowTree.map(transform)
|
||||||
|
// }
|
||||||
|
|
||||||
|
// interface ArrayItem extends Record<PropertyKey, any> {
|
||||||
|
// id: number
|
||||||
|
// pid: number | null
|
||||||
|
// }
|
||||||
|
|
||||||
|
// interface TreeItem extends ArrayItem {
|
||||||
|
// children?: TreeItem[]
|
||||||
|
// }
|
||||||
|
|
||||||
|
export function arrayToTree(arr: any[]) {
|
||||||
|
const res: any = []
|
||||||
|
const map = new Map()
|
||||||
|
arr.forEach((item) => {
|
||||||
|
map.set(item.id, item)
|
||||||
})
|
})
|
||||||
|
arr.forEach((item) => {
|
||||||
const transform = (node: any) => {
|
const parent = item.pid && map.get(item.pid)
|
||||||
if (node.children.length > 0) {
|
if (parent) {
|
||||||
return ({
|
if (parent?.children)
|
||||||
...node,
|
parent.children.push(item)
|
||||||
children: node.children.map(transform),
|
else
|
||||||
})
|
parent.children = [item]
|
||||||
}
|
}
|
||||||
return omit(node, ['children'])
|
else {
|
||||||
}
|
res.push(item)
|
||||||
return rowTree.map(transform)
|
}
|
||||||
|
})
|
||||||
|
return res
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,22 +25,22 @@ const { bool: modalVisible, setTrue: showModal, setFalse: hiddenModal } = useBoo
|
|||||||
const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
|
const { bool: submitLoading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
|
||||||
|
|
||||||
const formModel = useDefault<AppRoute.RowRoute>({
|
const formModel = useDefault<AppRoute.RowRoute>({
|
||||||
'name': '',
|
name: '',
|
||||||
'path': '',
|
path: '',
|
||||||
'id': -1,
|
id: -1,
|
||||||
'pid': null,
|
pid: null,
|
||||||
'meta.title': '',
|
title: '',
|
||||||
'meta.icon': '',
|
icon: '',
|
||||||
'meta.requiresAuth': true,
|
requiresAuth: true,
|
||||||
'meta.roles': [],
|
roles: [],
|
||||||
'meta.keepAlive': false,
|
keepAlive: false,
|
||||||
'meta.hide': false,
|
hide: false,
|
||||||
'meta.order': undefined,
|
order: undefined,
|
||||||
'meta.href': undefined,
|
href: undefined,
|
||||||
'meta.activeMenu': undefined,
|
activeMenu: undefined,
|
||||||
'meta.withoutTab': true,
|
withoutTab: true,
|
||||||
'meta.pinTab': false,
|
pinTab: false,
|
||||||
'meta.menuType': 'page',
|
menuType: 'page',
|
||||||
})
|
})
|
||||||
|
|
||||||
type ModalType = 'add' | 'view' | 'edit'
|
type ModalType = 'add' | 'view' | 'edit'
|
||||||
@ -130,12 +130,12 @@ function filterDirectory(node: any[]) {
|
|||||||
Reflect.deleteProperty(item, 'children')
|
Reflect.deleteProperty(item, 'children')
|
||||||
}
|
}
|
||||||
|
|
||||||
return (item['meta.menuType'] === 'dir')
|
return (item.menuType === 'dir')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const rules = {
|
const rules = {
|
||||||
'name': {
|
name: {
|
||||||
required: true,
|
required: true,
|
||||||
// message: '请输入菜单名称',
|
// message: '请输入菜单名称',
|
||||||
validator(rule: FormItemRule, value: string) {
|
validator(rule: FormItemRule, value: string) {
|
||||||
@ -149,22 +149,22 @@ const rules = {
|
|||||||
},
|
},
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
'path': {
|
path: {
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入菜单路径',
|
message: '请输入菜单路径',
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
'componentPath': {
|
componentPath: {
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入组件路径',
|
message: '请输入组件路径',
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
'meta.title': {
|
title: {
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入菜单标题',
|
message: '请输入菜单标题',
|
||||||
trigger: 'blur',
|
trigger: 'blur',
|
||||||
},
|
},
|
||||||
'meta.href': {
|
href: {
|
||||||
validator(rule: FormItemRule, value: string) {
|
validator(rule: FormItemRule, value: string) {
|
||||||
if (!new RegExp(Regex.Url).test(value))
|
if (!new RegExp(Regex.Url).test(value))
|
||||||
return new Error('请输入正确的URL地址')
|
return new Error('请输入正确的URL地址')
|
||||||
@ -204,20 +204,20 @@ async function getRoleList() {
|
|||||||
</template>
|
</template>
|
||||||
<n-tree-select
|
<n-tree-select
|
||||||
v-model:value="formModel.pid" filterable clearable :options="dirTreeOptions" key-field="id"
|
v-model:value="formModel.pid" filterable clearable :options="dirTreeOptions" key-field="id"
|
||||||
label-field="meta.title" children-field="children" placeholder="请选择父级目录"
|
label-field="title" children-field="children" placeholder="请选择父级目录"
|
||||||
/>
|
/>
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" label="菜单名称" path="name">
|
<n-form-item-grid-item :span="1" label="菜单名称" path="name">
|
||||||
<n-input v-model:value="formModel.name" placeholder="Eg: system" />
|
<n-input v-model:value="formModel.name" placeholder="Eg: system" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" label="标题" path="meta.title">
|
<n-form-item-grid-item :span="1" label="标题" path="title">
|
||||||
<n-input v-model:value="formModel['meta.title']" placeholder="Eg: My-System" />
|
<n-input v-model:value="formModel.title" placeholder="Eg: My-System" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="2" label="路由路径" path="path">
|
<n-form-item-grid-item :span="2" label="路由路径" path="path">
|
||||||
<n-input v-model:value="formModel.path" placeholder="Eg: /system/user" />
|
<n-input v-model:value="formModel.path" placeholder="Eg: /system/user" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" label="菜单类型" path="meta.menuType">
|
<n-form-item-grid-item :span="1" label="菜单类型" path="menuType">
|
||||||
<n-radio-group v-model:value="formModel['meta.menuType']" name="radiogroup">
|
<n-radio-group v-model:value="formModel.menuType" name="radiogroup">
|
||||||
<n-space>
|
<n-space>
|
||||||
<n-radio value="dir">
|
<n-radio value="dir">
|
||||||
目录
|
目录
|
||||||
@ -228,64 +228,64 @@ async function getRoleList() {
|
|||||||
</n-space>
|
</n-space>
|
||||||
</n-radio-group>
|
</n-radio-group>
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" label="图标" path="meta.icon">
|
<n-form-item-grid-item :span="1" label="图标" path="icon">
|
||||||
<icon-select v-model:value="formModel['meta.icon']" :disabled="modalType === 'view'" />
|
<icon-select v-model:value="formModel.icon" :disabled="modalType === 'view'" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="2" label="组件路径" path="componentPath">
|
<n-form-item-grid-item v-if="formModel.menuType === 'page'" :span="2" label="组件路径" path="componentPath">
|
||||||
<n-input v-model:value="formModel.componentPath" placeholder="Eg: /system/user/index.vue" />
|
<n-input v-model:value="formModel.componentPath" placeholder="Eg: /system/user/index.vue" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" path="meta.order">
|
<n-form-item-grid-item :span="1" path="order">
|
||||||
<template #label>
|
<template #label>
|
||||||
菜单排序
|
菜单排序
|
||||||
<HelpInfo message="数字越小，同级中越靠前" />
|
<HelpInfo message="数字越小，同级中越靠前" />
|
||||||
</template>
|
</template>
|
||||||
<n-input-number v-model:value="formModel['meta.order']" />
|
<n-input-number v-model:value="formModel.order" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="1" path="meta.href">
|
<n-form-item-grid-item v-if="formModel.menuType === 'page'" :span="1" path="href">
|
||||||
<template #label>
|
<template #label>
|
||||||
外链页面
|
外链页面
|
||||||
<HelpInfo message="填写后，点击菜单将跳转到该地址，组件路径任意填写" />
|
<HelpInfo message="填写后，点击菜单将跳转到该地址，组件路径任意填写" />
|
||||||
</template>
|
</template>
|
||||||
<n-input v-model:value="formModel['meta.href']" placeholder="Eg: https://example.com" />
|
<n-input v-model:value="formModel.href" placeholder="Eg: https://example.com" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" label="登录访问" path="meta.requiresAuth">
|
<n-form-item-grid-item :span="1" label="登录访问" path="requiresAuth">
|
||||||
<n-switch v-model:value="formModel['meta.requiresAuth']" />
|
<n-switch v-model:value="formModel.requiresAuth" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item
|
<n-form-item-grid-item
|
||||||
v-if="formModel['meta.menuType'] === 'page'" :span="1" label="页面缓存"
|
v-if="formModel.menuType === 'page'" :span="1" label="页面缓存"
|
||||||
path="meta.keepAlive"
|
path="keepAlive"
|
||||||
>
|
>
|
||||||
<n-switch v-model:value="formModel['meta.keepAlive']" />
|
<n-switch v-model:value="formModel.keepAlive" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item
|
<n-form-item-grid-item
|
||||||
v-if="formModel['meta.menuType'] === 'page'" :span="1" label="标签栏可见"
|
v-if="formModel.menuType === 'page'" :span="1" label="标签栏可见"
|
||||||
path="meta.withoutTab"
|
path="withoutTab"
|
||||||
>
|
>
|
||||||
<n-switch v-model:value="formModel['meta.withoutTab']" />
|
<n-switch v-model:value="formModel.withoutTab" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item v-if="formModel['meta.menuType'] === 'page'" :span="1" label="常驻标签栏" path="meta.pinTab">
|
<n-form-item-grid-item v-if="formModel.menuType === 'page'" :span="1" label="常驻标签栏" path="pinTab">
|
||||||
<n-switch v-model:value="formModel['meta.pinTab']" />
|
<n-switch v-model:value="formModel.pinTab" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="1" label="侧边菜单隐藏" path="meta.hide">
|
<n-form-item-grid-item :span="1" label="侧边菜单隐藏" path="hide">
|
||||||
<n-switch v-model:value="formModel['meta.hide']" />
|
<n-switch v-model:value="formModel.hide" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item
|
<n-form-item-grid-item
|
||||||
v-if="formModel['meta.menuType'] === 'page' && formModel['meta.hide']" :span="2"
|
v-if="formModel.menuType === 'page' && formModel.hide" :span="2"
|
||||||
path="meta.activeMenu"
|
path="activeMenu"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
高亮菜单
|
高亮菜单
|
||||||
<HelpInfo message="当前路由不在左侧菜单显示，但需要高亮某个菜单" />
|
<HelpInfo message="当前路由不在左侧菜单显示，但需要高亮某个菜单" />
|
||||||
</template>
|
</template>
|
||||||
<n-input v-model:value="formModel['meta.activeMenu']" />
|
<n-input v-model:value="formModel.activeMenu" />
|
||||||
</n-form-item-grid-item>
|
</n-form-item-grid-item>
|
||||||
<n-form-item-grid-item :span="2" path="meta.roles">
|
<n-form-item-grid-item :span="2" path="roles">
|
||||||
<template #label>
|
<template #label>
|
||||||
访问角色
|
访问角色
|
||||||
<HelpInfo message="不填写则表示所有角色都可以访问" />
|
<HelpInfo message="不填写则表示所有角色都可以访问" />
|
||||||
</template>
|
</template>
|
||||||
<n-select
|
<n-select
|
||||||
v-model:value="formModel['meta.roles']" multiple filterable
|
v-model:value="formModel.roles" multiple filterable
|
||||||
label-field="role"
|
label-field="role"
|
||||||
value-field="id"
|
value-field="id"
|
||||||
:options="options"
|
:options="options"
|
||||||
|
|||||||
@ -28,16 +28,16 @@ const columns: DataTableColumns<AppRoute.RowRoute> = [
|
|||||||
{
|
{
|
||||||
title: '图标',
|
title: '图标',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
key: 'meta.icon',
|
key: 'icon',
|
||||||
width: '6em',
|
width: '6em',
|
||||||
render: (row) => {
|
render: (row) => {
|
||||||
return row['meta.icon'] && renderIcon(row['meta.icon'], { size: 20 })()
|
return row.icon && renderIcon(row.icon, { size: 20 })()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '标题',
|
title: '标题',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
key: 'meta.title',
|
key: 'title',
|
||||||
ellipsis: {
|
ellipsis: {
|
||||||
tooltip: true,
|
tooltip: true,
|
||||||
},
|
},
|
||||||
@ -63,17 +63,17 @@ const columns: DataTableColumns<AppRoute.RowRoute> = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '排序值',
|
title: '排序值',
|
||||||
key: 'meta.order',
|
key: 'order',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: '6em',
|
width: '6em',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '菜单类型',
|
title: '菜单类型',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
key: 'meta.menuType',
|
key: 'menuType',
|
||||||
width: '6em',
|
width: '6em',
|
||||||
render: (row) => {
|
render: (row) => {
|
||||||
const menuType = row['meta.menuType'] || 'page'
|
const menuType = row.menuType || 'page'
|
||||||
const menuTagType: Record<AppRoute.MenuType, NaiveUI.ThemeColor> = {
|
const menuTagType: Record<AppRoute.MenuType, NaiveUI.ThemeColor> = {
|
||||||
dir: 'primary',
|
dir: 'primary',
|
||||||
page: 'warning',
|
page: 'warning',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user