@chenghongyu/xpt-file-viewer 1.1.0

package/src/composables/file/useBatchOperatorResult.js

@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+const visible = ref(false);
+const operatorResultList = ref([]);
+export default function useBatchOperatorResult() {
+
+  const open = (list) => {
+    if (list && list.length > 0) {
+      operatorResultList.value = list;
+      visible.value = true;
+    }
+  }
+
+  return {
+    open,
+    visible,
+    operatorResultList
+  }
+
+}

package/src/composables/file/useFileContextMenu.js

@@ -0,0 +1,74 @@
+import { ref } from "vue";
+import "v-contextmenu/dist/themes/default.css";
+
+import useFileSelect from "~/composables/file/useFileSelect";
+const { selectRows, clearSelection, toggleRowSelection } = useFileSelect();
+
+import useRouterData from "~/composables/useRouterData";
+let { storageKey, routeRef } = useRouterData();
+
+import useFileDataStore from "~/stores/file-data";
+let fileDataStore = useFileDataStore();
+
+const contextMenuTargetFile = ref(false);
+const contextMenuTargetBlank = ref(false);
+
+let contextmenuRef;
+
+export default function useFileContextMenu() {
+
+    const showFileMenu = (row, column, event) => {
+        // 在文件页需要存储源 key；在分享页（/share/:shareKey）允许无 storageKey
+        const inShare = !!routeRef.value.params?.shareKey;
+        if (!inShare && !storageKey.value) {
+            return;
+        }
+
+        // 如果右键的不是空白区域，则不显示菜单
+        if (row instanceof Event) {
+            event = row;
+            let parentDom = document.querySelector(".zfile-index-body");
+            let ignoreDom = document.querySelector(".el-dialog");
+            if (!parentDom.contains(event.target) || ignoreDom?.contains(event.target)) {
+                return;
+            }
+            contextMenuTargetBlank.value = true;
+        } else {
+            if (row.type === 'BACK') {
+                return;
+            }
+            fileDataStore.updateCurrentRightClickRow(row);
+
+            if (!selectRows.value.includes(row)) {
+                clearSelection();
+                toggleRowSelection(row, true);
+            }
+            contextMenuTargetFile.value = true;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        contextmenuRef.show({
+            top: event.clientY,
+            left: event.clientX
+        });
+
+        window.onclick = () => {
+            contextmenuRef.hide();
+            contextMenuTargetBlank.value = false;
+            contextMenuTargetFile.value = false;
+        };
+
+        contextmenuRef.$el.hidden = false;
+    }
+
+    const initContextMenu = (ref) => {
+        contextmenuRef = ref.value;
+    }
+
+    return {
+        initContextMenu, showFileMenu, contextMenuTargetFile, contextMenuTargetBlank
+    }
+
+}

package/src/composables/file/useFileData.js

@@ -0,0 +1,243 @@
+import { useTitle } from "@vueuse/core";
+import { reactive, watch, computed, onMounted, onUnmounted, nextTick } from "vue";
+import {ElMessage} from "element-plus";
+import MessageBox from "~/components/messageBox/messageBox";
+import { concatPathAndEncodeAll } from "~/utils";
+
+import useFileContextMenu from "~/composables/file/useFileContextMenu";
+const { contextMenuTargetFile, contextMenuTargetBlank } = useFileContextMenu();
+
+import path from "path-browserify";
+
+import {loadFileListReq, loadStorageConfigReq} from "~/api/home/home";
+
+import useRouterData from "~/composables/useRouterData";
+let { routerRef, fullpath, storageKey, currentPath } = useRouterData()
+
+import useFilePwd from "~/composables/file/useFilePwd";
+let { getPathPwd, putPathPwd, popPassword } = useFilePwd();
+
+import useHeaderStorageList from "~/composables/header/useHeaderStorageList";
+const { storageListAsFileList } = useHeaderStorageList();
+
+import useFileLoading from "~/composables/file/useFileLoading";
+const { loading, firstLoading, basicLoading, skeletonLoading } = useFileLoading();
+
+import useFileDataStore from "~/stores/file-data";
+let fileDataStore = useFileDataStore();
+
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+const title = useTitle(storageConfigStore.globalConfig.siteName);
+
+import useGlobalConfigStore from "~/stores/global-config";
+let globalConfigStore = useGlobalConfigStore();
+
+// 引入文件预览组件
+import useFilePreview from '~/composables/file/useFilePreview';
+const { openAudio, openImage, openOffice, openPdf, openText, openVideo, open3d, openKkFileView } = useFilePreview();
+
+// 文件操作相关
+import useFileOperator from '~/composables/file/useFileOperator';
+
+// ------------- loading start ------------
+
+let skeletonData = reactive([]);
+if (skeletonData.length === 0) {
+    // 动态配置骨架屏行数
+    for (let i = 0; i < globalConfigStore.zfileConfig.skeleton.size; i++) {
+        skeletonData.push({})
+    }
+}
+// ------------- loading end   ------------
+
+
+// 文件列表查询条件
+let searchParam = reactive({
+    path: '',
+    orderBy: '',
+    orderDirection: ''
+});
+
+import useFileSelect from "~/composables/file/useFileSelect";
+let { selectRows, clearSelection } = useFileSelect();
+
+export default function useFileData() {
+
+    // 排序并重新加载数据
+    const sortChangeMethod = ({prop, order}) => {
+        searchParam.orderBy = prop;
+        searchParam.orderDirection = order === "descending" ? "desc" : "asc";
+        loadFile();
+    };
+
+    /**
+     * 加载数据
+     * @param   initParam
+     *              path: 指定加载的路径, 如果不指定则使用路由路径
+     *              password: 指定加载的密码, 如果不指定则获取 path 对应的密码，如果 path 为空，则获取当前路由路径
+     *              rememberPassword: 是否记住密码, 如果不指定则不记住密码
+     */
+    const loadFile = (initParam) => {
+        // 未指定 storageKey 时, 不执行任何操作.
+        if (!storageKey.value) {
+            return;
+        }
+        loading.value = true;
+
+        let loadPath = initParam?.path || currentPath.value;
+
+        let param = initParam || {};
+        param.storageKey = storageKey.value;
+        param.path = loadPath;
+        param.password = param.password || getPathPwd(loadPath, param.init);
+        param.orderBy = searchParam.orderBy || storageConfigStore.globalConfig.defaultSortField;
+        param.orderDirection = searchParam.orderDirection || storageConfigStore.globalConfig.defaultSortOrder;
+
+        let requestStorageId = storageKey.value;
+        loadFileListReq(param).then((response) => {
+            // 将加载成功的密码存储起来.
+            let passwordPattern = response.data.passwordPattern;
+            putPathPwd(passwordPattern, param.password, initParam?.rememberPassword);
+
+            // 如果请求的 storageKey 和当前的 storageKey 不一致
+            // 则表示再加载数据期间，修改了 storageKey, 为了防止数据错乱, 取消本次渲染.
+            if (requestStorageId !== storageKey.value) {
+                return;
+            }
+
+            let fileList = response.data.files;
+
+            // 如果不是根路径, 则构建 back 上级路径的数据.
+            if (loadPath !== '' && loadPath !== '/') {
+                let parentPathName = path.basename(path.resolve(currentPath.value, "../"));
+                fileList.unshift({
+                    name: parentPathName ? parentPathName : '/',
+                    path: path.resolve(loadPath, '../'),
+                    type: 'BACK'
+                });
+            }
+
+            fileDataStore.updateFileList(fileList);
+            loading.value = false;
+            firstLoading.value = true;
+            selectRows.value = [];
+
+            // 修改标题
+            if (fullpath.value) {
+                title.value = storageConfigStore.globalConfig.siteName + ' | ' + fullpath.value[fullpath.value.length - 1];
+            } else {
+                title.value = storageConfigStore.globalConfig.siteName + ' | 首页';
+            }
+
+            loadFileConfig(param);
+        }).catch((error) => {
+            const onConfirm = (password, rememberPassword) => {
+                loadFile({password, rememberPassword});
+            };
+            const onCancel = () => {
+                if ((loadPath === '/' || loadPath === '') && storageConfigStore.globalConfig.rootShowStorage === true) {
+                    fileDataStore.updateFileList(storageListAsFileList.value);
+                    routerRef.value.push("/");
+                    title.value = storageConfigStore.globalConfig.siteName + ' | 首页';
+                    loading.value = false;
+                } else {
+                    let parentPath = path.resolve(loadPath, '../');
+                    routerRef.value.push("/" + storageKey.value + parentPath);
+                }
+            };
+            let data = error.response.data;
+            // 如果需要密码或密码错误进行提示, 并弹出输入密码的框.
+            if (data.code === constant.responseCode.INVALID_PASSWORD) {
+                ElMessage.warning('密码错误，请重新输入！');
+                popPassword(onConfirm, onCancel);
+            } else if (data.code === constant.responseCode.REQUIRED_PASSWORD) {
+                popPassword(onConfirm, onCancel);
+            } else {
+                ElMessage.error(data.msg);
+            }
+        });
+    }
+
+    // 加载存储器设置
+    const loadFileConfig = (loadFileParam) => {
+
+        let param = {
+            storageKey: storageKey.value,
+            path: currentPath.value,
+            password: loadFileParam.password
+        }
+        loadStorageConfigReq(param).then((res) => {
+            storageConfigStore.updateFolderConfig(res.data);
+
+            // 如果切换了存储器 ID, 则
+            if (storageKey.value !== fileDataStore.oldStorageKey) {
+                fileDataStore.updateOldStorageKey(storageKey.value);
+            }
+
+        });
+    }
+
+
+    // 点击文件时，判断是文件夹则进入文件夹，是文件则进行预览
+    const openRow = (row, fromContextmenu) => {
+        if (!row.name) {
+            return;
+        }
+
+        // 当右键菜单打开时, 点击文件时, 不进行任何操作. 应该关闭右键菜单.
+        if (!fromContextmenu && (contextMenuTargetFile.value === true || contextMenuTargetBlank.value === true)) {
+            return;
+        }
+
+        fileDataStore.updateCurrentClickRow(row);
+        // 如果是文件且格式支持预览, 则进行预览, 格式不支持预览, 则直接进行下载 (ftp 模式不支持预览, 全部是下载)
+        if (row.type === 'FILE') {
+            const { batchDownloadFile } = useFileOperator();
+
+            // 获取文件类型
+            let fileType = row.fileType;
+            if (storageConfigStore.folderConfig.permission.preview) {
+                switch (fileType) {
+                    case 'video': openVideo(); break;
+                    case 'image': openImage(row); break;
+                    case 'text': openText(); break;
+                    case 'audio': openAudio(row); break;
+                    case 'office': openOffice(row); break;
+                    case 'pdf': openPdf(row); break;
+                    case 'three3d': open3d(row); break;
+                    case 'kkfileview': openKkFileView(row); break;
+                    default: batchDownloadFile(row);
+                }
+            } else {
+                batchDownloadFile(row);
+            }
+
+            // clearSelection();
+        } else {
+            if (row.type === 'ROOT') {
+                routerRef.value.push(row.path);
+                storageConfigStore.folderConfig.readmeText = '';
+            } else if (row.type === 'BACK') {
+                let fullPath = concatPathAndEncodeAll("/", storageKey.value, row.path);
+                routerRef.value.push(fullPath);
+                storageConfigStore.folderConfig.readmeText = '';
+            } else {
+                let fullPath = concatPathAndEncodeAll("/", storageKey.value, row.path, row.name);
+                routerRef.value.push(fullPath);
+                storageConfigStore.folderConfig.readmeText = '';
+            }
+        }
+    }
+
+
+    // ------------- folder password handled by useFilePwd  ------------
+
+    return {
+        loadFile, openRow, searchParam, sortChangeMethod,
+        skeletonLoading, skeletonData, basicLoading, loading,
+        loadFileConfig
+    }
+
+}

package/src/composables/file/useFileLink.js

@@ -0,0 +1,175 @@
+import { ref, reactive, computed } from 'vue'
+import { concatPath, fileSizeFormat, generateQRCode } from "~/utils";
+import { batchGeneratePathLinkReq, batchGenerateShortLinkReq } from "~/api/home/home";
+
+import { toClipboard } from '@soerenmartius/vue3-clipboard'
+import { rendererRect, rendererRound,
+    rendererDSJ, rendererLine, rendererFuncB } from 'beautify-qrcode';
+
+const generateLinkLoading = ref(false);
+const generateLinkDialogVisible = ref(false);
+const generateLinkFormData = reactive({
+    expireTime: null,
+});
+const currentLinkDialogType = ref(''); // 当前链接弹窗类型, 可以为 shortLink 或 pathLink
+
+import useRouterData from "~/composables/useRouterData";
+let { storageKey } = useRouterData()
+
+const dataList = ref([]);
+let data = computed(() => {
+    return dataList.value.length > 0 ? dataList.value[0] : null;
+});
+let generateLinkResultDialogVisible = ref(false);
+let generateLinkResultLoading = ref(false);
+
+const linkDialogVisible = computed(() => {
+    return generateLinkDialogVisible.value && generateLinkResultDialogVisible.value;
+});
+
+export default function useFileLink() {
+
+    /*
+     * 打开生成链接弹窗
+     */
+    const openGenerateLinkDialog = (type) => {
+        currentLinkDialogType.value = type;
+        if (type === 'pathLink') {
+            openGenerateLinkResultDialog();
+        } else {
+            generateLinkDialogVisible.value = true;
+        }
+    };
+
+    /**
+     * 关闭生成链接弹窗
+     */
+    const closeGenerateLinkDialog = () => {
+        generateLinkDialogVisible.value = false;
+    };
+
+    /**
+     * 提交生成链接表单
+     */
+    const submitGenerateLinkForm = () => {
+        closeGenerateLinkDialog();
+        openGenerateLinkResultDialog();
+    };
+
+
+
+    /**
+     * 打开直链生成结果弹窗
+     */
+    const openGenerateLinkResultDialog = () => {
+        generateLinkResultDialogVisible.value = true;
+    }
+
+    /**
+     *  复制直链
+     */
+    let copyText = (text) => {
+        toClipboard(text).then(() => {
+            ElMessage.success('复制成功');
+        });
+    }
+
+    /**
+     * 生成直链
+     *
+     * @param files          要生成的直链列表
+     */
+    const generateALlLink = async (files) => {
+        generateLinkResultLoading.value = true;
+
+        let pathLinkList = [], shortLinkList = [];
+        if (currentLinkDialogType.value === 'pathLink' || currentLinkDialogType.value === 'all') {
+            pathLinkList = await batchGetFilePathLink(files);
+        }
+
+        if (currentLinkDialogType.value === 'shortLink' || currentLinkDialogType.value === 'all') {
+            shortLinkList = await batchGetShortLink(files)
+        }
+
+        files.forEach((file, index) => {
+            let item = {
+                name: file.name,
+                size: fileSizeFormat(file.size),
+                time: file.time,
+                pathLink: pathLinkList[index],
+                shortLink: shortLinkList[index]
+            }
+
+            if (files.length === 1) {
+                // 生成二维码
+                const qrcodeOptions = {
+                    text: currentLinkDialogType.value === 'pathLink' ? pathLinkList[index] : shortLinkList[index],
+                    correctLevel: 2,
+                    isSpace: false
+                }
+                item.qrcode = {
+                    a1: generateQRCode(qrcodeOptions, rendererRect),
+                    a2: generateQRCode(qrcodeOptions, rendererRound),
+                    sp1: generateQRCode(qrcodeOptions, rendererDSJ),
+                    aa1: generateQRCode(qrcodeOptions, rendererLine),
+                    ab2: generateQRCode(qrcodeOptions, rendererFuncB)
+                }
+                item.currentImg = item.qrcode.a1;
+            }
+            dataList.value.push(item);
+        })
+        generateLinkResultLoading.value = false;
+    }
+
+    const batchGetFilePathLink = async (files) => {
+        let pathLinkList = [];
+        let param = {
+            storageKey: storageKey.value,
+            paths: [],
+            expireTime: 0
+        }
+        files.forEach((file) => {
+            let pathAndName = concatPath(file.path, file.name);
+            param.paths.push(pathAndName);
+        })
+        let res = await batchGeneratePathLinkReq(param);
+        res.data.forEach((item) => {
+            pathLinkList.push(item.address);
+        })
+        return pathLinkList;
+    }
+
+    const batchGetShortLink = async (files) => {
+        let shortLinkList = [];
+        let param = {
+            storageKey: storageKey.value,
+            paths: [],
+            expireTime: generateLinkFormData.expireTime
+        }
+        files.forEach((file) => {
+            let pathAndName = concatPath(file.path, file.name);
+            param.paths.push(pathAndName);
+        })
+        let res = await batchGenerateShortLinkReq(param);
+        res.data.forEach((item) => {
+            shortLinkList.push(item.address);
+        })
+        return shortLinkList;
+    }
+
+    return {
+        currentLinkDialogType,
+        generateLinkDialogVisible,
+        openGenerateLinkDialog,
+        closeGenerateLinkDialog,
+        generateLinkFormData,
+        generateLinkLoading,
+        submitGenerateLinkForm,
+
+        linkDialogVisible,
+        generateLinkResultDialogVisible, generateLinkResultLoading, openGenerateLinkResultDialog, copyText, data, dataList, generateALlLink,
+        batchGetFilePathLink
+
+    }
+
+}

package/src/composables/file/useFileLoading.js

@@ -0,0 +1,41 @@
+import { ref, computed } from "vue";
+const loading = ref(false);
+const firstLoading = ref(false);
+
+import useGlobalConfigStore from "~/stores/global-config";
+let globalConfigStore = useGlobalConfigStore();
+
+// 是否启用骨架屏 loading
+let skeletonLoading = computed(() => {
+  let skeletonEnable = globalConfigStore.zfileConfig.skeleton.enable;
+  let skeletonShow = globalConfigStore.zfileConfig.skeleton.show;
+
+  // 如果启用了骨架屏
+  if (skeletonEnable) {
+    // 如果骨架屏模式为是 '始终加载'
+    if (skeletonShow === 'always') {
+      return loading.value;
+    } else {  // 如果骨架屏模式为是仅 '首次加载'
+      // 已经首次加载后, 则不使用骨架屏
+      return firstLoading.value ? false : loading.value;
+    }
+  } else {    // 如果未启用骨架屏, 则直接返回 false
+    return false;
+  }
+});
+
+// 是否显示普通 loading
+let basicLoading = computed(() => {
+  return skeletonLoading.value ? false : loading.value;
+});
+
+export default function useFileLoading() {
+
+  return {
+    loading,
+    firstLoading,
+    skeletonLoading,
+    basicLoading
+  };
+
+}

package/src/composables/file/useFileLongPressEvent.js

@@ -0,0 +1,71 @@
+import { onLongPress } from '@vueuse/core'
+
+import uaBrowser from 'ua-browser'
+const browserInfo = uaBrowser();
+
+import useFileDataStore from "~/stores/file-data";
+let fileDataStore = useFileDataStore();
+
+import useFileContextMenu from "~/composables/file/useFileContextMenu";
+const { showFileMenu } = useFileContextMenu();
+
+/**
+ * 绑定元素长按事件
+ * @param 	elementRef		可长按区域元素引用
+ * @param 	parseRowFunc	解析长按数据行的方法
+ */
+const bindElementLongPressEvent = (elementRef, parseRowFunc) => {
+	function onLongPressCallbackHook(e) {
+		const row = parseRowFunc(e, elementRef);
+		if (row) {
+			showFileMenu(row, null, e)
+		} else {
+			showFileMenu(e)
+		}
+	}
+
+	onLongPress(
+		elementRef,
+		onLongPressCallbackHook,
+		{
+			modifiers: {
+				prevent: true,
+				stop: true,
+				capture: true
+			}
+		}
+	)
+}
+
+/**
+ * 解析 el-table 下长按行数据
+ * @param e				长按事件对象
+ * @param elementRef	可长按区域元素引用
+ */
+const parseElTableRowFunc = (e, elementRef) => {
+	const target = e.target;
+	const ListTable = elementRef.value.querySelector('#ListTable')
+	let row = null;
+	if (ListTable.contains(target)) {
+		let rowEle = target.closest('.el-table__row')
+		if (rowEle) {
+			let children = Array.from(rowEle.parentNode.children);
+			let index = children.indexOf(rowEle);
+			row = fileDataStore.fileList[index];
+		}
+	}
+	return row;
+}
+
+export default function useFileLongPressEvent(elRef) {
+
+	onMounted(() => {
+		// Safari 浏览器在移动端长按事件 (因为不支持 contextmenu 事件)
+		const isIOS = browserInfo.os === 'iOS';
+		const isIPAD = browserInfo.os === 'MacOS' && browserInfo.device === 'Tablet';
+		if (isIOS || isIPAD) {
+			bindElementLongPressEvent(elRef, parseElTableRowFunc);
+		}
+	})
+
+}