From 9d6b0aa6f2e4aabeba0a73e2104695a263256b23 Mon Sep 17 00:00:00 2001 From: zanllp Date: Wed, 26 Jul 2023 15:14:13 +0800 Subject: [PATCH] Refine walk mode to perfection --- vue/src/page/fileTransfer/hook.tsx | 78 ++++++++++++------------------ 1 file changed, 31 insertions(+), 47 deletions(-) diff --git a/vue/src/page/fileTransfer/hook.tsx b/vue/src/page/fileTransfer/hook.tsx index 173af14..950b747 100644 --- a/vue/src/page/fileTransfer/hook.tsx +++ b/vue/src/page/fileTransfer/hook.tsx @@ -1,7 +1,7 @@ import { useGlobalStore, type FileTransferTabPane, type Shortcut } from '@/store/useGlobalStore' import { useImgSliStore } from '@/store/useImgSli' import { onLongPress, useElementSize, useMouseInElement } from '@vueuse/core' -import { ref, computed, watch, onMounted, h } from 'vue' +import { ref, computed, watch, onMounted, h, reactive } from 'vue' import { genInfoCompleted, getImageGenerationInfo, openFolder, setImgPath } from '@/api' import { useWatchDocument, @@ -35,6 +35,7 @@ import { getShortcutStrFromEvent } from '@/util/shortcut' import { openCreateFlodersModal, MultiSelectTips } from './functionalCallableComp' import { useTagStore } from '@/store/useTagStore' import { useBatchDownloadStore } from '@/store/useBatchDownloadStore' +import { Walker } from './walker' export const stackCache = new Map() @@ -64,29 +65,33 @@ export const { useHookShareState } = createTypedShareStateHook( ) const currLocation = computed(() => Path.join(...basePath.value)) const sortMethod = ref(global.defaultSortingMethod) + const walker = ref(props.value.walkModePath ? new Walker(props.value.walkModePath, sortMethod.value) : undefined) + watch([() => props.value.walkModePath, sortMethod], () => { + walker.value = props.value.walkModePath ? new Walker(props.value.walkModePath, sortMethod.value) : undefined + }) + const walkerTrigger = ref(0) + watch(walker, () => walkerTrigger.value++, { deep: true }) + const deletedFiles = reactive(new Set()) + const sortedFiles = computed(() => { if (images.value) { return images.value } + + if (walker.value) { + walkerTrigger.value + return walker.value.images.filter(v => !deletedFiles.has(v.fullpath)) + } if (!currPage.value) { return [] } const files = currPage.value?.files ?? [] const method = sortMethod.value - const { walkFiles } = currPage.value! const filter = (files: FileNodeInfo[]) => global.onlyFoldersAndImages ? files.filter((file) => file.type === 'dir' || isImageFile(file.name)) : files - if (props.value.walkModePath) { - /** - * @see Page - */ - return walkFiles - ? walkFiles.map((dir) => sortFiles(filter(dir), method)).flat() - : sortFiles(filter(files), method) - } - return sortFiles(filter(files), method) + return sortFiles(filter(files), method).filter(v => !deletedFiles.has(v.fullpath)) }) const multiSelectedIdxs = ref([] as number[]) const previewIdx = ref(-1) @@ -126,6 +131,8 @@ export const { useHookShareState } = createTypedShareStateHook( stackViewEl: ref(), props, getPane, + walker, + deletedFiles, ...events } }, @@ -141,7 +148,6 @@ export interface Props { export interface Page { files: FileNodeInfo[] - walkFiles?: FileNodeInfo[][] // 使用walk时，各个文件夹之间分散排序，避免创建时间不同的带来的干扰 curr: string } /** @@ -274,11 +280,11 @@ export function useLocation () { stack, currPage, currLocation, - sortMethod, useEventListen, eventEmitter, getPane, - props + props, + deletedFiles } = useHookShareState().toRefs() watch( @@ -294,12 +300,6 @@ export function useLocation () { await to(path) if (props.value.walkModePath) { await delay() - const [firstDir] = sortFiles(currPage.value!.files, sortMethod.value).filter( - (v) => v.type === 'dir' - ) - if (firstDir) { - await to(firstDir.fullpath) - } await eventEmitter.value.emit('loadNextDir') } } @@ -445,6 +445,8 @@ export function useLocation () { ) last(stack.value)!.files = files } + + deletedFiles.value.clear() scroller.value?.scrollToItem(0) message.success(t('refreshCompleted')) } finally { @@ -533,7 +535,7 @@ export function useLocation () { const url = `${baseUrl}?${params.toString()}` copy2clipboardI18n(url, t('copyLocationUrlSuccessMsg')) } - const selectAll = () => eventEmitter.value.emit('selectAll') + const selectAll = () => eventEmitter.value.emit('selectAll') const onCreateFloderBtnClick = async () => { await openCreateFlodersModal(currLocation.value) @@ -567,14 +569,13 @@ export function useFilesDisplay () { const { scroller, sortedFiles, - stack, sortMethod, currLocation, - currPage, stackViewEl, canLoadNext, previewIdx, - props + props, + walker } = useHookShareState().toRefs() const { state } = useHookShareState() const moreActionsDropdownShow = ref(false) @@ -602,21 +603,8 @@ export function useFilesDisplay () { } try { loadNextDirLoading.value = true - const par = stack.value[stack.value.length - 2] - const parFilesSorted = sortFiles(par.files, sortMethod.value) - const currIdx = parFilesSorted.findIndex((v) => v.name === currPage.value?.curr) - if (currIdx !== -1) { - const next = parFilesSorted[currIdx + 1] - const p = Path.join(currLocation.value, '../', next.name) - const r = await getTargetFolderFiles(p) - const page = currPage.value! - page.curr = next.name - if (!page.walkFiles) { - page.walkFiles = [page.files] - } - page.walkFiles.push(r.files) - console.log('curr page files length', currPage.value?.files.length) - } + console.log(sortedFiles.value, walker.value?.images) + await walker.value?.next() } catch (e) { console.error('loadNextDir', e) canLoadNext.value = false @@ -777,7 +765,8 @@ export function useFileItemActions ( previewing, stackViewEl, eventEmitter, - props + props, + deletedFiles } = useHookShareState().toRefs() const nor = Path.normalize useEventListen('removeFiles', ({ paths, loc }) => { @@ -788,12 +777,7 @@ export function useFileItemActions ( if (!top) { return } - top.files = top.files.filter((v) => !paths.includes(v.fullpath)) - if (top.walkFiles) { - top.walkFiles = top.walkFiles.map((files) => - files.filter((file) => !paths.includes(file.fullpath)) - ) - } + paths.forEach(path => deletedFiles.value.add(path)) }) useEventListen('addFiles', ({ files, loc }) => { @@ -1097,4 +1081,4 @@ export const useMobileOptimization = () => { return { showMenuIdx } -} +} \ No newline at end of file