feat: 全局 loading

frontend/src/layout/default-layout.vue

@@ -13,6 +13,7 @@
           :collapsed="collapsed"
           :collapsible="true"
           :width="menuWidth"
+          :collapsed-width="collapsedWidth"
           :style="{ paddingTop: navbar ? navbarHeight : '' }"
           :hide-trigger="true"
           @collapse="setCollapsed"
@@ -33,11 +34,13 @@
           <Menu />
         </a-drawer>
         <a-layout class="layout-content" :style="paddingStyle">
+          <a-spin :loading="appStore.loading" :tip="appStore.loadingTip">
             <TabBar v-if="appStore.tabBar" />
             <a-layout-content>
               <PageLayout />
             </a-layout-content>
             <Footer v-if="footer" />
+          </a-spin>
         </a-layout>
       </a-layout>
     </a-layout>
@@ -68,8 +71,9 @@
   const renderMenu = computed(() => appStore.menu && !appStore.topMenu);
   const hideMenu = computed(() => appStore.hideMenu);
   const footer = computed(() => appStore.footer);
+  const collapsedWidth = 86;
   const menuWidth = computed(() => {
-    return appStore.menuCollapse ? 48 : appStore.menuWidth;
+    return appStore.menuCollapse ? collapsedWidth : appStore.menuWidth;
   });
   const collapsed = computed(() => {
     return appStore.menuCollapse;
@@ -159,7 +163,7 @@
     background-color: var(--color-bg-3);
     transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
     .arco-layout-content {
-      padding: 16px 16px 0;
+      padding: 16px 16px 16px 0;
     }
   }
 </style>

frontend/src/locale/en-US/sys.ts

@@ -2,6 +2,9 @@ export default {
   // 消息提醒相关
   'message.errorTip': 'Error Tip',
   'message.logoutSuccess': 'Logout success',
+  'message.menuLoading': 'Loading the menu...',
+  'message.menuLoadSuccess': 'Menu loaded successfully',
+  'message.menuLoadError': 'Menu load failed',
   // API相关
   'api.apiTimeoutMessage': 'The interface request timed out, please refresh the page and try again!',
   'api.apiRequestFailed': 'The interface request failed, please try again later!',

frontend/src/locale/zh-CN/sys.ts

@@ -2,6 +2,9 @@ export default {
   // 消息提醒相关
   'message.errorTip': '错误提示',
   'message.logoutSuccess': '登出成功',
+  'message.menuLoading': '菜单加载中...',
+  'message.menuLoadSuccess': '菜单加载成功',
+  'message.menuLoadError': '菜单加载失败',
   // API相关
   'api.apiTimeoutMessage': '接口请求超时,请刷新页面重试!',
   'api.apiRequestFailed': '请求出错，请稍候重试',

frontend/src/store/modules/app/index.ts

@@ -1,13 +1,15 @@
 import { defineStore } from 'pinia';
 import { Notification } from '@arco-design/web-vue';
-import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface';
-import type { RouteRecordNormalized } from 'vue-router';
 import defaultSettings from '@/config/settings.json';
 import { getMenuList } from '@/api/modules/user';
-import { AppState } from './types';
+import { useI18n } from '@/hooks/useI18n';
+
+import type { AppState } from './types';
+import type { NotificationReturn } from '@arco-design/web-vue/es/notification/interface';
+import type { RouteRecordNormalized } from 'vue-router';
 
 const useAppStore = defineStore('app', {
-  state: (): AppState => ({ ...defaultSettings }),
+  state: (): AppState => ({ ...defaultSettings, loading: false, loadingTip: '加载中...' }),
 
   getters: {
     appCurrentSetting(state: AppState): AppState {
@@ -22,6 +24,9 @@ const useAppStore = defineStore('app', {
     getCustomTheme(state: AppState): string {
       return state.customTheme as string;
     },
+    getLoadingStatus(state: AppState): boolean {
+      return state.loading;
+    },
   },
 
   actions: {
@@ -51,25 +56,26 @@ const useAppStore = defineStore('app', {
      * 获取服务端菜单配置
      */
     async fetchServerMenuConfig() {
+      const { t } = useI18n();
       let notifyInstance: NotificationReturn | null = null;
       try {
         notifyInstance = Notification.info({
           id: 'menuNotice', // Keep the instance id the same
-          content: 'loading',
+          content: t('message.menuLoading'),
           closable: true,
         });
         const data = await getMenuList();
         this.serverMenu = data;
         notifyInstance = Notification.success({
           id: 'menuNotice',
-          content: 'success',
+          content: t('message.menuLoadSuccess'),
           closable: true,
         });
       } catch (error) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         notifyInstance = Notification.error({
           id: 'menuNotice',
-          content: 'error',
+          content: t('message.menuLoadError'),
           closable: true,
         });
       }
@@ -80,6 +86,20 @@ const useAppStore = defineStore('app', {
     clearServerMenu() {
       this.serverMenu = [];
     },
+    /**
+     * 显示全局 loading
+     */
+    showLoading(tip = '加载中...') {
+      this.loading = true;
+      this.loadingTip = tip;
+    },
+    /**
+     * 隐藏全局 loading
+     */
+    hideLoading() {
+      this.loading = false;
+      this.loadingTip = '加载中...';
+    },
   },
 });
 

frontend/src/store/modules/app/types.ts

@@ -15,6 +15,8 @@ export interface AppState {
   device: string;
   tabBar: boolean;
   serverMenu: RouteRecordNormalized[];
+  loading: boolean;
+  loadingTip: string;
   [key: string]: unknown;
 }
 

frontend/src/store/modules/tab-bar/index.ts

@@ -17,7 +17,7 @@ const formatTag = (route: RouteLocationNormalized): TabProps => {
 
 const BAN_LIST = [REDIRECT_ROUTE_NAME];
 
-const useAppStore = defineStore('tabBar', {
+const useTabBarStore = defineStore('tabBar', {
   state: (): TabBarState => ({
     cacheTabList: new Set([DEFAULT_ROUTE_NAME]),
     tabList: [DEFAULT_ROUTE],
@@ -92,4 +92,4 @@ const useAppStore = defineStore('tabBar', {
   },
 });
 
-export default useAppStore;
+export default useTabBarStore;

frontend/src/store/modules/user/index.ts

@@ -74,10 +74,13 @@ const useUserStore = defineStore('user', {
       clearToken();
       removeRouteListener();
       appStore.clearServerMenu();
+      appStore.hideLoading();
     },
     // 登出
     async logout() {
       try {
+        const appStore = useAppStore();
+        appStore.showLoading('正在退出登录...');
         await userLogout();
       } finally {
         this.logoutCallBack();