三页面重设计与移动端适配;接入 PWA 与构建分包

src/components/objectstorage/ObjectViewerModal.vue

@@ -19,6 +19,7 @@ import TextEditPane from '@/components/objectstorage/viewer/TextEditPane.vue'
 import TextPreviewPane from '@/components/objectstorage/viewer/TextPreviewPane.vue'
 import { fmtBytes, fmtTime } from '@/composables/useFormat'
 import { useAsync } from '@/composables/useAsync'
+import { useIsMobile } from '@/composables/useIsMobile'
 import { useToast } from '@/composables/useToast'
 import { useScopeStore } from '@/stores/scope'
 
@@ -48,6 +49,14 @@ const emit = defineEmits<{
 
 const message = useToast()
 
+/** 移动端全屏(复用 main.css 的 .form-modal-mobile 全局全屏规则) */
+const isMobile = useIsMobile()
+const modalStyle = computed(() =>
+  isMobile.value
+    ? { width: '100vw', height: '100dvh', maxWidth: '100vw', margin: '0', borderRadius: '0' }
+    : { width: '1080px', maxWidth: 'calc(100vw - 24px)' },
+)
+
 /** 文本预览/编辑体积上限;更大的文本请下载查看 */
 const TEXT_MAX = 1024 * 1024
 /** 图片与 office/pdf 的中转上限(与后端 20MB 限制一致) */
@@ -346,7 +355,8 @@ const kvRows = computed(() => {
     :show="show"
     preset="card"
     :mask-closable="mode !== 'edit'"
-    :style="{ width: '1080px', maxWidth: 'calc(100vw - 24px)' }"
+    :style="modalStyle"
+    :class="isMobile ? 'form-modal-mobile' : ''"
     @update:show="emit('update:show', $event)"
   >
     <template #header>
@@ -362,10 +372,10 @@ const kvRows = computed(() => {
       </span>
     </template>
 
-    <div class="flex flex-col gap-4 md:flex-row">
-      <!-- 左:内容区 -->
+    <div class="flex min-h-0 flex-col gap-4 md:flex-row max-md:flex-1 max-md:overflow-y-auto">
+      <!-- 左:内容区(移动端全屏形态下压缩预览高度,信息与操作随外层滚动) -->
       <div
-        class="flex h-[65vh] min-w-0 flex-1 flex-col rounded-lg border border-line-soft bg-wash/50 p-3"
+        class="flex h-[65vh] min-w-0 flex-1 flex-col rounded-lg border border-line-soft bg-wash/50 p-3 max-md:h-auto max-md:min-h-[45dvh] max-md:flex-none"
       >
         <div
           v-if="detail.loading.value || loading"