af-mobile-client-vue3 1.6.51 → 1.6.52

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "af-mobile-client-vue3",
   "type": "module",
-  "version": "1.6.51",
+  "version": "1.6.52",
   "packageManager": "pnpm@10.13.1",
   "description": "Vue + Vite component lib",
   "engines": {

package/src/components/data/FilePreview/FilePreviewDialog.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import type { FilePreviewInitOptions } from './index.vue'
+/**
+ * 文件预览弹窗组件
+ * 支持两种展示形式，通过 mode prop 控制：
+ *  - drawer（默认）：从底部滑出的抽屉，占屏幕 92% 高度
+ *  - dialog：居中弹窗，固定宽高
+ *
+ * 底部操作栏（仅通过此组件打开时显示）：
+ *  - 下载
+ *  - 用其他应用打开（仅 Flutter 环境，调用 openFileWithApp 方式二：传 url+name）
+ *
+ * 用法：
+ *   <FilePreviewDialog ref="dialogRef" mode="dialog" @close="onClose" />
+ *   dialogRef.value.open({ path: '/resource/...', name: '文件名.docx' })
+ */
+import { detectEnvironment } from '@af-mobile-client-vue3/utils/environment'
+import { downloadAttachment, openFileWithApp } from '@af-mobile-client-vue3/utils/fileDownload'
+import { Popup as VanPopup } from 'vant'
+import { computed, ref } from 'vue'
+import FilePreview from './index.vue'
+
+const props = withDefaults(defineProps<{
+  /** 展示形式：drawer 底部抽屉（默认）| dialog 居中弹窗 */
+  mode?: 'drawer' | 'dialog'
+}>(), {
+  mode: 'drawer',
+})
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const visible = ref(false)
+const fileName = ref('')
+const fileUrl = ref('')
+const previewRef = ref<InstanceType<typeof FilePreview> | null>(null)
+const initOptions = ref<FilePreviewInitOptions | null>(null)
+const loadingKey = ref<string | null>(null) // 当前正在执行的操作 key，null 表示空闲
+
+const isApp = computed(() => detectEnvironment().isApp)
+
+/** 操作按钮配置，后续新增按钮只需在此追加 */
+interface ActionItem {
+  key: string
+  label: string
+  /** 仅在特定环境显示，不传则始终显示 */
+  show?: () => boolean
+  handler: () => Promise<void> | void
+}
+
+const actions = computed<ActionItem[]>(() => [
+  {
+    key: 'download',
+    label: '下载',
+    handler: handleDownload,
+  },
+  {
+    key: 'openWithApp',
+    label: '用其他应用打开',
+    // 仅 Flutter App 环境显示
+    show: () => isApp.value,
+    handler: handleOpenWithApp,
+  },
+])
+
+/** 过滤出当前环境应显示的按钮 */
+const visibleActions = computed(() =>
+  actions.value.filter(a => !a.show || a.show()),
+)
+
+function open(options: FilePreviewInitOptions) {
+  fileName.value = options.name || options.path.split('/').pop()?.split('?')[0] || '文件预览'
+  fileUrl.value = options.path
+  initOptions.value = options
+  visible.value = true
+}
+
+function onOpened() {
+  if (initOptions.value)
+    previewRef.value?.init(initOptions.value)
+}
+
+function handleClose() {
+  visible.value = false
+  emit('close')
+}
+
+/** 下载文件 */
+async function handleDownload() {
+  await downloadAttachment({ url: fileUrl.value, name: fileName.value })
+}
+
+/**
+ * 用其他应用打开（方式二：传 url+name，Flutter 端自动下载后调起系统分享面板）
+ */
+function handleOpenWithApp() {
+  openFileWithApp(fileUrl.value, fileName.value)
+}
+
+/** 执行操作按钮，防重复点击 */
+async function runAction(action: ActionItem) {
+  if (loadingKey.value)
+    return
+  loadingKey.value = action.key
+  try {
+    await action.handler()
+  }
+  finally {
+    loadingKey.value = null
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <VanPopup
+    v-model:show="visible"
+    :position="mode === 'drawer' ? 'bottom' : 'center'"
+    :style="mode === 'drawer'
+      ? { height: '92vh' }
+      : { width: '90vw', height: '80vh', borderRadius: '12px' }"
+    :round="mode === 'drawer'"
+    @opened="onOpened"
+  >
+    <div class="dialog-root">
+      <!-- 顶部标题栏 -->
+      <div class="dialog-header" :class="{ 'dialog-header--center': mode === 'dialog' }">
+        <span class="dialog-title" :title="fileName">{{ fileName }}</span>
+        <button class="dialog-close" @click="handleClose">
+          ✕
+        </button>
+      </div>
+
+      <!-- 预览区域 -->
+      <div class="dialog-body">
+        <FilePreview ref="previewRef" class="dialog-preview" />
+      </div>
+
+      <!-- 底部操作栏 -->
+      <div class="dialog-actions">
+        <button
+          v-for="action in visibleActions"
+          :key="action.key"
+          class="action-btn"
+          :class="`action-btn--${action.key}`"
+          :disabled="!!loadingKey"
+          @pointerdown.stop="runAction(action)"
+        >
+          {{ loadingKey === action.key ? '处理中...' : action.label }}
+        </button>
+      </div>
+    </div>
+  </VanPopup>
+</template>
+
+<style scoped>
+.dialog-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  height: 48px;
+  background: #1677ff;
+  flex-shrink: 0;
+  border-radius: 16px 16px 0 0;
+}
+
+.dialog-header--center {
+  border-radius: 12px 12px 0 0;
+}
+
+.dialog-title {
+  flex: 1;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 12px;
+}
+
+.dialog-close {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.dialog-body {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.dialog-preview {
+  flex: 1;
+  height: 100%;
+}
+
+/* 底部操作栏：按钮数量自适应 */
+.dialog-actions {
+  display: flex;
+  gap: 10px;
+  padding: 10px 16px;
+  padding-bottom: calc(10px + env(safe-area-inset-bottom));
+  border-top: 1px solid #f0f0f0;
+  flex-shrink: 0;
+  background: #fff;
+}
+
+.action-btn {
+  flex: 1;
+  height: 40px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+}
+
+/* 下载：主色蓝 */
+.action-btn--download {
+  background: #1677ff;
+  color: #fff;
+}
+
+/* 用其他应用打开：次级灰白 */
+.action-btn--openWithApp {
+  background: #f5f5f5;
+  color: #333;
+  border: 1px solid #e0e0e0;
+}
+</style>

package/src/components/data/FilePreview/components/OfficePreview.vue

@@ -39,13 +39,14 @@ const VueOfficeExcel = defineAsyncComponent(async () => {
     class="office-viewer"
     @error="emit('error')"
   />
-  <!-- docx / doc 共用 docx 渲染器；.doc 若解析失败会触发 error 降级到 kk -->
-  <VueOfficeDocx
-    v-else-if="kind === 'docx' || kind === 'doc'"
-    :src="src"
-    class="office-viewer"
-    @error="emit('error')"
-  />
+  <!-- docx 单独用缩放容器，整体缩小至 85% 以适配移动端屏幕 -->
+  <div v-else-if="kind === 'docx' || kind === 'doc'" class="docx-scale-wrapper">
+    <VueOfficeDocx
+      :src="src"
+      class="office-viewer docx-scaled"
+      @error="emit('error')"
+    />
+  </div>
   <!-- xlsx / xls 共用 excel 渲染器 -->
   <VueOfficeExcel
     v-else-if="kind === 'xlsx' || kind === 'xls'"
@@ -62,4 +63,20 @@ const VueOfficeExcel = defineAsyncComponent(async () => {
   min-height: 200px;
   overflow: auto;
 }
+
+/* docx 缩放容器：裁掉 scale 产生的右侧和底部留白 */
+.docx-scale-wrapper {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}
+
+/* 整体缩放 85%，transform-origin 从左上角开始，保持左对齐 */
+.docx-scaled {
+  transform: scale(0.7);
+  transform-origin: top left;
+  /* scale 不影响布局，需手动补偿宽度和高度 */
+  width: calc(100% / 0.7);
+  min-height: calc(100% / 0.7);
+}
 </style>

package/src/components/data/FilePreview/index.vue

@@ -5,12 +5,10 @@
  * 渲染策略：
  *  1. image / video / audio  →  MediaPreview（原生标签）
  *  2. text                   →  TextPreview（<pre>）
- *  3. pdf / docx / doc / xlsx / xls  →  OfficePreview（@vue-office）
- *     └─ @vue-office 渲染失败  →  自动降级到 KkPreview（kkFileView iframe）
- *  4. doc 旧格式 / unsupported  →  直接走 KkPreview
+ *  3. pdf / docx / xlsx      →  OfficePreview（@vue-office），失败自动降级到 KkPreview
+ *  4. doc / xls / unsupported  →  直接走 KkPreview
  */
 import type { PreviewFileKind } from '@af-mobile-client-vue3/utils/fileType'
-import { downloadAttachment } from '@af-mobile-client-vue3/utils/fileDownload'
 import { getPreviewFileKind } from '@af-mobile-client-vue3/utils/fileType'
 import {
   fetchResourceArrayBuffer,
@@ -18,7 +16,7 @@ import {
   getPreviewPath,
   resolveResourceUrl,
 } from '@af-mobile-client-vue3/utils/resourceUrl'
-import { Button as VanButton, Empty as VanEmpty, Loading as VanLoading } from 'vant'
+import { Empty as VanEmpty, Loading as VanLoading } from 'vant'
 import { ref, shallowRef } from 'vue'
 import KkPreview from './components/KkPreview.vue'
 import MediaPreview from './components/MediaPreview.vue'
@@ -28,17 +26,16 @@ import TextPreview from './components/TextPreview.vue'
 export interface FilePreviewInitOptions {
   /** 后端 f_downloadpath 或完整 URL */
   path: string
-  /** 下载时使用的文件名（可选，默认从路径提取） */
+  /** 文件名（可选，默认从路径提取） */
   name?: string
 }
 
-/** office 类型集合，这些类型优先走 @vue-office，失败降级 kk */
+/** 优先走 @vue-office，失败降级 kk */
 const OFFICE_KINDS: PreviewFileKind[] = ['pdf', 'docx', 'xlsx']
 
 /**
- * 直接走 kk 预览的格式，不尝试 @vue-office：
- *  - doc  旧二进制格式，@vue-office 无法解析
- *  - xls  旧二进制格式，@vue-office 解析效果差
+ * 直接走 kk 预览的格式：
+ *  - doc / xls  旧二进制格式，@vue-office 无法解析
  *  - unsupported  未知格式，交给 kkFileView 服务端判断
  */
 const KK_ONLY_KINDS: PreviewFileKind[] = ['doc', 'xls', 'unsupported']
@@ -47,15 +44,12 @@ const kind = ref<PreviewFileKind>('unsupported')
 const fileSource = shallowRef<string | ArrayBuffer>('')
 const textContent = ref('')
 const mediaSrc = ref('')
-const rawUrl = ref('') // 文件原始 URL（kk 预览和下载共用）
 const rawPath = ref('') // 文件相对路径（kk 预览用）
-const downloadName = ref('')
 const loading = ref(false)
 const errorMsg = ref('')
 /** true = office 渲染失败，已降级到 kk 预览 */
 const officeFailed = ref(false)
 
-/** office 渲染失败回调，切换到 kk 预览 */
 function onOfficeFailed() {
   officeFailed.value = true
 }
@@ -67,11 +61,9 @@ async function init(options: FilePreviewInitOptions) {
     return
   }
 
-  // 重置所有状态
+  const rawUrl = resolveResourceUrl(path)
   kind.value = getPreviewFileKind(path)
-  rawUrl.value = resolveResourceUrl(path)
   rawPath.value = path
-  downloadName.value = options.name || path.split('/').pop()?.split('?')[0] || '附件'
   loading.value = true
   errorMsg.value = ''
   officeFailed.value = false
@@ -80,17 +72,16 @@ async function init(options: FilePreviewInitOptions) {
   mediaSrc.value = ''
 
   try {
-    if (kind.value === 'image' || kind.value === 'video' || kind.value === 'audio') {
-      mediaSrc.value = rawUrl.value
+    if (['image', 'video', 'audio'].includes(kind.value)) {
+      mediaSrc.value = rawUrl
     }
     else if (kind.value === 'text') {
-      textContent.value = await fetchResourceText(rawUrl.value)
+      textContent.value = await fetchResourceText(rawUrl)
     }
     else if (OFFICE_KINDS.includes(kind.value)) {
-      // 预加载文件二进制，交给 @vue-office 渲染
-      fileSource.value = await fetchResourceArrayBuffer(rawUrl.value)
+      fileSource.value = await fetchResourceArrayBuffer(rawUrl)
     }
-    // doc / unsupported 直接走 KkPreview，无需预加载
+    // doc / xls / unsupported 直接走 KkPreview，无需预加载
   }
   catch (e: any) {
     errorMsg.value = e?.message || '文件加载失败'
@@ -100,52 +91,32 @@ async function init(options: FilePreviewInitOptions) {
   }
 }
 
-function handleDownload() {
-  downloadAttachment({ url: rawUrl.value, name: downloadName.value })
-}
-
-defineExpose({ init, download: handleDownload })
+defineExpose({ init })
 </script>
 
 <template>
   <div class="file-preview-root">
-    <!-- 悬浮下载按钮，定位在预览区右上角 -->
-    <div v-if="rawUrl && !loading" class="preview-download-btn">
-      <VanButton size="small" type="primary" plain icon="down" @pointerdown.stop="handleDownload">
-        下载
-      </VanButton>
-    </div>
-
     <!-- 加载中 -->
     <VanLoading v-if="loading" class="preview-loading" type="spinner" vertical>
       加载中...
     </VanLoading>
 
     <!-- 加载/解析出错 -->
-    <VanEmpty v-else-if="errorMsg" :description="errorMsg">
-      <VanButton v-if="rawUrl" size="small" type="primary" @click="handleDownload">
-        下载
-      </VanButton>
-    </VanEmpty>
+    <VanEmpty v-else-if="errorMsg" :description="errorMsg" />
 
     <template v-else>
-      <!-- 媒体：图片 / 视频 / 音频 -->
       <MediaPreview
         v-if="kind === 'image' || kind === 'video' || kind === 'audio'"
         :kind="kind"
         :src="mediaSrc"
       />
 
-      <!-- 纯文本 -->
       <TextPreview
         v-else-if="kind === 'text'"
         :content="textContent"
       />
 
-      <!--
-        Office 文档：先走 @vue-office
-        失败（officeFailed）或 doc/unsupported 直接走 KkPreview
-      -->
+      <!-- office：先 @vue-office，失败降级 kk -->
       <OfficePreview
         v-else-if="OFFICE_KINDS.includes(kind) && fileSource && !officeFailed"
         :kind="kind"
@@ -153,18 +124,13 @@ defineExpose({ init, download: handleDownload })
         @error="onOfficeFailed"
       />
 
-      <!-- kk 预览：office 降级 或 doc/unsupported 直接走 -->
+      <!-- kk 预览：office 降级 或 doc/xls/unsupported 直接走 -->
       <KkPreview
         v-else-if="officeFailed || KK_ONLY_KINDS.includes(kind)"
         :file-path="rawPath"
       />
 
-      <!-- 兜底：路径异常 -->
-      <VanEmpty v-else description="文件路径异常">
-        <VanButton v-if="rawUrl" size="small" type="primary" @click="handleDownload">
-          下载
-        </VanButton>
-      </VanEmpty>
+      <VanEmpty v-else description="文件路径异常" />
     </template>
   </div>
 </template>
@@ -178,16 +144,6 @@ defineExpose({ init, download: handleDownload })
   flex-direction: column;
   background: #fff;
   overflow: hidden;
-  /* 作为悬浮按钮的定位基准 */
-  position: relative;
-}
-
-.preview-download-btn {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  z-index: 100;
-  pointer-events: all;
 }
 
 .preview-loading {

package/src/router/routes.ts

@@ -5,6 +5,7 @@ import GridView from '@af-mobile-client-vue3/layout/GridView/index.vue'
 import Forbidden from '@af-mobile-client-vue3/views/common/Forbidden.vue'
 import NotFound from '@af-mobile-client-vue3/views/common/NotFound.vue'
 import EvaluateRecordView from '@af-mobile-client-vue3/views/component/EvaluateRecordView/index.vue'
+import FilePreviewDialog from '@af-mobile-client-vue3/views/component/FilePreviewView/FilePreviewDialogView.vue'
 import FilePreview from '@af-mobile-client-vue3/views/component/FilePreviewView/index.vue'
 import IconifyView from '@af-mobile-client-vue3/views/component/IconifyView/index.vue'
 import ComponentView from '@af-mobile-client-vue3/views/component/index.vue'
@@ -217,6 +218,11 @@ const routes: Array<RouteRecordRaw> = [
         name: 'FilePreview',
         component: FilePreview,
       },
+      {
+        path: '/Component/FilePreviewDialog',
+        name: 'FilePreviewDialog',
+        component: FilePreviewDialog,
+      },
       {
         path: '/Component/StepView',
         name: 'StepView',

package/src/utils/environment.ts

@@ -94,7 +94,6 @@ export function detectEnvironment(): EnvironmentInfo {
   const isApp = (
     /myapp|customapp|afmobileview|flutter/i.test(userAgent)
     || (Object.prototype.hasOwnProperty.call(window, 'webkit') && !!(window as any).webkit?.messageHandlers)
-    || hasFlutterBridge()
   )
 
   // 检测浏览器环境

package/src/utils/fileDownload.ts

@@ -1,6 +1,7 @@
 import { closeToast, showLoadingToast, showToast } from 'vant'
-import { getNativeBridgeWindow, hasFlutterBridge } from './environment'
+import { detectEnvironment } from './environment'
 import { getAttachmentDisplayName } from './fileType'
+import { mobileUtil } from './mobileUtil'
 import { resolveResourceUrl } from './resourceUrl'
 
 export interface AttachmentDownloadSource {
@@ -10,16 +11,30 @@ export interface AttachmentDownloadSource {
   name?: string
 }
 
+/**
+ * 解析附件下载地址：
+ * - /resource 开头：保持相对路径，由 nginx 转发，不拼接 origin
+ * - http/https 开头：直接使用
+ * - 其他情况：走 resolveResourceUrl 正常处理
+ */
 function getDownloadUrl(file: AttachmentDownloadSource): string {
-  return resolveResourceUrl(file.url || file.f_downloadpath || '')
+  const raw = file.url || file.f_downloadpath || ''
+  if (!raw)
+    return ''
+  if (raw.startsWith('/resource/') || /^https?:\/\//i.test(raw))
+    return raw
+  return resolveResourceUrl(raw)
 }
 
+/**
+ * 浏览器环境：fetch 文件内容后用隐藏 <a> 标签触发保存
+ * WebView 环境此方法无效（WebView 没有下载管理器）
+ */
 function triggerBlobDownload(blob: Blob, filename: string) {
   const blobUrl = URL.createObjectURL(blob)
   const link = document.createElement('a')
   link.href = blobUrl
   link.download = filename
-  link.rel = 'noopener'
   link.style.display = 'none'
   document.body.appendChild(link)
   link.click()
@@ -27,29 +42,24 @@ function triggerBlobDownload(blob: Blob, filename: string) {
   setTimeout(() => URL.revokeObjectURL(blobUrl), 1000)
 }
 
-function tryNativeDownload(url: string, filename: string): boolean {
-  const bridgeNames = ['downloadFile', 'saveFile', 'downloadAttachment']
-  for (const bridgeName of bridgeNames) {
-    if (!hasFlutterBridge(bridgeName))
-      continue
-    try {
-      const win = getNativeBridgeWindow()
-      win[bridgeName].postMessage(JSON.stringify({
-        funcName: bridgeName,
-        param: { url, filename, fileName: filename },
-      }))
-      return true
-    }
-    catch {
-      // try next bridge
-    }
-  }
-  return false
+/**
+ * 用其他应用打开文件（方式二：传 url+name，Flutter 端自动下载后调起系统分享面板）
+ * 非 http/https 路径由 Flutter 端拼接 AppConfig.webUrl
+ */
+export function openFileWithApp(url: string, name: string): void {
+  mobileUtil.execute({
+    funcName: 'openFileWithApp',
+    param: { url, name },
+    callbackFunc: (result: any) => {
+      console.log('>>>> openFileWithApp: result: ', JSON.stringify(result))
+    },
+  })
 }
 
 /**
- * 下载附件：浏览器 / 手机浏览器 / App WebView 通用。
- * 优先 fetch + blob 触发保存；失败则新开窗口由系统处理。
+ * 下载附件，自动区分 Flutter WebView 和普通浏览器：
+ * - Flutter WebView：通过 mobileUtil 调用原生 downloadFile channel
+ * - 普通浏览器：fetch + blob 触发浏览器保存对话框
  */
 export async function downloadAttachment(file: AttachmentDownloadSource): Promise<void> {
   const url = getDownloadUrl(file)
@@ -60,18 +70,38 @@ export async function downloadAttachment(file: AttachmentDownloadSource): Promis
     return
   }
 
-  if (tryNativeDownload(url, filename)) {
-    showToast('已开始下载')
+  // Flutter WebView 环境：交给原生层下载
+  if (detectEnvironment().isApp) {
+    const toast = showLoadingToast({ message: '下载中...', forbidClick: true, duration: 0 })
+    try {
+      await new Promise<void>((resolve, reject) => {
+        mobileUtil.execute({
+          funcName: 'downloadFile',
+          param: { url, name: filename },
+          callbackFunc: (result: any) => {
+            result?.status === 'error'
+              ? reject(new Error(result.msg || '下载失败'))
+              : resolve()
+          },
+        })
+      })
+      showToast('下载成功')
+    }
+    catch (e: any) {
+      showToast(e?.message || '下载失败')
+    }
+    finally {
+      closeToast()
+    }
     return
   }
 
+  // 普通浏览器环境：fetch + blob
   const toast = showLoadingToast({ message: '下载中...', forbidClick: true, duration: 0 })
-
   try {
     const response = await fetch(url, { credentials: 'include' })
     if (!response.ok)
       throw new Error(`下载失败(${response.status})`)
-
     const blob = await response.blob()
     triggerBlobDownload(blob, filename)
     showToast('下载成功')

package/src/views/component/FilePreviewView/FilePreviewDialogView.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import FilePreviewDialog from '@af-mobile-client-vue3/components/data/FilePreview/FilePreviewDialog.vue'
+import { ref } from 'vue'
+
+const testFiles = [
+  { name: '图片.png', path: '/resource/af-safecheck/images/92fde63667ec43b7a2d67f423624fccf.png' },
+  { name: 'Word2003.doc', path: '/resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc' },
+  { name: 'Word.docx', path: '/resource/af-revenue/word/46a87ec0a05143f98061a1ba43f19ed2.docx' },
+  { name: 'Excel.xlsx', path: '/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx' },
+]
+
+const drawerRef = ref<InstanceType<typeof FilePreviewDialog> | null>(null)
+const dialogRef = ref<InstanceType<typeof FilePreviewDialog> | null>(null)
+
+function openDrawer(file: (typeof testFiles)[number]) {
+  drawerRef.value?.open({ path: file.path, name: file.name })
+}
+
+function openDialog(file: (typeof testFiles)[number]) {
+  dialogRef.value?.open({ path: file.path, name: file.name })
+}
+</script>
+
+<template>
+  <div class="test-page">
+    <p class="test-title">
+      抽屉模式（drawer）
+    </p>
+    <div class="test-btns">
+      <button
+        v-for="file in testFiles"
+        :key="`drawer-${file.path}`"
+        class="test-btn"
+        @click="openDrawer(file)"
+      >
+        {{ file.name }}
+      </button>
+    </div>
+
+    <p class="test-title">
+      弹窗模式（dialog）
+    </p>
+    <div class="test-btns">
+      <button
+        v-for="file in testFiles"
+        :key="`dialog-${file.path}`"
+        class="test-btn test-btn--dialog"
+        @click="openDialog(file)"
+      >
+        {{ file.name }}
+      </button>
+    </div>
+
+    <!-- 抽屉实例 -->
+    <FilePreviewDialog ref="drawerRef" mode="drawer" />
+    <!-- 弹窗实例 -->
+    <FilePreviewDialog ref="dialogRef" mode="dialog" />
+  </div>
+</template>
+
+<style scoped>
+.test-page {
+  padding: 24px 16px;
+}
+
+.test-title {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 16px 0 10px;
+  color: #333;
+}
+
+.test-btns {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.test-btn {
+  padding: 12px 16px;
+  background: #1677ff;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  text-align: left;
+}
+
+.test-btn--dialog {
+  background: #52c41a;
+}
+</style>

package/src/views/component/FilePreviewView/index.vue

@@ -1,24 +1,65 @@
 <script setup lang="ts">
 import FilePreview from '@af-mobile-client-vue3/components/data/FilePreview/index.vue'
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 
-const previewDocType = ref('xlsx')
-// /resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc
-// /resource/af-revenue/word/46a87ec0a05143f98061a1ba43f19ed2.docx
-// /resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx
-const previewDocUrl = ref('/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx')
+const previewDocType = ref('png')
+const previewDocUrl = ref('/resource/af-safecheck/images/92fde63667ec43b7a2d67f423624fccf.png')
+
+const testFiles = [
+  {
+    name: '图片.png',
+    path: '/resource/af-safecheck/images/92fde63667ec43b7a2d67f423624fccf.png',
+  },
+  {
+    name: 'Word2003.doc',
+    path: '/resource/af-revenue/word/62c684cd70ce4583aa1d6bf21164d465.doc',
+  },
+  {
+    name: 'Word.docx',
+    path: '/resource/af-revenue/word/46a87ec0a05143f98061a1ba43f19ed2.docx',
+  },
+  {
+    name: 'Excel.xlsx',
+    path: '/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx',
+  },
+]
 
 const filePreviewRef = ref<InstanceType<typeof FilePreview> | null>(null)
 
-onMounted(() => {
+/**
+ * 切换预览文件
+ */
+async function previewFile(file: (typeof testFiles)[number]) {
+  previewDocUrl.value = file.path
+  previewDocType.value = file.name.split('.').pop()?.toLowerCase() || ''
+
+  // 等待 FilePreview 根据 key 重新创建
+  await nextTick()
+
   filePreviewRef.value?.init({
-    path: '/resource/af-scada/excel/c284a70c064048369369f43fef405b4e.xlsx',
+    path: file.path,
+    name: file.name,
   })
+}
+
+onMounted(() => {
+  previewFile(testFiles[0])
 })
 </script>
 
 <template>
   <div>
+    <div class="toolbar">
+      <button
+        v-for="file in testFiles"
+        :key="file.path"
+        class="toolbar-btn"
+        @click="previewFile(file)"
+      >
+        {{ file.name }}
+      </button>
+    </div>
+
     <FilePreview
       ref="filePreviewRef"
       :key="`${previewDocType}-${previewDocUrl}`"
@@ -28,7 +69,17 @@ onMounted(() => {
 </template>
 
 <style scoped lang="less">
+.toolbar {
+  margin-bottom: 12px;
+}
+
+.toolbar-btn {
+  margin-right: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
 .doc-preview-file {
-  height: 90vh;
+  height: 80vh;
 }
 </style>

package/src/views/component/index.vue

@@ -97,6 +97,10 @@ const list = ref([
     name: 'kk预览',
     to: '/Component/FilePreview',
   },
+  {
+    name: 'kk预览弹窗组件',
+    to: '/Component/FilePreviewDialog',
+  },
 ])
 
 function cleanConfigCache() {