@chenghongyu/xpt-file-viewer 1.1.0

package/src/composables/file/useKkFileViewDialog.js

@@ -0,0 +1,24 @@
+import useDialog from "~/components/common/dialog/useDialog";
+import { ref } from "vue";
+
+const { visible, openDialog } = useDialog();
+
+const name = ref("");
+const url = ref(""); // kkfileview 需要文件的完整 URL
+
+export default function useKkFileViewDialog() {
+
+  // 接收文件名和文件URL
+  const openDialogWithData = (_name, _url) => {
+    name.value = _name;
+    url.value = _url;
+    openDialog();
+  }
+
+  return {
+    openDialogWithData,
+    visible,
+    name,
+    url
+  };
+}

package/src/composables/file/useOfficeViewerDialog.js

@@ -0,0 +1,20 @@
+import { ref } from "vue";
+import useDialog from "~/components/common/dialog/useDialog";
+
+const { visible, openDialog } = useDialog();
+
+const name = ref("");
+
+export default function useOfficeViewerDialog() {
+
+  const openDialogWithData = (_name) => {
+    name.value = _name;
+    openDialog();
+  }
+
+  return {
+    openDialogWithData,
+    visible,
+    name
+  };
+}

package/src/composables/file/usePdfViewerDialog.js

@@ -0,0 +1,22 @@
+import useDialog from "~/components/common/dialog/useDialog";
+import { ref } from "vue";
+const { visible, openDialog } = useDialog();
+
+const name = ref("");
+const url = ref("");
+
+export default function usePdfViewerDialog() {
+
+  const openDialogWithData = (_name, _url) => {
+    name.value = _name;
+    url.value = _url;
+    openDialog();
+  }
+
+  return {
+    openDialogWithData,
+    visible,
+    name,
+    url
+  };
+}

package/src/composables/file/useShareActions.js

@@ -0,0 +1,94 @@
+import { toClipboard } from '@soerenmartius/vue3-clipboard'
+import { concatPath, getFileType, buildShareBasePath } from '~/utils'
+import { getShareFileDownloadUrlReq } from '~/api/home/share'
+
+import useRouterData from '~/composables/useRouterData'
+const { routeRef, routerRef } = useRouterData()
+
+import useFileDataStore from '~/stores/file-data'
+const { updateCurrentClickRow } = useFileDataStore()
+
+import useFilePreview from '~/composables/file/useFilePreview'
+const {
+	openAudio,
+	openImage,
+	openOffice,
+	openPdf,
+	openText,
+	openVideo,
+	open3d,
+	openKkFileView,
+} = useFilePreview()
+
+import useShareData from '~/composables/share/useShareData'
+const { sharePassword } = useShareData()
+
+export default function useShareActions() {
+	const shareKey = () => routeRef.value?.params?.shareKey
+	const pwd = () => sharePassword?.value || routeRef.value?.query?.pwd
+	const currentPath = () => routeRef.value?.query?.path || '/'
+
+	const buildDownloadUrl = (row) => {
+		const key = shareKey()
+		if (!key || !row?.name) return ''
+		const fullPath = concatPath(row.path, row.name)
+		return getShareFileDownloadUrlReq(key, fullPath, pwd())
+	}
+
+	const openFolder = (row) => {
+		if (!row?.name) return
+		const base = buildShareBasePath(shareKey())
+		const cur = currentPath()
+		const newPath = concatPath(cur === '/' ? '' : cur, row.name)
+		routerRef.value.push({
+			path: base,
+			query: { ...(routeRef.value?.query || {}), path: newPath, pwd: pwd() },
+		})
+	}
+
+	const previewFile = (row) => {
+		const url = buildDownloadUrl(row)
+		const rowWithUrl = { ...row, url }
+		updateCurrentClickRow(rowWithUrl)
+		const ft = getFileType(row.name)
+		switch (ft) {
+			case 'video':
+				return openVideo()
+			case 'image':
+				return openImage(rowWithUrl)
+			case 'text':
+				return openText()
+			case 'audio':
+				return openAudio()
+			case 'office':
+				return openOffice()
+			case 'pdf':
+				return openPdf()
+			case 'three3d':
+				return open3d()
+			case 'kkfileview':
+				return openKkFileView(rowWithUrl)
+			default:
+				window.open(url, '_blank')
+		}
+	}
+
+	const downloadFile = (row) => {
+		const url = buildDownloadUrl(row)
+		if (url) window.open(url, '_blank')
+	}
+
+	const copyDownloadLink = async (row) => {
+		const url = buildDownloadUrl(row)
+		if (!url) return
+		await toClipboard(url)
+		ElMessage.success('下载链接已复制')
+	}
+
+	return {
+		openFolder,
+		previewFile,
+		downloadFile,
+		copyDownloadLink,
+	}
+}

package/src/composables/file/useShareTableOperator.js

@@ -0,0 +1,84 @@
+import { concatPath, buildShareBasePath } from "~/utils";
+import useRouterData from "~/composables/useRouterData";
+import { buildTableOperator } from "~/composables/file/useTableOperator";
+
+import useFileDataStore from "~/stores/file-data";
+const fileDataStore = useFileDataStore();
+
+import useFileContextMenu from "~/composables/file/useFileContextMenu";
+const { contextMenuTargetFile, contextMenuTargetBlank } = useFileContextMenu();
+
+import useShareActions from "~/composables/file/useShareActions";
+const { previewFile, downloadFile } = useShareActions();
+
+import useFileSelect from "~/composables/file/useFileSelect";
+const { clearSelection } = useFileSelect();
+
+import useShareData from "~/composables/share/useShareData";
+const { sharePassword } = useShareData();
+
+import useStorageConfigStore from "~/stores/storage-config";
+const storageConfigStore = useStorageConfigStore();
+
+export default function useShareTableOperator() {
+  const { routeRef, routerRef } = useRouterData();
+  const shareKey = computed(() => routeRef.value?.params?.shareKey);
+
+  const getCurrentPath = () => {
+    return routeRef.value?.query?.path || '/';
+  }
+
+  const openRow = (row) => {
+    if (!row?.name) return;
+
+    // 当右键菜单打开时，双击不触发打开动作，保持与文件页一致
+    if (contextMenuTargetFile.value === true || contextMenuTargetBlank.value === true) {
+      return;
+    }
+
+    const pwd = sharePassword?.value || routeRef.value?.query?.pwd;
+    const currentPath = getCurrentPath();
+
+    if (row.type === 'FOLDER') {
+      const newPath = concatPath(currentPath === '/' ? '' : currentPath, row.name);
+      routerRef.value.push({ path: buildShareBasePath(shareKey.value), query: { ...(routeRef.value?.query || {}), path: newPath, pwd } });
+      return;
+    }
+
+    if (row.type === 'BACK') {
+      const parts = (currentPath || '/').split('/').filter(Boolean);
+      parts.pop();
+      const parentPath = '/' + parts.join('/');
+      routerRef.value.push({ path: buildShareBasePath(shareKey.value), query: { ...(routeRef.value?.query || {}), path: parentPath === '//' ? '/' : parentPath, pwd } });
+      return;
+    }
+
+    // 文件：遵循主站逻辑，先尝试预览，权限不足时回退为下载
+    const permissions = storageConfigStore.folderConfig?.permission || {};
+    const canPreviewType = row.preview === true || !!row.fileType; // fileList getter 会填充
+    const allowPreview = permissions.preview;
+    const allowDownload = permissions.download;
+
+    if (!allowPreview && !allowDownload) {
+      return;
+    }
+
+    fileDataStore.updateCurrentClickRow(row);
+
+    let acted = false;
+    if (canPreviewType && allowPreview) {
+      previewFile(row);
+      acted = true;
+    } else if (allowDownload) {
+      downloadFile(row);
+      acted = true;
+    }
+
+    if (acted) {
+      clearSelection();
+    }
+  }
+
+  // 复用通用表格行为（选择、拖拽、hover、双击），仅替换 openRow
+  return buildTableOperator(openRow);
+}

package/src/composables/file/useTableOperator.js

@@ -0,0 +1,211 @@
+import { useKeyModifier } from '@vueuse/core'
+
+import { isMobile, isNotMobile } from "~/utils";
+
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+import useFileDataStore from "~/stores/file-data";
+let fileDataStore = useFileDataStore();
+
+// 按键监听
+const mateState = useKeyModifier('Meta');
+const controlState = useKeyModifier('Control');
+const shiftState = useKeyModifier('Shift');
+
+// 是否按住了 Ctrl(Windows) 或者 Command(Mac) 键
+let isMultiSelectState = computed(() => {
+    return mateState.value || controlState.value;
+});
+
+import useFileOperator from "~/composables/file/useFileOperator";
+let { batchDelete } = useFileOperator();
+
+import useFileData from "~/composables/file/useFileData";
+const { openRow: openRowDefault } = useFileData();
+
+import useFileLoading from "~/composables/file/useFileLoading";
+const { skeletonLoading } = useFileLoading();
+
+import useFileSelect from "~/composables/file/useFileSelect";
+const { selectRows, selectRow, clearSelection, toggleRowSelection, toggleAllSelection } = useFileSelect();
+
+// ctrl + a 全选
+window.addEventListener("keydown", function(e) {
+    if (e.key === 'Escape' && allowShortcuts()) {
+        clearSelection();
+    } else if (e.key === 'a' && (e.metaKey || e.ctrlKey) && allowShortcuts()) {
+        e.preventDefault();
+        toggleAllSelection();
+    } else if (e.key === 'Delete' && allowShortcuts()) {  // 如果按了删除键，且当前状态允许快捷键操作
+        if (batchDelete && selectRows?.value?.length > 0) {
+            e.preventDefault();
+            batchDelete();
+        }
+    }  else if (e.key === 'Backspace' && allowShortcuts()) {  // 如果按了删除键，且当前状态允许快捷键操作
+        if (fileDataStore.fileList.length > 0 && fileDataStore.fileList[0].type === 'BACK') {
+            tableClickRow(fileDataStore.fileList[0]);
+        }
+    }
+}, false);
+
+export const allowShortcuts = () => {
+    // 仅鼠标悬浮在 table 上时且没有打开 dialog 时，才允许快捷键操作.
+    return hoverBody() && hasDialog() === false;
+}
+
+// 是否悬浮在首页上
+export const hoverBody = () => {
+    // 仅鼠标悬浮在 table 上时且没有打开 dialog 时，才允许快捷键操作.
+    return document.querySelector(".zfile-index-body:hover")
+}
+
+// 当前是否打开了 dialog
+export const hasDialog = () => {
+    return !!document.querySelector(".el-popup-parent--hidden")
+}
+
+// 当前是否聚焦在密码输入框
+export const hasPasswordInputFocus = () => {
+    return document.querySelector(".is-message-box .el-input__inner") === document.activeElement;
+}
+
+
+// 当前是否聚焦在搜索输入框
+export const hasSearchInputFocus = () => {
+    return document.querySelector(".zfile-search-input .el-input__inner") === document.activeElement;
+}
+
+
+// 拖拽选择相关
+// 开始拖拽的文件行索引
+const startDragClickIndex = ref(-1);
+// 结束拖拽的文件行索引
+const endDragClickIndex = ref(-1);
+// 是否按下鼠标左键
+import { useMousePressed } from '@vueuse/core'
+const { pressed } = useMousePressed()
+
+watch(() => pressed.value, (value, oldValue) => {
+    // 如果之前是点击状态, 现在松开了则清除记录的拖拽索引
+    if (value === false && oldValue === true) {
+        startDragClickIndex.value = -1;
+        endDragClickIndex.value = -1;
+    }
+})
+
+
+let tableClickRow;
+
+export function buildTableOperator(openRow) {
+
+    // 文件单击事件
+    const tableClickRow = (row, event) => {
+        if (event === undefined) {
+            openRow(row);
+            return;
+        }
+
+        let isClickSelection = event.type === 'selection';
+
+        // 如果点击的是文件或文件夹, 且点击的不是 checkbox 列, 且操作习惯是单击打开, 则打开文件/文件夹
+        if (!isClickSelection &&
+					(
+						(isNotMobile.value && storageConfigStore.globalConfig.fileClickMode === 'click')
+						||
+						(isMobile.value && storageConfigStore.globalConfig.mobileFileClickMode === 'click')
+					)
+				) {
+            openRow(row);
+            return;
+        }
+
+        // 加载骨架屏时，点击无效.
+        if (skeletonLoading.value) {
+            return;
+        }
+
+        let isClickSelf = selectRows.value.length === 1 && selectRow.value?.name === row.name;
+
+        // 如果按住了 shift 选中
+        if (shiftState.value) {
+
+            // 上一个选择的 index
+            let prevSelectIndex = fileDataStore.fileList.findIndex(value => value.name === selectRow.value.name);
+
+            // 如果选中行之前也按 shift 选中过行，表示要进行多选
+            if (prevSelectIndex !== null) {
+                let currentShiftIndex = fileDataStore.fileList.findIndex(value => value.name === row.name);
+
+                let start = Math.min(currentShiftIndex, prevSelectIndex);
+                let end = Math.max(currentShiftIndex, prevSelectIndex);
+
+                for (let i = start + 1; i < end; i++) {
+                    let item = fileDataStore.fileList[i];
+                    toggleRowSelection(item, true);
+                }
+            }
+        }
+        // 如果不是以下情况，则取消所有选择：
+        //      1. 多选状态：按住 command (Mac) 或 Ctrl (Windows)
+        //      2. 选中当前文件: 如目前只选中了一个文件，且就是当前文件, 则不需要取消所有选择, 取消后, 无法 toggle 当前行.
+        //      3. 点击的区域不是 selection, 如果点击的是 selection, 则可能为误触, 实际想点击的是 checkbox
+        else if (!isMultiSelectState.value && !isClickSelf && !isClickSelection) {
+            clearSelection();
+        }
+        toggleRowSelection(row);
+    }
+
+    // 文件双击事件
+    const tableDbClickRow = (row) => {
+        // 加载骨架屏时，点击无效.
+        if (skeletonLoading.value) {
+            return;
+        }
+        openRow(row);
+    }
+
+    // 进入悬浮事件
+    const tableHoverRow = (row, column, cell, event) => {
+        // 如果当前是点击状态，且开始拖拽选中索引不为 -1, 表示要进行拖拽了.
+        if (event.buttons === 1 && startDragClickIndex.value !== -1) {
+            // 将开始拖拽的行选中
+            if (endDragClickIndex.value === -1) {
+                clearSelection();
+                let item = fileDataStore.fileList[startDragClickIndex.value];
+                toggleRowSelection(item, true);
+            }
+
+
+            let newEndDragClickIndex = row.index;
+
+            let oldEndDragClickIndex = endDragClickIndex.value >= 0 ? endDragClickIndex.value : newEndDragClickIndex - 1;
+
+            // 可能是倒序拖拽的，所以要区分 start 和 end
+            let start = Math.min(oldEndDragClickIndex, newEndDragClickIndex);
+            let end = Math.max(oldEndDragClickIndex, newEndDragClickIndex);
+            for (let i = start; i <= end; i++) {
+                let item = fileDataStore.fileList[i];
+                toggleRowSelection(item, true);
+            }
+
+            endDragClickIndex.value = newEndDragClickIndex;
+        }
+    }
+
+    // 离开悬浮事件
+    const tableLeaveRow = (row, column, cell, event) => {
+        if (event.buttons === 1 && startDragClickIndex.value === -1) {
+            startDragClickIndex.value = row.index;
+        }
+    }
+
+    return {
+        tableClickRow, tableDbClickRow,
+        tableHoverRow, tableLeaveRow
+    }
+}
+
+export default function useTableOperator() {
+    return buildTableOperator(openRowDefault);
+}

package/src/composables/file/useTextViewerDialog.js

@@ -0,0 +1,22 @@
+import useDialog from "~/components/common/dialog/useDialog";
+import { ref } from "vue";
+const { visible, openDialog} = useDialog();
+
+const name = ref("");
+const url = ref("");
+
+export default function useTextViewerDialog() {
+
+  const openDialogWithData = (_name, _url) => {
+    name.value = _name;
+    url.value = _url;
+    openDialog();
+  }
+
+  return {
+    openDialogWithData,
+    visible,
+    name,
+    url
+  };
+}

package/src/composables/file/useThree3dPreviewDialog.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+import useDialog from "~/components/common/dialog/useDialog";
+
+const { visible, openDialog } = useDialog();
+
+const name = ref("");
+const url = ref("");
+
+export default function useThree3dPreviewDialog() {
+
+  const openDialogWithData = (_name, _url) => {
+    name.value = _name;
+    url.value = _url;
+    openDialog();
+  }
+
+  return {
+    openDialogWithData,
+    visible,
+    name,
+    url
+  };
+}

package/src/composables/file/useVideoPlayerDialog.js

@@ -0,0 +1,19 @@
+import { ref } from "vue";
+import useDialog from "~/components/common/dialog/useDialog";
+
+const { visible, openDialog } = useDialog();
+
+const name = ref("");
+
+export default function useVideoPlayerDialog() {
+  const openDialogWithData = (_name) => {
+    name.value = _name;
+    openDialog();
+  }
+
+  return {
+    openDialogWithData,
+    visible,
+    name
+  };
+}

package/src/composables/header/useHeaderBreadcrumb.js

@@ -0,0 +1,111 @@
+import { concatPathAndEncodeAll, buildShareBasePath } from "~/utils";
+import useHeaderStorageList from "./useHeaderStorageList";
+
+import useStorageConfigStore from "~/stores/storage-config";
+let storageConfigStore = useStorageConfigStore();
+
+import useRouterData from "~/composables/useRouterData";
+let { fullpath, storageKey, routeRef } = useRouterData();
+
+
+
+// 面包屑数据
+let breadcrumbData = ref([]);
+let initialized = false;
+export default function useBreadcrumb() {
+
+    let rootShowStorage = storageConfigStore.globalConfig.rootShowStorage;
+
+    // 构建面包屑
+    const buildBreadcrumbData = () => {
+        // 1) 分享页面包屑（/share/:shareKey）
+        const shareKey = routeRef.value?.params?.shareKey;
+        if (shareKey) {
+            const pwd = routeRef.value?.query?.pwd;
+            const curPath = routeRef.value?.query?.path || '/';
+            const base = buildShareBasePath(shareKey);
+
+            const items = [];
+            // 根：分享
+            items.push({
+                name: '分享',
+                href: `${base}?${pwd ? `pwd=${encodeURIComponent(pwd)}&` : ''}path=/`,
+                disable: false
+            });
+
+            if (curPath !== '/') {
+                let acc = '';
+                curPath.split('/').filter(Boolean).forEach((part, index, arr) => {
+                    acc += '/' + part;
+                    items.push({
+                        name: part,
+                        href: `${base}?${pwd ? `pwd=${encodeURIComponent(pwd)}&` : ''}path=${encodeURIComponent(acc)}`,
+                        disable: index === arr.length - 1
+                    })
+                });
+            }
+
+            breadcrumbData.value = items;
+        } else {
+            // 2) 普通文件页面包屑
+            if (!rootShowStorage && !storageKey.value) {
+                breadcrumbData.value = [];
+                return;
+            }
+            breadcrumbData.value = [
+                {
+                    name: storageConfigStore.globalConfig.siteHomeName || '首页',
+                    href: rootPath.value,
+                    disable: false
+                }
+            ];
+
+            // 如果为包含根目录模式，则面包屑显示驱动器
+            if (rootShowStorage) {
+                let { findStorageByKey } = useHeaderStorageList();
+                let storageByKey = findStorageByKey(storageKey.value);
+                if (storageByKey) {
+                    breadcrumbData.value.push({
+                        name: storageByKey.name,
+                        href: concatPathAndEncodeAll('/', storageByKey.key)
+                    })
+                }
+            }
+
+            if (fullpath.value) {
+                fullpath.value.forEach((item, index, arr) => {
+                    if (item) {
+                        let breadcrumbItem = {
+                            name: item,
+                            href: concatPathAndEncodeAll('/', storageKey.value, arr.slice(0, index + 1).join('/')),
+                            disable: index === arr.length - 1
+                        }
+                        breadcrumbData.value.push(breadcrumbItem);
+                    }
+                })
+            }
+        }
+    };
+
+    /**
+     * 根目录路径
+     */
+    let rootPath = computed(() => '/' + (rootShowStorage ? '' : storageKey.value));
+
+    if (!initialized) {
+        // 普通文件页相关
+        watch(() => fullpath.value, () => buildBreadcrumbData())
+        watch(() => storageKey.value, () => buildBreadcrumbData())
+
+        // 分享页相关
+        watch(() => [routeRef.value?.params?.shareKey, routeRef.value?.query?.path, routeRef.value?.query?.pwd], () => buildBreadcrumbData(), { deep: true })
+    }
+    initialized = true;
+
+    return {
+        rootPath,
+        breadcrumbData,
+        buildBreadcrumbData
+    }
+
+}