From 2fe835d8d2d07aabb29be7dc0febda5eaef6294c Mon Sep 17 00:00:00 2001
From: Orion <orionc1226@gmail.com>
Date: Tue, 21 Jul 2026 17:02:09 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20=E8=A1=A5=E5=85=85=E5=88=86?=
 =?UTF-8?q?=E5=89=B2=E4=BD=8E=E9=A2=91=E7=BB=84=E4=BB=B6=E4=B8=8E=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F=E6=B8=B2=E6=9F=93=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根据全站性能审计继续降低低频组件请求、重复 DOM 与重复缓存 URL 成本。

- 二维码组件改为详情弹窗实际渲染时异步加载
- 文件管理仅挂载当前断点对应的移动列表或桌面表格
- Vite 静态与动态资源统一使用 /theme-assets/ 前缀
- 已通过架构检查、类型检查、ESLint 和生产构建
---
 src/components/common/FileDetailModal.vue       |  5 +++--
 src/components/common/SentRecordDetailModal.vue |  5 +++--
 src/views/manage/FileManageView.vue             | 15 +++++++++++++--
 vite.config.ts                                  |  1 +
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/common/FileDetailModal.vue b/src/components/common/FileDetailModal.vue
index d4b4d81..9770504 100644
--- a/src/components/common/FileDetailModal.vue
+++ b/src/components/common/FileDetailModal.vue
@@ -108,10 +108,10 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
+import { defineAsyncComponent, inject } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { FileIcon, CalendarIcon, HardDriveIcon, DownloadIcon } from 'lucide-vue-next'
-import QRCode from 'qrcode.vue'
+
 import type { ReceivedFileRecord } from '@/types'
 import { buildDownloadUrl, buildReceivedRecordQrValue } from '@/utils/share-url'
 
@@ -129,6 +129,7 @@ defineProps<Props>()
 defineEmits<Emits>()
 const { t } = useI18n()
 const isDarkMode = inject('isDarkMode')
+const QRCode = defineAsyncComponent(() => import('qrcode.vue'))
 
 const getDownloadUrl = (record: ReceivedFileRecord) => {
   return buildDownloadUrl(record.downloadUrl)
diff --git a/src/components/common/SentRecordDetailModal.vue b/src/components/common/SentRecordDetailModal.vue
index 178f258..5354cf8 100644
--- a/src/components/common/SentRecordDetailModal.vue
+++ b/src/components/common/SentRecordDetailModal.vue
@@ -168,7 +168,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, defineAsyncComponent, inject } from 'vue'
 import {
   ClipboardCopyIcon,
   ClockIcon,
@@ -177,7 +177,7 @@ import {
   TerminalIcon,
   XIcon
 } from 'lucide-vue-next'
-import QRCode from 'qrcode.vue'
+
 import { useI18n } from 'vue-i18n'
 import type { SentFileRecord } from '@/types'
 
@@ -195,6 +195,7 @@ defineEmits<{
 
 const { t } = useI18n()
 const isDarkMode = inject('isDarkMode')
+const QRCode = defineAsyncComponent(() => import('qrcode.vue'))
 const qrValue = computed(() => (props.record ? props.getQRCodeValue(props.record) : ''))
 </script>
 
diff --git a/src/views/manage/FileManageView.vue b/src/views/manage/FileManageView.vue
index a30175e..4afe1c7 100644
--- a/src/views/manage/FileManageView.vue
+++ b/src/views/manage/FileManageView.vue
@@ -262,6 +262,7 @@
     </section>
 
     <section
+      v-if="isMobileViewport"
       class="theme-2026-card mb-5 overflow-hidden rounded-[24px] shadow-md md:hidden"
     >
       <div class="flex items-center justify-between gap-3 border-b px-4 py-3" :class="[isDarkMode ? 'border-gray-700' : 'border-[#d9e4e6]']">
@@ -463,7 +464,7 @@
       </aside>
     </Transition>
 
-    <div class="hidden md:block">
+    <div v-if="!isMobileViewport" class="hidden md:block">
     <DataTable :title="t('fileManage.allFiles')" :headers="fileTableHeaders" table-class="min-w-[1120px]">
       <template #actions>
         <BaseButton variant="secondary" :loading="isLoading" @click="refreshFileList">
@@ -1663,7 +1664,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, type Component } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import type {
@@ -1810,6 +1811,11 @@ const {
 
 const isFilterPanelOpen = ref(false)
 const showMobilePolicyActions = ref(false)
+const mobileMediaQuery = window.matchMedia('(max-width: 767px)')
+const isMobileViewport = ref(mobileMediaQuery.matches)
+const syncMobileViewport = (event: MediaQueryListEvent) => {
+  isMobileViewport.value = event.matches
+}
 const isLifecycleExpanded = ref(false)
 const visibleDetailTimeline = computed(() => {
   const rows = selectedFileDetail.value?.detailTimeline || []
@@ -2321,11 +2327,16 @@ watch(
 )
 
 onMounted(() => {
+  mobileMediaQuery.addEventListener('change', syncMobileViewport)
   params.value.health = getRouteHealthFilter()
   void loadViewPresets()
   void loadFiles()
   void loadHistoryFiles()
 })
+
+onUnmounted(() => {
+  mobileMediaQuery.removeEventListener('change', syncMobileViewport)
+})
 </script>
 
 <style scoped>
diff --git a/vite.config.ts b/vite.config.ts
index 058b471..6767d41 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import tailwindcss from 'tailwindcss'
 import autoprefixer from 'autoprefixer'
 export default defineConfig({
+  base: '/theme-assets/',
   plugins: [vue(), vueJsx()],
   resolve: {
     alias: {