Merge branch '1.2.0-beta1' of gitee.com:opensnail/snail-job-admin into 1.2.0-beta1

.env

@@ -2,7 +2,8 @@ VITE_APP_TITLE=Snail Job
 
 VITE_APP_DESC=A flexible, reliable, and fast platform for distributed task retry and distributed task scheduling.
 
-VITE_APP_VERSION=1.2.0-beta1
+VITE_APP_VERSION=1.2.0
+
 VITE_APP_DEFAULT_TOKEN=SJ_Wyz3dmsdbDOkDujOTSSoBjGQP1BMsVnj
 
 # the prefix of the icon name

package.json

@@ -64,48 +64,48 @@
     "highlight.js": "^11.10.0",
     "naive-ui": "2.39.0",
     "nprogress": "0.2.0",
-    "pinia": "2.1.7",
+    "pinia": "2.2.0",
     "tailwind-merge": "2.4.0",
     "ts-md5": "1.3.1",
-    "vue": "3.4.33",
+    "vue": "3.4.35",
     "vue-codemirror6": "^1.3.4",
     "vue-drag-resize": "^1.5.4",
     "vue-draggable-plus": "0.5.2",
     "vue-i18n": "9.13.1",
-    "vue-router": "4.4.0",
+    "vue-router": "4.4.1",
     "vue3-puzzle-vcode": "^1.1.7"
   },
   "devDependencies": {
-    "@elegant-router/vue": "0.3.7",
-    "@iconify/json": "2.2.230",
+    "@elegant-router/vue": "0.3.8",
+    "@iconify/json": "2.2.232",
     "@sa/scripts": "workspace:*",
     "@sa/uno-preset": "workspace:*",
-    "@soybeanjs/eslint-config": "1.3.7",
-    "@types/node": "20.14.11",
+    "@soybeanjs/eslint-config": "1.4.0",
+    "@types/node": "22.0.1",
     "@types/nprogress": "0.2.3",
-    "@unocss/eslint-config": "0.61.5",
-    "@unocss/preset-icons": "0.61.5",
-    "@unocss/preset-uno": "0.61.5",
-    "@unocss/transformer-directives": "0.61.5",
-    "@unocss/transformer-variant-group": "0.61.5",
-    "@unocss/vite": "0.61.5",
-    "@vitejs/plugin-vue": "5.0.5",
+    "@unocss/eslint-config": "0.61.9",
+    "@unocss/preset-icons": "0.61.9",
+    "@unocss/preset-uno": "0.61.9",
+    "@unocss/transformer-directives": "0.61.9",
+    "@unocss/transformer-variant-group": "0.61.9",
+    "@unocss/vite": "0.61.9",
+    "@vitejs/plugin-vue": "5.1.1",
     "@vitejs/plugin-vue-jsx": "4.0.0",
-    "eslint": "9.7.0",
+    "eslint": "9.8.0",
     "eslint-plugin-vue": "9.27.0",
     "lint-staged": "15.2.7",
     "sass": "1.77.8",
     "simple-git-hooks": "2.11.1",
-    "tsx": "4.16.2",
+    "tsx": "4.16.3",
     "typescript": "5.5.4",
-    "unplugin-icons": "0.19.0",
+    "unplugin-icons": "0.19.1",
     "unplugin-vue-components": "0.27.3",
-    "vite": "5.3.4",
+    "vite": "5.3.5",
     "vite-plugin-progress": "0.0.7",
     "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "7.3.6",
+    "vite-plugin-vue-devtools": "7.3.7",
     "vue-eslint-parser": "9.4.3",
-    "vue-tsc": "2.0.28"
+    "vue-tsc": "2.0.29"
   },
   "simple-git-hooks": {
     "commit-msg": "pnpm sa git-commit-verify",

packages/axios/package.json

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

packages/color/package.json

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

packages/hooks/package.json

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

packages/materials/package.json

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

packages/ofetch/package.json

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

packages/scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sa/scripts",
-  "version": "1.3.1",
+  "version": "1.3.4",
   "bin": {
     "sa": "./bin.ts"
   },
@@ -21,7 +21,7 @@
     "enquirer": "2.4.1",
     "execa": "9.3.0",
     "kolorist": "1.8.0",
-    "npm-check-updates": "16.14.20",
+    "npm-check-updates": "17.0.0",
     "rimraf": "6.0.1"
   }
 }

packages/uno-preset/package.json

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

packages/utils/package.json

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

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { NConfigProvider, darkTheme } from 'naive-ui';
+import type { WatermarkProps } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
 import { naiveDateLocales, naiveLocales } from './locales/naive';
@@ -21,6 +22,22 @@ const naiveLocale = computed(() => {
 const naiveDateLocale = computed(() => {
   return naiveDateLocales[appStore.locale];
 });
+
+const watermarkProps = computed<WatermarkProps>(() => {
+  return {
+    content: themeStore.watermark?.text || 'SoybeanAdmin',
+    cross: true,
+    fullscreen: true,
+    fontSize: 16,
+    lineHeight: 16,
+    width: 384,
+    height: 384,
+    xOffset: 12,
+    yOffset: 60,
+    rotate: -15,
+    zIndex: 9999
+  };
+});
 </script>
 
 <template>
@@ -33,6 +50,7 @@ const naiveDateLocale = computed(() => {
   >
     <AppProvider>
       <RouterView class="bg-layout" />
+      <NWatermark v-if="themeStore.watermark?.visible" v-bind="watermarkProps" />
     </AppProvider>
   </NConfigProvider>
 </template>

src/layouts/modules/global-menu/components/first-level-menu.vue

@@ -26,10 +26,6 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
-const filterMenus = computed(() => {
-  return props.menus.filter(item => item.show !== false);
-});
-
 interface MixMenuItemProps {
   /** Menu item label */
   label: App.Global.Menu['label'];
@@ -86,7 +82,7 @@ function toggleSiderCollapse() {
     <slot></slot>
     <SimpleScrollbar>
       <MixMenuItem
-        v-for="menu in filterMenus"
+        v-for="menu in menus"
         :key="menu.key"
         :label="menu.label"
         :icon="menu.icon"

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

@@ -56,9 +56,7 @@ function handleSelectMixMenu(menu: App.Global.Menu) {
       :theme-color="themeStore.themeColor"
       @select="handleSelectMixMenu"
       @toggle-sider-collapse="appStore.toggleSiderCollapse"
-    >
-      <slot></slot>
-    </FirstLevelMenu>
+    />
   </Teleport>
 </template>
 

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

@@ -49,8 +49,11 @@ function handleSelectMixMenu(menu: App.Global.Menu) {
 }
 
 function handleResetActiveMenu() {
-  getActiveFirstLevelMenuKey();
   setDrawerVisible(false);
+
+  if (!appStore.mixSiderFixed) {
+    getActiveFirstLevelMenuKey();
+  }
 }
 
 const selectedKey = computed(() => {
@@ -117,6 +120,7 @@ watch(
             <NMenu
               v-model:expanded-keys="expandedKeys"
               mode="vertical"
+              :value="selectedKey"
               :options="childLevelMenus"
               :collapsed="appStore.siderCollapse"
               :collapsed-width="themeStore.sider.collapsedWidth"

src/layouts/modules/theme-drawer/modules/dark-mode.vue

@@ -25,6 +25,10 @@ function handleGrayscaleChange(value: boolean) {
   themeStore.setGrayscale(value);
 }
 
+function handleColourWeaknessChange(value: boolean) {
+  themeStore.setColourWeakness(value);
+}
+
 const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
 </script>
 
@@ -53,6 +57,9 @@ const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layo
     <SettingItem :label="$t('theme.grayscale')">
       <NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
     </SettingItem>
+    <SettingItem :label="$t('theme.colourWeakness')">
+      <NSwitch :value="themeStore.colourWeakness" @update:value="handleColourWeaknessChange" />
+    </SettingItem>
   </div>
 </template>
 

src/locales/langs/en-us.ts

@@ -230,6 +230,7 @@ const local: App.I18n.Schema = {
       auto: 'Follow System'
     },
     grayscale: 'Grayscale',
+    colourWeakness: 'Colour Weakness',
     layoutMode: {
       title: 'Layout Mode',
       vertical: 'Vertical Menu Mode',
@@ -299,6 +300,10 @@ const local: App.I18n.Schema = {
       height: 'Footer Height',
       right: 'Right Footer'
     },
+    watermark: {
+      visible: 'Watermark Full Screen Visible',
+      text: 'Watermark Text'
+    },
     themeDrawerTitle: 'Theme Configuration',
     pageFunTitle: 'Page Function',
     configOperation: {
@@ -306,10 +311,6 @@ const local: App.I18n.Schema = {
       copySuccessMsg: 'Copy Success, Please replace the variable "themeSettings" in "src/theme/settings.ts"',
       resetConfig: 'Reset Config',
       resetSuccessMsg: 'Reset Success'
-    },
-    watermark: {
-      visible: 'Watermark Visible',
-      text: 'Watermark Text'
     }
   },
   route: {

src/locales/langs/zh-cn.ts

@@ -230,6 +230,7 @@ const local: App.I18n.Schema = {
       auto: '跟随系统'
     },
     grayscale: '灰色模式',
+    colourWeakness: '色弱模式',
     layoutMode: {
       title: '布局模式',
       vertical: '左侧菜单模式',
@@ -299,6 +300,10 @@ const local: App.I18n.Schema = {
       height: '底部高度',
       right: '底部局右'
     },
+    watermark: {
+      visible: '显示全屏水印',
+      text: '水印文本'
+    },
     themeDrawerTitle: '主题配置',
     pageFunTitle: '页面功能',
     configOperation: {
@@ -306,10 +311,6 @@ const local: App.I18n.Schema = {
       copySuccessMsg: '复制成功，请替换 src/theme/settings.ts 中的变量 themeSettings',
       resetConfig: '重置配置',
       resetSuccessMsg: '重置成功'
-    },
-    watermark: {
-      visible: '开启水印',
-      text: '水印文字'
     }
   },
   route: {

src/service/request/index.ts

@@ -41,6 +41,7 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
     },
     async onBackendFail(response, instance) {
       const authStore = useAuthStore();
+      const responseCode = String(response.data.status);
 
       function handleLogout() {
         authStore.resetStore();
@@ -55,14 +56,14 @@ export const request = createFlatRequest<App.Service.Response, RequestInstanceSt
 
       // when the backend response code is in `logoutCodes`, it means the user will be logged out and redirected to login page
       const logoutCodes = import.meta.env.VITE_SERVICE_LOGOUT_CODES?.split(',') || [];
-      if (logoutCodes.includes(response.data.status?.toString())) {
+      if (logoutCodes.includes(responseCode)) {
         handleLogout();
         return null;
       }
 
       // when the backend response code is in `modalLogoutCodes`, it means the user will be logged out by displaying a modal
       const modalLogoutCodes = import.meta.env.VITE_SERVICE_MODAL_LOGOUT_CODES?.split(',') || [];
-      if (modalLogoutCodes.includes(response.data.status?.toString())) {
+      if (modalLogoutCodes.includes(responseCode) && !request.state.errMsgStack?.includes(response.data.message)) {
         request.state.errMsgStack = [...(request.state.errMsgStack || []), response.data.message];
 
         // prevent the user from refreshing the page
@@ -94,7 +95,7 @@ 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(response.data.status) && !request.state.isRefreshingToken) {
+      if (expiredTokenCodes.includes(responseCode) && !request.state.isRefreshingToken) {
         request.state.isRefreshingToken = true;
 
         const refreshConfig = await handleRefreshToken(response.config);

src/store/modules/route/shared.ts

@@ -72,17 +72,15 @@ export function getGlobalMenusByAuthRoutes(routes: ElegantConstRoute[]) {
   const menus: App.Global.Menu[] = [];
 
   routes.forEach(route => {
-    const menu = getGlobalMenuByBaseRoute(route);
+    if (!route.meta?.hideInMenu) {
+      const menu = getGlobalMenuByBaseRoute(route);
 
-    if (route.children) {
-      menu.children = getGlobalMenusByAuthRoutes(route.children);
+      if (route.children?.some(child => !child.meta?.hideInMenu)) {
+        menu.children = getGlobalMenusByAuthRoutes(route.children);
+      }
+
+      menus.push(menu);
     }
-
-    if (route.meta?.hideInMenu) {
-      menu.show = false;
-    }
-
-    menus.push(menu);
   });
 
   return menus;

src/store/modules/theme/index.ts

@@ -10,8 +10,8 @@ import {
   createThemeToken,
   getNaiveTheme,
   initThemeSettings,
-  toggleCssDarkMode,
-  toggleGrayscaleMode
+  toggleAuxiliaryColorModes,
+  toggleCssDarkMode
 } from './shared';
 
 /** Theme store */
@@ -33,6 +33,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
   /** grayscale mode */
   const grayscaleMode = computed(() => settings.value.grayscale);
 
+  /** colourWeakness mode */
+  const colourWeaknessMode = computed(() => settings.value.colourWeakness);
+
   /** Theme colors */
   const themeColors = computed(() => {
     const { themeColor, otherColor, isInfoFollowPrimary } = settings.value;
@@ -88,6 +91,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     settings.value.grayscale = isGrayscale;
   }
 
+  /**
+   * Set colourWeakness value
+   *
+   * @param isColourWeakness
+   */
+  function setColourWeakness(isColourWeakness: boolean) {
+    settings.value.colourWeakness = isColourWeakness;
+  }
+
   /** Toggle theme scheme */
   function toggleThemeScheme() {
     const themeSchemes: UnionKey.ThemeScheme[] = ['light', 'dark', 'auto'];
@@ -176,9 +188,9 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     );
 
     watch(
-      grayscaleMode,
+      [grayscaleMode, colourWeaknessMode],
       val => {
-        toggleGrayscaleMode(val);
+        toggleAuxiliaryColorModes(val[0], val[1]);
       },
       { immediate: true }
     );
@@ -206,6 +218,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     naiveTheme,
     settingsJson,
     setGrayscale,
+    setColourWeakness,
     resetStore,
     setThemeScheme,
     toggleThemeScheme,

src/store/modules/theme/shared.ts

@@ -180,20 +180,16 @@ export function toggleCssDarkMode(darkMode = false) {
 }
 
 /**
- * Toggle grayscale mode
+ * Toggle auxiliary color modes
  *
- * @param grayscaleMode Is grayscale mode
+ * @param grayscaleMode
+ * @param colourWeakness
  */
-export function toggleGrayscaleMode(grayscaleMode = false) {
-  const GRAYSCALE_CLASS = 'grayscale';
-
-  const { add, remove } = toggleHtmlClass(GRAYSCALE_CLASS);
-
-  if (grayscaleMode) {
-    add();
-  } else {
-    remove();
-  }
+export function toggleAuxiliaryColorModes(grayscaleMode = false, colourWeakness = false) {
+  const htmlElement = document.documentElement;
+  htmlElement.style.filter = [grayscaleMode ? 'grayscale(100%)' : '', colourWeakness ? 'invert(80%)' : '']
+    .filter(Boolean)
+    .join(' ');
 }
 
 type NaiveColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';

src/styles/css/global.css

@@ -12,7 +12,3 @@ body,
 html {
   overflow-x: hidden;
 }
-
-html.grayscale {
-  filter: grayscale(100%);
-}

src/theme/settings.ts

@@ -2,6 +2,7 @@
 export const themeSettings: App.Theme.ThemeSetting = {
   themeScheme: 'light',
   grayscale: false,
+  colourWeakness: false,
   recommendColor: false,
   themeColor: '#1366ff',
   otherColor: {
@@ -71,7 +72,8 @@ export const themeSettings: App.Theme.ThemeSetting = {
     }
   },
   watermark: {
-    visible: false
+    visible: false,
+    text: 'Snail Job'
   }
 };
 

src/typings/app.d.ts

@@ -10,6 +10,8 @@ declare namespace App {
       themeScheme: UnionKey.ThemeScheme;
       /** grayscale mode */
       grayscale: boolean;
+      /** colour weakness mode */
+      colourWeakness: boolean;
       /** Whether to recommend color */
       recommendColor: boolean;
       /** Theme color */
@@ -93,6 +95,13 @@ declare namespace App {
         /** Whether float the footer to the right when the layout is 'horizontal-mix' */
         right: boolean;
       };
+      /** Watermark */
+      watermark: {
+        /** Whether to show the watermark */
+        visible: boolean;
+        /** Watermark text */
+        text: string;
+      };
       /** define some theme settings tokens, will transform to css variables */
       tokens: {
         light: ThemeSettingToken;
@@ -100,11 +109,6 @@ declare namespace App {
           [K in keyof ThemeSettingToken]?: Partial<ThemeSettingToken[K]>;
         };
       };
-      /** Watermark */
-      watermark: {
-        /** Whether to show the watermark */
-        visible: boolean;
-      };
     }
 
     interface OtherColor {
@@ -194,8 +198,6 @@ declare namespace App {
       icon?: () => VNode;
       /** The menu children */
       children?: Menu[];
-      /** The menu show */
-      show?: boolean;
     };
 
     type Breadcrumb = Omit<Menu, 'children'> & {
@@ -504,6 +506,7 @@ declare namespace App {
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
         grayscale: string;
+        colourWeakness: string;
         layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
         recommendColor: string;
         recommendColorDesc: string;
@@ -544,6 +547,10 @@ declare namespace App {
           height: string;
           right: string;
         };
+        watermark: {
+          visible: string;
+          text: string;
+        };
         themeDrawerTitle: string;
         pageFunTitle: string;
         configOperation: {
@@ -552,10 +559,6 @@ declare namespace App {
           resetConfig: string;
           resetSuccessMsg: string;
         };
-        watermark: {
-          visible: string;
-          text: string;
-        };
       };
       route: Record<I18nRouteKey, string>;
       page: {

src/views/_builtin/login/modules/pwd-login.vue

@@ -57,6 +57,10 @@ const onClose = () => {
 const onSuccess = () => {
   handleSubmit();
 };
+
+const codePopoverStytle = {
+  padding: 0
+};
 </script>
 
 <template>
@@ -73,7 +77,7 @@ const onSuccess = () => {
       />
     </NFormItem>
     <NSpace vertical :size="24">
-      <NPopover :show="codeShow" row style="padding: 0">
+      <NPopover :show="codeShow" row :style="codePopoverStytle">
         <template #trigger>
           <NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="validateCode">
             {{ $t('page.login.common.login') }}