添加预览图片功能

src/components/TreeEntry.vue

@@ -15,12 +15,18 @@ interface DirEntry {
   children?: DirEntry[];
 }
 
+interface TreeExpansionCommand {
+  id: number;
+  expanded: boolean;
+}
+
 const TREE_CONTEXT_MENU_CLOSE_EVENT = "yurou-tree-context-menu-close";
 
 const props = defineProps<{
   entry: DirEntry;
   depth: number;
   currentFilePath?: string | null;
+  expansionCommand?: TreeExpansionCommand | null;
 }>();
 
 const emit = defineEmits<{
@@ -33,6 +39,7 @@ const emit = defineEmits<{
 }>();
 
 const expanded = ref(true);
+const handledExpansionCommandId = ref(0);
 const contextMenuOpen = ref(false);
 const contextMenuPoint = ref<{ x: number; y: number } | null>(null);
 const contextMenuStyle = computed(() => {
@@ -76,12 +83,35 @@ function onContextMenuKeydown(event: KeyboardEvent) {
 watch(
   () => props.entry.children,
   (children, oldChildren) => {
-    if (children !== undefined && oldChildren === undefined) {
+    if (
+      children !== undefined &&
+      oldChildren === undefined &&
+      props.expansionCommand?.expanded !== false
+    ) {
       expanded.value = true;
     }
   },
 );
 
+watch(
+  () => props.expansionCommand,
+  (command) => {
+    if (
+      !command ||
+      !props.entry.is_dir ||
+      command.id <= handledExpansionCommandId.value
+    ) return;
+
+    handledExpansionCommandId.value = command.id;
+    expanded.value = command.expanded;
+
+    if (command.expanded && props.entry.children === undefined) {
+      emit("toggleFolder", props.entry.path);
+    }
+  },
+  { immediate: true },
+);
+
 const isActive = computed(() => {
   return props.currentFilePath != null && props.currentFilePath === props.entry.path;
 });
@@ -307,6 +337,7 @@ function onContextMenu(event: MouseEvent) {
         :entry="child"
         :depth="depth + 1"
         :currentFilePath="currentFilePath"
+        :expansion-command="expansionCommand"
         @toggle-folder="(path: string) => emit('toggleFolder', path)"
         @open-file="(path: string) => emit('openFile', path)"
         @create-folder="(path: string) => emit('createFolder', path)"