用 Cloudflare Workers + R2 搭建免费的 Serverless 云存储系统

1
export default {
2
  async fetch(request, env) {
3
    const bucket = env.MY_BUCKET;
4
    const url = new URL(request.url);
5
    const ACCESS_PASSWORD = env.ACCESS_PASSWORD;
6

7
    if (!ACCESS_PASSWORD) {
8
      return handleRequest(request, env, bucket, url);
9
    }
10

11
    if (url.pathname === "/login" && request.method === "POST") {
12
      return await handleLogin(request, ACCESS_PASSWORD);
13
    }
14

15
    if (!isAuthenticated(request, ACCESS_PASSWORD) && url.pathname !== "/login") {
16
      return showLoginPage(request, "请先登录", false);
17
    }
18

19
    return handleRequest(request, env, bucket, url);
20
  },
21
};
22

23
function isAuthenticated(request, password) {
24
  const cookies = request.headers.get("Cookie") || "";
25
  return cookies.includes(`access_token=${password}`);
26
}
27

28
function showLoginPage(request, errorMsg = "", failed = false) {
29
  const html = buildLoginPage(errorMsg);
30
  const headers = { "Content-Type": "text/html" };
31
  if (failed) headers["Cache-Control"] = "no-store";
32
  return new Response(html, { status: failed ? 401 : 200, headers });
33
}
34

35
async function handleLogin(request, correctPassword) {
36
  const formData = await request.formData();
37
  const password = formData.get("password");
38

39
  if (password === correctPassword) {
40
    const headers = new Headers();
41
    headers.set("Location", "/");
42
    headers.set(
43
      "Set-Cookie",
44
      `access_token=${correctPassword}; Path=/; HttpOnly; Max-Age=86400; SameSite=Lax`
45
    );
46
    return new Response(null, { status: 302, headers });
47
  } else {
48
    return showLoginPage(request, "密码错误", true);
49
  }
50
}
51

52
async function handleRequest(request, env, bucket, url) {
53
  const pathname = url.pathname;
54

55
  try {
56
    if (pathname === "/" && request.method === "GET") {
57
      return await handleFileList(bucket, url);
58
    } else if (request.method === "GET" && pathname !== "/") {
59
      return await handleFileDownload(bucket, url);
60
    } else if (pathname === "/upload" && request.method === "POST") {
61
      return await handleFileUploadWithProgress(request, bucket);
62
    } else if (pathname === "/delete" && request.method === "POST") {
63
      return await handleFileDelete(bucket, request);
64
    }
65
  } catch (error) {
66
    return buildErrorResponse(error);
67
  }
68

69
  return new Response("Not Found", { status: 404 });
70
}
71

72
async function handleFileList(bucket, url) {
73
  try {
74
    const listResult = await bucket.list();
75
    let objects = (listResult.objects || [])
76
      .filter((o) => o.key)
77
      .map(normalizeFileObject);
78

79
    const search = url.searchParams.get("search") || "";
80
    if (search) {
81
      objects = objects.filter((obj) =>
82
        obj.key.toLowerCase().includes(search.toLowerCase())
83
      );
84
    }
85

86
    const sortBy = url.searchParams.get("sort") || "name";
87
    const order = url.searchParams.get("order") || "asc";
88
    objects.sort((a, b) => {
89
      let x, y;
90
      if (sortBy === "name") {
91
        x = a.key.toLowerCase();
92
        y = b.key.toLowerCase();
93
      } else if (sortBy === "size") {
94
        x = a.size;
95
        y = b.size;
96
      } else if (sortBy === "date") {
97
        x = (a.uploaded || 0);
98
        y = (b.uploaded || 0);
99
      }
100
      return order === "asc" ? (x > y ? 1 : -1) : (x < y ? 1 : -1);
101
    });
102

103
    const html = renderEnhancedFileListPage(objects, url);
104
    return new Response(html, {
105
      headers: { "Content-Type": "text/html; charset=UTF-8" },
106
    });
107
  } catch (error) {
108
    return buildErrorResponse(error);
109
  }
110
}
111

112
function normalizeFileObject(obj) {
113
  return {
114
    key: obj.key || "",
115
    size: obj.size || 0,
116
    uploaded: obj.uploaded || new Date().toISOString(),
117
  };
118
}
119

120
async function handleFileDownload(bucket, url) {
121
  const key = decodeURIComponent(url.pathname.slice(1));
122
  const object = await bucket.get(key);
123
  if (!object) return new Response("文件不存在", { status: 404 });
124

125
  const headers = new Headers();
126
  if (object.writeHttpMetadata) object.writeHttpMetadata(headers);
127
  headers.set("Content-Length", (object.size || 0).toString());
128
  headers.set("Content-Disposition", `attachment; filename*=UTF-8''${encodeURIComponent(key)}`);
129
  return new Response(object.body, { headers });
130
}
131

132
async function handleFileUploadWithProgress(request, bucket) {
133
  const formData = await request.formData();
134
  const files = formData.getAll("file");
135
  if (!files.length) return new Response(JSON.stringify({ error: "未选择文件" }), { status: 400 });
136

137
  const results = [];
138
  for (const file of files) {
139
    try {
140
      await bucket.put(file.name, file.stream());
141
      results.push({ name: file.name, success: true });
142
    } catch (err) {
143
      results.push({ name: file.name, success: false, error: err.message });
144
    }
145
  }
146
  return new Response(JSON.stringify({ results }), {
147
    headers: { "Content-Type": "application/json" },
148
  });
149
}
150

151
async function handleFileDelete(bucket, request) {
152
  const formData = await request.formData();
153
  const fileKeys = formData.getAll("fileKey");
154
  if (!fileKeys.length) {
155
    return new Response(JSON.stringify({ error: "未选择文件" }), { status: 400 });
156
  }
157

158
  const results = [];
159
  for (const key of fileKeys) {
160
    try {
161
      await bucket.delete(key);
162
      results.push({ key, success: true });
163
    } catch (err) {
164
      results.push({ key, success: false, error: err.message });
165
    }
166
  }
167
  return new Response(JSON.stringify({ results }), {
168
    headers: { "Content-Type": "application/json" },
169
  });
170
}
171

172
function renderEnhancedFileListPage(objects, url) {
173
  const stats = {
174
    count: objects.length,
175
    size: objects.reduce((sum, o) => sum + o.size, 0),
176
  };
177

178
  const searchParams = new URLSearchParams(url.searchParams);
179
  const currentSearch = searchParams.get("search") || "";
180
  const currentSort = searchParams.get("sort") || "name";
181
  const currentOrder = searchParams.get("order") || "asc";
182

183
  const fileItems = objects.length > 0
184
    ? objects.map((file, index) => {
185
        const encodedKey = encodeURIComponent(file.key);
186
        const isImage = /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.key);
187
        const isFolder = file.key.endsWith("/");
188
        const icon = isFolder ? "fa-folder" : (isImage ? "fa-image" : "fa-file");
189
        const display = isImage
190
          ? `<img src="/${encodedKey}" style="max-width: 60px; max-height: 60px; object-fit: cover; border-radius: 4px;" alt="preview" />`
191
          : `<i class="fas ${icon}" style="font-size: 1.5rem; color: var(--primary);"></i>`;
192

193
        return `
194
          <div class="file-item">
195
            <div class="file-checkbox">
196
              <input type="checkbox" name="fileKey" value="${encodeURIComponent(file.key)}" id="check-${index}" />
197
            </div>
198
            <div class="file-icon">${display}</div>
199
            <div class="file-name-cell">
200
              <a href="/${encodedKey}" class="file-name link">${escapeHtml(file.key)}</a>
201
            </div>
202
            <div class="file-size">${formatFileSize(file.size)}</div>
203
            <div class="file-date">${new Date(file.uploaded).toLocaleString('zh-CN')}</div>
204
            <div class="file-actions">
205
              <div class="actions-wrapper">
206
                <a href="/${encodedKey}" class="btn btn-primary btn-sm">下载</a>
207
                <form style="display: inline;" onsubmit="return deleteSingleFile('${escapeHtml(file.key)}')">
208
                  <input type="hidden" name="fileKey" value="${escapeHtml(file.key)}">
209
                  <button type="submit" class="btn btn-danger btn-sm">删除</button>
210
                </form>
211
              </div>
212
            </div>
213
          </div>
214
        `;
215
      }).join("")
216
    : `
217
      <div class="empty-state">
218
        <div class="empty-icon"><i class="fas fa-folder-open"></i></div>
219
        <h3>📁 暂无文件</h3>
220
        <p>上传您的第一个文件开始使用吧！</p>
221
      </div>
222
    `;
223

224
  return `
225
  <!DOCTYPE html>
226
  <html lang="zh-CN">
227
  <head>
228
    <meta charset="UTF-8" />
229
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
230
    <title>☁️ 我的云存储</title>
231
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
232
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
233
    <style>
234
      :root {
235
        --primary: #6366f1;
236
        --primary-hover: #4f46e5;
237
        --danger: #ef4444;
238
        --text: #1f2937;
239
        --text-light: #6b7280;
240
        --bg: #f8fafc;
241
        --card-bg: #ffffff;
242
        --border: #e5e7eb;
243
        --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
244
        --input-bg: #ffffff;
245
      }
246
      [data-theme="dark"] {
247
        --text: #f9fafb;
248
        --text-light: #9ca3af;
249
        --bg: #111827;
250
        --card-bg: #1f2937;
251
        --border: #374151;
252
        --input-bg: #374151;
253
      }
254
      * { margin: 0; padding: 0; box-sizing: border-box; }
255
      body {
256
        font-family: 'Inter', sans-serif;
257
        background-color: var(--bg);
258
        color: var(--text);
259
        line-height: 1.6;
260
        transition: background-color 0.3s, color 0.3s;
261
      }
262
      .container { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }
263
      .header {
264
        display: flex;
265
        justify-content: space-between;
266
        align-items: center;
267
        margin-bottom: 2rem;
268
        flex-wrap: wrap;
269
        gap: 1rem;
270
      }
271
      .header h1 {
272
        font-size: 1.8rem;
273
        font-weight: 700;
274
        color: var(--primary);
275
      }
276
      .theme-toggle {
277
        background: var(--card-bg);
278
        border: 1px solid var(--border);
279
        color: var(--text);
280
        padding: 0.5rem 1rem;
281
        border-radius: 6px;
282
        cursor: pointer;
283
        font-size: 0.9rem;
284
      }
285
      .upload-area {
286
        background: var(--card-bg);
287
        border-radius: 12px;
288
        padding: 2rem;
289
        margin-bottom: 2rem;
290
        box-shadow: var(--shadow);
291
        border: 1px solid var(--border);
292
      }
293
      .controls {
294
        background: var(--card-bg);
295
        border-radius: 12px;
296
        padding: 1.5rem;
297
        margin-bottom: 2rem;
298
        box-shadow: var(--shadow);
299
        border: 1px solid var(--border);
300
        display: flex;
301
        flex-wrap: wrap;
302
        gap: 1rem;
303
        align-items: center;
304
      }
305
      .search-box {
306
        flex: 1;
307
        min-width: 200px;
308
        padding: 0.5rem;
309
        border: 1px solid var(--border);
310
        border-radius: 6px;
311
        background: var(--input-bg);
312
        color: var(--text);
313
      }
314
      .sort-select {
315
        padding: 0.5rem;
316
        border: 1px solid var(--border);
317
        border-radius: 6px;
318
        background: var(--input-bg);
319
        color: var(--text);
320
      }
321
      .file-list {
322
        background: var(--card-bg);
323
        border-radius: 12px;
324
        box-shadow: var(--shadow);
325
        border: 1px solid var(--border);
326
        overflow: hidden;
327
      }
328
      .file-list-header {
329
        display: grid;
330
        grid-template-columns: 0.3fr 3fr 1fr 1fr 1fr;
331
        gap: 1rem;
332
        padding: 1rem;
333
        font-weight: 600;
334
        background: #f9fafb;
335
        border-bottom: 1px solid var(--border);
336
        align-items: center;
337
      }
338
      [data-theme="dark"] .file-list-header {
339
        background: #374151;
340
      }
341
      .file-item {
342
        display: grid;
343
        grid-template-columns: 0.3fr 3fr 1fr 1fr 1fr 1fr;
344
        gap: 1rem;
345
        padding: 1rem;
346
        align-items: center;
347
        border-bottom: 1px solid var(--border);
348
        transition: background-color 0.15s;
349
      }
350
      .file-item:hover {
351
        background-color: #f9fafb;
352
      }
353
      [data-theme="dark"] .file-item:hover {
354
        background-color: #374151;
355
      }
356
      .file-item:last-child { border-bottom: none; }
357
      .file-checkbox {
358
        display: flex;
359
        justify-content: center;
360
      }
361
      .file-icon {
362
        display: flex;
363
        align-items: center;
364
        justify-content: center;
365
      }
366
      .file-name-cell {
367
        min-width: 0;
368
      }
369
      .file-name {
370
        font-weight: 500;
371
        color: var(--text);
372
        word-break: break-all;
373
        overflow-wrap: break-word;
374
      }
375
      .file-name.link {
376
        text-decoration: none;
377
        color: var(--primary);
378
      }
379
      .file-name.link:hover {
380
        text-decoration: underline;
381
      }
382
      .file-size, .file-date {
383
        color: var(--text-light);
384
        font-size: 0.9rem;
385
      }
386
      .file-actions {
387
        min-width: 120px;
388
        display: flex;
389
        justify-content: flex-end;
390
      }
391
      .actions-wrapper {
392
        display: flex;
393
        gap: 0.5rem;
394
        flex-wrap: wrap;
395
      }
396
      .btn {
397
        padding: 0.4rem 0.8rem;
398
        border-radius: 6px;
399
        font-size: 0.85rem;
400
        font-weight: 500;
401
        cursor: pointer;
402
        text-decoration: none;
403
        display: inline-flex;
404
        align-items: center;
405
        gap: 0.3rem;
406
        border: 1px solid transparent;
407
        transition: all 0.15s ease;
408
        white-space: nowrap;
409
      }
410
      .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
411
      .btn-primary {
412
        background: var(--primary);
413
        color: white;
414
        border-color: var(--primary);
415
      }
416
      .btn-primary:hover {
417
        background: var(--primary-hover);
418
      }
419
      .btn-danger {
420
        background: var(--danger);
421
        color: white;
422
        border-color: var(--danger);
423
      }
424
      .btn-danger:hover {
425
        background: #dc2626;
426
      }
427
      .link { color: var(--primary); }
428
      .empty-state {
429
        text-align: center;
430
        padding: 3rem;
431
        color: var(--text-light);
432
      }
433
      .empty-icon {
434
        font-size: 3rem;
435
        margin-bottom: 1rem;
436
        color: var(--border);
437
      }
438
      .bulk-actions {
439
        background: var(--card-bg);
440
        border-radius: 12px;
441
        padding: 1rem;
442
        margin-bottom: 1rem;
443
        box-shadow: var(--shadow);
444
        border: 1px solid var(--border);
445
        display: flex;
446
        justify-content: space-between;
447
        align-items: center;
448
      }
449
      .bulk-actions button {
450
        padding: 0.5rem 1rem;
451
        border-radius: 6px;
452
        font-weight: 500;
453
        cursor: pointer;
454
        border: 1px solid transparent;
455
        transition: all 0.15s;
456
      }
457
      .bulk-delete-btn {
458
        background: var(--danger);
459
        color: white;
460
        border-color: var(--danger);
461
      }
462
      .bulk-delete-btn:hover:not(:disabled) {
463
        background: #dc2626;
464
      }
465
      .bulk-delete-btn:disabled {
466
        background: var(--border);
467
        color: var(--text-light);
468
        cursor: not-allowed;
469
        border-color: var(--border);
470
      }
471

472
      /* 移动端优化 */
473
      @media (max-width: 768px) {
474
        .container {
475
          padding: 1rem 0.5rem;
476
        }
477

478
        .header {
479
          flex-direction: column;
480
          text-align: center;
481
          gap: 0.5rem;
482
        }
483

484
        .header h1 {
485
          font-size: 1.5rem;
486
        }
487

488
        .controls {
489
          flex-direction: column;
490
          align-items: stretch;
491
          gap: 0.75rem;
492
        }
493

494
        .search-box,
495
        .sort-select {
496
          min-width: unset;
497
          width: 100%;
498
        }
499

500
        .file-list-header {
501
          display: none;
502
        }
503

504
        .file-item {
505
          grid-template-columns: 1fr;
506
          gap: 0.75rem;
507
          padding: 1rem;
508
          align-items: flex-start;
509
        }
510

511
        .file-checkbox {
512
          justify-content: flex-start;
513
          margin-right: 0.5rem;
514
          margin-left: 0.5rem;
515
          display: flex; /* 显示复选框 */
516
        }
517

518
        .file-item > div {
519
          width: 100%;
520
        }
521

522
        .file-name-cell {
523
          order: -2;
524
          min-width: unset;
525
        }
526

527
        .file-name {
528
          font-size: 1.1rem;
529
          word-break: break-word;
530
          margin-bottom: 0.5rem;
531
        }
532

533
        .file-icon {
534
          order: -1;
535
          font-size: 2rem;
536
          margin-bottom: 0.5rem;
537
          justify-content: flex-start;
538
        }
539

540
        .file-icon i {
541
          font-size: 2rem !important;
542
        }
543

544
        .file-icon img {
545
          max-width: 80px !important;
546
          max-height: 80px !important;
547
        }
548

549
        .file-size,
550
        .file-date {
551
          order: 1;
552
          font-size: 0.85rem;
553
          margin-bottom: 0.5rem;
554
        }
555

556
        .file-actions {
557
          order: 2;
558
          min-width: unset;
559
          justify-content: flex-start;
560
          margin-top: 0.5rem;
561
          width: 100%;
562
        }
563

564
        .actions-wrapper {
565
          justify-content: flex-start;
566
          width: 100%;
567
        }
568

569
        .btn {
570
          flex: 1;
571
          justify-content: center;
572
          min-width: 0;
573
        }
574

575
        .btn-sm {
576
          flex: 1;
577
        }
578

579
        .bulk-actions {
580
          flex-direction: column;
581
          gap: 0.75rem;
582
          align-items: stretch;
583
        }
584

585
        .bulk-actions button {
586
          width: 100%;
587
        }
588

589
        /* 移动端显示复选框 */
590
        .file-checkbox {
591
          display: flex;
592
        }
593
      }
594

595
      @media (max-width: 480px) {
596
        .file-item {
597
          padding: 0.75rem;
598
        }
599

600
        .btn {
601
          padding: 0.5rem;
602
          font-size: 0.8rem;
603
        }
604

605
        .btn-sm {
606
          padding: 0.4rem;
607
          font-size: 0.75rem;
608
        }
609
      }
610
    </style>
611
  </head>
612
  <body>
613
    <div class="container">
614
      <div class="header">
615
        <h1>☁️ 我的云存储</h1>
616
        <button class="theme-toggle" onclick="toggleTheme()">🌙 切换主题</button>
617
      </div>
618

619
      <div class="upload-area">
620
        <form class="upload-form" id="uploadForm" enctype="multipart/form-data" method="POST" action="/upload">
621
          <input type="file" id="fileInput" name="file" multiple />
622
          <label for="fileInput" style="display: inline-block; background: var(--primary); color: white; padding: 0.7rem 1.2rem; border-radius: 6px; cursor: pointer; margin-bottom: 1rem;">📁 选择文件</label>
623
          <button type="submit" style="background: var(--primary); color: white; padding: 0.7rem 1.2rem; border-radius: 6px; cursor: pointer;">上传文件</button>
624
        </form>
625
      </div>
626

627
      <div class="controls">
628
        <input type="text" class="search-box" placeholder="🔍 搜索文件..." name="search" value="${currentSearch}" />
629
        <select class="sort-select" name="sort">
630
          <option value="name" ${currentSort === 'name' ? 'selected' : ''}>📝 名称</option>
631
          <option value="size" ${currentSort === 'size' ? 'selected' : ''}>📦 大小</option>
632
          <option value="date" ${currentSort === 'date' ? 'selected' : ''}>📅 修改时间</option>
633
        </select>
634
        <select class="sort-select" name="order">
635
          <option value="asc" ${currentOrder === 'asc' ? 'selected' : ''}>⬆️ 升序</option>
636
          <option value="desc" ${currentOrder === 'desc' ? 'selected' : ''}>⬇️ 降序</option>
637
        </select>
638
      </div>
639

640
      <div class="bulk-actions">
641
        <button type="button" class="btn btn-primary" onclick="toggleSelectAll()" style="margin-right: 1rem;">✅ 全选</button>
642
        <button type="button" class="btn bulk-delete-btn" id="bulkDeleteBtn" onclick="bulkDelete()" disabled>🗑️ 批量删除</button>
643
      </div>
644

645
      <div class="file-list">
646
        <div class="file-list-header">
647
          <div></div>
648
          <div>文件名</div>
649
          <div>大小</div>
650
          <div>修改时间</div>
651
          <div>操作</div>
652
        </div>
653
        ${fileItems}
654
      </div>
655
    </div>
656

657
    <script>
658
      function toggleTheme() {
659
        const html = document.documentElement;
660
        const current = html.getAttribute('data-theme');
661
        const next = current === 'dark' ? 'light' : 'dark';
662
        html.setAttribute('data-theme', next);
663
        localStorage.setItem('theme', next);
664
      }
665
      (function() {
666
        const html = document.documentElement;
667
        const saved = localStorage.getItem('theme') || 'light';
668
        html.setAttribute('data-theme', saved);
669
      })();
670

671
      document.getElementById('uploadForm').addEventListener('submit', async (e) => {
672
        e.preventDefault();
673
        const fileInput = document.getElementById('fileInput');
674
        const files = fileInput.files;
675
        if (!files.length) {
676
          alert('请选择文件');
677
          return;
678
        }
679
        const formData = new FormData();
680
        for (let i = 0; i < files.length; i++) formData.append('file', files[i]);
681
        const res = await fetch('/upload', { method: 'POST', body: formData });
682
        if (res.ok) {
683
          alert('上传成功');
684
          location.reload();
685
        } else {
686
          alert('上传失败');
687
        }
688
      });
689

690
      function toggleSelectAll() {
691
        const checkboxes = document.querySelectorAll('input[name="fileKey"]');
692
        const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
693
        let checked = false;
694
        checkboxes.forEach(cb => {
695
          if (!checked) checked = !cb.checked;
696
          cb.checked = !cb.checked;
697
        });
698
        updateBulkDeleteButton();
699
      }
700

701
      function updateBulkDeleteButton() {
702
        const checkboxes = document.querySelectorAll('input[name="fileKey"]:checked');
703
        const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
704
        bulkDeleteBtn.disabled = checkboxes.length === 0;
705
      }
706

707
      function bulkDelete() {
708
        const checkboxes = document.querySelectorAll('input[name="fileKey"]:checked');
709
        if (checkboxes.length === 0) {
710
          alert('请至少选择一个文件');
711
          return;
712
        }
713
        const keys = Array.from(checkboxes).map(cb => decodeURIComponent(cb.value));
714
        if (!confirm('确定删除选中的 ' + keys.length + ' 个文件/文件夹吗？')) return;
715
        const formData = new FormData();
716
        keys.forEach(key => formData.append('fileKey', key));
717
        fetch('/delete', {
718
          method: 'POST',
719
          body: formData
720
        }).then(res => res.json()).then(json => {
721
          if (json.results && json.results.every(r => r.success)) {
722
            alert('批量删除成功');
723
            location.reload();
724
          } else {
725
            alert('部分文件删除失败，请重试');
726
          }
727
        }).catch(err => {
728
          alert('删除失败：' + err.message);
729
        });
730
      }
731

732
      function deleteSingleFile(filename) {
733
        if (confirm('确定删除 "' + filename + '"？')) {
734
          const formData = new FormData();
735
          formData.append('fileKey', filename);
736
          fetch('/delete', {
737
            method: 'POST',
738
            body: formData
739
          }).then(res => res.json()).then(json => {
740
            if (json.results && json.results[0] && json.results[0].success) {
741
              alert('删除成功');
742
              location.reload();
743
            } else {
744
              alert('删除失败，请重试');
745
            }
746
          }).catch(err => {
747
            alert('删除失败：' + err.message);
748
          });
749
          return false;
750
        }
751
        return false;
752
      }
753

754
      document.addEventListener('change', (e) => {
755
        if (e.target && e.target.name === 'fileKey') {
756
          updateBulkDeleteButton();
757
        }
758
      });
759

760
      const formControls = document.querySelectorAll('.controls input, .controls select');
761
      formControls.forEach(control => {
762
        control.addEventListener('change', () => {
763
          const search = document.querySelector('.search-box').value;
764
          const sort = document.querySelector('.sort-select:nth-of-type(1)').value;
765
          const order = document.querySelector('.sort-select:nth-of-type(2)').value;
766
          const params = new URLSearchParams(window.location.search);
767
          params.set('search', search);
768
          params.set('sort', sort);
769
          params.set('order', order);
770
          window.location.search = params.toString();
771
        });
772
      });
773
    </script>
774
  </body>
775
</html>
776
  `;
777
}
778

779
function buildLoginPage(errorMsg) {
780
  return `
781
<!DOCTYPE html>
782
<html lang="zh-CN">
783
<head>
784
  <meta charset="UTF-8" />
785
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
786
  <title>登录 - 我的云存储</title>
787
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
788
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
789
  <style>
790
    :root {
791
      --primary: #6366f1;
792
      --primary-hover: #4f46e5;
793
      --danger: #ef4444;
794
      --text: #1f2937;
795
      --text-light: #6b7280;
796
      --bg: #f8fafc;
797
      --card-bg: #ffffff;
798
      --border: #e5e7eb;
799
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
800
      --input-bg: #ffffff;
801
    }
802
    [data-theme="dark"] {
803
      --text: #f9fafb;
804
      --text-light: #9ca3af;
805
      --bg: #111827;
806
      --card-bg: #1f2937;
807
      --border: #374151;
808
      --input-bg: #374151;
809
    }
810
    * { margin: 0; padding: 0; box-sizing: border-box; }
811
    body {
812
      font-family: 'Inter', sans-serif;
813
      background-color: var(--bg);
814
      color: var(--text);
815
      line-height: 1.6;
816
      transition: background-color 0.3s, color 0.3s;
817
      min-height: 100vh;
818
      display: flex;
819
      align-items: center;
820
      justify-content: center;
821
    }
822
    .login-container {
823
      background: var(--card-bg);
824
      border-radius: 12px;
825
      padding: 2.5rem;
826
      box-shadow: var(--shadow);
827
      border: 1px solid var(--border);
828
      width: 100%;
829
      max-width: 400px;
830
      text-align: center;
831
    }
832
    .login-title {
833
      font-size: 1.8rem;
834
      font-weight: 700;
835
      color: var(--primary);
836
      margin-bottom: 1.5rem;
837
    }
838
    .login-icon {
839
      font-size: 3rem;
840
      margin-bottom: 1.5rem;
841
      color: var(--primary);
842
    }
843
    .login-form {
844
      display: flex;
845
      flex-direction: column;
846
      gap: 1.5rem;
847
    }
848
    .form-group {
849
      display: flex;
850
      flex-direction: column;
851
      gap: 0.5rem;
852
    }
853
    .form-label {
854
      font-weight: 500;
855
      color: var(--text);
856
    }
857
    .form-input {
858
      padding: 0.75rem;
859
      border: 1px solid var(--border);
860
      border-radius: 6px;
861
      background: var(--input-bg);
862
      color: var(--text);
863
      font-size: 1rem;
864
    }
865
    .form-input:focus {
866
      outline: none;
867
      border-color: var(--primary);
868
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
869
    }
870
    .login-btn {
871
      padding: 0.75rem;
872
      background: var(--primary);
873
      color: white;
874
      border: none;
875
      border-radius: 6px;
876
      font-size: 1rem;
877
      font-weight: 500;
878
      cursor: pointer;
879
      transition: background-color 0.15s;
880
    }
881
    .login-btn:hover {
882
      background: var(--primary-hover);
883
    }
884
    .login-btn:disabled {
885
      background: var(--border);
886
      color: var(--text-light);
887
      cursor: not-allowed;
888
    }
889
    .error-message {
890
      background: #fef2f2;
891
      color: var(--danger);
892
      padding: 0.75rem;
893
      border-radius: 6px;
894
      border: 1px solid #fecaca;
895
      margin-bottom: 1rem;
896
    }
897
    [data-theme="dark"] .error-message {
898
      background: #371e1e;
899
      border-color: #7f1d1d;
900
    }
901
    .theme-toggle {
902
      position: absolute;
903
      top: 1rem;
904
      right: 1rem;
905
      background: var(--card-bg);
906
      border: 1px solid var(--border);
907
      color: var(--text);
908
      padding: 0.5rem 1rem;
909
      border-radius: 6px;
910
      cursor: pointer;
911
      font-size: 0.9rem;
912
    }
913
    .login-footer {
914
      margin-top: 1.5rem;
915
      font-size: 0.85rem;
916
      color: var(--text-light);
917
    }
918
    .login-footer a {
919
      color: var(--primary);
920
      text-decoration: none;
921
    }
922
    .login-footer a:hover {
923
      text-decoration: underline;
924
    }
925

926
    /* 移动端优化 */
927
    @media (max-width: 480px) {
928
      .login-container {
929
        margin: 1rem;
930
        padding: 1.5rem;
931
      }
932

933
      .theme-toggle {
934
        position: relative;
935
        top: auto;
936
        right: auto;
937
        margin-bottom: 1rem;
938
      }
939
    }
940
  </style>
941
</head>
942
<body>
943
  <button class="theme-toggle" onclick="toggleTheme()">🌙 切换主题</button>
944

945
  <div class="login-container">
946
    <div class="login-icon">
947
      <i class="fas fa-lock"></i>
948
    </div>
949

950
    <h1 class="login-title">请登录</h1>
951

952
    ${errorMsg ? `<div class="error-message">⚠️ ${escapeHtml(errorMsg)}</div>` : ''}
953

954
    <form class="login-form" method="POST" action="/login">
955
      <div class="form-group">
956
        <label class="form-label" for="password">访问密码</label>
957
        <input
958
          type="password"
959
          id="password"
960
          name="password"
961
          class="form-input"
962
          placeholder="请输入访问密码"
963
          required
964
          autocomplete="current-password"
965
        />
966
      </div>
967

968
      <button type="submit" class="login-btn">
969
        <i class="fas fa-sign-in-alt" style="margin-right: 0.5rem;"></i>
970
        登录
971
      </button>
972
    </form>
973

974
    <div class="login-footer">
975
      <p>请输入正确的访问密码以继续使用云存储服务</p>
976
    </div>
977
  </div>
978

979
  <script>
980
    function toggleTheme() {
981
      const html = document.documentElement;
982
      const current = html.getAttribute('data-theme');
983
      const next = current === 'dark' ? 'light' : 'dark';
984
      html.setAttribute('data-theme', next);
985
      localStorage.setItem('theme', next);
986
    }
987
    (function() {
988
      const html = document.documentElement;
989
      const saved = localStorage.getItem('theme') || 'light';
990
      html.setAttribute('data-theme', saved);
991
    })();
992

993
    function escapeHtml(unsafe) {
994
      return unsafe
995
        .replace(/&/g, "&amp;")
996
        .replace(/</g, "&lt;")
997
        .replace(/>/g, "&gt;")
998
        .replace(/"/g, "&quot;")
999
        .replace(/'/g, "&#039;");
1000
    }
1001
  </script>
1002
</body>
1003
</html>
1004
`;
1005
}
1006

1007
function buildErrorResponse(error) {
1008
  return new Response(`
1009
  <!DOCTYPE html>
1010
  <html>
1011
  <body style="font-family: sans-serif; text-align: center; padding: 2rem; background: #f5f5f5;">
1012
    <div style="background: white; padding: 2rem; border-radius: 8px;">
1013
      <h2>发生错误</h2>
1014
      <p>${error.message || error}</p>
1015
      <a href="/" style="color: #6366f1;">返回首页</a>
1016
    </div>
1017
  </body>
1018
</html>
1019
  `, { status: 500, headers: { "Content-Type": "text/html" } });
1020
}
1021

1022
function formatFileSize(bytes) {
1023
  if (!bytes || bytes === 0) return "0 B";
1024
  const k = 1024;
1025
  const sizes = ["B", "KB", "MB", "GB", "TB"];
1026
  const i = Math.floor(Math.log(bytes) / Math.log(k));
1027
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
1028
}
1029

1030
function escapeHtml(unsafe) {
1031
  return unsafe
1032
    .replace(/&/g, "&amp;")
1033
    .replace(/</g, "&lt;")
1034
    .replace(/>/g, "&gt;")
1035
    .replace(/"/g, "&quot;")
1036
    .replace(/'/g, "&#039;");
1037
}