81 lines
3.8 KiB
HTML
81 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Cloudflare 配置 - Ops-Assistant</title>
|
||
<style>
|
||
:root{
|
||
--bg:#0f172a;--text:#e5e7eb;--card:#111827;--border:#1f2937;--muted:#9ca3af;
|
||
--accent:#f97316;--accent-hover:#ea580c;--header-bg:linear-gradient(135deg,#7c2d12,#ea580c);
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
|
||
.header{background:var(--header-bg);color:#fff;padding:18px 20px;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;justify-content:space-between;align-items:center;gap:10px}
|
||
.header .right{display:flex;align-items:center;gap:8px}
|
||
.header a,.header button{color:#fff;text-decoration:none;background:rgba(255,255,255,.2);padding:0 10px;border-radius:8px;font-size:13px;border:none;cursor:pointer;line-height:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
|
||
.header button{width:28px;padding:0}
|
||
.header button svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
|
||
.wrap{max-width:760px;margin:0 auto;padding:14px}
|
||
.card{background:var(--card);border-radius:6px;padding:14px;border:1px solid var(--border);box-shadow:none;margin-bottom:10px}
|
||
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
|
||
.row label{width:180px;color:var(--muted);font-size:13px}
|
||
.row input{flex:1;min-width:240px;padding:8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#0b1220;color:var(--text)}
|
||
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
|
||
button{border:none;border-radius:6px;padding:8px 12px;cursor:pointer;color:#fff;background:var(--accent);font-size:13px}
|
||
button.secondary{background:#6b7280}
|
||
small{color:var(--muted)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div>☁️ Cloudflare 配置</div>
|
||
<div class="right">
|
||
<a href="/">返回首页</a>
|
||
<a href="/logout">退出</a>
|
||
</div>
|
||
</div>
|
||
<div class="wrap">
|
||
<div class="card">
|
||
<h3>账号凭据</h3>
|
||
<div class="row"><label>Account ID</label><input id="account" placeholder="请输入 Account ID"></div>
|
||
<div class="row"><label>API Token</label><input id="token" placeholder="请输入 API Token"></div>
|
||
<small>用于查询/修改 DNS & Workers（单账号）</small>
|
||
<div class="btns">
|
||
<button onclick="save()">保存</button>
|
||
<button class="secondary" onclick="load()">刷新</button>
|
||
</div>
|
||
<small id="msg"></small>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
async function api(url,opt={}){
|
||
const r=await fetch(url,opt);
|
||
const out=await r.json().catch(()=>({}));
|
||
if(!r.ok) throw new Error(out.message||('HTTP '+r.status));
|
||
return out?.data||{};
|
||
}
|
||
function esc(s){return String(s||'').replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));}
|
||
async function load(){
|
||
try{
|
||
const d=await api('/api/v1/admin/cf/settings');
|
||
document.getElementById('account').value = d.settings?.cf_account_id || '';
|
||
document.getElementById('token').value = d.settings?.cf_api_token || '';
|
||
document.getElementById('msg').textContent='已加载';
|
||
}catch(e){document.getElementById('msg').textContent='加载失败：'+esc(e.message||e);}
|
||
}
|
||
async function save(){
|
||
const payload={
|
||
account_id: document.getElementById('account').value.trim(),
|
||
api_token: document.getElementById('token').value.trim()
|
||
};
|
||
try{
|
||
await api('/api/v1/admin/cf/settings',{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
|
||
document.getElementById('msg').textContent='已保存';
|
||
}catch(e){document.getElementById('msg').textContent='保存失败：'+esc(e.message||e);}
|
||
}
|
||
load();
|
||
</script>
|
||
</body>
|
||
</html>
|