云文件系统初始化

web-vue/src/views/files/index.vue

@@ -28,22 +28,17 @@
         />
 
         <!-- 批量操作工具栏 -->
-        <div v-if="selectedFiles.length > 0 && activeMenu === 'my-files'" class="batch-toolbar">
-          <span class="batch-count">已选择 {{ selectedFiles.length }} 项</span>
-          <div class="batch-actions">
-            <el-button type="primary" @click="handleBatchDownload" :disabled="!hasSelectedFiles">
+        <div v-if="activeMenu === 'my-files'" class="batch-toolbar">
+          <el-button-group>
+            <el-button @click="handleBatchDownload" :disabled="selectedFiles.length === 0 || !hasSelectedFiles">
               <el-icon><Download /></el-icon>
               <span style="margin-left: 4px">批量下载</span>
             </el-button>
-            <el-button type="success" @click="handleBatchMove" :disabled="!hasSelectedFiles">
+            <el-button @click="handleBatchMove" :disabled="selectedFiles.length === 0">
               <el-icon><FolderOpened /></el-icon>
               <span style="margin-left: 4px">批量移动</span>
             </el-button>
-            <el-button @click="clearSelection">
-              <el-icon><Close /></el-icon>
-              <span style="margin-left: 4px">取消选择</span>
-            </el-button>
-          </div>
+          </el-button-group>
         </div>
 
         <!-- 文件列表 -->
@@ -165,7 +160,7 @@ import {
   getFiles, getTrashFiles, getSharedByMe, getSharedByMeFolderFiles, getSharedToMe, getSharedFolderFiles,
   uploadFiles, downloadFile, deleteFile, restoreFile,
   deletePermanently, emptyTrash, createFolder,
-  shareFileApi, cancelShare, getFilePreview, renameFile, moveFile
+  shareFileApi, cancelShare, getFilePreview, renameFile, moveFile, batchDownload, getMovableFolders
 } from '@/api/file'
 import { getCurrentUser } from '@/api/auth'
 import { useUserStore } from '@/store/user'
@@ -501,31 +496,33 @@ const clearSelection = () => {
 
 const handleBatchDownload = async () => {
   const filesToDownload = selectedFiles.value.filter(f => f.type !== 'folder')
-  if (filesToDownload.length === 0) {
+  if (filesToDownload.length === 0 && selectedFiles.value.length > 0) {
     ElMessage.warning('请选择要下载的文件（文件夹不支持批量下载）')
     return
   }
   
-  ElMessage.info(`开始下载 ${filesToDownload.length} 个文件...`)
-  
-  for (const file of filesToDownload) {
-    try {
-      const blob = await downloadFile(file.id)
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = file.name
-      a.click()
-      URL.revokeObjectURL(url)
-      // 添加小延迟避免浏览器阻塞
-      await new Promise(resolve => setTimeout(resolve, 200))
-    } catch (e) {
-      ElMessage.error(`下载 ${file.name} 失败`)
-    }
+  if (selectedFiles.value.length === 0) {
+    ElMessage.warning('请选择要下载的文件')
+    return
   }
   
-  ElMessage.success('批量下载完成')
-  selectedFiles.value = []
+  try {
+    ElMessage.info('正在打包下载...')
+    const ids = selectedFiles.value.map(f => f.id)
+    const blob = await batchDownload(ids)
+    
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `download_${new Date().getTime()}.zip`
+    a.click()
+    URL.revokeObjectURL(url)
+    
+    ElMessage.success('下载完成')
+    selectedFiles.value = []
+  } catch (e) {
+    ElMessage.error('下载失败')
+  }
 }
 
 const handleBatchMove = async () => {
@@ -534,20 +531,16 @@ const handleBatchMove = async () => {
     return
   }
   
-  // 获取当前用户的文件夹列表
+  // 获取可移动的文件夹列表
   try {
-    const res = await getFiles({ folderId: null })
-    const allFiles = res.data || []
-    const folders = allFiles.filter(f => f.type === 'folder' && f.isFolder === 1)
-    
-    // 过滤掉选中的文件夹本身（不能移动到自己）
     const selectedIds = selectedFiles.value.map(f => f.id)
-    const availableFolders = folders.filter(f => !selectedIds.includes(f.id))
+    const res = await getMovableFolders(selectedIds)
+    const folders = res.data || []
     
     // 构建选项
     const options = [
       { label: '根目录', value: null },
-      ...availableFolders.map(f => ({ label: f.name, value: f.id }))
+      ...folders.map(f => ({ label: f.name, value: f.id }))
     ]
     
     // 使用 ElMessageBox.prompt 的自定义方式
@@ -625,16 +618,16 @@ onMounted(async () => {
 .batch-toolbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 16px;
   padding: 12px 16px;
-  background: #f0f9ff;
   border-bottom: 1px solid #e4e7ed;
+  background: #fff;
 }
 
 .batch-count {
   font-size: 14px;
-  color: #409eff;
-  font-weight: 500;
+  color: #606266;
 }
 
 .batch-actions {