Merge branch 'template' into release

mock/apiDemo/routeMenu.ts

@@ -63,21 +63,21 @@ const menu = [
       },
       {
         path: 'multilevel',
-        component: 'LayoutPage',
+        component: 'Layout',
         meta: {
           title: '多级菜单',
         },
         children: [
           {
             path: '1',
-            component: 'LayoutPage',
+            component: 'Layout',
             meta: {
               title: '多级菜单1',
             },
             children: [
               {
                 path: '1-1',
-                component: 'LayoutPage',
+                component: 'Layout',
                 meta: {
                   title: '多级菜单1-1',
                   alwaysShow: true,

src/layout/components/header/components/tagBar/index.vue

@@ -67,7 +67,7 @@ import contextmenu from './components/contextmenu.vue';
 import { isExternal } from '@/utils/validate';
 import { resolve } from 'path-browserify';
 import $ from 'jquery';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 // 初始化tags
 const tags = reactive([] as RouteLocationNormalized[]);
 const resolvePath = (routePath: string, basePath = '') => {

src/layout/components/header/components/topBar/components/left.vue

@@ -24,17 +24,17 @@
 import { mitter, event } from '@/event';
 import { useSettingStore, useGlobalStore, useRouteStore } from '@/store';
 import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 const globalStore = useGlobalStore();
 const setMenuCollapse = () => {
-  themeConfig.menuCollapse = !themeConfig.menuCollapse;
+  themeConfig.value.menuCollapse = !themeConfig.value.menuCollapse;
 };
 const breadcrumbList = ref([] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[]);
 const route = useRoute();
-const { routes } = useRouteStore();
+const { routes } = storeToRefs(useRouteStore());
 const setBreadcrumbList = (route: RouteLocationNormalized) => {
   const list = [] as Pick<RouteRecordRaw, 'name' | 'path' | 'meta' | 'redirect'>[];
-  let temp = { children: routes } as unknown as RouteRecordRaw;
+  let temp = { children: routes.value } as unknown as RouteRecordRaw;
   route.meta.menuIndex!.forEach((item) => {
     temp = temp.children![item];
     if (temp.meta && temp.meta.title && temp.meta.breadcrumb !== false) {

src/layout/components/header/components/topBar/components/right/index.vue

@@ -15,7 +15,7 @@ import { localeConfig } from '@/config';
 import MessageBox from './components/messageBox.vue';
 import { useSettingStore } from '@/store';
 import User from './components/user.vue';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .right {

src/layout/components/header/index.vue

@@ -8,7 +8,7 @@
 import { useSettingStore } from '@/store';
 import TopBar from './components/topBar/index.vue';
 import TagBar from './components/tagBar/index.vue';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .layout-header {

src/layout/components/menu/components/menuItem.vue

@@ -1,7 +1,9 @@
 <template>
   <template v-if="!item.meta?.hideMenu">
     <template
-      v-if="onlyOneChild && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow"
+      v-if="
+        onlyOneChild && (!onlyOneChild.children?.length || onlyOneChild.noShowingChildren) && !item.meta?.alwaysShow
+      "
     >
       <component
         :is="onlyOneChild.meta?.isLink ? 'a' : 'routerLink'"

src/layout/components/menu/index.vue

@@ -17,7 +17,7 @@
 <script setup lang="ts" name="layoutMenu">
 import { useSettingStore, useRouteStore, useGlobalStore } from '@/store';
 import { mixColor, getColorLuma } from '@/utils/helper';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 const routeStore = useRouteStore();
 const globalStore = useGlobalStore();
 const route = useRoute();
@@ -38,10 +38,10 @@ watch(
   { immediate: true },
 );
 const menuBg1 = computed(() =>
-  mixColor(themeConfig.menuBg, getColorLuma(themeConfig.menuBg) < 100 ? '#ffffff' : '#303133', 0.1),
+  mixColor(themeConfig.value.menuBg, getColorLuma(themeConfig.value.menuBg) < 100 ? '#ffffff' : '#303133', 0.1),
 );
-const menuActiveColor = computed(() => (getColorLuma(themeConfig.menuBg) < 100 ? '#ffffff' : '#303133'));
-const menuTextColor = computed(() => mixColor(themeConfig.menuBg, menuActiveColor.value, 0.8));
+const menuActiveColor = computed(() => (getColorLuma(themeConfig.value.menuBg) < 100 ? '#ffffff' : '#303133'));
+const menuTextColor = computed(() => mixColor(themeConfig.value.menuBg, menuActiveColor.value, 0.8));
 </script>
 <style lang="scss" scoped>
 .layout-menu {

src/layout/index.vue

@@ -36,7 +36,7 @@ import LayoutHeader from './components/header/index.vue';
 import LayoutMenu from './components/menu/index.vue';
 import LayoutPage from './components/page.vue';
 import { useSettingStore, useGlobalStore } from '@/store';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 const globalStore = useGlobalStore();
 onMounted(() => {
   nextTick(() => (globalStore.layoutLoaded = true));

src/router/index.ts

@@ -11,14 +11,6 @@ import { isExternal } from '@/utils/validate';
 import { resolve } from 'path-browserify';
 
 export const constantRoutes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    redirect: PageEnum.HOME,
-    meta: {
-      hideMenu: true,
-      title: '首页',
-    },
-  },
   {
     path: PageEnum.LOGIN,
     component: async () => await import('@/views/login/index.vue'),
@@ -64,13 +56,14 @@ export const flatteningRoutes = (
   basePath = '',
   menuIndex: number[] = [],
   newRoutes: RouteRecordRaw[] = [],
+  baseIndex = 0,
 ) => {
   routes.forEach((route, index) => {
     route.path = resolvePath(route.path, basePath);
     if (!route.meta) {
       route.meta = { title: '' };
     }
-    route.meta.menuIndex = [...menuIndex, index];
+    route.meta.menuIndex = [...menuIndex, index + baseIndex];
     newRoutes.push(Object.assign({ ...route }, { children: [] }));
     if (route.children) {
       flatteningRoutes(route.children, route.path, route.meta.menuIndex, newRoutes);
@@ -79,7 +72,7 @@ export const flatteningRoutes = (
   return newRoutes;
 };
 //扁平化为2级路由
-export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0) => {
+export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0, ignoreFirst = false) => {
   const newRoutes = [] as RouteRecordRaw[];
   routes.forEach((route, index) => {
     if (!route.meta) {
@@ -90,7 +83,15 @@ export const flatteningRoutes2 = (routes: RouteRecordRaw[], startIndex = 0) => {
       Object.assign(
         { ...route },
         {
-          children: route.children ? flatteningRoutes(route.children, route.path, [index + startIndex]) : [],
+          children: route.children
+            ? flatteningRoutes(
+                route.children,
+                route.path,
+                ignoreFirst ? [] : [index + startIndex],
+                [],
+                ignoreFirst ? index + startIndex : 0,
+              )
+            : [],
         },
       ),
     );

src/router/routes/example/6-multilevel.ts

@@ -1,10 +1,10 @@
 import { RouteRecordRaw } from 'vue-router';
-import { LayoutPage } from '@/router/constant';
+import { Layout } from '@/router/constant';
 import { concatObjectValue } from '@/utils/helper';
 export const routes: RouteRecordRaw[] = [
   {
     path: 'multilevel',
-    component: LayoutPage,
+    component: Layout,
     meta: { title: '多级菜单' },
     children: concatObjectValue<RouteRecordRaw>(
       import.meta.glob('./multilevel/*.ts', { eager: true, import: 'routes' }),

src/router/routes/example/multilevel/1.ts

@@ -1,14 +1,14 @@
 import { RouteRecordRaw } from 'vue-router';
-import { LayoutPage } from '@/router/constant';
+import { Layout } from '@/router/constant';
 export const routes: RouteRecordRaw[] = [
   {
     path: '1',
-    component: LayoutPage,
+    component: Layout,
     meta: { title: '多级菜单1' },
     children: [
       {
         path: '1-1',
-        component: LayoutPage,
+        component: Layout,
         meta: { title: '多级菜单1-1', alwaysShow: true },
         redirect: '/example/multilevel/1/1-1/1-1-1',
         children: [

src/store/modules/route.ts

@@ -5,6 +5,8 @@ import { router, constantRoutes, asyncRoutes, flatteningRoutes2 } from '@/router
 import { RouteRecordRaw } from 'vue-router';
 import { settingConfig } from '@/config';
 import { menuApi } from '@/api/routeMenu';
+import { PageEnum } from '@/dict/pageEnum';
+import { Layout } from '@/router/constant';
 export default defineStore('route', {
   state: () => ({
     addRoutes: [] as RouteRecordRaw[],
@@ -31,7 +33,21 @@ export default defineStore('route', {
     },
     //初始化路由
     async initRoutes() {
-      flatteningRoutes2(await this.generateRoutes(), constantRoutes.length).forEach((route) => router.addRoute(route));
+      flatteningRoutes2(
+        [
+          {
+            path: '/',
+            redirect: PageEnum.HOME,
+            meta: {
+              title: '',
+            },
+            component: Layout,
+            children: await this.generateRoutes(),
+          },
+        ],
+        constantRoutes.length,
+        true,
+      ).forEach((route) => router.addRoute(route));
     },
   },
 });

src/views/login/components/header.vue

@@ -8,7 +8,7 @@
 <script setup lang="ts" name="Header">
 import { localeConfig } from '@/config';
 import { useSettingStore } from '@/store';
-const { themeConfig } = useSettingStore();
+const { themeConfig } = storeToRefs(useSettingStore());
 </script>
 <style lang="scss" scoped>
 .header {

types/auto-imports.d.ts

@@ -2,6 +2,8 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']