From 1e84d13d5471b8c30892e54528ea5b0128d394aa Mon Sep 17 00:00:00 2001 From: Soybean Date: Fri, 19 Nov 2021 01:33:36 +0800 Subject: [PATCH] =?UTF-8?q?refactor(projects):=20=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E5=A3=B0=E6=98=8E=E9=87=8D=E6=9E=84=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?composables=EF=BC=8CBaseLayout=E8=BF=9B=E8=A1=8C=E4=B8=AD?= =?UTF-8?q?=EF=BC=8C=E6=96=87=E4=BB=B6=E5=A4=B9=E8=A7=84=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 1 + src/composables/common/index.ts | 4 + src/composables/common/layout.ts | 49 +++++++++++ src/composables/common/route.ts | 63 ++++++++++++++ .../common/router.ts} | 24 +++--- .../common/system.ts} | 12 +-- src/composables/index.ts | 1 + src/enum/{business.ts => business/index.ts} | 0 src/enum/{ => common}/animate.ts | 0 src/enum/common/index.ts | 5 ++ src/enum/{ => common}/storage.ts | 0 src/enum/{common.ts => common/system.ts} | 15 ---- src/enum/{ => common}/theme.ts | 0 src/enum/common/typeof.ts | 14 ++++ src/enum/index.ts | 4 - src/enum/route.ts | 71 ---------------- src/hooks/business/useCountDown.ts | 6 +- src/hooks/common/index.ts | 20 +---- src/hooks/common/useAppTitle.ts | 6 -- src/hooks/common/useRouteParam.ts | 7 -- src/hooks/common/useRouteProps.ts | 22 ----- src/hooks/common/useRouteQuery.ts | 21 ----- src/hooks/common/useScrollBehavior.ts | 16 ---- .../{business.ts => business/auth.ts} | 0 src/interface/business/index.ts | 1 + src/interface/common.ts | 40 --------- src/interface/common/index.ts | 2 + src/interface/common/route.ts | 55 ++++++++++++ src/interface/common/system.ts | 17 ++++ src/interface/index.ts | 2 +- src/interface/{theme.ts => theme/index.ts} | 0 .../components/HorizontalLayout/index.vue | 39 +++++++-- .../components/HorizontalMixLayout/index.vue | 7 +- .../components/VerticalLayout/index.vue | 84 +++++-------------- .../components/VerticalMixLayout/index.vue | 55 ++++++++++-- .../components/common/GlobalContent/index.vue | 2 +- .../components/GlobalBreadcrumb.vue | 12 +-- .../GlobalHeader/components/UserAvatar.vue | 4 +- .../components/common/GlobalHeader/index.vue | 8 +- .../components/common/GlobalLogo/index.vue | 5 +- .../components/common/GlobalTab/index.vue | 4 +- .../common/HeaderPlaceholder/index.vue | 12 +++ .../BaseLayout/components/common/index.ts | 12 ++- .../components/GlobalContent/index.vue | 12 ++- .../components/GlobalBreadcrumb.vue | 12 +-- .../GlobalHeader/components/UserAvatar.vue | 4 +- .../components/MixMenuDrawer.vue | 2 +- .../components/GlobalTab/index.vue | 15 +++- .../components/common/GlobalLogo.vue | 2 +- src/layouts/BasicLayout/index.vue | 16 +--- src/layouts/BlankLayout/index.vue | 13 +-- src/router/const/index.ts | 68 +++++++++++++++ src/router/export/index.ts | 5 ++ src/router/index.ts | 12 +-- src/router/modules/about.ts | 13 +-- src/router/modules/component.ts | 60 ++++++------- src/router/modules/dashboard.ts | 26 +++--- src/router/modules/document.ts | 36 ++++---- src/router/modules/exception.ts | 36 ++++---- src/router/modules/feat.ts | 36 ++++---- src/router/modules/multi-menu.ts | 29 +++---- src/router/modules/root.ts | 7 +- src/router/permission/index.ts | 9 +- src/router/routes/constant.ts | 31 ++++--- src/router/routes/routeHome.ts | 14 ++-- src/service/request/request.ts | 2 +- src/settings/index.ts | 2 +- src/settings/{constant.ts => sdk.ts} | 0 src/utils/router/helpers.ts | 19 ++--- src/views/multi-menu/first/second/index.vue | 8 +- .../login/components/CodeLogin/index.vue | 5 +- .../login/components/PwdLogin/index.vue | 5 +- .../login/components/Register/index.vue | 5 +- .../login/components/ResetPwd/index.vue | 5 +- src/views/system/login/index.vue | 2 +- 75 files changed, 668 insertions(+), 565 deletions(-) create mode 100644 src/composables/common/index.ts create mode 100644 src/composables/common/layout.ts create mode 100644 src/composables/common/route.ts rename src/{hooks/common/useRouterChange.ts => composables/common/router.ts} (71%) rename src/{hooks/common/useIsMobile.ts => composables/common/system.ts} (56%) create mode 100644 src/composables/index.ts rename src/enum/{business.ts => business/index.ts} (100%) rename src/enum/{ => common}/animate.ts (100%) create mode 100644 src/enum/common/index.ts rename src/enum/{ => common}/storage.ts (100%) rename src/enum/{common.ts => common/system.ts} (52%) rename src/enum/{ => common}/theme.ts (100%) create mode 100644 src/enum/common/typeof.ts delete mode 100644 src/enum/route.ts delete mode 100644 src/hooks/common/useAppTitle.ts delete mode 100644 src/hooks/common/useRouteParam.ts delete mode 100644 src/hooks/common/useRouteProps.ts delete mode 100644 src/hooks/common/useRouteQuery.ts delete mode 100644 src/hooks/common/useScrollBehavior.ts rename src/interface/{business.ts => business/auth.ts} (100%) create mode 100644 src/interface/business/index.ts delete mode 100644 src/interface/common.ts create mode 100644 src/interface/common/index.ts create mode 100644 src/interface/common/route.ts create mode 100644 src/interface/common/system.ts rename src/interface/{theme.ts => theme/index.ts} (100%) create mode 100644 src/layouts/BaseLayout/components/common/HeaderPlaceholder/index.vue create mode 100644 src/router/const/index.ts create mode 100644 src/router/export/index.ts rename src/settings/{constant.ts => sdk.ts} (100%) 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 @@