perf: 文件管理、分析页、代码生成等部分组件调整为异步加载

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'

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

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) => {

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')
 

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')
 

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')
 

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)

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)

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) => {

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) => {

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>

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}` : ''}`

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}` : ''}`

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()

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'],