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