| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>云端批量处理工具</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| -webkit-font-smoothing: antialiased; |
| background-color: #f5f5f7; |
| color: #1d1d1f; |
| } |
| |
| .sidebar-item { |
| transition: all 0.2s ease; |
| border-radius: 8px; |
| } |
| |
| .sidebar-item:hover { |
| background-color: rgba(0, 0, 0, 0.05); |
| } |
| |
| .sidebar-item.active { |
| background-color: rgba(10, 132, 255, 0.1); |
| } |
| |
| .file-item:hover { |
| background-color: rgba(0, 0, 0, 0.03); |
| } |
| |
| .progress-bar { |
| height: 4px; |
| border-radius: 2px; |
| transition: width 0.3s ease; |
| } |
| |
| |
| .window-controls { |
| -webkit-app-region: no-drag; |
| } |
| |
| .drag-window { |
| -webkit-app-region: drag; |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background-color: rgba(0, 0, 0, 0.2); |
| border-radius: 4px; |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background-color: rgba(0, 0, 0, 0.3); |
| } |
| |
| ::-webkit-scrollbar-track { |
| background-color: transparent; |
| } |
| |
| |
| .btn-primary { |
| background-color: #0a84ff; |
| color: white; |
| border-radius: 980px; |
| padding: 4px 16px; |
| font-size: 13px; |
| line-height: 24px; |
| font-weight: 500; |
| transition: all 0.2s ease; |
| } |
| |
| .btn-primary:hover { |
| background-color: #0077ed; |
| } |
| |
| .btn-secondary { |
| background-color: #e0e0e0; |
| color: #1d1d1f; |
| border-radius: 980px; |
| padding: 4px 16px; |
| font-size: 13px; |
| line-height: 24px; |
| font-weight: 500; |
| transition: all 0.2s ease; |
| } |
| |
| .btn-secondary:hover { |
| background-color: #d0d0d0; |
| } |
| |
| .btn-outline { |
| background-color: transparent; |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| color: #1d1d1f; |
| border-radius: 980px; |
| padding: 4px 16px; |
| font-size: 13px; |
| line-height: 22px; |
| font-weight: 500; |
| transition: all 0.2s ease; |
| } |
| |
| .btn-outline:hover { |
| background-color: rgba(0, 0, 0, 0.05); |
| border-color: rgba(0, 0, 0, 0.15); |
| } |
| |
| |
| input[type="text"], input[type="number"], select, textarea { |
| background-color: rgba(0, 0, 0, 0.02); |
| border: 1px solid rgba(0, 0, 0, 0.1); |
| border-radius: 6px; |
| padding: 6px 10px; |
| font-size: 14px; |
| transition: all 0.2s ease; |
| } |
| |
| input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus { |
| outline: none; |
| border-color: #0a84ff; |
| box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1); |
| } |
| |
| |
| input[type="checkbox"] { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 18px; |
| height: 18px; |
| border: 1px solid rgba(0, 0, 0, 0.2); |
| border-radius: 4px; |
| cursor: pointer; |
| position: relative; |
| transition: all 0.2s ease; |
| margin-right: 6px; |
| } |
| |
| input[type="checkbox"]:checked { |
| background-color: #0a84ff; |
| border-color: #0a84ff; |
| } |
| |
| input[type="checkbox"]:checked::after { |
| content: "✓"; |
| position: absolute; |
| color: white; |
| font-size: 12px; |
| left: 3px; |
| top: 0px; |
| } |
| |
| |
| .tab-button { |
| position: relative; |
| padding: 8px 16px; |
| font-size: 13px; |
| font-weight: 500; |
| color: #666; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| border-radius: 6px; |
| } |
| |
| .tab-button:hover { |
| background-color: rgba(0, 0, 0, 0.05); |
| color: #333; |
| } |
| |
| .tab-button.active { |
| color: #0a84ff; |
| } |
| |
| .tab-button.active::after { |
| content: ""; |
| position: absolute; |
| bottom: -8px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 24px; |
| height: 2px; |
| background-color: #0a84ff; |
| border-radius: 1px; |
| } |
| </style> |
| </head> |
| <body class="h-screen overflow-hidden"> |
| |
| <div class="bg-white/80 backdrop-blur-sm border-b border-b-neutral-200/80 h-[52px] flex items-center justify-between px-4 fixed top-0 left-0 right-0 z-50 drag-window"> |
| <div class="flex items-center space-x-2 window-controls"> |
| <div class="w-3 h-3 rounded-full bg-[#ff5f56]"></div> |
| <div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div> |
| <div class="w-3 h-3 rounded-full bg-[#27c93f]"></div> |
| </div> |
| <div class="text-sm font-medium text-gray-600 drag-window">云端批量处理工具</div> |
| <div class="w-12"></div> |
| </div> |
| |
| <div class="flex h-full pt-[52px]"> |
| |
| <div class="w-[220px] bg-white/80 backdrop-blur-sm border-r border-r-neutral-200/60 flex flex-col"> |
| |
| <div class="p-4 border-b border-b-neutral-200/60 flex items-center"> |
| <div class="w-9 h-9 rounded-full bg-blue-50 flex items-center justify-center text-blue-500"> |
| <i class="fas fa-cloud text-lg"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="font-medium text-[15px]">批量处理工具</div> |
| <div class="text-xs text-gray-500">企业版</div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-y-auto py-2 px-3"> |
| <div class="sidebar-item active p-2 flex items-center cursor-pointer"> |
| <i class="fas fa-tasks text-blue-500 mr-3 text-[15px]"></i> |
| <span class="text-[13px]">批量操作</span> |
| </div> |
| <div class="sidebar-item p-2 flex items-center cursor-pointer"> |
| <i class="fas fa-font text-gray-500 mr-3 text-[15px]"></i> |
| <span class="text-[13px]">批量重命名</span> |
| </div> |
| <div class="sidebar-item p-2 flex items-center cursor-pointer"> |
| <i class="fas fa-upload text-gray-500 mr-3 text-[15px]"></i> |
| <span class="text-[13px]">批量上传</span> |
| </div> |
| <div class="sidebar-item p-2 flex items-center cursor-pointer"> |
| <i class="fas fa-exchange-alt text-gray-500 mr-3 text-[15px]"></i> |
| <span class="text-[13px]">批量转移</span> |
| </div> |
| <div class="sidebar-item p-2 flex items-center cursor-pointer"> |
| <i class="fas fa-trash-alt text-gray-500 mr-3 text-[15px]"></i> |
| <span class="text-[13px]">批量删除</span> |
| </div> |
| <div class="sidebar-item p-2 flex items-center cursor-pointer"> |
| <i class="fas fa-ad text-gray-500 mr-3 text-[15px]"></i> |
| <span class="text-[13px]">广告设置</span> |
| </div> |
| |
| |
| <div class="p-4 border-t border-t-neutral-200/60 mt-auto"> |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> |
| <span>已使用 65.4 GB</span> |
| <span>总容量 100 GB</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-[4px]"> |
| <div class="bg-blue-500 h-[4px] rounded-full" style="width: 65%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 flex flex-col overflow-hidden"> |
| |
| <div class="bg-white/80 backdrop-blur-sm border-b border-b-neutral-200/60 p-3 flex items-center justify-between"> |
| <div class="flex items-center space-x-4"> |
| <button class="btn-outline"> |
| <i class="fas fa-plus mr-1.5"></i> 新建批量任务 |
| </button> |
| <div class="relative"> |
| <input type="text" placeholder="搜索文件..." class="pl-9 w-64 text-sm"> |
| <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-2"> |
| <button class="btn-secondary"> |
| <i class="fas fa-cog mr-1.5"></i> 设置 |
| </button> |
| <button class="btn-primary"> |
| <i class="fas fa-save mr-1.5"></i> 保存 |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1 overflow-auto p-6"> |
| |
| <div class="flex justify-between items-center mb-6"> |
| <div> |
| <h1 class="text-2xl font-semibold mb-1">批量操作</h1> |
| <p class="text-sm text-gray-500">管理云端存储的批量任务</p> |
| </div> |
| <button class="btn-primary"> |
| <i class="fas fa-play mr-1.5"></i> 全部运行 |
| </button> |
| </div> |
| |
| |
| <div class="flex space-x-2 mb-6 border-b border-b-neutral-200/60 pb-1"> |
| <div class="tab-button active">所有任务</div> |
| <div class="tab-button">待处理</div> |
| <div class="tab-button">已完成</div> |
| <div class="tab-button">失败</div> |
| </div> |
| |
| |
| <div class="grid grid-cols-4 gap-4 mb-6"> |
| <div class="bg-white rounded-xl p-4 cursor-pointer hover:shadow-md transition-all border border-neutral-200/60"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center text-purple-500"> |
| <i class="fas fa-font text-lg"></i> |
| </div> |
| <h3 class="ml-3 font-medium text-sm">批量重命名</h3> |
| </div> |
| <p class="text-xs text-gray-500">使用模式重命名多个文件</p> |
| </div> |
| <div class="bg-white rounded-xl p-4 cursor-pointer hover:shadow-md transition-all border border-neutral-200/60"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-blue-500"> |
| <i class="fas fa-upload text-lg"></i> |
| </div> |
| <h3 class="ml-3 font-medium text-sm">批量上传</h3> |
| </div> |
| <p class="text-xs text-gray-500">一次上传多个文件</p> |
| </div> |
| <div class="bg-white rounded-xl p-4 cursor-pointer hover:shadow-md transition-all border border-neutral-200/60"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-green-500"> |
| <i class="fas fa-exchange-alt text-lg"></i> |
| </div> |
| <h3 class="ml-3 font-medium text-sm">批量转移</h3> |
| </div> |
| <p class="text-xs text-gray-500">在位置之间移动文件</p> |
| </div> |
| <div class="bg-white rounded-xl p-4 cursor-pointer hover:shadow-md transition-all border border-neutral-200/60"> |
| <div class="flex items-center mb-3"> |
| <div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center text-red-500"> |
| <i class="fas fa-trash-alt text-lg"></i> |
| </div> |
| <h3 class="ml-3 font-medium text-sm">批量删除</h3> |
| </div> |
| <p class="text-xs text-gray-500">删除符合条件的文件</p> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl overflow-hidden shadow-sm border border-neutral-200/60"> |
| |
| <div class="p-3 border-b border-b-neutral-200/60 bg-white/80 backdrop-blur-sm"> |
| <div class="flex justify-between items-center"> |
| <h3 class="text-sm font-medium">最近任务</h3> |
| <span class="text-xs text-gray-500">共4个任务</span> |
| </div> |
| </div> |
| |
| |
| <div class="divide-y divide-neutral-200/60"> |
| |
| <div class="file-item p-3 flex items-center hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center mr-4"> |
| <input type="checkbox" class="form-checkbox"> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center"> |
| <i class="fas fa-file-alt text-blue-500 mr-3"></i> |
| <div> |
| <p class="text-sm font-medium truncate">图片批量重命名任务</p> |
| <p class="text-xs text-gray-500 truncate">修改了50个文件</p> |
| </div> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 mr-4">2023-11-15</div> |
| <div class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">已完成</div> |
| <button class="ml-4 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-v text-sm"></i> |
| </button> |
| </div> |
| |
| |
| <div class="file-item p-3 flex items-center hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center mr-4"> |
| <input type="checkbox" class="form-checkbox"> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center"> |
| <i class="fas fa-cloud-upload-alt text-green-500 mr-3"></i> |
| <div> |
| <p class="text-sm font-medium truncate">产品图片上传</p> |
| <p class="text-xs text-gray-500 truncate">240个文件待上传</p> |
| </div> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 mr-4">2023-11-14</div> |
| <div class="text-xs px-2 py-1 rounded-full bg-yellow-100 text-yellow-800">进行中</div> |
| <button class="ml-4 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-v text-sm"></i> |
| </button> |
| </div> |
| |
| |
| <div class="file-item p-3 flex items-center hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center mr-4"> |
| <input type="checkbox" class="form-checkbox"> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center"> |
| <i class="fas fa-exchange-alt text-purple-500 mr-3"></i> |
| <div> |
| <p class="text-sm font-medium truncate">备份文件转移</p> |
| <p class="text-xs text-gray-500 truncate">从Google Drive到OneDrive</p> |
| </div> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 mr-4">2023-11-13</div> |
| <div class="text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-800">等待中</div> |
| <button class="ml-4 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-v text-sm"></i> |
| </button> |
| </div> |
| |
| |
| <div class="file-item p-3 flex items-center hover:bg-gray-50 transition-colors"> |
| <div class="flex items-center mr-4"> |
| <input type="checkbox" class="form-checkbox"> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <div class="flex items-center"> |
| <i class="fas fa-trash-alt text-red-500 mr-3"></i> |
| <div> |
| <p class="text-sm font-medium truncate">临时文件清理</p> |
| <p class="text-xs text-gray-500 truncate">删除超过30天的文件</p> |
| </div> |
| </div> |
| </div> |
| <div class="text-xs text-gray-500 mr-4">2023-11-10</div> |
| <div class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-800">失败</div> |
| <button class="ml-4 text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-ellipsis-v text-sm"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-4 flex justify-between items-center text-xs text-gray-500"> |
| <div> |
| <span>已选择 <span class="font-medium">1</span> 个项目</span> |
| <span class="ml-4">总大小: <span class="font-medium">1.2 GB</span></span> |
| </div> |
| <div> |
| <span>版本 2.3.1</span> |
| <span class="ml-4">© 2023 云端批量处理工具</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Gary10/pandesign" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
