diff --git a/src/api/user/index.ts b/src/api/user/index.ts
index 7f4c48ad..a3e18b4c 100644
--- a/src/api/user/index.ts
+++ b/src/api/user/index.ts
@@ -111,7 +111,7 @@ export function deleteUsers(ids: string) {
  *
  * @returns
  */
-export function downloadTemplate() {
+export function downloadTemplateApi() {
   return request({
     url: '/api/v1/users/template',
     method: 'get',
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 73231144..9823bb45 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -10,10 +10,10 @@
             item.redirect === 'noredirect' || index === breadcrumbs.length - 1
           "
           class="text-[#97a8be]"
-          >{{ generateTitle(item.meta.title) }}</span
+          >{{ translateRouteTitleI18n(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
-          {{ generateTitle(item.meta.title) }}
+          {{ translateRouteTitleI18n(item.meta.title) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>
@@ -25,7 +25,7 @@ import { onBeforeMount, ref, watch } from 'vue';
 import { useRoute, RouteLocationMatched } from 'vue-router';
 import { compile } from 'path-to-regexp';
 import router from '@/router';
-import { generateTitle } from '@/utils/i18n';
+import { translateRouteTitleI18n } from '@/utils/i18n';
 
 const currentRoute = useRoute();
 const pathCompile = (path: string) => {
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 9670dcfb..ea6aed4e 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -1,92 +1,84 @@
-<template>
-  <div class="icon-select">
-    <el-input
-      v-model="iconName"
-      clearable
-      placeholder="请输入图标名称"
-      @clear="filterIcons"
-      @input="filterIcons"
-    >
-      <template #suffix><i class="el-icon-search el-input__icon" /></template>
-    </el-input>
-    <div class="icon-select__list">
-      <div
-        v-for="(item, index) in iconList"
-        :key="index"
-        @click="selectedIcon(item)"
-      >
-        <svg-icon
-          color="#999"
-          :icon-class="item"
-          style="height: 30px; width: 16px; margin-right: 5px"
-        />
-        <span>{{ item }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-import { ref } from 'vue';
-import SvgIcon from '@/components/SvgIcon/index.vue';
+const props = defineProps({
+  modelValue: {
+    type: String,
+    require: false
+  }
+});
 
-const icons = [] as string[];
-const modules = import.meta.glob('../../assets/icons/*.svg');
-for (const path in modules) {
-  const p = path.split('assets/icons/')[1].split('.svg')[0];
-  icons.push(p);
-}
-const iconList = ref(icons);
+const emit = defineEmits(['update:modelValue']);
+const visible = ref(false);
+const inputValue = toRef(props, 'modelValue');
+const iconList = ref<string[]>([]);
 
-const iconName = ref('');
+const filterValue = ref('');
 
-const emit = defineEmits(['selected']);
+const icon = ref('perm');
 
-function filterIcons() {
-  iconList.value = icons;
-  if (iconName.value) {
-    iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1);
+function loadIcons() {
+  const modules = import.meta.glob('../../assets/icons/*.svg');
+  for (const path in modules) {
+    const icon = path.split('assets/icons/')[1].split('.svg')[0];
+    iconList.value.push(icon);
   }
 }
 
-function selectedIcon(name: string) {
-  emit('selected', name);
-  document.body.click();
-}
-
-function reset() {
-  iconName.value = '';
-  iconList.value = icons;
-}
-
-defineExpose({
-  reset
+onMounted(() => {
+  loadIcons();
 });
 </script>
 
-<style lang="scss" scoped>
-.icon-select {
-  width: 100%;
-  padding: 10px;
+<template>
+  <div class="w-[400px] relative">
+    <el-input v-model="inputValue" readonly>
+      <template #prepend> <svg-icon :iconName="icon"></svg-icon> </template>
+    </el-input>
 
-  &__list {
-    height: 200px;
-    overflow-y: scroll;
+    <el-popover
+      shadow="none"
+      :visible="visible"
+      placement="bottom-end"
+      trigger="click"
+    >
+      <template #reference>
+        <div
+          @click="visible = !visible"
+          class="cursor-pointer text-[#999] absolute right-[10px] top-0"
+        >
+          <i-ep-caret-top v-show="visible"></i-ep-caret-top>
+          <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom>
+        </div>
+      </template>
 
-    div {
-      height: 30px;
-      line-height: 30px;
-      margin-bottom: -5px;
-      cursor: pointer;
-      width: 33%;
-      float: left;
-    }
+      <!-- 下拉选择弹窗 -->
+      <el-input
+        class="p-2"
+        v-model="filterValue"
+        placeholder="搜索图标"
+        clearable
+      />
+      <el-divider border-style="dashed" />
 
-    span {
-      display: inline-block;
-      vertical-align: -0.15em;
-      fill: currentColor;
-      overflow: hidden;
+      <el-scrollbar height="300px">
+        <ul class="icon-list">
+          <li class="icon-item" v-for="(item, index) in iconList" :key="index">
+            <svg-icon color="#999" :icon-name="item" />
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </el-scrollbar>
+    </el-popover>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.icon-list {
+  .icon-item {
+    &:hover {
+      border-color: var(--el-color-primary);
+      color: var(--el-color-primary);
+      transition: all 0.4s;
+      transform: scaleX(1.05);
     }
   }
 }
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 62ca76a5..32737e69 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ hidden: hidden }" class="pagination-container">
+  <div :class="'pagination ' + { hidden: hidden }">
     <el-pagination
       :background="background"
       v-model:current-page="currentPage"
@@ -89,13 +89,11 @@ function handleCurrentChange(val: number) {
 }
 </script>
 
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-
-.pagination-container.hidden {
-  display: none;
+<style lang="scss" scoped>
+.pagination {
+  padding: 12px;
+  &.hidden {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index cefeebe3..e4568e00 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
     <svg-icon
-      :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+      :icon-name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
       @click="toggle"
     />
   </div>
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index b13fd927..47ad1d06 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -22,7 +22,7 @@ function handleSizeChange(size: string) {
 <template>
   <el-dropdown trigger="click" @command="handleSizeChange">
     <div class="cursor-pointerw-[40px] h-[50px] leading-[50px] text-center">
-      <svg-icon icon-class="size" />
+      <svg-icon icon-name="size" />
     </div>
     <template #dropdown>
       <el-dropdown-menu>
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 19d3cc96..29a73c14 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -9,14 +9,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
 const props = defineProps({
   prefix: {
     type: String,
     default: 'icon'
   },
-  iconClass: {
+  iconName: {
     type: String,
     required: false
   },
@@ -29,12 +27,15 @@ const props = defineProps({
   }
 });
 
-const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
+const symbolId = computed(() => `#${props.prefix}-${props.iconName}`);
 </script>
 
 <style scoped>
 .svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
+  fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
   overflow: hidden;
-  fill: currentColor;
 }
 </style>
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 3a03aa4b..ae747db0 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -15,10 +15,7 @@
   />
 </template>
 
-<script setup lang="ts">
-import { useSettingsStore } from '@/store/modules/settings';
-const settingsStore = useSettingsStore();
-</script>
+<script setup lang="ts"></script>
 
 <style>
 .theme-message,
diff --git a/src/components/Upload/MultiUpload.vue b/src/components/Upload/MultiUpload.vue
index 77bcd93c..daec01a0 100644
--- a/src/components/Upload/MultiUpload.vue
+++ b/src/components/Upload/MultiUpload.vue
@@ -11,20 +11,18 @@
     :before-upload="handleBeforeUpload"
     :http-request="handleUpload"
     :on-remove="handleRemove"
-    :on-preview="handlePreview"
+    :on-preview="previewImg"
     :limit="props.limit"
   >
-    <el-icon><Plus /></el-icon>
+    <i-ep-plus />
   </el-upload>
 
   <el-dialog v-model="dialogVisible">
-    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+    <img w-full :src="previewImgUrl" alt="Preview Image" />
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { Plus } from '@element-plus/icons-vue';
 import {
   ElMessage,
   ElUpload,
@@ -55,7 +53,7 @@ const props = defineProps({
   }
 });
 
-const dialogImageUrl = ref('');
+const previewImgUrl = ref('');
 const dialogVisible = ref(false);
 
 const fileList = ref([] as UploadUserFile[]);
@@ -134,10 +132,10 @@ function handleBeforeUpload(file: UploadRawFile) {
 }
 
 /**
- * 图片预览
+ * 预览图片
  */
-const handlePreview: UploadProps['onPreview'] = uploadFile => {
-  dialogImageUrl.value = uploadFile.url!;
+const previewImg: UploadProps['onPreview'] = uploadFile => {
+  previewImgUrl.value = uploadFile.url!;
   dialogVisible.value = true;
 };
 </script>
diff --git a/src/directive/utils/index.ts b/src/directive/utils/index.ts
index 651247f8..0098a141 100644
--- a/src/directive/utils/index.ts
+++ b/src/directive/utils/index.ts
@@ -1,15 +1,15 @@
-import { Directive, DirectiveBinding } from 'vue';
+import { Directive } from 'vue';
 
 /**
  * 按钮防抖
  */
-export const deBounce:Directive = {
-  mounted(el:HTMLElement) {
+export const deBounce: Directive = {
+  mounted(el: HTMLElement) {
     el.addEventListener('click', e => {
-      el.classList.add('is-disabled')
+      el.classList.add('is-disabled');
       setTimeout(() => {
-        el.classList.remove('is-disabled')
-      }, 2000)
-    })
+        el.classList.remove('is-disabled');
+      }, 2000);
+    });
   }
-}
+};
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 96a27597..e7b03e09 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,16 +1,6 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
-import { ElMessageBox } from 'element-plus';
-
-import Hamburger from '@/components/Hamburger/index.vue';
-import Breadcrumb from '@/components/Breadcrumb/index.vue';
-import Screenfull from '@/components/Screenfull/index.vue';
-import SizeSelect from '@/components/SizeSelect/index.vue';
-import LangSelect from '@/components/LangSelect/index.vue';
-import MixNav from './Sidebar/MixNav.vue';
-import { CaretBottom } from '@element-plus/icons-vue';
-
 import { useAppStore } from '@/store/modules/app';
 import { useTagsViewStore } from '@/store/modules/tagsView';
 import { useUserStore } from '@/store/modules/user';
@@ -24,12 +14,14 @@ const settingsStore = useSettingsStore();
 const route = useRoute();
 const router = useRouter();
 
-const device = computed(() => appStore.device);
+const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
+const { layout } = storeToRefs(settingsStore); // 布局模式：left-左侧模式||top-顶部模式||mix-混合模式
 
 function toggleSideBar() {
   appStore.toggleSidebar(true);
 }
 
+// 注销
 function logout() {
   ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
     confirmButtonText: '确定',
@@ -52,7 +44,7 @@ function logout() {
   <div class="navbar">
     <div
       class="flex justify-start"
-      v-if="device === 'mobile' || settingsStore.layout === 'left'"
+      v-if="device === 'mobile' || layout === 'left'"
     >
       <hamburger
         :is-active="appStore.sidebar.opened"
@@ -62,13 +54,24 @@ function logout() {
       <breadcrumb />
     </div>
 
-    <mix-nav v-if="device !== 'mobile' && settingsStore.layout === 'mix'" />
+    <mix-nav v-if="device !== 'mobile' && layout === 'mix'" />
 
+    <!-- 宽屏或左侧模式显示 -->
     <div
-      v-if="device === 'mobile' || settingsStore.layout === 'left'"
+      v-if="device === 'desktop' || layout === 'left'"
       class="flex justify-start"
     >
+      <!-- 左侧窄屏不显示 -->
       <div v-if="device !== 'mobile'" class="flex justify-center items-center">
+        <i-ep-add-location />
+        <i-ep-aim />
+        <div i-ep-check />
+
+        <el-button>
+          <template #icon><i-ep-circle-check-filled /></template>
+          Hello world
+        </el-button>
+
         <!--全屏 -->
         <screenfull id="screenfull" />
 
@@ -80,14 +83,14 @@ function logout() {
         <!--语言选择-->
         <lang-select />
       </div>
-
+      <!-- 头像 -->
       <el-dropdown trigger="click">
         <div class="flex justify-center items-center pr-[20px]">
           <img
             :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
             class="w-[40px] h-[40px] rounded-lg"
           />
-          <CaretBottom class="w-3 h-3" />
+          <i-ep-caret-bottom class="w-3 h-3" />
         </div>
 
         <template #dropdown>
@@ -115,15 +118,12 @@ function logout() {
 </template>
 
 <style lang="scss" scoped>
-.el-dropdown {
-  font-size: 18px;
-}
-
 .navbar {
+  background-color: #fff;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px #0003;
 }
 </style>
diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
index 46c7cbcf..c592bbd0 100644
--- a/src/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { isExternal } from '@/utils/validate';
 import { useRouter } from 'vue-router';
 
-import { DeviceType, useAppStore } from '@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 const appStore = useAppStore();
 
 const sidebar = computed(() => appStore.sidebar);
diff --git a/src/layout/components/Sidebar/MixNav.vue b/src/layout/components/Sidebar/MixNav.vue
index f05025d6..3de0554b 100644
--- a/src/layout/components/Sidebar/MixNav.vue
+++ b/src/layout/components/Sidebar/MixNav.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted } from 'vue';
-import { RouterLink, useRoute, useRouter, RouteRecordRaw } from 'vue-router';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
 import {
   ElDropdown,
   ElDropdownItem,
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 59d604f5..1bafe463 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -4,7 +4,7 @@ import path from 'path-browserify';
 import { isExternal } from '@/utils/validate';
 import AppLink from './Link.vue';
 
-import { generateTitle } from '@/utils/i18n';
+import { translateRouteTitleI18n } from '@/utils/i18n';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 
 const props = defineProps({
@@ -78,10 +78,10 @@ function resolvePath(routePath: string) {
         >
           <svg-icon
             v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
-            :icon-class="onlyOneChild.meta.icon"
+            :icon-name="onlyOneChild.meta.icon"
           />
           <template #title>
-            {{ generateTitle(onlyOneChild.meta.title) }}
+            {{ translateRouteTitleI18n(onlyOneChild.meta.title) }}
           </template>
         </el-menu-item>
       </app-link>
@@ -92,10 +92,10 @@ function resolvePath(routePath: string) {
       <template #title>
         <svg-icon
           v-if="item.meta && item.meta.icon"
-          :icon-class="item.meta.icon"
+          :icon-name="item.meta.icon"
         />
         <span v-if="item.meta && item.meta.title">{{
-          generateTitle(item.meta.title)
+          translateRouteTitleI18n(item.meta.title)
         }}</span>
       </template>
 
diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 07f79c3b..dd76e937 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  onMounted,
-  onBeforeUnmount,
-  getCurrentInstance
-} from 'vue';
 import { useTagsViewStore, TagView } from '@/store/modules/tagsView';
 
 const tagAndTagSpacing = ref(4);
@@ -102,8 +95,8 @@ defineExpose({
 <template>
   <el-scrollbar
     ref="scrollContainer"
-    :vertical="false"
     class="scroll-container"
+    :vertical="false"
     @wheel.prevent="handleScroll"
   >
     <slot />
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 75d4be21..42e5310e 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -7,26 +7,27 @@ import {
   onMounted,
   ComponentInternalInstance
 } from 'vue';
+import { storeToRefs } from 'pinia';
 
 import path from 'path-browserify';
 
 import { useRoute, useRouter } from 'vue-router';
 
-import ScrollPane from './ScrollPane.vue';
-import SvgIcon from '@/components/SvgIcon/index.vue';
-import { generateTitle } from '@/utils/i18n';
+import { translateRouteTitleI18n } from '@/utils/i18n';
 
 import { usePermissionStore } from '@/store/modules/permission';
 import { useTagsViewStore, TagView } from '@/store/modules/tagsView';
-
-const permissionStore = usePermissionStore();
-const tagsViewStore = useTagsViewStore();
+import ScrollPane from './ScrollPane.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const router = useRouter();
 const route = useRoute();
 
-const visible = ref(false);
+const permissionStore = usePermissionStore();
+const tagsViewStore = useTagsViewStore();
+
+const { visitedViews } = storeToRefs(tagsViewStore);
+
 const selectedTag = ref({});
 const scrollPaneRef = ref();
 const left = ref(0);
@@ -45,11 +46,12 @@ watch(
   }
 );
 
-watch(visible, value => {
+const tagMenuVisible = ref(false); // 标签操作菜单显示状态
+watch(tagMenuVisible, value => {
   if (value) {
-    document.body.addEventListener('click', closeMenu);
+    document.body.addEventListener('click', closeTagMenu);
   } else {
-    document.body.removeEventListener('click', closeMenu);
+    document.body.removeEventListener('click', closeTagMenu);
   }
 });
 
@@ -78,11 +80,11 @@ function filterAffixTags(routes: any[], basePath = '/') {
 }
 
 function initTags() {
-  const tags = filterAffixTags(permissionStore.routes);
+  const tags: TagView[] = filterAffixTags(permissionStore.routes);
   affixTags.value = tags;
   for (const tag of tags) {
     // Must have tag name
-    if ((tag as TagView).name) {
+    if (tag.name) {
       tagsViewStore.addVisitedView(tag);
     }
   }
@@ -205,7 +207,7 @@ function closeAllTags(view: TagView) {
   });
 }
 
-function openMenu(tag: TagView, e: MouseEvent) {
+function openTagMenu(tag: TagView, e: MouseEvent) {
   const menuMinWidth = 105;
   const offsetLeft = proxy?.$el.getBoundingClientRect().left; // container margin left
   const offsetWidth = proxy?.$el.offsetWidth; // container width
@@ -219,16 +221,16 @@ function openMenu(tag: TagView, e: MouseEvent) {
   }
 
   top.value = e.clientY;
-  visible.value = true;
+  tagMenuVisible.value = true;
   selectedTag.value = tag;
 }
 
-function closeMenu() {
-  visible.value = false;
+function closeTagMenu() {
+  tagMenuVisible.value = false;
 }
 
 function handleScroll() {
-  closeMenu();
+  closeTagMenu();
 }
 
 onMounted(() => {
@@ -237,71 +239,71 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="h-[34px] w-full border-b-[1px] border-gray-200 shadow-lg shadow-[rgba(0, 21, 41, 0.08)]"
+  <scroll-pane
+    class="tags-container"
+    ref="scrollPaneRef"
+    @scroll="handleScroll"
   >
-    <scroll-pane
-      ref="scrollPaneRef"
-      class="tags-container"
-      @scroll="handleScroll"
+    <router-link
+      :class="'tags-item ' + (isActive(tag) ? 'active' : '')"
+      v-for="tag in visitedViews"
+      :key="tag.path"
+      :data-path="tag.path"
+      :to="{ path: tag.path, query: tag.query }"
+      @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
+      @contextmenu.prevent="openTagMenu(tag, $event)"
     >
-      <router-link
-        v-for="tag in tagsViewStore.visitedViews"
-        :key="tag.path"
-        :data-path="tag.path"
-        :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path, query: tag.query }"
-        class="tags-item"
-        @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
+      {{ translateRouteTitleI18n(tag.meta?.title) }}
+      <span
+        v-if="!isAffix(tag)"
+        class="rounded-[60%] hover:bg-gray-300"
+        @click.prevent.stop="closeSelectedTag(tag)"
       >
-        {{ generateTitle(tag.meta?.title) }}
+        <i-ep-close class="text-[10px]" />
+      </span>
+    </router-link>
+  </scroll-pane>
 
-        <span
-          v-if="!isAffix(tag)"
-          class="tags-item-remove"
-          @click.prevent.stop="closeSelectedTag(tag)"
-        >
-          <svg-icon icon-class="close" />
-        </span>
-      </router-link>
-    </scroll-pane>
-
-    <ul
-      v-show="visible"
-      :style="{ left: left + 'px', top: top + 'px' }"
-      class="tags-item-menu"
-    >
-      <li @click="refreshSelectedTag(selectedTag)">
-        <svg-icon icon-class="refresh" />
-        刷新
-      </li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
-        <svg-icon icon-class="close" />
-        关闭
-      </li>
-      <li @click="closeOtherTags">
-        <svg-icon icon-class="close_other" />
-        关闭其它
-      </li>
-      <li v-if="!isFirstView()" @click="closeLeftTags">
-        <svg-icon icon-class="close_left" />
-        关闭左侧
-      </li>
-      <li v-if="!isLastView()" @click="closeRightTags">
-        <svg-icon icon-class="close_right" />
-        关闭右侧
-      </li>
-      <li @click="closeAllTags(selectedTag)">
-        <svg-icon icon-class="close_all" />
-        关闭所有
-      </li>
-    </ul>
-  </div>
+  <!-- tag标签操作菜单 -->
+  <ul
+    v-show="tagMenuVisible"
+    class="tag-menu"
+    :style="{ left: left + 'px', top: top + 'px' }"
+  >
+    <li @click="refreshSelectedTag(selectedTag)">
+      <svg-icon icon-name="refresh" />
+      刷新
+    </li>
+    <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+      <svg-icon icon-name="close" />
+      关闭
+    </li>
+    <li @click="closeOtherTags">
+      <svg-icon icon-name="close_other" />
+      关闭其它
+    </li>
+    <li v-if="!isFirstView()" @click="closeLeftTags">
+      <svg-icon icon-name="close_left" />
+      关闭左侧
+    </li>
+    <li v-if="!isLastView()" @click="closeRightTags">
+      <svg-icon icon-name="close_right" />
+      关闭右侧
+    </li>
+    <li @click="closeAllTags(selectedTag)">
+      <svg-icon icon-name="close_all" />
+      关闭所有
+    </li>
+  </ul>
 </template>
 
 <style lang="scss" scoped>
 .tags-container {
+  height: 34px;
+  width: 100%;
+  border: 1px solid #eee;
+  box-shadow: 0px 1px 1px #eee;
+
   .tags-item {
     display: inline-block;
     cursor: pointer;
@@ -324,7 +326,7 @@ onMounted(() => {
 
     &.active {
       background-color: var(--el-color-primary);
-      color: var(--el-color-primary-light-9);
+      color: #fff;
       border-color: var(--el-color-primary);
       &::before {
         content: '';
@@ -333,22 +335,13 @@ onMounted(() => {
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        position: relative;
         margin-right: 5px;
       }
     }
-
-    &-remove {
-      border-radius: 50%;
-      &:hover {
-        color: #fff;
-        background-color: #ccc;
-      }
-    }
   }
 }
 
-.tags-item-menu {
+.tag-menu {
   background: #fff;
   z-index: 99;
   position: absolute;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index dd7e7610..ecdda06f 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -5,7 +5,7 @@ import { AppMain, Navbar, Settings, TagsView } from './components/index';
 import Sidebar from './components/Sidebar/index.vue';
 import RightPanel from '@/components/RightPanel/index.vue';
 
-import { DeviceType, useAppStore } from '@/store/modules/app';
+import { useAppStore } from '@/store/modules/app';
 import { useSettingsStore } from '@/store/modules/settings';
 
 const { width } = useWindowSize();
diff --git a/src/main.ts b/src/main.ts
index c71efea2..2483a2f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,10 +5,9 @@ import { setupStore } from '@/store';
 
 import ElementPlus from 'element-plus';
 
-import Pagination from '@/components/Pagination/index.vue';
 import '@/permission';
 
-// 引入svg注册脚本
+// 本地SVG图标
 import 'virtual:svg-icons-register';
 
 // 国际化
@@ -31,9 +30,4 @@ app.config.globalProperties.$getDictionaries = getDictionaries;
 
 // 全局挂载
 setupStore(app);
-app
-  .component('Pagination', Pagination)
-  .use(router)
-  .use(ElementPlus)
-  .use(i18n)
-  .mount('#app');
+app.use(router).use(ElementPlus).use(i18n).mount('#app');
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index f04320ee..5ec8cb8b 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -3,13 +3,13 @@ import { defineStore } from 'pinia';
 import { constantRoutes } from '@/router';
 import { store } from '@/store';
 import { listRoutes } from '@/api/menu';
-import { ref } from 'vue';
 
 const modules = import.meta.glob('../../views/**/**.vue');
 export const Layout = () => import('@/layout/index.vue');
 
 const hasPermission = (roles: string[], route: RouteRecordRaw) => {
   if (route.meta && route.meta.roles) {
+    // 默认超级管理员角色拥有所有权限，忽略校验
     if (roles.includes('ROOT')) {
       return true;
     }
@@ -51,11 +51,9 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
 export const usePermissionStore = defineStore('permission', () => {
   // state
   const routes = ref<RouteRecordRaw[]>([]);
-  const addRoutes = ref<RouteRecordRaw[]>([]);
 
   // actions
   function setRoutes(newRoutes: RouteRecordRaw[]) {
-    addRoutes.value = newRoutes;
     routes.value = constantRoutes.concat(newRoutes);
   }
 
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index 67a21d35..7b15c521 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -10,41 +10,13 @@
   font-weight: 400 !important;
 }
 
-.el-upload {
-  input[type='file'] {
-    display: none !important;
-  }
-}
 
 .el-upload__input {
   display: none;
 }
 
-// dropdown
-.el-dropdown-menu {
-  a {
-    display: block;
-  }
-}
-
-// to fix el-date-picker css style
-.el-range-separator {
-  box-sizing: content-box;
-}
 
 // 选中行背景色值
 .el-table__body tr.current-row td {
   background-color: #e1f3d8b5 !important;
 }
-
-// card 的header统一高度
-.el-card__header {
-  height: 60px !important;
-}
-
-// 表格表头和表体未对齐
-.el-table__header col[name='gutter'] {
-  display: table-cell !important;
-}
-
-
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 83354c0d..c1aef6a7 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,8 +16,8 @@ html,body,#app{
   padding: 18px 0 0 10px;
   margin-bottom: 10px;
   border-radius: 5px;
-  border: 1px solid #ddd;
-  box-shadow: 6px 2px 6px #CCC;
+  border: 1px solid #eee;
+  box-shadow: 1px 1px 1px #eee;
 }
 
 svg{
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 3ca71684..7b428330 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -6,20 +6,6 @@
   }
 }
 
-@mixin scrollBar {
-  &::-webkit-scrollbar-track-piece {
-    background: #d3dce6;
-  }
-
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #99a9bf;
-    border-radius: 20px;
-  }
-}
 
 @mixin relative {
   position: relative;
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
new file mode 100644
index 00000000..51d1a497
--- /dev/null
+++ b/src/types/auto-imports.d.ts
@@ -0,0 +1,526 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveDirective: UnwrapRef<typeof import('vue')['resolveDirective']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
new file mode 100644
index 00000000..cd003ff1
--- /dev/null
+++ b/src/types/components.d.ts
@@ -0,0 +1,80 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
+    ElBadge: typeof import('element-plus/es')['ElBadge']
+    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']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    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']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    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']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    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']
+    GithubCorner: typeof import('./../components/GithubCorner/index.vue')['default']
+    Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
+    IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
+    IEpAddLocation: typeof import('~icons/ep/add-location')['default']
+    IEpAim: typeof import('~icons/ep/aim')['default']
+    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
+    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
+    IEpCircleCheckFilled: typeof import('~icons/ep/circle-check-filled')['default']
+    IEpClose: typeof import('~icons/ep/close')['default']
+    IEpDownload: typeof import('~icons/ep/download')['default']
+    IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpIcon: typeof import('~icons/ep/icon')['default']
+    IEpTop: typeof import('~icons/ep/top')['default']
+    LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
+    MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
+    Pagination: typeof import('./../components/Pagination/index.vue')['default']
+    RightPanel: typeof import('./../components/RightPanel/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Screenfull: typeof import('./../components/Screenfull/index.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']
+    ThemePicker: typeof import('./../components/ThemePicker/index.vue')['default']
+    WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}
diff --git a/types/env.d.ts b/src/types/env.d.ts
similarity index 100%
rename from types/env.d.ts
rename to src/types/env.d.ts
diff --git a/types/global.d.ts b/src/types/global.d.ts
similarity index 100%
rename from types/global.d.ts
rename to src/types/global.d.ts
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
index b95552a0..c081ede6 100644
--- a/src/utils/i18n.ts
+++ b/src/utils/i18n.ts
@@ -1,7 +1,7 @@
 // translate router.meta.title, be used in breadcrumb sidebar tagsview
 import i18n from '@/lang/index';
 
-export function generateTitle(title: any) {
+export function translateRouteTitleI18n(title: any) {
   // 判断是否存在国际化配置，如果没有原生返回
   const hasKey = i18n.global.te('route.' + title);
   if (hasKey) {
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index faf88b29..bf334cff 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -23,7 +23,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-user">
-            <svg-icon icon-class="uv" size="4em" />
+            <svg-icon icon-name="uv" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">访问数</div>
@@ -35,7 +35,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-message">
-            <svg-icon icon-class="message" size="4em" />
+            <svg-icon icon-name="message" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">消息数</div>
@@ -47,7 +47,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-money">
-            <svg-icon icon-class="money" size="4em" />
+            <svg-icon icon-name="money" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">收入金额</div>
@@ -58,7 +58,7 @@ import Team from './components/Team/index.vue';
       <el-col :xs="24" :sm="12" :lg="6" class="card-panel__col">
         <div class="card-panel">
           <div class="card-panel-icon-wrapper icon-shopping">
-            <svg-icon icon-class="shopping" size="4em" />
+            <svg-icon icon-name="shopping" size="4em" />
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">订单数</div>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index cc849bde..3dc6835c 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -15,7 +15,7 @@
 
       <el-form-item prop="username">
         <span class="svg-container">
-          <svg-icon icon-class="user" />
+          <svg-icon icon-name="user" />
         </span>
         <el-input
           ref="username"
@@ -35,7 +35,7 @@
       >
         <el-form-item prop="password">
           <span class="svg-container">
-            <svg-icon icon-class="password" />
+            <svg-icon icon-name="password" />
           </span>
           <el-input
             ref="passwordRef"
@@ -52,7 +52,7 @@
           />
           <span class="show-pwd" @click="showPwd">
             <svg-icon
-              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+              :icon-name="passwordType === 'password' ? 'eye' : 'eye-open'"
             />
           </span>
         </el-form-item>
diff --git a/src/views/system/dict/components/DictItem.vue b/src/views/system/dict/components/DictItem.vue
index e7513f06..72f75080 100644
--- a/src/views/system/dict/components/DictItem.vue
+++ b/src/views/system/dict/components/DictItem.vue
@@ -15,7 +15,7 @@ import {
   updateDictItem,
   deleteDictItems
 } from '@/api/dict';
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
+import { Search, Plus, Refresh, Delete } from '@element-plus/icons-vue';
 import { DictItem, DictItemForm, DictItemQuery } from '@/api/dict/types';
 
 const props = defineProps({
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index e6dfd200..43932253 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -29,7 +29,7 @@ const handleDictTypeClick = (row: any) => {
       <el-col :span="10" :xs="24">
         <el-card class="box-card">
           <template #header>
-            <svg-icon icon-class="dict" />
+            <svg-icon icon-name="dict" />
             字典类型
           </template>
           <dict-type @dictClick="handleDictTypeClick" />
@@ -39,7 +39,7 @@ const handleDictTypeClick = (row: any) => {
       <el-col :span="14" :xs="24">
         <el-card class="box-card">
           <template #header>
-            <svg-icon icon-class="dict_item" />
+            <svg-icon icon-name="dict_item" />
             <span style="margin: 0 5px">字典数据项</span>
             <el-tag type="success" v-if="typeCode" size="small">{{
               typeName
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index f00b0ef3..04799c10 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -40,7 +40,7 @@
         <el-table-column label="菜单名称">
           <template #default="scope">
             <svg-icon
-              :icon-class="
+              :icon-name="
                 scope.row.type === 'BUTTON' ? 'button' : scope.row.icon
               "
             />
@@ -121,6 +121,7 @@
         </el-table-column>
       </el-table>
     </el-card>
+
     <!-- dialog -->
     <el-dialog
       :title="dialog.title"
@@ -214,27 +215,8 @@
           prop="icon"
           v-if="formData.type !== 'BUTTON'"
         >
-          <el-popover
-            ref="popoverRef"
-            placement="bottom-start"
-            :width="570"
-            trigger="click"
-          >
-            <template #reference>
-              <el-input
-                v-model="formData.icon"
-                placeholder="点击选择图标"
-                readonly
-                @click="iconSelectVisible = true"
-              >
-                <template #prefix>
-                  <svg-icon :icon-class="formData.icon" />
-                </template>
-              </el-input>
-            </template>
-
-            <icon-select @selected="selected" />
-          </el-popover>
+          <!-- 图标选择器 -->
+          <icon-select v-model="formData.icon" />
         </el-form-item>
 
         <el-form-item label="跳转路由" v-if="formData.type == 'CATEGORY'">
@@ -271,8 +253,8 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, toRefs } from 'vue';
 
-import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
-import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
+import { Search, Plus, Refresh } from '@element-plus/icons-vue';
+import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
 
 import { MenuQuery, MenuForm, Menu } from '@/api/menu/types';
 // API 依赖
@@ -291,7 +273,6 @@ import IconSelect from '@/components/IconSelect/index.vue';
 const emit = defineEmits(['menuClick']);
 const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
-const popoverRef = ref(ElPopover);
 
 const state = reactive({
   loading: true,
@@ -339,7 +320,6 @@ const {
   formData,
   rules,
   menuOptions,
-  iconSelectVisible,
   cacheData
 } = toRefs(state);
 
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 094b4eff..0f5d8de9 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -292,7 +292,6 @@ onMounted(() => {
             >
               资源分配
             </el-button>
-
             <el-button
               type="primary"
               link
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ce1dec93..756db607 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -23,7 +23,7 @@ import {
   updateUser,
   updateUserStatus,
   updateUserPassword,
-  downloadTemplate,
+  downloadTemplateApi,
   exportUser,
   importUser
 } from '@/api/user';
@@ -353,8 +353,8 @@ function getGenderOptions() {
 /**
  * 下载导入模板
  */
-function handleDownloadTemplate() {
-  downloadTemplate().then((response: any) => {
+function downloadTemplate() {
+  downloadTemplateApi().then((response: any) => {
     const blob = new Blob([response.data], {
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
     });
@@ -520,46 +520,43 @@ onMounted(() => {
 
         <el-card shadow="never">
           <template #header>
-            <el-form-item style="float: left">
-              <el-button
-                type="success"
-                :icon="Plus"
-                @click="handleAdd"
-                v-hasPerm="['sys:user:add']"
-                >新增</el-button
-              >
-              <el-button
-                type="danger"
-                :icon="Delete"
-                :disabled="ids.length === 0"
-                @click="handleDelete"
-                v-hasPerm="['sys:user:delete']"
-                >删除</el-button
-              >
-            </el-form-item>
-            <el-form-item style="float: right">
-              <el-dropdown split-button style="margin-left: 12px">
-                导入
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item
-                      :icon="Download"
-                      @click="handleDownloadTemplate"
-                      >下载模板</el-dropdown-item
-                    >
-                    <el-dropdown-item :icon="Top" @click="showImportDialog"
-                      >导入数据</el-dropdown-item
-                    >
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-              <el-button
-                :icon="Download"
-                style="margin-left: 12px"
-                @click="handleExport"
-                >导出</el-button
-              >
-            </el-form-item>
+            <div class="flex justify-between">
+              <div>
+                <el-button
+                  type="success"
+                  :icon="Plus"
+                  @click="handleAdd"
+                  v-hasPerm="['sys:user:add']"
+                  >新增</el-button
+                >
+                <el-button
+                  type="danger"
+                  :icon="Delete"
+                  :disabled="ids.length === 0"
+                  @click="handleDelete"
+                  v-hasPerm="['sys:user:delete']"
+                  >删除</el-button
+                >
+              </div>
+              <div>
+                <el-dropdown split-button>
+                  导入
+                  <template #dropdown>
+                    <el-dropdown-menu>
+                      <el-dropdown-item @click="downloadTemplate">
+                        <i-ep-download />下载模板</el-dropdown-item
+                      >
+                      <el-dropdown-item @click="showImportDialog">
+                        <i-ep-top />导入数据</el-dropdown-item
+                      >
+                    </el-dropdown-menu>
+                  </template>
+                </el-dropdown>
+                <el-button class="ml-3" @click="handleExport"
+                  ><template #icon><i-ep-download /></template>导出</el-button
+                >
+              </div>
+            </div>
           </template>
 
           <el-table
diff --git a/tsconfig.json b/tsconfig.json
index 4f8945a1..0965e793 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,9 +21,9 @@
     "types": ["element-plus/global"],
     "typeRoots": [
       "./node_modules/@types/",
-      "./types"
+      "src/types"
     ] /* 指定多个文件夹，这些文件夹的作用类似于 './node_modules/@types'. */
   },
-  "include": ["src/**/*.ts", "src/**/*.vue", "types/**/*.d.ts"],
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/types/**/*.d.ts"],
   "exclude": ["node_modules", "dist", "**/*.js"]
 }
diff --git a/types/components.d.ts b/types/components.d.ts
deleted file mode 100644
index 94e8b829..00000000
--- a/types/components.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 全局组件类型声明
-import Pagination from '@/components/Pagination/index.vue';
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    Pagination: typeof Pagination;
-  }
-}
-export {};