release: update 3.9.3

build/info.ts

@@ -9,10 +9,12 @@ export function viteBuildInfo(): Plugin {
   let config: { command: string };
   let startTime: Dayjs;
   let endTime: Dayjs;
+  let outDir: string;
   return {
     name: "vite:buildInfo",
-    configResolved(resolvedConfig: { command: string }) {
+    configResolved(resolvedConfig) {
       config = resolvedConfig;
+      outDir = resolvedConfig.build?.outDir ?? "dist";
     },
     buildStart() {
       console.log(
@@ -32,6 +34,7 @@ export function viteBuildInfo(): Plugin {
       if (config.command === "build") {
         endTime = dayjs(new Date());
         getPackageSize({
+          folder: outDir,
           callback: (size: string) => {
             console.log(
               bold(

mock/asyncRoutes.ts

@@ -1,8 +1,6 @@
 // 模拟后端动态生成路由
 import { MockMethod } from "vite-plugin-mock";
 
-import Lollipop from "@iconify-icons/ep/lollipop";
-
 /**
  * roles：页面级别权限，这里模拟二种 "admin"、"common"
  * admin：管理员角色
@@ -13,7 +11,7 @@ const permissionRouter = {
   path: "/permission",
   meta: {
     title: "权限管理",
-    icon: Lollipop,
+    icon: "lollipop",
     rank: 10
   },
   children: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-admin-thin",
-  "version": "3.9.1",
+  "version": "3.9.3",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -31,8 +31,8 @@
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.1",
     "@pureadmin/descriptions": "^1.1.0",
-    "@pureadmin/table": "^1.8.1",
-    "@pureadmin/utils": "^1.7.1",
+    "@pureadmin/table": "^1.8.3",
+    "@pureadmin/utils": "^1.7.4",
     "@vueuse/core": "^9.6.0",
     "@vueuse/motion": "2.0.0-beta.12",
     "animate.css": "^4.1.1",
@@ -49,7 +49,7 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.26",
+    "pinia": "^2.0.27",
     "qs": "^6.11.0",
     "responsive-storage": "^2.1.0",
     "vue": "^3.2.45",

pnpm-lock.yaml

@@ -8,9 +8,9 @@ specifiers:
   '@iconify-icons/ri': ^1.2.3
   '@iconify/vue': ^4.0.0
   '@pureadmin/descriptions': ^1.1.0
-  '@pureadmin/table': ^1.8.1
+  '@pureadmin/table': ^1.8.3
   '@pureadmin/theme': ^2.4.0
-  '@pureadmin/utils': ^1.7.1
+  '@pureadmin/utils': ^1.7.4
   '@types/element-resize-detector': 1.1.3
   '@types/js-cookie': ^3.0.1
   '@types/lodash': ^4.14.180
@@ -52,7 +52,7 @@ specifiers:
   nprogress: ^0.2.0
   path: ^0.12.7
   picocolors: ^1.0.0
-  pinia: ^2.0.26
+  pinia: ^2.0.27
   postcss: ^8.4.18
   postcss-html: ^1.5.0
   postcss-import: ^15.0.0
@@ -93,8 +93,8 @@ specifiers:
 dependencies:
   '@ctrl/tinycolor': 3.4.1
   '@pureadmin/descriptions': 1.1.1_element-plus@2.2.26
-  '@pureadmin/table': 1.8.1_element-plus@2.2.26
-  '@pureadmin/utils': 1.7.1_aotapuqn7htzdjltsyimavekky
+  '@pureadmin/table': 1.8.3_element-plus@2.2.26
+  '@pureadmin/utils': 1.7.4_aotapuqn7htzdjltsyimavekky
   '@vueuse/core': 9.6.0_vue@3.2.45
   '@vueuse/motion': 2.0.0-beta.12_vue@3.2.45
   animate.css: 4.1.1
@@ -111,7 +111,7 @@ dependencies:
   mockjs: 1.1.0
   nprogress: 0.2.0
   path: 0.12.7
-  pinia: 2.0.26_mgnvym7yiazkylwwogi5r767ue
+  pinia: 2.0.27_mgnvym7yiazkylwwogi5r767ue
   qs: 6.11.0
   responsive-storage: 2.1.0
   vue: 3.2.45
@@ -823,8 +823,8 @@ packages:
       vue: 3.2.45
     dev: false
 
-  /@pureadmin/table/1.8.1_element-plus@2.2.26:
-    resolution: {integrity: sha512-oZ5GYmLTDgQ64U6+yKFjvpZG2Seuudk3hOWnUogMvKxhIvaRQsGBHbvyg47asMmXxUyeilq+nRumyuiuV7WJTg==}
+  /@pureadmin/table/1.8.3_element-plus@2.2.26:
+    resolution: {integrity: sha512-M+I+CDu74s/ffNybbDg0rHhiMHTdkgVIaksfmmrEwjuLB2nEaz7R0tob2qC5rKE96U2Z246meDHBidyQNx2z9w==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
@@ -840,8 +840,8 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils/1.7.1_aotapuqn7htzdjltsyimavekky:
-    resolution: {integrity: sha512-LqYdMR1xvRDtPp66osOY6usmta6LNGMuON14iONv4ZUC/esQ3RflHlT5glGjOfGUSGCk8O94F5LVS/PVC9Q3Ng==}
+  /@pureadmin/utils/1.7.4_aotapuqn7htzdjltsyimavekky:
+    resolution: {integrity: sha512-uJNHcb2sO7R2avALf+v4TGyuZtJix0Wpw/kMb6eO4C003ZQImuGGi9WlxHaOlESrMyFHZ1AjWm5AqLwJLnpVlw==}
     peerDependencies:
       dayjs: '*'
       echarts: '*'
@@ -3981,8 +3981,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /pinia/2.0.26_mgnvym7yiazkylwwogi5r767ue:
-    resolution: {integrity: sha512-tSxZNUcMGxQOvKZRjPKXxd2+/2NZhRF/CoYVE/+K6uE/Z3v1Oi4fcQFpxu5nMB1dCchjXUZ+lz0tBxV5ntwmQQ==}
+  /pinia/2.0.27_mgnvym7yiazkylwwogi5r767ue:
+    resolution: {integrity: sha512-nOnXP0OFeL8R4WjAHsterU+11vptda643gH02xKNtSCDPiRzVfRYodOLihLDoa0gL1KKuQKV+KOzEgdt3YvqEw==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
       typescript: '>=4.4.4'

public/serverConfig.json

@@ -1,5 +1,5 @@
 {
-  "Version": "3.9.1",
+  "Version": "3.9.3",
   "Title": "PureAdmin",
   "FixedHeader": true,
   "HiddenSideBar": false,

src/components/ReIcon/src/offlineIcon.ts

@@ -0,0 +1,14 @@
+import { addIcon } from "@iconify/vue/dist/offline";
+
+/**
+ * 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
+ */
+
+// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
+import HomeFilled from "@iconify-icons/ep/home-filled";
+import InformationLine from "@iconify-icons/ri/information-line";
+import Lollipop from "@iconify-icons/ep/lollipop";
+
+addIcon("homeFilled", HomeFilled);
+addIcon("informationLine", InformationLine);
+addIcon("lollipop", Lollipop);

src/layout/components/panel/index.vue

@@ -1,11 +1,27 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { onClickOutside } from "@vueuse/core";
+import { ref, computed } from "vue";
 import { emitter } from "@/utils/mitt";
+import { onClickOutside } from "@vueuse/core";
 import Close from "@iconify-icons/ep/close";
 
-const show = ref<Boolean>(false);
 const target = ref(null);
+const show = ref<Boolean>(false);
+
+const iconClass = computed(() => {
+  return [
+    "mr-[20px]",
+    "outline-none",
+    "width-[20px]",
+    "height-[20px]",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
 onClickOutside(target, (event: any) => {
   if (event.clientX > target.value.offsetLeft) return;
   show.value = false;
@@ -23,9 +39,11 @@ emitter.on("openPanel", () => {
       <div class="right-panel-items">
         <div class="project-configuration">
           <h4 class="dark:text-white">项目配置</h4>
-          <span title="关闭配置">
+          <span title="关闭配置" :class="iconClass">
             <IconifyIconOffline
               class="dark:text-white"
+              width="20px"
+              height="20px"
               :icon="Close"
               @click="show = !show"
             />
@@ -69,7 +87,6 @@ emitter.on("openPanel", () => {
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
   transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
   transform: translate(100%);
-  // background: #fff;
   z-index: 40000;
 }
 
@@ -125,16 +142,6 @@ emitter.on("openPanel", () => {
   align-items: center;
   top: 15px;
   margin-left: 10px;
-
-  svg {
-    font-size: 20px;
-    margin-right: 20px;
-
-    &:hover {
-      cursor: pointer;
-      color: var(--el-color-primary);
-    }
-  }
 }
 
 :deep(.el-divider--horizontal) {

src/layout/components/setting/index.vue

@@ -1,4 +1,13 @@
 <script setup lang="ts">
+import {
+  ref,
+  unref,
+  watch,
+  reactive,
+  computed,
+  nextTick,
+  onBeforeMount
+} from "vue";
 import {
   useDark,
   debounce,
@@ -17,7 +26,6 @@ import { useNav } from "@/layout/hooks/useNav";
 import { useAppStoreHook } from "@/store/modules/app";
 import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { ref, unref, watch, reactive, computed, nextTick } from "vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
 import dayIcon from "@/assets/svg/day.svg?component";
@@ -189,16 +197,6 @@ function setLayoutModel(layout: string) {
   useAppStoreHook().setLayout(layout);
 }
 
-/* 初始化项目配置 */
-nextTick(() => {
-  settings.greyVal &&
-    document.querySelector("html")?.setAttribute("class", "html-grey");
-  settings.weakVal &&
-    document.querySelector("html")?.setAttribute("class", "html-weakness");
-  settings.tabsVal && tagsChange();
-  dataThemeChange();
-});
-
 watch($storage, ({ layout }) => {
   switch (layout["layout"]) {
     case "vertical":
@@ -218,6 +216,18 @@ watch($storage, ({ layout }) => {
       break;
   }
 });
+
+onBeforeMount(() => {
+  dataThemeChange();
+  /* 初始化项目配置 */
+  nextTick(() => {
+    settings.greyVal &&
+      document.querySelector("html")?.setAttribute("class", "html-grey");
+    settings.weakVal &&
+      document.querySelector("html")?.setAttribute("class", "html-weakness");
+    settings.tabsVal && tagsChange();
+  });
+});
 </script>
 
 <template>

src/layout/components/sidebar/horizontal.vue

@@ -35,7 +35,10 @@ watch(
 </script>
 
 <template>
-  <div class="horizontal-header">
+  <div
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+    class="horizontal-header"
+  >
     <div class="horizontal-header-left" @click="backHome">
       <FontIcon icon="team-iconlogo" svg style="width: 35px; height: 35px" />
       <h4>{{ title }}</h4>
@@ -93,6 +96,9 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
 .logout {
   max-width: 120px;
 

src/layout/components/sidebar/leftCollapse.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useNav } from "@/layout/hooks/useNav";
 import MenuFold from "@iconify-icons/ri/menu-fold-fill";
-import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
 
 interface Props {
   isActive: boolean;
@@ -15,6 +14,22 @@ const props = withDefaults(defineProps<Props>(), {
 const visible = ref(false);
 const { tooltipEffect } = useNav();
 
+const iconClass = computed(() => {
+  return [
+    "ml-4",
+    "mb-1",
+    "w-[16px]",
+    "h-[16px]",
+    "inline-block",
+    "align-middle",
+    "text-primary",
+    "cursor-pointer",
+    "duration-[360ms]",
+    "hover:text-primary",
+    "dark:hover:!text-white"
+  ];
+});
+
 const emit = defineEmits<{
   (e: "toggleClick"): void;
 }>();
@@ -33,8 +48,9 @@ const toggleClick = () => {
       :content="props.isActive ? '点击折叠' : '点击展开'"
     >
       <IconifyIconOffline
-        :icon="props.isActive ? MenuFold : MenuUnfold"
-        class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
+        :icon="MenuFold"
+        :class="iconClass"
+        :style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
         @click="toggleClick"
         @mouseenter="visible = true"
         @mouseleave="visible = false"

src/layout/components/sidebar/mixNav.vue

@@ -51,7 +51,11 @@ watch(
 </script>
 
 <template>
-  <div v-if="device !== 'mobile'" class="horizontal-header">
+  <div
+    v-if="device !== 'mobile'"
+    class="horizontal-header"
+    v-loading="usePermissionStoreHook().wholeMenus.length === 0"
+  >
     <el-menu
       router
       ref="menuRef"
@@ -124,6 +128,9 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
 .logout {
   max-width: 120px;
 

src/layout/components/sidebar/sidebarItem.vue

@@ -202,7 +202,7 @@ function resolvePath(routePath) {
             placement="top"
             :effect="tooltipEffect"
             :offset="-10"
-            :disabled="!isCollapse && !onlyOneChild.showTooltip"
+            :disabled="!onlyOneChild.showTooltip"
           >
             <template #content>
               {{ onlyOneChild.meta.title }}

src/layout/components/sidebar/vertical.vue

@@ -59,7 +59,10 @@ watch(
 </script>
 
 <template>
-  <div :class="['sidebar-container', showLogo ? 'has-logo' : '']">
+  <div
+    v-loading="menuData.length === 0"
+    :class="['sidebar-container', showLogo ? 'has-logo' : '']"
+  >
     <Logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar
       wrap-class="scrollbar-wrapper"
@@ -91,3 +94,9 @@ watch(
     />
   </div>
 </template>
+
+<style scoped>
+:deep(.el-loading-mask) {
+  opacity: 0.45;
+}
+</style>

src/layout/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import "animate.css";
+// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
+import "@/components/ReIcon/src/offlineIcon";
 // vxe-table的所有icon不支持component模式，间接依赖了font-awesome
 // import "font-awesome/css/font-awesome.min.css";
 import { setType } from "./types";

src/layout/types.ts

@@ -1,5 +1,4 @@
 import type { IconifyIcon } from "@iconify/vue";
-import HomeFilled from "@iconify-icons/ep/home-filled";
 
 export const routerArrays: Array<RouteConfigs> = [
   {
@@ -7,7 +6,7 @@ export const routerArrays: Array<RouteConfigs> = [
     parentPath: "/",
     meta: {
       title: "首页",
-      icon: HomeFilled
+      icon: "homeFilled"
     }
   }
 ];

src/router/modules/error.ts

@@ -1,10 +1,8 @@
-import InformationLine from "@iconify-icons/ri/information-line";
-
 export default {
   path: "/error",
   redirect: "/error/403",
   meta: {
-    icon: InformationLine,
+    icon: "informationLine",
     title: "异常页面",
     rank: 9
   },

src/router/modules/home.ts

@@ -1,5 +1,4 @@
 const Layout = () => import("@/layout/index.vue");
-import HomeFilled from "@iconify-icons/ep/home-filled";
 
 export default {
   path: "/",
@@ -7,7 +6,7 @@ export default {
   component: Layout,
   redirect: "/welcome",
   meta: {
-    icon: HomeFilled,
+    icon: "homeFilled",
     title: "首页",
     rank: 0
   },

src/router/modules/remaining.ts

@@ -1,5 +1,4 @@
 const Layout = () => import("@/layout/index.vue");
-import HomeFilled from "@iconify-icons/ep/home-filled";
 
 export default [
   {
@@ -16,7 +15,7 @@ export default [
     path: "/redirect",
     component: Layout,
     meta: {
-      icon: HomeFilled,
+      icon: "homeFilled",
       title: "首页",
       showLink: false,
       rank: 104

src/router/utils.ts

@@ -198,7 +198,7 @@ function initRouter() {
     } else {
       return new Promise(resolve => {
         getAsyncRoutes().then(({ data }) => {
-          handleAsyncRoutes(data);
+          handleAsyncRoutes(cloneDeep(data));
           storageSession.setItem(key, data);
           resolve(router);
         });
@@ -207,7 +207,7 @@ function initRouter() {
   } else {
     return new Promise(resolve => {
       getAsyncRoutes().then(({ data }) => {
-        handleAsyncRoutes(data);
+        handleAsyncRoutes(cloneDeep(data));
         resolve(router);
       });
     });

src/style/dark.scss

@@ -156,6 +156,19 @@ html.dark {
     background: transparent;
   }
 
+  /* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+  .el-icon {
+    &.el-dialog__close,
+    &.el-drawer__close,
+    &.el-message-box__close,
+    &.el-notification__closeBtn {
+      &:hover {
+        color: rgba(255, 255, 255, 0.85) !important;
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+    }
+  }
+
   /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
   .pure-message {
     background-image: initial !important;

src/style/element-plus.scss

@@ -69,6 +69,33 @@
   }
 }
 
+/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式，表现更鲜明 */
+.el-dialog__headerbtn,
+.el-message-box__headerbtn {
+  &:hover {
+    .el-dialog__close {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+.el-icon {
+  &.el-dialog__close,
+  &.el-drawer__close,
+  &.el-message-box__close,
+  &.el-notification__closeBtn {
+    width: 24px;
+    height: 24px;
+    outline: none;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+    &:hover {
+      color: rgba(0, 0, 0, 0.88) !important;
+      background-color: rgba(0, 0, 0, 0.06);
+      text-decoration: none;
+    }
+  }
+}
+
 /* 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配 */
 .pure-message {
   border-width: 0 !important;