Update app.py

app.py

@@ -1,478 +1,757 @@
-// Cloudflare Worker - 虚拟 WebDAV 适配器（适配新版 API）
-// 基于新版 Hugging Face Bucket API，支持空目录（通过 .dir 文件标记）
-// 请将下方的 API_BASE 替换为实际部署的 Space 地址
-
-const API_BASE = 'https://your-space.hf.space'; // ⚠️ 必须替换
-const DAV_NS = 'DAV:';
-const DIR_MARKER = '.dir';
-
-let filesCache = [];
-let cacheTime = 0;
-const CACHE_TTL = 5000;
-
-// --------------------- 工具函数 ---------------------
-
-function parsePath(urlString) {
-    try {
-        const url = new URL(urlString);
-        let path = url.pathname.replace(/^\/webdav/, '') || '/';
-        if (path !== '/' && path.endsWith('/')) {
-            path = path.slice(0, -1);
-        }
-        return path;
-    } catch {
-        return '/';
-    }
-}
-
-function buildApiUrl(path) {
-    const cleanPath = path.startsWith('/') ? path.slice(1) : path;
-    return `${API_BASE}/file/${encodeURIComponent(cleanPath)}`;
-}
-
-async function getFileList() {
-    const now = Date.now();
-    if (now - cacheTime <= CACHE_TTL && filesCache.length) return filesCache;
-    try {
-        const res = await fetch(`${API_BASE}/list`);
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const data = await res.json();
-        filesCache = Array.isArray(data) ? data : [];
-        cacheTime = now;
-    } catch (e) {
-        console.error('getFileList error:', e);
-        filesCache = [];
-        cacheTime = now;
-    }
-    return filesCache;
-}
-
-function dirToMarker(dirPath) {
-    const cleanPath = dirPath.startsWith('/') ? dirPath.slice(1) : dirPath;
-    return cleanPath ? `${cleanPath}${DIR_MARKER}` : '';
-}
-
-async function getPathInfo(path) {
-    const files = await getFileList();
-    const cleanPath = path === '/' ? '' : path.slice(1).replace(/\/$/, '');
-
-    if (cleanPath === '') return { exists: true, type: 'directory', files };
-
-    if (files.includes(cleanPath) && !cleanPath.endsWith(DIR_MARKER))
-        return { exists: true, type: 'file', files };
-
-    if (files.includes(cleanPath + DIR_MARKER))
-        return { exists: true, type: 'directory', files };
-
-    const hasChildren = files.some(f => f.startsWith(cleanPath + '/') && !f.endsWith(DIR_MARKER));
-    if (hasChildren) return { exists: true, type: 'directory', files };
-
-    return { exists: false, type: null, files };
-}
-
-function getDirectoryContents(dirPath, files) {
-    const prefix = dirPath === '/' ? '' : dirPath.slice(1).replace(/\/$/, '');
-    const markerDirs = new Set();
-    for (const f of files) {
-        if (f.endsWith(DIR_MARKER)) markerDirs.add(f.slice(0, -DIR_MARKER.length));
-    }
-
-    const entries = new Map();
-
-    // 处理真实文件
-    for (const file of files) {
-        if (file.endsWith(DIR_MARKER)) continue;
-
-        let belongs = false;
-        if (prefix === '') {
-            if (!file.includes('/')) belongs = true;
-        } else {
-            if (file.startsWith(prefix + '/')) belongs = true;
-        }
-        if (!belongs) continue;
-
-        const relPath = prefix === '' ? file : file.slice(prefix.length + 1);
-        const parts = relPath.split('/');
-        const name = parts[0];
-        if (!name) continue;
-
-        const fullPath = prefix ? `${prefix}/${name}` : name;
-        const isDir = parts.length > 1 || markerDirs.has(fullPath);
-
-        if (!entries.has(name) || (isDir && entries.get(name).type !== 'directory')) {
-            entries.set(name, { name, type: isDir ? 'directory' : 'file', path: fullPath });
-        }
-    }
-
-    // 处理标记目录（确保空目录显示）
-    for (const marker of markerDirs) {
-        let belongs = false;
-        if (prefix === '') {
-            if (!marker.includes('/')) belongs = true;
-        } else {
-            if (marker.startsWith(prefix + '/')) belongs = true;
-        }
-        if (!belongs) continue;
-
-        const relPath = prefix === '' ? marker : marker.slice(prefix.length + 1);
-        const parts = relPath.split('/');
-        const name = parts[0];
-        if (!name) continue;
-
-        const fullPath = prefix ? `${prefix}/${name}` : name;
-        if (!entries.has(name) || entries.get(name).type !== 'directory') {
-            entries.set(name, { name, type: 'directory', path: fullPath });
-        }
-    }
-
-    return Array.from(entries.values());
-}
-
-async function getAllFilesInDir(dirPath) {
-    const files = await getFileList();
-    const cleanDir = dirPath.startsWith('/') ? dirPath.slice(1).replace(/\/$/, '') : dirPath.replace(/\/$/, '');
-    return files.filter(f => f.startsWith(cleanDir + '/') && !f.endsWith(DIR_MARKER));
-}
-
-async function createDirectory(dirPath) {
-    const markerPath = dirToMarker(dirPath);
-    const parts = markerPath.split('/').filter(p => p);
-    const filename = parts.pop();
-    const dirParts = parts.join('/');
-
-    const emptyBlob = new Blob([]);
-    const formData = new FormData();
-    formData.append('file', emptyBlob, filename);
-    if (dirParts) formData.append('dir', dirParts + '/' + filename);
-
-    try {
-        const response = await fetch(`${API_BASE}/upload`, { method: 'POST', body: formData });
-        if (!response.ok) return response;
-        const result = await response.json();
-        return result.success ? response : new Response(null, { status: 500 });
-    } catch (error) {
-        console.error('创建目录失败:', error);
-        return new Response(null, { status: 500 });
-    }
-}
-
-async function deleteDirectory(dirPath) {
-    const files = await getFileList();
-    const cleanDir = dirPath.startsWith('/') ? dirPath.slice(1).replace(/\/$/, '') : dirPath.replace(/\/$/, '');
-
-    const filesToDelete = files.filter(f => f === cleanDir + DIR_MARKER || f.startsWith(cleanDir + '/'));
-
-    if (filesToDelete.length === 0) return { success: true, count: 0 };
-
-    try {
-        await Promise.all(filesToDelete.map(f =>
-            fetch(`${API_BASE}/delete/${encodeURIComponent(f)}`, { method: 'DELETE' })
-        ));
-        return { success: true, count: filesToDelete.length };
-    } catch (error) {
-        console.error('删除目录失败:', error);
-        return { success: false, count: 0 };
-    }
-}
-
-async function generatePropfindResponse(request, path, depth) {
-    const baseUrl = new URL(request.url).origin;
-    const fullUrl = baseUrl + '/webdav' + path;
-
-    const info = await getPathInfo(path);
-    if (!info.exists) return null;
-
-    let xml = `<?xml version="1.0" encoding="utf-8"?>
-<multistatus xmlns="${DAV_NS}">`;
-
-    const isDir = info.type === 'directory';
-    xml += `
-  <response>
-    <href>${isDir ? fullUrl + '/' : fullUrl}</href>
-    <propstat>
-      <prop>
-        <resourcetype>${isDir ? '<collection/>' : ''}</resourcetype>
-        <displayname>${escapeXml(path === '/' ? '根目录' : path.split('/').pop())}</displayname>
-        <getcontenttype>${isDir ? 'httpd/unix-directory' : 'application/octet-stream'}</getcontenttype>
-        <getlastmodified>${new Date().toUTCString()}</getlastmodified>
-        <creationdate>${new Date().toISOString()}</creationdate>
-      </prop>
-      <status>HTTP/1.1 200 OK</status>
-    </propstat>
-  </response>`;
-
-    if (isDir && depth !== '0') {
-        const children = getDirectoryContents(path, info.files);
-        for (const child of children) {
-            const childIsDir = child.type === 'directory';
-            const childPath = path + (path.endsWith('/') ? '' : '/') + child.name;
-            const childUrl = baseUrl + '/webdav' + childPath + (childIsDir ? '/' : '');
-            xml += `
-  <response>
-    <href>${childUrl}</href>
-    <propstat>
-      <prop>
-        <resourcetype>${childIsDir ? '<collection/>' : ''}</resourcetype>
-        <displayname>${escapeXml(child.name)}</displayname>
-        <getcontenttype>${childIsDir ? 'httpd/unix-directory' : 'application/octet-stream'}</getcontenttype>
-        <getlastmodified>${new Date().toUTCString()}</getlastmodified>
-        <creationdate>${new Date().toISOString()}</creationdate>
-      </prop>
-      <status>HTTP/1.1 200 OK</status>
-    </propstat>
-  </response>`;
-        }
-    }
-
-    xml += '\n</multistatus>';
-    return xml;
-}
-
-function escapeXml(unsafe) {
-    return unsafe.replace(/[<>&'"]/g, c => {
-        switch (c) {
-            case '<': return '&lt;';
-            case '>': return '&gt;';
-            case '&': return '&amp;';
-            case "'": return '&apos;';
-            case '"': return '&quot;';
-            default: return c;
-        }
-    });
-}
-
-// --------------------- Worker 主入口 ---------------------
-
-export default {
-    async fetch(request, env, ctx) {
-        try {
-            const url = new URL(request.url);
-            const path = parsePath(url.pathname);
-            const method = request.method;
-
-            if (method === 'OPTIONS') {
-                return new Response(null, {
-                    headers: {
-                        'DAV': '1,2',
-                        'Allow': 'OPTIONS,GET,HEAD,PUT,DELETE,PROPFIND,MKCOL,COPY,MOVE',
-                        'Access-Control-Allow-Origin': '*',
-                        'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,DELETE,PROPFIND,MKCOL,COPY,MOVE',
-                        'Access-Control-Allow-Headers': 'Content-Type,Depth,Destination,Overwrite',
-                        'Cache-Control': 'no-cache',
-                    },
-                });
-            }
-
-            if (method === 'PROPFIND') {
-                const depth = request.headers.get('Depth') || '1';
-                const xml = await generatePropfindResponse(request, path, depth);
-                if (!xml) return new Response('Not Found', { status: 404 });
-                return new Response(xml, {
-                    status: 207,
-                    headers: {
-                        'Content-Type': 'application/xml; charset=utf-8',
-                        'DAV': '1,2',
-                        'Access-Control-Allow-Origin': '*',
-                        'Cache-Control': 'no-cache',
-                    },
-                });
+import os
+import tempfile
+from flask import Flask, request, jsonify, send_file
+from huggingface_hub import (
+    batch_bucket_files,
+    download_bucket_files,
+    list_bucket_tree
+)
+
+app = Flask(__name__)
+
+HF_TOKEN = os.environ.get("HF_TOKEN")
+if not HF_TOKEN:
+    raise ValueError("HF_TOKEN environment variable not set. Please add it to Space Secrets.")
+
+BUCKET_ID = "nagose/filebed"
+
+HTML_CONTENT = """<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Bucket 文件管理器 · 支持目录导航</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: linear-gradient(145deg, #f0f4fa 0%, #e6ecf4 100%);
+            min-height: 100vh;
+            padding: 2rem 1rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .container {
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
+        }
+        .grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+        }
+        .card {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.5);
+            border-radius: 28px;
+            box-shadow: 0 20px 40px -12px rgba(0, 20, 40, 0.25);
+            padding: 1.8rem;
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+        }
+        .card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 30px 50px -15px rgba(0, 30, 60, 0.3);
+        }
+        h2 {
+            font-size: 1.8rem;
+            font-weight: 600;
+            margin-bottom: 1.5rem;
+            color: #1a2b3c;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .upload-area {
+            display: flex;
+            flex-direction: column;
+            gap: 1.2rem;
+            margin-bottom: 2rem;
+        }
+        .file-label {
+            background: #f1f5f9;
+            border-radius: 60px;
+            padding: 0.8rem 1.5rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.8rem;
+            border: 2px dashed #b0c4de;
+            cursor: pointer;
+            transition: all 0.2s;
+            width: fit-content;
+            font-weight: 500;
+            color: #1e293b;
+        }
+        .file-label:hover {
+            background: #e2eaf3;
+            border-color: #3b82f6;
+        }
+        input[type="file"] { display: none; }
+        .dir-input {
+            padding: 0.8rem 1.2rem;
+            border-radius: 40px;
+            border: 1px solid #cbd5e1;
+            font-size: 1rem;
+            background: white;
+            width: 100%;
+        }
+        .button {
+            background: #3b82f6;
+            border: none;
+            color: white;
+            font-weight: 600;
+            padding: 0.8rem 2rem;
+            border-radius: 40px;
+            font-size: 1rem;
+            cursor: pointer;
+            box-shadow: 0 6px 14px rgba(59, 130, 246, 0.3);
+            transition: all 0.15s ease;
+            width: fit-content;
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        .button:hover {
+            background: #2563eb;
+            transform: scale(1.02);
+            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
+        }
+        .button.secondary {
+            background: #64748b;
+            box-shadow: 0 6px 14px rgba(100, 116, 139, 0.3);
+        }
+        .button.secondary:hover {
+            background: #475569;
+        }
+        .button.danger {
+            background: #ef4444;
+            box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25);
+        }
+        .button.danger:hover {
+            background: #dc2626;
+        }
+        .button.small {
+            padding: 0.4rem 1rem;
+            font-size: 0.9rem;
+        }
+        .log {
+            background: #1e293b;
+            color: #b9e6f0;
+            padding: 1.2rem;
+            border-radius: 24px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            border-left: 6px solid #3b82f6;
+            white-space: pre-wrap;
+            max-height: 250px;
+            overflow: auto;
+            margin-top: 1.5rem;
+        }
+        .log p { margin: 0.2rem 0; }
+        .timestamp { color: #94a3b8; margin-right: 0.5rem; }
+        .file-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.6rem;
+            margin-top: 1rem;
+            max-height: 400px;
+            overflow-y: auto;
+            padding-right: 0.5rem;
+        }
+        .file-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: #ffffffd6;
+            backdrop-filter: blur(4px);
+            padding: 0.8rem 1.5rem;
+            border-radius: 40px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.02);
+            border: 1px solid rgba(255,255,255,0.6);
+        }
+        .file-link {
+            color: #1e3a8a;
+            font-weight: 500;
+            text-decoration: none;
+            word-break: break-all;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .file-link:hover {
+            text-decoration: underline;
+            color: #2563eb;
+        }
+        .directory-link {
+            color: #b45309;
+            font-weight: 500;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .directory-link:hover {
+            text-decoration: underline;
+            color: #d97706;
+        }
+        .empty-message {
+            text-align: center;
+            color: #64748b;
+            padding: 2rem;
+            font-style: italic;
+        }
+        .api-test {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+        .api-section {
+            border-top: 1px solid #cbd5e1;
+            padding-top: 1rem;
+        }
+        .api-row {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+            margin: 0.8rem 0;
+        }
+        .api-input {
+            flex: 1;
+            padding: 0.8rem 1.2rem;
+            border-radius: 40px;
+            border: 1px solid #cbd5e1;
+            font-size: 1rem;
+            background: white;
+        }
+        .api-result {
+            background: #1e293b;
+            color: #b9e6f0;
+            padding: 1rem;
+            border-radius: 20px;
+            font-family: monospace;
+            font-size: 0.9rem;
+            white-space: pre-wrap;
+            max-height: 200px;
+            overflow: auto;
+        }
+        .api-docs {
+            background: #f8fafc;
+            border-radius: 20px;
+            padding: 1rem;
+            margin-top: 1rem;
+        }
+        .api-docs h3 {
+            font-size: 1.2rem;
+            margin-bottom: 0.8rem;
+            color: #0f172a;
+        }
+        .api-docs ul {
+            list-style: none;
+            padding-left: 0;
+        }
+        .api-docs li {
+            margin: 0.8rem 0;
+            padding: 0.8rem;
+            background: white;
+            border-radius: 16px;
+            border-left: 4px solid #3b82f6;
+        }
+        .api-docs code {
+            background: #e2e8f0;
+            padding: 0.2rem 0.4rem;
+            border-radius: 6px;
+            font-family: monospace;
+        }
+        .nav-bar {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            align-items: center;
+        }
+        .nav-bar input {
+            flex: 1;
+        }
+        footer {
+            margin-top: 2rem;
+            text-align: center;
+            color: #64748b;
+            font-size: 0.9rem;
+        }
+        @media (max-width: 768px) {
+            .grid { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1 style="font-size: 2.5rem; margin-bottom: 2rem; color: #0f172a;">📦 HF Bucket 文件管理器 (目录导航)</h1>
+    <div class="grid">
+        <!-- 左侧：文件上传与浏览 -->
+        <div class="card">
+            <h2>📤 文件上传</h2>
+            <div class="upload-area">
+                <label for="fileInput" class="file-label" id="fileLabel">📎 选择文件</label>
+                <input type="file" id="fileInput">
+                <input type="text" id="uploadDir" class="dir-input" placeholder="目标目录 (可选，如 images/ 或 logs/2026/)" value="">
+                <button class="button" id="uploadBtn">⬆️ 上传到 Bucket</button>
+            </div>
+            <h2 style="margin-top: 2rem;">📁 浏览</h2>
+            <div class="nav-bar">
+                <input type="text" id="currentDir" class="dir-input" placeholder="当前目录 (留空为根目录)" value="">
+                <button class="button secondary small" id="listBtn">列出文件</button>
+                <button class="button secondary small" id="goUpBtn" title="返回上级">⬆️ 上级</button>
+            </div>
+            <div id="fileList" class="file-list">
+                <div class="empty-message">加载中...</div>
+            </div>
+            <div class="log" id="log">就绪</div>
+        </div>
+
+        <!-- 右侧：API 测试面板 + 使用说明 -->
+        <div class="card">
+            <h2>🧪 API 测试</h2>
+            <div class="api-test">
+                <div class="api-section">
+                    <h3>📤 上传文件 (POST /upload) 支持��录</h3>
+                    <div class="api-row">
+                        <input type="file" id="apiFileInput" style="flex:1; padding:0.5rem;">
+                        <span style="color:#64748b;">(留空则使用左侧文件)</span>
+                    </div>
+                    <div class="api-row">
+                        <input type="text" id="apiUploadDir" class="api-input" placeholder="目标目录 (可选，如 images/)" value="">
+                        <button class="button secondary small" id="apiUploadBtn">上传测试</button>
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>📋 列出文件 (GET /list?dir=...)</h3>
+                    <div class="api-row">
+                        <input type="text" id="apiListDir" class="api-input" placeholder="目录 (留空为根目录)" value="">
+                        <button class="button secondary small" id="apiListBtn">获取列表</button>
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>📥 获取文件信息 (HEAD /file/&lt;filename&gt;)</h3>
+                    <div class="api-row">
+                        <input type="text" class="api-input" id="apiFilename" placeholder="输入文件名（可包含目录）">
+                        <button class="button secondary small" id="apiGetBtn">检查</button>
+                    </div>
+                </div>
+
+                <div class="api-section">
+                    <h3>🗑️ 删除文件 (DELETE /delete/&lt;filename&gt;)</h3>
+                    <div class="api-row">
+                        <input type="text" class="api-input" id="apiDeleteFilename" placeholder="要删除的文件名（可包含目录）">
+                        <button class="button danger small" id="apiDeleteBtn">删除</button>
+                    </div>
+                </div>
+
+                <div class="api-result" id="apiResult">点击按钮查看结果</div>
+
+                <div class="api-docs">
+                    <h3>📚 API 使用说明 (支持目录导航)</h3>
+                    <ul>
+                        <li><code><strong>POST /upload</strong></code> - 上传文件到指定目录</li>
+                        <li><code><strong>GET /list?dir=...</strong></code> - 列出指定目录下的第一层文件和目录（目录路径以 / 结尾）</li>
+                        <li><code><strong>GET /file/&lt;filename&gt;</strong></code> - 下载文件</li>
+                        <li><code><strong>HEAD /file/&lt;filename&gt;</strong></code> - 检查文件是否存在</li>
+                        <li><code><strong>DELETE /delete/&lt;filename&gt;</strong></code> - 删除文件（不支持目录）</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <footer>Powered by Hugging Face Buckets · 支持多级目录导航</footer>
+</div>
+
+<script>
+    (function() {
+        // DOM 元素
+        const fileInput = document.getElementById('fileInput');
+        const uploadBtn = document.getElementById('uploadBtn');
+        const fileLabel = document.getElementById('fileLabel');
+        const uploadDir = document.getElementById('uploadDir');
+        const currentDir = document.getElementById('currentDir');
+        const listBtn = document.getElementById('listBtn');
+        const goUpBtn = document.getElementById('goUpBtn');
+        const logDiv = document.getElementById('log');
+        const fileListDiv = document.getElementById('fileList');
+        const apiResult = document.getElementById('apiResult');
+        const apiListBtn = document.getElementById('apiListBtn');
+        const apiListDir = document.getElementById('apiListDir');
+        const apiGetBtn = document.getElementById('apiGetBtn');
+        const apiDeleteBtn = document.getElementById('apiDeleteBtn');
+        const apiFilename = document.getElementById('apiFilename');
+        const apiDeleteFilename = document.getElementById('apiDeleteFilename');
+        const apiFileInput = document.getElementById('apiFileInput');
+        const apiUploadDir = document.getElementById('apiUploadDir');
+        const apiUploadBtn = document.getElementById('apiUploadBtn');
+
+        // 辅助函数：添加日志
+        function addLog(msg, isErr = false) {
+            const p = document.createElement('p');
+            const ts = new Date().toLocaleTimeString();
+            p.innerHTML = '<span class="timestamp">[' + ts + ']</span> ' + (isErr ? '❌ ' : '') + msg;
+            if (isErr) p.style.color = '#f87171';
+            logDiv.appendChild(p);
+            logDiv.scrollTop = logDiv.scrollHeight;
+        }
+        function clearLog() { logDiv.innerHTML = ''; }
+
+        // 显示 API 结果
+        function showApiResult(data, isError = false) {
+            if (typeof data === 'object') {
+                apiResult.textContent = JSON.stringify(data, null, 2);
+            } else {
+                apiResult.textContent = data;
             }
+            if (isError) apiResult.style.color = '#f87171';
+            else apiResult.style.color = '#b9e6f0';
+        }
 
-            if (method === 'GET' && path !== '/') {
-                const info = await getPathInfo(path);
-                if (!info.exists) return new Response('Not Found', { status: 404 });
-                if (info.type === 'directory') return new Response('Method Not Allowed', { status: 405 });
-
-                const upstream = await fetch(buildApiUrl(path));
-                if (!upstream.ok) return new Response('Upstream error', { status: 502 });
-                return new Response(upstream.body, {
-                    headers: {
-                        'Content-Type': 'application/octet-stream',
-                        'Content-Disposition': `attachment; filename="${encodeURIComponent(path.split('/').pop())}"`,
-                        'Access-Control-Allow-Origin': '*',
-                    },
-                });
-            }
+        // 构建远程路径：目录 + 文件名
+        function buildRemotePath(dir, filename) {
+            dir = dir.trim();
+            if (!dir) return filename;
+            if (!dir.endsWith('/')) dir += '/';
+            if (dir.startsWith('/')) dir = dir.substring(1);
+            return dir + filename;
+        }
 
-            if (method === 'HEAD') {
-                const info = await getPathInfo(path);
-                return new Response(null, { status: info.exists ? 200 : 404 });
+        // 获取用于上传的文件
+        function getUploadFile() {
+            if (apiFileInput.files.length > 0) {
+                return apiFileInput.files[0];
+            } else if (fileInput.files.length > 0) {
+                return fileInput.files[0];
             }
+            return null;
+        }
 
-            if (method === 'PUT' && path !== '/') {
-                const info = await getPathInfo(path);
-                if (info.exists && info.type === 'directory')
-                    return new Response('Conflict', { status: 409 });
-
-                const parts = path.split('/').filter(p => p);
-                const filename = parts.pop();
-                const dirPath = parts.join('/');
-
-                const formData = new FormData();
-                try {
-                    const blob = await request.blob();
-                    formData.append('file', blob, filename);
-                    if (dirPath) formData.append('dir', dirPath + '/' + filename);
-
-                    const uploadRes = await fetch(`${API_BASE}/upload`, { method: 'POST', body: formData });
-                    if (!uploadRes.ok) return new Response('Upload failed', { status: uploadRes.status });
-                    const result = await uploadRes.json();
-
-                    if (result.success) {
-                        cacheTime = 0;
-                        return new Response(null, { status: info.exists ? 204 : 201 });
-                    } else {
-                        return new Response('Upload failed', { status: 500 });
-                    }
-                } catch (error) {
-                    console.error('PUT error:', error);
-                    return new Response('Upload error', { status: 500 });
+        // 加载文件列表
+        async function loadList(dir) {
+            dir = dir || '';
+            currentDir.value = dir;  // 同步输入框
+            try {
+                fileListDiv.innerHTML = '<div class="empty-message">加载中...</div>';
+                let url = '/list';
+                if (dir) url += '?dir=' + encodeURIComponent(dir);
+                const res = await fetch(url);
+                if (!res.ok) {
+                    const err = await res.text();
+                    throw new Error(`HTTP ${res.status}: ${err}`);
                 }
-            }
-
-            if (method === 'DELETE') {
-                const info = await getPathInfo(path);
-                if (!info.exists) return new Response('Not Found', { status: 404 });
-
-                if (info.type === 'directory') {
-                    const result = await deleteDirectory(path);
-                    if (!result.success) return new Response('Delete failed', { status: 500 });
+                const items = await res.json();  // 数组，每个元素是路径字符串
+                if (items.length === 0) {
+                    fileListDiv.innerHTML = '<div class="empty-message">📭 空目录</div>';
                 } else {
-                    const cleanPath = path.slice(1);
-                    await fetch(`${API_BASE}/delete/${encodeURIComponent(cleanPath)}`, { method: 'DELETE' });
+                    // 根据路径是否以 / 结尾判断是目录还是文件
+                    const html = items.map(path => {
+                        const isDir = path.endsWith('/');
+                        if (isDir) {
+                            const dirName = path.slice(0, -1); // 去掉末尾斜杠，用于显示
+                            return `
+                                <div class="file-item">
+                                    <span class="directory-link" onclick="navigateTo('${path}')">
+                                        📁 ${dirName}
+                                    </span>
+                                    <!-- 目录暂不提供删除按钮，可后续扩展 -->
+                                </div>
+                            `;
+                        } else {
+                            // 文件：显示下载链接和删除按钮
+                            return `
+                                <div class="file-item">
+                                    <a href="/file/${encodeURIComponent(path)}" target="_blank" class="file-link">
+                                        📄 ${path}
+                                    </a>
+                                    <button class="button danger small" onclick="deleteFile('${path.replace(/'/g, "\\\\'")}')">删除</button>
+                                </div>
+                            `;
+                        }
+                    }).join('');
+                    fileListDiv.innerHTML = html;
                 }
-                cacheTime = 0;
-                return new Response(null, { status: 204 });
+            } catch (err) {
+                fileListDiv.innerHTML = '<div class="empty-message">❌ 加载失败</div>';
+                addLog('列表加载错误: ' + err.message, true);
             }
+        }
 
-            if (method === 'MKCOL') {
-                const info = await getPathInfo(path);
-                if (info.exists) return new Response('Method Not Allowed', { status: 405 });
-
-                const response = await createDirectory(path);
-                if (response.ok) {
-                    cacheTime = 0;
-                    return new Response(null, { status: 201 });
-                } else {
-                    return new Response('MKCOL failed', { status: 500 });
-                }
+        // 导航到目录
+        window.navigateTo = function(dirPath) {
+            // dirPath 以 / 结尾，例如 "subdir/"
+            const dir = dirPath; // 直接使用，loadList 会处理
+            loadList(dir);
+        };
+
+        // 删除文件
+        window.deleteFile = async function(filename) {
+            if (!confirm(`确定删除 ${filename} 吗？`)) return;
+            try {
+                addLog('正在删除: ' + filename);
+                const res = await fetch('/delete/' + encodeURIComponent(filename), { method: 'DELETE' });
+                const text = await res.text();
+                if (!res.ok) throw new Error(`删除失败 (${res.status}): ${text}`);
+                addLog('✅ 删除成功: ' + filename);
+                // 刷新当前目录
+                loadList(currentDir.value);
+            } catch (err) {
+                addLog(err.message, true);
             }
+        };
+
+        // 返回上级目录
+        function goUp() {
+            let dir = currentDir.value.trim();
+            if (!dir) return; // 已在根目录
+            // 移除末尾的 /
+            dir = dir.endsWith('/') ? dir.slice(0, -1) : dir;
+            const parts = dir.split('/');
+            parts.pop(); // 去掉最后一级
+            const parent = parts.length ? parts.join('/') + '/' : '';
+            loadList(parent);
+        }
 
-            if (method === 'COPY') {
-                const destination = request.headers.get('Destination');
-                const overwrite = request.headers.get('Overwrite') !== 'F';
-                if (!destination) return new Response('Destination header required', { status: 400 });
-
-                const destUrl = new URL(destination);
-                const destPath = parsePath(destUrl.pathname);
-
-                const srcInfo = await getPathInfo(path);
-                const dstInfo = await getPathInfo(destPath);
-
-                if (!srcInfo.exists || srcInfo.type !== 'file')
-                    return new Response('Source not found or is a directory', { status: 404 });
-                if (dstInfo.exists && !overwrite)
-                    return new Response('Destination exists', { status: 412 });
-
-                try {
-                    const srcRes = await fetch(buildApiUrl(path));
-                    if (!srcRes.ok) return new Response('Source fetch failed', { status: 502 });
-
-                    const parts = destPath.split('/').filter(p => p);
-                    const filename = parts.pop();
-                    const dirPath = parts.join('/');
-
-                    const formData = new FormData();
-                    formData.append('file', await srcRes.blob(), filename);
-                    if (dirPath) formData.append('dir', dirPath + '/' + filename);
-
-                    const uploadRes = await fetch(`${API_BASE}/upload`, { method: 'POST', body: formData });
-                    if (!uploadRes.ok) return new Response('Upload failed', { status: uploadRes.status });
-                    const result = await uploadRes.json();
-
-                    if (result.success) {
-                        cacheTime = 0;
-                        return new Response(null, { status: dstInfo.exists ? 204 : 201, headers: { 'Location': destination } });
-                    } else {
-                        return new Response('Copy failed', { status: 500 });
-                    }
-                } catch (error) {
-                    console.error('COPY error:', error);
-                    return new Response('Copy error', { status: 500 });
-                }
+        // 左侧文件选择显示
+        fileInput.addEventListener('change', function() {
+            if (fileInput.files.length > 0) {
+                fileLabel.textContent = '📄 ' + fileInput.files[0].name;
+            } else {
+                fileLabel.textContent = '📎 选择文件';
+            }
+        });
+
+        // 左侧上传按钮
+        uploadBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) { alert('请选择文件'); return; }
+
+            const dir = uploadDir.value;
+            const remotePath = buildRemotePath(dir, file.name);
+
+            clearLog();
+            addLog('开始上传到: ' + remotePath);
+            uploadBtn.disabled = true;
+
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('dir', dir);
+
+            try {
+                const res = await fetch('/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+                addLog('✅ 上传成功！路径: ' + data.filename);
+                fileInput.value = '';
+                fileLabel.textContent = '📎 选择文件';
+                uploadDir.value = '';
+                // 上传后刷新当前目录
+                loadList(currentDir.value);
+            } catch (err) {
+                addLog('❌ ' + err.message, true);
+            } finally {
+                uploadBtn.disabled = false;
+            }
+        });
+
+        // 列出文件按钮
+        listBtn.addEventListener('click', () => {
+            loadList(currentDir.value.trim());
+        });
+
+        // 返回上级按钮
+        goUpBtn.addEventListener('click', goUp);
+
+        // API 测试：上传文件
+        apiUploadBtn.addEventListener('click', async () => {
+            const file = getUploadFile();
+            if (!file) {
+                alert('请选择文件（在左侧或右侧上传区域选择）');
+                return;
             }
 
-            if (method === 'MOVE') {
-                const destination = request.headers.get('Destination');
-                const overwrite = request.headers.get('Overwrite') !== 'F';
-                if (!destination) return new Response('Destination header required', { status: 400 });
-
-                const destUrl = new URL(destination);
-                const destPath = parsePath(destUrl.pathname);
-
-                const srcInfo = await getPathInfo(path);
-                const dstInfo = await getPathInfo(destPath);
-
-                if (!srcInfo.exists || srcInfo.type !== 'file')
-                    return new Response('Source not found or is a directory', { status: 404 });
-                if (dstInfo.exists && !overwrite)
-                    return new Response('Destination exists', { status: 412 });
-
-                try {
-                    const srcRes = await fetch(buildApiUrl(path));
-                    if (!srcRes.ok) return new Response('Source fetch failed', { status: 502 });
-
-                    const parts = destPath.split('/').filter(p => p);
-                    const filename = parts.pop();
-                    const dirPath = parts.join('/');
-
-                    const formData = new FormData();
-                    formData.append('file', await srcRes.blob(), filename);
-                    if (dirPath) formData.append('dir', dirPath + '/' + filename);
-
-                    const uploadRes = await fetch(`${API_BASE}/upload`, { method: 'POST', body: formData });
-                    if (!uploadRes.ok) return new Response('Upload failed', { status: uploadRes.status });
-                    const result = await uploadRes.json();
-
-                    if (result.success) {
-                        const cleanPath = path.slice(1);
-                        await fetch(`${API_BASE}/delete/${encodeURIComponent(cleanPath)}`, { method: 'DELETE' });
-                        cacheTime = 0;
-                        return new Response(null, { status: dstInfo.exists ? 204 : 201, headers: { 'Location': destination } });
-                    } else {
-                        return new Response('Move failed', { status: 500 });
-                    }
-                } catch (error) {
-                    console.error('MOVE error:', error);
-                    return new Response('Move error', { status: 500 });
+            const dir = apiUploadDir.value;
+            const remotePath = buildRemotePath(dir, file.name);
+
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('dir', dir);
+
+            try {
+                showApiResult('正在上传到 ' + remotePath + ' ...');
+                const res = await fetch('/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+                showApiResult(data);
+                loadList(currentDir.value);
+            } catch (err) {
+                showApiResult(err.message, true);
+            }
+        });
+
+        // API 测试：列出文件
+        apiListBtn.addEventListener('click', async () => {
+            const dir = apiListDir.value.trim();
+            try {
+                showApiResult('正在请求 /list?dir=' + dir + ' ...');
+                let url = '/list';
+                if (dir) url += '?dir=' + encodeURIComponent(dir);
+                const res = await fetch(url);
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+                showApiResult(data);
+                // 同时更新左侧浏览目录为相同目录并刷新
+                loadList(dir);
+            } catch (err) {
+                showApiResult(err.message, true);
+            }
+        });
+
+        // API 测试：获取文件信息
+        apiGetBtn.addEventListener('click', async () => {
+            const filename = apiFilename.value.trim();
+            if (!filename) { alert('请输入文件名'); return; }
+            try {
+                showApiResult('正在检查 /file/' + filename + ' ...');
+                const res = await fetch('/file/' + encodeURIComponent(filename), { method: 'HEAD' });
+                if (res.ok) {
+                    showApiResult({ status: 'OK', message: '文件存在，可下载' });
+                } else {
+                    const text = await res.text();
+                    throw new Error(`HTTP ${res.status}: ${text}`);
                 }
+            } catch (err) {
+                showApiResult(err.message, true);
             }
-
-            if (path === '/') {
-                const files = await getFileList();
-                const markers = files.filter(f => f.endsWith(DIR_MARKER));
-                const html = `<!DOCTYPE html>
-<html>
-<head><meta charset="UTF-8"><title>虚拟 WebDAV 服务</title>
-<style>body{font-family:sans-serif;margin:40px;line-height:1.6} pre{background:#f4f4f4;padding:10px;border-radius:5px} .info{background:#d4edda;border-left:4px solid #28a745;padding:10px} .stats{display:flex;gap:20px} .stat-box{background:#f8f9fa;padding:15px;border-radius:5px;flex:1;text-align:center}</style>
-</head>
-<body>
-<h1>📁 虚拟 WebDAV 服务</h1>
-<p>基于新版 Hugging Face Bucket API，支持空目录（通过隐藏文件 ${DIR_MARKER} 标记）。</p>
-<div class="info"><strong>✅ 修正：</strong> 子目录列表已修复，现在应能正确显示。</div>
-<div class="stats"><div class="stat-box"><h3>总文件数</h3><div style="font-size:24px">${files.length}</div></div><div class="stat-box"><h3>标记目录数</h3><div style="font-size:24px">${markers.length}</div></div></div>
-<p>连接地址：<code>${url.origin}/webdav</code></p>
-<h2>文件列表（不含标记文件）</h2>
-<pre>${JSON.stringify(files.filter(f => !f.endsWith(DIR_MARKER)), null, 2)}</pre>
-</body>
-</html>`;
-                return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-cache' } });
+        });
+
+        // API 测试：删除文件
+        apiDeleteBtn.addEventListener('click', async () => {
+            const filename = apiDeleteFilename.value.trim();
+            if (!filename) { alert('请输入文件名'); return; }
+            if (!confirm(`确定通过 API 删除 ${filename} 吗？`)) return;
+            try {
+                showApiResult('正在删除 ' + filename + ' ...');
+                const res = await fetch('/delete/' + encodeURIComponent(filename), { method: 'DELETE' });
+                const text = await res.text();
+                if (!res.ok) throw new Error(`HTTP ${res.status}: ${text}`);
+                showApiResult({ success: true, message: '文件已删除' });
+                loadList(currentDir.value);
+            } catch (err) {
+                showApiResult(err.message, true);
             }
+        });
 
-            return new Response('Not Found', { status: 404 });
-        } catch (err) {
-            console.error('Unhandled error:', err);
-            return new Response('Internal Server Error', { status: 500 });
-        }
-    },
-};
+        // 初始化：加载根目录
+        loadList('');
+    })();
+</script>
+</body>
+</html>"""
+
+
+@app.route('/')
+def index():
+    return HTML_CONTENT
+
+
+@app.route('/upload', methods=['POST'])
+def upload():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+
+    target_dir = request.form.get('dir', '').strip()
+    filename = file.filename
+    if target_dir:
+        # 规范化目录路径：去除前导 '/'，确保末尾有 '/'
+        if target_dir.startswith('/'):
+            target_dir = target_dir[1:]
+        if not target_dir.endswith('/'):
+            target_dir += '/'
+        remote_path = target_dir + filename
+    else:
+        remote_path = filename
+
+    with tempfile.NamedTemporaryFile(delete=False) as tmp:
+        file.save(tmp.name)
+        try:
+            batch_bucket_files(
+                bucket_id=BUCKET_ID,
+                add=[(tmp.name, remote_path)],
+                token=HF_TOKEN
+            )
+        except Exception as e:
+            return jsonify({'error': str(e)}), 500
+        finally:
+            os.unlink(tmp.name)
+
+    return jsonify({'success': True, 'filename': remote_path})
+
+
+@app.route('/list')
+def list_files():
+    """
+    列出 bucket 中指定目录下的第一层内容（文件和目录）。
+    若未提供 dir 参数或 dir 为空，则列出根目录下的第一层内容。
+    返回的列表元素为路径字符串，目录路径以 '/' 结尾，文件路径不以 '/' 结尾。
+    """
+    dir_param = request.args.get('dir', '').strip()
+    try:
+        # 规范化目录参数
+        if dir_param:
+            if dir_param.startswith('/'):
+                dir_param = dir_param[1:]
+            if not dir_param.endswith('/'):
+                dir_param += '/'
+        # 当 dir_param 为空时，prefix='' 表示根目录
+        items = list_bucket_tree(
+            bucket_id=BUCKET_ID,
+            prefix=dir_param,
+            recursive=False,          # 不递归，只列出该目录下的直接内容
+            token=HF_TOKEN
+        )
+        # 直接返回所有条目的 path，不区分类型（前端通过是否以 / 结尾来判断目录）
+        paths = [item.path for item in items]
+        return jsonify(paths)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/file/<path:filename>')
+def get_file(filename):
+    try:
+        with tempfile.TemporaryDirectory() as tmpdir:
+            local_path = os.path.join(tmpdir, filename)
+            download_bucket_files(
+                bucket_id=BUCKET_ID,
+                files=[(filename, local_path)],
+                token=HF_TOKEN
+            )
+            return send_file(local_path, as_attachment=True, download_name=filename)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+@app.route('/delete/<path:filename>', methods=['DELETE'])
+def delete_file(filename):
+    try:
+        batch_bucket_files(
+            bucket_id=BUCKET_ID,
+            delete=[filename],
+            token=HF_TOKEN
+        )
+        return jsonify({'success': True})
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)