diff --git a/.vscode/settings.json b/.vscode/settings.json index ef8964c5..daa7a4ed 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -62,6 +62,7 @@ "material-icon-theme.folders.associations": { "enum": "typescript", "store": "context", + "composables": "hook", "business": "core", } } diff --git a/src/composables/common/index.ts b/src/composables/common/index.ts new file mode 100644 index 00000000..326c800c --- /dev/null +++ b/src/composables/common/index.ts @@ -0,0 +1,4 @@ +export * from './route'; +export * from './router'; +export * from './system'; +export * from './layout'; diff --git a/src/composables/common/layout.ts b/src/composables/common/layout.ts new file mode 100644 index 00000000..82977b81 --- /dev/null +++ b/src/composables/common/layout.ts @@ -0,0 +1,49 @@ +import { computed } from 'vue'; +import { useThemeStore, useAppStore } from '@/store'; + +export function useLayoutConfig() { + const theme = useThemeStore(); + const app = useAppStore(); + + /** 反转sider */ + const siderInverted = computed(() => theme.navStyle.theme !== 'light'); + + /** 侧边菜单宽度 */ + const siderMenuWidth = computed(() => { + const { collapsed } = app.menu; + const { collapsedWidth, width } = theme.menuStyle; + return collapsed ? collapsedWidth : width; + }); + + /** 反转header */ + const headerInverted = computed(() => (theme.navStyle.theme !== 'dark' ? siderInverted.value : !siderInverted.value)); + + /** 头部定位 */ + const headerPosition = computed(() => (theme.fixedHeaderAndTab ? 'absolute' : 'static')); + + /** 全局头部的高度(px) */ + const headerHeight = computed(() => `${theme.headerStyle.height}px`); + + /** 多页签Tab的高度(px) */ + const multiTabHeight = computed(() => `${theme.multiTabStyle.height}px`); + + /** 全局头部和多页签的总高度 */ + const headerAndMultiTabHeight = computed(() => { + const { + multiTabStyle: { visible, height: tH }, + headerStyle: { height: hH } + } = theme; + const height = visible ? tH + hH : hH; + return `${height}px`; + }); + + return { + siderInverted, + siderMenuWidth, + headerInverted, + headerPosition, + headerHeight, + multiTabHeight, + headerAndMultiTabHeight + }; +} diff --git a/src/composables/common/route.ts b/src/composables/common/route.ts new file mode 100644 index 00000000..f29288e8 --- /dev/null +++ b/src/composables/common/route.ts @@ -0,0 +1,63 @@ +import { computed, watch } from 'vue'; +import { useRoute } from 'vue-router'; +import { routeName } from '@/router'; +import type { RouteKey } from '@/interface'; + +/** + * 路由属性 + * @description - 必须要在setup里面调用 + */ +export function useRouteProps() { + const route = useRoute(); + const props = computed(() => { + /** 路由名称 */ + const name = route.name as string; + /** 缓存页面 */ + const keepAlive = Boolean(route.meta?.keepAlive); + /** 视高100% */ + const fullPage = Boolean(route.meta?.fullPage); + + return { + name, + keepAlive, + fullPage + }; + }); + + return props; +} + +/** + * 路由查询参数 + * @description - 必须要在setup里面调用 + */ +export function useRouteQuery() { + const route = useRoute(); + + /** 登录跳转链接 */ + const loginRedirectUrl = computed(() => { + let url: string | undefined; + if (route.name === routeName('login')) { + url = (route.query?.redirectUrl as string) || ''; + } + return url; + }); + + return { + loginRedirectUrl + }; +} + +/** + * 路由名称变化后的回调 + * @param callback + */ +export function routeNameWatcher(callback: (name: RouteKey) => void) { + const route = useRoute(); + watch( + () => route.name, + newValue => { + callback(newValue as RouteKey); + } + ); +} diff --git a/src/hooks/common/useRouterChange.ts b/src/composables/common/router.ts similarity index 71% rename from src/hooks/common/useRouterChange.ts rename to src/composables/common/router.ts index 9d81a77f..c5cf9fbd 100644 --- a/src/hooks/common/useRouterChange.ts +++ b/src/composables/common/router.ts @@ -1,20 +1,13 @@ import { useRouter, useRoute } from 'vue-router'; import type { RouteLocationRaw } from 'vue-router'; -import { EnumRoutePath } from '@/enum'; -import { router as globalRouter } from '@/router'; +import { router as globalRouter, routePath } from '@/router'; import type { LoginModuleType } from '@/interface'; -/** - * 重定向地址 - * - current: 取当前的path作为重定向地址 - */ -type LoginRedirect = 'current' | EnumRoutePath; - /** * 路由跳转 * @param inSetup - 是否在vue页面/组件的setup里面调用 */ -export default function useRouterChange(inSetup: boolean = true) { +export function useRouterPush(inSetup: boolean = true) { const router = inSetup ? useRouter() : globalRouter; const route = inSetup ? useRoute() : null; @@ -23,6 +16,11 @@ export default function useRouterChange(inSetup: boolean = true) { router.push('/'); } + /** + * 重定向地址 + * - current: 取当前的path作为重定向地址 + */ + type LoginRedirect = 'current' | string; /** * 跳转登录页面(通过vue路由) * @param module - 展示的登录模块 @@ -30,13 +28,13 @@ export default function useRouterChange(inSetup: boolean = true) { */ function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl: LoginRedirect = 'current') { const routeLocation: RouteLocationRaw = { - path: EnumRoutePath.login, + path: routePath('login'), query: { module } }; if (redirectUrl) { let url = redirectUrl; if (redirectUrl === 'current') { - url = router.currentRoute.value.fullPath as EnumRoutePath; + url = router.currentRoute.value.fullPath; } routeLocation.query!.redirectUrl = url; } @@ -51,12 +49,12 @@ export default function useRouterChange(inSetup: boolean = true) { function toCurrentLogin(module: LoginModuleType) { if (route) { const { query } = route; - router.push({ path: EnumRoutePath.login, query: { ...query, module } }); + router.push({ path: routePath('login'), query: { ...query, module } }); } } /** 登录后跳转重定向的地址 */ - function toLoginRedirectUrl(path: EnumRoutePath) { + function toLoginRedirectUrl(path: string) { router.push(path); } diff --git a/src/hooks/common/useIsMobile.ts b/src/composables/common/system.ts similarity index 56% rename from src/hooks/common/useIsMobile.ts rename to src/composables/common/system.ts index f2860f31..1d9caa4e 100644 --- a/src/hooks/common/useIsMobile.ts +++ b/src/composables/common/system.ts @@ -1,11 +1,13 @@ import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'; +/** 项目名称 */ +export function useAppTitle() { + return import.meta.env.VITE_APP_TITLE as string; +} + /** 是否是移动端 */ -export default function useIsMobile() { +export function useIsMobile() { const breakpoints = useBreakpoints(breakpointsTailwind); const isMobile = breakpoints.smaller('lg'); - - return { - isMobile - }; + return isMobile; } diff --git a/src/composables/index.ts b/src/composables/index.ts new file mode 100644 index 00000000..d0b93236 --- /dev/null +++ b/src/composables/index.ts @@ -0,0 +1 @@ +export * from './common'; diff --git a/src/enum/business.ts b/src/enum/business/index.ts similarity index 100% rename from src/enum/business.ts rename to src/enum/business/index.ts diff --git a/src/enum/animate.ts b/src/enum/common/animate.ts similarity index 100% rename from src/enum/animate.ts rename to src/enum/common/animate.ts diff --git a/src/enum/common/index.ts b/src/enum/common/index.ts new file mode 100644 index 00000000..8967de30 --- /dev/null +++ b/src/enum/common/index.ts @@ -0,0 +1,5 @@ +export * from './system'; +export * from './theme'; +export * from './animate'; +export * from './typeof'; +export * from './storage'; diff --git a/src/enum/storage.ts b/src/enum/common/storage.ts similarity index 100% rename from src/enum/storage.ts rename to src/enum/common/storage.ts diff --git a/src/enum/common.ts b/src/enum/common/system.ts similarity index 52% rename from src/enum/common.ts rename to src/enum/common/system.ts index b4366cb2..8acd9998 100644 --- a/src/enum/common.ts +++ b/src/enum/common/system.ts @@ -5,21 +5,6 @@ export enum ContentType { formData = 'multipart/form-data' } -/** 数据类型 */ -export enum EnumDataType { - number = '[object Number]', - string = '[object String]', - boolean = '[object Boolean]', - null = '[object Null]', - undefined = '[object Undefined]', - object = '[object Object]', - array = '[object Array]', - date = '[object Date]', - regexp = '[object RegExp]', - set = '[object Set]', - map = '[object Map]' -} - /** 登录模块 */ export enum EnumLoginModule { 'pwd-login' = '账密登录', diff --git a/src/enum/theme.ts b/src/enum/common/theme.ts similarity index 100% rename from src/enum/theme.ts rename to src/enum/common/theme.ts diff --git a/src/enum/common/typeof.ts b/src/enum/common/typeof.ts new file mode 100644 index 00000000..76a72de7 --- /dev/null +++ b/src/enum/common/typeof.ts @@ -0,0 +1,14 @@ +/** 数据类型 */ +export enum EnumDataType { + number = '[object Number]', + string = '[object String]', + boolean = '[object Boolean]', + null = '[object Null]', + undefined = '[object Undefined]', + object = '[object Object]', + array = '[object Array]', + date = '[object Date]', + regexp = '[object RegExp]', + set = '[object Set]', + map = '[object Map]' +} diff --git a/src/enum/index.ts b/src/enum/index.ts index 59d826ee..d0b93236 100644 --- a/src/enum/index.ts +++ b/src/enum/index.ts @@ -1,5 +1 @@ export * from './common'; -export * from './animate'; -export * from './theme'; -export * from './route'; -export * from './storage'; diff --git a/src/enum/route.ts b/src/enum/route.ts deleted file mode 100644 index 8d9d27e5..00000000 --- a/src/enum/route.ts +++ /dev/null @@ -1,71 +0,0 @@ -export enum EnumRoutePath { - 'root' = '/', - 'login' = '/login', - 'not-found' = '/404', - 'no-permission' = '/403', - 'service-error' = '/500', - 'reload' = '/reload', - // 自定义路由 - 'dashboard' = '/dashboard', - 'dashboard_analysis' = '/dashboard/analysis', - 'dashboard_workbench' = '/dashboard/workbench', - 'document' = '/document', - 'document_vue' = '/document/vue', - 'document_vite' = '/document/vite', - 'document_naive' = '/document/naive', - 'component' = '/component', - 'component_map' = '/component/map', - 'component_video' = '/component/video', - 'component_editor' = '/component/editor', - 'component_editor_quill' = '/component/editor/quill', - 'component_editor_markdown' = '/component/editor/markdown', - 'component_swiper' = '/component/swiper', - 'feat' = '/feat', - 'feat_copy' = '/feat/copy', - 'feat_icon' = '/feat/icon', - 'feat_print' = '/feat/print', - 'multi-menu' = '/multi-menu', - 'multi-menu_first' = '/multi-menu/first', - 'multi-menu_first_second' = '/multi-menu/first/second', - 'exception' = '/exception', - 'exception_403' = '/exception/403', - 'exception_404' = '/exception/404', - 'exception_500' = '/exception/500', - 'about' = '/about' -} - -export enum EnumRouteTitle { - 'root' = 'root', - 'login' = '登录', - 'not-found' = '未找到', - 'no-permission' = '无权限', - 'service-error' = '服务器错误', - 'reload' = '重载', - // 自定义路由 - 'dashboard' = '仪表盘', - 'dashboard_analysis' = '分析页', - 'dashboard_workbench' = '工作台', - 'document' = '文档', - 'document_vue' = 'vue文档', - 'document_vite' = 'vite文档', - 'document_naive' = 'naive文档', - 'component' = '组件插件', - 'component_map' = '地图插件', - 'component_video' = '视频插件', - 'component_editor' = '编辑器', - 'component_editor_quill' = '富文本编辑器', - 'component_editor_markdown' = 'markdown编辑器', - 'component_swiper' = 'Swiper插件', - 'feat' = '功能示例', - 'feat_copy' = '剪贴板', - 'feat_icon' = '图标', - 'feat_print' = '打印', - 'multi-menu' = '多级菜单', - 'multi-menu_first' = '一级菜单', - 'multi-menu_first_second' = '二级菜单', - 'exception' = '异常页', - 'exception_403' = '异常页-403', - 'exception_404' = '异常页-404', - 'exception_500' = '异常页-500', - 'about' = '关于' -} diff --git a/src/hooks/business/useCountDown.ts b/src/hooks/business/useCountDown.ts index a9ee43b3..d3951ba8 100644 --- a/src/hooks/business/useCountDown.ts +++ b/src/hooks/business/useCountDown.ts @@ -1,5 +1,5 @@ import { ref, computed } from 'vue'; -import useBoolean from '../common/useBoolean'; +import { useBoolean } from '../common'; /** * 倒计时 @@ -9,10 +9,10 @@ export default function useCountDown(second: number) { if (second <= 0 && second % 1 !== 0) { throw Error('倒计时的时间应该为一个正整数！'); } + const { bool: isComplete, setTrue, setFalse } = useBoolean(false); + const counts = ref(0); const isCounting = computed(() => Boolean(counts.value)); - // 完成一轮倒计时 - const { bool: isComplete, setTrue, setFalse } = useBoolean(false); let intervalId: any; diff --git a/src/hooks/common/index.ts b/src/hooks/common/index.ts index 4a651d40..4b77ff5b 100644 --- a/src/hooks/common/index.ts +++ b/src/hooks/common/index.ts @@ -1,23 +1,5 @@ -import useAppTitle from './useAppTitle'; import useContext from './useContext'; -import useRouterChange from './useRouterChange'; -import useRouteParam from './useRouteParam'; -import useRouteQuery from './useRouteQuery'; -import useRouteProps from './useRouteProps'; import useBoolean from './useBoolean'; import useLoading from './useLoading'; -import useScrollBehavior from './useScrollBehavior'; -import useIsMobile from './useIsMobile'; -export { - useAppTitle, - useContext, - useRouterChange, - useRouteParam, - useRouteQuery, - useRouteProps, - useBoolean, - useLoading, - useScrollBehavior, - useIsMobile -}; +export { useContext, useBoolean, useLoading }; diff --git a/src/hooks/common/useAppTitle.ts b/src/hooks/common/useAppTitle.ts deleted file mode 100644 index 6685cdf8..00000000 --- a/src/hooks/common/useAppTitle.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** 项目名称 */ -export default function useAppTitle() { - const title = import.meta.env.VITE_APP_TITLE as string; - - return title; -} diff --git a/src/hooks/common/useRouteParam.ts b/src/hooks/common/useRouteParam.ts deleted file mode 100644 index 044bd6c4..00000000 --- a/src/hooks/common/useRouteParam.ts +++ /dev/null @@ -1,7 +0,0 @@ -// import { computed } from 'vue'; -// import { useRoute } from 'vue-router'; -// import { ROUTE_NAME_MAP } from '@/utils'; - -export default function useRouteParam() { - // const route = useRoute(); -} diff --git a/src/hooks/common/useRouteProps.ts b/src/hooks/common/useRouteProps.ts deleted file mode 100644 index 117d2e51..00000000 --- a/src/hooks/common/useRouteProps.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { computed } from 'vue'; -import { useRoute } from 'vue-router'; - -export default function useRouteProps() { - const route = useRoute(); - const props = computed(() => { - /** 路由名称 */ - const name = route.name as string; - /** 混存页面 */ - const keepAlive = Boolean(route.meta?.keepAlive); - /** 视高100% */ - const fullPage = Boolean(route.meta?.fullPage); - - return { - name, - keepAlive, - fullPage - }; - }); - - return props; -} diff --git a/src/hooks/common/useRouteQuery.ts b/src/hooks/common/useRouteQuery.ts deleted file mode 100644 index 26501027..00000000 --- a/src/hooks/common/useRouteQuery.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { computed } from 'vue'; -import { useRoute } from 'vue-router'; -import { EnumRoutePath } from '@/enum'; -import { ROUTE_NAME_MAP } from '@/utils'; - -export default function useRouteQuery() { - const route = useRoute(); - - /** 登录跳转链接 */ - const loginRedirectUrl = computed(() => { - let url: EnumRoutePath | undefined; - if (route.name === ROUTE_NAME_MAP.get('login')) { - url = (route.query?.redirectUrl as EnumRoutePath) || ''; - } - return url; - }); - - return { - loginRedirectUrl - }; -} diff --git a/src/hooks/common/useScrollBehavior.ts b/src/hooks/common/useScrollBehavior.ts deleted file mode 100644 index 9518f469..00000000 --- a/src/hooks/common/useScrollBehavior.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { ref } from 'vue'; - -/** 滚动行为 */ -export default function useScrollBehavior() { - const scrollbar = ref(null); - - /** 重置滚动条行为 */ - function resetScrollBehavior() { - scrollbar.value?.scrollTo({ left: 0, top: 0 }); - } - - return { - scrollbar, - resetScrollBehavior - }; -} diff --git a/src/interface/business.ts b/src/interface/business/auth.ts similarity index 100% rename from src/interface/business.ts rename to src/interface/business/auth.ts diff --git a/src/interface/business/index.ts b/src/interface/business/index.ts new file mode 100644 index 00000000..269586ee --- /dev/null +++ b/src/interface/business/index.ts @@ -0,0 +1 @@ +export * from './auth'; diff --git a/src/interface/common.ts b/src/interface/common.ts deleted file mode 100644 index 0abe53ca..00000000 --- a/src/interface/common.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { RouteRecordRaw } from 'vue-router'; -import type { MenuOption } from 'naive-ui'; -import { EnumRoutePath, EnumLoginModule } from '@/enum'; - -/** 路由描述 */ -interface RouteMeta { - /** 路由名称 */ - title?: string; - /** 缓存页面 */ - keepAlive?: boolean; - /** 页面100%视高 */ - fullPage?: boolean; - /** 不作为菜单 */ - isNotMenu?: boolean; - /** 菜单和面包屑对应的图标 */ - icon?: string; - /** 路由作为菜单时的排序 */ - order?: number; -} - -/** 路由配置 */ -export type CustomRoute = RouteRecordRaw & { meta: RouteMeta }; - -/** 路由路径 */ -export type RoutePathKey = keyof typeof EnumRoutePath; - -/** 菜单项配置 */ -export type GlobalMenuOption = MenuOption & { - routeName: string; - routePath: string; -}; - -/** 登录模块 */ -export type LoginModuleType = keyof typeof EnumLoginModule; - -/** npm依赖包版本信息 */ -export interface VersionInfo { - name: string; - version: string; -} diff --git a/src/interface/common/index.ts b/src/interface/common/index.ts new file mode 100644 index 00000000..5f7b5951 --- /dev/null +++ b/src/interface/common/index.ts @@ -0,0 +1,2 @@ +export * from './system'; +export * from './route'; diff --git a/src/interface/common/route.ts b/src/interface/common/route.ts new file mode 100644 index 00000000..3491aed9 --- /dev/null +++ b/src/interface/common/route.ts @@ -0,0 +1,55 @@ +import type { RouteRecordRaw } from 'vue-router'; + +/** 路由描述 */ +interface RouteMeta { + /** 路由名称 */ + title?: string; + /** 缓存页面 */ + keepAlive?: boolean; + /** 页面100%视高 */ + fullPage?: boolean; + /** 不作为菜单 */ + isNotMenu?: boolean; + /** 菜单和面包屑对应的图标 */ + icon?: string; + /** 路由作为菜单时的排序 */ + order?: number; +} + +/** 路由配置 */ +export type CustomRoute = RouteRecordRaw & { meta: RouteMeta }; + +/** 路由声明的key */ +export type RouteKey = + | 'root' + | 'login' + | 'not-found' + | 'no-permission' + | 'service-error' + // 自定义路由 + | 'dashboard' + | 'dashboard_analysis' + | 'dashboard_workbench' + | 'document' + | 'document_vue' + | 'document_vite' + | 'document_naive' + | 'component' + | 'component_map' + | 'component_video' + | 'component_editor' + | 'component_editor_quill' + | 'component_editor_markdown' + | 'component_swiper' + | 'feat' + | 'feat_copy' + | 'feat_icon' + | 'feat_print' + | 'multi-menu' + | 'multi-menu_first' + | 'multi-menu_first_second' + | 'exception' + | 'exception_403' + | 'exception_404' + | 'exception_500' + | 'about'; diff --git a/src/interface/common/system.ts b/src/interface/common/system.ts new file mode 100644 index 00000000..cc34f83a --- /dev/null +++ b/src/interface/common/system.ts @@ -0,0 +1,17 @@ +import type { MenuOption } from 'naive-ui'; +import { EnumLoginModule } from '@/enum'; + +/** 菜单项配置 */ +export type GlobalMenuOption = MenuOption & { + routeName: string; + routePath: string; +}; + +/** 登录模块 */ +export type LoginModuleType = keyof typeof EnumLoginModule; + +/** npm依赖包版本信息 */ +export interface VersionInfo { + name: string; + version: string; +} diff --git a/src/interface/index.ts b/src/interface/index.ts index 81b9d66a..8bb846f0 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -1,3 +1,3 @@ +export * from './common'; export * from './business'; export * from './theme'; -export * from './common'; diff --git a/src/interface/theme.ts b/src/interface/theme/index.ts similarity index 100% rename from src/interface/theme.ts rename to src/interface/theme/index.ts diff --git a/src/layouts/BaseLayout/components/HorizontalLayout/index.vue b/src/layouts/BaseLayout/components/HorizontalLayout/index.vue index 71868bcb..9ef461a9 100644 --- a/src/layouts/BaseLayout/components/HorizontalLayout/index.vue +++ b/src/layouts/BaseLayout/components/HorizontalLayout/index.vue @@ -1,11 +1,34 @@ - - + + diff --git a/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue b/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue index 8c61314c..a49ec556 100644 --- a/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue +++ b/src/layouts/BaseLayout/components/HorizontalMixLayout/index.vue @@ -1,10 +1,5 @@ diff --git a/src/layouts/BaseLayout/components/VerticalLayout/index.vue b/src/layouts/BaseLayout/components/VerticalLayout/index.vue index b2b402f8..99c5b0df 100644 --- a/src/layouts/BaseLayout/components/VerticalLayout/index.vue +++ b/src/layouts/BaseLayout/components/VerticalLayout/index.vue @@ -1,18 +1,18 @@ diff --git a/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue b/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue index e07069d4..203a00c7 100644 --- a/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue +++ b/src/layouts/BaseLayout/components/VerticalMixLayout/index.vue @@ -1,11 +1,50 @@ - - + + diff --git a/src/layouts/BaseLayout/components/common/GlobalContent/index.vue b/src/layouts/BaseLayout/components/common/GlobalContent/index.vue index e17becc5..f939ad32 100644 --- a/src/layouts/BaseLayout/components/common/GlobalContent/index.vue +++ b/src/layouts/BaseLayout/components/common/GlobalContent/index.vue @@ -15,7 +15,7 @@ import { computed } from 'vue'; import { useThemeStore } from '@/store'; import { useReloadInject } from '@/context'; import { cacheRoutes } from '@/router'; -import { useRouteProps } from '@/hooks'; +import { useRouteProps } from '@/composables'; const theme = useThemeStore(); const { reload } = useReloadInject(); diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue index 1c41fdf3..133d16e7 100644 --- a/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue +++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/GlobalBreadcrumb.vue @@ -32,15 +32,15 @@ import type { RouteLocationMatched } from 'vue-router'; import { NBreadcrumb, NBreadcrumbItem, NDropdown } from 'naive-ui'; import type { DropdownOption } from 'naive-ui'; import { Icon } from '@iconify/vue'; -import { EnumRoutePath } from '@/enum'; +import { routePath } from '@/router'; import { useThemeStore } from '@/store'; -import type { RoutePathKey } from '@/interface'; +import type { RouteKey } from '@/interface'; type Breadcrumb = DropdownOption & { key: string; label: string; disabled: boolean; - routeName: RoutePathKey; + routeName: RouteKey; hasChildren: boolean; iconName?: string; children?: Breadcrumb[]; @@ -62,11 +62,11 @@ function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) { const list: Breadcrumb[] = []; routeMatched.forEach(item => { if (!item.meta?.isNotMenu) { - const routeName = item.name as RoutePathKey; + const routeName = item.name as RouteKey; const breadcrumItem: Breadcrumb = { key: routeName, label: (item.meta?.title as string) || '', - disabled: item.path === EnumRoutePath.root, + disabled: item.path === routePath('root'), routeName, hasChildren: false }; @@ -84,7 +84,7 @@ function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) { } function dropdownSelect(optionKey: string) { - const key = optionKey as RoutePathKey; + const key = optionKey as RouteKey; router.push({ name: key }); } diff --git a/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue index 9ad56125..34625825 100644 --- a/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue +++ b/src/layouts/BaseLayout/components/common/GlobalHeader/components/UserAvatar.vue @@ -10,13 +10,13 @@ diff --git a/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue b/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue index d2dcc9ed..9a5b5c16 100644 --- a/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue +++ b/src/layouts/BaseLayout/components/common/GlobalLogo/index.vue @@ -3,6 +3,7 @@ href="/" class=" flex-center + w-full nowrap-hidden bg-light dark:bg-dark @@ -11,6 +12,7 @@ ease-in-out cursor-pointer " + :style="{ height: headerHeight }" >

{{ title }}

@@ -20,7 +22,7 @@ diff --git a/src/layouts/BaseLayout/components/common/GlobalTab/index.vue b/src/layouts/BaseLayout/components/common/GlobalTab/index.vue index 4ef1e321..b4dd0b09 100644 --- a/src/layouts/BaseLayout/components/common/GlobalTab/index.vue +++ b/src/layouts/BaseLayout/components/common/GlobalTab/index.vue @@ -1,5 +1,5 @@