@hb-hellotech/hb-ui 2.1.1 → 2.2.1

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { Global_config_intf } from './config';
 export * from './components/index';
+export * from './components/hooks/index';
 export declare const locales: {
     en_US: {
         hbLibComp: {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AAOnC,OAAO,oBAAoB,CAAC;AAG5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAa,KAAK,GAAG,EAAE,UAAS,kBAAuB,SAa1E,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AAOzC,OAAO,oBAAoB,CAAC;AAG5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAa,KAAK,GAAG,EAAE,UAAS,kBAAuB,SAa1E,CAAC"}

package/hooks/useFilePreview.ts

@@ -0,0 +1,181 @@
+/**
+ * @file PC 端供应商审批页：附件内嵌预览（FilePreview）、上一条/下一条、下载。
+ * @desc 与 `FilePreview` 配合；预览地址优先 `pcPreview`，其次 `mobilePreview`。
+ */
+
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
+import { message } from 'ant-design-vue';
+import { resolveAttachmentIndexInList } from '../src/components/func_comp/hb_func_file_preview/src/util';
+import { triggerBrowserDownload } from '../src/components/utils/triggerBrowserDownload';
+import { HbFileItem_Intf } from '../src/components/func_comp/hb_func_file_preview_safe/src/type';
+
+export interface FilePreviewDetail {
+    // 附件列表
+    attachmentInfos: HbFileItem_Intf[];
+}
+
+export interface UseFilePreviewResult {
+    filePreviewVisible: Ref<boolean>;
+    pdfPreviewUrlRef: Ref<string>;
+    previewFileNameRef: Ref<string>;
+    previewAttachmentIndexRef: Ref<number>;
+    hasPrevAttachment: ComputedRef<boolean>;
+    hasNextAttachment: ComputedRef<boolean>;
+    showAttachmentNavBar: ComputedRef<boolean>;
+    handlePreview: (record: HbFileItem_Intf, listIndex?: number) => void;
+    handleDownload: (record: HbFileItem_Intf) => void;
+    handleClosePreview: () => void;
+    goPrevAttachment: () => void;
+    goNextAttachment: () => void;
+    triggerBrowserDownload: (url: string, filename: string) => Promise<void>;
+    /** 顺序触发下载，间隔开以避免浏览器拦截连续多次程序化下载 */
+    handleBatchDownloadAttachment: () => Promise<void>;
+}
+
+/**
+ * @param detailRef 详情 ref，须含 `attachmentInfos`
+ */
+export function useFilePreview(
+    detailRef: Ref<FilePreviewDetail>
+): UseFilePreviewResult {
+    const filePreviewVisible = ref(false);
+    const pdfPreviewUrlRef = ref('');
+    const previewFileNameRef = ref('');
+    const previewAttachmentIndexRef = ref(-1);
+
+    const getUrl = (row: HbFileItem_Intf) => row.previewUrl;
+
+    const hasPrevAttachment = computed(() => {
+        const list = detailRef.value.attachmentInfos;
+        const i = previewAttachmentIndexRef.value;
+        if (i <= 0) return false;
+        for (let j = i - 1; j >= 0; j--) {
+            if (getUrl(list[j])) return true;
+        }
+        return false;
+    });
+
+    const hasNextAttachment = computed(() => {
+        const list = detailRef.value.attachmentInfos;
+        const i = previewAttachmentIndexRef.value;
+        if (i < 0 || i >= list.length - 1) return false;
+        for (let j = i + 1; j < list.length; j++) {
+            if (getUrl(list[j])) return true;
+        }
+        return false;
+    });
+
+    const showAttachmentNavBar = computed(
+        () => detailRef.value.attachmentInfos.length > 1
+    );
+
+    const applyPreviewAtAttachmentIndex = (idx: number) => {
+        const list = detailRef.value.attachmentInfos;
+        const record = list[idx];
+        if (!record) return;
+        const url = getUrl(record);
+        if (!url) return;
+        previewAttachmentIndexRef.value = idx;
+        pdfPreviewUrlRef.value = url;
+        previewFileNameRef.value = record.attachmentDesc || '';
+        filePreviewVisible.value = true;
+    };
+
+    const goPrevAttachment = () => {
+        const list = detailRef.value.attachmentInfos;
+        const i = previewAttachmentIndexRef.value;
+        for (let j = i - 1; j >= 0; j--) {
+            if (getUrl(list[j])) {
+                applyPreviewAtAttachmentIndex(j);
+                return;
+            }
+        }
+    };
+
+    const goNextAttachment = () => {
+        const list = detailRef.value.attachmentInfos;
+        const i = previewAttachmentIndexRef.value;
+        for (let j = i + 1; j < list.length; j++) {
+            if (getUrl(list[j])) {
+                applyPreviewAtAttachmentIndex(j);
+                return;
+            }
+        }
+    };
+
+    const handleClosePreview = () => {
+        filePreviewVisible.value = false;
+        previewAttachmentIndexRef.value = -1;
+        pdfPreviewUrlRef.value = '';
+        previewFileNameRef.value = '';
+    };
+
+    const handlePreview = (record: HbFileItem_Intf, listIndex?: number) => {
+        const url = getUrl(record);
+        if (!url) {
+            message.warning('暂无预览地址');
+            return;
+        }
+        const list = detailRef.value.attachmentInfos;
+        const idx = resolveAttachmentIndexInList(list, record, {
+            preferredIndex: listIndex,
+        });
+        if (idx >= 0) {
+            applyPreviewAtAttachmentIndex(idx);
+        } else {
+            previewAttachmentIndexRef.value = -1;
+            pdfPreviewUrlRef.value = url;
+            previewFileNameRef.value = record.attachmentDesc || '';
+            filePreviewVisible.value = true;
+        }
+    };
+
+    const handleDownload = (record: HbFileItem_Intf) => {
+        const url = record.downloadUrl;
+        if (!url) {
+            message.warning('暂无下载地址');
+            return;
+        }
+        const name = record.attachmentDesc?.trim() || 'download';
+        void triggerBrowserDownload(url, name);
+    };
+
+    /** 浏览器会限制同一次交互内连续多次 `a.click()` 下载，需分帧/延时顺序触发 */
+    const BATCH_DOWNLOAD_STAGGER_MS = 400;
+
+    const handleBatchDownloadAttachment = async () => {
+        const list = detailRef.value.attachmentInfos;
+        const items = list.filter((row) => Boolean(row.downloadUrl?.trim()));
+        if (items.length === 0) {
+            message.warning('暂无可下载附件');
+            return;
+        }
+        for (let i = 0; i < items.length; i++) {
+            const row = items[i];
+            const name = row.attachmentDesc?.trim() || 'download';
+            void triggerBrowserDownload(row.downloadUrl!, name);
+            if (i < items.length - 1) {
+                await new Promise((r) =>
+                    setTimeout(r, BATCH_DOWNLOAD_STAGGER_MS)
+                );
+            }
+        }
+    };
+
+    return {
+        filePreviewVisible,
+        pdfPreviewUrlRef,
+        previewFileNameRef,
+        previewAttachmentIndexRef,
+        hasPrevAttachment,
+        hasNextAttachment,
+        showAttachmentNavBar,
+        handlePreview,
+        handleDownload,
+        handleClosePreview,
+        goPrevAttachment,
+        goNextAttachment,
+        triggerBrowserDownload,
+        handleBatchDownloadAttachment,
+    };
+}

package/hooks/useListFormItem.ts

@@ -1,38 +1,38 @@
 export interface LocalShowList_intf {
-  label?: string;
-  key: string;
-  isFixed?: boolean;
-  isActive?: boolean;
-  isLinked?: boolean;
-  // 用于多语言 设置 对应locales对象
-  labelLanguage?: string;
-  [key: string]: any;
+    label?: string;
+    key: string;
+    isFixed?: boolean;
+    isActive?: boolean;
+    isLinked?: boolean;
+    // 用于多语言 设置 对应locales对象
+    labelLanguage?: string;
+    [key: string]: any;
 }
 import { ref } from 'vue';
 
 // 用于处理搜索条件
 const useListFormItem = (props: LocalShowList_intf[]) => {
-  const formItems = ref<LocalShowList_intf[]>();
-  formItems.value = props.slice();
+    const formItems = ref<LocalShowList_intf[]>();
+    formItems.value = props.slice();
 
-  const DeepCloneFromItem = JSON.parse(JSON.stringify(formItems.value));
-  //   queryParam是搜索方案点击后存储的搜索条件
-  const handleSearchCase = (queryParam: any) => {
-    let showFormItems: any = [];
-    let queryParamKeys = Object.keys(queryParam);
-    DeepCloneFromItem.forEach((item: LocalShowList_intf) => {
-      if (queryParamKeys.includes(item.key)) {
-        showFormItems.push(item);
-      }
-    });
-    formItems.value = showFormItems;
-  };
+    const DeepCloneFromItem = JSON.parse(JSON.stringify(formItems.value));
+    //   queryParam是搜索方案点击后存储的搜索条件
+    const handleSearchCase = (queryParam: any) => {
+        const showFormItems: any = [];
+        const queryParamKeys = Object.keys(queryParam);
+        DeepCloneFromItem.forEach((item: LocalShowList_intf) => {
+            if (queryParamKeys.includes(item.key)) {
+                showFormItems.push(item);
+            }
+        });
+        formItems.value = showFormItems;
+    };
 
-  return {
-    formItems,
-    DeepCloneFromItem,
-    handleSearchCase,
-  };
+    return {
+        formItems,
+        DeepCloneFromItem,
+        handleSearchCase,
+    };
 };
 
 export default useListFormItem;

package/hooks/useModalDrag.ts

@@ -1,73 +1,79 @@
 import { nextTick } from 'vue';
 
 const useModalDrag = (container: string) => {
-  let canMove = true;
-  const start = () => {
-    nextTick(() => {
-      const modalWrap: any = document.querySelector(`.${container} .ant-modal`);
+    let canMove = true;
+    const start = () => {
+        nextTick(() => {
+            const modalWrap: any = document.querySelector(
+                `.${container} .ant-modal`
+            );
 
-      if (modalWrap) {
-        let isDragging = false;
-        let offset = { x: 0, y: 0 };
-        const modalHeader: any = modalWrap.querySelector('.ant-modal-header');
-        const modalFooter: any = modalWrap.querySelector('.ant-modal-footer');
-        if (modalHeader) {
-          modalHeader.style.cursor = 'move';
-          modalFooter.style.cursor = 'move';
+            if (modalWrap) {
+                let isDragging = false;
+                const offset = { x: 0, y: 0 };
+                const modalHeader: any =
+                    modalWrap.querySelector('.ant-modal-header');
+                const modalFooter: any =
+                    modalWrap.querySelector('.ant-modal-footer');
+                if (modalHeader) {
+                    modalHeader.style.cursor = 'move';
+                    modalFooter.style.cursor = 'move';
 
-          modalHeader.addEventListener('mousedown', (e) => {
-            isDragging = true;
-            offset.x = e.clientX - modalWrap.offsetLeft;
-            offset.y = e.clientY - modalWrap.offsetTop;
-            document.body.style.userSelect = 'none';
-          });
-          modalFooter.addEventListener('mousedown', (e) => {
-            isDragging = true;
-            offset.x = e.clientX - modalWrap.offsetLeft;
-            offset.y = e.clientY - modalWrap.offsetTop;
-            document.body.style.userSelect = 'none';
-          });
+                    modalHeader.addEventListener('mousedown', (e) => {
+                        isDragging = true;
+                        offset.x = e.clientX - modalWrap.offsetLeft;
+                        offset.y = e.clientY - modalWrap.offsetTop;
+                        document.body.style.userSelect = 'none';
+                    });
+                    modalFooter.addEventListener('mousedown', (e) => {
+                        isDragging = true;
+                        offset.x = e.clientX - modalWrap.offsetLeft;
+                        offset.y = e.clientY - modalWrap.offsetTop;
+                        document.body.style.userSelect = 'none';
+                    });
 
-          document.addEventListener('mousemove', (e) => {
-            if (!isDragging || !canMove) return;
-            const left = e.clientX - offset.x;
-            const top = e.clientY - offset.y;
-            modalWrap.style.left = `${left}px`;
-            modalWrap.style.top = `${top}px`;
-          });
+                    document.addEventListener('mousemove', (e) => {
+                        if (!isDragging || !canMove) return;
+                        const left = e.clientX - offset.x;
+                        const top = e.clientY - offset.y;
+                        modalWrap.style.left = `${left}px`;
+                        modalWrap.style.top = `${top}px`;
+                    });
 
-          document.addEventListener('mouseup', () => {
-            isDragging = false;
-            document.body.style.userSelect = '';
-          });
-        }
-      }
-    });
-  };
+                    document.addEventListener('mouseup', () => {
+                        isDragging = false;
+                        document.body.style.userSelect = '';
+                    });
+                }
+            }
+        });
+    };
 
-  const stop = () => {
-    canMove = false;
-  };
+    const stop = () => {
+        canMove = false;
+    };
 
-  // 新增：重置模态框位置为居中
-  const resetPosition = () => {
-    nextTick(() => {
-      const modalWrap: any = document.querySelector(`.${container} .ant-modal`);
-      if (modalWrap) {
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        const modalWidth = modalWrap.offsetWidth;
-        const modalHeight = modalWrap.offsetHeight;
+    // 新增：重置模态框位置为居中
+    const resetPosition = () => {
+        nextTick(() => {
+            const modalWrap: any = document.querySelector(
+                `.${container} .ant-modal`
+            );
+            if (modalWrap) {
+                const windowWidth = window.innerWidth;
+                const windowHeight = window.innerHeight;
+                const modalWidth = modalWrap.offsetWidth;
+                const modalHeight = modalWrap.offsetHeight;
 
-        const left = (windowWidth - modalWidth) / 2;
-        const top = (windowHeight - modalHeight) / 2;
+                const left = (windowWidth - modalWidth) / 2;
+                const top = (windowHeight - modalHeight) / 2;
 
-        modalWrap.style.left = `${left}px`;
-        modalWrap.style.top = `${top}px`;
-      }
-    });
-  };
-  return { start, stop, resetPosition };
+                modalWrap.style.left = `${left}px`;
+                modalWrap.style.top = `${top}px`;
+            }
+        });
+    };
+    return { start, stop, resetPosition };
 };
 
 export default useModalDrag;

package/package.json

@@ -1,84 +1,90 @@
 {
-  "name": "@hb-hellotech/hb-ui",
-  "version": "2.1.1",
-  "type": "module",
-  "main": "dist/hb_component_lib.umd.cjs",
-  "module": "dist/hb_component_lib.js",
-  "types": "dist/index.d.ts",
-  "author": "hello-tech",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/hb_component_lib.js",
-      "require": "./dist/hb_component_lib.umd.cjs"
+    "name": "@hb-hellotech/hb-ui",
+    "version": "2.2.1",
+    "type": "module",
+    "main": "dist/hb_component_lib.umd.cjs",
+    "module": "dist/hb_component_lib.js",
+    "types": "dist/index.d.ts",
+    "author": "hello-tech",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/hb_component_lib.js",
+            "require": "./dist/hb_component_lib.umd.cjs"
+        },
+        "./dist/hb_component_lib.css": {
+            "import": "./dist/hb_component_lib.css",
+            "require": "./dist/hb_component_lib.css"
+        },
+        "./hooks/*": "./hooks/*"
     },
-    "./dist/hb_component_lib.css": {
-      "import": "./dist/hb_component_lib.css",
-      "require": "./dist/hb_component_lib.css"
+    "files": [
+        "package.json",
+        "README.md",
+        "LICENSE",
+        "dist",
+        "hooks"
+    ],
+    "scripts": {
+        "dev": "vite --port 3003",
+        "pub": "npm publish --tag latest --access public --registry=https://registry.npmjs.org",
+        "build": "vite build",
+        "lint": "eslint ./src/**/*.{ts,vue}",
+        "lint:fix": "eslint ./src/**/*.{ts,vue} --fix",
+        "docs:dev": "vitepress dev docs --port 3001",
+        "docs:build": "vitepress build docs",
+        "docs:preview": "vitepress preview docs"
     },
-    "./hooks/*": "./hooks/*"
-  },
-  "files": [
-    "package.json",
-    "README.md",
-    "LICENSE",
-    "dist",
-    "hooks"
-  ],
-  "scripts": {
-    "dev": "vite --port 3003",
-    "pub": "npm publish --tag latest --access public --registry=https://registry.npmjs.org",
-    "build": "vite build",
-    "lint": "eslint ./src/**/*.{ts,vue}",
-    "lint:fix": "eslint ./src/**/*.{ts,vue} --fix",
-    "docs:dev": "vitepress dev docs --port 3001",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
-  },
-  "dependencies": {
-    "@ant-design/icons-vue": "^6.1.0",
-    "@hb-hellotech/hb-ui": "1.2.5-beta.5",
-    "@rollup/plugin-alias": "^4.0.2",
-    "@types/node": "^18.11.7",
-    "@types/throttle-debounce": "^5.0.0",
-    "@vueuse/core": "^10.9.0",
-    "ant-design-vue": "^3.2.15",
-    "child_process": "^1.0.2",
-    "dayjs": "^1.11.18",
-    "less": "^4.1.3",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.23",
-    "rollup-plugin-external-globals": "^0.8.0",
-    "throttle-debounce": "^5.0.0",
-    "vite-plugin-libcss": "^1.0.5",
-    "vue": "^3.5.22",
-    "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6",
-    "vuedraggable": "4.1.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.15.0",
-    "@types/lodash": "^4.17.13",
-    "@types/lodash-es": "^4.17.12",
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/runtime-core": "^3.5.22",
-    "chalk": "^5.6.2",
-    "consola": "^3.4.2",
-    "escape-html": "^1.0.3",
-    "fs": "0.0.1-security",
-    "markdown-it": "^14.1.0",
-    "markdown-it-container": "^4.0.0",
-    "path": "^0.12.7",
-    "prismjs": "^1.30.0",
-    "eslint": "^9.15.0",
-    "eslint-plugin-vue": "^9.31.0",
-    "globals": "^15.12.0",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0",
-    "vite": "^7.1.12",
-    "vite-plugin-dts": "^4.5.4",
-    "vitepress": "^1.6.4",
-    "vue-eslint-parser": "^9.4.3",
-    "vue-tsc": "^2.1.10"
-  }
+    "dependencies": {
+        "@ant-design/icons-vue": "^6.1.0",
+        "@hb-hellotech/hb-ui": "1.2.5-beta.5",
+        "@rollup/plugin-alias": "^4.0.2",
+        "@types/node": "^18.11.7",
+        "@types/throttle-debounce": "^5.0.0",
+        "@vue-office/docx": "^1.6.3",
+        "@vue-office/excel": "^1.7.14",
+        "@vue-office/pdf": "^2.0.10",
+        "@vue-office/pptx": "^1.0.1",
+        "@vueuse/core": "^10.9.0",
+        "ant-design-vue": "^3.2.15",
+        "child_process": "^1.0.2",
+        "dayjs": "^1.11.18",
+        "less": "^4.1.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.23",
+        "rollup-plugin-external-globals": "^0.8.0",
+        "throttle-debounce": "^5.0.0",
+        "vite-plugin-libcss": "^1.0.5",
+        "vue": "^3.5.22",
+        "vue-demi": "^0.14.10",
+        "vue-files-preview": "^1.0.43",
+        "vue-i18n": "^9.2.2",
+        "vue-router": "^4.1.6",
+        "vuedraggable": "4.1.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.15.0",
+        "@types/lodash": "^4.17.13",
+        "@types/lodash-es": "^4.17.12",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vue/runtime-core": "^3.5.22",
+        "chalk": "^5.6.2",
+        "consola": "^3.4.2",
+        "escape-html": "^1.0.3",
+        "eslint": "^9.15.0",
+        "eslint-plugin-vue": "^9.31.0",
+        "fs": "0.0.1-security",
+        "globals": "^15.12.0",
+        "markdown-it": "^14.1.0",
+        "markdown-it-container": "^4.0.0",
+        "path": "^0.12.7",
+        "prismjs": "^1.30.0",
+        "typescript": "^5.6.3",
+        "typescript-eslint": "^8.15.0",
+        "vite": "^7.1.12",
+        "vite-plugin-dts": "^4.5.4",
+        "vitepress": "^1.6.4",
+        "vue-eslint-parser": "^9.4.3",
+        "vue-tsc": "^2.1.10"
+    }
 }