☁️ CF DNS Panel

一个无后端、零依赖的 Cloudflare DNS 管理面板，单 HTML 文件即可部署。

---

✨ 功能特性

• 🗂 Zone 管理 — 列出账户下所有域名，一键切换
• 📋 DNS 记录管理 — 支持 A、AAAA、CNAME、MX、TXT、NS、SRV、CAA、PTR 等类型
• ➕ 新增 / 编辑 / 删除 DNS 记录，动态表单随类型自动切换字段
• 🔐 双认证方式 — API Token（推荐）或 Global API Key + 邮箱
• 📱 响应式布局 — 桌面与移动端均可使用
• 🚫 零依赖 — 仅引用 Font Awesome CDN，无需 Node.js / npm / 构建工具

---

🚀 快速开始

1. 部署 Worker 代理（解决 CORS）

由于 api.cloudflare.com 不允许第三方域名跨域请求，需要先部署一个 Cloudflare Worker 作为代理。

Worker 代码：

const CF_API = 'https://api.cloudflare.com/client/v4';

// 可选：限制允许访问的面板域名，留空则允许所有来源（*）
// const ALLOWED_ORIGIN = 'https://your-panel-domain.com';
const ALLOWED_ORIGIN = undefined;

export default {
  async fetch(request) {
    const url = new URL(request.url);
    const origin = request.headers.get('Origin') || '*';
    const allowedOrigin = ALLOWED_ORIGIN || origin;

    // 处理 OPTIONS 预检请求
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        status: 204,
        headers: corsHeaders(allowedOrigin),
      });
    }

    // 仅处理 /proxy/* 路径
    if (!url.pathname.startsWith('/proxy')) {
      return new Response('Not Found', { status: 404 });
    }

    const cfPath = url.pathname.replace(/^\/proxy/, '') || '/';
    const cfUrl = CF_API + cfPath + url.search;

    // 转发必要的请求头
    const headers = new Headers();
    for (const key of ['content-type', 'authorization', 'x-auth-email', 'x-auth-key']) {
      const val = request.headers.get(key);
      if (val) headers.set(key, val);
    }

    const resp = await fetch(cfUrl, {
      method: request.method,
      headers,
      body: ['GET', 'HEAD'].includes(request.method) ? undefined : request.body,
    });

    const body = await resp.text();
    return new Response(body, {
      status: resp.status,
      headers: {
        'content-type': resp.headers.get('content-type') || 'application/json',
        ...corsHeaders(allowedOrigin),
      },
    });
  },
};

function corsHeaders(origin) {
  return {
    'Access-Control-Allow-Origin': origin,
    'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Auth-Email, X-Auth-Key',
  };
}

安全提示： ALLOWED_ORIGIN 默认注释掉，此时 Worker 会将请求来源的 Origin 原样回显，等效于允许所有来源。如果你的面板部署在固定域名，建议取消注释并填写该域名，防止 API Token 被其他网站滥用。

部署步骤：

1. 登录 Cloudflare Dashboard → Workers & Pages → Create
2. 粘贴上方代码（如需限制来源，取消注释 ALLOWED_ORIGIN 并填写面板域名）
3. 部署后，在 Worker 设置中绑定 Custom Domain（不要用 Routes）
4. 记下 Worker 地址，例如 https://cf-proxy.your-domain.com

2. 修改面板配置

打开 index.html，找到以下常量并修改：

const CF = 'https://cf-proxy.your-domain.com/proxy'; // 改为你的 Worker 地址

3. 部署面板

将 index.html 部署到任意静态托管服务：

平台	方式
Cloudflare Pages	直接上传单文件
GitHub Pages	推送到仓库
Vercel	拖拽部署
本地	直接用浏览器打开（需调整 CORS 配置）

---

🔑 认证方式

打开面板后，在右上角设置中填写认证信息：

方式一：API Token（推荐）

• 前往 API Tokens 创建 Token
• 权限：Zone:DNS:Edit + Zone:Zone:Read
• 填入 Token 即可，无需邮箱

方式二：Global API Key

• 前往 API Keys 获取 Global API Key
• 同时填写账户邮箱

---

⚠️ 已知限制

• 编辑记录时不可修改记录类型 — 这是 Cloudflare API 的限制，如需更改类型，请删除后重新创建
• Worker Routes 方式需要 DNS 记录开启橙云代理，建议使用 Custom Domain 绑定

---

📁 项目结构

.
├── index.html   # 面板主体，全部代码
└── worker.js    # Cloudflare Worker 代理

---

🖼️ 预览

---

📄 License

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                    Version 2, December 2004

 Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>

 Everyone is permitted to copy and distribute verbatim or modified
 copies of this license document, and changing it is allowed as long
 as the name is changed.

            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

  0. You just DO WHAT THE FUCK YOU WANT TO.

WTFPL — 随便用，随便改，随便分发。