星觅海

GH-ImgBed —— 用 GitHub 存图 + Cloudflare 边缘分发，零成本自建图床

Fri, 09 Oct 2026 18:35:00 GMT

一个零服务器成本的免费图床：图片存进你自己的 GitHub 仓库，通过 Cloudflare 边缘节点缓存分发。

前端是纯静态页面，后端只有两个 Cloudflare Pages Functions。没有数据库、没有自建服务器、没有构建步骤。

为什么不用现成图床

第三方图床要么有「X 个月未访问自动删除」，要么哪天就关停了。图片存在自己仓库里，数据在自己手上，链接也不会因为服务跑路而失效。

🏗️ 整体架构#

浏览器从头到尾只跟 Cloudflare 边缘节点通信，回源由服务端完成。

POST 上传

GET /v2/xxx.png

Contents API PUT

命中缓存

未命中回源

👤 浏览器

⚙️ upload.js

Pages Function

⚙️ v2/[[vkey]].js

访问代理

🗄️ GitHub 仓库

images 分支

⚡ Cloudflare

边缘缓存

GitHub Raw

POST 上传

GET /v2/xxx.png

Contents API PUT

命中缓存

未命中回源

👤 浏览器

⚙️ upload.js

Pages Function

⚙️ v2/[[vkey]].js

访问代理

🗄️ GitHub 仓库

images 分支

⚡ Cloudflare

边缘缓存

GitHub Raw

关键点：访客所在网络能否直连 GitHub，并不影响访问 —— 回源这一步发生在服务端。

🔄 上传与访问时序#

边缘缓存GitHubCloudflare Pages Functions浏览器边缘缓存GitHubCloudflare Pages Functions浏览器上传访问alt[命中][未命中]POST /upload（multipart）校验大小 ≤ 20MB，转 base64PUT /contents/<path>（branch=images）返回 content.sha{ link, raw, path, sha }GET /v2/261010-k7f2m.pngcache.match(key)缓存副本GET raw.githubusercontent.com图片字节waitUntil(cache.put) 异步写缓存图片 + Cache-Control: immutable

文件名格式是 YYMMDD-5位随机.扩展名，例如 261010-k7f2m.png。5 位随机空间约 6000 万，撞名概率极低，代码里仍保留了最多 6 次的换名重试。

🚀 部署流程#

① 建 images 孤儿分支

git switch --orphan images

② 生成 Fine-grained Token

Contents: Read and write

③ Cloudflare Pages 连接仓库

④ Framework preset: None

Build command 留空

输出目录 /

⑤ 配环境变量

GITHUB_TOKEN / OWNER / REPO

⑥ Branch Preview 设为 None

⑦ 重新部署

⑧ 可选：开启人机验证

⑨ 可选：绑定自定义域名

① 建 images 孤儿分支

git switch --orphan images

② 生成 Fine-grained Token

Contents: Read and write

③ Cloudflare Pages 连接仓库

④ Framework preset: None

Build command 留空

输出目录 /

⑤ 配环境变量

GITHUB_TOKEN / OWNER / REPO

⑥ Branch Preview 设为 None

⑦ 重新部署

⑧ 可选：开启人机验证

⑨ 可选：绑定自定义域名

✨ 功能特性#

GH-ImgBed

💾 存储

存在自己的 GitHub 仓库

不会过期自动删除

返回 sha 可精确删除

仓库可私有

🔐 安全

可选人机验证

一次验证放行整批

串行上传

失败原因可见

⚡ 分发

Cache API 确定性缓存

首次访问即生效

链接与后端解耦

支持自定义域名

🖱️ 使用

点击拖拽粘贴上传

支持多选

复制链接或 Markdown

生成二维码

localStorage 历史

🎨 体验

深浅主题跟随系统

首屏无闪烁

小屏安全区适配

44px 触控目标

GH-ImgBed

💾 存储

存在自己的 GitHub 仓库

不会过期自动删除

返回 sha 可精确删除

仓库可私有

🔐 安全

可选人机验证

一次验证放行整批

串行上传

失败原因可见

⚡ 分发

Cache API 确定性缓存

首次访问即生效

链接与后端解耦

支持自定义域名

🖱️ 使用

点击拖拽粘贴上传

支持多选

复制链接或 Markdown

生成二维码

localStorage 历史

🎨 体验

深浅主题跟随系统

首屏无闪烁

小屏安全区适配

44px 触控目标

⚙️ 环境变量#

变量名	说明	必填
`GITHUB_TOKEN`	Fine-grained 令牌，仅对存图仓库开放 Contents 读写	✅
`GITHUB_OWNER`	存图仓库的所有者用户名	✅
`GITHUB_REPO`	存图仓库名	✅
`GITHUB_PATH`	仓库内子目录，留空则存根目录（链接更短）	可选
`IMG_CDN`	设为 `jsdelivr` 可改走 jsDelivr 回源	可选
`TURNSTILE_SECRET`	Turnstile 的 Secret Key（不是 Site Key）	可选
`TURNSTILE_HOSTNAMES`	实际访问用的完整主机名，逗号分隔	启用验证时必填

两个容易踩的坑

1. 分支名固定为 images，不能自定义。

访问代理不校验路径，如果图片与代码同分支，代码文件可能被构造路径读到。固定孤儿分支是安全隔离的前提。

2. 务必把 Branch Preview 设为 None。

否则每次上传图片推送到 images 分支都会触发一次构建，很快耗尽每月 500 次的免费额度。

改完环境变量需要重新部署才生效。

启用验证前，先换掉前端的 Site Key

assets/app.js 顶部的 TURNSTILE_SITEKEY 是本项目作者的，直接部署不会生效 —— 该 widget 的 domains 白名单里没有你的域名，验证组件会渲染失败。

1
const TURNSTILE_SITEKEY = "0x4AAAAAAFUKaXfCncBNv71l"; // ← 换成你自己的

它与 TURNSTILE_SECRET 必须来自同一个 widget，跨 widget 混用同样会报 invalid-input-secret。

🔐 人机验证（可选）#

防止脚本批量刷上传接口，基于 Cloudflare Turnstile。只保护上传，不保护 /v2/ —— 那是出图用的，加了验证图就无法外链了。

为什么需要两处配置#

配置	位置	作用
widget 的 domains	Turnstile 控制台	哪些域名能签发 token
`TURNSTILE_HOSTNAMES`	环境变量	只接受为你签发的 token

两处都要配。只配控制台是不够的：任何人都能自己建一个 widget（域名填他自己的），通过挑战后把 token 提交给你的接口，Cloudflare 会如实回答 success=true —— 那确实是真的 token，只是不是为你签发的。所以后端必须比对 hostname。

一次验证放行整批#

Turnstile token 是一次性的，无法在多张图之间复用。所以由后端签发凭证解决：

1
第 1 张    ──带 token──> siteverify ──通过──> 签发 HMAC 凭证（10 分钟）
2
第 2..N 张 ──带凭证──> 校验签名与有效期 ──通过──> 写入 GitHub

凭证是用 TURNSTILE_SECRET 做的 HMAC-SHA256 签名，无法伪造 —— 攻击者仍须先通过一次真实验证才能拿到。批次结束后前端重置组件，下次批量需重新验证一次。

Turnstile 验证服务上传函数浏览器Turnstile 验证服务上传函数浏览器POST 第 1 张（带 token）siteverify（token + secret）success + hostname比对 hostname 是否在白名单写入成功 + 返回凭证POST 第 2..N 张（带凭证）校验 HMAC 签名与有效期写入成功（无需再验证）

未配置 TURNSTILE_SECRET 时行为不变（完全放行），可以随时启用或停用 —— 万一验证出问题，删掉这个变量就能立刻恢复。

Secret Key 和 Site Key 长得几乎一样

两串都以 0x4AAAAAAA 开头，光看开头分辨不出来，是本项目最容易填错的地方。Site Key 已写在 index.html 里（公开无妨），Secret Key 只能进环境变量。填错会报 invalid-input-secret，若已混淆，直接在控制台重新生成一个最省事。

上传报「人机验证未通过」怎么排查#

错误提示里会带上具体原因，对照这张表定位：

提示	原因	处理
`invalid-input-secret`	Secret Key 填错，或误填成了 Site Key	重新复制该 widget 的 Secret Key
主机名不匹配：本站接受 X，实际为 Y	访问域名与 `TURNSTILE_HOSTNAMES` 不一致	按提示里的 Y 填进去
`timeout-or-duplicate`	token 已被用过，或超过 300 秒	刷新页面重新验证
`invalid-input-response`	token 无效或已过期	同上
`missing-input-response`	前端没把 token 传上来	检查 widget 是否渲染成功
未收到验证凭据…收到的字段：file	请求里完全没有验证字段	刷新页面；若持续出现，检查脚本是否被拦截
验证组件未加载，请刷新页面重试	`challenges.cloudflare.com` 脚本没加载成功	检查网络能否访问该域名

实际踩过的坑，按概率排序：

Secret Key 误填成 Site Key —— 两者长得几乎一样，最容易犯。
TURNSTILE_HOSTNAMES 填了根域名（5al.top）而实际访问是子域名（img.5al.top）。
改完环境变量没有重新部署，函数里读到的还是旧值。
控制台 widget 的 domains 里没加实际访问用的域名。

📁 目录结构#

1
index.html                  页面结构
2
assets/app.css              样式：设计令牌、深浅主题、响应式
3
assets/app.js               逻辑：上传、列表、复制、二维码、主题
4
                            └─ 含 TURNSTILE_SITEKEY，启用验证前须换成自己的
5
assets/fonts.css            Material Icons 字体声明（本地）
6
assets/fonts/*.woff2        Material Icons 字体文件
7
functions/upload.js         上传：写入 GitHub
8
functions/v2/[[vkey]].js   访问：回源 + 边缘缓存
9
scripts/verify_upload.py    部署前自检脚本

图标字体是本地自托管的，不引用 fonts.googleapis.com（该域名在中国大陆不可访问）。字体名须与 mdui 期望的完全一致，且需开启 font-feature-settings: 'liga'，否则连字不生效、图标会显示为文字。

assets/app.js 里的 CONCURRENCY 控制同时上传的数量，默认 1（串行）。多选图片时若并发过高，Cloudflare Functions 需同时做多次 base64 编码，可能超出免费额度的 CPU / 内存限制而被中断。除非确认额度充足，否则不建议调大。

✅ 部署前自检#

Terminal window

1
export GITHUB_TOKEN='github_pat_xxx'
2
export GITHUB_OWNER='你的用户名'
3
export GITHUB_REPO='你的仓库'
4
python3 scripts/verify_upload.py

脚本会依次检查令牌有效性、仓库可访问性、写入权限、链接可访问性，并自动清理测试文件。

🔧 日常维护#

删除单张图片#

每次上传的响应里带有 sha，浏览器已存在 localStorage。用它可精确删除：

Terminal window

1
curl -X DELETE \
2
  -H "Authorization: Bearer $GITHUB_TOKEN" \
3
  -H "Accept: application/vnd.github+json" \
4
  https://api.github.com/repos/<owner>/<repo>/contents/<path> \
5
  -d '{"message":"delete","sha":"<上传时返回的 sha>","branch":"images"}'

也可以在 GitHub 网页上直接删除文件。

删完不会立刻消失

边缘缓存最长保留 1 年。删除后如需立即生效，到 Cloudflare 后台手动清除缓存（Caching → Configuration → Purge Everything）。

更换令牌#

令牌到期后重新生成一个，更新 Pages 的 GITHUB_TOKEN 环境变量并重新部署。

仓库满了#

GitHub 建议单仓库控制在 1GB 以内。超了就新建仓库、建 images 孤儿分支、改 GITHUB_REPO 环境变量、重新部署。旧仓库的链接会失效，如需保留可保留旧仓库不动、只切换新图。

❓ 常见问题#

上传返回 403 — 令牌缺 Contents: Read and write，或 Repository access 没包含该仓库。

上传返回 422 — 通常是同名文件冲突，代码会自动换名重试 6 次；若仍失败，检查分支是否存在。

多选上传时部分失败，提示「网络错误」 — 同时上传太多图片会让 Functions 并发做多次 base64 编码，可能超出免费额度的 CPU / 内存限制而被中断。默认已串行（CONCURRENCY = 1），若仍失败就一次少选几张。

图片上传了但打不开 — 确认 images 分支存在且文件确实写入。访问代理回源的是 raw.githubusercontent.com/<owner>/<repo>/images/<path>。

刷新后上传历史没了 — 历史存在浏览器 localStorage，按域名隔离。换了域名后旧记录读不到，这是浏览器行为，不是故障。

图标显示为 cloud_upload 这样的英文 — Material Icons 字体没加载。确认 assets/fonts/*.woff2 能访问，且字体名与 mdui 期望的一致。

⚠️ 已知限制#

限制	说明
单文件 20MB	代码中已做校验
访问路径未做白名单	依赖 `images` 孤儿分支隔离，不要往该分支放非图片文件
GitHub API 限额	5000 次/小时，个人图床足够
Cloudflare 免费额度	请求 10 万/天，构建 500 次/月
仓库体积	建议控制在 1GB 以内
国内访问	Cloudflare 在中国大陆无边缘节点，访客可能被路由到境外。可设 `IMG_CDN=jsdelivr` 改走 jsDelivr 回源
外部依赖	启用人机验证后会加载 `challenges.cloudflare.com` 脚本（验证的必要条件）。其余资源全部本地

🛠️ 技术栈#

部分	说明
页面	原生 HTML + JavaScript，无框架、无构建
组件	mdui 2（Web Components，CDN 引入）
图标	Material Icons 字体（本地自托管）
二维码	qrcode（CDN，按需动态加载）
人机验证	Cloudflare Turnstile（可选，仅保护上传接口）
后端	Cloudflare Pages Functions

📄 许可#

MIT License — 可自由使用、修改和分发

xingmihai

gh-imgbed

GH图床 —— 基于 GitHub 存储与 Cloudflare 边缘缓存的免费图床

—

MIT

JavaScript

陪伴我三年的手机出现粉线了

Sun, 21 Jun 2026 10:36:00 GMT

用了三年的手机屏幕出现粉线，记录一下。

十年之约

Sat, 13 Jun 2026 16:00:00 GMT

十年之约#

效果#

关于#

这是一个记录十年时光流逝的动态进度卡片。从 2026年6月14日 开始，到 2036年6月14日 结束，整整十年的约定。

技术说明#

格式：SVG（可缩放矢量图形）
尺寸：250 × 250（正方形）
动态更新：使用 JavaScript 读取系统时间，每秒自动刷新进度
进度显示：圆形进度环，红橙渐变

使用方法#

1. 直接嵌入 HTML#

1
<object data="ten_year_promise.svg" type="image/svg+xml" width="300" height="300"></object>

或

1
<iframe src="ten_year_promise.svg" width="250" height="250" frameborder="0"></iframe>

2. 作为图片引用（静态显示）#

1
<img src="ten_year_promise.svg" alt="十年之约" width="250>

Note

注意：使用 <img> 标签时，SVG 内的 JavaScript 不会执行，进度不会动态更新。

3. 内联 SVG#

直接将 SVG 代码复制到 HTML 文件中，JavaScript 会自动运行。

设计特点#

项目	说明
背景	半透灰 `rgba(200, 200, 210, 0.45)`，带阴影
边框	白色半透明边框，双层设计
进度环	红橙渐变，圆角线帽
统计	已过去天数 / 剩余天数
时间戳	底部实时显示当前系统时间

当前进度#

Note

进度会随系统时间自动更新，每秒刷新一次。

自定义修改#

如需修改时间范围，编辑 SVG 文件中的以下部分：

1
var startDate = new Date("2026-06-14T00:00:00+08:00");
2
var endDate = new Date("2036-06-14T00:00:00+08:00");

修改日期即可适配其他时间跨度。

愿十年之后，回首无悔。

没错，我的博客的评论没了

Sat, 13 Jun 2026 14:50:00 GMT

前言#

我用的是 Waline 评论系统，之前部署在 Netlify 上，存储好像用的是 MongoDB —— 忘了🤪

一段时间没管，也不知道干了什么：

邮件通知挂了
评论加载特别慢

干脆重新在 Vercel 部署了一个。

重新部署 Waline 到 Vercel#

1. 一键部署#

Waline 官方支持 Vercel 一键部署，非常省心：

打开 Waline 官方文档
点击 “Deploy with Vercel” 按钮
登录 GitHub 账号授权
填写必要的环境变量（见下文）
等待部署完成

2. 环境变量配置#

在 Vercel 项目的 Settings → Environment Variables 中配置：

变量名	说明	示例
`LEAN_ID`	LeanCloud App ID	你的 LeanCloud App ID
`LEAN_KEY`	LeanCloud App Key	你的 LeanCloud App Key
`LEAN_MASTER_KEY`	LeanCloud Master Key	你的 LeanCloud Master Key
`SITE_NAME`	站点名称	我的博客
`SITE_URL`	站点地址	https://yourblog.com
`SMTP_SERVICE`	SMTP 服务商	例如 QQ / 163 / Gmail
`SMTP_USER`	发件邮箱	your-email@example.com
`SMTP_PASS`	邮箱授权码	你的授权码
`AUTHOR_EMAIL`	博主邮箱	用于接收通知

💡 关于存储：Waline 支持多种数据库，包括 MongoDB、PostgreSQL、MySQL、SQLite、LeanCloud 等。我这次用的是 neon，免费额度够用，而且不用自己维护 MongoDB。

3. 绑定自定义域名（可选）#

进入 Vercel 项目 → Settings → Domains
输入你的域名，例如 waline.yourblog.com
在域名服务商处添加 CNAME 记录：

Type	Name	Value
CNAME	waline	cname.vercel-dns.com

等待 DNS 生效，访问 https://waline.yourblog.com/ui/register 注册管理员账号

Note

⚠️ 注意：首个注册的用户自动成为管理员，务必第一时间注册！

修复邮件通知#

之前邮件通知挂了，这次重新配置了一下，以下是常见问题的排查思路：

检查环境变量#

确保以下变量都已正确配置：

Terminal window

1
SMTP_SERVICE=QQ          # 或其他服务商
2
SMTP_USER=your@qq.com
3
SMTP_PASS=你的授权码       # 不是登录密码！是 SMTP 授权码
4
AUTHOR_EMAIL=your@qq.com

常见 SMTP 服务商配置#

服务商	`SMTP_SERVICE`	端口
QQ 邮箱	`QQ`	465
163 邮箱	`163`	465
Gmail	`Gmail`	465
Outlook	`Outlook365`	587

测试邮件发送#

部署完成后，可以在 Waline 管理后台发一条测试评论，看看能否收到邮件通知。如果收不到：

检查 Vercel 的 Runtime Logs 是否有报错
确认邮箱授权码是否正确（不是登录密码）
检查垃圾邮件箱

客户端接入#

在你的博客页面中引入 Waline 客户端：

1
<!-- 引入 Waline CSS -->
2
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />
3

4
<!-- 引入 Waline JS -->
5
<script src="https://unpkg.com/@waline/client@v3/dist/waline.js"></script>
6

7
<script>
8
  Waline.init({
9
    el: '#waline',
10
    serverURL: 'https://waline.yourblog.com',  // 你的 Waline 服务地址
11
    path: window.location.pathname,
12
    // 可选配置
13
    dark: 'html[data-theme="dark"]',
14
    comment: true,
15
    pageview: true,
16
  });
17
</script>
18

19
<!-- 评论容器 -->
20
<div id="waline"></div>

展开收起

Note

📌 注意：V3 版本不需要手动引入 CSS，但为了兼容性建议保留。如果使用的是旧版 Waline，请根据文档调整。

数据迁移（可选）#

如果你之前的数据还在 MongoDB 里，想迁移到新部署的 Waline，可以：

导出旧数据：从 MongoDB 导出 JSON/CSV
导入新数据库：根据新部署使用的数据库类型，使用对应工具导入
或者直接放弃：评论不多就重新来过，反正博客也没几个人看（不是

Note

😅 我这次就是直接放弃了旧数据，反正之前的评论也没几条，重新来过更清爽。

总结#

项目	之前	现在
部署平台	Netlify	Vercel
数据库	MongoDB（忘了）	neon
邮件通知	❌ 挂了	✅ 正常
加载速度	🐢 特别慢	🚀 飞快
历史评论	😭 没了	🆕 重新开始

虽然评论没了有点心疼，但重新部署后一切正常，邮件通知也恢复了，加载速度肉眼可见地提升。Vercel + neon 的组合对于个人博客来说完全够用，而且免费。

下次一定要记得备份数据！

Note

📝 本文写于 2026-06-13，Waline 版本为 v3.15.2，如有变动请以官方文档为准。

Cloudflare 优选 IP 教程

Thu, 23 Oct 2025 16:00:00 GMT

用我的两个域名来演示
主力域名：xmhai.cn　辅助域名：jasmiam.top
我的两个域名都托管在 Cloudflare，主力域名用来访问，辅助域名用来优选
优选域我用的是 cloudflare.182682.xyz
本站是部署在 Netlify 上的

🚀 快速开始#

前提条件#

拥有 Cloudflare 账号
Cloudflare 账号已绑定支付方式
拥有两个域名
辅助域名必须托管在Cloudflare上

辅助域名dns配置#

类型	名称	目标	代理状态
cname	cdn	cloudflare.182682.xyz	关
cname或A	@	网址或ip	开

Screenshot_2025-10-24-04-50-31-809_mark.via.png

Screenshot_2025-10-24-04-51-11-410_mark.via.png

辅助域名自定义主机名#

添加一个默认回退源，我填的是jasmiam.top，因为我的辅助域名的dns记录是@

添加自定义主机名xmhai.cn，自定义源服务器选默认源服务器

Screenshot_2025-10-24-04-56-16-885_mark.via.png

Screenshot_2025-10-24-04-55-12-042_mark.via.png

主域名dns配置#

类型	名称	目标	代理状态
cname	@	cdn.jasmiam.top	关

Screenshot_2025-10-24-05-15-18-220_mark.via.png

然后访问xmhai.cn就可以了

如何配置多个站点？#

假如我要用page.xmhai.cn来访问

辅助域名dns配置#

类型	名称	目标	代理状态
cname或A	page	网址或ip	开

Screenshot_2025-10-24-05-02-25-332_mark.via.png

辅助域名自定义主机名#

自定义主机名填page.xmhai.cn，自定义源服务器选自定义源服务器填写page.jasmiam.top

Screenshot_2025-10-24-05-04-27-128_mark.via.png

主域名dns配置#

类型	名称	目标	代理状态
cname	page	cdn.jasmiam.top	关

Screenshot_2025-10-24-05-14-03-648_mark.via.png

然后访问page.xmhai.cn就行了

蓝奏云直链解析工具

Tue, 30 Sep 2025 11:32:00 GMT

体验地址

lanzou.jasmiam.top

xingmihai

Lanzou_straight_chain_analysis

或最下面直接复制#

🌟 蓝奏云直链解析工具#

一个基于 Cloudflare Worker 的蓝奏云直链解析工具，可以一键获取蓝奏云分享链接的真实下载地址，跳过所有中间页面和广告。

✨ 功能特点#

🚀 一键解析：自动解析蓝奏云分享链接
⚡ 直接下载：重定向到真实文件下载地址
🔍 调试模式：支持详细解析过程查看
🌐 跨平台：在任何设备浏览器中均可使用
🆓 完全免费：基于 Cloudflare Worker 免费额度
🔒 隐私安全：不存储任何用户数据

🚀 快速开始#

基本用法#

获取蓝奏云分享链接 例如：https://hjgg.lanzoue.com/iN4ig37czcte
访问解析工具 https://你的worker.workers.dev/?url=你的蓝奏云链接
自动开始下载

浏览器会自动重定向到真实下载地址

示例#

直接下载模式

https://你的worker.workers.dev/?url=https://wwi.lanzoup.com/i12345678

调试查看模式

https://你的worker.workers.dev/?url=https://wwi.lanzoup.com/i12345678&debug=1

🛠️ 部署到 Cloudflare Worker#

前置要求#

Cloudflare 账号
自定义域名（可选）
基本的计算机操作能力

部署步骤#

注册 Cloudflare 账号
- 访问 Cloudflare 注册页面
- 完成邮箱验证
创建 Worker 服务
- 登录 Cloudflare 仪表板
- 左侧菜单选择 “Workers”
- 点击 “Create a Service”
配置服务设置
- 服务名称：lanzou-parser（或其他名称）
- 选择免费计划
上传代码
- 复制本项目的完整代码
- 在 Worker 编辑器中粘贴代码
- 点击 “Save and Deploy”
测试部署
- 访问你的 Worker 地址进行测试
- 格式：https://你的服务名称.你的账号子域.workers.dev

🔒 隐私与安全#

❌ 不存储用户文件内容
❌ 不记录下载历史
❌ 不收集个人信息
✅ 所有处理在内存中完成
✅ HTTPS加密传输
✅ Cloudflare安全防护

❓ 常见问题#

Q1: 为什么需要这个工具？#

A: 蓝奏云下载需要多次跳转和等待，这个工具可以跳过广告和等待时间，直接获取真实下载链接。

Q2: 是否支持所有蓝奏云链接？#

A: 支持大部分链接，但需要提取码的私密链接或已失效的链接可能无法解析。

Q3: 有没有使用限制？#

A: Cloudflare Worker免费版有每日10万次请求限制，个人使用完全足够。

Q4: 如何更新解析逻辑？#

A: 直接在Cloudflare Worker编辑器中更新代码并重新部署。

📞 技术支持#

如果遇到问题：

首先使用 &debug=1 参数查看详细错误信息
检查蓝奏云链接是否有效
在GitHub Issues中提交问题

📄 许可证#

本项目采用 MIT 许可证 - 详见 LICENSE 文件。

🤝 贡献#

欢迎提交 Issue 和 Pull Request！

⭐ 如果这个项目对你有帮助，请给个Star！

1
addEventListener("fetch", event => {
2
    event.respondWith(handleRequest(event.request));
3
});
4

5
async function handleRequest(request) {
6
    const url = new URL(request.url);
7
    const targetUrl = url.searchParams.get("url");
8
    const debug = url.searchParams.get("debug");
9

10
    // 如果没有提供 URL 参数，返回使用说明
11
    if (!targetUrl) {
12
        return new Response(`
13
            <!DOCTYPE html>
14
            <html>
15
            <head>
16
                <title>蓝奏云直链下载工具</title>
17
                <style>
18
                    body { font-family: Arial, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; }
19
                    .container { background: #f8f9fa; padding: 30px; border-radius: 10px; }
20
                    code { background: #eee; padding: 2px 5px; border-radius: 3px; }
21
                    .example { background: #e8f4f8; padding: 15px; border-left: 4px solid #007bff; }
22
                    .debug { background: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; }
23
                </style>
24
            </head>
25
            <body>
26
                <div class="container">
27
                    <h1>🔗 蓝奏云直链下载工具</h1>
28
                    <p>使用方式：在URL后添加 <code>?url=你的蓝奏云链接</code></p>
29

30
                    <div class="example">
31
                        <strong>示例：</strong><br>
32
                        <code>https://你的worker.workers.dev/?url=https://wwi.lanzoup.com/xxxxxxxx</code>
33
                    </div>
34

35
                    <p>📝 功能：</p>
36
                    <ul>
37
                        <li>自动解析蓝奏云分享链接</li>
38
                        <li>直接重定向到文件下载</li>
39
                    </ul>
40

41
                    <div class="debug">
42
                        <p>🔍 <strong>调试模式</strong>：添加 <code>&debug=1</code> 参数查看解析过程</p>
43
                        <code>https://你的worker.workers.dev/?url=蓝奏云链接&debug=1</code>
44
                    </div>
45
                </div>
46
            </body>
47
            </html>
48
        `, {
49
            headers: {
50
                "Content-Type": "text/html; charset=utf-8"
51
            }
52
        });
53
    }
54

55
    try {
56
        // 解析蓝奏云链接
57
        const { finalUrl, logs } = await parseLanzouUrl(targetUrl);
58

59
        // 调试模式：显示解析过程
60
        if (debug) {
61
            return new Response(`
62
                <!DOCTYPE html>
63
                <html>
64
                <head>
65
                    <title>蓝奏云解析调试模式</title>
66
                    <style>
67
                        body { font-family: 'Courier New', monospace; background: #000; color: #00ff00; padding: 20px; }
68
                        .log-entry { margin: 10px 0; padding: 5px; border-left: 3px solid transparent; }
69
                        .info { border-left-color: #17a2b8; color: #17a2b8; }
70
                        .success { border-left-color: #28a745; color: #28a745; }
71
                        .warning { border-left-color: #ffc107; color: #ffc107; }
72
                        .error { border-left-color: #dc3545; color: #dc3545; }
73
                        .timestamp { color: #6c757d; font-size: 12px; margin-right: 10px; }
74
                        .result { background: #155724; padding: 15px; border-radius: 5px; margin: 20px 0; }
75
                        .final-url { color: #00ffff; word-break: break-all; }
76
                        .action-buttons { margin: 20px 0; }
77
                        button { background: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-right: 10px; }
78
                        button:hover { background: #0056b3; }
79
                    </style>
80
                </head>
81
                <body>
82
                    <h1>🔍 蓝奏云解析调试模式</h1>
83

84
                    <div id="logs">
85
                        ${logs.map(log => `
86
                            <div class="log-entry ${log.type}">
87
                                <span class="timestamp">${log.time}</span> ${log.message}
88
                            </div>
89
                        `).join('')}
90
                    </div>
91

92
                    <div class="result">
93
                        <h3>✅ 解析成功！</h3>
94
                        <p><strong>最终直链：</strong></p>
95
                        <p class="final-url">${finalUrl}</p>
96
                    </div>
97

98
                    <div class="action-buttons">
99
                        <button onclick="window.open('${finalUrl}')">⬇️ 直接下载</button>
100
                        <button onclick="window.location.href='/?url=${encodeURIComponent(targetUrl)}'">🚀 直接访问（非调试模式）</button>
101
                        <button onclick="copyToClipboard('${finalUrl}')">📋 复制直链</button>
102
                    </div>
103

104
                    <script>
105
                        function copyToClipboard(text) {
106
                            navigator.clipboard.writeText(text).then(() => {
107
                                alert('已复制到剪贴板！');
108
                            });
109
                        }
110
                    </script>
111
                </body>
112
                </html>
113
            `, {
114
                headers: {
115
                    "Content-Type": "text/html; charset=utf-8"
116
                }
117
            });
118
        }
119

120
        // 正常模式：直接重定向到下载链接
121
        return Response.redirect(finalUrl, 302);
122

123
    } catch (error) {
124
        // 返回错误页面
125
        return new Response(`
126
            <!DOCTYPE html>
127
            <html>
128
            <head>
129
                <title>解析失败</title>
130
                <style>
131
                    body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
132
                    .error { color: #dc3545; background: #f8d7da; padding: 20px; border-radius: 5px; }
133
                    .debug-link { color: #007bff; text-decoration: underline; cursor: pointer; }
134
                </style>
135
            </head>
136
            <body>
137
                <h1>❌ 解析失败</h1>
138
                <div class="error">
139
                    <p><strong>错误信息:</strong> ${error.message}</p>
140
                    <p><strong>目标链接:</strong> ${targetUrl}</p>
141
                </div>
142
                <p>💡 请检查链接是否正确</p>
143
                <p>
144
                    <a href="/">返回首页</a> |
145
                    <span class="debug-link" onclick="location.href=location.href + '&debug=1'">查看详细错误信息</span>
146
                </p>
147
            </body>
148
            </html>
149
        `, {
150
            status: 500,
151
            headers: {
152
                "Content-Type": "text/html; charset=utf-8"
153
            }
154
        });
155
    }
156
}
157

158
// 解析蓝奏云链接的核心函数
159
async function parseLanzouUrl(targetUrl) {
160
    const logs = [];
161

162
    function addLog(message, type = 'info') {
163
        logs.push({
164
            time: new Date().toLocaleTimeString(),
165
            message,
166
            type
167
        });
168
    }
169

170
    addLog('开始解析蓝奏云链接', 'info');
171
    addLog(`目标URL: ${targetUrl}`, 'info');
172

173
    try {
174
        // 1. 获取初始页面内容
175
        addLog('步骤1: 获取初始页面', 'info');
176
        const page1Response = await fetch(targetUrl, {
177
            headers: {
178
                "User-Agent": "Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36",
179
                "Referer": "https://www.lanzou.com/"
180
            }
181
        });
182

183
        if (!page1Response.ok) {
184
            throw new Error(`初始页面请求失败: ${page1Response.status}`);
185
        }
186

187
        const page1Html = await page1Response.text();
188
        addLog('初始页面获取成功', 'success');
189

190
        // 提取下载链接
191
        const downUrlMatch = page1Html.match(/<a href="([^"]+)"[^>]*id="downurl"/i);
192
        if (!downUrlMatch) {
193
            throw new Error("无法从页面提取下载链接");
194
        }
195

196
        const downUrl = "https://wwi.lanzoup.com" + downUrlMatch[1];
197
        addLog(`提取到下载链接: ${downUrl}`, 'success');
198

199
        // 2. 获取第二页内容
200
        addLog('步骤2: 获取第二页内容', 'info');
201
        const page2Response = await fetch(downUrl, {
202
            headers: {
203
                "User-Agent": "Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.120 Mobile Safari/537.36",
204
                "Referer": targetUrl
205
            }
206
        });
207

208
        if (!page2Response.ok) {
209
            throw new Error(`第二页请求失败: ${page2Response.status}`);
210
        }
211

212
        const page2Html = await page2Response.text();
213
        addLog('第二页获取成功', 'success');
214

215
        // 提取变量
216
        addLog('步骤3: 提取URL参数', 'info');
217
        const part1Match = page2Html.match(/(?:var\s+)?vkjxld\s*=\s*['"]([^'"]+)/i);
218
        const part2Match = page2Html.match(/(?:var\s+)?hyggid\s*=\s*['"]([^'"]+)/i);
219

220
        if (!part1Match || !part2Match) {
221
            throw new Error("无法提取URL参数");
222
        }
223

224
        const part1 = part1Match[1];
225
        const part2 = part2Match[1];
226
        addLog(`提取参数: vkjxld=${part1.substring(0, 20)}..., hyggid=${part2.substring(0, 20)}...`, 'success');
227

228
        const finalUrl = part1 + part2;
229
        addLog(`拼接最终URL: ${finalUrl}`, 'success');
230
        addLog('✅ 解析完成！', 'success');
231

232
        return { finalUrl, logs };
233

234
    } catch (error) {
235
        addLog(`解析失败: ${error.message}`, 'error');
236
        throw error;
237
    }
238
}

展开收起

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

Sat, 13 Sep 2025 23:47:00 GMT

源码在最后

完整源码在文章最下面，也可在 GitHub 仓库直接取用。

☁️ Cloudflare Workers 云存储文件管理器#

一个基于 Cloudflare Workers + R2 对象存储 的轻量级、无服务器、支持登录验证的在线文件管理工具。

无需购买服务器，无需数据库，全球 CDN 加速，即开即用！

🏗️ 系统架构#

整套系统只有三个角色：浏览器、Worker、R2 存储桶。Worker 既是后端也是前端——页面 HTML 由它直接拼接返回。

HTTPS 请求

R2 Bindings 读写

读取环境变量

返回页面或文件流

👤 用户浏览器

🌍 Cloudflare CDN

全球边缘节点

⚙️ Cloudflare Worker

鉴权 · 路由 · 渲染 HTML

🗄️ R2 存储桶

MY_BUCKET

🔐 ACCESS_PASSWORD

HTTPS 请求

R2 Bindings 读写

读取环境变量

返回页面或文件流

👤 用户浏览器

🌍 Cloudflare CDN

全球边缘节点

⚙️ Cloudflare Worker

鉴权 · 路由 · 渲染 HTML

🗄️ R2 存储桶

MY_BUCKET

🔐 ACCESS_PASSWORD

🔄 请求处理时序#

一次「登录 → 列文件 → 上传」的完整交互：

R2 存储桶Cloudflare Worker用户R2 存储桶Cloudflare Worker用户alt[未携带有效 Cookie]访问站点返回登录页POST /login 提交密码Set-Cookie 并跳转首页GET / 获取文件列表bucket.list()对象列表渲染 HTML 列表页POST /upload 上传文件bucket.put(key, stream)写入成功返回上传结果

🚀 部署流程#

① 注册 Cloudflare 账号

② 创建 R2 存储桶

例如 my-files

③ 创建 Worker 应用

Create Application > Worker

④ 粘贴 worker.js 源码

⑤ 配置环境变量

ACCESS_PASSWORD

⑥ 绑定 R2 Bucket

变量名 MY_BUCKET

⑦ Save and Deploy

⑧ 访问 *.workers.dev

输入密码即可使用

① 注册 Cloudflare 账号

② 创建 R2 存储桶

例如 my-files

③ 创建 Worker 应用

Create Application > Worker

④ 粘贴 worker.js 源码

⑤ 配置环境变量

ACCESS_PASSWORD

⑥ 绑定 R2 Bucket

变量名 MY_BUCKET

⑦ Save and Deploy

⑧ 访问 *.workers.dev

输入密码即可使用

✨ 功能特性#

文件管理器

🔐 安全

密码登录保护

Cookie 鉴权

可放行匿名下载

📁 文件操作

多文件批量上传

单文件下载

单个或批量删除

🔍 检索

文件名搜索

按名称排序

按大小排序

按时间排序

🎨 体验

响应式布局

亮色暗色主题

图片缩略图

🌍 性能

CDN 全球加速

免服务器免运维

文件管理器

🔐 安全

密码登录保护

Cookie 鉴权

可放行匿名下载

📁 文件操作

多文件批量上传

单文件下载

单个或批量删除

🔍 检索

文件名搜索

按名称排序

按大小排序

按时间排序

🎨 体验

响应式布局

亮色暗色主题

图片缩略图

🌍 性能

CDN 全球加速

免服务器免运维

🛠️ 技术栈#

技术	说明
Cloudflare Workers	无服务器运行时，处理文件上传、下载、删除等逻辑
Cloudflare R2	对象存储服务，用于存储用户上传的文件（类似 AWS S3）
前端	原生 HTML + CSS + JavaScript，单页应用，无框架依赖
环境变量	`ACCESS_PASSWORD`：用于登录验证；`MY_BUCKET`：绑定的 R2 存储桶

📁 使用指南#

登录后所有操作都围绕文件列表页展开：

打开站点

输入密码登录

📋 文件列表页

📤 选择多个文件 → 上传

🔍 搜索文件名

⬆️⬇️ 按名称 / 大小 / 时间排序

📥 点击文件名或下载按钮

🗑️ 单个删除（带确认）

✅ 勾选多个文件

🗑️ 批量删除

打开站点

输入密码登录

📋 文件列表页

📤 选择多个文件 → 上传

🔍 搜索文件名

⬆️⬇️ 按名称 / 大小 / 时间排序

📥 点击文件名或下载按钮

🗑️ 单个删除（带确认）

✅ 勾选多个文件

🗑️ 批量删除

🛡️ 安全建议#

一定要设置 ACCESS_PASSWORD，否则可能造成未授权访问！
不要将密码硬编码在前端，也不要泄露环境变量
可根据需要进一步扩展权限控制、日志记录等功能

🧩 可扩展功能（TODO / Ideas）#

文件预览（图片、PDF、视频等）
支持文件夹 / 目录结构
上传进度条
多用户 / 权限管理
文件分享链接（带密码或过期时间）
操作日志记录
更多主题 / UI 定制

📄 项目结构#

worker.js：主入口，包含路由、身份验证、文件操作逻辑
前端界面：内置 HTML / CSS / JS，单页应用，无外部依赖
托管于 Cloudflare Worker，无需额外服务器或前端部署

🤝 贡献#

欢迎提交 Issue、PR，一起改进这个项目！

如果你觉得这个工具对你有帮助，欢迎：

✨ Star 本项目
📤 分享给朋友或团队
🛠️ 提出改进建议或新功能需求

🔗 相关技术#

✨ License#

MIT License — 可自由使用、修改和分发

📸 界面预览：

界面预览

界面预览 3

如果要不输入密码也能下载将以下代码#

1
if (!ACCESS_PASSWORD) {
2
  return handleRequest(request, env, bucket, url);
3
}
4

5
if (url.pathname === "/login" && request.method === "POST") {
6
  return await handleLogin(request, ACCESS_PASSWORD);
7
}
8

9
if (!isAuthenticated(request, ACCESS_PASSWORD) && url.pathname !== "/login") {
10
  return showLoginPage(request, "请先登录", false);
11
}

替换为#

1
const isFileDownload =
2
  request.method === "GET" &&
3
  url.pathname !== "/" &&
4
  !url.pathname.startsWith("/upload") &&
5
  !url.pathname.startsWith("/delete") &&
6
  !url.pathname.startsWith("/login");
7

8
const isLoggedIn = isAuthenticated(request, ACCESS_PASSWORD);
9

10
if (!ACCESS_PASSWORD) {
11
  // 如果没有设置密码，直接允许访问（可选，也可只放行下载）
12
  return handleRequest(request, env, bucket, url);
13
}
14

15
if (url.pathname === "/login" && request.method === "POST") {
16
  // 登录请求，照常处理
17
  return await handleLogin(request, ACCESS_PASSWORD);
18
}
19

20
if (!isLoggedIn) {
21
  if (isFileDownload) {
22
    // 🟢 文件下载：允许匿名访问，不检查登录
23
    return handleRequest(request, env, bucket, url);
24
  } else {
25
    // 🔴 其他操作：需要登录
26
    return showLoginPage(request, "请先登录", false);
27
  }
28
}

展开收起

即可实现#

鉴权判断逻辑变成这样：

否

是

否

是

否

是

否

收到请求

是否设置了

ACCESS_PASSWORD?

直接放行

handleRequest

是 POST /login?

校验密码

下发 Cookie

Cookie 校验通过?

是文件下载请求?

GET 且非 upload / delete / login

返回登录页 401

否

是

否

是

否

是

否

收到请求

是否设置了

ACCESS_PASSWORD?

直接放行

handleRequest

是 POST /login?

校验密码

下发 Cookie

Cookie 校验通过?

是文件下载请求?

GET 且非 upload / delete / login

返回登录页 401

对应到具体行为：

行为	是否需要密码	结果
访问首页 `/`（文件列表页）	✅ 需要	未登录跳转登录页
点击文件下载链接（如 `/myfile.zip`）	❌ 不需要	✅ 直接下载
上传文件 `/upload`	✅ 需要	未登录被拦截
删除文件 `/delete`	✅ 需要	未登录被拦截
登录页 `/login`	✅（提交密码时）	正常显示与提交

xingmihai

cloudflare-file-manager

或直接复制#

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
}

展开收起

第一篇文章

Wed, 10 Sep 2025 11:40:00 GMT

测试一下😁不用管

测试#

测试