wip

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@vue/composition-api": "^1.4.1",
     "axios": "^0.24.0",
+    "axios-case-converter": "^0.9.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.7",
     "lodash": "^4.17.21",
@@ -21,6 +22,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "vue": "^2.6.14",
     "vue-router": "^3.2.0",
+    "vue-tippy": "^4.13.0",
     "vue2-helpers": "^1.1.6"
   },
   "devDependencies": {

src/configs/index.js

@@ -2,3 +2,4 @@
 export const appName = "agk-admin";
 export const baseUrl = process.env.BASE_URL;
 export const gitVersion = process.env.VUE_APP_GIT_HASH;
+export const apiBaseUrl = process.env.VUE_APP_BASE_URL;

src/layouts/components/AppMain.vue

@@ -16,7 +16,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <section class="app-main">
+  <section>
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="keepAliveComponents">
         <router-view :key="fullPath" />
@@ -24,14 +24,3 @@ export default defineComponent({
     </transition>
   </section>
 </template>
-
-<style lang="scss" scoped>
-@use "../../styles/theme";
-.app-main {
-  width: calc(100% - 1rem);
-  padding: 0.5rem;
-  margin: 0 0.5rem;
-  background: theme.$block-bg-primary;
-  border-radius: 0.5rem;
-}
-</style>

src/layouts/components/Breadcrumb.vue

@@ -0,0 +1,43 @@
+<script>
+import { defineComponent, computed } from "@vue/composition-api";
+
+export default defineComponent({
+  setup(props, { root }) {
+    const generator = (routerMap) => {
+      return routerMap.map((item) => {
+        const currentMenu = {
+          ...item,
+          label: item.meta.title,
+          key: item.name,
+          disabled: item.path === "/",
+        };
+        return currentMenu;
+      });
+    };
+    const breadcrumbList = computed(() => {
+      return generator(root.$route.matched);
+    });
+    return { breadcrumbList, r: root.$route };
+  },
+});
+</script>
+
+<template>
+  <el-breadcrumb separator="/">
+    <el-breadcrumb-item v-for="routeItem in breadcrumbList" :key="routeItem.name">
+      <span class="link-text">
+        {{ routeItem.meta.title }}
+      </span>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<style lang="scss" scoped>
+@use "../../styles/theme";
+::v-deep {
+  .el-breadcrumb__inner {
+    color: theme.$text-primary-color;
+    font-weight: 500;
+  }
+}
+</style>

src/layouts/components/Header.vue

@@ -1,8 +1,10 @@
 <script>
 import { defineComponent } from "@vue/composition-api";
+import Breadcrumb from "./Breadcrumb.vue";
 
 export default defineComponent({
   name: "Header",
+  components: { Breadcrumb },
   props: {
     isMenuOpen: {
       type: Boolean,
@@ -10,7 +12,8 @@ export default defineComponent({
     },
   },
   setup() {
-    return {};
+    const vTippy = { placement: "bottom", arrow: true, arrowType: "round", theme: "light" };
+    return { vTippy };
   },
 });
 </script>
@@ -18,15 +21,16 @@ export default defineComponent({
 <template>
   <header class="header">
     <div class="left">
-      <div class="icon-button">
+      <!-- <div class="icon-button" :content="`${$props.isMenuOpen ? '折叠' : '展开'}菜单`" v-tippy="vTippy">
         <i :class="`fas fa-${$props.isMenuOpen ? 'outdent' : 'indent'}`"></i>
-      </div>
+      </div> -->
+      <Breadcrumb></Breadcrumb>
     </div>
     <div class="right">
-      <div class="icon-button">
+      <div class="icon-button" content="设置" v-tippy="vTippy">
         <i class="fas fa-sliders-h"></i>
       </div>
-      <div class="icon-button">
+      <div class="icon-button" content="账户" v-tippy="vTippy">
         <i class="fas fa-user-circle"></i>
       </div>
     </div>
@@ -50,13 +54,13 @@ export default defineComponent({
   > .left {
     justify-content: flex-start;
     > * {
-      margin-left: 1.5rem;
+      margin-left: 1rem;
     }
   }
   > .right {
     justify-content: flex-end;
     > * {
-      margin-right: 1.5rem;
+      margin-right: 1rem;
     }
   }
   .icon-button {

src/layouts/components/SideBar.vue

@@ -36,10 +36,16 @@ export default defineComponent({
 </template>
 
 <style lang="scss" scoped>
-.el-menu {
-  border-right: none;
+::v-deep {
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+  .el-menu {
+    border-right: none;
+  }
 }
 .side-bar {
+  width: 200px;
   display: flex;
   flex-flow: column nowrap;
   .logo {
@@ -55,9 +61,4 @@ export default defineComponent({
     width: 100%;
   }
 }
-::v-deep {
-  .el-scrollbar__wrap {
-    overflow-x: hidden;
-  }
-}
 </style>

src/layouts/components/SideBarItem.vue

@@ -3,16 +3,17 @@ import { defineComponent, computed } from "@vue/composition-api";
 import Link from "./Link.vue";
 import { isExternal } from "@/utils/validate";
 import path from "path";
+import SideBarTitle from "./SideBarTitle.vue";
 
 export default defineComponent({
   name: "SidebarItem",
-  components: { Link },
+  components: { Link, SideBarTitle },
   props: {
     item: { type: Object, required: true },
     isNest: { type: Boolean, default: false },
     basePath: { type: String, default: "" },
   },
-  setup(props) {
+  setup(props, { root }) {
     const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
 
     const resolvePath = (currentPath) => {
@@ -25,7 +26,9 @@ export default defineComponent({
       return path.join(props.basePath, currentPath);
     };
 
-    return { hasChildren, resolvePath };
+    const currentFullPath = computed(() => root.$route.fullPath);
+
+    return { hasChildren, resolvePath, currentFullPath };
   },
 });
 </script>
@@ -33,7 +36,7 @@ export default defineComponent({
 <template>
   <el-submenu v-if="hasChildren" :index="$props.item.path">
     <template slot="title">
-      {{ $props.item.meta.title }}
+      <SideBarTitle :icon="$props.item.meta.icon" :context="$props.item.meta.title"></SideBarTitle>
     </template>
     <SidebarItem
       v-for="child in $props.item.children"
@@ -46,9 +49,9 @@ export default defineComponent({
   </el-submenu>
 
   <Link v-else :to="resolvePath($props.item.path)">
-    <el-menu-item :index="$props.item.path">
+    <el-menu-item :index="$props.item.path" :class="{ active: resolvePath($props.item.path) === currentFullPath }">
       <template slot="title">
-        {{ $props.item.meta.title }}
+        <SideBarTitle :icon="$props.item.meta.icon" :context="$props.item.meta.title"></SideBarTitle>
       </template>
     </el-menu-item>
   </Link>
@@ -67,7 +70,7 @@ export default defineComponent({
     box-shadow: theme.$block-box-shadow;
   }
   &:hover,
-  &.is-active {
+  &.active {
     background-color: theme.$block-bg-light !important;
   }
 }
@@ -79,7 +82,7 @@ export default defineComponent({
     @include item-common;
   }
   .el-submenu__icon-arrow {
-    color: #ffffff !important;
+    color: theme.$text-white-color !important;
   }
 }
 </style>

src/layouts/components/SideBarTitle.vue

@@ -0,0 +1,38 @@
+<script>
+import { defineComponent } from "@vue/composition-api";
+
+export default defineComponent({
+  name: "SideBarTitle",
+  props: {
+    context: String,
+    icon: String,
+  },
+});
+</script>
+
+<template>
+  <div class="title">
+    <template v-if="icon">
+      <img v-if="/(.*)\.[svg|png|jpg|jpeg|gif]/i.test($props.icon)" class="icon" :src="$props.icon" />
+      <i v-else :class="['icon', $props.icon]"></i>
+    </template>
+    <span>{{ $props.context }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "../../styles/theme";
+.title {
+  color: theme.$text-white-color;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 0.9rem;
+  .icon {
+    height: 1rem;
+    font-size: 1rem;
+    color: theme.$text-white-color;
+    margin-right: 0.5rem;
+  }
+}
+</style>

src/layouts/components/Tabs.vue

@@ -1,7 +1,6 @@
 <script>
-/* eslint-disable no-unused-vars */
 import { defineComponent, ref, computed, onMounted, onActivated, onBeforeUnmount, onDeactivated, nextTick, watch } from "@vue/composition-api";
-import useResizeObserver from "@/utils/hooks/UseResizeObserver";
+import useResizeObserver from "@/utils/hooks/useResizeObserver";
 import normalizeWheel from "@/utils/normalizeWheel";
 import { useTabsStore } from "@/stores/modules/tabs";
 import { useRouteStore } from "@/stores/modules/route";

src/layouts/parentLayout.js

@@ -0,0 +1,2 @@
+import AppMain from "./components/AppMain.vue";
+export default AppMain;

src/layouts/parentLayout.vue

@@ -1,3 +0,0 @@
-<template>
-  <h1>parentLayout</h1>
-</template>

src/layouts/rootLayout.vue

@@ -8,7 +8,7 @@ import Tabs from "./components/Tabs.vue";
 export default defineComponent({
   components: { SideBar, AppMain, Header, Tabs },
   setup() {
-    return {};
+    return;
   },
 });
 </script>
@@ -27,7 +27,7 @@ export default defineComponent({
         <Tabs></Tabs>
       </div>
       <div class="main">
-        <AppMain></AppMain>
+        <AppMain class="root-app-main"></AppMain>
       </div>
     </div>
   </div>
@@ -50,7 +50,6 @@ export default defineComponent({
   }
   .side-bar {
     flex: 0 0 auto;
-    width: 200px;
     height: 100%;
     background: theme.$block-bg-dark;
     backdrop-filter: blur(1rem);
@@ -64,6 +63,13 @@ export default defineComponent({
     > * {
       width: 100%;
     }
+    .root-app-main {
+      width: calc(100% - 1rem);
+      padding: 0.5rem;
+      margin: 0 0.5rem;
+      background: theme.$block-bg-primary;
+      border-radius: 0.5rem;
+    }
   }
 }
 </style>

src/main.js

@@ -6,17 +6,22 @@ import App from "@/App.vue";
 // eslint-disable-next-line no-unused-vars
 import router from "@/routers";
 import ElementUI from "element-ui";
+import VueTippy, { TippyComponent } from "vue-tippy";
 import "modern-normalize/modern-normalize.css";
 import "@/styles/element.scss";
 import "@fortawesome/fontawesome-free/css/all.css"; // cSpell:ignore fortawesome
+import "tippy.js/themes/light.css";
 
 Vue.config.productionTip = false;
 
 Vue.use(VueCompositionAPI);
 Vue.use(ElementUI);
+Vue.use(VueTippy);
 Vue.use(PiniaVuePlugin);
 Vue.use(store);
 
+Vue.component("tippy", TippyComponent);
+
 new Vue({
   router,
   pinia: store,

src/routers/constantModules/dashboard.js

@@ -1,4 +1,4 @@
-import Layout from "@/layouts/index.vue";
+import { Layout, BaseHomeTitle } from "../constants";
 
 const routeName = "dashboard";
 
@@ -9,21 +9,32 @@ const routeName = "dashboard";
 export default [
   {
     path: "/dashboard",
-    name: routeName,
+    name: "routeName",
     component: Layout,
     meta: {
-      title: "Dashboard",
+      title: "主控台",
       icon: "renderIcon(DashboardOutlined)",
       permissions: ["admin"],
       sort: 0,
     },
     children: [
+      {
+        path: "home",
+        name: `${routeName}_home`,
+        component: () => import("@/views/dashboard/console.vue"),
+        meta: {
+          title: BaseHomeTitle,
+          icon: "renderIcon(DashboardOutlined)",
+          permissions: ["admin"],
+          sort: 0,
+        },
+      },
       {
         path: "console",
         name: `${routeName}_console`,
         component: () => import("@/views/dashboard/console.vue"),
         meta: {
-          title: "主控台",
+          title: "Console",
           icon: "renderIcon(DashboardOutlined)",
           permissions: ["admin"],
           sort: 0,

src/routers/constants.js

@@ -2,10 +2,10 @@ export const RedirectName = "Redirect";
 
 export const LoginPath = "/auth/login";
 
-export const BaseHome = "/dashboard/console";
+export const BaseHome = "/dashboard/home";
+export const BaseHomeTitle = "首页";
 
 export const ErrorPage = () => import("@/views/exception/404.vue");
 
-export const Layout = () => import("@/layouts/index.vue");
-
-export const ParentLayout = () => import("@/layouts/parentLayout.vue");
+export const Layout = () => import("@/layouts/rootLayout.vue");
+export const ParentLayout = () => import("@/layouts/parentLayout.js");

src/routers/permissionModules/test.js

@@ -1,4 +1,4 @@
-import Layout from "@/layouts/index.vue";
+import { Layout, ParentLayout } from "../constants";
 
 /** @constant
     @type {import("vue-router").RouteRecord[]}
@@ -11,178 +11,81 @@ export default [
     component: Layout,
     meta: {
       title: "hello",
-      icon: "#weixiu",
+      icon: require("@/assets/images/trademarks/app-logo.svg"),
     },
     children: [
       {
         path: "index",
-        component: () => import("@/components/HelloWorld.vue"),
+        component: ParentLayout,
         meta: {
           title: "hello-world",
-          icon: "#weixiu",
+          icon: "fab fa-app-store",
           permissions: ["admin"],
         },
-      },
-      {
-        path: "index1",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world1",
-          icon: "#weixiu",
-        },
         children: [
           {
-            path: "index1qwe",
+            path: "1",
             component: () => import("@/components/HelloWorld.vue"),
             meta: {
-              title: "hello-world1-1",
-              icon: "#weixiu",
+              title: "1-1",
+              icon: "fab fa-app-store",
+              permissions: ["admin"],
             },
           },
           {
-            path: "indexwe2",
+            path: "2",
             component: () => import("@/components/HelloWorld.vue"),
             meta: {
-              title: "hello-world1-2",
-              icon: "#weixiu",
+              title: "1-2",
+              icon: "fab fa-app-store",
+              permissions: ["admin"],
             },
           },
         ],
       },
       {
-        path: "index2",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world11",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index3",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world2",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index4",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world3",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index5",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world4",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index6",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world5",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index7",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world6",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index8",
+        path: "1",
         component: () => import("@/components/HelloWorld.vue"),
         meta: {
-          title: "hello-world66",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index9",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world661",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index00",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world6612",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "index23",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world2266",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "indexsd2345613f",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world63126",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "indexs2345fd",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world621346",
-          icon: "#weixiu",
-        },
-      },
-      {
-        path: "indexs13df",
-        component: () => import("@/components/HelloWorld.vue"),
-        meta: {
-          title: "hello-world6213sdf46",
-          icon: "#weixiu",
+          title: "1",
+          icon: "fab fa-app-store",
+          permissions: ["admin"],
         },
       },
       {
-        path: "indexs23f",
+        path: "2",
         component: () => import("@/components/HelloWorld.vue"),
         meta: {
-          title: "hello-world6213dsf46",
-          icon: "#weixiu",
+          title: "2",
+          icon: "fab fa-app-store",
+          permissions: ["admin"],
         },
       },
       {
-        path: "indexsaaddf",
+        path: "3",
         component: () => import("@/components/HelloWorld.vue"),
         meta: {
-          title: "hello-worldsd621346",
-          icon: "#weixiu",
+          title: "3",
+          icon: "fab fa-app-store",
+          permissions: ["admin"],
         },
       },
       {
-        path: "indexsf",
+        path: "4",
         component: () => import("@/components/HelloWorld.vue"),
         meta: {
-          title: "hello-worldsf621346",
-          icon: "#weixiu",
+          title: "4",
+          icon: "fab fa-app-store",
+          permissions: ["admin"],
         },
       },
       {
-        path: "indessxsf",
+        path: "5",
         component: () => import("@/components/HelloWorld.vue"),
         meta: {
-          title: "hello-world62sf1346",
-          icon: "#weixiu",
+          title: "5",
+          icon: "fab fa-app-store",
+          permissions: ["admin"],
         },
       },
     ],

src/stores/modules/route.js

@@ -16,6 +16,9 @@ export const useRouteStore = defineStore("route", {
     getRouters() {
       return this.routers;
     },
+    getAddedRouters() {
+      return this.addRouters;
+    },
     getMenus() {
       return this.menus;
     },

src/stores/modules/sidebar.js

@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+
+export const useSidebarStore = defineStore("sidebar", {
+  state: () => ({
+    isMenuOpen: false,
+  }),
+  actions: {
+    toggleSidebar() {
+      this.isMenuOpen = !this.isMenuOpen;
+    },
+  },
+});

src/styles/_theme.scss

@@ -1,6 +1,7 @@
 $primary-color: teal; // element ui theme color
 
 $text-primary-color: #2c3e50;
+$text-white-color: #ffffff;
 
 $block-bg-primary: rgba(221, 221, 221, 0.95);
 $block-bg-secondary: rgba(221, 221, 221, 0.8);

src/utils/request.js

@@ -0,0 +1,110 @@
+import axios from "axios";
+import applyCaseMiddleware from "axios-case-converter";
+import { MessageBox } from "element-ui";
+import { apiBaseURL } from "@/configs";
+import { useUserStore } from "@/stores/modules/user";
+import { map } from "lodash";
+
+/**
+ * @typedef {Object} ResponseRootObject
+ * @property {Object} data
+ * @property {string} msg
+ * @property {number} code
+ */
+
+const https = ({ hasToken = true, enableCaseConvertor = false, preservedKeys = [], skipAutoRemoveEmpty = true } = { hasToken: true }) => {
+  const config = {
+    baseURL: apiBaseURL,
+  };
+
+  const userStore = useUserStore();
+
+  const service = enableCaseConvertor ? applyCaseMiddleware(axios.create(config), { preservedKeys }) : axios.create(config);
+
+  service.interceptors.request.use(
+    (config) => {
+      if (hasToken && userStore.getToken) {
+        config.headers = {
+          ...config.headers,
+          Authorization: "Bearer " + userStore.getToken,
+        };
+      }
+
+      if (!skipAutoRemoveEmpty) {
+        config.data &&
+          map(config.data, (value, key) => {
+            if (value === null || value === undefined || isNaN(value)) {
+              delete config.data[key];
+            }
+          });
+
+        config.params &&
+          map(config.params, (value, key) => {
+            if (value === null || value === undefined || isNaN(value)) {
+              delete config.params[key];
+            }
+          });
+      }
+
+      return config;
+    },
+    (error) => {
+      console.error(error);
+      return Promise.reject(error);
+    }
+  );
+
+  // response interceptor
+  service.interceptors.response.use(
+    (response) => {
+      if (response.headers["content-type"] !== "application/json") {
+        return Promise.resolve(response);
+      }
+
+      const res = response.data;
+
+      console.log("[https.ts]", response);
+
+      if (res.code !== 0) {
+        console.error("[https.ts] Error: ", res.message || response);
+        return Promise.reject(res.message || response);
+      } else {
+        return Promise.resolve(response);
+      }
+    },
+    async (error) => {
+      if (error.response.data instanceof Blob) {
+        await error.response.data.text().then((text) => {
+          error.response.data = JSON.parse(text);
+        });
+      }
+
+      console.error("[https.ts] Error: ", error.response.data.msg || error.message);
+
+      if (error.response.status === 401) {
+        MessageBox.confirm("登录已失效，需要重新登录", {
+          confirmButtonText: "重新登录",
+          cancelButtonText: "取消",
+          type: "warning",
+        }).then(() => {
+          userStore.logout();
+          location.reload();
+        });
+      }
+
+      if (error.response.status > 0) {
+        error.data = {
+          code: error.response.status,
+          msg: error.response.data.msg || error.response.data.error || "Internal Server Error",
+          data: error.response.data,
+        };
+      }
+
+      return Promise.reject(error);
+    }
+  );
+
+  return service;
+};
+
+export default https;

yarn.lock

@@ -2201,10 +2201,20 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.11.0.tgz?cache=0&sync_timestamp=1604101166484&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
 
+axios-case-converter@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.npmmirror.com/axios-case-converter/download/axios-case-converter-0.9.0.tgz#9f47f641ae3f8c04a5395370601342e4f8c33c77"
+  integrity sha1-n0f2Qa4/jASlOVNwYBNC5PjDPHc=
+  dependencies:
+    camel-case "^4.1.1"
+    header-case "^2.0.3"
+    snake-case "^3.0.3"
+    tslib "^2.3.0"
+
 axios@^0.24.0:
   version "0.24.0"
   resolved "https://registry.npmmirror.com/axios/download/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
-  integrity sha1-gE5voeS5xSiFAd2d/1anoJQNINY=
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
   dependencies:
     follow-redirects "^1.14.4"
 
@@ -2783,6 +2793,14 @@ camel-case@3.0.x:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
+camel-case@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.npm.taobao.org/camel-case/download/camel-case-4.1.2.tgz?cache=0&sync_timestamp=1606867297052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamel-case%2Fdownload%2Fcamel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha1-lygHKpVPgFIoIlpt7qazhGHhvVo=
+  dependencies:
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
 camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmmirror.com/camelcase/download/camelcase-4.1.0.tgz?cache=0&sync_timestamp=1636945198738&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcamelcase%2Fdownload%2Fcamelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -2813,6 +2831,15 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001280:
   resolved "https://registry.npmmirror.com/caniuse-lite/download/caniuse-lite-1.0.30001286.tgz#3e9debad420419618cfdf52dc9b6572b28a8fff6"
   integrity sha512-zaEMRH6xg8ESMi2eQ3R4eZ5qw/hJiVsO/HlLwniIwErij0JDr9P+8V4dtx1l+kLq6j3yy8l8W4fst1lBnat5wQ==
 
+capital-case@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.nlark.com/capital-case/download/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  integrity sha1-nRMCkjU8kkn2sA+lhSvuOKcX5mk=
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+    upper-case-first "^2.0.2"
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/capture-exit/download/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -3917,6 +3944,14 @@ domutils@^2.5.2, domutils@^2.6.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+dot-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npm.taobao.org/dot-case/download/dot-case-3.0.4.tgz?cache=0&sync_timestamp=1606867327042&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdot-case%2Fdownload%2Fdot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  integrity sha1-mytnDQCkMWZ6inW6Kc0bmICc51E=
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 dot-prop@^5.2.0:
   version "5.3.0"
   resolved "https://registry.npm.taobao.org/dot-prop/download/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5102,6 +5137,14 @@ he@1.2.x, he@^1.1.0:
   resolved "https://registry.npm.taobao.org/he/download/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha1-hK5l+n6vsWX922FWauFLrwVmTw8=
 
+header-case@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.npm.taobao.org/header-case/download/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  integrity sha1-WkLmO1UXc0nPQFvrjXdayruSwGM=
+  dependencies:
+    capital-case "^1.0.4"
+    tslib "^2.0.3"
+
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
@@ -5305,6 +5348,11 @@ human-signals@^1.1.1:
   resolved "https://registry.nlark.com/human-signals/download/human-signals-1.1.1.tgz?cache=0&sync_timestamp=1624364695595&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhuman-signals%2Fdownload%2Fhuman-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha1-xbHNFPUK6uCatsWf5jujOV/k36M=
 
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npm.taobao.org/humps/download/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.nlark.com/iconv-lite/download/iconv-lite-0.4.24.tgz?cache=0&sync_timestamp=1621826271136&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ficonv-lite%2Fdownload%2Ficonv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -6739,6 +6787,13 @@ lower-case@^1.1.1:
   resolved "https://registry.nlark.com/lower-case/download/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
+lower-case@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/lower-case/download/lower-case-2.0.2.tgz?cache=0&sync_timestamp=1606867333511&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flower-case%2Fdownload%2Flower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  integrity sha1-b6I3xj29xKgsoP2ILkci3F5jTig=
+  dependencies:
+    tslib "^2.0.3"
+
 lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.npm.taobao.org/lru-cache/download/lru-cache-4.1.5.tgz?cache=0&sync_timestamp=1599054167787&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flru-cache%2Fdownload%2Flru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -7141,6 +7196,14 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+no-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npm.taobao.org/no-case/download/no-case-3.0.4.tgz?cache=0&sync_timestamp=1606867308811&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fno-case%2Fdownload%2Fno-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  integrity sha1-02H9XJgA9VhVGoNp/A3NRmK2Ek0=
+  dependencies:
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
+
 node-addon-api@^1.7.1:
   version "1.7.2"
   resolved "https://registry.nlark.com/node-addon-api/download/node-addon-api-1.7.2.tgz#3df30b95720b53c24e59948b49532b662444f54d"
@@ -7646,6 +7709,14 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.nlark.com/parseurl/download/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=
 
+pascal-case@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npm.taobao.org/pascal-case/download/pascal-case-3.1.2.tgz?cache=0&sync_timestamp=1606867325163&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpascal-case%2Fdownload%2Fpascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  integrity sha1-tI4O8rmOIF58Ha50fQsVCCN2YOs=
+  dependencies:
+    no-case "^3.0.4"
+    tslib "^2.0.3"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npm.taobao.org/pascalcase/download/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -7819,6 +7890,11 @@ pnp-webpack-plugin@^1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+popper.js@^1.14.7:
+  version "1.16.1"
+  resolved "https://registry.npmmirror.com/popper.js/download/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -9054,6 +9130,14 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+snake-case@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.npm.taobao.org/snake-case/download/snake-case-3.0.4.tgz?cache=0&sync_timestamp=1606867326057&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsnake-case%2Fdownload%2Fsnake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha1-Tyu9Vo6ZNavf1ZPzTGkdrbScRSw=
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npm.taobao.org/snapdragon-node/download/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -9626,6 +9710,13 @@ timsort@^0.3.0:
   resolved "https://registry.nlark.com/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.npmmirror.com/tippy.js/download/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
+  integrity sha1-iCv/jZLwm7BUbSgm1WaMBWAAb1Q=
+  dependencies:
+    popper.js "^1.14.7"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9760,7 +9851,7 @@ tslib@^1.9.0:
   resolved "https://registry.nlark.com/tslib/download/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha1-zy04vcNKE0vK8QkcQfZhni9nLQA=
 
-tslib@^2.3.1:
+tslib@^2.0.3, tslib@^2.3.0, tslib@^2.3.1:
   version "2.3.1"
   resolved "https://registry.nlark.com/tslib/download/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha1-6KM1rdXOrlGqJh0ypJAVjvBC7wE=
@@ -9930,6 +10021,13 @@ upath@^1.1.1:
   resolved "https://registry.npm.taobao.org/upath/download/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
   integrity sha1-j2bbzVWog6za5ECK+LA1pQRMGJQ=
 
+upper-case-first@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npm.taobao.org/upper-case-first/download/upper-case-first-2.0.2.tgz?cache=0&sync_timestamp=1606867326586&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fupper-case-first%2Fdownload%2Fupper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  integrity sha1-mSwyc/iCq9GdHgKJTMFHEX+EQyQ=
+  dependencies:
+    tslib "^2.0.3"
+
 upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.npm.taobao.org/upper-case/download/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
@@ -10168,6 +10266,14 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.nlark.com/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
+vue-tippy@^4.13.0:
+  version "4.13.0"
+  resolved "https://registry.npmmirror.com/vue-tippy/download/vue-tippy-4.13.0.tgz#02634c4901c6dd270432f1a53d0c07abfe8851fd"
+  integrity sha512-olKDi2plk0Yjs8A/31FwjWHaZKpwVC0/GbDXJH6tSWLEStOnIOW4M79P07aM4KuuCZIPVmuZWXP8zmLGS9Z0pg==
+  dependencies:
+    humps "^2.0.1"
+    tippy.js "^4.3.5"
+
 vue2-helpers@^1.1.6:
   version "1.1.6"
   resolved "https://registry.npmmirror.com/vue2-helpers/download/vue2-helpers-1.1.6.tgz#290cfcb925fbea57ab90b27ff1108a58eb919910"