feat: add zip download for folders in file manager

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/api/index.ts

@@ -192,6 +192,7 @@ export const api = {
     tree: () => request<FileNode[]>('/files/tree'),
     getContent: (path: string) => request<{ path: string; content: string }>(`/files/content?path=${encodeURIComponent(path)}`),
     download: (path: string) => `${API_BASE_URL}/files/download?path=${encodeURIComponent(path)}`,
+    downloadZip: (path: string) => `${API_BASE_URL}/files/download-zip?path=${encodeURIComponent(path)}`,
     saveContent: (path: string, content: string) => request('/files/content', { method: 'POST', body: JSON.stringify({ path, content }) }),
     create: (path: string, isDir: boolean) => request('/files/create', { method: 'POST', body: JSON.stringify({ path, isDir }) }),
     delete: (path: string) => request('/files/delete', { method: 'POST', body: JSON.stringify({ path }) }),
@@ -725,4 +726,3 @@ export const LOG_STATUS = {
   FAILED: 'failed'
 } as const
 
-

web/src/components/FileTreeNode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { Folder, File, ChevronRight, ChevronDown, Trash2, Copy as CopyIcon } from 'lucide-vue-next'
+import { Folder, File, ChevronRight, ChevronDown, Trash2, Copy as CopyIcon, Download } from 'lucide-vue-next'
 import type { FileNode } from '@/api'
 
 defineOptions({
@@ -21,6 +21,7 @@ const emit = defineEmits<{
   move: [oldPath: string, newPath: string]
   rename: [path: string]
   downloadFile: [path: string]
+  downloadZip: [path: string]
   duplicate: [path: string]
 }>()
 
@@ -100,6 +101,10 @@ function handleDrop(e: DragEvent) {
       </div>
       <div v-else
         class="opacity-0 group-hover:opacity-100 flex items-center gap-1 ml-auto shrink-0 pr-1 transition-opacity">
+        <span @click.stop="$emit('downloadZip', node.path)" class="cursor-pointer text-blue-500 hover:text-blue-500/80"
+          title="下载为压缩包">
+          <Download class="h-3 w-3" />
+        </span>
         <span @click.stop="$emit('delete', node.path)" class="cursor-pointer text-destructive hover:text-destructive/80"
           title="删除">
           <Trash2 class="h-3 w-3" />
@@ -111,7 +116,8 @@ function handleDrop(e: DragEvent) {
         :selected-path="selectedPath" :depth="depth + 1" @select="$emit('select', $event)"
         @create="$emit('create', $event)" @move="(oldPath, newPath) => $emit('move', oldPath, newPath)"
         @rename="$emit('rename', $event)" @delete="$emit('delete', $event)"
-        @download-file="$emit('downloadFile', $event)" @duplicate="$emit('duplicate', $event)" />
+        @download-file="$emit('downloadFile', $event)" @download-zip="$emit('downloadZip', $event)"
+        @duplicate="$emit('duplicate', $event)" />
     </template>
   </div>
 </template>

web/src/views/editor/Editor.vue

@@ -297,6 +297,15 @@ async function handleDownload(path: string) {
   toast.success('下载中')
 }
 
+async function handleDownloadZip(path: string) {
+  const url = api.files.downloadZip(path)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = (path.split('/').pop() || 'archive') + '.zip'
+  a.click()
+  toast.success('下载中')
+}
+
 async function handleCopyFile(path: string) {
   try {
     const parts = path.split('/')
@@ -466,6 +475,7 @@ onUnmounted(() => {
       @delete="(path: string) => dialogsRef?.openDelete(path)"
       @create="(parent: string) => dialogsRef?.openCreate(parent)"
       @download="handleDownload"
+      @download-zip="handleDownloadZip"
       @move="handleMove"
       @rename="(path: string) => dialogsRef?.openRename(path)"
       @duplicate="handleCopyFile"

web/src/views/editor/components/FileSidebar.vue

@@ -19,6 +19,7 @@ const emit = defineEmits<{
   select: [node: FileNode]
   delete: [path: string]
   download: [path: string]
+  downloadZip: [path: string]
   move: [oldPath: string, newPath: string]
   rename: [path: string]
   duplicate: [path: string]
@@ -158,6 +159,7 @@ function handleFilesUpload(e: Event) {
         @delete="p => emit('delete', p)" 
         @create="p => emit('create', p)"
         @download-file="p => emit('download', p)" 
+        @download-zip="p => emit('downloadZip', p)"
         @move="(o, n) => emit('move', o, n)" 
         @rename="p => emit('rename', p)" 
         @duplicate="p => emit('duplicate', p)" />

web/src/views/scripts/Scripts.vue

@@ -267,6 +267,21 @@ async function handleDownload(path: string) {
   }
 }
 
+async function handleDownloadZip(path: string) {
+  try {
+    const url = api.files.downloadZip(path)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = (path.split('/').pop() || 'archive') + '.zip'
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    toast.success('已发起下载')
+  } catch (error: any) {
+    toast.error('下载出错: ' + (error.message || '未知错误'))
+  }
+}
+
 async function handleCopyFile(path: string) {
   console.log('Copy file requested:', path)
   try {
@@ -320,7 +335,7 @@ onMounted(loadTree)
         </div>
         <FileTreeNode v-for="node in fileTree" :key="node.path" :node="node" :expanded-dirs="expandedDirs"
           :selected-path="selectedFile || selectedDir" @select="handleSelect" @delete="confirmDeleteFile"
-          @download-file="handleDownload" @duplicate="handleCopyFile" />
+          @download-file="handleDownload" @download-zip="handleDownloadZip" @duplicate="handleCopyFile" />
       </div>
     </div>