更新
This commit is contained in:
parent
ac3bdf0e0c
commit
7e0f347c9a
@ -267,7 +267,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 文件夹树形展示 -->
|
||||
<div class="folder-tree-container">
|
||||
<div ref="folderTreeContainerRef" class="folder-tree-container">
|
||||
<!-- 创建根级文件夹按钮 -->
|
||||
<div v-if="!hasSearched" class="folder-tree-actions">
|
||||
<button type="button" class="folder-tree-actions__btn" @click="handleAddFolder(null)">
|
||||
@ -290,6 +290,7 @@
|
||||
<FolderTree
|
||||
v-else
|
||||
:tree-data="folderTreeData"
|
||||
:expanded-folder-ids="expandedFolderIds"
|
||||
@add-folder="handleAddFolder"
|
||||
@add-file="handleAddFile"
|
||||
@expand="handleExpandFolder"
|
||||
@ -563,7 +564,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
|
||||
import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
|
||||
import LoginView from './components/LoginView.vue'
|
||||
import PosterCard from './components/PosterCard.vue'
|
||||
import RecordDialog from './components/RecordDialog.vue'
|
||||
@ -628,6 +629,8 @@ const showRecordDialog = ref(false)
|
||||
const showFolderDialog = ref(false)
|
||||
const editingFolder = ref(null) // 编辑时传入的文件夹对象,null 表示新建
|
||||
const folderDialogParentId = ref(0) // 新建时的父文件夹ID
|
||||
const folderTreeContainerRef = ref(null) // 文件夹树容器引用(用于保持滚动位置)
|
||||
const expandedFolderIds = reactive(new Set()) // 全局展开状态追踪,防止 buildTree 重建丢失展开
|
||||
|
||||
// 确认弹窗状态
|
||||
const showConfirmDialog = ref(false)
|
||||
@ -1044,6 +1047,9 @@ async function handleExpandFolder(node) {
|
||||
const driveId = activeSheetId.value
|
||||
if (!driveId) return
|
||||
|
||||
// 保存当前滚动位置
|
||||
const scrollTop = folderTreeContainerRef.value?.scrollTop || 0
|
||||
|
||||
setFolderLoadingState(driveId, node.id, true)
|
||||
|
||||
try {
|
||||
@ -1063,6 +1069,15 @@ async function handleExpandFolder(node) {
|
||||
),
|
||||
...childrenItems,
|
||||
]
|
||||
|
||||
// 将当前文件夹加入全局展开状态
|
||||
expandedFolderIds.add(node.id)
|
||||
|
||||
// 恢复滚动位置(等待 DOM 更新后)
|
||||
await nextTick()
|
||||
if (folderTreeContainerRef.value) {
|
||||
folderTreeContainerRef.value.scrollTop = scrollTop
|
||||
}
|
||||
} catch (err) {
|
||||
setFolderLoadingState(driveId, node.id, false)
|
||||
console.error(`加载文件夹[${node.title}]内容失败`, err)
|
||||
@ -1918,6 +1933,7 @@ watch(
|
||||
|
||||
// 切换网盘时自动加载该网盘下的文件夹
|
||||
watch(activeSheetId, (newId) => {
|
||||
expandedFolderIds.clear() // 切换网盘时清空展开状态
|
||||
if (newId && currentView.value === 'manage') {
|
||||
loadDriveFolders(newId)
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<TreeNode
|
||||
:node="node"
|
||||
:depth="0"
|
||||
:expanded-folder-ids="expandedFolderIds"
|
||||
@add-folder="handleAddFolder"
|
||||
@add-file="handleAddFile"
|
||||
@expand="handleExpand"
|
||||
@ -22,6 +23,10 @@ defineProps({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
expandedFolderIds: {
|
||||
type: Set,
|
||||
default: () => new Set(),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['add-folder', 'add-file', 'expand', 'edit', 'delete'])
|
||||
|
||||
@ -97,6 +97,7 @@
|
||||
:key="child.id"
|
||||
:node="child"
|
||||
:depth="depth + 1"
|
||||
:expanded-folder-ids="expandedFolderIds"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@add-file="$emit('add-file', $event)"
|
||||
@expand="$emit('expand', $event)"
|
||||
@ -109,7 +110,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
node: {
|
||||
@ -120,6 +121,10 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
expandedFolderIds: {
|
||||
type: Set,
|
||||
default: () => new Set(),
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['add-folder', 'add-file', 'expand', 'edit', 'delete'])
|
||||
@ -129,6 +134,17 @@ const showTooltip = ref(false)
|
||||
const tooltipPos = ref({ top: 0, left: 0 })
|
||||
let tooltipTimer = null
|
||||
|
||||
// 当 buildTree 重建节点时,通过全局展开状态恢复 isExpanded
|
||||
watch(
|
||||
() => props.expandedFolderIds.has(props.node.id),
|
||||
(shouldExpand) => {
|
||||
if (shouldExpand && !isExpanded.value) {
|
||||
isExpanded.value = true
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const tooltipStyle = computed(() => ({
|
||||
position: 'fixed',
|
||||
top: `${tooltipPos.value.top}px`,
|
||||
@ -161,6 +177,9 @@ function toggleExpand() {
|
||||
isExpanded.value = nextExpanded
|
||||
if (nextExpanded) {
|
||||
emit('expand', props.node)
|
||||
} else {
|
||||
// 收起时从全局展开状态中移除
|
||||
props.expandedFolderIds.delete(props.node.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user