af-mobile-client-vue3 1.6.48 → 1.6.51

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.51",
   "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/components/KkPreview.vue

@@ -0,0 +1,88 @@
+<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;
+}
+
+/* 透明遮罩：阻止 iframe 在点击悬浮按钮时抢夺事件 */
+.preview-doc-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 99;
+  pointer-events: none;
+}
+
+.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>