This commit is contained in:
liRQ 2026-06-24 10:41:56 +08:00
parent ac3bdf0e0c
commit 7e0f347c9a
3 changed files with 43 additions and 3 deletions

View File

@ -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)
}

View File

@ -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'])

View File

@ -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)
}
}
}