philip-cat
fdee1aabd7
Introduce a schema-first validation layer and an AI blog generation feature, plus one-command Cloudflare provisioning. - src/schemas/ holds Zod input schemas for post, content, case, settings, AI, and keywords; parseForm() in src/lib/form.ts validates FormData and returns per-field errors. - Migrate all admin POST handlers to parseForm, showing field-level errors and only redirecting once validation passes. - Add blog_keywords table and posts.focus_keyword (migration 0002); uniqueSlug() centralised in src/data/content.ts. - Add src/lib/ai.ts (OpenAI-compatible chat completions + optional Tavily research) and /admin/ai for AI settings, keyword queue, and draft generation. - Add scripts/setup.mjs (npm run setup) to provision D1/KV, set secrets, and optionally migrate, seed, and deploy. - Document AI secrets, Workers Builds deploy flow, and new schemas across README and AGENTS docs.
119 lines
5.1 KiB
Plaintext
119 lines
5.1 KiB
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
}
|
|
const { title } = Astro.props;
|
|
const path = Astro.url.pathname;
|
|
const links = [
|
|
{ href: "/admin", label: "文章" },
|
|
{ href: "/admin/content/service", label: "服務" },
|
|
{ href: "/admin/content/feature", label: "特色" },
|
|
{ href: "/admin/content/step", label: "流程" },
|
|
{ href: "/admin/content/faq", label: "常見問題" },
|
|
{ href: "/admin/cases", label: "案例" },
|
|
{ href: "/admin/settings", label: "設定" },
|
|
{ href: "/admin/ai", label: "AI 生成" },
|
|
];
|
|
const isActive = (href: string) =>
|
|
href === "/admin" ? path === "/admin" : path === href || path.startsWith(href + "/");
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="zh-Hant">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{title} — 後台</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
</head>
|
|
<body>
|
|
<header class="bar">
|
|
<div class="inner">
|
|
<a class="brand" href="/admin">
|
|
<span class="dot"></span>
|
|
盈豐太陽能 · 後台
|
|
</a>
|
|
<nav>
|
|
{
|
|
links.map((l) => (
|
|
<a href={l.href} class={isActive(l.href) ? "active" : ""}>
|
|
{l.label}
|
|
</a>
|
|
))
|
|
}
|
|
<a href="/" target="_blank">睇網站</a>
|
|
<a href="/admin/logout">登出</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main class="inner">
|
|
<slot />
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|
|
<style is:global>
|
|
:root {
|
|
font-family: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", system-ui, sans-serif;
|
|
color: #0f1e1a;
|
|
background: #f2f8f6;
|
|
line-height: 1.65;
|
|
font-size: 15px;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; }
|
|
a { color: #0b8a5e; text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
.inner { max-width: 920px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
.bar { background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); position: sticky; top: 0; z-index: 10; }
|
|
.bar .inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; flex-wrap: wrap; }
|
|
.brand { font-weight: 800; color: #0f1e1a; display: inline-flex; align-items: center; gap: 8px; }
|
|
.brand:hover { text-decoration: none; }
|
|
.dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg,#0b8a5e,#0ba5ec); display: inline-block; }
|
|
.bar nav { display: flex; gap: 14px; font-size: 13.5px; flex-wrap: wrap; }
|
|
.bar nav a { color: #33413c; }
|
|
.bar nav a.active { color: #0b8a5e; font-weight: 700; }
|
|
|
|
main { padding: 32px 24px 100px; }
|
|
h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
|
|
.sub { color: #5b6b66; font-size: 13.5px; margin: 0 0 24px; }
|
|
|
|
.card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
|
|
.card h2 { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
|
|
|
|
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; overflow: hidden; }
|
|
th { text-align: left; font-weight: 600; font-size: 12px; color: #5b6b66; padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,.08); }
|
|
td { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.05); font-size: 14px; vertical-align: middle; }
|
|
tbody tr:last-child td { border-bottom: none; }
|
|
|
|
label { display: block; font-size: 13px; color: #5b6b66; margin: 14px 0 6px; font-weight: 600; }
|
|
input[type="text"], input[type="url"], textarea, select {
|
|
width: 100%; font: inherit; font-size: 14px; padding: 9px 12px;
|
|
border: 1px solid rgba(0,0,0,.15); border-radius: 9px; background: #fff; color: #0f1e1a;
|
|
}
|
|
textarea { min-height: 88px; resize: vertical; }
|
|
input:focus, textarea:focus, select:focus { outline: 2px solid #9fdcc2; border-color: #0b8a5e; }
|
|
|
|
button, .btn {
|
|
font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 9px; cursor: pointer;
|
|
border: 1px solid #0b8a5e; background: #0b8a5e; color: #fff; display: inline-flex; align-items: center; gap: 6px;
|
|
}
|
|
button:hover { background: #0a6f4c; }
|
|
button.secondary, .btn.secondary { background: #fff; color: #0f1e1a; border-color: rgba(0,0,0,.15); }
|
|
button.secondary:hover { background: #f2f8f6; }
|
|
button.danger { background: #fff; color: #a32d2d; border-color: #f09595; }
|
|
button.mini { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
|
|
.actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
|
|
|
|
.badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid transparent; }
|
|
.badge.published { background: #e1f5ee; color: #0f6e56; }
|
|
.badge.draft { background: #faeeda; color: #854f0b; }
|
|
.muted { color: #8a9793; font-size: 13px; }
|
|
.field-error { color: #a32d2d; font-size: 12.5px; font-weight: 600; margin-left: 8px; }
|
|
.err { color: #a32d2d; font-size: 13px; font-weight: 600; }
|
|
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
|
|
.row { display: grid; gap: 12px; grid-template-columns: 1fr; }
|
|
</style>
|