perf(layouts): ⚡️ tabs

- 修改标签页逻辑

- 路由添加隐藏标签页选项

- 添加标签详情页hooks

build/vite/plugin/element.ts

@@ -0,0 +1,8 @@
+// 按需element样式
+import ElementPlus from 'unplugin-element-plus/vite';
+
+export function configAutoElementStylePlugin() {
+  return ElementPlus({
+    useSource: true,
+  });
+}

build/vite/plugin/index.ts

@@ -4,9 +4,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 
 import type { Plugin, ConfigEnv } from 'vite';
 
-// 按需element样式
-import ElementPlus from 'unplugin-element-plus/vite';
-
 // 检查插件状态
 import Inspect from 'vite-plugin-inspect';
 // 按需加载样式配置
@@ -25,6 +22,8 @@ import { configVisualizerPlugin } from './visualizer';
 import { configImageminPlugin } from './imagemin';
 // vue-i18n
 import { configVueI18nPlugin } from './i18n';
+// element
+import { configAutoElementStylePlugin } from './element';
 
 // 自定义插件 问候语，打包检测用时、大小
 import viteBuildOuteInfo from './buildOuteInfo';
@@ -64,11 +63,7 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
 
   vitePlugins.push(Inspect());
 
-  vitePlugins.push(
-    ElementPlus({
-      useSource: true,
-    }),
-  );
+  vitePlugins.push(configAutoElementStylePlugin());
 
   // 使用此插件会导致vite启动变慢 100ms左右
   // vitePlugins.push(configEsLinterPlugin(configEnv))

src/hooks/web/useDetailsNavigation.ts

@@ -0,0 +1,34 @@
+import { useRouter } from 'vue-router';
+import type { LocationQuery } from 'vue-router';
+import { usePermissionStoreHook } from '@/store/modules/permission';
+import type { Meta } from '@/router/type';
+
+export interface DetailsNavigationOption {
+  path: string;
+  name: string;
+  title: Meta['title'];
+  query?: LocationQuery;
+}
+
+export const useDetailsNavigation = () => {
+  const router = useRouter();
+
+  const openDetails = (options: DetailsNavigationOption) => {
+    const { title, ...res } = options;
+    usePermissionStoreHook().handleMultiTabs('add', {
+      ...res,
+      meta: {
+        title,
+      },
+    });
+    try {
+      router.push({ path: res.path, query: res.query });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return {
+    openDetails,
+  };
+};

src/layouts/page-layouts/components/AppTabs/hooks/useTabsChange.ts

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue';
 import { unref } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { useRoute, useRouter } from 'vue-router';
 import qs from 'qs';
 import { addClass, removeClass } from '@jsxiaosi/utils';
@@ -10,7 +11,7 @@ export const useTabsChange = (multiTabs: Ref<MultiTabsType[]>) => {
   const route = useRoute();
   const router = useRouter();
 
-  const setTabPaneKey = (item: MultiTabsType): string => {
+  const setTabPaneKey = (item: MultiTabsType | RouteLocationNormalizedLoaded): string => {
     return `${item.path}${
       item.query && Object.keys(item.query).length ? '?' + qs.stringify(item.query) : ''
     }`;
@@ -19,8 +20,10 @@ export const useTabsChange = (multiTabs: Ref<MultiTabsType[]>) => {
   // 添加标签
   const addRouteTabs = (routeRaw: MultiTabsType) => {
     const { path, name, meta } = routeRaw;
-    const currentRoute = { path, meta, name };
-    usePermissionStoreHook().handleMultiTabs('add', currentRoute);
+    if (!meta?.hideTabs && !meta?.hideSidebar) {
+      const currentRoute = { path, meta, name };
+      usePermissionStoreHook().handleMultiTabs('add', currentRoute);
+    }
   };
 
   // 关闭标签

src/layouts/page-layouts/components/AppTabs/hooks/useTabsView.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, Ref } from 'vue';
 import { computed, reactive, ref, watch } from 'vue';
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { useTabsChange } from './useTabsChange';
 import type { MultiTabsType } from '@/store/types';
 
@@ -67,7 +68,7 @@ export const useTabsView = (multiTabs: Ref<MultiTabsType[]>) => {
     }
   };
 
-  const contextmenu = (route: MultiTabsType, e?: MouseEvent) => {
+  const contextmenu = (route: MultiTabsType | RouteLocationNormalizedLoaded, e?: MouseEvent) => {
     const item = multiTabs.value.find((i) => setTabPaneKey(i) === setTabPaneKey(route));
     if (!item) return;
     closeMenu();

src/layouts/page-layouts/components/AppTabs/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, computed, watch, onBeforeMount } from 'vue';
+  import { ref, computed, watch } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import type { TabPaneName } from 'element-plus';
   import { ElDropdown } from 'element-plus';
@@ -10,7 +10,6 @@
   import type { MultiTabsType } from '@/store/types';
   import SvgIcon from '@/components/SvgIcon/index.vue';
   import { useRootSetting } from '@/hooks/setting/useRootSetting';
-  import { emitter } from '@/utils/mitt';
 
   const { appConfig, setAppConfigMode } = useRootSetting();
 
@@ -29,16 +28,14 @@
   watch(
     () => [route.path],
     async () => {
+      addRouteTabs(route.matched[route.matched.length - 1] as unknown as MultiTabsType);
       editableTabsValue.value = setTabPaneKey(route);
     },
+    {
+      immediate: true,
+    },
   );
 
-  onBeforeMount(() => {
-    emitter.on('siteBarChange', ({ routeRaw }) => {
-      addRouteTabs(routeRaw as unknown as MultiTabsType);
-    });
-  });
-
   const tabRemoveChange = (e: TabPaneName) => {
     const item = multiTabs.value.find((i) => setTabPaneKey(i) === e);
     if (item) removeTab(item);
@@ -84,7 +81,7 @@
             @click="changeTab(item)"
             @contextmenu.prevent="tabPaneMenu(item, $event)"
           ></div>
-          <span>{{ translateI18n(item.meta.title) }}</span>
+          <span>{{ translateI18n(item.meta?.title) }}</span>
         </template>
       </el-tab-pane>
     </el-tabs>

src/layouts/page-layouts/components/Sidebar/Item.vue

@@ -1,24 +1,25 @@
 <script setup lang="ts">
   import SvgIcon from '@/components/SvgIcon/index.vue';
-  defineProps({
-    icon: {
-      type: String,
-      default: '',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    className: {
-      type: String,
-      default: '',
+  import type { localeTitle } from '@/router/type';
+  import { translateI18n } from '@/hooks/web/useI18n';
+
+  const props = withDefaults(
+    defineProps<{
+      icon?: string;
+      title?: string | localeTitle;
+      className?: string;
+    }>(),
+    {
+      icon: 'hello',
+      title: '',
+      className: '',
     },
-  });
+  );
 </script>
 
 <template>
-  <SvgIcon :class-name="className" :name="icon" />
-  <span v-if="title">{{ $t(title) }}</span>
+  <SvgIcon :class-name="props.className" :name="props.icon" />
+  <span v-if="props.title">{{ translateI18n(props.title) }}</span>
 </template>
 
 <style lang="scss" scoped>

src/layouts/page-layouts/components/Sidebar/MinSidebar.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
   import { computed } from 'vue';
   import { useRoute } from 'vue-router';
-  import { useNavSideBar } from '../../hooks/useNavSideBar';
   import Item from './Item.vue';
   import AppLink from './Link.vue';
   import { usePermissionStoreHook } from '@/store/modules/permission';
@@ -10,11 +9,9 @@
 
   const route = useRoute();
 
-  const { selectMenu } = useNavSideBar();
-
   const resolvePath = (routeRaw: AppRouteRecordRaw): string => {
     let path = routeRaw.path;
-    if (routeRaw.children && routeRaw.children.length && !routeRaw.children[0].hidden) {
+    if (routeRaw.children && routeRaw.children.length && !routeRaw.children[0].meta?.hideSidebar) {
       path = routeRaw.children[0].path;
     }
     return path;
@@ -26,7 +23,11 @@
     // 当前路由的父级路径
     const parentRoutes = getParentPaths(path, wholeMenus)[0];
     const routeByPath = findRouteByPath(parentRoutes, wholeMenus);
-    if (routeByPath?.children && routeByPath.children.length && !routeByPath.children[0].hidden) {
+    if (
+      routeByPath?.children &&
+      routeByPath.children.length &&
+      !routeByPath.children[0].meta?.hideSidebar
+    ) {
       return routeByPath.children[0].path;
     }
     return path;
@@ -39,7 +40,6 @@
     :default-active="activeMenyu"
     class="horizontal-header-menu"
     mode="horizontal"
-    @select="(indexPath: string) => selectMenu(indexPath)"
   >
     <AppLink
       v-for="menusRoute in usePermissionStoreHook().wholeMenus"

src/layouts/page-layouts/components/Sidebar/SidebarItem.vue

@@ -28,7 +28,7 @@
     parent: AppRouteRecordRaw,
   ) => {
     const showingChildren = children.filter((item: AppRouteRecordRaw) => {
-      if (item.hidden) {
+      if (item.meta?.hideSidebar) {
         return false;
       } else {
         // Temp set(will be used if only has one showing child)
@@ -62,12 +62,12 @@
 </script>
 
 <template>
-  <div v-if="!item.hidden">
+  <div v-if="!item.meta?.hideSidebar">
     <template
       v-if="
         hasOneShowingChild(item.children, item) &&
         (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
-        !item.alwaysShow
+        !item.meta?.alwaysShow
       "
     >
       <AppLink v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">

src/layouts/page-layouts/components/Sidebar/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
   import type { PropType } from 'vue';
-  import { onMounted, computed, ref, watch } from 'vue';
+  import { computed, ref, watch } from 'vue';
   import { useRoute } from 'vue-router';
-  import { useNavSideBar } from '../../hooks/useNavSideBar';
   import SidebarItem from './SidebarItem.vue';
   import { usePermissionStoreHook } from '@/store/modules/permission';
   import type { AppRouteRecordRaw } from '@/router/type';
@@ -16,8 +15,6 @@
     },
   });
 
-  const { selectMenu } = useNavSideBar();
-
   const permission = usePermissionStoreHook();
 
   const route = useRoute();
@@ -36,27 +33,22 @@
     // 当前路由的信息
     const parenetRoute = findRouteByPath(parentPathArr[0], permission.wholeMenus);
     if (parenetRoute) {
-      if (parenetRoute.children && !parenetRoute.children[0].hidden)
+      if (parenetRoute.children && !parenetRoute.children[0].meta?.hideSidebar)
         subMenuData.value = parenetRoute.children;
       else subMenuData.value = [parenetRoute];
     }
   }
 
   getSubMenuData(route.path);
   watch(
-    () => [route.path, appConfig.value.sidebarMode, () => permission.wholeMenus],
-    ([newPath], [oldPath]) => {
+    () => [route.path, appConfig.value.sidebarMode],
+    () => {
       if (appConfig.value.sidebarMode === 'blend') {
         getSubMenuData(route.path);
       }
-      if (newPath !== oldPath) selectMenu(route.path);
     },
   );
 
-  onMounted(() => {
-    selectMenu(route.path);
-  });
-
   const activeMenyu = computed<string>(() => {
     const { meta, path } = route;
     if (meta.activeMenu) {
@@ -73,7 +65,6 @@
       :unique-opened="true"
       :collapse="appConfig.sidebarMode === 'horizontal' ? false : appConfig.collapseMenu"
       :mode="mode"
-      @select="(indexPath: string) => selectMenu(indexPath)"
     >
       <SidebarItem
         v-for="menuRoute in menuData"

src/router/modules/about/index.ts

@@ -6,8 +6,12 @@ const about: AppRouteRecordRaw[] = [
     path: '/about',
     redirect: '/about/index',
     name: 'RtAdminInfo',
-    alwaysShow: false,
-    meta: { title: t('route.pathName.about'), icon: 'about', position: 11 },
+    meta: {
+      title: t('route.pathName.about'),
+      icon: 'about',
+      alwaysShow: false,
+      position: 11,
+    },
     children: [
       {
         path: 'index',