feat: 导航top

Former-commit-id: cc721dfba1
2023-08-11 18:35:18 +08:00 · 2023-08-11 18:35:18 +08:00 · 2478224cff
parent b7c3c75906
commit 2478224cff
12 changed files with 332 additions and 278 deletions
--- a/index.html
+++ b/index.html
@ -10,7 +10,7 @@
  </head>

  <body>
-    <div id="app"></div>
+    <div id="app" class="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@ -46,28 +46,31 @@
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "5.1.10",
    "axios": "^1.4.0",
+    "codemirror": "^5.65.13",
    "echarts": "^5.2.2",
    "element-plus": "^2.3.9",
    "lodash-es": "^4.17.21",
+    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path-browserify": "^1.0.1",
    "path-to-regexp": "^6.2.0",
    "pinia": "^2.0.33",
    "screenfull": "^6.0.0",
+    "sortablejs": "^1.15.0",
    "vue": "^3.3.4",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.2.0",
-    "xlsx": "^0.18.5",
-    "sortablejs": "^1.15.0",
-    "codemirror": "^5.65.13"
+    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.3",
    "@commitlint/config-conventional": "^17.6.3",
    "@iconify-json/ep": "^1.1.10",
+    "@types/codemirror": "^5.60.7",
    "@types/lodash": "^4.14.195",
    "@types/nprogress": "^0.2.0",
    "@types/path-browserify": "^1.0.0",
+    "@types/sortablejs": "^1.15.1",
    "@typescript-eslint/eslint-plugin": "^5.59.6",
    "@typescript-eslint/parser": "^5.59.6",
    "autoprefixer": "^10.4.14",
@ -85,6 +88,7 @@
    "postcss-html": "^1.5.0",
    "postcss-scss": "^4.0.6",
    "prettier": "^2.8.8",
+    "rollup-plugin-visualizer": "^5.9.2",
    "sass": "^1.58.3",
    "stylelint": "^15.10.2",
    "stylelint-config-html": "^1.1.0",
@ -99,13 +103,10 @@
    "unplugin-icons": "^0.16.1",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.4.2",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.7.0 ",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "^3.0.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "@types/codemirror": "^5.60.7",
-    "@types/sortablejs": "^1.15.1"
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vue-tsc": "^1.7.0 "
  },
  "repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
  "author": "有来开源组织",
--- a/src/layout/components/NavBar/NavRight.vue
+++ b/src/layout/components/NavBar/NavRight.vue
@ -0,0 +1,120 @@
+<template>
+  <!-- 导航栏设置(窄屏隐藏)-->
+  <div v-if="device !== 'mobile'" class="setting-container">
+    <!--全屏 -->
+    <div class="setting-item" @click="toggle">
+      <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
+    </div>
+    <!-- 布局大小 -->
+    <el-tooltip content="布局大小" effect="dark" placement="bottom">
+      <size-select class="setting-item" />
+    </el-tooltip>
+    <!--语言选择-->
+    <lang-select class="setting-item" />
+  </div>
+
+  <!-- 用户头像 -->
+  <el-dropdown trigger="click">
+    <div class="avatar-container">
+      <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
+      <i-ep-caret-bottom class="w-3 h-3" />
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <router-link to="/">
+          <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
+        </router-link>
+        <a
+          target="_blank"
+          href="https://github.com/youlaitech/vue3-element-admin"
+        >
+          <el-dropdown-item>Github</el-dropdown-item>
+        </a>
+        <a target="_blank" href="https://gitee.com/haoxr">
+          <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
+        </a>
+        <a target="_blank" href="https://juejin.cn/post/7228990409909108793">
+          <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
+        </a>
+        <el-dropdown-item divided @click="logout">
+          {{ $t("navbar.logout") }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script setup lang="ts" name="navRight">
+import { storeToRefs } from "pinia";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store/modules/app";
+import { useTagsViewStore } from "@/store/modules/tagsView";
+import { useUserStore } from "@/store/modules/user";
+
+const appStore = useAppStore();
+const tagsViewStore = useTagsViewStore();
+const userStore = useUserStore();
+
+const route = useRoute();
+const router = useRouter();
+
+const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
+
+/**
+ * vueUse 全屏
+ */
+const { isFullscreen, toggle } = useFullscreen();
+
+/**
+ * 注销
+ */
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    userStore
+      .logout()
+      .then(() => {
+        tagsViewStore.delAllViews();
+      })
+      .then(() => {
+        router.push(`/login?redirect=${route.fullPath}`);
+      });
+  });
+}
+</script>
+<style lang="scss" scoped>
+.setting-container {
+  display: flex;
+  align-items: center;
+
+  .setting-item {
+    display: inline-block;
+    width: 30px;
+    height: 50px;
+    line-height: 50px;
+    color: #5a5e66;
+    text-align: center;
+    cursor: pointer;
+
+    &:hover {
+      background: rgb(249 250 251 / 100%);
+    }
+  }
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  margin: 0 5px;
+  cursor: pointer;
+
+  img {
+    width: 40px;
+    height: 40px;
+    border-radius: 5px;
+  }
+}
+</style>
--- a/src/layout/components/NavBar/index.vue
+++ b/src/layout/components/NavBar/index.vue
@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app";
+
+const appStore = useAppStore();
+
+/**
+ * 左侧菜单栏显示/隐藏
+ */
+function toggleSideBar() {
+  appStore.toggleSidebar(true);
+}
+</script>
+
+<template>
+  <!-- 顶部导航栏 -->
+  <div class="navbar">
+    <!-- 左侧面包屑 -->
+    <div class="flex">
+      <hamburger
+        :is-active="appStore.sidebar.opened"
+        @toggle-click="toggleSideBar"
+      />
+      <breadcrumb />
+    </div>
+
+    <!-- 右侧导航设置 -->
+    <div class="flex">
+      <NavRight />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  background-color: #fff;
+  box-shadow: 0 0 1px #0003;
+}
+</style>
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useRoute, useRouter } from "vue-router";
-import { useAppStore } from "@/store/modules/app";
-import { useTagsViewStore } from "@/store/modules/tagsView";
-import { useUserStore } from "@/store/modules/user";
-
-const appStore = useAppStore();
-const tagsViewStore = useTagsViewStore();
-const userStore = useUserStore();
-
-const route = useRoute();
-const router = useRouter();
-
-const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
-
-/**
- * 左侧菜单栏显示/隐藏
- */
-function toggleSideBar() {
-  appStore.toggleSidebar(true);
-}
-
-/**
- * vueUse 全屏
- */
-const { isFullscreen, toggle } = useFullscreen();
-
-/**
- * 注销
- */
-function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
-    confirmButtonText: "确定",
-    cancelButtonText: "取消",
-    type: "warning",
-  }).then(() => {
-    userStore
-      .logout()
-      .then(() => {
-        tagsViewStore.delAllViews();
-      })
-      .then(() => {
-        router.push(`/login?redirect=${route.fullPath}`);
-      });
-  });
-}
-</script>
-
-<template>
-  <!-- 顶部导航栏 -->
-  <div class="navbar">
-    <!-- 左侧面包屑 -->
-    <div class="flex">
-      <hamburger
-        :is-active="appStore.sidebar.opened"
-        @toggle-click="toggleSideBar"
-      />
-      <breadcrumb />
-    </div>
-
-    <!-- 右侧导航设置 -->
-    <div class="flex">
-      <!-- 导航栏设置(窄屏隐藏)-->
-      <div v-if="device !== 'mobile'" class="setting-container">
-        <!--全屏 -->
-        <div class="setting-item" @click="toggle">
-          <svg-icon
-            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
-          />
-        </div>
-        <!-- 布局大小 -->
-        <el-tooltip content="布局大小" effect="dark" placement="bottom">
-          <size-select class="setting-item" />
-        </el-tooltip>
-        <!--语言选择-->
-        <lang-select class="setting-item" />
-      </div>
-
-      <!-- 用户头像 -->
-      <el-dropdown trigger="click">
-        <div class="avatar-container">
-          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
-          <i-ep-caret-bottom class="w-3 h-3" />
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <router-link to="/">
-              <el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
-            </router-link>
-            <a
-              target="_blank"
-              href="https://github.com/youlaitech/vue3-element-admin"
-            >
-              <el-dropdown-item>Github</el-dropdown-item>
-            </a>
-            <a target="_blank" href="https://gitee.com/haoxr">
-              <el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
-            </a>
-            <a
-              target="_blank"
-              href="https://juejin.cn/post/7228990409909108793"
-            >
-              <el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
-            </a>
-            <el-dropdown-item divided @click="logout">
-              {{ $t("navbar.logout") }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.navbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  background-color: #fff;
-  box-shadow: 0 0 1px #0003;
-
-  .setting-container {
-    display: flex;
-    align-items: center;
-
-    .setting-item {
-      display: inline-block;
-      width: 30px;
-      height: 50px;
-      line-height: 50px;
-      color: #5a5e66;
-      text-align: center;
-      cursor: pointer;
-
-      &:hover {
-        background: rgb(249 250 251 / 100%);
-      }
-    }
-  }
-
-  .avatar-container {
-    display: flex;
-    align-items: center;
-    justify-items: center;
-    margin: 0 5px;
-    cursor: pointer;
-
-    img {
-      width: 40px;
-      height: 40px;
-      border-radius: 5px;
-    }
-  }
-}
-</style>
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@ -34,7 +34,7 @@ const themeColors = ref<string[]>([
 */
 function changeThemeColor(color: string) {
  document.documentElement.style.setProperty("--el-color-primary", color);
-  settingsStore.changeSetting({ key: "layout", value: color });
+  // settingsStore.changeSetting({ key: "layout", value: color });
 }

 onMounted(() => {
@ -94,7 +94,7 @@ onMounted(() => {
        <li
          :class="
            'layout-item layout-left ' +
-            (settingsStore.layout == 'left' ? 'is-active' : '')
+            (settingsStore.layout === 'left' ? 'is-active' : '')
          "
          @click="changeLayout('left')"
        >
@ -106,7 +106,7 @@ onMounted(() => {
        <li
          :class="
            'layout-item layout-top ' +
-            (settingsStore.layout == 'top' ? 'is-active' : '')
+            (settingsStore.layout === 'top' ? 'is-active' : '')
          "
          @click="changeLayout('top')"
        >
@ -118,7 +118,7 @@ onMounted(() => {
        <li
          :class="
            'layout-item layout-mix ' +
-            (settingsStore.layout == 'mix' ? 'is-active' : '')
+            (settingsStore.layout === 'mix' ? 'is-active' : '')
          "
          @click="changeLayout('mix')"
        >
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -14,7 +14,9 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
 </script>

 <template>
-  <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
+  <div
+    class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)] logo-wrap"
+  >
    <transition name="sidebarLogoFade">
      <router-link
        v-if="collapse"
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@ -14,21 +14,32 @@ const permissionStore = usePermissionStore();
 const appStore = useAppStore();
 const currRoute = useRoute();
 const { sidebarLogo } = storeToRefs(settingsStore);
+const layout = computed(() => settingsStore.layout);
+const showContent = ref(true);
+watch(
+  () => layout.value,
+  () => {
+    showContent.value = false;
+    nextTick(() => {
+      showContent.value = true;
+    });
+  }
+);
 </script>

 <template>
-  <div :class="{ 'has-logo': sidebarLogo }">
+  <div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
    <logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
-    <el-scrollbar>
+    <el-scrollbar v-if="showContent">
      <el-menu
-        :default-active="currRoute.path"
+        :default-active="layout === 'top' ? '-' : currRoute.path"
        :collapse="!appStore.sidebar.opened"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.menuActiveText"
        :unique-opened="false"
        :collapse-transition="false"
-        mode="vertical"
+        :mode="layout === 'top' ? 'horizontal' : 'vertical'"
      >
        <sidebar-item
          v-for="route in permissionStore.routes"
@ -39,5 +50,19 @@ const { sidebarLogo } = storeToRefs(settingsStore);
        />
      </el-menu>
    </el-scrollbar>
+    <NavRight v-if="layout === 'top'" />
  </div>
 </template>
+<style lang="scss" scoped>
+:deep(.setting-container) {
+  .setting-item {
+    color: #fff;
+    .svg-icon {
+      margin-right: 0px;
+    }
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+}
+</style>
--- a/src/layout/components/index.ts
+++ b/src/layout/components/index.ts
@ -1,4 +1,4 @@
-export { default as Navbar } from "./Navbar.vue";
+export { default as Navbar } from "./Navbar/index.vue";
 export { default as AppMain } from "./AppMain.vue";
 export { default as Settings } from "./Settings/index.vue";
 export { default as TagsView } from "./TagsView/index.vue";
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -25,12 +25,14 @@ const settingsStore = useSettingsStore();
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 const showTagsView = computed(() => settingsStore.tagsView);
 const showSettings = computed(() => settingsStore.showSettings);
+const layout = computed(() => settingsStore.layout);

 const classObj = computed(() => ({
  hideSidebar: !appStore.sidebar.opened,
  openSidebar: appStore.sidebar.opened,
  withoutAnimation: appStore.sidebar.withoutAnimation,
  mobile: appStore.device === "mobile",
+  isTop: layout.value === "top",
 }));

 watchEffect(() => {
@ -67,7 +69,7 @@ function handleOutsideClick() {

    <div :class="{ hasTagsView: showTagsView }" class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar />
+        <navbar v-if="layout !== 'top'" />
        <tags-view v-if="showTagsView" />
      </div>

@ -126,4 +128,25 @@ function handleOutsideClick() {
  background: #000;
  opacity: 0.3;
 }
+// 导航栏顶部显示
+.isTop {
+  .sidebar-container {
+    width: 100% !important;
+    height: 50px;
+    display: flex;
+    z-index: 800;
+    :deep(.logo-wrap) {
+      width: 210px;
+    }
+    :deep(.el-scrollbar) {
+      flex: 1;
+      min-width: 0px;
+      height: 50px;
+    }
+  }
+  .main-container {
+    margin-left: 0px;
+    padding-top: 50px;
+  }
+}
 </style>
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@ -1,4 +1,4 @@
-#app {
+.app {
  .main-container {
    position: relative;
    min-height: 100%;
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@ -5,105 +5,104 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'

-export {};
+export { };

 declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    AppMain: typeof import("./../layout/components/AppMain.vue")["default"];
-    BarChart: typeof import("./../views/dashboard/components/BarChart.vue")["default"];
-    Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
-    Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
-    ElAlert: typeof import("element-plus/es")["ElAlert"];
-    ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
-    ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
-    ElButton: typeof import("element-plus/es")["ElButton"];
-    ElCard: typeof import("element-plus/es")["ElCard"];
-    ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
-    ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
-    ElCol: typeof import("element-plus/es")["ElCol"];
-    ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
-    ElDialog: typeof import("element-plus/es")["ElDialog"];
-    ElDivider: typeof import("element-plus/es")["ElDivider"];
-    ElDropdown: typeof import("element-plus/es")["ElDropdown"];
-    ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
-    ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
-    ElForm: typeof import("element-plus/es")["ElForm"];
-    ElFormItem: typeof import("element-plus/es")["ElFormItem"];
-    ElIcon: typeof import("element-plus/es")["ElIcon"];
-    ElInput: typeof import("element-plus/es")["ElInput"];
-    ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
-    ElLink: typeof import("element-plus/es")["ElLink"];
-    ElMenu: typeof import("element-plus/es")["ElMenu"];
-    ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
-    ElOption: typeof import("element-plus/es")["ElOption"];
-    ElPagination: typeof import("element-plus/es")["ElPagination"];
-    ElPopover: typeof import("element-plus/es")["ElPopover"];
-    ElRadio: typeof import("element-plus/es")["ElRadio"];
-    ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
-    ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
-    ElRate: typeof import("element-plus/es")["ElRate"];
-    ElRow: typeof import("element-plus/es")["ElRow"];
-    ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
-    ElSelect: typeof import("element-plus/es")["ElSelect"];
-    ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
-    ElSwitch: typeof import("element-plus/es")["ElSwitch"];
-    ElTable: typeof import("element-plus/es")["ElTable"];
-    ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
-    ElTabPane: typeof import("element-plus/es")["ElTabPane"];
-    ElTabs: typeof import("element-plus/es")["ElTabs"];
-    ElTag: typeof import("element-plus/es")["ElTag"];
-    ElTooltip: typeof import("element-plus/es")["ElTooltip"];
-    ElTree: typeof import("element-plus/es")["ElTree"];
-    ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
-    ElUpload: typeof import("element-plus/es")["ElUpload"];
-    FixedThead: typeof import("./../views/table/dynamic-table/components/FixedThead.vue")["default"];
-    FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")["default"];
-    GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
-    Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
-    IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
-    IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
-    IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
-    IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
-    IEpClose: typeof import("~icons/ep/close")["default"];
-    IEpCollection: typeof import("~icons/ep/collection")["default"];
-    IEpDelete: typeof import("~icons/ep/delete")["default"];
-    IEpDownload: typeof import("~icons/ep/download")["default"];
-    IEpEdit: typeof import("~icons/ep/edit")["default"];
-    IEpPlus: typeof import("~icons/ep/plus")["default"];
-    IEpPosition: typeof import("~icons/ep/position")["default"];
-    IEpRefresh: typeof import("~icons/ep/refresh")["default"];
-    IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
-    IEpSearch: typeof import("~icons/ep/search")["default"];
-    IEpSetting: typeof import("~icons/ep/setting")["default"];
-    IEpSortDown: typeof import("~icons/ep/sort-down")["default"];
-    IEpSortUp: typeof import("~icons/ep/sort-up")["default"];
-    IEpTop: typeof import("~icons/ep/top")["default"];
-    IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
-    LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
-    Link: typeof import("./../layout/components/Sidebar/Link.vue")["default"];
-    Logo: typeof import("./../layout/components/Sidebar/Logo.vue")["default"];
-    MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"];
-    Navbar: typeof import("./../layout/components/Navbar.vue")["default"];
-    Pagination: typeof import("./../components/Pagination/index.vue")["default"];
-    PieChart: typeof import("./../views/dashboard/components/PieChart.vue")["default"];
-    RadarChart: typeof import("./../views/dashboard/components/RadarChart.vue")["default"];
-    RightPanel: typeof import("./../components/RightPanel/index.vue")["default"];
-    RouterLink: typeof import("vue-router")["RouterLink"];
-    RouterView: typeof import("vue-router")["RouterView"];
-    ScrollPane: typeof import("./../layout/components/TagsView/ScrollPane.vue")["default"];
-    Settings: typeof import("./../layout/components/Settings/index.vue")["default"];
-    Sidebar: typeof import("./../layout/components/Sidebar/index.vue")["default"];
-    SidebarItem: typeof import("./../layout/components/Sidebar/SidebarItem.vue")["default"];
-    SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
-    SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
-    SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
-    SwitchRoles: typeof import("./../views/permission/components/SwitchRoles.vue")["default"];
-    TagInput: typeof import("./../components/TagInput/index.vue")["default"];
-    TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
-    UnfixedThead: typeof import("./../views/table/dynamic-table/components/UnfixedThead.vue")["default"];
-    WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
-  }
-  export interface ComponentCustomProperties {
-    vLoading: typeof import("element-plus/es")["ElLoadingDirective"];
-  }
+	export interface GlobalComponents {
+		AppMain: typeof import("./../layout/components/AppMain.vue")["default"];
+		BarChart: typeof import("./../views/dashboard/components/BarChart.vue")["default"];
+		Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
+		Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
+		ElAlert: typeof import("element-plus/es")["ElAlert"];
+		ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
+		ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
+		ElButton: typeof import("element-plus/es")["ElButton"];
+		ElCard: typeof import("element-plus/es")["ElCard"];
+		ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
+		ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
+		ElCol: typeof import("element-plus/es")["ElCol"];
+		ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
+		ElDialog: typeof import("element-plus/es")["ElDialog"];
+		ElDivider: typeof import("element-plus/es")["ElDivider"];
+		ElDropdown: typeof import("element-plus/es")["ElDropdown"];
+		ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
+		ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
+		ElForm: typeof import("element-plus/es")["ElForm"];
+		ElFormItem: typeof import("element-plus/es")["ElFormItem"];
+		ElIcon: typeof import("element-plus/es")["ElIcon"];
+		ElInput: typeof import("element-plus/es")["ElInput"];
+		ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
+		ElLink: typeof import("element-plus/es")["ElLink"];
+		ElMenu: typeof import("element-plus/es")["ElMenu"];
+		ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
+		ElOption: typeof import("element-plus/es")["ElOption"];
+		ElPagination: typeof import("element-plus/es")["ElPagination"];
+		ElPopover: typeof import("element-plus/es")["ElPopover"];
+		ElRadio: typeof import("element-plus/es")["ElRadio"];
+		ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
+		ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
+		ElRate: typeof import("element-plus/es")["ElRate"];
+		ElRow: typeof import("element-plus/es")["ElRow"];
+		ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
+		ElSelect: typeof import("element-plus/es")["ElSelect"];
+		ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
+		ElSwitch: typeof import("element-plus/es")["ElSwitch"];
+		ElTable: typeof import("element-plus/es")["ElTable"];
+		ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
+		ElTabPane: typeof import("element-plus/es")["ElTabPane"];
+		ElTabs: typeof import("element-plus/es")["ElTabs"];
+		ElTag: typeof import("element-plus/es")["ElTag"];
+		ElTooltip: typeof import("element-plus/es")["ElTooltip"];
+		ElTree: typeof import("element-plus/es")["ElTree"];
+		ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
+		ElUpload: typeof import("element-plus/es")["ElUpload"];
+		FixedThead: typeof import("./../views/table/dynamic-table/components/FixedThead.vue")["default"];
+		FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")["default"];
+		GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
+		Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
+		IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
+		IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
+		IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
+		IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
+		IEpClose: typeof import("~icons/ep/close")["default"];
+		IEpCollection: typeof import("~icons/ep/collection")["default"];
+		IEpDelete: typeof import("~icons/ep/delete")["default"];
+		IEpDownload: typeof import("~icons/ep/download")["default"];
+		IEpEdit: typeof import("~icons/ep/edit")["default"];
+		IEpPlus: typeof import("~icons/ep/plus")["default"];
+		IEpPosition: typeof import("~icons/ep/position")["default"];
+		IEpRefresh: typeof import("~icons/ep/refresh")["default"];
+		IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
+		IEpSearch: typeof import("~icons/ep/search")["default"];
+		IEpSetting: typeof import("~icons/ep/setting")["default"];
+		IEpSortDown: typeof import("~icons/ep/sort-down")["default"];
+		IEpSortUp: typeof import("~icons/ep/sort-up")["default"];
+		IEpTop: typeof import("~icons/ep/top")["default"];
+		IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
+		LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
+		Link: typeof import("./../layout/components/Sidebar/Link.vue")["default"];
+		Logo: typeof import("./../layout/components/Sidebar/Logo.vue")["default"];
+		MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"];
+		Pagination: typeof import("./../components/Pagination/index.vue")["default"];
+		PieChart: typeof import("./../views/dashboard/components/PieChart.vue")["default"];
+		RadarChart: typeof import("./../views/dashboard/components/RadarChart.vue")["default"];
+		RightPanel: typeof import("./../components/RightPanel/index.vue")["default"];
+		RouterLink: typeof import("vue-router")["RouterLink"];
+		RouterView: typeof import("vue-router")["RouterView"];
+		ScrollPane: typeof import("./../layout/components/TagsView/ScrollPane.vue")["default"];
+		Settings: typeof import("./../layout/components/Settings/index.vue")["default"];
+		Sidebar: typeof import("./../layout/components/Sidebar/index.vue")["default"];
+		SidebarItem: typeof import("./../layout/components/Sidebar/SidebarItem.vue")["default"];
+		SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
+		SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
+		SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
+		SwitchRoles: typeof import("./../views/permission/components/SwitchRoles.vue")["default"];
+		TagInput: typeof import("./../components/TagInput/index.vue")["default"];
+		TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
+		UnfixedThead: typeof import("./../views/table/dynamic-table/components/UnfixedThead.vue")["default"];
+		WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
+	}
+	export interface ComponentCustomProperties {
+		vLoading: typeof import("element-plus/es")["ElLoadingDirective"];
+	}
 }