af-mobile-client-vue3 1.6.49 → 1.6.52

package/package.json

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

package/src/components/core/XMultiSelect/index.vue

@@ -149,52 +149,54 @@ const resultLabel = computed(() => {
       :is-link="$attrs.disabled === undefined"
       @click="showPopu($attrs.readonly)"
     />
-    <VanPopup v-model:show="show" position="bottom">
-      <div class="van-picker__toolbar">
-        <button type="button" class="van-picker__cancel" @click="cancel">
-          取消
-        </button>
-        <div class="van-ellipsis van-picker__title">
-          {{ $attrs.label }}
-        </div>
-        <button type="button" class="van-picker__confirm" @click="onConfirm">
-          确认
-        </button>
-      </div>
-      <div class="x-multi-select-content">
-        <VanSearch
-          v-if="props.isSearch"
-          v-model="searchVal"
-          placeholder="搜索"
-          @update:model-value="search"
-          @cancel="search"
-        />
-        <div v-if="isLoading" class="loading-container">
-          <div class="loading-text">
-            搜索中...
+    <VanPopup v-model:show="show" position="bottom" teleport="body" round>
+      <div class="x-multi-select-popup">
+        <div class="van-picker__toolbar">
+          <button type="button" class="van-picker__cancel" @click="cancel">
+            取消
+          </button>
+          <div class="van-ellipsis van-picker__title">
+            {{ $attrs.label }}
           </div>
+          <button type="button" class="van-picker__confirm" @click="onConfirm">
+            确认
+          </button>
         </div>
-        <div v-else class="x-multi-select-checkbox-group">
-          <VanCell title="全选">
-            <template #right-icon>
-              <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
-            </template>
-          </VanCell>
-          <VanCheckboxGroup ref="checkboxGroup" v-model="checkboxValue" @change="change">
-            <VanCellGroup>
-              <VanCell
-                v-for="(item, index) in columnsData"
-                :key="item[props.option.value]"
-                :title="item[props.option.text]"
-                clickable
-                @click="toggle(item, index)"
-              >
-                <template #right-icon>
-                  <VanCheckbox ref="checkboxes" :name="item[props.option.value]" @click.stop />
-                </template>
-              </VanCell>
-            </VanCellGroup>
-          </VanCheckboxGroup>
+        <div class="x-multi-select-content">
+          <VanSearch
+            v-if="props.isSearch"
+            v-model="searchVal"
+            placeholder="搜索"
+            @update:model-value="search"
+            @cancel="search"
+          />
+          <div v-if="isLoading" class="loading-container">
+            <div class="loading-text">
+              搜索中...
+            </div>
+          </div>
+          <div v-else class="x-multi-select-checkbox-group">
+            <VanCell title="全选">
+              <template #right-icon>
+                <VanCheckbox v-model="checkedAll" name="all" @click="toggleAll" />
+              </template>
+            </VanCell>
+            <VanCheckboxGroup ref="checkboxGroup" v-model="checkboxValue" @change="change">
+              <VanCellGroup>
+                <VanCell
+                  v-for="(item, index) in columnsData"
+                  :key="item[props.option.value]"
+                  :title="item[props.option.text]"
+                  clickable
+                  @click="toggle(item, index)"
+                >
+                  <template #right-icon>
+                    <VanCheckbox ref="checkboxes" :name="item[props.option.value]" @click.stop />
+                  </template>
+                </VanCell>
+              </VanCellGroup>
+            </VanCheckboxGroup>
+          </div>
         </div>
       </div>
     </VanPopup>
@@ -213,12 +215,19 @@ const resultLabel = computed(() => {
     left: -8px;
   }
   .x-multi-select-content {
-    max-height: 264px;
+    max-height: calc(70vh - 44px);
     overflow-y: auto;
     .x-multi-select-checkbox-group {
       padding: 0 16px;
     }
   }
+  .x-multi-select-popup {
+    max-height: 70vh;
+    padding-bottom: env(safe-area-inset-bottom);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
   .loading-container {
     display: flex;
     justify-content: center;

package/src/components/core/XSelect/index.vue

@@ -197,7 +197,7 @@ onBeforeUnmount(() => {
     :border="props.border"
     @click="showPopu($attrs.readonly)"
   />
-  <VanPopup v-model:show="show" position="bottom" teleport="body">
+  <VanPopup v-model:show="show" position="bottom" teleport="body" round>
     <div class="x-select-popup">
       <!-- 搜索框 -->
       <VanSearch
@@ -222,6 +222,23 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.x-select-popup {
+  max-height: 70vh;
+  padding-bottom: env(safe-area-inset-bottom);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.x-select-popup :deep(.van-picker) {
+  flex: 1;
+  min-height: 0;
+}
+
+.x-select-popup :deep(.van-picker__columns) {
+  max-height: 40vh;
+}
+
 .loading-container {
   display: flex;
   justify-content: center;

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/KkPreview.vue

@@ -68,6 +68,15 @@ onMounted(buildPreviewUrl)
   position: relative;
 }
 
+/* 透明遮罩：阻止 iframe 在点击悬浮按钮时抢夺事件 */
+.preview-doc-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 99;
+  pointer-events: none;
+}
+
 .kk-loading {
   position: absolute;
   inset: 0;

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" @click="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,15 +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: 10;
 }
 
 .preview-loading {