test
92 行
4.7 KiB
HTML
92 行
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WeHub 全资源 Demo</title>
|
|
<style>
|
|
:root { color-scheme: light dark; --ink: #172033; --paper: #f5efe4; --card: #fffaf1; --accent: #1f6f68; --line: #dccfba; --muted: #6d7280; }
|
|
body { margin: 0; min-height: 100svh; background: linear-gradient(135deg, #fffaf1 0%, var(--paper) 48%, #e8f2ef 100%); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
|
|
main { width: min(720px, calc(100vw - 32px)); margin: 0 auto; padding: 48px 0; }
|
|
h1 { margin: 0 0 8px; font-size: 1.8rem; }
|
|
.lede { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }
|
|
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 20px 24px; box-shadow: 0 18px 50px rgb(31 42 68 / 10%); }
|
|
.row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
|
|
.row:last-child { border-bottom: 0; }
|
|
.k { color: var(--muted); font-size: 0.9rem; }
|
|
.v { font-weight: 700; }
|
|
.ok { color: var(--accent); }
|
|
.no { color: #d96b43; }
|
|
button { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
|
|
.actions { display: flex; gap: 10px; margin-bottom: 16px; }
|
|
pre { background: rgb(0 0 0 / 6%); border-radius: 12px; padding: 12px; white-space: pre-wrap; word-break: break-word; margin: 0; font-size: 0.85rem; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>WeHub 全资源 Demo</h1>
|
|
<p><code>ctyun-e2e-20260730T101505Z</code></p>
|
|
<p class="lede">最小可运行示例，覆盖 static_site / function / postgres_database / object_storage / model_router 五种资源。下方状态来自 <code>/api/cloud/health</code>。</p>
|
|
<div class="card">
|
|
<div class="actions">
|
|
<button id="refresh">刷新状态</button>
|
|
<button id="db">写一条 DB 记录</button>
|
|
<button id="chat">问一句 AI</button>
|
|
</div>
|
|
<div id="status">加载中...</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const apiBase = (function () {
|
|
const envID = location.pathname.split("/").filter(Boolean)[0];
|
|
return envID ? "/" + envID + "/api/cloud" : "api/cloud";
|
|
})();
|
|
const status = document.querySelector("#status");
|
|
|
|
function esc(v) { return String(v == null ? "" : v); }
|
|
|
|
async function loadHealth() {
|
|
status.textContent = "加载中...";
|
|
try {
|
|
const res = await fetch(apiBase + "/health");
|
|
const data = await res.json();
|
|
if (!res.ok || data.ok === false) { throw new Error(data.error || ("HTTP " + res.status)); }
|
|
const b = data.bindings || {};
|
|
const rows = [
|
|
["数据库迁移", data.migrated ? "✓" : "✗"],
|
|
["database", b.database ? "已配置" : "未配置"],
|
|
["object_storage", b.object_storage ? "已配置" : "未配置"],
|
|
["object_credentials", b.object_credentials ? "已配置" : "未配置"],
|
|
["model_router", b.model_router ? "已配置" : "未配置"]
|
|
];
|
|
status.innerHTML = rows.map(function (r) {
|
|
return '<div class="row"><span class="k">' + esc(r[0]) + '</span><span class="v ' + (r[1] === "✓" || r[1] === "已配置" ? "ok" : "no") + '">' + esc(r[1]) + '</span></div>';
|
|
}).join("");
|
|
} catch (e) {
|
|
status.innerHTML = '<pre>' + esc(e.message) + '</pre>';
|
|
}
|
|
}
|
|
|
|
document.querySelector("#refresh").addEventListener("click", loadHealth);
|
|
document.querySelector("#db").addEventListener("click", async function () {
|
|
try {
|
|
const res = await fetch(apiBase + "/db", {method: "GET"});
|
|
const data = await res.json();
|
|
status.innerHTML = '<pre>' + esc(JSON.stringify(data, null, 2)) + '</pre>';
|
|
} catch (e) { status.innerHTML = '<pre>' + esc(e.message) + '</pre>'; }
|
|
});
|
|
document.querySelector("#chat").addEventListener("click", async function () {
|
|
const question = window.prompt("输入一个问题：", "用一句话解释什么是模型路由");
|
|
if (!question) { return; }
|
|
try {
|
|
const res = await fetch(apiBase + "/chat", {method: "POST", headers: {"content-type": "application/json"}, body: JSON.stringify({question: question})});
|
|
const data = await res.json();
|
|
status.innerHTML = '<pre>' + esc(data.answer || data.error || JSON.stringify(data)) + '</pre>';
|
|
} catch (e) { status.innerHTML = '<pre>' + esc(e.message) + '</pre>'; }
|
|
});
|
|
|
|
loadHealth();
|
|
</script>
|
|
</body>
|
|
</html>
|