@polardbx/pxbaas 0.0.0-stage → 0.1.0-beta.2

package/templates/webapp/ssr-shop/backend/index.ts

@@ -0,0 +1,491 @@
+// Shop Demo v2 — React SSR 电商 webapp v5（买家注册/登录 + 下单门禁 + 固定密码管理员）
+//
+// 框架: React 18 renderToString + Hono 4.6.12（平台锁版本缓存）
+// 形态: 目录/详情/搜索 = 全量 SSR（服务端经 DX-12 派生内网基址取 MySQL）;
+//       购物车/结算/订单/注册/登录/管理 = SSR shell + 浏览器 hydrate;
+// 鉴权: 浏览器直连 GoTrue（/apps 入口按平台契约剥离用户凭据, 会话 SSR 不成立, af565f8b）;
+//       下单门禁在 RLS 数据层: orders/order_items 仅 authenticated 且 buyer_email={{jwt.email}};
+//       管理员固定账号 admin@shop.demo / admin-2026, RLS 邮箱白名单看全量订单。
+// 契约: 单文件自包含(D16) · marker data-ssr="v1"(DX-2) · 双形态路由(D20) · style 对象 ·
+//       客户端 JS 禁反引号/${} · innerHTML 插值过 esc() · anon/public 兜底常量(D18 家族)。
+
+import { Hono } from "npm:hono@4.6.12";
+import React from "npm:react@18.3.1";
+import { renderToString } from "npm:react-dom@18.3.1/server";
+
+const h = React.createElement;
+
+// ─── DEPLOY CONFIG（平台注入优先；缺失则 worker 明确返回 503，绝不回落到任何真实实例）───
+// env 契约（MR #30497903 起）：平台按三键白名单向 App candidate 注入 SUPABASE_INTERNAL_URL /
+//   SUPABASE_ANON_KEY / SUPABASE_URL，spec-lint 的 deno-env-not-allowed 放行这三键。本模板直读
+//   SUPABASE_INTERNAL_URL（数据面唯一可达基址）与 SUPABASE_ANON_KEY（数据面凭据），无需手填明文 key。
+//   若目标实例 sandbox 镜像尚未含该 MR，两值为空 → configError 明确 503，绝不静默连到别的实例/租户。
+//   INTERNAL_BASE —— 平台注入的内网基址（把公网 host 的 http./https. 中缀去掉），沙箱内可达；
+//                    公网 VIP 因 egress 过滤不可达（非 hairpin），切勿改填公网地址。
+//   ANON_KEY      —— 单租户=实例 anon key；多租户=**该租户** anon key（自带 tenant_id claim，
+//                    REST/Auth 据此路由，无需 X-Tenant-Id）。
+// anon key 是公开值（随页面下发给每个浏览器），不是机密；service_role key 严禁出现在 worker 里。
+const INTERNAL_BASE = Deno.env.get("SUPABASE_INTERNAL_URL") ?? "";
+const ANON_KEY = Deno.env.get("SUPABASE_ANON_KEY") ?? "";
+
+function configError(): string | null {
+  if (!INTERNAL_BASE) return "SUPABASE_INTERNAL_URL 未注入：目标实例 sandbox 镜像早于 MR #30497903，需平台注入内网基址后本 SSR 才能取数。";
+  if (!ANON_KEY) return "SUPABASE_ANON_KEY 未注入：目标实例 sandbox 镜像早于 MR #30497903，需平台注入 anon key。";
+  return null;
+}
+function anonKey(): string {
+  return ANON_KEY;
+}
+// 服务端取数唯一合法通道：内网基址（见上方 DEPLOY CONFIG）。
+function internalBase(): string {
+  return INTERNAL_BASE.replace(/\/+$/, "");
+}
+function configErrorDoc(msg: string): string {
+  return `<!DOCTYPE html><html lang="zh"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1"><title>部署配置缺失</title>
+<style>body{margin:0;padding:48px 20px;font:15px/1.7 system-ui,-apple-system,sans-serif;background:#0b1020;color:#e8eaf2}
+.card{max-width:660px;margin:0 auto;padding:24px 26px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
+code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px}</style></head>
+<body><div class="card" id="__ssr" data-ssr="v1"><h1 style="margin:0 0 8px;font-size:20px">部署配置缺失</h1>
+<p style="color:#9aa3b8;margin:0 0 10px">${msg}</p>
+<p style="color:#9aa3b8;margin:0">请在 <code>backend/index.ts</code> 顶部的 DEPLOY CONFIG 常量块填入目标实例的内网基址与 anon key，然后重新部署。</p>
+</div></body></html>`;
+}
+
+interface Product {
+  id: number;
+  name: string;
+  description: string;
+  price_cents: number;
+  stock: number;
+  emoji: string;
+  category: string;
+  created_at?: string;
+}
+
+async function fetchProducts(): Promise<Product[]> {
+  try {
+    const r = await fetch(internalBase() + "/rest/v1/products?select=id,name,description,price_cents,stock,emoji,category&order=id.asc", {
+      headers: { apikey: anonKey() },
+    });
+    if (!r.ok) return [];
+    return (await r.json()) as Product[];
+  } catch {
+    return [];
+  }
+}
+async function fetchProduct(id: string): Promise<Product | null> {
+  try {
+    const r = await fetch(internalBase() + "/rest/v1/products?select=*&id=eq." + encodeURIComponent(id), {
+      headers: { apikey: anonKey() },
+    });
+    if (!r.ok) return null;
+    const rows = (await r.json()) as Product[];
+    return rows[0] || null;
+  } catch {
+    return null;
+  }
+}
+
+function money(c: number): string {
+  return "¥" + (Number(c) / 100).toFixed(2);
+}
+const HOT_WORDS = ["键盘", "耳机", "音箱", "手表", "充电", "收纳", "路由", "NAS", "显示器", "电竞椅"];
+
+const CSS = `
+  :root { color-scheme: dark;
+    --bg1:#0b1020; --bg2:#171338; --card:rgba(255,255,255,.045); --line:rgba(255,255,255,.10);
+    --txt:#e8eaf2; --muted:#9aa3b8; --acc1:#6366f1; --acc2:#ec4899; --gold:#f6c453; }
+  * { box-sizing: border-box; }
+  html,body { margin:0; }
+  body { font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--txt);
+    min-height:100vh; padding:0 18px 60px; max-width:1040px; margin:0 auto;
+    background:
+      radial-gradient(1100px 520px at 85% -10%, rgba(99,102,241,.30), transparent 60%),
+      radial-gradient(900px 480px at 8% 108%, rgba(236,72,153,.20), transparent 60%),
+      linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg1));
+    background-attachment: fixed; }
+  header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px;
+    padding:12px 4px; backdrop-filter: blur(14px);
+    background: rgba(11,16,32,.55); border-bottom:1px solid var(--line); }
+  .logo { font-size:21px; font-weight:800;
+    background: linear-gradient(90deg, var(--acc1), var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
+  nav { margin-left:auto; }
+  nav a { color:#aeb9d6; text-decoration:none; margin-left:16px; font-size:14px; }
+  nav a:hover { color:#fff; }
+  .badge { background:linear-gradient(90deg,var(--acc1),var(--acc2)); border-radius:999px; padding:1px 8px; font-size:12px; color:#fff; }
+  .muted { color:var(--muted); font-size:13px; }
+  .topbar { margin:16px 0 4px; }
+  .searchbar { display:flex; align-items:stretch; border:2px solid var(--acc1); border-radius:999px;
+    overflow:hidden; background:rgba(255,255,255,.06); }
+  .searchbar select { background:transparent; color:var(--txt); border:0; outline:none; font:inherit;
+    padding:0 14px; border-right:1px solid var(--line); cursor:pointer; }
+  .searchbar select option { color:#111; }
+  .searchbar .q { flex:1; background:transparent; border:0; outline:none; color:var(--txt);
+    padding:13px 18px; font:inherit; margin:0; }
+  .searchbar .q::placeholder { color:var(--muted); }
+  .searchbar .sbtn { border:0; cursor:pointer; color:#fff; font-size:15px; font-weight:600;
+    padding:0 34px; background:linear-gradient(90deg,var(--acc1),var(--acc2)); }
+  .hotwords { display:flex; gap:16px; flex-wrap:wrap; margin:8px 4px 0; font-size:13px; }
+  .hotwords a { color:#ff8fa3; text-decoration:none; cursor:pointer; }
+  .hotwords a:hover { color:#fff; text-decoration:underline; }
+  .hero { margin:14px 0 6px; padding:24px 22px; border-radius:18px; border:1px solid var(--line);
+    background: linear-gradient(120deg, rgba(99,102,241,.22), rgba(236,72,153,.14)); }
+  .hero h2 { margin:0 0 6px; font-size:24px; }
+  .toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0 4px; }
+  .chip { border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:999px;
+    padding:6px 14px; font-size:13px; text-decoration:none; }
+  .chip.on { color:#fff; border-color:transparent; background:linear-gradient(90deg,var(--acc1),var(--acc2)); }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; margin-top:16px; }
+  .card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px;
+    backdrop-filter: blur(8px); transition: transform .18s ease, box-shadow .18s ease; }
+  .card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.35); }
+  .thumb { font-size:46px; text-align:center; padding:16px 0; border-radius:14px;
+    background: radial-gradient(circle at 50% 40%, rgba(99,102,241,.28), rgba(255,255,255,.03) 70%); }
+  .tag { display:inline-block; font-size:11px; color:#c7d2fe; background:rgba(99,102,241,.18);
+    border:1px solid rgba(99,102,241,.4); border-radius:999px; padding:2px 9px; margin-bottom:6px; }
+  .pname { font-size:15px; font-weight:600; color:#eef1ff; text-decoration:none; }
+  .pname:hover { color:#fff; text-decoration:underline; }
+  .price { color:var(--gold); font-weight:700; }
+  button, a.btn { border:0; border-radius:10px; padding:9px 16px; font:inherit; cursor:pointer; color:#fff;
+    background:linear-gradient(90deg,var(--acc1),var(--acc2)); text-decoration:none; display:inline-block; }
+  button.ghost, a.btn.ghost { background:rgba(255,255,255,.10); }
+  button.danger { background:linear-gradient(90deg,#ef4444,#b3261e); }
+  button.mini { padding:4px 10px; border-radius:8px; }
+  input { width:100%; background:var(--card); color:var(--txt); border:1px solid var(--line);
+    border-radius:10px; padding:10px 12px; font:inherit; margin:6px 0; outline:none; }
+  table { width:100%; border-collapse:collapse; margin-top:10px; }
+  td, th { padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
+  th { color:var(--muted); font-weight:600; }
+  .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
+  footer { margin-top:40px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
+  .empty { padding:40px 0; text-align:center; color:var(--muted); }
+  .authbox { max-width:400px; margin:24px auto; }
+  .toast { position:fixed; left:50%; bottom:36px; transform:translateX(-50%) translateY(20px); z-index:60;
+    background:linear-gradient(90deg,var(--acc1),var(--acc2)); color:#fff; border-radius:999px;
+    padding:10px 26px; font-size:14px; font-weight:600; opacity:0; pointer-events:none;
+    transition: opacity .18s ease, transform .18s ease; box-shadow:0 10px 30px rgba(0,0,0,.4); }
+  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
+  .badge.pulse { animation:bp .5s ease; }
+  @keyframes bp { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }
+`;
+
+// ---------- React 组件（服务端渲染） ----------
+// base: 相对链接前缀（/product/:id 为二级路径须用 ../，其余 ./）
+function Header(props: { base: string }) {
+  const b = props.base;
+  return h("header", null,
+    h("span", { className: "logo" }, "🛍️ Supabase Shop · React SSR"),
+    h("nav", null,
+      h("a", { href: b + "shop" }, "商品"),
+      h("a", { href: b + "cart" }, "购物车 ", h("span", { className: "badge", id: "cartcount" }, "0")),
+      h("a", { href: b + "orders" }, "我的订单"),
+      h("span", { id: "autharea", className: "muted" })));
+}
+function SearchBar(props: { q: string; cat: string; cats: string[] }) {
+  return h("div", { className: "topbar" },
+    h("form", { className: "searchbar", method: "GET", action: "./shop" },
+      h("select", { name: "cat" },
+        props.cats.map((c) => h("option", { value: c, selected: c === props.cat }, c === "all" ? "全部" : c))),
+      h("input", { className: "q", name: "q", placeholder: "搜索商品名 / 描述（服务端渲染结果）…", value: props.q }),
+      h("button", { className: "sbtn", type: "submit" }, "搜索")),
+    h("div", { className: "hotwords" },
+      HOT_WORDS.map((w) => h("a", { href: "./shop?q=" + encodeURIComponent(w) }, w))));
+}
+function ProductCard(p: Product) {
+  return h("div", { className: "card" },
+    h("div", { className: "thumb" }, p.emoji || "📦"),
+    p.category ? h("span", { className: "tag" }, p.category) : null,
+    h("div", null, h("a", { className: "pname", href: "./product/" + p.id }, p.name)),
+    h("div", { className: "muted", style: { margin: "4px 0 8px" } }, p.description || ""),
+    h("div", { className: "row", style: { justifyContent: "space-between" } },
+      h("span", { className: "price" }, money(p.price_cents)),
+      h("button", { className: "mini", type: "button", "data-add": String(p.id) }, "加购")),
+    h("div", { className: "muted", style: { marginTop: "6px" } }, "库存 " + p.stock));
+}
+function CatalogView(props: { products: Product[]; q: string; cat: string; cats: string[]; note: string }) {
+  const list = props.products.filter((p) => {
+    const okCat = props.cat === "all" || p.category === props.cat;
+    const okQ = !props.q || (p.name || "").indexOf(props.q) >= 0 || (p.description || "").indexOf(props.q) >= 0;
+    return okCat && okQ;
+  });
+  return h(React.Fragment, null,
+    h("div", { className: "hero" },
+      h("h2", null, "发现好物 · 服务端渲染直达"),
+      h("div", { className: "muted" }, "共 " + props.products.length + " 件商品 · React renderToString · 数据经内网基址服务端取自 MySQL · " + props.note)),
+    h("div", { className: "toolbar" },
+      props.cats.map((c) => h("a", {
+        className: "chip" + (c === props.cat ? " on" : ""),
+        href: "./shop?cat=" + encodeURIComponent(c) + (props.q ? "&q=" + encodeURIComponent(props.q) : ""),
+      }, c === "all" ? "全部" : c)),
+      props.q ? h("span", { className: "muted" }, "搜索：“" + props.q + "” · " + list.length + " 件") : null),
+    list.length
+      ? h("div", { className: "grid" }, list.map((p) => h(ProductCard, { key: p.id, ...p })))
+      : h("div", { className: "empty" }, "没有匹配的商品"));
+}
+function ProductView(props: { p: Product | null; base: string }) {
+  const p = props.p;
+  if (!p) return h("div", { className: "empty" }, "商品不存在");
+  return h("div", { className: "card", style: { maxWidth: "520px", margin: "20px auto" } },
+    h("div", { className: "thumb" }, p.emoji || "📦"),
+    p.category ? h("span", { className: "tag" }, p.category) : null,
+    h("h2", { style: { margin: "6px 0" } }, p.name),
+    h("p", { className: "muted" }, p.description || ""),
+    h("div", { className: "price", style: { fontSize: "24px" } }, money(p.price_cents)),
+    h("div", { className: "muted" }, "库存 " + p.stock + " · 上架 " + String(p.created_at || "")),
+    h("div", { className: "row", style: { marginTop: "14px" } },
+      h("button", { type: "button", "data-add": String(p.id) }, "加入购物车"),
+      h("a", { className: "btn ghost", href: props.base + "shop" }, "返回")));
+}
+function ClientShell(props: { title: string; hint: string }) {
+  return h("div", { className: "card authbox", style: { maxWidth: "640px", margin: "20px auto" } },
+    h("h2", { style: { marginTop: 0 } }, props.title),
+    h("div", { className: "muted" }, props.hint),
+    h("div", { id: "client-root" }, h("div", { className: "empty" }, "hydrate 加载中…")));
+}
+
+// ---------- 客户端脚本（禁反引号/${}；innerHTML 插值过 esc） ----------
+function clientScript(anon: string): string {
+  const js = `
+  var ANON = "__ANON__";
+  var REST = location.origin + '/rest/v1';
+  var AUTH = location.origin + '/auth/v1';
+  var CART_KEY = 'shop_cart_v2';
+  var AUTH_KEY = 'shop_auth_v1';
+  var ADMIN_EMAIL = 'admin@shop.demo';
+  function el(id){return document.getElementById(id);}
+  function esc(s){return String(s).replace(/[&<>"']/g,function(c){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
+  function money(c){return '¥'+(Number(c)/100).toFixed(2);}
+  function hdrs(){return {'apikey':ANON,'Authorization':'Bearer '+ANON};}
+  function getJSON(u,h){return fetch(u,{headers:h||hdrs()}).then(function(r){return r.json();});}
+  function postJSON(u,b,h){return fetch(u,{method:'POST',headers:Object.assign(h||hdrs(),{'Content-Type':'application/json','Prefer':'return=representation'}),body:JSON.stringify(b)}).then(function(r){return r.json().then(function(j){return {ok:r.ok,status:r.status,body:j};});});}
+  function getCart(){try{return JSON.parse(localStorage.getItem(CART_KEY)||'{}');}catch(e){return {};}}
+  function setCart(c){localStorage.setItem(CART_KEY,JSON.stringify(c));refreshBadge();}
+  function cartCount(){var c=getCart(),n=0;for(var k in c)n+=c[k];return n;}
+  function refreshBadge(){var b=el('cartcount');if(b)b.textContent=cartCount();}
+  var toastTimer=null;
+  function toast(msg){var t=el('shoptoast');if(!t){t=document.createElement('div');t.id='shoptoast';t.className='toast';document.body.appendChild(t);}
+    t.textContent=msg;t.classList.add('show');if(toastTimer)clearTimeout(toastTimer);toastTimer=setTimeout(function(){t.classList.remove('show');},1200);}
+  function addToCart(id){var c=getCart();c[id]=(c[id]||0)+1;setCart(c);
+    var b=el('cartcount');if(b){b.classList.remove('pulse');void b.offsetWidth;b.classList.add('pulse');}
+    toast('✓ 已加入购物车 · 共 ' + cartCount() + ' 件');}
+  document.addEventListener('click',function(e){var t=e.target&&e.target.closest?e.target.closest('[data-add]'):null;if(t){addToCart(Number(t.getAttribute('data-add')));}});
+  function setQty(id,q){var c=getCart();if(q<=0)delete c[id];else c[id]=q;setCart(c);if(location.pathname.indexOf('/cart')>=0)viewCart();}
+  function getAuth(){try{return JSON.parse(localStorage.getItem(AUTH_KEY)||'null');}catch(e){return null;}}
+  function setAuth(a){if(a){localStorage.setItem(AUTH_KEY,JSON.stringify(a));}else{localStorage.removeItem(AUTH_KEY);}refreshAuthUI();}
+  function authHdr(){var h=hdrs();var a=getAuth();if(a&&a.token){h['Authorization']='Bearer '+a.token;}return h;}
+  function refreshAuthUI(){var box=el('autharea');if(!box)return;var a=getAuth();
+    if(a){box.innerHTML=' · <span style="color:#c7d2fe">'+esc(a.email)+'</span> <a href="#" onclick="doLogout();return false;" style="color:#aeb9d6">退出</a>'+(a.email===ADMIN_EMAIL?' <a href="./admin" style="color:#f6c453">管理台</a>':'');}
+    else{box.innerHTML=' · <a href="./login" style="color:#aeb9d6">登录</a> <a href="./signup" style="color:#aeb9d6">注册</a>';} }
+  function doLogout(){setAuth(null);location.href='./shop';}
+  function authCall(kind,email,pass){
+    var url = kind==='signup' ? AUTH+'/signup' : AUTH+'/token?grant_type=password';
+    return fetch(url,{method:'POST',headers:{'apikey':ANON,'Content-Type':'application/json'},
+      body:JSON.stringify({email:email,password:pass})})
+      .then(function(r){return r.json().then(function(j){return {ok:r.ok,status:r.status,body:j};});});
+  }
+  function viewLogin(){
+    var next=new URL(location.href).searchParams.get('next')||'./shop';
+    el('client-root').innerHTML='<input id="lemail" placeholder="邮箱"><input id="lpass" type="password" placeholder="密码">'+
+      '<div class="row" style="margin-top:10px"><button onclick="doLogin(\\''+esc(next)+'\\')">登录</button>'+
+      '<a class="btn ghost" href="./signup">注册买家</a></div><div class="muted" id="lmsg" style="margin-top:10px"></div>'+
+      '<div class="muted" style="margin-top:14px">管理员入口：<a href="./admin" style="color:#f6c453">./admin</a>（固定密码账号）</div>';
+  }
+  function doLogin(next){
+    var email=el('lemail').value.trim(),pass=el('lpass').value;
+    el('lmsg').textContent='登录中…';
+    authCall('login',email,pass).then(function(r){
+      if(r.ok&&r.body.access_token){setAuth({token:r.body.access_token,email:email});location.href=next;}
+      else{el('lmsg').textContent='登录失败: '+(r.body&&r.body.error_description||r.body&&r.body.msg||r.status);}
+    }).catch(function(e){el('lmsg').textContent='登录失败: '+e;});
+  }
+  function viewSignup(){
+    el('client-root').innerHTML='<input id="semail" placeholder="邮箱（买家账号）"><input id="spass" type="password" placeholder="密码（≥6位）">'+
+      '<div class="row" style="margin-top:10px"><button onclick="doSignup()">注册并登录</button>'+
+      '<a class="btn ghost" href="./login">已有账号登录</a></div><div class="muted" id="smsg" style="margin-top:10px"></div>';
+  }
+  function doSignup(){
+    var email=el('semail').value.trim(),pass=el('spass').value;
+    el('smsg').textContent='注册中…';
+    authCall('signup',email,pass).then(function(r){
+      if(r.ok&&r.body.access_token){setAuth({token:r.body.access_token,email:email});location.href='./shop';}
+      else if(r.ok){el('smsg').textContent='注册成功（需确认邮件场景未启用时请直接登录）';setTimeout(function(){location.href='./login';},800);}
+      else{el('smsg').textContent='注册失败: '+(r.body&&r.body.msg||r.status);}
+    }).catch(function(e){el('smsg').textContent='注册失败: '+e;});
+  }
+  function viewCart(){
+    var c=getCart(),ids=Object.keys(c);
+    if(!ids.length){el('client-root').innerHTML='<div class="empty">购物车为空。<a href="./shop" style="color:#aeb9d6">去逛逛 →</a></div>';return;}
+    getJSON(REST+'/products?select=id,name,price_cents,emoji').then(function(all){
+      var byId={};all.forEach(function(p){byId[p.id]=p;});
+      var total=0;
+      var html='<table><tr><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th></th></tr>';
+      ids.forEach(function(id){var p=byId[id];if(!p)return;var q=c[id];total+=p.price_cents*q;
+        html+='<tr><td>'+esc(p.emoji||'')+' '+esc(p.name)+'</td><td>'+money(p.price_cents)+'</td>'+
+        '<td><button class="mini ghost" onclick="setQty('+id+','+(q-1)+')">−</button> '+q+' <button class="mini ghost" onclick="setQty('+id+','+(q+1)+')">＋</button></td>'+
+        '<td>'+money(p.price_cents*q)+'</td><td><button class="mini danger" onclick="setQty('+id+',0)">移除</button></td></tr>';});
+      html+='</table><div class="row" style="margin-top:16px;justify-content:space-between"><span class="price" style="font-size:20px">合计 '+money(total)+'</span><a class="btn" href="./checkout">去结算 →</a></div>';
+      el('client-root').innerHTML=html;});
+  }
+  function viewCheckout(){
+    var a=getAuth();
+    if(!a){el('client-root').innerHTML='<div class="empty">下单需先登录（RLS 数据层强制）。<br><br><a class="btn" href="./login?next=./checkout">去登录 →</a> <a class="btn ghost" href="./signup">注册买家</a></div>';return;}
+    var c=getCart();if(!Object.keys(c).length){el('client-root').innerHTML='<div class="empty">购物车为空，无法结算。</div>';return;}
+    el('client-root').innerHTML='<div class="muted">下单账号：'+esc(a.email)+'（订单绑定买家邮箱，RLS 强制）</div>'+
+      '<input id="cname" placeholder="收货人姓名 *"><input id="cemail" placeholder="邮箱（可选）"><input id="caddr" placeholder="收货地址（可选）">'+
+      '<div class="row" style="margin-top:12px"><button onclick="placeOrder()">提交订单</button><a class="btn ghost" href="./cart">返回购物车</a></div><div class="muted" id="cmsg" style="margin-top:10px"></div>';
+  }
+  function placeOrder(){
+    var a=getAuth();if(!a){el('cmsg').textContent='未登录，无法下单';return;}
+    var name=el('cname').value.trim();if(!name){el('cmsg').textContent='请填写姓名';return;}
+    var email=el('cemail').value.trim(),addr=el('caddr').value.trim();
+    var c=getCart(),ids=Object.keys(c);el('cmsg').textContent='提交中…';
+    getJSON(REST+'/products?select=id,name,price_cents').then(function(all){
+      var byId={};all.forEach(function(p){byId[p.id]=p;});
+      var total=0;ids.forEach(function(id){if(byId[id])total+=byId[id].price_cents*c[id];});
+      return postJSON(REST+'/orders',{customer_name:name,customer_email:email,customer_address:addr,buyer_email:a.email,total_cents:total,status:'paid'},authHdr()).then(function(r){
+        if(!r.ok){throw new Error((r.body&&(r.body.message||r.body.code))||r.status);}
+        var ord=r.body;var orderId=(ord&&ord[0])?ord[0].id:ord.id;
+        var chain=Promise.resolve();
+        ids.forEach(function(id){var p=byId[id];if(!p)return;chain=chain.then(function(){
+          return postJSON(REST+'/order_items',{order_id:orderId,product_id:Number(id),product_name:p.name,qty:c[id],unit_price_cents:p.price_cents,buyer_email:a.email},authHdr()).then(function(r2){if(!r2.ok)throw new Error(r2.status);});});});
+        return chain.then(function(){return orderId;});});
+    }).then(function(orderId){setCart({});el('cmsg').textContent='下单成功, 订单号 '+orderId+'（已写入 MySQL, 绑定 '+a.email+'）';
+      setTimeout(function(){location.href='./orders';},700);})
+    .catch(function(e){el('cmsg').textContent='下单失败（未登录会被 RLS 拒绝）: '+e;});
+  }
+  function renderOrders(orders,itemsByOrder,heading){
+    if(!orders.length){el('client-root').innerHTML='<div class="empty">暂无订单。<a href="./shop" style="color:#aeb9d6">去下单 →</a></div>';return;}
+    el('client-root').innerHTML='<h3 style="margin-top:0">'+esc(heading)+'</h3>'+orders.map(function(o){var items=itemsByOrder[o.id]||[];
+      return '<div class="card" style="margin:12px 0"><div class="row" style="justify-content:space-between"><b>订单 #'+o.id+'</b><span class="muted">'+esc(o.customer_name)+' · '+esc(o.buyer_email||'')+' · '+esc(String(o.created_at||''))+'</span><span class="price">'+money(o.total_cents)+'</span></div>'+
+      '<table><tr><th>商品</th><th>单价</th><th>数量</th><th>小计</th></tr>'+items.map(function(it){return '<tr><td>'+esc(it.product_name)+'</td><td>'+money(it.unit_price_cents)+'</td><td>'+it.qty+'</td><td>'+money(it.unit_price_cents*it.qty)+'</td></tr>';}).join('')+'</table></div>';}).join('');
+  }
+  function loadOrders(withItems,heading){
+    var H=authHdr();
+    getJSON(REST+'/orders?select=*&order=id.desc',H).then(function(orders){
+      if(!Array.isArray(orders)){el('client-root').innerHTML='<div class="empty">读取订单失败（需登录）</div>';return;}
+      var chain=Promise.resolve();var itemsByOrder={};
+      if(withItems){orders.forEach(function(o){chain=chain.then(function(){return getJSON(REST+'/order_items?select=*&order_id=eq.'+o.id,H).then(function(items){itemsByOrder[o.id]=items;});});});}
+      chain.then(function(){renderOrders(orders,itemsByOrder,heading);});
+    }).catch(function(e){el('client-root').innerHTML='<div class="empty">读取订单失败: '+esc(String(e))+'</div>';});
+  }
+  function viewOrders(){
+    var a=getAuth();
+    if(!a){el('client-root').innerHTML='<div class="empty">查看订单需登录。<br><br><a class="btn" href="./login?next=./orders">去登录 →</a></div>';return;}
+    loadOrders(true,'我的订单（RLS 仅本人可见）');
+  }
+  function viewAdmin(){
+    var a=getAuth();
+    if(a&&a.email===ADMIN_EMAIL){loadOrders(true,'管理台 · 全部买家订单（RLS 管理员白名单）');return;}
+    el('client-root').innerHTML='<div class="muted">管理员固定账号：<code>'+ADMIN_EMAIL+'</code> / <code>admin-2026</code></div>'+
+      '<input id="aemail" value="'+ADMIN_EMAIL+'"><input id="apass" type="password" placeholder="管理员密码">'+
+      '<div class="row" style="margin-top:10px"><button onclick="doAdminLogin()">管理员登录</button></div><div class="muted" id="amsg" style="margin-top:10px"></div>';
+  }
+  function doAdminLogin(){
+    var email=el('aemail').value.trim(),pass=el('apass').value;
+    el('amsg').textContent='登录中…';
+    authCall('login',email,pass).then(function(r){
+      if(r.ok&&r.body.access_token){setAuth({token:r.body.access_token,email:email});viewAdmin();}
+      else{el('amsg').textContent='管理员登录失败: '+(r.body&&r.body.msg||r.status);}
+    }).catch(function(e){el('amsg').textContent='登录失败: '+e;});
+  }
+  (function(){
+    refreshBadge();refreshAuthUI();
+    var p=location.pathname;
+    if(p.indexOf('/cart')>=0)viewCart();
+    else if(p.indexOf('/checkout')>=0)viewCheckout();
+    else if(p.indexOf('/orders')>=0)viewOrders();
+    else if(p.indexOf('/login')>=0)viewLogin();
+    else if(p.indexOf('/signup')>=0)viewSignup();
+    else if(p.indexOf('/admin')>=0)viewAdmin();
+  })();
+`;
+  return "<script>" + js.replace("__ANON__", anon) + "</script>";
+}
+
+function pageDoc(bodyInner: React.ReactElement, serverIso: string, anon: string): string {
+  const body = renderToString(bodyInner);
+  return "<!DOCTYPE html><html lang=\"zh\"><head><meta charset=\"utf-8\">" +
+    "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">" +
+    "<title>Supabase Shop · React SSR</title><style>" + CSS + "</style></head><body>" +
+    "<div id=\"__ssr\" data-ssr=\"v1\">" + body + "</div>" +
+    "<footer>React 18 renderToString @ Hono 4.6.12 · SSR " + serverIso + " · 买家鉴权 GoTrue · 下单门禁 RLS · 管理员 admin@shop.demo</footer>" +
+    clientScript(anon) +
+    "</body></html>";
+}
+
+// ---------- Hono 路由 ----------
+const app = new Hono();
+
+function norm(path: string): string {
+  return path.replace(/^\/app_[^/]+/, "") || path;
+}
+function catsOf(products: Product[]): string[] {
+  const cats = ["all"];
+  products.forEach((p) => { if (p.category && cats.indexOf(p.category) < 0) cats.push(p.category); });
+  return cats;
+}
+
+app.get("*", async (c) => {
+  const p = norm(new URL(c.req.url).pathname);
+  const iso = new Date().toISOString();
+  const anon = anonKey();
+  const cfgErr = configError();
+  if (cfgErr) return c.html(configErrorDoc(cfgErr), 503);
+
+  if (p === "/" || p === "/index.html") return c.redirect("./shop", 302);
+
+  if (p === "/shop" || p === "/shop/") {
+    const q = (c.req.query("q") || "").trim();
+    const cat = c.req.query("cat") || "all";
+    const products = await fetchProducts();
+    const note = products.length ? "服务端取数 OK" : "内网基址不可达或无商品（降级空目录）";
+    return c.html(pageDoc(
+      h(React.Fragment, null,
+        h(Header, { base: "./" }),
+        h(SearchBar, { q, cat, cats: catsOf(products) }),
+        h("main", null, h(CatalogView, { products, q, cat, cats: catsOf(products), note }))),
+      iso, anon));
+  }
+
+  const pm = p.match(/^\/product\/(\d+)$/);
+  if (pm) {
+    const prod = await fetchProduct(pm[1]);
+    return c.html(pageDoc(
+      h(React.Fragment, null, h(Header, { base: "../" }), h("main", null, h(ProductView, { p: prod, base: "../" }))),
+      iso, anon));
+  }
+
+  if (p === "/cart" || p === "/checkout" || p === "/orders" || p === "/login" || p === "/signup" || p === "/admin") {
+    const titles: Record<string, [string, string]> = {
+      "/cart": ["购物车", "浏览器 hydrate 直连 REST（localStorage 购物车）"],
+      "/checkout": ["结算", "需登录：订单绑定买家邮箱，RLS 数据层强制门禁"],
+      "/orders": ["我的订单", "需登录：RLS 仅本人订单可见（管理员见全量）"],
+      "/login": ["买家登录", "GoTrue 密码登录 · 会话存 localStorage · 浏览器直连鉴权"],
+      "/signup": ["买家注册", "游客注册成为买家 · GoTrue signup（免邮箱确认已开）"],
+      "/admin": ["后台管理", "固定密码账号 admin@shop.demo / admin-2026 · RLS 白名单看全量订单"],
+    };
+    const t = titles[p];
+    return c.html(pageDoc(
+      h(React.Fragment, null, h(Header, { base: "./" }), h("main", null,
+        h(ClientShell, { title: t[0], hint: t[1] }))),
+      iso, anon));
+  }
+
+  if (p === "/api/dbg" || p === "/dbg") {
+    const info: Record<string, unknown> = { hasUrl: !!Deno.env.get("SUPABASE_URL"), hasAnon: !!Deno.env.get("SUPABASE_ANON_KEY"), base: internalBase() };
+    try {
+      const r = await fetch(internalBase() + "/rest/v1/products?select=id", { headers: { apikey: anonKey() } });
+      info.fetchStatus = r.status;
+    } catch (e) { info.fetchErr = String(e).slice(0, 160); }
+    return c.json(info);
+  }
+  if (p === "/api/health" || p === "/health") return c.json({ ok: true, engine: "hono@4.6.12", ssr: "react@18.3.1" });
+  if (p === "/api/products" || p === "/products") return c.json(await fetchProducts());
+
+  return c.html(pageDoc(
+    h(React.Fragment, null, h(Header, { base: "./" }), h("main", null, h("div", { className: "empty" }, "404 · 页面不存在 " + p))),
+    iso, anon), 404);
+});
+
+Deno.serve(app.fetch);

package/templates/webapp/ssr-shop/db/rls.json

@@ -0,0 +1,16 @@
+{
+  "$comment": "Declarative RLS for the shop webapp. Applied by `pxbaas app db-init` (single-tenant AND multi-tenant). table_schema is NEVER declared here: single-tenant binds it to --schema (default public); multi-tenant binds it server-side to the tenant db. using/check expressions may embed {{request.jwt.claim.*}} templates.",
+  "tables": [
+    { "table": "products", "rlsEnabled": true, "rlsForced": false },
+    { "table": "orders", "rlsEnabled": true, "rlsForced": false },
+    { "table": "order_items", "rlsEnabled": true, "rlsForced": false }
+  ],
+  "policies": [
+    { "table": "products", "name": "products_select_anon", "role": "anon", "command": "SELECT", "using": "1=1", "check": null, "permissive": true },
+    { "table": "products", "name": "products_select_auth", "role": "authenticated", "command": "SELECT", "using": "1=1", "check": null, "permissive": true },
+    { "table": "orders", "name": "orders_select_auth", "role": "authenticated", "command": "SELECT", "using": "`buyer_email` = {{request.jwt.claim.email}} OR {{request.jwt.claim.email}} = 'admin@shop.demo'", "check": null, "permissive": true },
+    { "table": "orders", "name": "orders_insert_auth", "role": "authenticated", "command": "INSERT", "using": null, "check": "`buyer_email` = {{request.jwt.claim.email}}", "permissive": true },
+    { "table": "order_items", "name": "order_items_select_auth", "role": "authenticated", "command": "SELECT", "using": "`buyer_email` = {{request.jwt.claim.email}} OR {{request.jwt.claim.email}} = 'admin@shop.demo'", "check": null, "permissive": true },
+    { "table": "order_items", "name": "order_items_insert_auth", "role": "authenticated", "command": "INSERT", "using": null, "check": "`buyer_email` = {{request.jwt.claim.email}}", "permissive": true }
+  ]
+}

package/templates/webapp/ssr-shop/db/schema.sql

@@ -0,0 +1,90 @@
+-- =============================================================================
+-- shop-demo-ssr — 数据层（幂等，可重复执行）
+--
+-- 用法：把 __SCHEMA__ 替换为目标库名后逐条执行
+--   · 单租户实例：__SCHEMA__ = public
+--   · 多租户实例：__SCHEMA__ = tenant_<tenant_id>（每租户一套库）
+--   sed 's/__SCHEMA__/public/g' db/schema.sql
+--
+-- 执行通道（推荐）：`pxbaas app db-init <name>` —— 单/多租户通用，自动：
+--   · 单租户：__SCHEMA__ → public，经 /pg/query（全局 admin）执行；
+--   · 多租户：__SCHEMA__ 去限定（连接已锁租户库），经 /api/tenant-ddl 用
+--             per-tenant service_role key 执行；GRANT 仅本租户库，天然隔离。
+--   本文件只含 DDL + 种子；RLS 声明在同目录 db/rls.json，由 db-init 一并应用。
+--
+-- ⚠️ RLS 元数据的落点（写错静默失效，等价于关闭 RLS）：
+--   永远写中心库 supabase._mysqlrest_rls_tables / _mysqlrest_rls_policies。
+--   db-init 会自动绑定 table_schema（单租户=--schema，多租户=服务端强绑租户库），
+--   无需也不要手写库名。租户库内同名 _mysqlrest_rls_* 表没有任何服务读取，勿写入。
+-- =============================================================================
+
+-- ---- 表结构 ----
+CREATE TABLE IF NOT EXISTS `__SCHEMA__`.`products` (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  name VARCHAR(200) NOT NULL,
+  description TEXT,
+  price_cents INT NOT NULL DEFAULT 0,
+  stock INT NOT NULL DEFAULT 0,
+  emoji VARCHAR(16) DEFAULT '',
+  category VARCHAR(64),
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS `__SCHEMA__`.`orders` (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  customer_name VARCHAR(120),
+  customer_email VARCHAR(200),
+  customer_address TEXT,
+  buyer_email VARCHAR(200),          -- 下单者邮箱，RLS owner 判据（缺失则下单必失败）
+  total_cents INT NOT NULL DEFAULT 0,
+  status VARCHAR(32) DEFAULT 'paid',
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- order_items 反规范化存 product_name/unit_price_cents，规避 join；
+-- buyer_email 冗余存储作为 owner RLS 判据（无法 join orders，故必须自带 owner 列，
+-- 否则任意 authenticated 用户可读/写全部明细 —— R2-05 越权）。
+CREATE TABLE IF NOT EXISTS `__SCHEMA__`.`order_items` (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  order_id INT NOT NULL,
+  product_id INT NOT NULL,
+  product_name VARCHAR(200),
+  qty INT NOT NULL DEFAULT 1,
+  unit_price_cents INT NOT NULL DEFAULT 0,
+  buyer_email VARCHAR(200),          -- 明细归属者邮箱，RLS owner 判据（写入须 = jwt.email）
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- ---- RLS 注册与策略：声明在同目录 db/rls.json，由 `pxbaas app db-init` 应用 ----
+--   · products：公开目录，anon / authenticated 均可读；
+--   · orders / order_items：仅本人（buyer_email = jwt.email）或管理员白名单可读，仅本人可写。
+--   （不再内联 INSERT，避免与 rls.json 双源；如需手动注册见 db/rls.json。）
+
+-- ---- 种子商品（10 件，幂等）----
+INSERT INTO `__SCHEMA__`.`products` (name, description, price_cents, stock, emoji, category)
+SELECT * FROM (
+  SELECT '机械键盘' a, '87 键热插拔 · RGB' b, 29900 c, 50 d, '⌨️' e, '外设' f
+  UNION ALL SELECT '降噪耳机', '40h 续航 · ANC', 59900, 30, '🎧', '音频'
+  UNION ALL SELECT '智能音箱', '远场语音 · 家居中枢', 19900, 80, '🔊', '音频'
+  UNION ALL SELECT '运动手表', '血氧 · GPS · 14 天续航', 89900, 25, '⌚', '穿戴'
+  UNION ALL SELECT 'GaN 充电器', '65W 三口快充', 12900, 200, '🔌', '充电'
+  UNION ALL SELECT '桌面收纳架', '铝合金 · 三层', 8900, 120, '🗄️', '收纳'
+  UNION ALL SELECT 'WiFi7 路由', '2.5G 网口 · Mesh', 49900, 40, '📡', '网络'
+  UNION ALL SELECT '四盘位 NAS', '家用私有云 · 转码', 259900, 10, '💾', '网络'
+  UNION ALL SELECT '4K 显示器', '27 寸 · HDR600', 189900, 20, '🖥️', '显示'
+  UNION ALL SELECT '电竞椅', '人体工学 · 4D 扶手', 129900, 15, '🪑', '家具'
+) t WHERE NOT EXISTS (SELECT 1 FROM `__SCHEMA__`.`products`);
+
+-- ---- 管理员账号（不是 SQL，走该实例/租户的 GoTrue）----
+-- curl -X POST {endpoint}/auth/v1/signup -H "apikey: <anon>" \
+--   -H 'Content-Type: application/json' \
+--   -d '{"email":"admin@shop.demo","password":"admin-2026"}'
+-- 多租户时 anon 用该租户的 key（自带 tenant_id claim，无需 X-Tenant-Id）。
+
+-- ---- 验收（应逐条成立）----
+-- 1) anon 读 products → 200 且 10 行；
+-- 2) anon 读 orders   → 200 且 []（无 anon 策略）；
+-- 3) 买家 token 写 orders（buyer_email=自己）→ 201；
+-- 4) 买家 token 写 orders（buyer_email=他人）→ 403 PGRST302；
+-- 5) 买家读 orders → 只见自己；admin@shop.demo 读 orders → 见全量。
+-- 6) 买家读 order_items → 只见自己 buyer_email 的明细；用户 B 读/写用户 A 的订单明细 → 读 0 行 / 写 403 PGRST302。

package/templates/webapp/ssr-shop/frontend/dist/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="refresh" content="0; url=./shop">
+  <title>Supabase Shop · React SSR</title>
+  <style>body{font-family:sans-serif;background:#0b1020;color:#e8eaf2;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0}</style>
+</head>
+<body>
+  <p>进入 <a href="./shop" style="color:#8b9cf7">React SSR 商店</a>…</p>
+</body>
+</html>

package/templates/webapp/vanilla-static/frontend/app.js

@@ -0,0 +1,6 @@
+const button = document.querySelector("#check");
+const status = document.querySelector("#status");
+
+button?.addEventListener("click", () => {
+  if (status) status.textContent = `Page checked at ${new Date().toLocaleTimeString()}`;
+});