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

package/templates/webapp/csr-bff/backend/index.ts

@@ -0,0 +1,168 @@
+// mpa-blog BFF worker (front/back separated).
+//
+//   browser ──./api/*──> THIS worker ──internal DNS──> /rest/v1 + /auth/v1 ──> db / GoTrue
+//
+// The sandbox CANNOT reach the instance's public SUPABASE_URL (egress-filtered), but CAN reach
+// the internal/private DNS entry (pxsp-<id>.pxbaas...:8000 -> 10.x VPC VIP). So the worker proxies
+// browser calls to the internal Kong base. Credential model = JWT PASSTHROUGH: the browser's
+// Authorization header (GoTrue user JWT) is forwarded verbatim so MysqlREST RLS and GoTrue enforce
+// per-user rules server-side. The worker injects only the global `apikey` (anon) for Kong key-auth
+// and NEVER uses service_role, so it gains no privilege beyond the calling user.
+//
+// Static pages/assets are served by the edge-function-proxy static branch (app.json mode=mpa);
+// this worker only handles /api/*.
+
+const CORS: Record<string, string> = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
+  "Access-Control-Allow-Headers": "Content-Type, Authorization, apikey, Prefer, Range, X-Tenant-Id",
+  "Access-Control-Expose-Headers": "Content-Range, Prefer, Location",
+};
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json; charset=utf-8", ...CORS },
+  });
+}
+
+// ─── DEPLOY CONFIG（平台注入优先；缺失则除 /api/health 外一律 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 是公开值；service_role 严禁入 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 not injected: the sandbox image predates MR #30497903; the platform must inject the internal base before this BFF can reach the data plane";
+  if (!ANON_KEY) return "SUPABASE_ANON_KEY not injected: the sandbox image predates MR #30497903; the platform must inject the anon key";
+  return null;
+}
+
+function anonKey(): string {
+  return ANON_KEY;
+}
+
+/** 服务端转发唯一合法通道：内网基址（见上方 DEPLOY CONFIG）。 */
+function internalBase(): string {
+  return INTERNAL_BASE.replace(/\/+$/, "");
+}
+
+/** Extract the segments after the "api" marker, robust to mount/dispatch prefix differences. */
+function apiTail(pathname: string): string[] {
+  // Mount/webapp dispatch hands the worker the candidate-slug-prefixed logical path
+  // (/{app_<uuid>_r_<rev>}/...); strip that first, then locate the "api" marker.
+  const norm = pathname.replace(/^\/app_[^/]+/, "") || pathname;
+  const segs = norm.split("/").filter(Boolean);
+  const i = segs.lastIndexOf("api");
+  if (i >= 0) return segs.slice(i + 1);
+  return segs; // fallback: whole path
+}
+
+async function readBody(req: Request): Promise<BodyInit | null> {
+  if (req.method === "GET" || req.method === "HEAD" || req.method === "OPTIONS") return null;
+  try {
+    return await req.arrayBuffer();
+  } catch {
+    return null;
+  }
+}
+
+/** Forward a request to the internal Kong base, injecting apikey and passing through the user's JWT. */
+async function proxy(req: Request, internalPath: string, search: string): Promise<Response> {
+  const base = internalBase();
+  const url = base + internalPath + (search || "");
+  const anon = anonKey();
+  // /apps/{mount}/api/* runs under TRUSTED_INTERNAL, which strips the browser's
+  // Authorization/Cookie before the worker ever sees them, so plain JWT passthrough
+  // cannot work on that entry. There the proxy validates the per-mount session
+  // cookie and injects the trusted X-App-User-Token instead. Prefer the injected
+  // token, fall back to a passed-through Authorization (/functions entry), then to
+  // anon for public reads.
+  const injected = req.headers.get("x-app-user-token") || "";
+  const incomingAuth = req.headers.get("Authorization") || "";
+  const userAuth = injected || incomingAuth;
+  const authValue = userAuth
+    ? (/^Bearer\s+/i.test(userAuth) ? userAuth : `Bearer ${userAuth}`)
+    : (anon ? `Bearer ${anon}` : "");
+
+  const headers: Record<string, string> = {
+    "apikey": anon,
+    // Forward the caller's JWT (RLS/GoTrue act on it); fall back to anon for public reads.
+    "Authorization": authValue,
+    "Accept": req.headers.get("Accept") || "application/json",
+  };
+  const ct = req.headers.get("Content-Type");
+  if (ct) headers["Content-Type"] = ct;
+  const prefer = req.headers.get("Prefer");
+  if (prefer) headers["Prefer"] = prefer;
+
+  const body = await readBody(req);
+  let upstream: Response;
+  try {
+    upstream = await fetch(url, { method: req.method, headers, body });
+  } catch (e) {
+    const msg = String((e as any)?.message ?? e);
+    return json({ error: "upstream_unreachable", detail: msg, internalBase: base, internalPath }, 502);
+  }
+
+  const respHeaders: Record<string, string> = { ...CORS };
+  const rct = upstream.headers.get("Content-Type");
+  if (rct) respHeaders["Content-Type"] = rct;
+  for (const h of ["Content-Range", "Prefer", "Location"]) {
+    const v = upstream.headers.get(h);
+    if (v) respHeaders[h] = v;
+  }
+  // 204/205/304 are "null body" statuses: constructing a Response with a body throws.
+  // PostgREST returns 204 for DELETE/PATCH without Prefer: return=representation.
+  if (upstream.status === 204 || upstream.status === 205 || upstream.status === 304) {
+    return new Response(null, { status: upstream.status, headers: respHeaders });
+  }
+  const payload = await upstream.arrayBuffer().catch(() => new ArrayBuffer(0));
+  return new Response(payload, { status: upstream.status, headers: respHeaders });
+}
+
+Deno.serve(async (req: Request): Promise<Response> => {
+  if (req.method === "OPTIONS") return new Response(null, { status: 204, headers: CORS });
+
+  const url = new URL(req.url);
+  const tail = apiTail(url.pathname);
+  const head = (tail[0] || "").toLowerCase();
+  const search = url.search || "";
+
+  // ---- worker-local endpoints ----
+  if (head === "health") return json({ ok: true, now: new Date().toISOString(), via: "bff" });
+  const cfgErr = configError();
+  if (cfgErr) return json({ error: "deploy config missing", detail: cfgErr }, 503);
+  if (head === "config") return json({ anon: anonKey(), mode: "bff" });
+  if (head === "me") {
+    // Server-side session check via internal GoTrue, using the caller's JWT.
+    const r = await proxy(req, "/auth/v1/user", "");
+    if (r.status !== 200) return json({ user: null });
+    try {
+      const u = await r.clone().json();
+      return json({ user: u && u.id ? u : null });
+    } catch {
+      return json({ user: null });
+    }
+  }
+
+  // ---- generic authenticated proxies ----
+  // /api/rest/<rest...>  -> internal /rest/v1/<rest...>
+  if (head === "rest") {
+    const sub = tail.slice(1).join("/");
+    return proxy(req, "/rest/v1/" + sub, search);
+  }
+  // /api/auth/<auth...>  -> internal /auth/v1/<auth...>
+  if (head === "auth") {
+    const sub = tail.slice(1).join("/");
+    return proxy(req, "/auth/v1/" + sub, search);
+  }
+
+  return json({ error: "not found", path: url.pathname, tail }, 404);
+});

package/templates/webapp/csr-bff/db/schema.sql

@@ -0,0 +1,69 @@
+-- =============================================================================
+-- multi-page-blog-csr — 数据层（幂等，可重复执行）
+--
+-- 用法：把 __SCHEMA__ 替换为目标库名后逐条执行
+--   · 单租户实例：__SCHEMA__ = public
+--   · 多租户实例：__SCHEMA__ = tenant_<tenant_id>
+--   sed 's/__SCHEMA__/public/g' db/schema.sql
+--
+-- 执行通道：单租户可 pxbaas db query；多租户走 POST {endpoint}/pg/query
+--           （全局 service_role key 作 Authorization+apikey），语句写全限定名。
+--
+-- ⚠️ RLS 元数据落点（写错静默失效＝RLS 关闭）：永远写中心库 supabase._mysqlrest_rls_*，
+--    且 table_schema 填 __SCHEMA__；租户库内同名表无人读取，勿写入。
+-- =============================================================================
+
+CREATE TABLE IF NOT EXISTS `__SCHEMA__`.`posts` (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  title VARCHAR(200) NOT NULL,
+  content MEDIUMTEXT,
+  author_id VARCHAR(64) NOT NULL,
+  author_name VARCHAR(100) DEFAULT '',
+  status VARCHAR(16) DEFAULT 'draft',
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+);
+
+-- ---- RLS 注册 ----
+INSERT IGNORE INTO supabase._mysqlrest_rls_tables (table_schema, table_name, rls_enabled, rls_forced)
+VALUES ('__SCHEMA__','posts',1,0);
+
+-- ---- RLS 策略：anon 只读 published；authenticated 读 published 或本人；写改删限本人 ----
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts','posts_select_anon','anon','SELECT','`status` = ''published''',NULL,1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts','posts_select_auth','authenticated','SELECT',
+        '`status` = ''published'' OR author_id = {{request.jwt.claim.sub}}',NULL,1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts','posts_insert_auth','authenticated','INSERT',NULL,
+        'author_id = {{request.jwt.claim.sub}}',1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts','posts_update_auth','authenticated','UPDATE',
+        'author_id = {{request.jwt.claim.sub}}','author_id = {{request.jwt.claim.sub}}',1);
+INSERT IGNORE INTO supabase._mysqlrest_rls_policies
+  (table_schema, table_name, policy_name, role_name, command, using_expr, check_expr, permissive)
+VALUES ('__SCHEMA__','posts','posts_delete_auth','authenticated','DELETE',
+        'author_id = {{request.jwt.claim.sub}}',NULL,1);
+
+-- ---- 种子文章（3 篇 published，幂等）----
+INSERT INTO `__SCHEMA__`.`posts` (title, content, author_id, author_name, status)
+SELECT * FROM (
+  SELECT '前后端分离的博客长什么样' a,
+         '静态多页 + BFF worker：浏览器只跟自己同源的 ./api/* 说话，worker 再转发到内网 REST/Auth，凭据由平台注入的身份头承载，RLS 在服务端兜底。' b,
+         'demo-author' c, '架构笔记' d, 'published' e
+  UNION ALL SELECT '为什么浏览器不该直连数据库网关',
+         '直连意味着 anon key 与用户 JWT 都暴露在页面里，跨域与凭据边界都变复杂；走同源 BFF 后前端只需相对路径，权限判定全部落在服务端。',
+         'demo-author', '安全', 'published'
+  UNION ALL SELECT 'CSR 与 SSR 的取舍',
+         'CSR 首屏靠 JS 拉数据，利于交互复杂、SEO 要求不高的页面；SSR 首屏即内容，利于分享与收录。两者可共存于同一套数据层与 RLS 策略之上。',
+         'demo-author', '随笔', 'published'
+) t WHERE NOT EXISTS (SELECT 1 FROM `__SCHEMA__`.`posts` WHERE title='前后端分离的博客长什么样');
+
+-- ---- 验收 ----
+-- 1) anon 读 posts → 只见 3 篇 published；
+-- 2) 用户 token 写 posts（author_id=自己）→ 201；伪造他人 author_id → 403 PGRST302；
+-- 3) 用户读 posts → 3 篇 published + 自己的 draft。

package/templates/webapp/csr-bff/frontend/dist/admin.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>MPA Blog — 博主管理</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <nav><a href="./index.html">← 返回广场</a><a href="./profile.html">我的资料</a><span class="spacer"></span><span id="who" class="muted"></span></nav>
+  <div id="gate"></div>
+  <div id="admin" style="display:none">
+    <h1>写文章</h1>
+    <div class="card">
+      <input id="title" placeholder="标题" maxlength="200">
+      <textarea id="content" rows="5" placeholder="正文（text/markdown，渲染时转义）"></textarea>
+      <select id="status"><option value="draft">draft（草稿）</option><option value="published">published（发布）</option></select>
+      <button id="create">创建</button>
+      <div id="msg" class="muted"></div>
+    </div>
+    <h1>我的文章</h1>
+    <div id="list"><div class="muted">加载中…</div></div>
+  </div>
+  <script src="./blog.js"></script>
+  <script>
+    var gate = document.getElementById('gate');
+    var user = null;
+    BLOG.init().then(function () {
+      if (BLOG.isSharedView()) {
+        gate.innerHTML = '<div class="banner">分享只读视图：管理功能已禁用。请通过函数原始 URL 打开本页进行管理。</div>' +
+          '<div class="muted">下面仅展示公开可见文章。</div>';
+        return BLOG.loadPosts().then(renderList);
+      }
+      return BLOG.me().then(function (m) {
+        if (!m.user) { location.replace('./login.html'); return; }
+        user = m.user;
+        document.getElementById('who').textContent = user.email || user.id;
+        document.getElementById('admin').style.display = '';
+        document.getElementById('create').onclick = create;
+        // 管理列表仅展示本人文章（他人已发布文章在首页/分享视图可见，RLS 服务端强制）
+        return BLOG.loadPosts().then(function (rows) {
+          renderList(rows.filter(function (p) { return p.author_id === user.id; }));
+        });
+      });
+    }).catch(function (e) {
+      gate.innerHTML = '<div class="error">初始化失败: ' + BLOG.esc(e) + '</div>';
+    });
+
+    function renderList(rows) {
+      var el = document.getElementById('list');
+      if (!rows.length) { el.innerHTML = '<div class="muted">暂无文章。</div>'; return; }
+      el.innerHTML = rows.map(function (p) {
+        var ops = '';
+        if (user) {
+          ops = '<span>' +
+            (p.status === 'draft'
+              ? '<button class="ghost" data-act="publish" data-id="' + p.id + '">发布</button> '
+              : '<button class="ghost" data-act="unpublish" data-id="' + p.id + '">转草稿</button> ') +
+            '<button class="danger" data-act="delete" data-id="' + p.id + '">删除</button></span>';
+        }
+        return '<div class="card"><div class="row"><h2><a href="./article.html#id=' + encodeURIComponent(p.id) + '">' +
+          BLOG.esc(p.title) + '</a></h2><span class="badge ' + BLOG.esc(p.status) + '">' + BLOG.esc(p.status) + '</span></div>' +
+          '<div class="row muted"><span>#' + BLOG.esc(p.id) + ' · ' + BLOG.esc(BLOG.fmtDate(p.created_at)) + '</span>' + ops + '</div></div>';
+      }).join('');
+      Array.prototype.forEach.call(el.querySelectorAll('button[data-act]'), function (b) {
+        b.onclick = function () { act(b.getAttribute('data-act'), b.getAttribute('data-id')); };
+      });
+    }
+
+    function create() {
+      var msg = document.getElementById('msg');
+      var body = {
+        title: document.getElementById('title').value.trim(),
+        content: document.getElementById('content').value,
+        status: document.getElementById('status').value,
+        author_id: user.id,
+        author_name: BLOG.displayName() || String(user.email || '').split('@')[0] || '匿名博主',
+      };
+      if (!body.title) { msg.className = 'error'; msg.textContent = '标题不能为空'; return; }
+      fetch(BLOG.rest(), { method: 'POST', headers: BLOG.headers(true), body: JSON.stringify(body) })
+        .then(function (r) {
+          if (!r.ok) return r.text().then(function (t) { throw new Error('HTTP ' + r.status + ' ' + t); });
+          msg.className = 'muted'; msg.textContent = '已创建';
+          document.getElementById('title').value = ''; document.getElementById('content').value = '';
+          return BLOG.loadPosts().then(renderList);
+        }).catch(function (e) { msg.className = 'error'; msg.textContent = String(e); });
+    }
+
+    function act(kind, id) {
+      var patch = kind === 'publish' ? { status: 'published' } : kind === 'unpublish' ? { status: 'draft' } : null;
+      var p = patch
+        ? fetch(BLOG.rest() + '?id=eq.' + encodeURIComponent(id), { method: 'PATCH', headers: BLOG.headers(true), body: JSON.stringify(patch) })
+        : fetch(BLOG.rest() + '?id=eq.' + encodeURIComponent(id), { method: 'DELETE', headers: BLOG.headers(true) });
+      p.then(function (r) {
+        if (!r.ok) return r.text().then(function (t) { throw new Error('HTTP ' + r.status + ' ' + t); });
+        return BLOG.loadPosts().then(renderList);
+      }).catch(function (e) { alert('操作失败: ' + e); });
+    }
+  </script>
+</body>
+</html>

package/templates/webapp/csr-bff/frontend/dist/article.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>MPA Blog — 文章详情</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <nav><a href="./index.html">← 返回广场</a><span class="spacer"></span><button id="copylink" class="ghost">复制分享链接</button></nav>
+  <div id="copymsg" class="muted"></div>
+  <div id="view"><div class="muted">加载中…</div></div>
+  <script src="./blog.js"></script>
+  <script>
+    document.getElementById('copylink').onclick = function () {
+      var msg = document.getElementById('copymsg');
+      BLOG.copyText(location.href).then(function (ok) {
+        msg.textContent = ok ? '已复制：' + location.href : '复制失败，请手动复制地址栏：' + location.href;
+        if (!ok) prompt('复制分享链接：', location.href);
+      });
+    };
+    var raw = location.hash.replace(/^#/, '');
+    var id = raw.indexOf('id=') === 0 ? raw.slice(3) : raw;
+    var el = document.getElementById('view');
+    if (!/^\d+$/.test(id)) {
+      el.innerHTML = '<div class="error">缺少文章 ID（正确形式：article.html#id=1）</div>';
+    } else {
+      BLOG.init().then(function () { return BLOG.loadPost(id); }).then(function (p) {
+        if (!p) { el.innerHTML = '<div class="error">文章不存在或不可见（未发布且非作者）。</div>'; return; }
+        if (BLOG.isSharedView() && p.status !== 'published') {
+          el.innerHTML = '<div class="error">该文章尚未发布，分享只读视图不可见。</div>'; return;
+        }
+        el.innerHTML =
+          '<h1>' + BLOG.esc(p.title) + ' <span class="badge ' + BLOG.esc(p.status) + '">' + BLOG.esc(p.status) + '</span></h1>' +
+          '<div class="muted">博主: ' + BLOG.esc(BLOG.authorLabel(p)) + ' · #' + BLOG.esc(p.id) + ' · ' +
+          BLOG.esc(BLOG.fmtDate(p.created_at)) + '</div>' +
+          '<p class="content">' + BLOG.esc(p.content || '') + '</p>';
+      }).catch(function (e) {
+        el.innerHTML = '<div class="error">加载失败: ' + BLOG.esc(e) + '</div>';
+      });
+    }
+  </script>
+</body>
+</html>

package/templates/webapp/csr-bff/frontend/dist/blog.js

@@ -0,0 +1,206 @@
+/* mpa-blog shared client helpers. All page-internal links are relative.
+   前后端分离(BFF)：数据/认证一律走相对 ./api/*，由 sandbox worker 代理到内网
+   /rest/v1 与 /auth/v1；浏览器不再直连 Supabase，也不持有 anon key 之外的凭据。 */
+(function () {
+  var state = { anon: "" };
+
+  function esc(s) {
+    return String(s == null ? "" : s).replace(/[&<>"']/g, function (c) {
+      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
+    });
+  }
+  function token() { return localStorage.getItem("blog_jwt") || ""; }
+  function setToken(t) { localStorage.setItem("blog_jwt", t); }
+  function clearToken() { localStorage.removeItem("blog_jwt"); proxySession("logout", null); }
+  function rest() { return "./api/rest/posts"; }
+  function authBase() { return "./api/auth"; }
+
+  // /apps/{mount}/ 入口下平台会剥离浏览器的 Authorization（TRUSTED_INTERNAL），
+  // BFF 的“JWT 透传”在那里拿不到用户身份；改由 proxy 校验 per-mount 会话 cookie
+  // 后注入可信身份头。故登录/注册成功后顺带建立该 cookie，登出时清除。
+  // 端点不存在时（旧实例或 /functions 入口）静默忽略，保留原有 localStorage 行为。
+  function proxySession(action, body) {
+    try {
+      return fetch("./_session/" + action, {
+        method: "POST",
+        headers: body ? { "Content-Type": "application/json" } : {},
+        body: body ? JSON.stringify(body) : undefined,
+        credentials: "same-origin",
+        keepalive: true,
+      }).catch(function () { return null; });
+    } catch (e) { return Promise.resolve(null); }
+  }
+
+  // 拉取 anon 配置；worker 冷启动（部署后沙箱 resume）期间可能返回非 anon 响应，
+  // 这里有限重试，避免 anon 为空导致后续 REST 请求 401。
+  function fetchConfig(attempt) {
+    return fetch("./api/config")
+      .then(function (r) { return r.json().catch(function () { return {}; }); })
+      .then(function (j) {
+        if (j && j.anon) { state.anon = j.anon; return state.anon; }
+        if (attempt > 0) return delay(2000).then(function () { return fetchConfig(attempt - 1); });
+        return "";
+      })
+      .catch(function () {
+        if (attempt > 0) return delay(2000).then(function () { return fetchConfig(attempt - 1); });
+        return "";
+      });
+  }
+  function delay(ms) { return new Promise(function (res) { setTimeout(res, ms); }); }
+
+  function init() {
+    return fetchConfig(4);
+  }
+
+  function headers(withAuth) {
+    var h = { "apikey": state.anon, "Content-Type": "application/json" };
+    // 分享只读视图必须呈现纯公开(anon)数据：不携带本地登录态，
+    // 否则 authenticated 的「published 或本人草稿」规则会把查看者自己的草稿混入公开视图。
+    if (withAuth && token() && !isSharedView()) h["Authorization"] = "Bearer " + token();
+    return h;
+  }
+
+  function me() {
+    // 会话判定经 BFF worker 代理到内网 GoTrue（./api/auth/user）：worker 转发本请求的
+    // Authorization，由 GoTrue 服务端校验会话，浏览器不再直连 /auth/v1。
+    if (!token()) return Promise.resolve({ user: null });
+    return fetch(authBase() + "/user", {
+      headers: { "apikey": state.anon, "Authorization": "Bearer " + token() },
+    })
+      .then(function (r) {
+        // 本地 token 失效（过期/密钥轮换/跨实例）时立即清除：否则坏 token 会被
+        // headers(true) 继续附到公开 REST 请求上，导致游客视图整体 401。
+        if (!r.ok) { clearToken(); return null; }
+        return r.json();
+      })
+      .then(function (u) { return { user: u && u.id ? u : null }; })
+      .catch(function () { return { user: null }; });
+  }
+
+  // 带登录态读 REST；若服务端拒签本地 token(401)，清除坏 token 并回退纯 anon 重试一次，
+  // 保证公开视图不因陈旧登录态而整体失败（自愈）。
+  function restRead(url) {
+    return fetch(url, { headers: headers(true) }).then(function (r) {
+      if (r.status === 401 && token() && !isSharedView()) {
+        clearToken();
+        return fetch(url, { headers: headers(false) });
+      }
+      return r;
+    });
+  }
+  function restJson(r) {
+    if (!r.ok) throw new Error("REST " + r.status);
+    return r.json();
+  }
+
+  function loadPosts() {
+    return restRead(rest() + "?select=id,title,content,status,author_id,author_name,created_at&order=created_at.desc&limit=200")
+      .then(restJson);
+  }
+
+  function loadPost(id) {
+    return restRead(rest() + "?id=eq." + encodeURIComponent(id) + "&select=id,title,content,status,author_id,author_name,created_at")
+      .then(restJson).then(function (rows) { return rows && rows.length ? rows[0] : null; });
+  }
+
+  // 只看某个博主（author_id）的可见文章；游客视角下 RLS 仅返回其已发布文章。
+  function loadPostsByAuthor(authorId) {
+    return restRead(rest() + "?author_id=eq." + encodeURIComponent(authorId) +
+      "&select=id,title,content,status,author_id,author_name,created_at&order=created_at.desc&limit=200")
+      .then(restJson);
+  }
+
+  // 从一组文章里按 author_id 聚合出博主列表：每个博主取其最新 1~2 篇、署名与总数。
+  // 入参需已按 created_at desc 排序；署名取该博主最近一篇非空 author_name。
+  function groupByAuthor(rows) {
+    var order = [];
+    var map = {};
+    (rows || []).forEach(function (p) {
+      var aid = p.author_id || "";
+      if (!map[aid]) {
+        map[aid] = { author_id: aid, author_name: "", posts: [], count: 0, latest: p.created_at };
+        order.push(aid);
+      }
+      var g = map[aid];
+      g.posts.push(p);
+      g.count += 1;
+      if (!g.author_name && p.author_name) g.author_name = p.author_name;
+    });
+    return order.map(function (aid) { return map[aid]; });
+  }
+
+  function signup(email, password) {
+    return fetch(authBase() + "/signup", {
+      method: "POST", headers: headers(false),
+      body: JSON.stringify({ email: email, password: password }),
+    }).then(function (r) {
+      if (!r.ok) return r;
+      return proxySession("login", { email: email, password: password }).then(function () { return r; });
+    });
+  }
+  function login(email, password) {
+    return fetch(authBase() + "/token?grant_type=password", {
+      method: "POST", headers: headers(false),
+      body: JSON.stringify({ email: email, password: password }),
+    }).then(function (r) {
+      if (!r.ok) return r;
+      return proxySession("login", { email: email, password: password }).then(function () { return r; });
+    });
+  }
+
+  function fmtDate(s) { return s ? String(s).replace("T", " ").slice(0, 19) : ""; }
+  function isSharedView() { return location.pathname.indexOf("/published/") === 0; }
+
+  function meta() { try { return JSON.parse(localStorage.getItem("blog_meta") || "{}"); } catch (e) { return {}; } }
+  function setMeta(m) { localStorage.setItem("blog_meta", JSON.stringify(m || {})); }
+  function displayName() { return meta().display_name || ""; }
+  function authorLabel(p) { return p && p.author_name ? p.author_name : "匿名博主"; }
+  function getProfile() {
+    var h = { "apikey": state.anon };
+    if (token()) h["Authorization"] = "Bearer " + token();
+    return fetch(authBase() + "/user", { headers: h }).then(function (r) {
+      if (!r.ok) throw new Error("HTTP " + r.status);
+      return r.json();
+    });
+  }
+  function updateProfile(data) {
+    var h = { "apikey": state.anon, "Content-Type": "application/json" };
+    if (token()) h["Authorization"] = "Bearer " + token();
+    return fetch(authBase() + "/user", { method: "PUT", headers: h, body: JSON.stringify({ data: data }) })
+      .then(function (r) {
+        if (!r.ok) return r.json().catch(function () { return {}; }).then(function (j) {
+          throw new Error(j.msg || j.error_description || j.error || ("HTTP " + r.status));
+        });
+        return r.json();
+      });
+  }
+  function copyText(t) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      return navigator.clipboard.writeText(t).then(function () { return true; }, function () { return false; });
+    }
+    return Promise.resolve(false);
+  }
+
+  // 把 GoTrue 返回的英文错误映射为中文提示（保留原始文本作为兜底）。
+  function authError(j, status) {
+    var raw = (j && (j.msg || j.error_description || j.error_description || j.error)) || "";
+    if (!raw) return "请求失败（HTTP " + status + "）";
+    var s = String(raw).toLowerCase();
+    if (s.indexOf("invalid login credentials") >= 0 || s.indexOf("invalid credentials") >= 0) return "邮箱或密码错误";
+    if (s.indexOf("email not confirmed") >= 0) return "邮箱未确认，无法登录（该实例通常已开免验证，若出现此提示请联系管理员）";
+    if (s.indexOf("already registered") >= 0 || s.indexOf("already exists") >= 0) return "该邮箱已注册，请直接登录";
+    if (s.indexOf("invalid email") >= 0 || s.indexOf("unable to validate email") >= 0) return "邮箱格式不正确";
+    if (s.indexOf("password") >= 0 && (s.indexOf("character") >= 0 || s.indexOf("short") >= 0)) return "密码长度不足（至少 6 位）";
+    if (s.indexOf("rate limit") >= 0 || s.indexOf("too many") >= 0) return "操作过于频繁，请稍后再试";
+    return raw;
+  }
+
+  window.BLOG = {
+    esc: esc, token: token, setToken: setToken, clearToken: clearToken,
+    rest: rest, init: init, headers: headers, me: me,
+    loadPosts: loadPosts, loadPost: loadPost, loadPostsByAuthor: loadPostsByAuthor, groupByAuthor: groupByAuthor,
+    signup: signup, login: login, fmtDate: fmtDate, isSharedView: isSharedView,
+    meta: meta, setMeta: setMeta, displayName: displayName, authorLabel: authorLabel,
+    getProfile: getProfile, updateProfile: updateProfile, copyText: copyText, authError: authError,
+  };
+})();

package/templates/webapp/csr-bff/frontend/dist/blogger.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>MPA Blog — 博主主页</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+  <nav><a href="./index.html">← 返回广场</a></nav>
+  <div id="banner"></div>
+  <h1 id="title">博主主页</h1>
+  <div class="muted" id="subtitle" style="margin-bottom:8px">加载中…</div>
+  <div id="list"><div class="muted">加载中…</div></div>
+  <script src="./blog.js"></script>
+  <script>
+    var raw = location.hash.replace(/^#/, '');
+    var authorId = raw.indexOf('id=') === 0 ? raw.slice(3) : raw;
+    authorId = decodeURIComponent(authorId || '');
+    var listEl = document.getElementById('list');
+    var subEl = document.getElementById('subtitle');
+
+    if (!authorId) {
+      subEl.textContent = '';
+      listEl.innerHTML = '<div class="error">缺少博主 ID（正确形式：blogger.html#id=&lt;author_id&gt;）</div>';
+    } else {
+      BLOG.init().then(function () {
+        if (BLOG.isSharedView()) {
+          document.getElementById('banner').innerHTML =
+            '<div class="banner">当前为分享只读视图：仅可浏览该博主已发布文章。</div>';
+        }
+        return BLOG.loadPostsByAuthor(authorId);
+      }).then(function (rows) {
+        // 只展示已发布文章（游客视角）；登录博主看自己的草稿仍走管理页。
+        var published = (rows || []).filter(function (p) { return p.status === 'published'; });
+        var name = (published[0] && published[0].author_name) || (rows && rows[0] && rows[0].author_name) || '匿名博主';
+        document.getElementById('title').textContent = '👤 ' + name;
+        subEl.textContent = published.length ? ('共 ' + published.length + ' 篇已发布文章（新→旧）') : '该博主暂无已发布文章。';
+        if (!published.length) { listEl.innerHTML = ''; return; }
+        listEl.innerHTML = published.map(function (p) {
+          return '<div class="card"><div class="row"><h2><a href="./article.html#id=' + encodeURIComponent(p.id) + '">' +
+            BLOG.esc(p.title) + '</a></h2></div>' +
+            '<p class="content">' + BLOG.esc(String(p.content || '').slice(0, 140)) + '</p>' +
+            '<div class="muted">#' + BLOG.esc(p.id) + ' · ' + BLOG.esc(BLOG.fmtDate(p.created_at)) + '</div></div>';
+        }).join('');
+      }).catch(function (e) {
+        subEl.textContent = '';
+        listEl.innerHTML = '<div class="error">加载失败: ' + BLOG.esc(e) + '</div>';
+      });
+    }
+  </script>
+</body>
+</html>