【v3.1.0】1、【新增】9种登录背景图和样式; 2、【新增】全局字体大小切换; 3、【新增】主题颜色切换; 4、【新增】移除cooki…

…e保存token，改为使用localStorage; 5、【优化】升级 ant design vue 到最新版本;

smart-admin-web/javascript-ant-design-vue3/package.json

@@ -19,33 +19,32 @@
   "dependencies": {
     "@wangeditor/editor": "5.1.14",
     "@wangeditor/editor-for-vue": "5.1.12",
-    "ant-design-vue": "4.0.7",
-    "axios": "1.4.0",
+    "ant-design-vue": "4.1.2",
+    "axios": "1.6.8",
     "clipboard": "2.0.11",
     "crypto-js": "4.1.1",
     "decimal.js": "10.3.1",
-    "diff": "5.1.0",
-    "diff2html": "3.4.18",
+    "diff": "5.2.0",
+    "diff2html": "3.4.47",
     "echarts": "5.4.3",
     "highlight.js": "11.8.0",
-    "js-cookie": "3.0.5",
     "lodash": "4.17.21",
-    "lunar-javascript": "1.6.3",
-    "mitt": "3.0.0",
+    "lunar-javascript": "1.6.12",
+    "mitt": "3.0.1",
     "nprogress": "0.2.0",
-    "pinia": "2.1.6",
-    "sm-crypto": "^0.3.13",
+    "pinia": "2.1.7",
+    "sm-crypto": "0.3.13",
     "sortablejs": "1.15.0",
     "ua-parser-js": "1.0.35",
     "v-viewer": "~1.6.4",
-    "vue": "3.3.4",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.2.4",
+    "vue": "3.3.13",
+    "vue-i18n": "9.10.2",
+    "vue-router": "4.3.0",
     "vue3-json-viewer": "2.2.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "4.5.0",
-    "@vue/compiler-sfc": "3.3.4",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vue/compiler-sfc": "3.4.21",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "~9.0.0",
     "eslint-plugin-prettier": "~5.0.0",
@@ -58,9 +57,9 @@
     "stylelint-config-prettier": "~9.0.3",
     "stylelint-config-standard": "~25.0.0",
     "stylelint-order": "~5.0.0",
-    "terser": "~5.19.2",
-    "vite": "5.0.0",
-    "vue-eslint-parser": "~9.3.1"
+    "terser": "~5.29.2",
+    "vite": "5.2.6",
+    "vue-eslint-parser": "~9.4.2"
   },
   "engines": {
     "node": ">=18"

smart-admin-web/javascript-ant-design-vue3/src/App.vue

@@ -9,7 +9,29 @@
 -->
 
 <template>
-  <a-config-provider :locale="antdLocale">
+  <a-config-provider
+    :locale="antdLocale"
+    :theme="{
+      algorithm: compactFlag ? theme.compactAlgorithm : theme.defaultAlgorithm,
+      token: {
+        colorPrimary: themeColors[colorIndex].primaryColor,
+        colorLink: themeColors[colorIndex].primaryColor,
+        colorLinkActive: themeColors[colorIndex].activeColor,
+        colorLinkHover: themeColors[colorIndex].hoverColor,
+        colorIcon: themeColors[colorIndex].primaryColor,
+      },
+      components: {
+        Button: {
+          colorLink: themeColors[colorIndex].primaryColor,
+          colorLinkActive: themeColors[colorIndex].activeColor,
+          colorLinkHover: themeColors[colorIndex].hoverColor,
+        },
+        Icon: {
+          colorIcon: themeColors[colorIndex].primaryColor,
+        },
+      },
+    }"
+  >
     <!---全局loading--->
     <a-spin :spinning="spinning" tip="稍等片刻，我在拼命加载中..." size="large">
       <!--- 路由 -->
@@ -23,12 +45,21 @@
   import { computed } from 'vue';
   import { messages } from '/@/i18n';
   import { useAppConfigStore } from '/@/store/modules/system/app-config';
-  import { useSpinStore } from './store/modules/system/spin';
+  import { useSpinStore } from '/@/store/modules/system/spin';
+  import { theme } from 'ant-design-vue';
+  import { themeColors } from '/@/theme/color.js';
 
   const antdLocale = computed(() => messages[useAppConfigStore().language].antdLocale);
   const dayjsLocale = computed(() => messages[useAppConfigStore().language].dayjsLocale);
   dayjs.locale(dayjsLocale);
 
+  // 全局loading
   let spinStore = useSpinStore();
   const spinning = computed(() => spinStore.loading);
+  // 是否紧凑
+  const compactFlag = computed(() => useAppConfigStore().compactFlag);
+  // 主题颜色
+  const colorIndex = computed(() => {
+    return useAppConfigStore().colorIndex;
+  });
 </script>

smart-admin-web/javascript-ant-design-vue3/src/config/app-config.js

@@ -16,6 +16,8 @@ export const appDefaultConfig = {
   sideMenuWidth: 200,
   // 菜单主题
   sideMenuTheme: 'dark',
+  // 主题颜色索引
+  colorIndex: 0,
   // 顶部菜单页面宽度
   pageWidth: '99%',
   // 标签页
@@ -32,4 +34,6 @@ export const appDefaultConfig = {
   websiteName: 'SmartAdmin 3.X',
   // 主题颜色
   primaryColor: 'red',
+  // 紧凑
+  compactFlag: false,
 };

smart-admin-web/javascript-ant-design-vue3/src/constants/local-storage-key-const.js

@@ -16,6 +16,8 @@ const KEY_PREFIX = 'smart_admin_';
  * localStorageKey集合
  */
 export default {
+  // 用户token
+  USER_TOKEN: `${KEY_PREFIX}user_token`,
   // 用户信息
   USER_INFO: `${KEY_PREFIX}user_info`,
   // 用户权限点

smart-admin-web/javascript-ant-design-vue3/src/i18n/lang/en-US/index.js

@@ -14,10 +14,12 @@ export default {
   antdLocale: antd,
   dayjsLocale: dayjs,
   'setting.title': 'Setting',
+  'setting.color': 'Theme Color',
   'setting.menu.layout': 'Menu Layout',
   'setting.menu.width': 'Menu Width',
   'setting.menu.theme': 'Menu Theme',
   'setting.page.width': 'Page Width',
+  'setting.compact': 'Page Compact',
   'setting.bread': 'Show Bread',
   'setting.pagetag': 'Show PageTag',
   'setting.footer': 'Show Footer',

smart-admin-web/javascript-ant-design-vue3/src/i18n/lang/zh-CN/index.js

@@ -14,9 +14,11 @@ export default {
   antdLocale: antd,
   dayjsLocale: dayjs,
   'setting.title': '网站设置',
+  'setting.color': '主题颜色',
   'setting.menu.layout': '菜单布局',
   'setting.menu.width': '菜单宽度',
   'setting.menu.theme': '菜单主题',
+  'setting.compact': '页面紧凑',
   'setting.page.width': '页面宽度',
   'setting.bread': '面包屑',
   'setting.pagetag': '标签页',

smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-avatar.vue

@@ -33,7 +33,6 @@
   import { computed, ref, onMounted } from 'vue';
   import { loginApi } from '/src/api/system/login-api';
   import { useUserStore } from '/@/store/modules/system/user';
-  import { clearAllCoolies } from '/@/utils/cookie-util';
   import { localClear } from '/@/utils/local-util';
   import { smartSentry } from '/@/lib/smart-sentry';
   import HeaderResetPassword from './header-reset-password-modal/index.vue';
@@ -48,9 +47,7 @@
     } catch (e) {
       smartSentry.captureError(e);
     } finally {
-
       localClear();
-      clearAllCoolies();
       useUserStore().logout();
       location.reload();
     }

smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-setting.vue

@@ -11,10 +11,35 @@
 <template>
   <a-drawer :title="$t('setting.title')" placement="right" :open="visible" @close="close">
     <a-form layout="horizontal" :label-col="{ span: 8 }">
-      <a-form-item label="语言/Language">
-        <a-select v-model:value="formState.language" @change="changeLanguage" style="width: 120px">
-          <a-select-option v-for="item in i18nList" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
-        </a-select>
+      <a-form-item :label="$t('setting.color')">
+        <div style="display: flex; align-items: center">
+          <template v-for="(item, index) in themeColors">
+            <div v-if="index === formState.colorIndex" class="color">
+              <CheckSquareFilled :style="{ color: item.primaryColor, fontSize: '22px' }" />
+            </div>
+            <div v-else @click="changeColor(index)" class="color">
+              <svg
+                class="icon"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                :fill="item.primaryColor"
+                xmlns="http://www.w3.org/2000/svg"
+                width="26"
+                height="26"
+              >
+                <path
+                  d="M128 160.01219c0-17.67619 14.336-32.01219 32.01219-32.01219h704c17.65181 0 31.98781 14.336 31.98781 32.01219v704c0 17.65181-14.336 31.98781-32.01219 31.98781H160.036571a31.98781 31.98781 0 0 1-32.01219-32.01219V160.036571z"
+                ></path>
+              </svg>
+            </div>
+          </template>
+        </div>
+      </a-form-item>
+      <a-form-item :label="$t('setting.compact')">
+        <a-radio-group v-model:value="formState.compactFlag" button-style="solid" @change="changeCompactFlag">
+          <a-radio-button :value="false">默认</a-radio-button>
+          <a-radio-button :value="true">紧凑</a-radio-button>
+        </a-radio-group>
       </a-form-item>
       <a-form-item :label="$t('setting.menu.layout')">
         <a-radio-group @change="changeLayout" button-style="solid" v-model:value="formState.layout">
@@ -23,6 +48,12 @@
           </a-radio-button>
         </a-radio-group>
       </a-form-item>
+      <a-form-item :label="$t('setting.menu.theme')">
+        <a-radio-group v-model:value="formState.sideMenuTheme" button-style="solid" @change="changeMenuTheme">
+          <a-radio-button value="dark">Dark</a-radio-button>
+          <a-radio-button value="light">Light</a-radio-button>
+        </a-radio-group>
+      </a-form-item>
       <a-form-item :label="$t('setting.menu.width')" v-if="formState.layout === LAYOUT_ENUM.SIDE.value">
         <a-input-number @change="changeSideMenuWidth" v-model:value="formState.sideMenuWidth" :min="1" />
         像素（px）
@@ -31,11 +62,10 @@
         <a-input @change="changePageWidth" v-model:value="formState.pageWidth" />
         像素（px）或者 百分比
       </a-form-item>
-      <a-form-item :label="$t('setting.menu.theme')">
-        <a-radio-group v-model:value="formState.sideMenuTheme" button-style="solid" @change="changeMenuTheme">
-          <a-radio-button value="dark">Dark</a-radio-button>
-          <a-radio-button value="light">Light</a-radio-button>
-        </a-radio-group>
+      <a-form-item label="语言/Language">
+        <a-select v-model:value="formState.language" @change="changeLanguage" style="width: 120px">
+          <a-select-option v-for="item in i18nList" :key="item.value" :value="item.value">{{ item.text }}</a-select-option>
+        </a-select>
       </a-form-item>
       <a-form-item :label="$t('setting.bread')">
         <a-switch @change="changeBreadCrumbFlag" v-model:checked="formState.breadCrumbFlag" checked-children="显示" un-checked-children="隐藏" />
@@ -69,6 +99,7 @@
   import { useAppConfigStore } from '/@/store/modules/system/app-config';
   import { Modal } from 'ant-design-vue';
   import { appDefaultConfig } from '/@/config/app-config';
+  import { themeColors } from '/@/theme/color.js';
 
   // ----------------- modal 显示与隐藏 -----------------
 
@@ -130,10 +161,14 @@
     layout: appConfigStore.layout,
     // 页面宽度
     pageWidth: appConfigStore.pageWidth,
+    // 颜色
+    colorIndex: appConfigStore.colorIndex,
     // 侧边菜单宽度
     sideMenuWidth: appConfigStore.sideMenuWidth,
     // 菜单主题
     sideMenuTheme: appConfigStore.sideMenuTheme,
+    // 页面紧凑
+    compactFlag: appConfigStore.compactFlag,
     // 标签页
     pageTagFlag: appConfigStore.pageTagFlag,
     // 面包屑
@@ -162,6 +197,13 @@
     });
   }
 
+  function changeColor(index) {
+    formState.colorIndex = index;
+    appConfigStore.$patch({
+      colorIndex: index,
+    });
+  }
+
   function changeSideMenuWidth(value) {
     appConfigStore.$patch({
       sideMenuWidth: value,
@@ -180,6 +222,12 @@
     });
   }
 
+  function changeCompactFlag(e) {
+    appConfigStore.$patch({
+      compactFlag: e.target.value,
+    });
+  }
+
   function changeBreadCrumbFlag(e) {
     appConfigStore.$patch({
       breadCrumbFlag: e,
@@ -222,4 +270,14 @@
     text-align: left;
     z-index: 1;
   }
+
+  .color {
+    margin-left: 8px;
+    display: inline;
+    height: 26px;
+    width: 26px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/index.vue

@@ -34,9 +34,9 @@
       <HeaderAvatar />
     </div>
     <!---帮助文档--->
-    <div class="user-space-item" @click="showHelpDoc">
-      <question-circle-two-tone style="font-size: 18px; margin-right: 5px; margin-top: 5px" />
+    <div class="user-space-item" @click="showHelpDoc" v-if="!showHelpDocFlag">
       <span>帮助文档</span>
+      <DoubleLeftOutlined v-if="!showHelpDocFlag" />
     </div>
 
     <HeaderSetting ref="headerSetting" />
@@ -48,7 +48,8 @@
   import HeaderSetting from './header-setting.vue';
   import HeaderMessage from './header-message.vue';
   import { useAppConfigStore } from '/@/store/modules/system/app-config';
-  import { ref } from 'vue';
+  import { computed, ref } from 'vue';
+  import { theme } from 'ant-design-vue';
 
   // 设置
   const headerSetting = ref();
@@ -67,10 +68,17 @@
     useAppConfigStore().showHelpDoc();
   }
 
+  const showHelpDocFlag = computed(() => {
+    return useAppConfigStore().helpDocFlag;
+  });
+
   //搜索
-  function search(){
-    window.open("https://1024lab.net");
+  function search() {
+    window.open('https://1024lab.net');
   }
+
+  const { useToken } = theme;
+  const { token } = useToken();
 </script>
 
 <style lang="less" scoped>
@@ -91,7 +99,7 @@
   }
 
   .user-space-item:hover {
-    color: @primary-color;
+    color: v-bind('token.colorPrimary');
     background: @hover-bg-color;
   }