Merge remote-tracking branch 'soybeanjs/main' into ruoyi

# Conflicts:
#	CHANGELOG.md
#	README.md
#	package.json
#	pnpm-lock.yaml
#	src/plugins/loading.ts
#	src/store/modules/auth/index.ts

src/App.vue

@@ -25,7 +25,7 @@ const naiveDateLocale = computed(() => {
 
 const watermarkProps = computed<WatermarkProps>(() => {
   return {
-    content: themeStore.watermark?.text || 'SoybeanAdmin',
+    content: themeStore.watermark.text,
     cross: true,
     fullscreen: true,
     fontSize: 16,
@@ -50,7 +50,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
   >
     <AppProvider>
       <RouterView class="bg-layout" />
-      <NWatermark v-if="themeStore.watermark?.visible" v-bind="watermarkProps" />
+      <NWatermark v-if="themeStore.watermark.visible" v-bind="watermarkProps" />
     </AppProvider>
   </NConfigProvider>
 </template>

src/constants/app.ts

@@ -61,3 +61,5 @@ export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I
 };
 
 export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);
+
+export const DARK_CLASS = 'dark';

src/hooks/common/router.ts

@@ -102,9 +102,9 @@ export function useRouterPush(inSetup = true) {
     const redirect = route.value.query?.redirect as string;
 
     if (needRedirect && redirect) {
-      routerPush(redirect);
+      await routerPush(redirect);
     } else {
-      toHome();
+      await toHome();
     }
   }
 

src/hooks/common/table.ts

@@ -122,6 +122,7 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
     page: 1,
     pageSize: 10,
     showSizePicker: true,
+    itemCount: 0,
     pageSizes: [10, 15, 20, 25, 30],
     onUpdatePage: async (page: number) => {
       pagination.page = page;

src/layouts/modules/global-header/index.vue

@@ -40,7 +40,12 @@ const { isFullscreen, toggle } = useFullscreen();
     <div class="h-full flex-y-center justify-end">
       <GlobalSearch />
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
-      <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
+      <LangSwitch
+        v-if="themeStore.header.multilingual.visible"
+        :lang="appStore.locale"
+        :lang-options="appStore.localeOptions"
+        @change-lang="appStore.changeLocale"
+      />
       <ThemeSchemaSwitch
         :theme-schema="themeStore.themeScheme"
         :is-dark="themeStore.darkMode"

src/layouts/modules/global-tab/index.vue

@@ -186,7 +186,7 @@ init();
             :active="tab.id === tabStore.activeTabId"
             :active-color="themeStore.themeColor"
             :closable="!tabStore.isTabRetain(tab.id)"
-            @click="tabStore.switchRouteByTab(tab)"
+            @pointerdown="tabStore.switchRouteByTab(tab)"
             @close="handleCloseTab(tab)"
             @contextmenu="handleContextMenu($event, tab.id)"
           >

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -114,10 +114,10 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
     >
       <NSwitch v-model:value="themeStore.footer.right" />
     </SettingItem>
-    <SettingItem v-if="themeStore.watermark" key="8" :label="$t('theme.watermark.visible')">
+    <SettingItem key="8" :label="$t('theme.watermark.visible')">
       <NSwitch v-model:value="themeStore.watermark.visible" />
     </SettingItem>
-    <SettingItem v-if="themeStore.watermark?.visible" key="8-1" :label="$t('theme.watermark.text')">
+    <SettingItem v-if="themeStore.watermark.visible" key="8-1" :label="$t('theme.watermark.text')">
       <NInput
         v-model:value="themeStore.watermark.text"
         autosize
@@ -127,6 +127,9 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
         placeholder="SoybeanAdmin"
       />
     </SettingItem>
+    <SettingItem key="9" :label="$t('theme.header.multilingual.visible')">
+      <NSwitch v-model:value="themeStore.header.multilingual.visible" />
+    </SettingItem>
   </TransitionGroup>
 </template>
 

src/locales/langs/en-us.ts

@@ -111,6 +111,9 @@ const local: App.I18n.Schema = {
       breadcrumb: {
         visible: 'Breadcrumb Visible',
         showIcon: 'Breadcrumb Icon Visible'
+      },
+      multilingual: {
+        visible: 'Display multilingual button'
       }
     },
     tab: {

src/locales/langs/zh-cn.ts

@@ -111,6 +111,9 @@ const local: App.I18n.Schema = {
       breadcrumb: {
         visible: '显示面包屑',
         showIcon: '显示面包屑图标'
+      },
+      multilingual: {
+        visible: '显示多语言按钮'
       }
     },
     tab: {

src/plugins/app.ts

@@ -11,25 +11,28 @@ export function setupAppErrorHandle(app: App) {
 }
 
 export function setupAppVersionNotification() {
-  const canAutoUpdateApp = import.meta.env.VITE_AUTOMATICALLY_DETECT_UPDATE === 'Y';
+  // Update check interval in milliseconds
+  const UPDATE_CHECK_INTERVAL = 3 * 60 * 1000;
 
+  const canAutoUpdateApp = import.meta.env.VITE_AUTOMATICALLY_DETECT_UPDATE === 'Y' && import.meta.env.PROD;
   if (!canAutoUpdateApp) return;
 
   let isShow = false;
+  let updateInterval: ReturnType<typeof setInterval> | undefined;
 
-  document.addEventListener('visibilitychange', async () => {
-    const preConditions = [!isShow, document.visibilityState === 'visible', !import.meta.env.DEV];
-
-    if (!preConditions.every(Boolean)) return;
+  const checkForUpdates = async () => {
+    if (isShow) return;
 
     const buildTime = await getHtmlBuildTime();
 
+    // If build time hasn't changed, no update is needed
     if (buildTime === BUILD_TIME) {
       return;
     }
 
     isShow = true;
 
+    // Show update notification
     const n = window.$notification?.create({
       title: $t('system.updateTitle'),
       content: $t('system.updateContent'),
@@ -40,6 +43,7 @@ export function setupAppVersionNotification() {
             {
               onClick() {
                 n?.destroy();
+                isShow = false;
               }
             },
             () => $t('system.updateCancel')
@@ -60,11 +64,34 @@ export function setupAppVersionNotification() {
         isShow = false;
       }
     });
-  });
+  };
+
+  const startUpdateInterval = () => {
+    if (updateInterval) {
+      clearInterval(updateInterval);
+    }
+    updateInterval = setInterval(checkForUpdates, UPDATE_CHECK_INTERVAL);
+  };
+
+  // If updates should be checked, set up the visibility change listener and start the update interval
+  if (!isShow && document.visibilityState === 'visible') {
+    // Check for updates when the document is visible
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        checkForUpdates();
+        startUpdateInterval();
+      }
+    });
+
+    // Start the update interval
+    startUpdateInterval();
+  }
 }
 
 async function getHtmlBuildTime() {
-  const res = await fetch(`/index.html?time=${Date.now()}`);
+  const baseUrl = import.meta.env.VITE_BASE_URL || '/';
+
+  const res = await fetch(`${baseUrl}index.html?time=${Date.now()}`);
 
   const html = await res.text();
 

src/router/guard/route.ts

@@ -36,54 +36,34 @@ export function createRouteGuard(router: Router) {
     const routeRoles = to.meta.roles || [];
 
     const hasRole = authStore.userInfo.roles.some(role => routeRoles.includes(role));
-
     const hasAuth = authStore.isStaticSuper || !routeRoles.length || hasRole;
 
-    const routeSwitches: CommonType.StrategicPattern[] = [
-      // if it is login route when logged in, then switch to the root page
-      {
-        condition: isLogin && to.name === loginRoute,
-        callback: () => {
-          next({ name: rootRoute });
-        }
-      },
-      // if it is constant route, then it is allowed to access directly
-      {
-        condition: !needLogin,
-        callback: () => {
-          handleRouteSwitch(to, from, next);
-        }
-      },
-      // if the route need login but the user is not logged in, then switch to the login page
-      {
-        condition: !isLogin && needLogin,
-        callback: () => {
-          next({ name: loginRoute, query: { redirect: to.fullPath } });
-        }
-      },
-      // if the user is logged in and has authorization, then it is allowed to access
-      {
-        condition: isLogin && needLogin && hasAuth,
-        callback: () => {
-          handleRouteSwitch(to, from, next);
-        }
-      },
-      // if the user is logged in but does not have authorization, then switch to the 403 page
-      {
-        condition: isLogin && needLogin && !hasAuth,
-        callback: () => {
-          next({ name: noAuthorizationRoute });
-        }
-      }
-    ];
+    // if it is login route when logged in, then switch to the root page
+    if (to.name === loginRoute && isLogin) {
+      next({ name: rootRoute });
+      return;
+    }
 
-    routeSwitches.some(({ condition, callback }) => {
-      if (condition) {
-        callback();
-      }
+    // if the route does not need login, then it is allowed to access directly
+    if (!needLogin) {
+      handleRouteSwitch(to, from, next);
+      return;
+    }
 
-      return condition;
-    });
+    // the route need login but the user is not logged in, then switch to the login page
+    if (!isLogin) {
+      next({ name: loginRoute, query: { redirect: to.fullPath } });
+      return;
+    }
+
+    // if the user is logged in but does not have authorization, then switch to the 403 page
+    if (!hasAuth) {
+      next({ name: noAuthorizationRoute });
+      return;
+    }
+
+    // switch route normally
+    handleRouteSwitch(to, from, next);
   });
 }
 
@@ -93,7 +73,6 @@ export function createRouteGuard(router: Router) {
  * @param to to route
  */
 async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw | null> {
-  const authStore = useAuthStore();
   const routeStore = useRouteStore();
 
   const notFoundRoute: RouteKey = 'not-found';
@@ -105,8 +84,48 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
 
     // the route is captured by the "not-found" route because the constant route is not initialized
     // after the constant route is initialized, redirect to the original route
+    const path = to.fullPath;
+    const location: RouteLocationRaw = {
+      path,
+      replace: true,
+      query: to.query,
+      hash: to.hash
+    };
+
+    return location;
+  }
+
+  const isLogin = Boolean(localStg.get('token'));
+
+  if (!isLogin) {
+    // if the user is not logged in and the route is a constant route but not the "not-found" route, then it is allowed to access.
+    if (to.meta.constant && !isNotFoundRoute) {
+      routeStore.onRouteSwitchWhenNotLoggedIn();
+
+      return null;
+    }
+
+    // if the user is not logged in, then switch to the login page
+    const loginRoute: RouteKey = 'login';
+    const query = getRouteQueryOfLoginRoute(to, routeStore.routeHome);
+
+    const location: RouteLocationRaw = {
+      name: loginRoute,
+      query
+    };
+
+    return location;
+  }
+
+  if (!routeStore.isInitAuthRoute) {
+    // initialize the auth route
+    await routeStore.initAuthRoute();
+
+    // the route is captured by the "not-found" route because the auth route is not initialized
+    // after the auth route is initialized, redirect to the original route
     if (isNotFoundRoute) {
-      const path = to.fullPath;
+      const rootRoute: RouteKey = 'root';
+      const path = to.redirectedFrom?.name === rootRoute ? '/' : to.fullPath;
 
       const location: RouteLocationRaw = {
         path,
@@ -119,63 +138,21 @@ async function initRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
     }
   }
 
-  // if the route is the constant route but is not the "not-found" route, then it is allowed to access.
-  if (to.meta.constant && !isNotFoundRoute) {
-    return null;
-  }
+  routeStore.onRouteSwitchWhenLoggedIn();
 
   // the auth route is initialized
   // it is not the "not-found" route, then it is allowed to access
-  if (routeStore.isInitAuthRoute && !isNotFoundRoute) {
+  if (!isNotFoundRoute) {
     return null;
   }
+
   // it is captured by the "not-found" route, then check whether the route exists
-  if (routeStore.isInitAuthRoute && isNotFoundRoute) {
-    const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
-    const noPermissionRoute: RouteKey = '403';
-
-    if (exist) {
-      const location: RouteLocationRaw = {
-        name: noPermissionRoute
-      };
-
-      return location;
-    }
-
-    return null;
-  }
-
-  // if the auth route is not initialized, then initialize the auth route
-  const isLogin = Boolean(localStg.get('token'));
-  // initialize the auth route requires the user to be logged in, if not, redirect to the login page
-  if (!isLogin) {
-    const loginRoute: RouteKey = 'login';
-    const query = getRouteQueryOfLoginRoute(to, routeStore.routeHome);
+  const exist = await routeStore.getIsAuthRouteExist(to.path as RoutePath);
+  const noPermissionRoute: RouteKey = '403';
 
+  if (exist) {
     const location: RouteLocationRaw = {
-      name: loginRoute,
-      query
-    };
-
-    return location;
-  }
-
-  await authStore.initUserInfo();
-
-  // initialize the auth route
-  await routeStore.initAuthRoute();
-
-  // the route is captured by the "not-found" route because the auth route is not initialized
-  // after the auth route is initialized, redirect to the original route
-  if (isNotFoundRoute) {
-    const rootRoute: RouteKey = 'root';
-    const path = to.redirectedFrom?.name === rootRoute ? '/' : to.fullPath;
-
-    const location: RouteLocationRaw = {
-      path,
-      replace: true,
-      query: to.query,
-      hash: to.hash
+      name: noPermissionRoute
     };
 
     return location;

src/store/modules/auth/index.ts

@@ -79,17 +79,13 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
       const pass = await loginByToken(loginToken);
 
       if (pass) {
-        await routeStore.initAuthRoute();
-
         await redirectFromLogin(redirect);
 
-        if (routeStore.isInitAuthRoute) {
-          // window.$notification?.success({
-          //   title: $t('page.login.common.loginSuccess'),
-          //   content: $t('page.login.common.welcomeBack', { userName: userInfo.userName }),
-          //   duration: 4500
-          // });
-        }
+        window.$notification?.success({
+          title: $t('page.login.common.loginSuccess'),
+          content: $t('page.login.common.welcomeBack', { userName: userInfo.userName }),
+          duration: 4500
+        });
       }
     } else {
       resetStore();

src/store/modules/route/index.ts

@@ -232,10 +232,17 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     handleConstantAndAuthRoutes();
 
     setIsInitConstantRoute(true);
+
+    tabStore.initHomeTab();
   }
 
   /** Init auth route */
   async function initAuthRoute() {
+    // check if user info is initialized
+    if (!authStore.userInfo.userId) {
+      await authStore.initUserInfo();
+    }
+
     if (authRouteMode.value === 'static') {
       initStaticAuthRoute();
     } else {
@@ -364,6 +371,14 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
   }
 
+  async function onRouteSwitchWhenLoggedIn() {
+    await authStore.initUserInfo();
+  }
+
+  async function onRouteSwitchWhenNotLoggedIn() {
+    // some global init logic if it does not need to be logged in
+  }
+
   return {
     resetStore,
     routeHome,
@@ -380,6 +395,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     isInitAuthRoute,
     setIsInitAuthRoute,
     getIsAuthRouteExist,
-    getSelectedMenuKeyPath
+    getSelectedMenuKeyPath,
+    onRouteSwitchWhenLoggedIn,
+    onRouteSwitchWhenNotLoggedIn
   };
 });

src/store/modules/theme/index.ts

@@ -174,6 +174,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
       darkMode,
       val => {
         toggleCssDarkMode(val);
+        localStg.set('darkMode', val);
       },
       { immediate: true }
     );

src/store/modules/theme/shared.ts

@@ -1,11 +1,11 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
+import { defu } from 'defu';
 import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { toggleHtmlClass } from '@/utils/common';
 import { localStg } from '@/utils/storage';
-
-const DARK_CLASS = 'dark';
+import { DARK_CLASS } from '@/constants/app';
 
 /** Init theme settings */
 export function initThemeSettings() {
@@ -17,12 +17,15 @@ export function initThemeSettings() {
   // if it is production mode, the theme settings will be cached in localStorage
   // if want to update theme settings when publish new version, please update `overrideThemeSettings` in `src/theme/settings.ts`
 
-  const settings = localStg.get('themeSettings') || themeSettings;
+  const localSettings = localStg.get('themeSettings');
+
+  let settings = defu(localSettings, themeSettings);
 
   const isOverride = localStg.get('overrideThemeFlag') === BUILD_TIME;
 
   if (!isOverride) {
-    Object.assign(settings, overrideThemeSettings);
+    settings = defu(overrideThemeSettings, settings);
+
     localStg.set('overrideThemeFlag', BUILD_TIME);
   }
 

src/theme/settings.ts

@@ -27,6 +27,9 @@ export const themeSettings: App.Theme.ThemeSetting = {
     breadcrumb: {
       visible: true,
       showIcon: true
+    },
+    multilingual: {
+      visible: true
     }
   },
   tab: {
@@ -83,10 +86,4 @@ export const themeSettings: App.Theme.ThemeSetting = {
  *
  * If publish new version, use `overrideThemeSettings` to override certain theme settings
  */
-export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {
-  resetCacheStrategy: 'close',
-  watermark: {
-    visible: false,
-    text: 'SoybeanAdmin'
-  }
-};
+export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {};

src/typings/app.d.ts

@@ -21,7 +21,7 @@ declare namespace App {
       /** Whether info color is followed by the primary color */
       isInfoFollowPrimary: boolean;
       /** Reset cache strategy */
-      resetCacheStrategy?: UnionKey.ResetCacheStrategy;
+      resetCacheStrategy: UnionKey.ResetCacheStrategy;
       /** Layout */
       layout: {
         /** Layout mode */
@@ -33,7 +33,7 @@ declare namespace App {
          *
          * if true, the vertical child level menus in left and horizontal first level menus in top
          */
-        reverseHorizontalMix?: boolean;
+        reverseHorizontalMix: boolean;
       };
       /** Page */
       page: {
@@ -53,6 +53,11 @@ declare namespace App {
           /** Whether to show the breadcrumb icon */
           showIcon: boolean;
         };
+        /** Multilingual */
+        multilingual: {
+          /** Whether to show the multilingual */
+          visible: boolean;
+        };
       };
       /** Tab */
       tab: {
@@ -98,7 +103,7 @@ declare namespace App {
         right: boolean;
       };
       /** Watermark */
-      watermark?: {
+      watermark: {
         /** Whether to show the watermark */
         visible: boolean;
         /** Watermark text */
@@ -365,6 +370,9 @@ declare namespace App {
             visible: string;
             showIcon: string;
           };
+          multilingual: {
+            visible: string;
+          };
         };
         tab: {
           visible: string;

src/typings/storage.d.ts

@@ -25,6 +25,8 @@ declare namespace StorageType {
     refreshToken: string;
     /** The theme color */
     themeColor: string;
+    /** The dark mode */
+    darkMode: boolean;
     /** The theme settings */
     themeSettings: App.Theme.ThemeSetting;
     /**

src/views/_builtin/login/index.vue

@@ -66,6 +66,7 @@ const bgColor = computed(() => {
               @switch="themeStore.toggleThemeScheme"
             />
             <LangSwitch
+              v-if="themeStore.header.multilingual.visible"
               :lang="appStore.locale"
               :lang-options="appStore.localeOptions"
               :show-tooltip="false"