merge(sj_1.2.0-beta2): 合并 sa 1.3.6

.env

@@ -1,3 +1,5 @@
+VITE_BASE_URL=/
+
 VITE_APP_TITLE=Snail Job
 
 VITE_APP_DESC=A flexible, reliable, and fast platform for distributed task retry and distributed task scheduling.
@@ -38,10 +40,10 @@ VITE_SERVICE_LOGOUT_CODES=8888,8889
 VITE_SERVICE_MODAL_LOGOUT_CODES=5001
 
 # token expired codes of backend service, when the code is received, it will refresh the token and resend the request
-VITE_SERVICE_EXPIRED_TOKEN_CODES=9999,9998
+VITE_SERVICE_EXPIRED_TOKEN_CODES=9999,9998,3333
 
 # when the route mode is static, the defined super role
-VITE_STATIC_SUPER_ROLE=R_ADMIN
+VITE_STATIC_SUPER_ROLE=R_SUPER
 
 # sourcemap
 VITE_SOURCE_MAP=N
@@ -49,6 +51,9 @@ VITE_SOURCE_MAP=N
 # Used to differentiate storage across different domains
 VITE_STORAGE_PREFIX=
 
+# used to control whether the program automatically detects updates
+VITE_AUTOMATICALLY_DETECT_UPDATE=Y
+
 VITE_ICONIFY_URL=/iconify
 
 VITE_UPDATE_NOTIFY=N

build/plugins/index.ts

@@ -10,11 +10,7 @@ import { setupHtmlPlugin } from './html';
 
 export function setupVitePlugins(viteEnv: Env.ImportMeta, buildTime: string) {
   const plugins: PluginOption = [
-    vue({
-      script: {
-        defineModel: true
-      }
-    }),
+    vue(),
     vueJsx(),
     VueDevtools(),
     setupElegantRouter(),

package.json

@@ -57,56 +57,56 @@
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",
-    "@vueuse/core": "11.0.1",
+    "@vueuse/core": "11.1.0",
     "clipboard": "2.0.11",
-    "dayjs": "1.11.12",
+    "dayjs": "1.11.13",
     "echarts": "5.5.1",
     "highlight.js": "^11.10.0",
+    "json5": "2.2.3",
     "naive-ui": "2.39.0",
     "nprogress": "0.2.0",
     "pinia": "2.2.2",
     "tailwind-merge": "2.5.2",
     "ts-md5": "1.3.1",
-    "vue": "3.4.38",
+    "vue": "3.5.6",
     "vue-codemirror6": "^1.3.4",
     "vue-drag-resize": "^1.5.4",
     "vue-draggable-plus": "0.5.3",
-    "vue-i18n": "9.14.0",
-    "vue-router": "4.4.3",
+    "vue-i18n": "10.0.1",
+    "vue-router": "4.4.5",
     "vue3-puzzle-vcode": "^1.1.7"
   },
   "devDependencies": {
     "@elegant-router/vue": "0.3.8",
-    "@iconify/json": "2.2.238",
+    "@iconify/json": "2.2.250",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.4.0",
-    "@types/node": "22.4.1",
+    "@soybeanjs/eslint-config": "1.4.1",
+    "@types/node": "22.5.5",
     "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "0.62.2",
-    "@unocss/preset-icons": "0.62.2",
-    "@unocss/preset-uno": "0.62.2",
-    "@unocss/transformer-directives": "0.62.2",
-    "@unocss/transformer-variant-group": "0.62.2",
-    "@unocss/vite": "0.62.2",
-    "@vitejs/plugin-vue": "5.1.2",
+    "@unocss/eslint-config": "0.62.4",
+    "@unocss/preset-icons": "0.62.4",
+    "@unocss/preset-uno": "0.62.4",
+    "@unocss/transformer-directives": "0.62.4",
+    "@unocss/transformer-variant-group": "0.62.4",
+    "@unocss/vite": "0.62.4",
+    "@vitejs/plugin-vue": "5.1.4",
     "@vitejs/plugin-vue-jsx": "4.0.1",
-    "eslint": "9.9.0",
-    "eslint-plugin-vue": "9.27.0",
-    "json5": "2.2.3",
-    "lint-staged": "15.2.9",
-    "sass": "1.77.8",
+    "eslint": "9.10.0",
+    "eslint-plugin-vue": "9.28.0",
+    "lint-staged": "15.2.10",
+    "sass": "1.78.0",
     "simple-git-hooks": "2.11.1",
-    "tsx": "4.17.0",
-    "typescript": "5.5.4",
-    "unplugin-icons": "0.19.2",
+    "tsx": "4.19.1",
+    "typescript": "5.6.2",
+    "unplugin-icons": "0.19.3",
     "unplugin-vue-components": "0.27.4",
-    "vite": "5.4.1",
+    "vite": "5.4.6",
     "vite-plugin-progress": "0.0.7",
     "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.3.8",
+    "vite-plugin-vue-devtools": "7.4.5",
     "vue-eslint-parser": "9.4.3",
-    "vue-tsc": "2.0.29"
+    "vue-tsc": "2.1.6"
   },
   "simple-git-hooks": {
     "commit-msg": "pnpm sa git-commit-verify",

packages/axios/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/axios",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },
@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@sa/utils": "workspace:*",
-    "axios": "1.7.4",
+    "axios": "1.7.7",
     "axios-retry": "4.5.0",
     "qs": "6.13.0"
   },
   "devDependencies": {
-    "@types/qs": "6.9.15"
+    "@types/qs": "6.9.16"
   }
 }

packages/axios/src/index.ts

@@ -162,12 +162,12 @@ export function createFlatRequest<ResponseData = any, State = Record<string, unk
       if (responseType === 'json') {
         const data = opts.transformBackendResponse(response);
 
-        return { data, error: null };
+        return { data, error: null, response };
       }
 
       return { data: response.data as MappedType<R, T>, error: null };
     } catch (error) {
-      return { data: null, error };
+      return { data: null, error, response: (error as AxiosError<ResponseData>).response };
     }
   } as FlatRequestInstance<State, ResponseData>;
 

packages/axios/src/type.ts

@@ -92,18 +92,20 @@ export interface RequestInstance<S = Record<string, unknown>> extends RequestIns
   <T = any, R extends ResponseType = 'json'>(config: CustomAxiosRequestConfig<R>): Promise<MappedType<R, T>>;
 }
 
-export type FlatResponseSuccessData<T = any> = {
+export type FlatResponseSuccessData<T = any, ResponseData = any> = {
   data: T;
   error: null;
+  response: AxiosResponse<ResponseData>;
 };
 
 export type FlatResponseFailData<ResponseData = any> = {
   data: null;
   error: AxiosError<ResponseData>;
+  response: AxiosResponse<ResponseData>;
 };
 
 export type FlatResponseData<T = any, ResponseData = any> =
-  | FlatResponseSuccessData<T>
+  | FlatResponseSuccessData<T, ResponseData>
   | FlatResponseFailData<ResponseData>;
 
 export interface FlatRequestInstance<S = Record<string, unknown>, ResponseData = any> extends RequestInstanceCommon<S> {

packages/color/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/color",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/hooks",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },

packages/materials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/materials",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },

packages/ofetch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/fetch",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/scripts",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "bin": {
     "sa": "./bin.ts"
   },
@@ -14,14 +14,14 @@
   },
   "devDependencies": {
     "@soybeanjs/changelog": "0.3.24",
-    "bumpp": "9.5.1",
-    "c12": "1.11.1",
+    "bumpp": "9.5.2",
+    "c12": "1.11.2",
     "cac": "6.7.14",
     "consola": "3.2.3",
     "enquirer": "2.4.1",
-    "execa": "9.3.1",
+    "execa": "9.4.0",
     "kolorist": "1.8.0",
-    "npm-check-updates": "17.0.6",
+    "npm-check-updates": "17.1.2",
     "rimraf": "6.0.1"
   }
 }

packages/uno-preset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/uno-preset",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/utils",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "exports": {
     ".": "./src/index.ts"
   },

src/layouts/context/index.ts

@@ -8,6 +8,7 @@ export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } =
 function useMixMenu() {
   const route = useRoute();
   const routeStore = useRouteStore();
+  const { selectedKey } = useMenu();
 
   const activeFirstLevelMenuKey = ref('');
 
@@ -16,12 +17,7 @@ function useMixMenu() {
   }
 
   function getActiveFirstLevelMenuKey() {
-    const { hideInMenu, activeMenu } = route.meta;
-    const name = route.name as string;
-
-    const routeName = (hideInMenu ? activeMenu : name) || name;
-
-    const [firstLevelRouteName] = routeName.split('_');
+    const [firstLevelRouteName] = selectedKey.value.split('_');
 
     setActiveFirstLevelMenuKey(firstLevelRouteName);
   }
@@ -68,3 +64,20 @@ function useMixMenu() {
     getActiveFirstLevelMenuKey
   };
 }
+
+export function useMenu() {
+  const route = useRoute();
+
+  const selectedKey = computed(() => {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    return routeName;
+  });
+
+  return {
+    selectedKey
+  };
+}

src/layouts/modules/global-menu/modules/horizontal-menu.vue

@@ -1,26 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
+import { useMenu } from '../../../context';
 
 defineOptions({
   name: 'HorizontalMenu'
 });
 
-const route = useRoute();
 const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
+const { selectedKey } = useMenu();
 </script>
 
 <template>

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue

@@ -1,31 +1,20 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
 import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
 import FirstLevelMenu from '../components/first-level-menu.vue';
-import { useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 
 defineOptions({
   name: 'HorizontalMixMenu'
 });
 
-const route = useRoute();
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { selectedKey } = useMenu();
 
 function handleSelectMixMenu(menu: App.Global.Menu) {
   setActiveFirstLevelMenuKey(menu.key);

src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import type { RouteKey } from '@elegant-router/types';
 import { SimpleScrollbar } from '@sa/materials';
@@ -8,7 +8,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 
 defineOptions({
   name: 'ReversedHorizontalMixMenu'
@@ -18,6 +18,7 @@ const route = useRoute();
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
 const {
   firstLevelMenus,
   childLevelMenus,
@@ -25,16 +26,7 @@ const {
   setActiveFirstLevelMenuKey,
   isActiveFirstLevelMenuHasChildren
 } = useMixMenuContext();
-const { routerPushByKeyWithMetaQuery } = useRouterPush();
-
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
+const { selectedKey } = useMenu();
 
 function handleSelectMixMenu(key: RouteKey) {
   setActiveFirstLevelMenuKey(key);

src/layouts/modules/global-menu/modules/vertical-menu.vue

@@ -7,6 +7,7 @@ import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMenu } from '../../../context';
 
 defineOptions({
   name: 'VerticalMenu'
@@ -17,18 +18,10 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { selectedKey } = useMenu();
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
 
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
-
 const expandedKeys = ref<string[]>([]);
 
 function updateExpandedKeys() {

src/layouts/modules/global-menu/modules/vertical-mix-menu.vue

@@ -9,12 +9,12 @@ import { useRouteStore } from '@/store/modules/route';
 import { useRouterPush } from '@/hooks/common/router';
 import { $t } from '@/locales';
 import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
-import { useMixMenuContext } from '../../../context';
+import { useMenu, useMixMenuContext } from '../../../context';
 import FirstLevelMenu from '../components/first-level-menu.vue';
 import GlobalLogo from '../../global-logo/index.vue';
 
 defineOptions({
-  name: 'VerticalMenuMix'
+  name: 'VerticalMixMenu'
 });
 
 const route = useRoute();
@@ -31,6 +31,7 @@ const {
   getActiveFirstLevelMenuKey
   //
 } = useMixMenuContext();
+const { selectedKey } = useMenu();
 
 const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
 
@@ -56,15 +57,6 @@ function handleResetActiveMenu() {
   }
 }
 
-const selectedKey = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return routeName;
-});
-
 const expandedKeys = ref<string[]>([]);
 
 function updateExpandedKeys() {
@@ -122,9 +114,6 @@ watch(
               mode="vertical"
               :value="selectedKey"
               :options="childLevelMenus"
-              :collapsed="appStore.siderCollapse"
-              :collapsed-width="themeStore.sider.collapsedWidth"
-              :collapsed-icon-size="22"
               :inverted="inverted"
               :indent="18"
               @update:value="routerPushByKeyWithMetaQuery"

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

@@ -166,11 +166,7 @@ init();
 <template>
   <DarkModeContainer class="size-full flex-y-center px-16px shadow-tab">
     <div ref="bsWrapper" class="h-full flex-1-hidden">
-      <BetterScroll
-        ref="bsScroll"
-        :options="{ scrollX: true, scrollY: false, click: appStore.isMobile }"
-        @click="removeFocus"
-      >
+      <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: true }" @click="removeFocus">
         <div
           ref="tabRef"
           class="h-full flex pr-18px"

src/plugins/app.ts

@@ -1,8 +1,20 @@
 import { h } from 'vue';
+import type { App } from 'vue';
 import { NButton } from 'naive-ui';
-import { $t } from '../locales';
+import { $t } from '@/locales';
+
+export function setupAppErrorHandle(app: App) {
+  app.config.errorHandler = (err, vm, info) => {
+    // eslint-disable-next-line no-console
+    console.error(err, vm, info);
+  };
+}
 
 export function setupAppVersionNotification() {
+  const canAutoUpdateApp = import.meta.env.VITE_AUTOMATICALLY_DETECT_UPDATE === 'Y';
+
+  if (!canAutoUpdateApp) return;
+
   let isShow = false;
 
   document.addEventListener('visibilitychange', async () => {

src/service/request/index.ts

@@ -4,7 +4,7 @@ import { useAuthStore } from '@/store/modules/auth';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import { getServiceBaseURL } from '@/utils/service';
-import { handleRefreshToken, showErrorMsg } from './shared';
+import { getAuthorization, handleExpiredRequest, showErrorMsg } from './shared';
 import type { RequestInstanceState } from './type';
 
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
@@ -25,7 +25,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
       const { headers } = config;
 
       // set token
-      const token = localStg.get('token');
+      const token = getAuthorization();
       const namespaceId = localStg.get('namespaceId');
       // const Authorization = token ? `Bearer ${token}` : null;
       headers['SNAIL-JOB-AUTH'] = token;
@@ -95,15 +95,13 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
       // when the backend response code is in `expiredTokenCodes`, it means the token is expired, and refresh token
       // the api `refreshToken` can not return error code in `expiredTokenCodes`, otherwise it will be a dead loop, should return `logoutCodes` or `modalLogoutCodes`
       const expiredTokenCodes = import.meta.env.VITE_SERVICE_EXPIRED_TOKEN_CODES?.split(',') || [];
-      if (expiredTokenCodes.includes(responseCode) && !request.state.isRefreshingToken) {
-        request.state.isRefreshingToken = true;
+      if (expiredTokenCodes.includes(responseCode)) {
+        const success = await handleExpiredRequest(request.state);
+        if (success) {
+          const Authorization = getAuthorization();
+          Object.assign(response.config.headers, { Authorization });
 
-        const refreshConfig = await handleRefreshToken(response.config);
-
-        request.state.isRefreshingToken = false;
-
-        if (refreshConfig) {
-          return instance.request(refreshConfig) as Promise<AxiosResponse>;
+          return instance.request(response.config) as Promise<AxiosResponse>;
         }
       }
 

src/service/request/shared.ts

@@ -1,34 +1,44 @@
-import type { AxiosRequestConfig } from 'axios';
 import { useAuthStore } from '@/store/modules/auth';
 import { localStg } from '@/utils/storage';
 import { fetchRefreshToken } from '../api';
 import type { RequestInstanceState } from './type';
 
-/**
- * refresh token
- *
- * @param axiosConfig - request config when the token is expired
- */
-export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {
+export function getAuthorization() {
+  const token = localStg.get('token');
+  const Authorization = token;
+
+  return Authorization;
+}
+
+/** refresh token */
+async function handleRefreshToken() {
   const { resetStore } = useAuthStore();
 
-  const refreshToken = localStg.get('refreshToken') || '';
-  const { error, data } = await fetchRefreshToken(refreshToken);
+  const rToken = localStg.get('refreshToken') || '';
+  const { error, data } = await fetchRefreshToken(rToken);
   if (!error) {
     localStg.set('token', data.token);
     localStg.set('refreshToken', data.refreshToken);
-
-    const config = { ...axiosConfig };
-    if (config.headers) {
-      config.headers.Authorization = data.token;
-    }
-
-    return config;
+    return true;
   }
 
   resetStore();
 
-  return null;
+  return false;
+}
+
+export async function handleExpiredRequest(state: RequestInstanceState) {
+  if (!state.refreshTokenFn) {
+    state.refreshTokenFn = handleRefreshToken();
+  }
+
+  const success = await state.refreshTokenFn;
+
+  setTimeout(() => {
+    state.refreshTokenFn = null;
+  }, 1000);
+
+  return success;
 }
 
 export function showErrorMsg(state: RequestInstanceState, message: string) {

src/service/request/type.ts

@@ -1,6 +1,6 @@
 export interface RequestInstanceState {
   /** whether the request is refreshing token */
-  isRefreshingToken: boolean;
+  refreshTokenFn: Promise<boolean> | null;
   /** the request error message stack */
   errMsgStack: string[];
   /** whether the request is logout */

src/store/modules/route/shared.ts

@@ -19,7 +19,7 @@ export function filterAuthRoutesByRoles(routes: ElegantConstRoute[], roles: stri
  * @param route Auth route
  * @param roles Roles
  */
-function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
+function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]): ElegantConstRoute[] {
   const routeRoles = (route.meta && route.meta.roles) || [];
 
   // if the route's "roles" is empty, then it is allowed to access
@@ -34,6 +34,11 @@ function filterAuthRouteByRoles(route: ElegantConstRoute, roles: string[]) {
     filterRoute.children = filterRoute.children.flatMap(item => filterAuthRouteByRoles(item, roles));
   }
 
+  // Exclude the route if it has no children after filtering
+  if (filterRoute.children?.length === 0) {
+    return [];
+  }
+
   return hasPermission || isEmptyRoles ? [filterRoute] : [];
 }
 
@@ -281,15 +286,24 @@ export function getBreadcrumbsByRoute(
   const key = route.name as string;
   const activeKey = route.meta?.activeMenu;
 
-  const menuKey = activeKey || key;
-
   for (const menu of menus) {
-    if (menu.key === menuKey) {
-      const breadcrumbMenu = menuKey !== activeKey ? menu : getGlobalMenuByBaseRoute(route);
+    if (menu.key === key) {
+      return [transformMenuToBreadcrumb(menu)];
+    }
 
+    if (menu.key === activeKey) {
+      const ROUTE_DEGREE_SPLITTER = '_';
+
+      const parentKey = key.split(ROUTE_DEGREE_SPLITTER).slice(0, -1).join(ROUTE_DEGREE_SPLITTER);
+
+      const breadcrumbMenu = getGlobalMenuByBaseRoute(route);
+      if (parentKey !== activeKey) {
         return [transformMenuToBreadcrumb(breadcrumbMenu)];
       }
 
+      return [transformMenuToBreadcrumb(menu), transformMenuToBreadcrumb(breadcrumbMenu)];
+    }
+
     if (menu.children?.length) {
       const result = getBreadcrumbsByRoute(route, menu.children);
       if (result.length > 0) {

src/typings/env.d.ts

@@ -106,6 +106,8 @@ declare namespace Env {
     /** Used to differentiate storage across different domains */
     readonly VITE_STORAGE_PREFIX?: string;
     readonly VITE_LOGIN_CODE?: string;
+    /** Whether to automatically detect updates after configuring application packaging */
+    readonly VITE_AUTOMATICALLY_DETECT_UPDATE?: CommonType.YesOrNo;
   }
 }
 

src/utils/service.ts

@@ -13,7 +13,7 @@ export function createServiceConfig(env: Env.ImportMeta) {
     if (VITE_OTHER_SERVICE_BASE_URL) {
       other = json5.parse(VITE_OTHER_SERVICE_BASE_URL);
     }
-  } catch (error) {
+  } catch {
     // eslint-disable-next-line no-console
     console.error('VITE_OTHER_SERVICE_BASE_URL is not a valid json5 string');
   }