blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-05 19:41:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: router system

Browse Source
This commit is contained in:
chansee97 2024-03-16 17:53:54 +08:00
parent 3300188081
commit 811ad3609b
23 changed files with 329 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env
View File

@ -6,3 +6,6 @@ VITE_APP_NAME=Nova - Admin
VITE_ROUTE_MODE = web
# 权限路由模式: static ｜ dynamic
VITE_AUTH_ROUTE_MODE=dynamic
# 设置登陆后跳转地址
VITE_HOME_PATH = /dashboard/workbench

4
build/plugins.ts
View File

@ -55,14 +55,14 @@ export function createVitePlugins(env: ImportMetaEnv) {
// auto use svg icon
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(__dirname, 'src/assets/icons')],
iconDirs: [path.resolve(__dirname, '../src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
// inject: 'body-last',
// customDomId: '__svg__icons__dom__',
}),
]
]
// use compression
if (env.VITE_COMPRESS_OPEN === 'Y') {
const { VITE_COMPRESS_TYPE = 'gzip' } = env

1
package.json
View File

@ -58,6 +58,7 @@
"pinia": "^2.1.7",
"pinia-plugin-persist": "^1.0.0",
"qs": "^6.12.0",
"radash": "^12.1.0",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},

2
src/components/custom/SvgIcon.vue
View File

@ -21,7 +21,7 @@ const symbolId = computed(() => `#${props.prefix}-${props.name}`)
aria-hidden="true"
:width="`${props.size}px`"
:height="`${props.size}px`"
display="inline"
class="inline"
>
<use
:xlink:href="symbolId"

2
src/hooks/useSystem.ts
View File

@ -1,5 +1,5 @@
import { isArray, isString } from 'radash'
import { useAuthStore } from '@/store'
import { isArray, isString } from '@/utils'
interface AppInfo {
/** 项目名称 */

2
src/layouts/components/common/Watermark.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
interface Props {
showWatermark: boolean
text: string
text?: string
}
const props = withDefaults(defineProps<Props>(), {
showWatermark: false,

50
src/layouts/components/header/Breadcrumb.vue
View File

@ -1,26 +1,48 @@
<script setup lang="ts">
import { useRouteStore } from '@/store'
import { useAppRouter } from '@/hooks'
const router = useRouter()
const routeStore = useRouteStore()
const { routerPush } = useAppRouter()
const route = useRoute()
const routes = computed(() => {
return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string)
return route.matched
})
</script>
<template>
<n-breadcrumb class="px-4">
<n-breadcrumb-item
v-for="(item, index) in routes"
:key="index"
@click="routerPush(item.path)"
<TransitionGroup name="list" tag="ul" style="display: flex; gap:1em;">
<n-el
v-for="(item) in routes"
:key="item.path"
tag="li" style="
color: var(--text-color-2);
transition: 0.3s var(--cubic-bezier-ease-in-out);
"
class="flex-center gap-2 cursor-pointer split"
@click="router.push(item.path)"
>
<e-icon :icon="item.meta.icon" />
{{ item.meta.title }}
</n-breadcrumb-item>
</n-breadcrumb>
</n-el>
</TransitionGroup>
</template>
<style scoped></style>
<style lang="scss">
.split:not(:first-child)::before {
content: '/';
padding-right:0.6em;
}
.list-move,
/* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}
.list-enter-from,.list-leave-to {
opacity: 0;
transform: translateY(-30px);
}
.list-leave-active {
position: absolute;
}
</style>

2
src/layouts/components/sider/Logo.vue
View File

@ -18,7 +18,7 @@ const appStore = useAppStore()
/>
<span
v-show="!appStore.collapsed"
class="mx-4"
class="mx-3"
>{{ name }}</span>
</div>
</template>

81
src/router/guard/dynamic.ts
View File

@ -1,7 +1,9 @@
import type { RouteRecordRaw } from 'vue-router'
import { clone, construct, min } from 'radash'
import { BasicLayout } from '@/layouts/index'
import { useRouteStore } from '@/store'
import { usePermission } from '@/hooks'
import { arrayToTree } from '@/utils'
// 引入所有页面
const modules = import.meta.glob('../../views/**/*.vue')
@ -10,70 +12,53 @@ const modules = import.meta.glob('../../views/**/*.vue')
function setRedirect(routes: AppRoute.Route[]) {
routes.forEach((route) => {
if (route.children) {
const nonHiddenChild = route.children.find(child => !child.meta || !child.meta.hide)
if (nonHiddenChild)
route.redirect = nonHiddenChild.path
if (!route.redirect) {
// 过滤出没有隐藏的子元素集
const visibleChilds = route.children.filter(child => !child.meta.hide)
// 过滤出含有order属性的页面
const orderChilds = visibleChilds.filter(child => child.meta.order)
// 重定向页默认第一个子元素的路径
let target = route.children[0]
if (orderChilds.length > 0)
// 有order则取最小者重定向
target = min(orderChilds, i => i.meta.order as number) as AppRoute.Route
route.redirect = target.path
}
setRedirect(route.children)
}
})
}
/* 路由树转换成一维数组 */
function FlatAuthRoutes(routes: AppRoute.Route[]) {
let result: AppRoute.Route[] = []
routes.forEach((item: AppRoute.Route) => {
if (item.children) {
const temp = item.children || []
delete item.children
result.push(item)
result = [...result, ...FlatAuthRoutes(temp)]
}
else {
result.push(item)
}
})
return result
}
/* 路由无权限过滤 */
function filterPermissionRoutes(routes: AppRoute.Route[]) {
export function createDynamicRoutes(routes: AppRoute.RowRoute[]) {
const { hasPermission } = usePermission()
return routes.filter((route) => {
return hasPermission(route.meta.roles)
})
}
// 结构化meta字段
let resultRouter = clone(routes).map(i => construct(i)) as AppRoute.Route[]
// 路由权限过滤
resultRouter = resultRouter.filter(i => hasPermission(i.meta.roles))
function createCatheRoutes(routes: AppRoute.Route[]) {
return routes
.filter((item) => {
return item.meta.keepAlive
})
.map(item => item.name)
}
export function createDynamicRoutes(routes: AppRoute.Route[]) {
/* 复制一层 */
let resultRouter = JSON.parse(JSON.stringify(routes))
/* 设置路由重定向到子级第一个 */
setRedirect(resultRouter)
// 数组降维成一维数组,然后删除所有的childen
resultRouter = FlatAuthRoutes(resultRouter)
/* 路由权限过滤 */
resultRouter = filterPermissionRoutes(resultRouter)
// 过滤需要缓存的路由name数组
// 生成需要keepAlive的路由name数组
const routeStore = useRouteStore()
routeStore.cacheRoutes = createCatheRoutes(resultRouter)
routeStore.cacheRoutes = resultRouter.filter((i) => {
return i.meta.keepAlive
})
.map(i => i.name)
// 生成路由，有redirect的不需要引入文件
resultRouter = resultRouter.map((item: any) => {
if (!item.redirect) {
// 动态加载对应页面
item.component = modules[`../../views${item.path}/index.vue`]
}
if (item.componentPath && !item.redirect)
item.component = modules[`../../views${item.componentPath}`]
return item
})
resultRouter = arrayToTree(resultRouter) as AppRoute.Route[]
setRedirect(resultRouter)
const appRootRoute: RouteRecordRaw = {
path: '/appRoot',
name: 'appRoot',
redirect: '/dashboard/workbench',
redirect: import.meta.env.VITE_HOME_PATH,
component: BasicLayout,
meta: {
title: '首页',

4
src/router/index.ts
View File

@ -1,7 +1,7 @@
import type { App } from 'vue'
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import { setupRouterGuard } from '@/router/guard'
import { routes } from '@/router/routes'
import { routes } from './routes'
import { setupRouterGuard } from './guard'
const { VITE_ROUTE_MODE = 'hash', VITE_BASE_URL } = import.meta.env
export const router = createRouter({

30
src/router/modules/dashboard.ts
View File

@ -1,30 +0,0 @@
export const dashboard = {
name: 'dashboard',
path: '/dashboard',
redirect: '/dashboard/workbench',
meta: {
title: '分析页-static',
requiresAuth: true,
icon: 'icon-park-outline:analysis',
},
children: [
{
name: 'dashboard_workbench',
path: '/dashboard/workbench',
meta: {
title: '工作台',
requiresAuth: true,
icon: 'icon-park-outline:alarm',
},
},
{
name: 'dashboard_monitor',
path: '/dashboard/monitor',
meta: {
title: '监控页',
requiresAuth: true,
icon: 'icon-park-outline:anchor',
},
},
],
}

4
src/router/modules/index.ts
View File

@ -1,4 +0,0 @@
import { dashboard } from './dashboard'
import { test } from './test'
export const staticRoutes = [dashboard, test]

63
src/router/modules/test.ts
View File

@ -1,63 +0,0 @@
export const test = {
name: 'test',
path: '/test',
redirect: '/test/test1',
meta: {
title: '测试专题',
requiresAuth: true,
icon: 'icon-park-outline:ambulance',
},
children: [
{
name: 'test1',
path: '/test/test1',
meta: {
title: '测试专题1',
requiresAuth: true,
icon: 'icon-park-outline:alarm',
},
},
{
name: 'test2',
path: '/test/test2',
meta: {
title: '测试专题2',
requiresAuth: true,
icon: 'icon-park-outline:pic',
},
children: [
{
name: 'test2_detail',
path: '/test/test2/detail',
meta: {
title: '测试专题2的详情页',
requiresAuth: true,
icon: 'icon-park-outline:tool',
hide: true,
activeMenu: '/test/test2',
},
},
],
},
{
name: 'test3',
path: '/test/test3',
meta: {
title: '测试专题3',
requiresAuth: true,
icon: 'icon-park-outline:tool',
},
children: [
{
name: 'test4',
path: '/test/test3/test4',
meta: {
title: '测试专题4',
requiresAuth: true,
icon: 'icon-park-outline:tool',
},
},
],
},
],
}

10
src/router/routes/index.ts
View File

@ -1,5 +1,4 @@
import type { RouteRecordRaw } from 'vue-router'
import { BasicLayout } from '@/layouts/index'
/* 页面中的一些固定路由，错误页等 */
export const routes: RouteRecordRaw[] = [
@ -7,7 +6,7 @@ export const routes: RouteRecordRaw[] = [
path: '/',
name: 'root',
redirect: '/appRoot',
component: BasicLayout,
component: () => import('@/layouts/index'),
children: [
],
},
@ -48,7 +47,12 @@ export const routes: RouteRecordRaw[] = [
},
{
path: '/:pathMatch(.*)*',
redirect: '/404',
component: () => import('@/views/error/404/index.vue'),
name: '404',
meta: {
title: '找不到页面',
icon: 'icon-park-outline:ghost',
},
},
]

140
src/router/staticRoutes.ts Normal file
View File

@ -0,0 +1,140 @@
export const staticRoutes: AppRoute.RowRoute[] = [
{
'id': 1,
'pid': 0,
'name': 'dashboard',
'path': '/dashboard',
'componentPath': null,
'redirect': '/dashboard/workbench',
'meta.title': '分析页',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:analysis',
},
{
'id': 2,
'pid': 1,
'name': 'dashboard_workbench',
'path': '/dashboard/workbench',
'componentPath': '/dashboard/workbench/index.vue',
'meta.title': '工作台',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:alarm',
},
{
'id': 3,
'pid': 1,
'name': 'dashboard_monitor',
'path': '/dashboard/monitor',
'componentPath': '/dashboard/monitor/index.vue',
'meta.title': '监控页',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:anchor',
},
{
'id': 4,
'pid': 0,
'name': 'test',
'path': '/test',
'componentPath': null,
'redirect': '/test/test1',
'meta.title': '测试专题',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:ambulance',
},
{
'id': 5,
'pid': 4,
'name': 'test1',
'path': '/test/test1',
'componentPath': '/test/test1/index.vue',
'meta.title': '测试专题1',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:alarm',
},
{
'id': 6,
'pid': 4,
'name': 'test2',
'path': '/test/test2',
'componentPath': '/test/test2/index.vue',
'meta.title': '测试专题2',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:pic',
},
{
'id': 7,
'pid': 6,
'name': 'test2_detail',
'path': '/test/test2/detail',
'componentPath': '/test/test2/detail/index.vue',
'meta.title': '测试专题2的详情页',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:tool',
'meta.hide': true,
'meta.activeMenu': '/test/test2',
},
{
'id': 8,
'pid': 4,
'name': 'test3',
'path': '/test/test3',
'componentPath': null,
'meta.title': '测试专题3',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:tool',
},
{
'id': 9,
'pid': 8,
'name': 'test4',
'path': '/test/test3/test4',
'componentPath': '/test/test3/test4/index.vue',
'meta.title': '测试专题4',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:tool',
},
{
'id': 10,
'pid': 0,
'name': 'permission',
'path': '/permission',
'componentPath': null,
'meta.title': '权限示例',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:people-safe',
},
{
'id': 11,
'pid': 10,
'name': 'permission_permission',
'path': '/permission/permission',
'componentPath': '/permission/permission/index.vue',
'meta.title': '权限示例',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:right-user',
},
{
'id': 12,
'pid': 10,
'name': 'permission_justSuper',
'path': '/permission/justSuper',
'componentPath': '/permission/justSuper/index.vue',
'meta.title': '超管super可见',
'meta.requiresAuth': true,
'meta.icon': 'icon-park-outline:wrong-user',
'meta.roles': [
'super',
],
},
{
'id': 13,
'pid': 0,
'name': 'PluginMap',
'path': '/plugin/map',
'componentPath': '/plugin/map/index.vue',
'meta.title': '地图',
'meta.requiresAuth': true,
'meta.icon': 'carbon:map',
'meta.keepAlive': true,
},
]

2
src/service/api/login.ts
View File

@ -23,5 +23,5 @@ export function fetchUserInfo(params: any) {
return alovaInstance.Get<Auth.UserInfo>('/getUserInfo', { params })
}
export function fetchUserRoutes(params: { id: number }) {
return alovaInstance.Get<AppRoute.Route[]>('/getUserRoutes', { params })
return alovaInstance.Get<AppRoute.RowRoute[]>('/getUserRoutes', { params })
}

1
src/store/index.ts
View File

@ -7,7 +7,6 @@ export * from './route'
export * from './tab'
// 安装pinia全局状态库
export function installPinia(app: App) {
const pinia = createPinia()
pinia.use(piniaPluginPersist)

114
src/store/route.ts
View File

@ -1,17 +1,18 @@
import type { MenuOption } from 'naive-ui'
import { RouterLink } from 'vue-router'
import { h } from 'vue'
import { local, renderIcon } from '@/utils'
import { clone, construct } from 'radash'
import { arrayToTree, local, renderIcon } from '@/utils'
import { createDynamicRoutes } from '@/router/guard/dynamic'
import { router } from '@/router'
import { fetchUserRoutes } from '@/service'
import { staticRoutes } from '@/router/modules'
import { staticRoutes } from '@/router/staticRoutes'
import { usePermission } from '@/hooks'
interface RoutesStatus {
isInitAuthRoute: boolean
menus: any
userRoutes: AppRoute.Route[]
userRoutes: AppRoute.RowRoute[]
activeMenu: string | null
authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE']
cacheRoutes: string[]
@ -36,25 +37,6 @@ export const useRouteStore = defineStore('route-store', {
/* 删除后面添加的路由 */
router.removeRoute('appRoot')
},
/* 根据当前路由的name生成面包屑数据 */
createBreadcrumbFromRoutes(routeName = '/') {
const path: AppRoute.Route[] = []
// 筛选所有包含目标的各级路由组合成一维数组
const getPathfromRoutes = (
routeName: string,
userRoutes: AppRoute.Route[],
) => {
userRoutes.forEach((item) => {
if (this.hasPathinAllPath(routeName, item)) {
path.push(item)
if (item.children && item.children.length !== 0)
getPathfromRoutes(routeName, item.children)
}
})
}
getPathfromRoutes(routeName, this.userRoutes)
return path
},
/* 判断当前路由和子路由中是否存在为routeName的路由 */
hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
if (userRoutes.name === routeName)
@ -76,48 +58,37 @@ export const useRouteStore = defineStore('route-store', {
this.activeMenu = key
},
/* 生成侧边菜单的数据 */
createMenus(userRoutes: AppRoute.Route[]) {
createMenus(userRoutes: AppRoute.RowRoute[]) {
this.userRoutes = userRoutes
let resultMenus: AppRoute.Route[] = JSON.parse(JSON.stringify(userRoutes))
resultMenus = this.removeHiddenRoutes(resultMenus)
this.menus = this.transformAuthRoutesToMenus(resultMenus)
},
/** 过滤不需要显示的菜单 */
removeHiddenRoutes(routes: AppRoute.Route[]) {
return routes.filter((route) => {
if (route.meta && route.meta.hide)
return false
else if (route.children)
route.children = this.removeHiddenRoutes(route.children)
return true
})
const resultMenus = clone(userRoutes).map(i => construct(i)) as AppRoute.Route[]
/** 过滤不需要显示的菜单 */
const visibleMenus = resultMenus.filter(route => !route.meta.hide)
// 生成侧边菜单
this.menus = arrayToTree(this.transformAuthRoutesToMenus(visibleMenus))
},
//* 将返回的路由表渲染成侧边栏 */
transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] {
return (
userRoutes
/** 过滤没有权限的侧边菜单 */
.filter((item: AppRoute.Route) => {
const { hasPermission } = usePermission()
return hasPermission(item.meta.roles)
})
/** 根据order大小菜单排序 */
.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
})
/** 转换为侧边菜单数据结构 */
.map((item) => {
const target: MenuOption = {
label:
const { hasPermission } = usePermission()
/** 过滤没有权限的侧边菜单 */
return userRoutes.filter(i => hasPermission(i.meta.roles))
/** 根据order大小菜单排序 */
.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
})
/** 转换为侧边菜单数据结构 */
.map((item) => {
const target: MenuOption = {
id: item.id,
pid: item.pid,
label:
(!item.children || item.children.length === 0)
? () =>
h(
@ -130,20 +101,19 @@ export const useRouteStore = defineStore('route-store', {
{ default: () => item.meta.title },
)
: item.meta.title,
key: item.path,
icon: renderIcon(item.meta.icon),
}
/** 判断子元素 */
if (item.children) {
const children = this.transformAuthRoutesToMenus(item.children)
// 只有子元素有且不为空时才添加
if (children.length !== 0)
target.children = children
else target.children = undefined
}
return target
})
)
key: item.path,
icon: renderIcon(item.meta.icon),
}
/** 判断子元素 */
if (item.children) {
const children = this.transformAuthRoutesToMenus(item.children)
// 只有子元素有且不为空时才添加
if (children.length !== 0)
target.children = children
else target.children = undefined
}
return target
})
},
/* 初始化动态路由 */
async initDynamicRoute() {

2
src/typings/env.d.ts vendored
View File

@ -32,6 +32,8 @@ interface ImportMetaEnv {
readonly VITE_ROUTE_MODE?: 'hash' | 'web'
/** 路由加载模式 */
readonly VITE_AUTH_ROUTE_MODE?: 'static' | 'dynamic'
/** 首次加载页面 */
readonly VITE_HOME_PATH: string
/** 后端服务的环境类型 */
readonly MODE: ServiceEnvType

46
src/typings/route.d.ts vendored
View File

@ -1,22 +1,7 @@
declare namespace AppRoute {
/** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
interface Route {
/** 路由名称(路由唯一标识) */
name: string
/** 路由路径 */
path: string
/** 路由重定向 */
redirect?: string
/** 子路由 */
children?: Route[]
/** 路由描述 */
meta: RouteMeta
/** 路由属性 */
// props?: boolean | Record<string, any> | ((to: any) => Record<string, any>);
}
/** 路由描述 */
interface RouteMeta {
/* 页面标题，通常必选。 */
/* 页面标题，通常必选。 */
title: string
/* 图标，一般配合菜单使用 */
icon?: string
@ -35,4 +20,33 @@ declare namespace AppRoute {
/** 当前路由需要选中的菜单项(用于跳转至不在左侧菜单显示的路由且需要高亮某个菜单的情况) */
activeMenu?: string
}
/** 单个路由的类型结构(动态路由模式：后端返回此类型结构的路由) */
interface baseRoute {
/** 路由名称(路由唯一标识) */
name: string
/** 路由路径 */
path: string
/** 路由重定向 */
redirect?: string
/* 页面组件地址 */
componentPath?: string | null
// 路由id
id: numnber
// 父级路由id，顶级页面为0
pid: number
}
type RowRoute = {
[K in keyof RouteMeta as `meta.${K}`]?: RouteMeta[K]
} & baseRoute
interface Route extends baseRoute {
/** 子路由 */
children?: Route[]
/* 页面组件 */
component: any
/** 路由描述 */
meta: RouteMeta
}
}

24
src/utils/index.ts
View File

@ -1,3 +1,25 @@
export * from './icon'
export * from './is'
export * from './storage'
export function arrayToTree(arr) {
const map = {}
arr.forEach((item) => {
map[item.id] = { ...item }
})
arr.forEach((item) => {
if (item.pid !== 0) {
const parent = map[item.pid]
if (parent) {
parent.children = parent.children || []
parent.children.push(map[item.id])
}
}
})
// 找出根节点
const tree = Object.values(map).filter(item => item.pid === 0)
return tree
}

97
src/utils/is.ts
View File

@ -1,97 +0,0 @@
const toString = Object.prototype.toString.bind({})
export function is(val: unknown, type: string) {
return toString.call(val) === `[object ${type}]`
}
export function isString(val: unknown): val is string {
return is(val, 'String')
}
export function isNumber(val: unknown): val is number {
return is(val, 'Number')
}
export function isBoolean(val: unknown): val is boolean {
return is(val, 'Boolean')
}
export function isNull(val: unknown): val is null {
return val === null
}
export function isUnDef<T = unknown>(val?: T): val is T {
return !isDef(val)
}
export function isDef<T = unknown>(val?: T): val is T {
return typeof val !== 'undefined'
}
export function isNullOrUnDef(val: unknown): val is null | undefined {
return isUnDef(val) || isNull(val)
}
export function isObject(val: any): val is Record<any, any> {
return val !== null && is(val, 'Object')
}
export function isArray(val: any): val is Array<any> {
return val && Array.isArray(val)
}
export function isEmpty<T = unknown>(val: T): val is T {
if (isArray(val) || isString(val))
return val.length === 0
if (val instanceof Map || val instanceof Set)
return val.size === 0
if (isObject(val))
return Object.keys(val).length === 0
return false
}
export function isDate(val: unknown): val is Date {
return is(val, 'Date')
}
export function isPromise<T = any>(val: unknown): val is Promise<T> {
return (
is(val, 'Promise')
&& isObject(val)
&& isFunction(val.then)
&& isFunction(val.catch)
)
}
export function isFunction(val: unknown): val is Function {
return typeof val === 'function'
}
export function isFile<T extends File>(val: T | unknown): val is T {
return is(val, 'File')
}
export function isRegExp(val: unknown): val is RegExp {
return is(val, 'RegExp')
}
export function isWindow(val: any): val is Window {
return typeof window !== 'undefined' && is(val, 'Window')
}
export function isElement(val: unknown): val is Element {
return isObject(val) && !!val.tagName
}
export const isServer = typeof window === 'undefined'
export const isClient = !isServer
export function isUrl(path: string): boolean {
const reg
= /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/
return reg.test(path)
}

6
src/views/test/test2/detail/index.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts"></script>
<template>
<div text-center>
这是详情子页，他不会出现在侧边栏
</div>
<n-alert title="目前可公开的情报" type="warning">
这是详情子页，他不会出现在侧边栏,他其实是上个页面的同级，并不是下级，这个要注意
</n-alert>
</template>
<style scoped></style>