@chenghongyu/xpt-file-viewer 1.1.0

package/src/composables/file/useFileOperator.js

@@ -0,0 +1,347 @@
+import {
+    batchDeleteReq,
+    newFolderReq,
+    renameFileReq, renameFolderReq,
+    moveFolderReq, moveFileReq,
+    copyFileReq, copyFolderReq
+} from "~/api/home/file-operator";
+
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+import useFileData from "~/composables/file/useFileData";
+import useRouterData from "~/composables/useRouterData";
+let { storageKey, currentPath } = useRouterData();
+
+import useFileSelect from "~/composables/file/useFileSelect";
+let { selectRows, selectRow, selectFolders, selectFiles } = useFileSelect();
+
+import useFilePwd from "~/composables/file/useFilePwd";
+let { getPathPwd } = useFilePwd();
+
+import useBatchOperatorResult from "~/composables/file/useBatchOperatorResult";
+let { open:openBatchOperatorResultDialog } = useBatchOperatorResult();
+
+import { ElLoading } from "element-plus";
+
+import selectFolder from "~/components/file/selectFolder";
+
+
+export default function useFileOperator() {
+
+    const { loadFile } = useFileData();
+
+    /**
+     * 批量下载已选择的所有文件
+     * @param {Object} row 已选择的文件
+     */
+    const batchDownloadFile = (row) => {
+        if (storageConfigStore.folderConfig.permission.download === false) {
+            return;
+        }
+        if (!selectRows.value && selectRows.value.length === 0) {
+            ElMessage.warning("请至少选择一个文件");
+            return;
+        }
+
+        let confirmMsg;
+
+        if (row?.name) {
+            confirmMsg = `是否确认下载文件 <span class="text-blue-500">${row.name}</span> ？`;
+        } else if (selectRows.value.length === 1) {
+            confirmMsg = `是否确认下载文件 <span class="text-blue-500">${selectRows.value[0].name}</span> ？`;
+            row = selectRows.value[0];
+        }
+
+
+			function performDownload() {
+				// 单个文件下载, 直接下载
+				if (row?.name) {
+					console.log("进行指定文件下载, 文件:", row);
+					downloadFileUseWindowOpenMode(row.url);
+				}
+			}
+			if (storageConfigStore.globalConfig.enableNormalDownloadConfirm) {
+				ElMessageBox.confirm(confirmMsg, '提示', {
+					dangerouslyUseHTMLString: true,
+					confirmButtonText: '确定',
+					cancelButtonText: '取消',
+					type: 'info',
+					callback: (val) => {
+						let action = '';
+						if (val instanceof Object) {
+							action = val.action;
+						} else if (typeof val === 'string') {
+							action = val;
+						}
+
+						if (action === 'confirm') {
+							performDownload();
+						}
+					}
+				})
+			} else {
+				performDownload();
+			}
+    }
+
+    /**
+     * 使用 windows.open 模式下载文件
+     *
+     * @param url   下载文件 url
+     */
+    const downloadFileUseWindowOpenMode = (url) => {
+        window.open(url);
+    }
+
+    // 新建文件夹
+    const newFolder = (basePath) => new Promise((resolve, reject) => {
+        if (basePath === null || typeof basePath !== 'string') {
+            basePath = currentPath.value;
+        }
+        ElMessageBox.prompt(`在 <b>${basePath}</b> 下创建文件夹，请输入要创建的文件夹名称`, '提示', {
+            dangerouslyUseHTMLString: true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            draggable: true,
+            inputValidator(val) {
+                if (!val) {
+                    return '文件夹名称不能为空';
+                }
+
+                if (val.includes("/")) {
+                    return '文件夹名称不能包含 / (不支持多级创建)';
+                }
+                return true;
+            },
+        }).then(({ value }) => {
+            let param = {
+                storageKey: storageKey.value,
+                path: basePath,
+                name: value
+            }
+            newFolderReq(param).then(() => {
+                ElMessage.success('创建成功');
+                resolve();
+            }).catch(() => {
+                reject();
+            }).finally(() => {
+                loadFile();
+            });
+        }).catch(() => {
+            reject();
+        });
+    });
+
+    // 重命名文件夹
+    const rename = () => {
+        let row = selectRow.value;
+        if (row === null) {
+            ElMessage.warning('请先选中一个文件或文件夹！');
+            return;
+        }
+        if (row.type === 'FOLDER' && !storageConfigStore.folderConfig.metadata.supportRenameFolder) {
+            ElMessage.warning('当前存储源不支持重命名文件夹！');
+            return;
+        }
+
+        ElMessageBox.prompt(`将 <b>${row.name}</b> 修改为：`, '提示', {
+            dangerouslyUseHTMLString: true,
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            inputValue: row.name,
+            inputValidator(val) {
+                return !!val
+            },
+            inputErrorMessage: '模板名称不能为空.'
+        }).then(({value}) => {
+            let param = {
+                storageKey: storageKey.value,
+                path: row.path,
+                name: row.name,
+                newName: value,
+            }
+
+            let reqMethod;
+            if (row.type === 'FILE') {
+                reqMethod = renameFileReq;
+            } else if (row.type === 'FOLDER') {
+                reqMethod = renameFolderReq;
+            }
+
+            const renameLoadingInstance = ElLoading.service({
+                fullscreen: true,
+                text: '重命名中...',
+                background: 'rgba(255, 255, 255, 0.6)'
+            })
+
+            reqMethod(param).then(() => {
+                ElMessage.success('重命名成功');
+            }).finally(() => {
+                renameLoadingInstance.close();
+                loadFile();
+            });
+
+        });
+    }
+
+    // 复制至
+    const copyTo = () => {
+        if (selectFolders.value.length > 0 && !storageConfigStore.folderConfig.metadata.supportCopyFolder) {
+            ElMessage.warning('当前存储源不支持复制文件夹！');
+            return;
+        }
+        moveOrCopy('复制', selectRow.value?.type === 'FILE' ? copyFileReq : copyFolderReq);
+    }
+
+    // 移动至重命名
+    const moveTo = () => {
+        if (selectFolders.value.length > 0 && !storageConfigStore.folderConfig.metadata.supportMoveFolder) {
+            ElMessage.warning('当前存储源不支持移动文件夹！');
+            return;
+        }
+        moveOrCopy('移动', selectRow.value?.type === 'FILE' ? moveFileReq : moveFolderReq);
+    }
+
+    const moveOrCopy = (title, reqFun) => {
+        const nameList = selectRows.value.map(item => item.name);
+        selectFolder(title, storageKey.value, currentPath.value, ({ value:path, callback }) => {
+            if (path === currentPath.value) {
+                ElMessage.warning('你选择的目标文件夹与源文件夹相同！');
+                callback.stopLoading();
+                return;
+            }
+
+            let param = {
+                storageKey: storageKey.value,
+                path: currentPath.value,
+                nameList: nameList,
+                targetPath: path,
+                targetNameList: nameList,
+                srcPathPassword: getPathPwd(currentPath.value),
+                targetPathPassword: getPathPwd(path)
+            }
+
+            reqFun(param).then((res) => {
+                let data = res.data;
+                let hasFail = false;
+                for (let item of data) {
+                    if (item.success === false) {
+                        hasFail = true;
+                    }
+                }
+                if (hasFail) {
+                    ElMessageBox.confirm(`部分文件${title}失败，是否查看详情？`, '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        closeOnClickModal: false,
+                        closeOnPressEscape: false,
+                        type: 'warning'
+                    }).then(() => {
+                        openBatchOperatorResultDialog(data);
+                    });
+                } else {
+                    ElMessage.success(`${title}成功`);
+                }
+            }).finally(() => {
+                callback.stopLoading();
+                callback.closeDialog();
+                loadFile();
+            });
+        });
+    }
+
+    // 删除相关 start
+    const batchDelete = () => {
+        if (!storageConfigStore.permission.delete) {
+            return;
+        }
+
+        if (selectRows.value.length === 0) {
+            ElMessage.warning('请先至少选中一个文件或文件夹！');
+            return;
+        }
+
+        let deleteConfirmMsg = selectRows.value.length === 1 ? '是否确认删除 ' : '是否确认批量删除 ';
+
+        if (selectFolders.value.length > 0) {
+            deleteConfirmMsg += (' ' + selectFolders.value.length + ' 个文件夹');
+        }
+
+        if (selectFolders.value.length > 0 && selectFiles.value.length > 0) {
+            deleteConfirmMsg += '，';
+        }
+
+        if (selectFiles.value.length > 0) {
+            deleteConfirmMsg += (selectFiles.value.length + ' 个文件');
+        }
+
+        if (selectFolders.value.length > 0 && !storageConfigStore.folderConfig.metadata.supportDeleteNotEmptyFolder) {
+            deleteConfirmMsg += ('<span class="font-bold text-red-400">(不支持删除非空文件夹)</span>');
+        }
+
+        deleteConfirmMsg += "?"
+
+        ElMessageBox.confirm(deleteConfirmMsg, '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            draggable: true,
+            dangerouslyUseHTMLString: true,
+            callback: action => {
+                if (action === 'confirm') {
+                    let param = {
+                        storageKey: storageKey.value,
+                        deleteItems: []
+                    };
+
+                    selectRows.value.forEach((item) => {
+                        param.deleteItems.push({
+                            path: item.path,
+                            name: item.name,
+                            type: item.type,
+                            password: getPathPwd(item.path)
+                        });
+                    })
+
+                    // 打开全屏 loading
+                    const loadingInstance = ElLoading.service({
+                        text: '删除中...',
+                        background: 'rgba(0, 0, 0, .3)'
+                    })
+
+                    batchDeleteReq(param).then((res) => {
+                        let data = res.data;
+                        let hasFail = false;
+                        for (let item of data) {
+                            if (item.success === false) {
+                                hasFail = true;
+                            }
+                        }
+                        if (hasFail) {
+                            ElMessageBox.confirm('部分文件删除失败，是否查看详情？', '提示', {
+                                confirmButtonText: '确定',
+                                cancelButtonText: '取消',
+                                closeOnClickModal: false,
+                                closeOnPressEscape: false,
+                                type: 'warning'
+                            }).then(() => {
+                                openBatchOperatorResultDialog(data);
+                            });
+                        } else {
+                            ElMessage.success("删除成功");
+                        }
+                    }).finally(() => {
+                        loadingInstance.close();
+                        loadFile();
+                    });
+                }
+            }
+        });
+    }
+    // 删除相关 end
+
+    return {
+        batchDownloadFile, rename, newFolder, moveTo, copyTo,
+        batchDelete
+    }
+}

package/src/composables/file/useFilePreview.js

@@ -0,0 +1,99 @@
+import { v3ImgPreviewFn } from 'v3-img-preview-enhance'
+import { buildKkFileViewUrl } from "~/utils/models/path";
+
+// 基础依赖引入
+import useGlobalConfigStore from "~/stores/global-config";
+let globalConfigStore = useGlobalConfigStore();
+
+// 基础依赖引入
+import useStorageConfigStore from "~/stores/storage-config";
+const storageConfigStore = useStorageConfigStore();
+
+import useFileDataStore from "~/stores/file-data";
+import useTextViewerDialog from "~/composables/file/useTextViewerDialog";
+import usePdfViewerDialog from "~/composables/file/usePdfViewerDialog";
+import useVideoPlayerDialog from "~/composables/file/useVideoPlayerDialog";
+import useOfficeViewerDialog from "~/composables/file/useOfficeViewerDialog";
+import useThree3dPreviewDialog from "~/composables/file/useThree3dPreviewDialog";
+import useKkFileViewDialog from "~/composables/file/useKkFileViewDialog";
+
+let fileDataStore = useFileDataStore();
+
+const { openDialogWithData: openTextDialog } = useTextViewerDialog();
+const { openDialogWithData: openPdfDialog } = usePdfViewerDialog();
+const { openDialogWithData: openVideoDialog } = useVideoPlayerDialog();
+const { openDialogWithData: openOfficeDialog } = useOfficeViewerDialog();
+const { openDialogWithData: open3DDialog } = useThree3dPreviewDialog();
+const { openDialogWithData: openKkFileViewDialog } = useKkFileViewDialog();
+
+export default function useFilePreview() {
+
+    const openVideo = () => {
+        openVideoDialog(fileDataStore.currentClickRow.name);
+    }
+
+    const openAudio = () => {
+        fileDataStore.updateAudioList(fileDataStore.filterFileByType('audio'));
+    }
+
+    const openImage = (row) => {
+        // 过滤当前页面中所有图片，并记录当前打开的文件的索引位置
+        let images = [];
+        let currIndex = 0;
+        let imagePreviewMode = globalConfigStore.zfileConfig.imagePreview.mode;
+        if (imagePreviewMode === 'only') {
+            images.push(row.url);
+        } else {
+            fileDataStore.filterFileByType('image').forEach((image, index) => {
+                if (row.name === image.name) {
+                    currIndex = index;
+                }
+                images.push(image.url);
+            })
+        }
+
+        v3ImgPreviewFn({
+            images: images,
+            index: currIndex
+        })
+    }
+
+    const openText = () => {
+        openTextDialog(fileDataStore.currentClickRow.name, fileDataStore.currentClickRow.url);
+    }
+
+    const openOffice = () => {
+        openOfficeDialog(fileDataStore.currentClickRow.name);
+    }
+
+    const openPdf = () => {
+        openPdfDialog(fileDataStore.currentClickRow.name, fileDataStore.currentClickRow.url);
+    }
+
+    const open3d = () => {
+        open3DDialog(fileDataStore.currentClickRow.name, fileDataStore.currentClickRow.url);
+    }
+
+    const openKkFileView = (row) => {
+        const kkFileViewUrl = storageConfigStore.globalConfig.kkFileViewUrl;
+        const openMode = storageConfigStore.globalConfig.kkFileViewOpenMode;
+        const finalUrl = buildKkFileViewUrl(row, kkFileViewUrl);
+        if (openMode === 'newTab') {
+            window.open(finalUrl, '_blank');
+        } else {
+            openKkFileViewDialog(row.name, row.url);
+        }
+    }
+
+    return {
+        openVideo,
+        openText,
+        openOffice,
+        openImage,
+        openAudio,
+        openPdf,
+        open3d,
+        openKkFileView
+    }
+
+}

package/src/composables/file/useFilePwd.js

@@ -0,0 +1,138 @@
+import { useStorage } from "@vueuse/core";
+import { minimatch } from 'minimatch'
+import useRouterData from "~/composables/useRouterData";
+import {concatPath, removeDuplicateSeparator} from "~/utils";
+import MessageBox from "~/components/messageBox/messageBox";
+
+let { storageKey, currentPath } = useRouterData()
+
+const zfilePasswordCache = useStorage('zfile-pwd-cache', {});
+const fullZFilePasswordCache = useStorage('zfile-pwd-full-cache', {}, sessionStorage);
+
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+export default function useFilePwd() {
+
+  /**
+   * 弹出目录密码输入框（可配置是否展示“记住密码”）
+   * - Promise 风格：popPassword(options?) => Promise<{ value, checkbox }>
+   * - 兼容旧式：popPassword(onConfirm, onCancel)
+   */
+  const popPassword = (arg1, arg2) => {
+    const isCallbackStyle = typeof arg1 === 'function' || typeof arg2 === 'function';
+    const onConfirm = isCallbackStyle ? arg1 : null;
+    const onCancel = isCallbackStyle ? arg2 : null;
+
+    // 默认配置
+    const opts = isCallbackStyle ? {} : (arg1 || {});
+    const {
+      showRemember = true,
+      defaultRemember = storageConfigStore.globalConfig?.defaultSavePwd,
+      defaultValue = getPathPwd(null, true),
+      title = '提示',
+      message = '此文件夹已加密，请输入密码：',
+      inputPlaceholder = '请输入'
+    } = opts;
+
+    const promise = MessageBox.prompt(message, title, {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      inputType: 'password',
+      inputPlaceholder,
+      checkbox: !!showRemember,
+      defaultChecked: !!defaultRemember,
+      inputDefault: defaultValue || '',
+      checkboxLabel: '记住密码',
+      inputValidator(val) { return !!val },
+      inputErrorMessage: '密码不能为空.'
+    });
+
+    if (isCallbackStyle) {
+      promise.then(({ value, checkbox }) => {
+        onConfirm && onConfirm(value, checkbox);
+      }).catch(() => {
+        onCancel && onCancel();
+      });
+      // 同步返回 undefined（与旧式保持行为，真正结果通过回调）
+      return;
+    }
+
+    return promise.then(({ value, checkbox }) => ({ value, checkbox }));
+  };
+
+  // 向缓存中写入当前路径密码
+  let putPathPwd = (pattern, password, rememberPassword) => {
+    if (pattern) {
+      // 如果表达式开头没写 / ，则自动补全
+      pattern = pattern.startsWith('/') ? pattern : '/' + pattern;
+
+      // 初始化存储源 key
+      if (!zfilePasswordCache.value[storageKey.value]) {
+        zfilePasswordCache.value[storageKey.value]= {};
+      }
+      if (!fullZFilePasswordCache.value[storageKey.value]) {
+        fullZFilePasswordCache.value[storageKey.value]= {};
+      }
+
+      // 修正 glob 表达式兼容性和服务端不同的 bug
+      if (pattern.endsWith("**") && !pattern.endsWith("/**")) {
+        pattern = removeDuplicateSeparator(pattern.substring(0, pattern.length - 2) + "/**");
+        console.log('检测到密码文件夹通配符 ** 前未写 /，自动将其修正为为：', pattern);
+      }
+
+      // 根据是否记住密码，写入不同的缓存
+      if (rememberPassword) {
+        zfilePasswordCache.value[storageKey.value][pattern] = password;
+      }
+      fullZFilePasswordCache.value[storageKey.value][pattern] = password;
+    }
+  };
+
+  // 获取当前路径缓存中的密码
+  let getPathPwd = (path, ignoreTempPassword) => {
+    // 如果没传递 path，则使用当前路径
+    let currentPathValue = path || currentPath.value;
+	// 用户存储源基目录
+	let rootPath = storageConfigStore.user.rootPath;
+    // 自动修正为标准路径
+    currentPathValue = concatPath('/', rootPath, currentPathValue, '/');
+
+    // 如果全量密码缓存为空，则自动初始化为当前密码缓存
+    if (Object.keys(fullZFilePasswordCache.value).length === 0 && Object.keys(zfilePasswordCache.value).length !== 0) {
+      fullZFilePasswordCache.value = JSON.parse(JSON.stringify(zfilePasswordCache.value));
+      console.log('检测到全量密码缓存为空，自动将其初始化为：', fullZFilePasswordCache.value);
+    }
+    // 根据是否需要获取全量密码(含未记住的密码)，选择不同的缓存
+    let cache = ignoreTempPassword ? zfilePasswordCache.value : fullZFilePasswordCache.value;
+
+    for (let storageTag of Object.keys(cache)) {
+      if (storageTag === storageKey.value) {
+        for (let key of Object.keys(cache[storageTag])) {
+          // 如果 key 以 * 结尾，则给 currentPathValue 加上任意字符，以匹配通配符
+          if (key.endsWith('*')) {
+            currentPathValue = currentPathValue + '*';
+          }
+          if (minimatch(currentPathValue, key)) {
+            return cache[storageTag][key];
+          }
+        }
+      }
+    }
+    return '';
+  };
+
+	const clearPwdCache = () => {
+		zfilePasswordCache.value = {};
+		fullZFilePasswordCache.value = {};
+		ElMessage.success('操作成功')
+	}
+
+  return {
+    putPathPwd,
+    getPathPwd,
+		popPassword,
+		clearPwdCache
+  }
+
+}

package/src/composables/file/useFileSelect.js

@@ -0,0 +1,105 @@
+import { computed, ref } from "vue";
+const selectRows = ref([]);
+const selectFun = ref({
+  clearSelection: null,
+  toggleRowSelection: null,
+  toggleAllSelection: null
+})
+
+
+export default function useFileSelect() {
+
+  const initSelectFun = (clearSelection, toggleRowSelection, toggleAllSelection) => {
+    selectFun.value.clearSelection = clearSelection;
+    selectFun.value.toggleRowSelection = toggleRowSelection;
+    selectFun.value.toggleAllSelection = toggleAllSelection;
+  }
+
+  const clearSelection = () => {
+    selectFun.value.clearSelection();
+  }
+
+  const toggleRowSelection = (row, selected) => {
+    if (row?.type === 'BACK') {
+      return;
+    }
+    selectFun.value.toggleRowSelection(row, selected);
+  }
+
+  const toggleAllSelection = () => {
+    selectFun.value.toggleAllSelection();
+  }
+
+  // 文件是否可被选择
+  const checkSelectable = (row) => {
+    return row.type === "FILE" || row.type === "FOLDER";
+  };
+
+  // 当前最后选中的文件行
+  const selectRow = computed(() => {
+    if (selectRows.value.length > 0) {
+      return selectRows.value[selectRows.value.length - 1];
+    } else {
+      return null;
+    }
+  });
+
+  // 当前选中的文件
+  const selectFiles = computed(() => {
+    return selectRows.value.filter((row) => {
+      return row.type === "FILE";
+    });
+  });
+
+  // 当前选中的文件夹
+  const selectFolders = computed(() => {
+    return selectRows.value.filter((row) => {
+      return row.type === "FOLDER";
+    });
+  });
+
+  // 更新选中的文件列表
+  const selectRowsChange = (selection) => {
+    selectRows.value = selection;
+  };
+
+  // 行选中 class
+  const tableRowClassName = ({ row, rowIndex }) => {
+    row.index = rowIndex;
+    return selectRows.value.indexOf(row) !== -1 ? "select-row" : "";
+  };
+
+  // 多选统计信息
+  const selectStatistics = computed(() => {
+    let selectRowsLength = selectRows.value.length;
+    let selectFilesLength = selectFiles.value.length;
+    let selectFoldersLength = selectFolders.value.length;
+
+	let isSelected = selectRowsLength > 0;
+    let isSingleSelect = selectRowsLength === 1;
+    let isMultiSelect = selectRowsLength > 1;
+    let isAllFile = selectFilesLength === selectRowsLength;
+    let isAllFolder = selectFoldersLength === selectRowsLength;
+    let isSingleSelectFile = isSingleSelect && selectFilesLength === 1;
+    let isSingleSelectFolder = isSingleSelect && selectFoldersLength === 1;
+
+    return {
+      isSelected,
+      isSingleSelect,
+      isMultiSelect,
+      isAllFile,
+      isAllFolder,
+      isSingleSelectFile,
+      isSingleSelectFolder
+    };
+  });
+
+  return {
+    initSelectFun,
+    checkSelectable, tableRowClassName, selectRowsChange,
+    selectRow, selectRows,
+    selectFiles, selectFolders,
+    selectStatistics,
+    clearSelection, toggleRowSelection, toggleAllSelection
+  };
+}