diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue index 98d0a8c..3be96f9 100644 --- a/src/components/Setting/src/Setting.vue +++ b/src/components/Setting/src/Setting.vue @@ -1,5 +1,5 @@ diff --git a/src/components/TabMenu/src/TabMenu.vue b/src/components/TabMenu/src/TabMenu.vue index 278b22b..e182776 100644 --- a/src/components/TabMenu/src/TabMenu.vue +++ b/src/components/TabMenu/src/TabMenu.vue @@ -37,7 +37,6 @@ export default defineComponent({ (routers: AppRouteRecordRaw[]) => { initTabMap(routers) filterMenusPath(routers, routers) - console.log(tabPathMap) }, { immediate: true, diff --git a/src/config/app.ts b/src/config/app.ts index 76b0588..4e5ce8e 100644 --- a/src/config/app.ts +++ b/src/config/app.ts @@ -15,9 +15,8 @@ export interface AppState { tagsView: boolean logo: boolean fixedHeader: boolean - fixedMenu: boolean greyMode: boolean - + pageLoading: boolean layout: LayoutType title: string userInfo: string @@ -29,6 +28,12 @@ export interface AppState { } export const appModules: AppState = { + userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突 + sizeMap: ['default', 'large', 'small'], + mobile: false, // 是否是移动端 + title: 'ButterflyAdmin', // 标题 + pageLoading: false, // 路由跳转loading + breadcrumb: true, // 面包屑 breadcrumbIcon: true, // 面包屑图标 collapse: false, // 折叠菜单 @@ -39,16 +44,11 @@ export const appModules: AppState = { tagsView: true, // 标签页 logo: true, // logo fixedHeader: true, // 固定toolheader - fixedMenu: false, // 固定切割菜单 greyMode: false, // 是否开始灰色模式，用于特殊悼念日 layout: wsCache.get('layout') || 'classic', // layout布局 - title: 'ButterflyAdmin', // 标题 - userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突 isDark: wsCache.get('isDark') || false, // 是否是暗黑模式 currentSize: wsCache.get('default') || 'default', // 组件尺寸 - sizeMap: ['default', 'large', 'small'], - mobile: false, // 是否是移动端 theme: wsCache.get('theme') || { // 主题色 elColorPrimary: '#409eff', diff --git a/src/hooks/web/usePageLoading.ts b/src/hooks/web/usePageLoading.ts new file mode 100644 index 0000000..bb89457 --- /dev/null +++ b/src/hooks/web/usePageLoading.ts @@ -0,0 +1,18 @@ +import { useAppStoreWithOut } from '@/store/modules/app' + +const appStore = useAppStoreWithOut() + +export const usePageLoading = () => { + const loadStart = () => { + appStore.setPageLoading(true) + } + + const loadDone = () => { + appStore.setPageLoading(false) + } + + return { + loadStart, + loadDone + } +} diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx index 69610de..2403355 100644 --- a/src/layout/components/useRenderLayout.tsx +++ b/src/layout/components/useRenderLayout.tsx @@ -10,6 +10,8 @@ import { ElScrollbar } from 'element-plus' const appStore = useAppStore() +const pageLoading = computed(() => appStore.getPageLoading) + // 标签页 const tagsView = computed(() => appStore.getTagsView) @@ -60,6 +62,7 @@ export const useRenderLayout = () => { style="transition: all var(--transition-time-02);" > { style="transition: all var(--transition-time-02);" > {
{ style="transition: all var(--transition-time-02);" > { !collapse.value && fixedHeader.value } ]} - style="transition: all var(--transition-time-02);" + style="transition: width var(--transition-time-02), left var(--transition-time-02);" > ) : undefined} diff --git a/src/locales/en.ts b/src/locales/en.ts index cc45152..94243c2 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -38,7 +38,10 @@ export default { greyMode: 'Grey mode', fixedHeader: 'Fixed header', headerTheme: 'Header theme', - cutMenu: 'Cut Menu' + cutMenu: 'Cut Menu', + copy: 'Copy', + clearAndReset: 'Clear cache and reset', + copySuccess: 'Copy success' }, size: { default: 'Default', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 573b4e5..a33872f 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -38,7 +38,10 @@ export default { greyMode: '灰色模式', fixedHeader: '固定头部', headerTheme: '头部主题', - cutMenu: '切割菜单' + cutMenu: '切割菜单', + copy: '拷贝', + clearAndReset: '清除缓存并且重置', + copySuccess: '拷贝成功' }, size: { default: '默认', diff --git a/src/permission.ts b/src/permission.ts index de52166..7d1b18a 100644 --- a/src/permission.ts +++ b/src/permission.ts @@ -5,6 +5,7 @@ import type { RouteRecordRaw } from 'vue-router' import { useTitle } from '@/hooks/web/useTitle' import { useNProgress } from '@/hooks/web/useNProgress' import { usePermissionStoreWithOut } from '@/store/modules/permission' +import { usePageLoading } from '@/hooks/web/usePageLoading' const permissionStore = usePermissionStoreWithOut() @@ -14,10 +15,13 @@ const { wsCache } = useCache() const { start, done } = useNProgress() +const { loadStart, loadDone } = usePageLoading() + const whiteList = ['/login'] // 不重定向白名单 router.beforeEach(async (to, from, next) => { start() + loadStart() if (wsCache.get(appStore.getUserInfo)) { if (to.path === '/login') { next({ path: '/' }) @@ -48,4 +52,5 @@ router.beforeEach(async (to, from, next) => { router.afterEach((to) => { useTitle(to?.meta?.title as string) done() // 结束Progress + loadDone() }) diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index d86b195..2e9b92b 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -42,13 +42,12 @@ export const useAppStore = defineStore({ getFixedHeader(): boolean { return this.fixedHeader }, - getFixedMenu(): boolean { - return this.fixedMenu - }, getGreyMode(): boolean { return this.greyMode }, - + getPageLoading(): boolean { + return this.pageLoading + }, getLayout(): LayoutType { return this.layout }, @@ -105,13 +104,12 @@ export const useAppStore = defineStore({ setFixedHeader(fixedHeader: boolean) { this.fixedHeader = fixedHeader }, - setFixedMenu(fixedMenu: boolean) { - this.fixedMenu = fixedMenu - }, setGreyMode(greyMode: boolean) { this.greyMode = greyMode }, - + setPageLoading(pageLoading: boolean) { + this.pageLoading = pageLoading + }, setLayout(layout: LayoutType) { if (this.mobile && layout !== 'classic') { ElMessage.warning('移动端模式下不支持切换其他布局')