https://www.5al.top/ 星觅海 记录生活与技术的小站 2026-06-21T10:36:00.000Z 星觅海 Firefly v6.16.8 https://www.5al.top/posts/202606211836/ 陪伴我三年的手机出现粉线了 2026-06-21T10:36:00.000Z 2026-06-21T10:36:00.000Z 星觅海 用了三年的手机屏幕出现粉线，记录一下。

]]> https://www.5al.top/posts/ten-year-pact/ 十年之约 2026-06-13T16:00:00.000Z 2026-06-13T16:00:00.000Z 星觅海 从 2026 年 6 月 14 日到 2036 年 6 月 14 日，一张会随时间自动走的十年进度卡片。

十年之约#

效果#

关于#

这是一个记录十年时光流逝的动态进度卡片。从 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");

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

愿十年之后，回首无悔。

]]> https://www.5al.top/posts/202606132250/ 没错，我的博客的评论没了 2026-06-13T14:50:00.000Z 2026-06-13T14:50:00.000Z 星觅海 把 Waline 从 Netlify 迁到 Vercel + neon，顺手修好邮件通知，加载速度也快了，代价是历史评论没了。

前言#

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

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

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

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

重新部署 Waline 到 Vercel#

1. 一键部署#

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

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

2. 环境变量配置#

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

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

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

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

  1. 进入 Vercel 项目 → Settings → Domains
  2. 输入你的域名，例如 waline.yourblog.com
  3. 在域名服务商处添加 CNAME 记录：
TypeNameValue
CNAMEwalinecname.vercel-dns.com
  1. 等待 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 邮箱QQ465
163 邮箱163465
GmailGmail465
OutlookOutlook365587

测试邮件发送#

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

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

客户端接入#

在你的博客页面中引入 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，可以：

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

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

总结#

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

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

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

Note

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

]]> https://www.5al.top/posts/202509301932/ 蓝奏云直链解析工具 2025-09-30T11:32:00.000Z 2025-09-30T11:32:00.000Z 星觅海 基于 Cloudflare Worker 的蓝奏云直链解析工具，一键获取真实下载地址，跳过中间页与广告，支持调试模式。
体验地址

lanzou.jasmiam.top

xingmihai
/
Lanzou_straight_chain_analysis
蓝奏云直链解析
—
—
MIT
JavaScript

或最下面直接复制#

🌟 蓝奏云直链解析工具#

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

✨ 功能特点#

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

🚀 快速开始#

基本用法#

  1. 获取蓝奏云分享链接 例如：https://hjgg.lanzoue.com/iN4ig37czcte

  2. 访问解析工具 https://你的worker.workers.dev/?url=你的蓝奏云链接

  3. 自动开始下载

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

示例#

直接下载模式

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

调试查看模式

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

🛠️ 部署到 Cloudflare Worker#

前置要求#

部署步骤#

  1. 注册 Cloudflare 账号

  2. 创建 Worker 服务

  3. 配置服务设置

    • 服务名称：lanzou-parser（或其他名称）
    • 选择免费计划

  4. 上传代码

    • 复制本项目的完整代码
    • 在 Worker 编辑器中粘贴代码
    • 点击 “Save and Deploy”

  5. 测试部署

    • 访问你的 Worker 地址进行测试
    • 格式：https://你的服务名称.你的账号子域.workers.dev

🔒 隐私与安全#

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

❓ 常见问题#

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

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

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

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

Q3: 有没有使用限制？#

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

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

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

📞 技术支持#

如果遇到问题：

  1. 首先使用 &debug=1 参数查看详细错误信息
  2. 检查蓝奏云链接是否有效
  3. 在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
}
展开收起
]]> https://www.5al.top/posts/202509140747/ 用 Cloudflare Workers + R2 搭建免费的 Serverless 云存储系统 2025-09-13T23:47:00.000Z 2025-09-13T23:47:00.000Z 星觅海 基于 Cloudflare Workers + R2 对象存储的轻量无服务器文件管理器，支持密码登录、多文件上传、搜索排序与明暗主题。
源码在最后

完整源码在文章 最下面，也可在 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)写入成功返回上传结果
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
界面预览 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
Description not set
—
—
MIT
JavaScript

或直接复制#

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
}
展开收起
]]> https://www.5al.top/posts/cloudflare-preferred/ Cloudflare 优选 IP 教程 2025-10-23T16:00:00.000Z 2025-10-23T16:00:00.000Z 星觅海 用两个托管在 Cloudflare 的域名配合自定义主机名做优选 IP，附多站点配置方法。

用我的两个域名来演示

主力域名：xmhai.cn　辅助域名：jasmiam.top

我的两个域名都托管在 Cloudflare，主力域名用来访问，辅助域名用来优选

优选域我用的是 cloudflare.182682.xyz

本站是部署在 Netlify 上的

🚀 快速开始#

前提条件#

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

辅助域名dns配置#

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

Screenshot_2025-10-24-04-50-31-809_mark.via.png
Screenshot_2025-10-24-04-50-31-809_mark.via.png
Screenshot_2025-10-24-04-51-11-410_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-56-16-885_mark.via.png
Screenshot_2025-10-24-04-55-12-042_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
Screenshot_2025-10-24-05-15-18-220_mark.via.png

然后访问xmhai.cn就可以了

如何配置多个站点？#

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

辅助域名dns配置#

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

Screenshot_2025-10-24-05-02-25-332_mark.via.png
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
Screenshot_2025-10-24-05-04-27-128_mark.via.png

主域名dns配置#

类型名称目标代理状态
cnamepagecdn.jasmiam.top关

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

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

]]> https://www.5al.top/posts/202509101940/ 第一篇文章 2025-09-10T11:40:00.000Z 2025-09-10T11:40:00.000Z 星觅海 测试一下😁不用管

测试#

测试
测试

]]>