refactor(projects): 恢复pinia默认写法

build/plugins/iconify.ts

@@ -4,6 +4,7 @@ import Components from 'unplugin-vue-components/vite'; // 从指定目录自动
 
 export default [
   Components({
+    dts: false,
     resolvers: [IconsResolver({ componentPrefix: 'icon' })]
   }),
   Icons({ scale: 1, defaultClass: 'inline-block' })

package.json

@@ -22,7 +22,7 @@
     }
   },
   "dependencies": {
-    "@antv/g2plot": "^2.4.5",
+    "@antv/g2plot": "^2.4.7",
     "@vueuse/core": "^7.5.3",
     "axios": "^0.24.0",
     "clipboard": "^2.0.8",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.0.2",
     "@commitlint/config-conventional": "^16.0.0",
-    "@iconify/json": "^1.1.455",
+    "@iconify/json": "^1.1.457",
     "@iconify/vue": "^3.1.2",
     "@types/crypto-js": "^4.1.0",
     "@types/node": "^17.0.8",
@@ -54,7 +54,7 @@
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^6.3.0",
-    "eslint": "^8.6.0",
+    "eslint": "^8.7.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.4",
@@ -66,17 +66,17 @@
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.1",
-    "rollup-plugin-visualizer": "^5.5.2",
+    "rollup-plugin-visualizer": "^5.5.4",
     "sass": "^1.48.0",
     "typescript": "^4.5.4",
     "unplugin-icons": "^0.13.0",
-    "unplugin-vue-components": "^0.17.11",
+    "unplugin-vue-components": "^0.17.13",
     "vite": "^2.7.12",
     "vite-plugin-html": "^2.1.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-windicss": "^1.6.2",
-    "vue-tsc": "^0.30.2",
-    "vueuc": "^0.4.22",
+    "vue-tsc": "^0.30.4",
+    "vueuc": "^0.4.23",
     "windicss": "^3.4.2"
   }
 }

src/App.vue

@@ -5,6 +5,15 @@
 </template>
 
 <script setup lang="ts">
+import { subscribeStore } from '@/store';
+import { useTheme } from '@/composables';
 import AppProvider from './AppProvider.vue';
+
+function init() {
+  subscribeStore();
+  useTheme();
+}
+
+init();
 </script>
 <style scoped></style>

src/composables/common/index.ts

@@ -1,3 +1,4 @@
 export * from './system';
 export * from './router';
+export * from './theme';
 export * from './layout';

src/composables/common/theme.ts

@@ -0,0 +1,37 @@
+import { watch, onUnmounted } from 'vue';
+import { useOsTheme } from 'naive-ui';
+import { useElementSize } from '@vueuse/core';
+import { useThemeStore } from '@/store';
+
+export function useTheme() {
+  const osTheme = useOsTheme();
+  const theme = useThemeStore();
+  const { width } = useElementSize(document.documentElement);
+
+  /** 监听操作系统主题模式 */
+  const stopHandle = watch(
+    osTheme,
+    newValue => {
+      const isDark = newValue === 'dark';
+      theme.setDarkMode(isDark);
+    },
+    { immediate: true }
+  );
+
+  /**
+   * 禁用横向滚动
+   * @description 页面切换时,过渡动画会产生水平方向的滚动条, 小于最小宽度时，不禁止
+   */
+  const anotherStopHandle = watch(width, newValue => {
+    if (newValue < theme.layout.minWidth) {
+      document.documentElement.style.overflowX = 'auto';
+    } else {
+      document.documentElement.style.overflowX = 'hidden';
+    }
+  });
+
+  onUnmounted(() => {
+    stopHandle();
+    anotherStopHandle();
+  });
+}

src/config/common/service.ts

@@ -42,5 +42,5 @@ export const ERROR_STATUS = {
 /** 不弹出错误信息的code */
 export const NO_ERROR_MSG_CODE: (string | number)[] = [];
 
-/** token失效需要刷新token的接口 */
+/** token失效需要刷新token的code */
 export const REFRESH_TOKEN_CODE: (string | number)[] = [66666];

src/hooks/common/index.ts

@@ -3,6 +3,7 @@ import useBoolean from './useBoolean';
 import useLoading from './useLoading';
 import useLoadingEmpty from './useLoadingEmpty';
 import useReload from './useReload';
+import useBodyScroll from './useBodyScroll';
 import useModalVisible from './useModalVisible';
 
-export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload, useModalVisible };
+export { useContext, useBoolean, useLoading, useLoadingEmpty, useReload, useBodyScroll, useModalVisible };

src/hooks/common/useBodyScroll.ts

@@ -0,0 +1,47 @@
+interface ScrollBodyStyle {
+  overflow: string;
+  paddingRight: string;
+}
+
+/**
+ * body标签滚动
+ * @param duration - 显示滚动条的延迟时间
+ */
+export default function useBodyScroll(duration = 300) {
+  const defaultStyle: ScrollBodyStyle = {
+    overflow: '',
+    paddingRight: ''
+  };
+  function getInitBodyStyle() {
+    const { overflow, paddingRight } = document.body.style;
+    Object.assign(defaultStyle, { overflow, paddingRight });
+  }
+  function setScrollBodyStyle() {
+    document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
+    document.body.style.overflow = 'hidden';
+  }
+  function resetScrollBodyStyle() {
+    document.body.style.overflow = defaultStyle.overflow;
+    document.body.style.paddingRight = defaultStyle.paddingRight;
+  }
+
+  /**
+   * 处理body的滚动条
+   * @param hideScroll - 禁止滚动
+   */
+  function scrollBodyHandler(hideScroll: boolean) {
+    if (hideScroll) {
+      setScrollBodyStyle();
+    } else {
+      setTimeout(() => {
+        resetScrollBodyStyle();
+      }, duration);
+    }
+  }
+
+  getInitBodyStyle();
+
+  return {
+    scrollBodyHandler
+  };
+}

src/hooks/common/useModalVisible.ts

@@ -1,69 +1,33 @@
-import { computed, watch, onUnmounted } from 'vue';
-import type { ComputedRef } from 'vue';
+import { watch, onUnmounted } from 'vue';
 import useBoolean from './useBoolean';
-
-interface ScrollBodyStyle {
-  overflow: string;
-  paddingRight: string;
-}
+import useBodyScroll from './useBodyScroll';
 
 /**
  * 使用弹窗
  * @param hideScroll - 关闭html滚动条
- * @param duration - 显示滚动条的延迟时间
  */
-export default function useModalVisible(hideScroll = true, duration = 300) {
+export default function useModalVisible(hideScroll = true) {
   const { bool: visible, setTrue: openModal, setFalse: closeModal, toggle: toggleModal } = useBoolean();
+  const { scrollBodyHandler } = useBodyScroll();
 
-  const defaultStyle: ScrollBodyStyle = {
-    overflow: '',
-    paddingRight: ''
-  };
-  function getInitBodyStyle() {
-    if (hideScroll) {
-      const { overflow, paddingRight } = document.body.style;
-      Object.assign(defaultStyle, { overflow, paddingRight });
-    }
-  }
-  function setScrollBodyStyle() {
-    document.body.style.paddingRight = `${window.innerWidth - document.body.clientWidth}px`;
-    document.body.style.overflow = 'hidden';
-  }
-  function resetScrollBodyStyle() {
-    document.body.style.overflow = defaultStyle.overflow;
-    document.body.style.paddingRight = defaultStyle.paddingRight;
-  }
-
-  function modalVisibleWatcher(visible: ComputedRef<boolean>) {
+  function modalVisibleWatcher() {
     const stopHandle = watch(visible, async newValue => {
-      if (hideScroll) {
-        if (newValue) {
-          setScrollBodyStyle();
-        } else {
-          setTimeout(() => {
-            resetScrollBodyStyle();
-          }, duration);
-        }
-      }
+      scrollBodyHandler(newValue);
     });
 
     onUnmounted(() => {
       stopHandle();
     });
   }
 
-  function init() {
-    getInitBodyStyle();
-    modalVisibleWatcher(computed(() => visible.value));
+  if (hideScroll) {
+    modalVisibleWatcher();
   }
 
-  init();
-
   return {
     visible,
     openModal,
     closeModal,
-    toggleModal,
-    modalVisibleWatcher
+    toggleModal
   };
 }

src/interface/system.ts

@@ -1,9 +1,14 @@
-import type { MenuOption, DropdownOption } from 'naive-ui';
+import type { VNodeChild } from 'vue';
+import type { DropdownOption } from 'naive-ui';
 
 /** 菜单项配置 */
-export type GlobalMenuOption = MenuOption & {
+export type GlobalMenuOption = {
+  key: string;
+  label: string;
   routeName: string;
   routePath: string;
+  icon?: () => VNodeChild;
+  children?: GlobalMenuOption[];
 };
 
 /** 面包屑 */

src/layouts/common/GlobalHeader/components/ThemeMode.vue

@@ -1,6 +1,6 @@
 <template>
   <hover-container class="w-40px" content-class="hover:text-primary" tooltip-content="主题模式">
-    <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="setDarkMode" />
+    <dark-mode-switch :dark="theme.darkMode" class="wh-full" @update:dark="theme.setDarkMode" />
   </hover-container>
 </template>
 
@@ -9,6 +9,5 @@ import { HoverContainer, DarkModeSwitch } from '@/components';
 import { useThemeStore } from '@/store';
 
 const theme = useThemeStore();
-const { setDarkMode } = useThemeStore();
 </script>
 <style scoped></style>

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -45,7 +45,7 @@ function handleDropdown(optionKey: string) {
       positiveText: '确定',
       negativeText: '取消',
       onPositiveClick: () => {
-        auth.resetAuthStore(true);
+        auth.resetAuthStore();
       }
     });
   }

src/layouts/common/GlobalLogo/index.vue

@@ -1,7 +1,9 @@
 <template>
   <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
     <system-logo class="w-32px h-32px text-primary" />
-    <h2 v-if="showTitle" class="pl-8px text-16px font-bold text-primary">{{ title }}</h2>
+    <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
+      {{ title }}
+    </h2>
   </router-link>
 </template>
 

src/layouts/common/GlobalSider/components/SiderMenu.vue

@@ -44,7 +44,7 @@ function getActiveKeysInMenus(menu: GlobalMenuOption) {
     keys.push(menu.routeName);
   }
   if (menu.children) {
-    keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat());
+    keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat(1));
   }
   return keys;
 }

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -3,7 +3,7 @@
     type="primary"
     :class="[{ '!right-330px': app.settingDrawerVisible }, app.settingDrawerVisible ? 'ease-out' : 'ease-in']"
     class="fixed top-240px right-14px z-10000 w-42px h-42px !p-0 transition-all duration-300"
-    @click="toggleSettingdrawerVisible"
+    @click="app.toggleSettingdrawerVisible"
   >
     <icon-ant-design:close-outlined v-if="app.settingDrawerVisible" class="text-24px" />
     <icon-ant-design:setting-outlined v-else class="text-24px" />
@@ -15,6 +15,5 @@ import { NButton } from 'naive-ui';
 import { useAppStore } from '@/store';
 
 const app = useAppStore();
-const { toggleSettingdrawerVisible } = useAppStore();
 </script>
 <style scoped></style>