v3.1.0 1、【新增】9种登录背景图和样式; 2、【新增】全局字体大小切换; 3、【新增】主题颜色切换; 4、【新增】移除cookie保存token，改为使用localStorage; 5、【优化】升级 ant design vue 到最新版本;

2025-11-13 14:13:47 +08:00 · 2024-04-06 21:01:43 +08:00
parent 1723f2514f
commit 6a2c86d9f2
51 changed files with 2196 additions and 1359 deletions
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-avatar.vue
+++ b/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();
    }
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/header-setting.vue
+++ b/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>
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/header-user-space/index.vue
+++ b/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;
  }

--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/page-tag/index.vue
+++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/page-tag/index.vue
@@ -12,7 +12,7 @@
  <a-row style="border-bottom: 1px solid #eeeeee; position: relative" v-show="pageTagFlag">
    <a-dropdown :trigger="['contextmenu']">
      <div class="smart-page-tag">
-        <a-tabs style="width: 100%" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab" >
+        <a-tabs style="width: 100%" :tab-position="mode" v-model:activeKey="selectedKey" size="small" @tabClick="selectTab">
          <a-tab-pane v-for="item in tagNav" :key="item.menuName">
            <template #tab>
              <span>
@@ -55,12 +55,7 @@
  import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
  import { useAppConfigStore } from '/@/store/modules/system/app-config';
  import { useUserStore } from '/@/store/modules/system/user';
-
-  // //样式
-  // const tagOperateWidth = ref(40);
-  // const tabBarStyle = {
-  //   width: 'calc(100% - 80px)'
-  // }
+  import { theme } from 'ant-design-vue';

  //标签页 是否显示
  const pageTagFlag = computed(() => useAppConfigStore().$state.pageTagFlag);
@@ -85,7 +80,7 @@
      return;
    }
    // 寻找tag
-    let tag = tagNav.value.find((e) => e.menuName == name);
+    let tag = tagNav.value.find((e) => e.menuName === name);
    if (!tag) {
      router.push({ name: HOME_PAGE_NAME });
      return;
@@ -96,7 +91,7 @@

  //通过菜单关闭
  function closeByMenu(closeAll) {
-    let find = tagNav.value.find((e) => e.menuName == selectedKey.value);
+    let find = tagNav.value.find((e) => e.menuName === selectedKey.value);
    if (!find || closeAll) {
      closeTag(null, true);
    } else {
@@ -110,12 +105,12 @@
    if (item && !closeAll) {
      let goName = HOME_PAGE_NAME;
      let goQuery = undefined;
-      if (item.fromMenuName && tagNav.value.some((e) => e.menuName == item.fromMenuName)) {
+      if (item.fromMenuName && tagNav.value.some((e) => e.menuName === item.fromMenuName)) {
        goName = item.fromMenuName;
        goQuery = item.fromMenuQuery;
      } else {
        // 查询左侧tag
-        let index = tagNav.value.findIndex((e) => e.menuName == item.menuName);
+        let index = tagNav.value.findIndex((e) => e.menuName === item.menuName);
        if (index > 0) {
          // 查询左侧tag
          let leftTagNav = tagNav.value[index - 1];
@@ -132,10 +127,14 @@
    // 关闭其他tag不做处理 直接调用closeTagNav
    useUserStore().closeTagNav(item ? item.menuName : null, closeAll);
  }
+
+  const { useToken } = theme;
+  const { token } = useToken();
 </script>

 <style scoped lang="less">
  @smart-page-tag-operate-width: 40px;
+  @color-primary: v-bind('token.colorPrimary');

  .smart-page-tag-operate {
    width: @smart-page-tag-operate-width;
@@ -164,7 +163,7 @@
  }

  .smart-page-tag-operate:hover {
-    color: @primary-color;
+    color: @color-primary;
  }

  .smart-page-tag {
@@ -184,7 +183,7 @@
    .smart-page-tag-close {
      margin-left: 5px;
      font-size: 10px;
-      color: #8c8c8c;
+      color: #666666;
    }

    /**  覆盖 ant design vue的 tabs 样式，变小一点 **/
@@ -203,15 +202,15 @@
    }

    :deep(.ant-tabs-tab-active) {
-      background-color: #e8f4ff;
+      background-color: #eeeeee;
      .smart-page-tag-close {
-        color: @primary-color;
+        color: @color-primary;
      }
    }
    :deep(.ant-tabs-nav .ant-tabs-tab:hover) {
-      background-color: #e8f4ff;
+      background-color: #eeeeee;
      .smart-page-tag-close {
-        color: @primary-color;
+        color: @color-primary;
      }
    }
  }
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-expand-menu/top-menu.vue
+++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-expand-menu/top-menu.vue
@@ -90,17 +90,20 @@
    z-index: 100;
    display: flex;
    justify-content: space-between;
+    align-items: center;
    cursor: pointer;

    .logo-img {
-      width: 40px;
-      height: 40px;
+      width: 30px;
+      height: 30px;
    }

    .title {
      font-size: 16px;
      font-weight: 600;
      overflow: hidden;
+      word-wrap: break-word;
+      white-space: nowrap;
      color: v-bind('theme === "light" ? "#001529": "#ffffff"');
    }
  }
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/index.vue
+++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/index.vue
@@ -79,9 +79,10 @@
      z-index: 21;
      display: flex;
      justify-content: center;
+      align-items: center;
      .logo-img {
-        width: 32px;
-        height: 32px;
+        width: 30px;
+        height: 30px;
      }
    }

@@ -93,10 +94,11 @@
      display: flex;
      cursor: pointer;
      justify-content: center;
+      align-items: center;

      .logo-img {
-        width: 40px;
-        height: 40px;
+        width: 30px;
+        height: 30px;
      }

      .title {
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/top-menu/index.vue
+++ b/smart-admin-web/javascript-ant-design-vue3/src/layout/components/top-menu/index.vue
@@ -86,10 +86,10 @@

  const color = computed(() => {
    let isLight = useAppConfigStore().$state.sideMenuTheme === 'light';
-      return {
-          color: isLight ? '#001529' : '#FFFFFF',
-          background:isLight ? '#FFFFFF' : '#001529',
-      }
+    return {
+      color: isLight ? '#001529' : '#FFFFFF',
+      background: isLight ? '#FFFFFF' : '#001529',
+    };
  });

  const router = useRouter();
@@ -118,7 +118,7 @@

      .logo-img {
        display: inline-block;
-        height: 45px;
+        height: 30px;
        vertical-align: middle;
      }
      .title {
@@ -161,13 +161,13 @@
        color: v-bind('color.color');
      }

-      .user-space-item{
+      .user-space-item {
        margin-left: 10px;
      }
    }
  }

-  :deep(.ant-menu-horizontal){
-    border-bottom:0;
+  :deep(.ant-menu-horizontal) {
+    border-bottom: 0;
  }
 </style>