af-mobile-client-vue3 1.6.48 → 1.6.49

package/.env

@@ -5,7 +5,7 @@ VITE_APP_OUT_DIR=dist_af-library-mobile-web
 VITE_APP_VCONSOLE=false
 # 自定义参数
 VITE_APP_WEB_CONFIG_KEY=admin.webconfig
-VITE_APP_SYSTEM_NAME=af-safecheck
+VITE_APP_SYSTEM_NAME=af-system
 # 最低兼容性 V4（最新产品）V3(V3产品) OA(公司OA)
 VITE_APP_COMPATIBLE=V4
 VITE_RSA_PRIVATE_KEY=MIICdQIBADANBgkqhkiG9w0BAQEFAASCAl8wggJbAgEAAoGBAIRrmftLDHCQqREEJ132Onu+W3vmFbdF7QD751SrcDDGDTfzuz1zBuElvkHhuDBb7KZkXrCIe+MhvX2IvxcLObl3faX+evYlnfj2HRbF0hIpQLuIq22tL06ZcV5w7wqLxUZRpFElIFm8gZTkUvfKXVuHw89e4daDVhU5hK3GHNGTAgMBAAECgYABiINrFaE1E8pkBYx1JJA5yuhL73aUktfd2TeCU00vFg6kyrWCI85Sa2RKu/6CJNZWeOFgdubEUv7a22tRrNIZb3yUMaqtTwSso78mspIOJqjWXTkTH9WPElfTcdpdIse/lgZtPz6egxkuhadSvwrM9Y6NgusiW/5+x95Ct08iOQJBAN5aK+7uISURvGQj2EaRtgGEd8+d4oHl+BYvvTeG3qSgUikHQW3j0sp4gXPw2kxw6sjVgLFOc4FB6LGqwzOTzokCQQCYdYG8ty3Uo/ebUlNzeJFxHXjy/KvBSytAUzAXkRu3nZrkEaPQsi3dgOkZgk+F1fMDzfQ4EbDIU6xvqOoZXHg7AkATCW9XfoXR8anKfRMoP5Nwn9HOMbtR2cmaxK2TknV/bMZ8AsYETYwfj5+tuIJIJybC2RyykX/sIiN1CqS5xr7ZAkArj19rMRdaKyMi8MnBM1Cy9g3Jt2HHj5ejAGG8SgyWUOShh1y70z0BjcSMMkxQXAncK2s83ekZw7aADM4eQupjAkARRgTwwMOnn3IoKmQusKhZk0uxilZ4Zc2LH6Z4GiWnvteM0W8Zw4Z1lJUcjgQq3dGqL2RdmzeQZ+HgPIOXrZVK

package/package.json

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

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

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+/**
+ * kkFileView 预览子组件
+ * 通过 iframe 加载 kkFileView 服务端预览页面
+ * 适用于 office 渲染器无法处理的格式（如 .doc / .xls 旧格式）或 office 渲染失败的降级场景
+ */
+import { getConfigByNameAsync } from '@af-mobile-client-vue3/services/api/common'
+import { Base64 } from 'js-base64'
+import { Loading as VanLoading } from 'vant'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps<{
+  /** 文件原始路径（相对路径或完整 URL） */
+  filePath: string
+}>()
+
+const iframeUrl = ref('')
+const iframeLoading = ref(true)
+
+function isHttp(path: string) {
+  return /^https?:\/\//i.test(path)
+}
+
+/** 读取 kkFileView 服务配置，拼接预览 URL */
+async function buildPreviewUrl() {
+  try {
+    const res: any = await getConfigByNameAsync('previewDocServiceConfig')
+    if (!res?.previewDocService || !res?.fileServer)
+      throw new Error('previewDocServiceConfig 配置缺失')
+
+    const sourceUrl = isHttp(props.filePath)
+      ? props.filePath
+      : `${res.fileServer}${props.filePath}`
+
+    // kkFileView 要求 url 参数为 Base64 编码后再 encodeURIComponent
+    iframeUrl.value = `${res.previewDocService}${encodeURIComponent(Base64.encode(sourceUrl))}`
+  }
+  catch (e) {
+    console.warn('[KkPreview] 配置加载失败，降级直接加载原始地址', e)
+    // 服务未配置时，直接把原始地址塞给 iframe
+    iframeUrl.value = isHttp(props.filePath) ? props.filePath : ''
+  }
+}
+
+onMounted(buildPreviewUrl)
+</script>
+
+<template>
+  <div class="preview-doc-container">
+    <VanLoading v-if="iframeLoading" class="kk-loading" type="spinner" vertical>
+      加载中...
+    </VanLoading>
+    <iframe
+      v-if="iframeUrl"
+      v-show="!iframeLoading"
+      :src="iframeUrl"
+      width="100%"
+      height="100%"
+      frameborder="0"
+      @load="iframeLoading = false"
+    />
+  </div>
+</template>
+
+<style scoped>
+.preview-doc-container {
+  height: 100%;
+  position: relative;
+}
+
+.kk-loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+</style>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+/**
+ * 媒体预览子组件
+ * 处理 image / video / audio 三种类型，直接用原生 HTML 标签渲染
+ */
+import type { PreviewFileKind } from '@af-mobile-client-vue3/utils/fileType'
+
+defineProps<{
+  kind: PreviewFileKind
+  src: string
+}>()
+</script>
+
+<template>
+  <div v-if="kind === 'image'" class="media-wrapper">
+    <img :src="src" alt="预览图片" class="media-image">
+  </div>
+
+  <div v-else-if="kind === 'video'" class="media-wrapper media-dark">
+    <video class="media-video" controls :src="src" />
+  </div>
+
+  <div v-else-if="kind === 'audio'" class="media-audio-wrapper">
+    <audio class="media-audio" controls :src="src" />
+  </div>
+</template>
+
+<style scoped>
+.media-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-height: 200px;
+}
+
+.media-dark {
+  background: #000;
+}
+
+.media-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.media-video {
+  width: 100%;
+  max-height: 100%;
+  border: none;
+}
+
+.media-audio-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+}
+
+.media-audio {
+  width: 100%;
+  max-width: 480px;
+}
+</style>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * Office 文档预览子组件
+ * 使用 @vue-office 系列库渲染 pdf / docx / xlsx / xls / doc
+ * 渲染失败时 emit 'error'，由父组件决定是否降级到 kk 预览
+ */
+import type { PreviewFileKind } from '@af-mobile-client-vue3/utils/fileType'
+import { defineAsyncComponent } from 'vue'
+
+const props = defineProps<{
+  kind: PreviewFileKind
+  src: string | ArrayBuffer
+}>()
+
+const emit = defineEmits<{
+  (e: 'error'): void
+}>()
+
+// 按需异步加载，避免影响首屏
+const VueOfficePdf = defineAsyncComponent(() =>
+  import('@vue-office/pdf/lib/v3/vue-office-pdf.mjs').then(m => m.default),
+)
+
+const VueOfficeDocx = defineAsyncComponent(async () => {
+  await import('@vue-office/docx/lib/v3/index.css')
+  return import('@vue-office/docx/lib/v3/vue-office-docx.mjs').then(m => m.default)
+})
+
+const VueOfficeExcel = defineAsyncComponent(async () => {
+  await import('@vue-office/excel/lib/v3/index.css')
+  return import('@vue-office/excel/lib/v3/vue-office-excel.mjs').then(m => m.default)
+})
+</script>
+
+<template>
+  <VueOfficePdf
+    v-if="kind === 'pdf'"
+    :src="src"
+    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')"
+  />
+  <!-- xlsx / xls 共用 excel 渲染器 -->
+  <VueOfficeExcel
+    v-else-if="kind === 'xlsx' || kind === 'xls'"
+    :src="src"
+    class="office-viewer"
+    @error="emit('error')"
+  />
+</template>
+
+<style scoped>
+.office-viewer {
+  width: 100%;
+  flex: 1;
+  min-height: 200px;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * 纯文本预览子组件
+ * 直接渲染文本内容，保留空白和换行
+ */
+defineProps<{
+  content: string
+}>()
+</script>
+
+<template>
+  <pre class="text-preview">{{ content }}</pre>
+</template>
+
+<style scoped>
+.text-preview {
+  margin: 0;
+  padding: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #333;
+  overflow: auto;
+  flex: 1;
+}
+</style>

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

@@ -1,4 +1,14 @@
 <script setup lang="ts">
+/**
+ * 文件预览组件（主入口）
+ *
+ * 渲染策略：
+ *  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
+ */
 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'
@@ -9,96 +19,78 @@ import {
   resolveResourceUrl,
 } from '@af-mobile-client-vue3/utils/resourceUrl'
 import { Button as VanButton, Empty as VanEmpty, Loading as VanLoading } from 'vant'
-import { defineAsyncComponent, ref, shallowRef } from 'vue'
+import { ref, shallowRef } from 'vue'
+import KkPreview from './components/KkPreview.vue'
+import MediaPreview from './components/MediaPreview.vue'
+import OfficePreview from './components/OfficePreview.vue'
+import TextPreview from './components/TextPreview.vue'
 
 export interface FilePreviewInitOptions {
   /** 后端 f_downloadpath 或完整 URL */
   path: string
-  /** 下载时使用的文件名 */
+  /** 下载时使用的文件名（可选，默认从路径提取） */
   name?: string
 }
 
-const VueOfficePdf = defineAsyncComponent(async () => {
-  const mod = await import('@vue-office/pdf/lib/v3/vue-office-pdf.mjs')
-  return mod.default
-})
+/** office 类型集合，这些类型优先走 @vue-office，失败降级 kk */
+const OFFICE_KINDS: PreviewFileKind[] = ['pdf', 'docx', 'xlsx']
 
-const VueOfficeDocx = defineAsyncComponent(async () => {
-  await import('@vue-office/docx/lib/v3/index.css')
-  const mod = await import('@vue-office/docx/lib/v3/vue-office-docx.mjs')
-  return mod.default
-})
+/**
+ * 直接走 kk 预览的格式，不尝试 @vue-office：
+ *  - doc  旧二进制格式，@vue-office 无法解析
+ *  - xls  旧二进制格式，@vue-office 解析效果差
+ *  - unsupported  未知格式，交给 kkFileView 服务端判断
+ */
+const KK_ONLY_KINDS: PreviewFileKind[] = ['doc', 'xls', 'unsupported']
 
-const VueOfficeExcel = defineAsyncComponent(async () => {
-  await import('@vue-office/excel/lib/v3/index.css')
-  const mod = await import('@vue-office/excel/lib/v3/vue-office-excel.mjs')
-  return mod.default
-})
-
-const previewKind = ref<PreviewFileKind>('unsupported')
+const kind = ref<PreviewFileKind>('unsupported')
 const fileSource = shallowRef<string | ArrayBuffer>('')
 const textContent = ref('')
-const imageSrc = ref('')
-const videoSrc = ref('')
-const audioSrc = ref('')
-const openUrl = 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)
 
-function onRenderError() {
-  errorMsg.value = '文件预览渲染失败，可尝试下载查看'
+/** office 渲染失败回调，切换到 kk 预览 */
+function onOfficeFailed() {
+  officeFailed.value = true
 }
 
 async function init(options: FilePreviewInitOptions) {
   const path = getPreviewPath(options.path)
   if (!path) {
     errorMsg.value = '文件路径为空'
-    previewKind.value = 'unsupported'
     return
   }
 
-  openUrl.value = resolveResourceUrl(path)
+  // 重置所有状态
+  kind.value = getPreviewFileKind(path)
+  rawUrl.value = resolveResourceUrl(path)
+  rawPath.value = path
   downloadName.value = options.name || path.split('/').pop()?.split('?')[0] || '附件'
-  previewKind.value = getPreviewFileKind(path)
   loading.value = true
   errorMsg.value = ''
-  textContent.value = ''
+  officeFailed.value = false
   fileSource.value = ''
-  imageSrc.value = ''
-  videoSrc.value = ''
-  audioSrc.value = ''
+  textContent.value = ''
+  mediaSrc.value = ''
 
   try {
-    switch (previewKind.value) {
-      case 'image':
-        imageSrc.value = openUrl.value
-        break
-
-      case 'video':
-        videoSrc.value = openUrl.value
-        break
-
-      case 'audio':
-        audioSrc.value = openUrl.value
-        break
-
-      case 'text':
-        textContent.value = await fetchResourceText(openUrl.value)
-        break
-
-      case 'pdf':
-      case 'docx':
-      case 'doc':
-      case 'xlsx':
-      case 'xls':
-        fileSource.value = await fetchResourceArrayBuffer(openUrl.value)
-        break
-
-      case 'unsupported':
-        // 未知格式，直接用 iframe 尝试打开，无需预加载内容
-        break
+    if (kind.value === 'image' || kind.value === 'video' || kind.value === 'audio') {
+      mediaSrc.value = rawUrl.value
+    }
+    else if (kind.value === 'text') {
+      textContent.value = await fetchResourceText(rawUrl.value)
+    }
+    else if (OFFICE_KINDS.includes(kind.value)) {
+      // 预加载文件二进制，交给 @vue-office 渲染
+      fileSource.value = await fetchResourceArrayBuffer(rawUrl.value)
     }
+    // doc / unsupported 直接走 KkPreview，无需预加载
   }
   catch (e: any) {
     errorMsg.value = e?.message || '文件加载失败'
@@ -109,85 +101,67 @@ async function init(options: FilePreviewInitOptions) {
 }
 
 function handleDownload() {
-  if (!openUrl.value)
-    return
-  downloadAttachment({ url: openUrl.value, name: downloadName.value })
+  downloadAttachment({ url: rawUrl.value, name: downloadName.value })
 }
 
-defineExpose({
-  init,
-  download: handleDownload,
-})
+defineExpose({ init, download: handleDownload })
 </script>
 
 <template>
   <div class="file-preview-root">
-    <div v-if="openUrl && !loading" class="preview-toolbar">
+    <!-- 悬浮下载按钮，定位在预览区右上角 -->
+    <div v-if="rawUrl && !loading" class="preview-download-btn">
       <VanButton size="small" type="primary" plain icon="down" @click="handleDownload">
         下载
       </VanButton>
     </div>
 
+    <!-- 加载中 -->
     <VanLoading v-if="loading" class="preview-loading" type="spinner" vertical>
       加载中...
     </VanLoading>
 
+    <!-- 加载/解析出错 -->
     <VanEmpty v-else-if="errorMsg" :description="errorMsg">
-      <template v-if="openUrl" #default>
-        <VanButton size="small" type="primary" @click="handleDownload">
-          下载
-        </VanButton>
-      </template>
+      <VanButton v-if="rawUrl" size="small" type="primary" @click="handleDownload">
+        下载
+      </VanButton>
     </VanEmpty>
 
     <template v-else>
-      <VueOfficePdf
-        v-if="previewKind === 'pdf' && fileSource"
-        :src="fileSource"
-        class="office-preview"
-        @error="onRenderError"
+      <!-- 媒体：图片 / 视频 / 音频 -->
+      <MediaPreview
+        v-if="kind === 'image' || kind === 'video' || kind === 'audio'"
+        :kind="kind"
+        :src="mediaSrc"
       />
-      <!-- docx / doc 共用同一渲染器 -->
-      <VueOfficeDocx
-        v-else-if="(previewKind === 'docx' || previewKind === 'doc') && fileSource"
-        :src="fileSource"
-        class="office-preview"
-        @error="onRenderError"
+
+      <!-- 纯文本 -->
+      <TextPreview
+        v-else-if="kind === 'text'"
+        :content="textContent"
       />
-      <!-- xlsx / xls 共用同一渲染器 -->
-      <VueOfficeExcel
-        v-else-if="(previewKind === 'xlsx' || previewKind === 'xls') && fileSource"
+
+      <!--
+        Office 文档：先走 @vue-office
+        失败（officeFailed）或 doc/unsupported 直接走 KkPreview
+      -->
+      <OfficePreview
+        v-else-if="OFFICE_KINDS.includes(kind) && fileSource && !officeFailed"
+        :kind="kind"
         :src="fileSource"
-        class="office-preview"
-        @error="onRenderError"
+        @error="onOfficeFailed"
       />
-      <div v-else-if="previewKind === 'image'" class="preview-image-wrapper">
-        <img :src="imageSrc" alt="image" class="preview-image">
-      </div>
-      <div v-else-if="previewKind === 'video'" class="preview-video-wrapper">
-        <video class="preview-video" controls :src="videoSrc" />
-      </div>
-      <div v-else-if="previewKind === 'audio'" class="preview-audio-wrapper">
-        <audio class="preview-audio" controls :src="audioSrc" />
-      </div>
-      <pre v-else-if="previewKind === 'text'" class="preview-text">{{ textContent }}</pre>
-      <!-- 未知格式：用 iframe 尝试直接打开，系统/浏览器自行决定如何处理 -->
-      <div v-else-if="previewKind === 'unsupported'" class="preview-iframe-wrapper">
-        <iframe
-          :src="openUrl"
-          class="preview-iframe"
-          sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
-          @error="onRenderError"
-        />
-        <div class="preview-iframe-fallback">
-          <span>若文件无法显示，请</span>
-          <VanButton size="small" type="primary" plain @click="handleDownload">
-            下载查看
-          </VanButton>
-        </div>
-      </div>
+
+      <!-- kk 预览：office 降级 或 doc/unsupported 直接走 -->
+      <KkPreview
+        v-else-if="officeFailed || KK_ONLY_KINDS.includes(kind)"
+        :file-path="rawPath"
+      />
+
+      <!-- 兜底：路径异常 -->
       <VanEmpty v-else description="文件路径异常">
-        <VanButton v-if="openUrl" size="small" type="primary" @click="handleDownload">
+        <VanButton v-if="rawUrl" size="small" type="primary" @click="handleDownload">
           下载
         </VanButton>
       </VanEmpty>
@@ -200,103 +174,25 @@ defineExpose({
   width: 100%;
   height: 100%;
   min-height: 200px;
-  position: relative;
-  overflow: auto;
-  background: #fff;
   display: flex;
   flex-direction: column;
+  background: #fff;
+  overflow: hidden;
+  /* 作为悬浮按钮的定位基准 */
+  position: relative;
 }
 
-.preview-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  padding: 8px 12px 0;
-  flex-shrink: 0;
-}
-
-.preview-loading {
+.preview-download-btn {
   position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1;
+  top: 10px;
+  right: 12px;
+  z-index: 10;
 }
 
-.office-preview {
-  width: 100%;
-  min-height: 200px;
-  height: 100%;
-}
-
-.preview-image-wrapper,
-.preview-video-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 200px;
-  height: 100%;
-  background: #000;
-}
-
-.preview-image {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.preview-video {
-  width: 100%;
-  max-height: 100%;
-  border: none;
-  background: #000;
-}
-
-.preview-text {
-  margin: 0;
-  padding: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  font-size: 13px;
-  line-height: 1.5;
-  color: #333;
-}
-
-.preview-audio-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 32px 16px;
-  min-height: 120px;
-}
-
-.preview-audio {
-  width: 100%;
-  max-width: 480px;
-}
-
-.preview-iframe-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  flex: 1;
-}
-
-.preview-iframe {
-  width: 100%;
+.preview-loading {
   flex: 1;
-  min-height: 200px;
-  border: none;
-}
-
-.preview-iframe-fallback {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 12px;
-  color: #999;
-  flex-shrink: 0;
-  border-top: 1px solid #f0f0f0;
+  justify-content: center;
 }
 </style>