diff --git a/src/components/Chart/index.vue b/src/components/Chart/index.vue
index ea990fc4af903f9d6e9c51d6589f3d1628117425..f1c463f9f61bb588dae5a4164f4e4beef20e56c4 100644
--- a/src/components/Chart/index.vue
+++ b/src/components/Chart/index.vue
@@ -4,7 +4,6 @@
 
 <script lang="ts" setup>
 import { registerMap } from 'echarts/core'
-import { ref } from 'vue'
 import VCharts from 'vue-echarts'
 import worldMap from './world.json'
 import chinaMap from './china.json'
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 92786f5649d9237eee7baba84e41fafc167fb7d3..2c557ad6873b846c916de4b2d2eaa9b97e0ef3ef 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -6,8 +6,8 @@
       size="medium"
       :type="appStore.tabMode"
       :active-key="route.path"
-      @tab-click="handleTabClick($event as string)"
-      @delete="tabsStore.closeCurrent($event as string)"
+      @tab-click="handleTabClick"
+      @delete="tabsStore.closeCurrent"
     >
       <a-tab-pane
         v-for="item of tabsStore.tabList"
@@ -15,25 +15,71 @@
         :title="(item.meta?.title as string)"
         :closable="Boolean(!item.meta?.affix)"
       >
+        <template #title>
+          <a-dropdown trigger="contextMenu">
+            <span @contextmenu="(e) => handleContextMenu(e, item.path)">
+              {{ item.meta?.title }}
+            </span>
+
+            <template #content>
+              <a-doption @click="tabsStore.closeCurrent(currentContextPath)">
+                <template #icon>
+                  <icon-close />
+                </template>
+                <template #default>关闭当前</template>
+              </a-doption>
+              <a-doption @click="tabsStore.closeRight(currentContextPath)">
+                <template #icon>
+                  <icon-close />
+                </template>
+                <template #default>关闭右侧</template>
+              </a-doption>
+              <a-doption @click="tabsStore.closeOther(currentContextPath)">
+                <template #icon>
+                  <icon-eraser />
+                </template>
+                <template #default>关闭其他</template>
+              </a-doption>
+              <a-doption @click="tabsStore.closeAll">
+                <template #icon>
+                  <icon-minus />
+                </template>
+                <template #default>关闭全部</template>
+              </a-doption>
+            </template>
+          </a-dropdown>
+        </template>
       </a-tab-pane>
       <template #extra>
         <a-dropdown trigger="hover">
-          <MagicIcon class="gi_mr"></MagicIcon>
+          <a-button type="text">
+            <template #icon>
+              <icon-more-vertical />
+            </template>
+          </a-button>
           <template #content>
             <a-doption @click="tabsStore.closeCurrent(route.path)">
-              <template #icon><icon-close /></template>
+              <template #icon>
+                <icon-close />
+              </template>
               <template #default>关闭当前</template>
             </a-doption>
             <a-doption @click="tabsStore.closeRight(route.path)">
-              <template #icon><icon-close /></template>
+              <template #icon>
+                <icon-close />
+              </template>
               <template #default>关闭右侧</template>
             </a-doption>
             <a-doption @click="tabsStore.closeOther(route.path)">
-              <template #icon><icon-eraser /></template>
+              <template #icon>
+                <icon-eraser />
+              </template>
               <template #default>关闭其他</template>
             </a-doption>
             <a-doption @click="tabsStore.closeAll">
-              <template #icon><icon-minus /></template>
+              <template #icon>
+                <icon-minus />
+              </template>
               <template #default>关闭全部</template>
             </a-doption>
           </template>
@@ -44,31 +90,32 @@
 </template>
 
 <script setup lang="ts">
+import { ref, toRaw, watch } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
-import MagicIcon from './MagicIcon.vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useAppStore, useTabsStore } from '@/stores'
 
 defineOptions({ name: 'Tabs' })
+
 const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
 const tabsStore = useTabsStore()
 
-// 重置, 同时把 affix: true 的路由筛选出来
+// 菜单获取的路径
+const currentContextPath = ref('')
+
+// Initialize tabs
 tabsStore.init()
 
-// 路由发生改变触发
 const handleRouteChange = () => {
   const item = { ...route } as unknown as RouteLocationNormalized
   tabsStore.addTabItem(toRaw(item))
   tabsStore.addCacheItem(toRaw(item))
-  // console.log('路由对象', toRaw(item))
-  // console.log('tagList', toRaw(tabsStore.tabList))
-  // console.log('cacheList', toRaw(tabsStore.cacheList))
 }
+
 handleRouteChange()
 
-// 监听路由变化
 watch(
   () => route.fullPath,
   () => {
@@ -76,27 +123,33 @@ watch(
   },
 )
 
-// 点击页签
-const handleTabClick = (key: string) => {
+const handleTabClick = (key: string | number) => {
   const obj = tabsStore.tabList.find((i) => i.path === key)
-  obj ? router.push(obj.fullPath || obj.path) : router.push(key)
+  obj ? router.push(obj.fullPath || obj.path) : router.push(String(key))
+}
+
+const handleContextMenu = (e: MouseEvent, path: string) => {
+  if (!path) return
+  e.preventDefault()
+  currentContextPath.value = path
 }
 </script>
 
 <style lang="scss" scoped>
 :deep(.arco-tabs-nav-tab) {
   .arco-tabs-tab {
-    border-bottom-color: transparent !important;
     svg {
       width: 0;
       transition: all 0.15s;
     }
+
     &:hover {
       svg {
         width: 1em;
       }
     }
   }
+
   &:not(.arco-tabs-nav-tab-scroll) {
     .arco-tabs-tab:first-child {
       border-left: 0;
@@ -111,5 +164,6 @@ const handleTabClick = (key: string) => {
 .tabs {
   padding-top: 5px;
   background-color: var(--color-bg-1);
+  position: relative;
 }
 </style>
diff --git a/src/stores/modules/tabs.ts b/src/stores/modules/tabs.ts
index 0ae9f05ef0b1822ff13af26f100fa39235fae3c9..8533bce17b648cb788404881bb2531e1d3f6f5ed 100644
--- a/src/stores/modules/tabs.ts
+++ b/src/stores/modules/tabs.ts
@@ -68,10 +68,10 @@ const storeSetup = () => {
   }
 
   // 关闭当前
-  const closeCurrent = (path: string) => {
+  const closeCurrent = (path: string | number) => {
     const item = tabList.value.find((i) => i.path === path)
     item?.name && deleteCacheItem(item.name)
-    deleteTabItem(path)
+    deleteTabItem(String(path))
   }
 
   // 关闭其他
diff --git a/src/views/dashboard/analysis/components/AccessTimeslot.vue b/src/views/dashboard/analysis/components/AccessTimeslot.vue
index 7fa2ee67c9342db08ef95ce5845157bcb2e2ac23..90acb5099bee705be3c3da264a78f0b0255d3d90 100644
--- a/src/views/dashboard/analysis/components/AccessTimeslot.vue
+++ b/src/views/dashboard/analysis/components/AccessTimeslot.vue
@@ -12,6 +12,7 @@ import { useChart } from '@/hooks'
 import { type DashboardChartCommonResp, getAnalysisTimeslot as getData } from '@/apis/common'
 import handleIcon from '@/assets/icons/slider.svg'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 // 提示框
 const tooltipItemsHtmlString = (items) => {
   return items
diff --git a/src/views/dashboard/analysis/components/Browser.vue b/src/views/dashboard/analysis/components/Browser.vue
index 0339481ece50b9064efa0efdcf65919f3d8dbcff..1719c07002df4fdedfb7cd44c26df4ab00eb8477 100644
--- a/src/views/dashboard/analysis/components/Browser.vue
+++ b/src/views/dashboard/analysis/components/Browser.vue
@@ -13,6 +13,7 @@ import type { EChartsOption } from 'echarts'
 import { useChart } from '@/hooks'
 import { type DashboardChartCommonResp, getAnalysisBrowser as getData } from '@/apis/common'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 const xAxis = ref<string[]>([])
 const chartData = ref([])
 const { chartOption } = useChart((isDark: EChartsOption) => {
diff --git a/src/views/dashboard/analysis/components/DataOverview/Demo1.vue b/src/views/dashboard/analysis/components/DataOverview/Demo1.vue
index dfe62423fab11df77a8a220cd5bd99ddaa892c50..4379217598a205bc640ef1ced6d59cba10f69d6a 100644
--- a/src/views/dashboard/analysis/components/DataOverview/Demo1.vue
+++ b/src/views/dashboard/analysis/components/DataOverview/Demo1.vue
@@ -42,6 +42,7 @@ import { computed } from 'vue'
 import { useChart } from '@/hooks'
 import { useAppStore } from '@/stores'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 const appStore = useAppStore()
 const isDark = computed(() => appStore.theme === 'dark')
 
diff --git a/src/views/dashboard/analysis/components/DataOverview/Demo2.vue b/src/views/dashboard/analysis/components/DataOverview/Demo2.vue
index e6bd46170596f35fa5ea0752f2baf724055c26ef..b1218d809e905ca320f3eb9a2b20af3774dff2d1 100644
--- a/src/views/dashboard/analysis/components/DataOverview/Demo2.vue
+++ b/src/views/dashboard/analysis/components/DataOverview/Demo2.vue
@@ -42,6 +42,7 @@ import { computed } from 'vue'
 import { useChart } from '@/hooks'
 import { useAppStore } from '@/stores'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 const appStore = useAppStore()
 const isDark = computed(() => appStore.theme === 'dark')
 
diff --git a/src/views/dashboard/analysis/components/DataOverview/Ip.vue b/src/views/dashboard/analysis/components/DataOverview/Ip.vue
index 5c271f66e7d313ee4597bfd85cb92fe5acc4bcb9..462a38c8c4c042d506ecf5f9c39c8fab64844320 100644
--- a/src/views/dashboard/analysis/components/DataOverview/Ip.vue
+++ b/src/views/dashboard/analysis/components/DataOverview/Ip.vue
@@ -43,6 +43,7 @@ import { useChart } from '@/hooks'
 import { useAppStore } from '@/stores'
 import { type DashboardChartCommonResp, getDashboardOverviewIp as getData } from '@/apis'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 const appStore = useAppStore()
 const isDark = computed(() => appStore.theme === 'dark')
 
diff --git a/src/views/dashboard/analysis/components/DataOverview/Pv.vue b/src/views/dashboard/analysis/components/DataOverview/Pv.vue
index 5ee7dfa523be96413202f2d3d1fc619b8f9f4fd6..4b55d9488a16e22d073e8aaad4b7693e4d69e5c1 100644
--- a/src/views/dashboard/analysis/components/DataOverview/Pv.vue
+++ b/src/views/dashboard/analysis/components/DataOverview/Pv.vue
@@ -45,7 +45,7 @@ import { type DashboardChartCommonResp, getDashboardOverviewPv as getData } from
 
 const appStore = useAppStore()
 const isDark = computed(() => appStore.theme === 'dark')
-
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 const count = ref(0)
 const today = ref(0)
 const growth = ref(0)
diff --git a/src/views/dashboard/analysis/components/Geo.vue b/src/views/dashboard/analysis/components/Geo.vue
index 39a4494104eb4a8206dc2b94f672b96e08075938..d95a7dba13218e7c0d33c786249613330b920b42 100644
--- a/src/views/dashboard/analysis/components/Geo.vue
+++ b/src/views/dashboard/analysis/components/Geo.vue
@@ -30,6 +30,8 @@ import type { EChartsOption } from 'echarts'
 import { getAnalysisGeo as getData } from '@/apis/common/dashboard'
 import { useChart } from '@/hooks'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
+
 const chartRef = useTemplateRef('chartRef')
 const chartData = ref([])
 const totalValue = ref(0)
diff --git a/src/views/dashboard/analysis/components/Module.vue b/src/views/dashboard/analysis/components/Module.vue
index cb46078ac66f3bedce6ef7a17a6b8c8f93790836..40a58a3b29c919f7bf93d08576d8c51db477ab1e 100644
--- a/src/views/dashboard/analysis/components/Module.vue
+++ b/src/views/dashboard/analysis/components/Module.vue
@@ -13,6 +13,8 @@ import type { EChartsOption } from 'echarts'
 import { useChart } from '@/hooks'
 import { type DashboardChartCommonResp, getAnalysisModule as getData } from '@/apis/common'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
+
 const yAxis = ref<string[]>([])
 const chartData = ref([])
 const { chartOption } = useChart((isDark: EChartsOption) => {
diff --git a/src/views/dashboard/analysis/components/Os.vue b/src/views/dashboard/analysis/components/Os.vue
index c4de034f4efa2898982f55f5377dc021348a6eaf..8fbd9d9133373bfe180a5ec8d6527081c58f2276 100644
--- a/src/views/dashboard/analysis/components/Os.vue
+++ b/src/views/dashboard/analysis/components/Os.vue
@@ -13,6 +13,7 @@ import type { EChartsOption } from 'echarts'
 import { useChart } from '@/hooks'
 import { type DashboardChartCommonResp, getAnalysisOs as getData } from '@/apis/common'
 
+const Chart = defineAsyncComponent(() => import('@/components/Chart/index.vue'))
 const xAxis = ref<string[]>([])
 const chartData = ref([])
 const { chartOption } = useChart((isDark: EChartsOption) => {
diff --git a/src/views/dashboard/analysis/index.vue b/src/views/dashboard/analysis/index.vue
index f949815c1efc3039a4add2e0664caa36b0d0569d..c3f80f2e1d6679a0622ef76d6a7d71cc6352329d 100644
--- a/src/views/dashboard/analysis/index.vue
+++ b/src/views/dashboard/analysis/index.vue
@@ -35,9 +35,10 @@ import Geo from './components/Geo.vue'
 import Os from './components/Os.vue'
 import Browser from './components/Browser.vue'
 import Module from './components/Module.vue'
-import AccessTimeslot from './components/AccessTimeslot.vue'
+import AccessTimeslot from '@/views/dashboard/analysis/components/AccessTimeslot.vue'
 
 defineOptions({ name: 'Analysis' })
+// const AccessTimeslot = defineAsyncComponent(() => import('./components/AccessTimeslot.vue'))
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/views/system/file/main/FileMain/FileGrid.vue b/src/views/system/file/main/FileMain/FileGrid.vue
index 1b05b4158b4c1e435727a0b2e5a2074af4a73215..a0ad60004f59c5fff6c5c22076e033a48867b620 100644
--- a/src/views/system/file/main/FileMain/FileGrid.vue
+++ b/src/views/system/file/main/FileMain/FileGrid.vue
@@ -40,16 +40,9 @@
 </template>
 
 <script setup lang="ts">
-import FileImage from './FileImage.vue'
 import FileRightMenu from './FileRightMenu.vue'
 import type { FileItem } from '@/apis/system'
 
-interface Props {
-  data?: FileItem[]
-  selectedFileIds?: string[]
-  isBatchMode?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
   data: () => [], // 文件数据
   selectedFileIds: () => [], // 批量模式下选中的文件id数组
@@ -62,6 +55,14 @@ const emit = defineEmits<{
   (e: 'right-menu-click', mode: string, item: FileItem): void
 }>()
 
+const FileImage = defineAsyncComponent(() => import('./FileImage.vue'))
+
+interface Props {
+  data?: FileItem[]
+  selectedFileIds?: string[]
+  isBatchMode?: boolean
+}
+
 // 文件名称带后缀
 const getFileName = (item: FileItem) => {
   return `${item.name}${item.extension ? `.${item.extension}` : ''}`
diff --git a/src/views/system/file/main/FileMain/FileList.vue b/src/views/system/file/main/FileMain/FileList.vue
index 7691ad5badf09206196f1b32c3fab024d4f29a6a..01f3b80dfa38cc302b1be08626c58f95bd81872a 100644
--- a/src/views/system/file/main/FileMain/FileList.vue
+++ b/src/views/system/file/main/FileMain/FileList.vue
@@ -65,17 +65,10 @@
 
 <script setup lang="ts">
 import type { TableInstance, TableRowSelection } from '@arco-design/web-vue'
-import FileImage from './FileImage.vue'
 import FileRightMenu from './FileRightMenu.vue'
 import type { FileItem } from '@/apis/system'
 import { formatFileSize } from '@/utils'
 
-interface Props {
-  data?: FileItem[]
-  selectedFileIds?: string[]
-  isBatchMode?: boolean
-}
-
 const props = withDefaults(defineProps<Props>(), {
   data: () => [], // 文件数据
   selectedFileIds: () => [],
@@ -88,6 +81,14 @@ const emit = defineEmits<{
   (e: 'right-menu-click', mode: string, item: FileItem): void
 }>()
 
+const FileImage = defineAsyncComponent(() => import('./FileImage.vue'))
+
+interface Props {
+  data?: FileItem[]
+  selectedFileIds?: string[]
+  isBatchMode?: boolean
+}
+
 // 文件名称带后缀
 const getFileName = (item: FileItem) => {
   return `${item.name}${item.extension ? `.${item.extension}` : ''}`
diff --git a/src/views/system/file/main/FileMain/index.vue b/src/views/system/file/main/FileMain/index.vue
index 9f28e99043818c0a507e04a1a53287d2fdac9ffa..4f66d2982b43845d136665b420c4256ff9603aa6 100644
--- a/src/views/system/file/main/FileMain/index.vue
+++ b/src/views/system/file/main/FileMain/index.vue
@@ -99,9 +99,11 @@ import { type FileItem, type FileQuery, deleteFile, listFile, uploadFile } from
 import { ImageTypes, OfficeTypes } from '@/constant/file'
 import 'viewerjs/dist/viewer.css'
 import { downloadByUrl } from '@/utils/downloadFile'
-import FilePreview from '@/components/FilePreview/index.vue'
+
 import type { ExcelConfig } from '@/components/FilePreview/type'
 
+const FilePreview = defineAsyncComponent(() => import('@/components/FilePreview/index.vue'))
+
 const FileList = defineAsyncComponent(() => import('./FileList.vue'))
 const route = useRoute()
 const { mode, selectedFileIds, toggleMode, addSelectedFileItem } = useFileManage()
diff --git a/src/views/tool/generator/index.vue b/src/views/tool/generator/index.vue
index abf5d59aae11936151ab1f257bab0347cf1c647b..aaaa00a2ad4d90547bdb536070eb1523ab53a39c 100644
--- a/src/views/tool/generator/index.vue
+++ b/src/views/tool/generator/index.vue
@@ -42,14 +42,14 @@
 
 <script setup lang="ts">
 import GenConfigDrawer from './GenConfigDrawer.vue'
-import GenPreviewModal from './GenPreviewModal.vue'
+
 import { generate, listGenerator } from '@/apis/tool'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 
 defineOptions({ name: 'Generator' })
-
+const GenPreviewModal = defineAsyncComponent(() => import('./GenPreviewModal.vue'))
 const queryForm = reactive({
   tableName: undefined,
   sort: ['createTime,desc'],