From 544ddeae22d9bc0f772ef134b0566bca7a7b64e3 Mon Sep 17 00:00:00 2001
From: zouzhibing <esoul@654321>
Date: Sun, 11 Sep 2022 12:15:15 +0800
Subject: [PATCH] update:antdesign

---
 package.json                               |   2 +
 src/layout/Main/index.vue                  |   2 +-
 src/layout/Sidebar/components/Logo.vue     |   6 +-
 src/layout/Sidebar/components/Menu.vue     | 119 +++++++-----
 src/layout/Sidebar/components/SubItem.vue  |  24 +--
 src/layout/Sidebar/index.vue               |   4 +-
 src/layout/Sidebar1/components/Link.vue    |  49 +++++
 src/layout/Sidebar1/components/Logo.vue    |  55 ++++++
 src/layout/Sidebar1/components/Menu.vue    |  52 ++++++
 src/layout/Sidebar1/components/SubItem.vue |  79 ++++++++
 src/layout/Sidebar1/index.vue              |  34 ++++
 src/main.ts                                |   5 +
 src/styles/sidebar.scss                    | 204 ++++++++++-----------
 src/styles/transition.scss                 |   4 +-
 src/utils/index.ts                         |   3 -
 src/utils/validate.ts                      |   3 -
 src/views/nested/menu1/index.vue           |   4 +-
 src/views/nested/menu1/menu1-1/index.vue   |   4 +-
 src/views/nested/menu1/menu1-2/index.vue   |   4 +-
 yarn.lock                                  | 137 +++++++++++++-
 20 files changed, 618 insertions(+), 176 deletions(-)
 create mode 100644 src/layout/Sidebar1/components/Link.vue
 create mode 100644 src/layout/Sidebar1/components/Logo.vue
 create mode 100644 src/layout/Sidebar1/components/Menu.vue
 create mode 100644 src/layout/Sidebar1/components/SubItem.vue
 create mode 100644 src/layout/Sidebar1/index.vue

diff --git a/package.json b/package.json
index 6f7c98c..182655f 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,12 @@
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
     "@better-scroll/core": "^2.4.2",
     "@vueuse/core": "^9.1.1",
     "@wangeditor/editor": "^5.1.14",
     "@wangeditor/editor-for-vue": "^5.1.12",
+    "ant-design-vue": "^3.2.12",
     "axios": "^0.27.2",
     "clipboard": "^2.0.10",
     "core-js": "^3.6.5",
diff --git a/src/layout/Main/index.vue b/src/layout/Main/index.vue
index 2afae56..7668936 100644
--- a/src/layout/Main/index.vue
+++ b/src/layout/Main/index.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="app-main" v-if="isReload">
     <router-view v-slot="{ Component, route }">
-      <transition name="fade-slide" mode="out-in" appear>
+      <transition name="fade-slide" mode="out-in">
         <keep-alive v-if="route.meta && route.meta.keepAlive">
           <component :is="Component" :key="route.path" />
         </keep-alive>
diff --git a/src/layout/Sidebar/components/Logo.vue b/src/layout/Sidebar/components/Logo.vue
index 3676c3b..7ab21e2 100644
--- a/src/layout/Sidebar/components/Logo.vue
+++ b/src/layout/Sidebar/components/Logo.vue
@@ -26,7 +26,6 @@ defineProps<{ isCollapse: boolean }>();
     background: #2b2f3a;
     text-align: center;
     overflow: hidden;
-
     & .sidebar-logo-link {
       text-decoration: none;
       height: 100%;
@@ -37,17 +36,16 @@ defineProps<{ isCollapse: boolean }>();
       & .sidebar-logo {
         width: 32px;
         height: 32px;
-        margin-right: 12px;
-      }
 
+      }
       & .sidebar-title {
         color: #fff;
+        margin-left: 12px;
         font-weight: 600;
         font-size: 14px;
         white-space: nowrap;
       }
     }
-
     &.collapse {
       .sidebar-logo {
         margin-right: 0px;
diff --git a/src/layout/Sidebar/components/Menu.vue b/src/layout/Sidebar/components/Menu.vue
index c9c630e..d9b3f64 100644
--- a/src/layout/Sidebar/components/Menu.vue
+++ b/src/layout/Sidebar/components/Menu.vue
@@ -1,52 +1,89 @@
 <template>
-  <el-menu
-    :default-active="activeMenu"
-    active-text-color="#ffd04b"
-    background-color="#304156"
-    text-color="#fff"
-    :mode="mode"
-    :collapse-transition="false"
-    class="el-menu-vertical-demo"
-    :collapse="isCollapse"
-  >
-    <sub-item
-      v-for="route in permission_routes"
-      :key="route.path"
-      :item="route"
-      :base-path="route.path"
-    />
-  </el-menu>
+  <div style="width: 210px">
+    <a-menu
+        v-model:openKeys="state.openKeys"
+        v-model:selectedKeys="state.selectedKeys"
+        mode="inline"
+        theme="dark"
+        :inline-collapsed="isCollapse"
+    >
+      <a-menu-item key="1">
+        <template #icon>
+          <PieChartOutlined />
+        </template>
+        <span>Option 1</span>
+      </a-menu-item>
+      <sub-item
+          v-for="route in permission_routes"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+      />
+    </a-menu>
+  </div>
 </template>
-
 <script lang="ts" setup>
-  import SubItem from './SubItem.vue'
-  import { useRoute } from 'vue-router'
-  import {usePermissionStore} from "@/store/modules/permission"
-  import {useSettingStore} from "@/store/modules/setting"
-  import { ref, computed } from 'vue'
+import SubItem from './SubItem.vue'
+import { defineComponent, reactive, toRefs, watch } from 'vue';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  PieChartOutlined,
+  MailOutlined,
+  DesktopOutlined,
+  InboxOutlined,
+  AppstoreOutlined,
+} from '@ant-design/icons-vue';
+import { useRoute } from 'vue-router'
+import {usePermissionStore} from "@/store/modules/permission"
+import {useSettingStore} from "@/store/modules/setting"
+import { ref, computed } from 'vue'
 
-  // 在setup中获取store
-  const route = useRoute()
-  const PermissionStore = usePermissionStore()
-  const SettingStore = useSettingStore()
+// 在setup中获取store
+const route = useRoute()
+const PermissionStore = usePermissionStore()
+const SettingStore = useSettingStore()
 
-  // 获取路由
-  const permission_routes = computed(() => PermissionStore.permission_routes)
+// 获取路由
+const permission_routes = computed(() => PermissionStore.permission_routes)
 
 
 
-  const activeMenu = computed(() => {
-    const { meta, path } = route
-    // if set path, the sidebar will highlight the path you set
-    if (meta.activeMenu) {
-      return meta.activeMenu
-    }
-    return path
-  })
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  // if set path, the sidebar will highlight the path you set
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
 
-  // 是否折叠
-  const isCollapse = computed(() => !SettingStore.isCollapse)
+// 是否折叠
+const isCollapse = computed(() => !SettingStore.isCollapse)
 
-  // 横向
-  const mode = computed(() => SettingStore.themeConfig.mode)
+// 横向
+const mode = computed(() => SettingStore.themeConfig.mode)
+const state = reactive({
+  collapsed: false,
+  selectedKeys: ['1'],
+  openKeys: ['sub1'],
+  preOpenKeys: ['sub1'],
+});
+
+watch(
+    () => state.openKeys,
+    (_val, oldVal) => {
+      state.preOpenKeys = oldVal;
+    },
+);
+const toggleCollapsed = () => {
+  state.collapsed = !state.collapsed;
+  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
+};
 </script>
+
+<style>
+.ant-menu.ant-menu-inline-collapsed{
+  width: 60px!important;
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/Sidebar/components/SubItem.vue b/src/layout/Sidebar/components/SubItem.vue
index 73d6938..4bcac95 100644
--- a/src/layout/Sidebar/components/SubItem.vue
+++ b/src/layout/Sidebar/components/SubItem.vue
@@ -1,18 +1,20 @@
 <template>
   <template v-if="!item.hidden">
     <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
-      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)">
-          <el-icon :size="20">
-            <component :is="onlyOneChild?.meta.icon"></component>
-          </el-icon>
-          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
-        </el-menu-item>
-      </app-link>
+        <a-menu-item :key="resolvePath(onlyOneChild.path)" v-if="onlyOneChild.meta">
+          <template #icon>
+            <span :style="{fontSize: '16px', width:'16px'}">
+              <component :is="onlyOneChild?.meta.icon" ></component>
+            </span>
+          </template>
+          <app-link  :to="resolvePath(onlyOneChild.path)">
+            <span>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</span>
+          </app-link>
+        </a-menu-item>
     </template>
-    <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
+    <a-sub-menu :key="resolvePath(item.path)" v-else popper-append-to-body>
+      <template #icon> <component :is="item.meta?.icon" :style="{fontSize: '16px', width:'16px'}"></component></template>
       <template #title>
-        <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
         <span>{{ item.meta && item.meta.title }}</span>
       </template>
       <sub-item
@@ -21,7 +23,7 @@
           :item="child"
           :base-path="resolvePath(child.path)"
       />
-    </el-sub-menu>
+    </a-sub-menu>
   </template>
 </template>
 
diff --git a/src/layout/Sidebar/index.vue b/src/layout/Sidebar/index.vue
index 5208cfe..d58f84b 100644
--- a/src/layout/Sidebar/index.vue
+++ b/src/layout/Sidebar/index.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="{ 'has-logo': themeConfig.showLogo }">
     <logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+<!--    <el-scrollbar wrap-class="scrollbar-wrapper">-->
       <u-menu/>
-    </el-scrollbar>
+<!--    </el-scrollbar>-->
   </div>
 </template>
 
diff --git a/src/layout/Sidebar1/components/Link.vue b/src/layout/Sidebar1/components/Link.vue
new file mode 100644
index 0000000..7673683
--- /dev/null
+++ b/src/layout/Sidebar1/components/Link.vue
@@ -0,0 +1,49 @@
+<template>
+  <component :is="type" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts">
+  import { isExternal } from '@/utils/validate.js'
+
+  export default {
+    props: {
+      to: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      isExternal() {
+        return isExternal(this.to)
+      },
+      type() {
+        if (this.isExternal) {
+          return 'a'
+        }
+        return 'router-link'
+      },
+    },
+    methods: {
+      linkProps(to) {
+        if (this.isExternal) {
+          return {
+            href: to,
+            target: '_blank',
+            rel: 'noopener',
+          }
+        }
+        return {
+          to: to,
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  a {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/layout/Sidebar1/components/Logo.vue b/src/layout/Sidebar1/components/Logo.vue
new file mode 100644
index 0000000..7ab21e2
--- /dev/null
+++ b/src/layout/Sidebar1/components/Logo.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="sidebar-logo-container" >
+    <transition name="sidebarLogoFade">
+      <router-link v-if="isCollapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img src="@/assets/logo.png" class="sidebar-logo">
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img src="@/assets/logo.png" class="sidebar-logo">
+        <h1 class="sidebar-title">Vue Admin Perfect</h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ isCollapse: boolean }>();
+</script>
+
+<style lang="scss" scoped>
+  .sidebar-logo-container {
+    position: relative;
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background: #2b2f3a;
+    text-align: center;
+    overflow: hidden;
+    & .sidebar-logo-link {
+      text-decoration: none;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      & .sidebar-logo {
+        width: 32px;
+        height: 32px;
+
+      }
+      & .sidebar-title {
+        color: #fff;
+        margin-left: 12px;
+        font-weight: 600;
+        font-size: 14px;
+        white-space: nowrap;
+      }
+    }
+    &.collapse {
+      .sidebar-logo {
+        margin-right: 0px;
+      }
+    }
+  }
+</style>
diff --git a/src/layout/Sidebar1/components/Menu.vue b/src/layout/Sidebar1/components/Menu.vue
new file mode 100644
index 0000000..c9c630e
--- /dev/null
+++ b/src/layout/Sidebar1/components/Menu.vue
@@ -0,0 +1,52 @@
+<template>
+  <el-menu
+    :default-active="activeMenu"
+    active-text-color="#ffd04b"
+    background-color="#304156"
+    text-color="#fff"
+    :mode="mode"
+    :collapse-transition="false"
+    class="el-menu-vertical-demo"
+    :collapse="isCollapse"
+  >
+    <sub-item
+      v-for="route in permission_routes"
+      :key="route.path"
+      :item="route"
+      :base-path="route.path"
+    />
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+  import SubItem from './SubItem.vue'
+  import { useRoute } from 'vue-router'
+  import {usePermissionStore} from "@/store/modules/permission"
+  import {useSettingStore} from "@/store/modules/setting"
+  import { ref, computed } from 'vue'
+
+  // 在setup中获取store
+  const route = useRoute()
+  const PermissionStore = usePermissionStore()
+  const SettingStore = useSettingStore()
+
+  // 获取路由
+  const permission_routes = computed(() => PermissionStore.permission_routes)
+
+
+
+  const activeMenu = computed(() => {
+    const { meta, path } = route
+    // if set path, the sidebar will highlight the path you set
+    if (meta.activeMenu) {
+      return meta.activeMenu
+    }
+    return path
+  })
+
+  // 是否折叠
+  const isCollapse = computed(() => !SettingStore.isCollapse)
+
+  // 横向
+  const mode = computed(() => SettingStore.themeConfig.mode)
+</script>
diff --git a/src/layout/Sidebar1/components/SubItem.vue b/src/layout/Sidebar1/components/SubItem.vue
new file mode 100644
index 0000000..73d6938
--- /dev/null
+++ b/src/layout/Sidebar1/components/SubItem.vue
@@ -0,0 +1,79 @@
+<template>
+  <template v-if="!item.hidden">
+    <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)">
+          <el-icon :size="20">
+            <component :is="onlyOneChild?.meta.icon"></component>
+          </el-icon>
+          <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
+        </el-menu-item>
+      </app-link>
+    </template>
+    <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
+      <template #title>
+        <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
+        <span>{{ item.meta && item.meta.title }}</span>
+      </template>
+      <sub-item
+          v-for="child in item.children"
+          :key="child.path"
+          :item="child"
+          :base-path="resolvePath(child.path)"
+      />
+    </el-sub-menu>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { isExternal } from '@/utils/validate.js'
+import AppLink from './Link.vue'
+import path from 'path-browserify'
+import { ref, computed } from 'vue'
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+  basePath: {
+    type: String,
+    default: '',
+  },
+})
+
+const onlyOneChild = ref(null)
+const hasOneShowingChild = (children = [], parent) => {
+  const showingChildren = children.filter((item) => {
+    // 过滤掉需要隐藏的菜单
+    if (item.hidden) {
+      return false
+    } else {
+      // 临时设置（如果只有一个显示子项，则将使用）
+      onlyOneChild.value = item
+      return true
+    }
+  })
+
+  // 当只有一个子路由器时，默认情况下会显示该子路由器
+  if (showingChildren.length === 1) {
+    return true
+  }
+  // 如果没有要显示的子路由器，则显示父路由器
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+}
+
+const resolvePath = (routePath) => {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  return path.resolve(props.basePath, routePath)
+}
+</script>
diff --git a/src/layout/Sidebar1/index.vue b/src/layout/Sidebar1/index.vue
new file mode 100644
index 0000000..5208cfe
--- /dev/null
+++ b/src/layout/Sidebar1/index.vue
@@ -0,0 +1,34 @@
+<template>
+  <div :class="{ 'has-logo': themeConfig.showLogo }">
+    <logo :isCollapse="isCollapse" v-if="themeConfig.showLogo"/>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <u-menu/>
+    </el-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UMenu from './components/Menu.vue'
+import logo from './components/Logo.vue'
+import {useSettingStore} from "@/store/modules/setting"
+import { ref, computed } from 'vue'
+
+const SettingStore = useSettingStore()
+// 是否折叠
+const isCollapse = computed(() => !SettingStore.isCollapse)
+// 设置
+const themeConfig = computed(() =>SettingStore.themeConfig )
+</script>
+
+<style lang="scss">
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  //width: 200px;
+  height: 100%;
+}
+.crollbar-wrapper {
+  height: 100%;
+  .el-scrollbar__view {
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index b7f20db..69d8d8a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,6 +17,10 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
 // 自定义暗黑模式
 import "@/styles/element-dark.scss";
 
+// 引入 ant-design-vue
+import Antd from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+
 // 引入全局组件布局
 import UContainerLayout from '@/components/u-container-layout/index.vue'
 
@@ -35,6 +39,7 @@ Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
     }
 });
 app.use(pinia)
+app.use(Antd)
 app.use(router)
 
 app.use(ElementPlus).mount('#app')
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 3b29c8b..8f0447b 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -19,7 +19,7 @@
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
-    background-color: $menuBg;
+    //background-color: $menuBg;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -61,43 +61,43 @@
       overflow: hidden;
     }
 
-    .svg-icon {
-      margin-right: 16px;
-    }
+    //.svg-icon {
+    //  margin-right: 16px;
+    //}
+    //
+    //.sub-el-icon {
+    //  margin-right: 12px;
+    //  margin-left: -2px;
+    //}
 
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
-
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-      background: none;
-    }
-
-    // menu hover
-    .sub-menu-title-noDropdown,
-    .el-sub-menu__title {
-      &:hover {
-        background-color: $menuHover !important;
-      }
-    }
-
-    .is-active > .el-sub-menu__title {
-      color: $subMenuActiveText !important;
-    }
-
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
-    & .el-sub-menu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
-
-      &:hover {
-        background-color: $subMenuHover !important;
-      }
-    }
+    //.el-menu {
+    //  border: none;
+    //  height: 100%;
+    //  width: 100% !important;
+    //  background: none;
+    //}
+    //
+    //// menu hover
+    //.sub-menu-title-noDropdown,
+    //.el-sub-menu__title {
+    //  &:hover {
+    //    background-color: $menuHover !important;
+    //  }
+    //}
+    //
+    //.is-active > .el-sub-menu__title {
+    //  color: $subMenuActiveText !important;
+    //}
+    //
+    //& .nest-menu .el-sub-menu > .el-sub-menu__title,
+    //& .el-sub-menu .el-menu-item {
+    //  min-width: $sideBarWidth !important;
+    //  background-color: $subMenuBg !important;
+    //
+    //  &:hover {
+    //    background-color: $subMenuHover !important;
+    //  }
+    //}
   }
 
   .hideSidebar {
@@ -161,74 +161,74 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: $sideBarWidth !important;
-  }
+  //.el-menu--collapse .el-menu .el-sub-menu {
+  //  min-width: $sideBarWidth !important;
+  //}
 
   // mobile responsive
-  .mobile {
-    .main-container {
-      margin-left: 0px;
-    }
+  //.mobile {
+  //  .main-container {
+  //    margin-left: 0px;
+  //  }
+  //
+  //  .sidebar-container {
+  //    transition: transform 0.28s;
+  //    width: $sideBarWidth !important;
+  //  }
+  //
+  //  &.hideSidebar {
+  //    .sidebar-container {
+  //      pointer-events: none;
+  //      transition-duration: 0.3s;
+  //      transform: translate3d(-$sideBarWidth, 0, 0);
+  //    }
+  //  }
+  //}
 
-    .sidebar-container {
-      transition: transform 0.28s;
-      width: $sideBarWidth !important;
-    }
-
-    &.hideSidebar {
-      .sidebar-container {
-        pointer-events: none;
-        transition-duration: 0.3s;
-        transform: translate3d(-$sideBarWidth, 0, 0);
-      }
-    }
-  }
-
-  .withoutAnimation {
-    .main-container,
-    .sidebar-container {
-      transition: none;
-    }
-  }
+  //.withoutAnimation {
+  //  .main-container,
+  //  .sidebar-container {
+  //    transition: none;
+  //  }
+  //}
 }
 
 // when menu collapsed
-.el-menu--vertical {
-  & > .el-menu {
-    .svg-icon {
-      margin-right: 16px;
-    }
-    .sub-el-icon {
-      margin-right: 12px;
-      margin-left: -2px;
-    }
-  }
-
-  .nest-menu .el-sub-menu > .el-sub-menu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
-    }
-  }
-
-  // the scroll bar appears when the subMenu is too long
-  > .el-menu--popup {
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
-  }
-}
+//.el-menu--vertical {
+//  & > .el-menu {
+//    .svg-icon {
+//      margin-right: 16px;
+//    }
+//    .sub-el-icon {
+//      margin-right: 12px;
+//      margin-left: -2px;
+//    }
+//  }
+//
+//  .nest-menu .el-sub-menu > .el-sub-menu__title,
+//  .el-menu-item {
+//    &:hover {
+//      // you can use $subMenuHover
+//      background-color: $menuHover !important;
+//    }
+//  }
+//
+//  // the scroll bar appears when the subMenu is too long
+//  > .el-menu--popup {
+//    max-height: 100vh;
+//    overflow-y: auto;
+//
+//    &::-webkit-scrollbar-track-piece {
+//      background: #d3dce6;
+//    }
+//
+//    &::-webkit-scrollbar {
+//      width: 6px;
+//    }
+//
+//    &::-webkit-scrollbar-thumb {
+//      background: #99a9bf;
+//      border-radius: 20px;
+//    }
+//  }
+//}
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 896f436..3002ffe 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -29,7 +29,7 @@
 
 // logo动画
 .sidebarLogoFade-enter-active {
-  transition: opacity 1.5s;
+  transition: opacity 2s;
 }
 .sidebarLogoFade-enter-from{
   opacity: 0;
@@ -42,7 +42,7 @@
 
 // 面包屑动画
 .breadcrumb-enter-active {
-  transition: all 0.25s;
+  transition: all 0.2s;
 }
 .breadcrumb-enter-from,
 .breadcrumb-leave-active {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2f5f33b..670451e 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,3 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- */
 
 /**
  * Parse the time to string
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
index 2ab4cc9..e039421 100644
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
@@ -1,6 +1,3 @@
-/**
- * Created by PanJiaChen on 16/11/18.
- */
 
 /**
  * @param {string} path
diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue
index 75c1b08..1a36069 100644
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div style="padding: 30px">
     <el-alert title="menu 1" :closable="false">
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <component :is="Component" />
+      </router-view>
     </el-alert>
   </div>
 </template>
diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue
index 227901f..ddf35f8 100644
--- a/src/views/nested/menu1/menu1-1/index.vue
+++ b/src/views/nested/menu1/menu1-1/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div style="padding: 30px">
     <el-alert title="menu 1-1" type="success" :closable="false">
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <component :is="Component" />
+      </router-view>
     </el-alert>
   </div>
 </template>
diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue
index 552fa7e..09b7fea 100644
--- a/src/views/nested/menu1/menu1-2/index.vue
+++ b/src/views/nested/menu1/menu1-2/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div style="padding: 30px">
     <el-alert title="menu 1-2" type="success" :closable="false">
-      <router-view />
+      <router-view v-slot="{ Component }">
+        <component :is="Component" />
+      </router-view>
     </el-alert>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index 30abce5..987a29e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,26 @@
 # yarn lockfile v1
 
 
+"@ant-design/colors@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
+  integrity sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.0"
+
+"@ant-design/icons-svg@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz#8630da8eb4471a4aabdaed7d1ff6a97dcb2cf05a"
+  integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
+
+"@ant-design/icons-vue@^6.1.0":
+  version "6.1.0"
+  resolved "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-6.1.0.tgz#f9324fdc0eb4cea943cf626d2bf3db9a4ff4c074"
+  integrity sha512-EX6bYm56V+ZrKN7+3MT/ubDkvJ5rK/O2t380WFRflDcVFgsvl3NLH7Wxeau6R8DbrO5jWR6DSTC3B6gYFp77AA==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons-svg" "^4.2.1"
+
 "@antfu/utils@^0.5.2":
   version "0.5.2"
   resolved "https://registry.npmmirror.com/@antfu/utils/-/utils-0.5.2.tgz#8c2d931ff927be0ebe740169874a3d4004ab414b"
@@ -12,6 +32,13 @@
   resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.18.10.tgz#94b5f8522356e69e8277276adf67ed280c90ecc1"
   integrity sha512-TYk3OA0HKL6qNryUayb5UUEhM/rkOQozIBEA5ITXh5DWrSp0TlUQXMyZmnWxG/DizSWBeeQ0Zbc5z8UGaaqoeg==
 
+"@babel/runtime@^7.10.5":
+  version "7.19.0"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.19.0.tgz#22b11c037b094d27a8a2504ea4dcff00f50e2259"
+  integrity sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.12.0":
   version "7.18.9"
   resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
@@ -31,7 +58,7 @@
   resolved "https://registry.npmmirror.com/@better-scroll/shared-utils/-/shared-utils-2.4.2.tgz#1ac5c97495727093a22a8009560795dd5e3c18da"
   integrity sha512-Gy/Jfbpu+hq0u+PcjkTqyXGqAf+0dexTzEZ5IDXEVwJVLmd3cx8A73oTcAZ8QZgk4wSHvlMjXecSaptkhnNPEw==
 
-"@ctrl/tinycolor@^3.4.1":
+"@ctrl/tinycolor@^3.4.0", "@ctrl/tinycolor@^3.4.1":
   version "3.4.1"
   resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz#75b4c27948c81e88ccd3a8902047bcd797f38d32"
   integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
@@ -151,6 +178,14 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@simonwep/pickr@~1.8.0":
+  version "1.8.2"
+  resolved "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz#96dc86675940d7cad63d69c22083dd1cbb9797cb"
+  integrity sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==
+  dependencies:
+    core-js "^3.15.1"
+    nanopop "^2.1.0"
+
 "@transloadit/prettier-bytes@0.0.7":
   version "0.0.7"
   resolved "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz#cdb5399f445fdd606ed833872fa0cabdbc51686b"
@@ -614,6 +649,29 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ant-design-vue@^3.2.12:
+  version "3.2.12"
+  resolved "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-3.2.12.tgz#996361982884b1d0d82186dba67962983bc1fbac"
+  integrity sha512-CPsoWJ3t+sqq/EPINPXb4fC5/9iKkUdYOfK9M9kLKbXlRN3MAoVwWUbaFnUqc+ngtbEpn/d69hTF/Eh7MeWMhQ==
+  dependencies:
+    "@ant-design/colors" "^6.0.0"
+    "@ant-design/icons-vue" "^6.1.0"
+    "@babel/runtime" "^7.10.5"
+    "@ctrl/tinycolor" "^3.4.0"
+    "@simonwep/pickr" "~1.8.0"
+    array-tree-filter "^2.1.0"
+    async-validator "^4.0.0"
+    dayjs "^1.10.5"
+    dom-align "^1.12.1"
+    dom-scroll-into-view "^2.0.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.15"
+    resize-observer-polyfill "^1.5.1"
+    scroll-into-view-if-needed "^2.2.25"
+    shallow-equal "^1.0.0"
+    vue-types "^3.0.0"
+    warning "^4.0.0"
+
 anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -671,6 +729,11 @@ arr-union@^3.1.0:
   resolved "https://registry.npmmirror.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==
 
+array-tree-filter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz#873ac00fec83749f255ac8dd083814b4f6329190"
+  integrity sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw==
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
@@ -686,7 +749,7 @@ assign-symbols@^1.0.0:
   resolved "https://registry.npmmirror.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
 
-async-validator@^4.2.5:
+async-validator@^4.0.0, async-validator@^4.2.5:
   version "4.2.5"
   resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
   integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
@@ -1010,6 +1073,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.npmmirror.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+core-js@^3.15.1:
+  version "3.25.1"
+  resolved "https://registry.npmmirror.com/core-js/-/core-js-3.25.1.tgz#5818e09de0db8956e16bf10e2a7141e931b7c69c"
+  integrity sha512-sr0FY4lnO1hkQ4gLDr24K0DGnweGO1QwSj5BpfQjpSJPdqWalja4cTps29Y/PJVG/P7FYlPDkH3hO+Tr0CvDgQ==
+
 core-js@^3.6.5:
   version "3.24.1"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-3.24.1.tgz#cf7724d41724154010a6576b7b57d94c5d66e64f"
@@ -1116,6 +1184,11 @@ dart-sass@^1.25.0:
   dependencies:
     chokidar ">=2.0.0 <4.0.0"
 
+dayjs@^1.10.5:
+  version "1.11.5"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
+  integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
+
 dayjs@^1.11.3, dayjs@^1.11.4, dayjs@^1.8.34:
   version "1.11.4"
   resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
@@ -1208,6 +1281,16 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-align@^1.12.1:
+  version "1.12.3"
+  resolved "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.3.tgz#a36d02531dae0eefa2abb0c4db6595250526f103"
+  integrity sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA==
+
+dom-scroll-into-view@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz#0decc8522801fd8d3f1c6ba355a74d382c5f989b"
+  integrity sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w==
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -2247,6 +2330,11 @@ is-plain-obj@^1.1:
   resolved "https://registry.npmmirror.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
 
+is-plain-object@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz#662d92d24c0aa4302407b0d45d21f2251c85f85b"
+  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -2301,6 +2389,11 @@ js-binary-schema-parser@^2.0.2:
   resolved "https://registry.npmmirror.com/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz#3d7848748e8586e63b34e8911b643f59cfb6396e"
   integrity sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==
 
+"js-tokens@^3.0.0 || ^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -2421,7 +2514,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
+lodash-es@^4.17.15, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -2536,6 +2629,13 @@ lodash@^4.17.21:
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+loose-envify@^1.0.0:
+  version "1.4.0"
+  resolved "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lru-cache@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
@@ -2738,6 +2838,11 @@ nanomatch@^1.2.1:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+nanopop@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.npmmirror.com/nanopop/-/nanopop-2.2.0.tgz#bd1c25588a7beaf68865bc2df19db4c58c77dcc9"
+  integrity sha512-E9JaHcxh3ere8/BEZHAcnuD10RluTSPyTToBvoFWS9/7DcCx6gyKjbn7M7Bx7E1veCxCuY1iO6h4+gdAf1j73Q==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -3132,6 +3237,11 @@ repeat-string@^1.6.1:
   resolved "https://registry.npmmirror.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -3222,7 +3332,7 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scroll-into-view-if-needed@^2.2.28:
+scroll-into-view-if-needed@^2.2.25, scroll-into-view-if-needed@^2.2.28:
   version "2.2.29"
   resolved "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz#551791a84b7e2287706511f8c68161e4990ab885"
   integrity sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==
@@ -3261,6 +3371,11 @@ setimmediate@^1.0.5, setimmediate@~1.0.4:
   resolved "https://registry.npmmirror.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
 
+shallow-equal@^1.0.0:
+  version "1.2.1"
+  resolved "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -3959,6 +4074,13 @@ vue-tsc@^0.38.4:
   dependencies:
     "@volar/vue-typescript" "0.38.9"
 
+vue-types@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz#ec16e05d412c038262fc1efa4ceb9647e7fb601d"
+  integrity sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==
+  dependencies:
+    is-plain-object "3.0.1"
+
 vue@^3.0.0:
   version "3.2.37"
   resolved "https://registry.npmmirror.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
@@ -3984,6 +4106,13 @@ vuex@^4.0.0-0:
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.11"
 
+warning@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"