Merge latest dashboard and Turbo setup into dev while preserving workspace features

This reverts commit 8d37fabe58.

AGENTS.md

@@ -11,3 +11,12 @@ This block is written and re-added by `next dev` — verify at `node_modules/nex
 ## 项目维护
 
 - Wiki 和 Studio 共用 `apps/dashboard` 的 Pages Router、登录保护和品牌包。保留已发布的路由、媒体标识和数据库迁移。
+
+## 开发分支与集成
+
+- `dev` 是日常开发成果的集成分支。开始新任务前检查工作区和远程状态，默认从最新 `origin/dev` 创建或复用对应任务分支，避免夹带其他任务的未完成改动。
+- 每项任务完成并通过适当检查后，提交并推送任务分支，再将该任务合并到 `dev` 并推送；用户已持续授权这类向 `dev` 的合并与推送，无需逐次确认。
+- 合并前检查完整差异和待合入提交；保留 `dev` 已有工作，冲突解决后重新执行受影响的检查。不强推或重写共享历史，不擅自删除任务分支。
+- `main` 保持人工集成：未经用户针对本次操作明确授权，不直接推送 `main`，也不代为合并面向 `main` 的 PR。需要发布到主线时，准备 `dev` 到 `main` 的可评审 PR，等待用户手动合并。
+- 当前不使用 CI/CD，不因合并或推送 `dev` 自动恢复旧流水线、远程预览或部署安排。完整构建与运行验证是否执行及其环境，按用户另行授权处理。
+- 交付报告说明任务分支、提交、检查结果以及是否已合并并推送 `dev`；区分 `dev` 集成与 `main` 合并、部署。

README.md

@@ -36,3 +36,9 @@ pnpm start
 迁移阶段所有任务禁用缓存，根命令使用 `--env-mode=loose` 透传既有环境变量，保留品牌资源准备步骤的每次执行。后续启用缓存前，需明确环境变量输入、跨包资源和所有输出。当前不配置 CI/CD，也不自动发布。
 
 仅检查任务计划、不执行编译或生成应用产物时，可运行 `pnpm build --dry=json` 和 `pnpm typecheck --dry=json`。完整构建与运行验证另行执行。
+
+## 开发流程
+
+`dev` 集成已完成的任务。新任务默认从最新 `origin/dev` 创建独立分支，检查完成后提交并推送任务分支，再合并并推送 `dev`。`main` 仍通过 PR 由用户手动合并；推送 `dev` 不代表已发布或部署。当前不使用 CI/CD。
+
+本次同步保留原 `dev` 的双侧栏工作区、画布子集与近期编辑记录、工作区创建和加入 API，以及 `db/018_workspaces.sql` 迁移。已有数据库仍需在应用启动前按“运行”章节执行数据库初始化；合并代码本身不会执行迁移。认证 Cookie 名称继续支持原 `dev` 的 `ACCOUNT_COOKIE_NAME` 与 `AUTH_COOKIE_NAME` 配置，未设置时使用原默认名称。

apps/dashboard/db/018_workspaces.sql

@@ -0,0 +1,22 @@
+BEGIN;
+CREATE TABLE workspaces (
+ id uuid PRIMARY KEY,
+ owner_id uuid NOT NULL REFERENCES account_users(id),
+ name text NOT NULL CHECK (char_length(name) BETWEEN 1 AND 40),
+ purpose text NOT NULL CHECK (purpose IN ('工作与团队','个人创作','学习与研究')),
+ created_at timestamptz NOT NULL DEFAULT now()
+);
+CREATE TABLE workspace_members (
+ workspace_id uuid NOT NULL REFERENCES workspaces(id) ON DELETE CASCADE,
+ user_id uuid NOT NULL REFERENCES account_users(id) ON DELETE CASCADE,
+ PRIMARY KEY (workspace_id, user_id)
+);
+CREATE INDEX workspace_members_user ON workspace_members(user_id);
+CREATE TABLE workspace_invites (
+ digest text PRIMARY KEY,
+ workspace_id uuid NOT NULL REFERENCES workspaces(id) ON DELETE CASCADE,
+ expires_at timestamptz NOT NULL
+);
+CREATE INDEX workspace_invites_workspace ON workspace_invites(workspace_id);
+INSERT INTO schema_migrations(version) VALUES ('018_workspaces');
+COMMIT;

apps/dashboard/fixtures/studio/autumn-journal.json

@@ -0,0 +1,163 @@
+{
+  "schemaVersion": 2,
+  "name": "把秋天装进一页 · 银杏观察手记",
+  "document": {
+    "version": 1,
+    "brief": {
+      "topic": "银杏与秋日观察手记",
+      "audience": "喜欢日常摄影与视觉手帐的小红书读者",
+      "intent": "以封面、观察方法和行动结尾组成三页可发布图文",
+      "designIntent": "奶油纸底、森林墨色、银杏金点缀；宋体大标题与克制的无衬线正文；所有页面保留相同页边距和节奏",
+      "imageStrategy": "生成一幅原创银杏静物插画作为系列母图；每页复用素材，保留裁切配置，不把正文烘焙进图片"
+    },
+    "style": {
+      "version": "autumn-journal/1",
+      "palette": {
+        "paper": "#F3EFE5",
+        "ink": "#253C32",
+        "muted": "#718074",
+        "accent": "#C3A050"
+      },
+      "typography": {
+        "title": {
+          "fontFamily": "serif",
+          "fontSize": 8.4,
+          "fontWeight": 600,
+          "lineHeight": 1.15,
+          "letterSpacing": 0
+        },
+        "body": {
+          "fontFamily": "sans",
+          "fontSize": 3.1,
+          "fontWeight": 400,
+          "lineHeight": 1.65,
+          "letterSpacing": 0
+        },
+        "caption": {
+          "fontFamily": "sans",
+          "fontSize": 1.7,
+          "fontWeight": 500,
+          "lineHeight": 1.2,
+          "letterSpacing": 0
+        }
+      },
+      "spacing": {
+        "margin": 10,
+        "gap": 4
+      }
+    },
+    "sources": [],
+    "pages": [
+      {
+        "key": "cover",
+        "role": "cover",
+        "layoutId": "standard-01",
+        "intent": "用银杏静物与两行大标题建立主题",
+        "bindings": {
+          "T01": "title",
+          "T02": "body",
+          "T03": "caption"
+        },
+        "parameters": {
+          "texts": {
+            "T01": {
+              "value": "把秋天\n装进一页"
+            },
+            "T02": {
+              "value": "不必走很远。\n一片银杏，就是今天的风景。"
+            },
+            "T03": {
+              "value": "SEASONAL NOTES / 01"
+            }
+          },
+          "images": {
+            "I01": {
+              "fit": "cover",
+              "cropX": 50,
+              "cropY": 50,
+              "zoom": 1
+            }
+          },
+          "decorations": {}
+        }
+      },
+      {
+        "key": "observe",
+        "role": "body",
+        "layoutId": "standard-01",
+        "intent": "用三个观察动作提供可实践的方法",
+        "bindings": {
+          "T01": "title",
+          "T02": "body",
+          "T03": "caption"
+        },
+        "parameters": {
+          "texts": {
+            "T01": {
+              "value": "先看见\n再记录"
+            },
+            "T02": {
+              "value": "看叶脉，看光落下的方向。\n留住一片金黄，也留出一半空白。\n把感受写成短句，画面就有了呼吸。"
+            },
+            "T03": {
+              "value": "FIELD NOTES / 02"
+            }
+          },
+          "images": {
+            "I01": {
+              "fit": "cover",
+              "cropX": 65,
+              "cropY": 40,
+              "zoom": 1.25
+            }
+          },
+          "decorations": {}
+        }
+      },
+      {
+        "key": "ending",
+        "role": "ending",
+        "layoutId": "standard-01",
+        "intent": "以轻量行动和提问收尾",
+        "bindings": {
+          "T01": "title",
+          "T02": "body",
+          "T03": "caption"
+        },
+        "parameters": {
+          "texts": {
+            "T01": {
+              "value": "留一点白\n给下一次",
+              "align": "middle"
+            },
+            "T02": {
+              "value": "今天，捡起一片叶子。\n用三个词记录它的颜色、纹理与心情。\n你的秋天，会从哪一页开始？",
+              "align": "middle"
+            },
+            "T03": {
+              "value": "YOUR TURN / 03"
+            }
+          },
+          "images": {
+            "I01": {
+              "fit": "cover",
+              "cropX": 65,
+              "cropY": 50,
+              "zoom": 1
+            }
+          },
+          "decorations": {},
+          "layers": {
+            "I01": {
+              "x": 40,
+              "y": 55,
+              "width": 40,
+              "height": 40,
+              "radius": 20
+            }
+          }
+        }
+      }
+    ]
+  }
+}

apps/dashboard/src/components/Brand.tsx

@@ -1,4 +1,4 @@
 /** The approved mark is copied from @endoleap/brand during the remote build. */
-export function Brand({ compact = false }: { compact?: boolean }) {
-  return <span className="endoleap-brand"><img src="/brand/logo-light.svg" className="endoleap-mark endoleap-mark-light" alt="" width={32} height={32}/><img src="/brand/logo-dark.svg" className="endoleap-mark endoleap-mark-dark" alt="" width={32} height={32}/><span className="endoleap-wordmark">啡跃{!compact && <small>Endoleap</small>}</span></span>;
+export function Brand({ compact = false, markOnly = false }: { compact?: boolean; markOnly?: boolean }) {
+  return <span className="endoleap-brand"><img src="/brand/logo-light.svg" className="endoleap-mark endoleap-mark-light" alt="" width={32} height={32}/><img src="/brand/logo-dark.svg" className="endoleap-mark endoleap-mark-dark" alt="" width={32} height={32}/>{!markOnly && <span className="endoleap-wordmark">啡跃{!compact && <small>Endoleap</small>}</span>}</span>;
 }

apps/dashboard/src/components/WorkspaceShell.tsx

@@ -0,0 +1,366 @@
+import Head from 'next/head';
+import {useEffect, useRef, useState, type ReactNode} from 'react';
+import {ArrowLeft, ArrowUpRight, BookOpen, Bot, Check, ChevronDown, ChevronRight, Layers, LogOut, User, House, LayoutGrid, Palette, PanelLeft, Plus, Search, Settings, Sparkles, Workflow, X} from 'lucide-react';
+import {Brand} from './Brand';
+import {ThemeToggle} from './ThemeToggle';
+import {parseCanvasDocument, type CanvasNode} from '@/lib/canvas-document';
+import s from '@/styles/workspace.module.css';
+
+const tools = [
+  {label: '无限画布', detail: '收集灵感，连接文字与参考素材', href: '/infinite_canvas', icon: Workflow},
+  {label: '图形设计', detail: '编辑文字、图像与版式', href: '/graphic', icon: Palette},
+  {label: '知识与教程', detail: '查找指南和创作方法', href: '/documents', icon: BookOpen},
+  {label: 'Agent 接入', detail: '了解如何连接创作工具与 API', href: '/studio/api', icon: Bot},
+];
+const purposes = [
+  {label: '工作与团队', detail: '整理项目和工作资料。', icon: LayoutGrid},
+  {label: '个人创作', detail: '收集灵感，让想法成形。', icon: House},
+  {label: '学习与研究', detail: '梳理资料，记录研究过程。', icon: BookOpen},
+];
+type Space = {id?: string; name: string; purpose: string; owner?: boolean};
+const spaceKey = (space: Space) => space.id ?? space.name;
+export type Subcanvas = {id: string; name: string; nodes: string[]; editedAt?: string};
+const personal = {name: '个人空间', purpose: ''};
+
+type WorkspaceShellProps = {
+  editor?: (subset: Subcanvas | undefined) => ReactNode;
+  liveNodes?: CanvasNode[];
+};
+
+export function WorkspaceShell({editor, liveNodes}: WorkspaceShellProps) {
+  const [email, setEmail] = useState('');
+  const [state, setState] = useState('loading');
+  const [sidebar, setSidebar] = useState(true);
+  const [spaces, setSpaces] = useState<Space[]>([]);
+  const [active, setActive] = useState(personal);
+  const [query, setQuery] = useState('');
+  const [step, setStep] = useState<'choice' | 'join' | 'purpose' | 'name' | 'invite'>('choice');
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [purpose, setPurpose] = useState('');
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
+  const [savedNodes, setNodes] = useState<CanvasNode[]>([]);
+  const nodes = liveNodes ?? savedNodes;
+  const [subcanvases, setSubcanvases] = useState<Subcanvas[]>([]);
+  const [selectedCanvas, setSelectedCanvas] = useState(editor ? '' : 'history');
+  const [draftEditedAt, setDraftEditedAt] = useState<string>();
+  const [expanded, setExpanded] = useState(true);
+  const [subsetName, setSubsetName] = useState('');
+  const [subsetNodes, setSubsetNodes] = useState<string[]>([]);
+  const subsetDialog = useRef<HTMLDialogElement>(null);
+  const dialog = useRef<HTMLDialogElement>(null);
+  const switcher = useRef<HTMLDetailsElement>(null);
+  const search = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setSidebar(window.matchMedia('(min-width: 761px)').matches);
+    const request = new AbortController();
+    fetch('/api/account/session', {signal: request.signal}).then(async response => {
+      if (!response.ok) throw Error();
+      const data = await response.json();
+      if (!data.user) {
+        if (editor) setState('ready');
+        else window.location.replace('/account?next=/workspace');
+        return;
+      }
+      setEmail(data.user.email);
+      let local: Space[] = [];
+      let activeKey = '';
+      try {
+        const saved = JSON.parse(localStorage.getItem('studio.workspace:' + data.user.email) || 'null');
+        if (Array.isArray(saved?.spaces)) local = saved.spaces.filter((space: Space) => !space.id);
+        activeKey = saved?.active || '';
+      } catch {}
+      let shared: Space[] = [];
+      try {
+        const response = await fetch('/api/account/workspaces', {signal: request.signal});
+        if (response.ok) shared = (await response.json()).spaces;
+      } catch {}
+      if (request.signal.aborted) return;
+      const available = [...local, ...shared];
+      setSpaces(available);
+      setActive(available.find(space => spaceKey(space) === activeKey) || personal);
+      setState('ready');
+    }).catch(() => {
+      if (!request.signal.aborted) setState('error');
+    });
+    return () => request.abort();
+  }, []);
+
+  useEffect(() => {
+    if (!notice) return;
+    const timeout = window.setTimeout(() => setNotice(''), 4500);
+    return () => window.clearTimeout(timeout);
+  }, [notice]);
+
+  function selectSpace(space: Space, next = spaces) {
+    localStorage.setItem('studio.workspace:' + email, JSON.stringify({spaces: next, active: spaceKey(space)}));
+    setSpaces(next);
+    setActive(space);
+    switcher.current?.removeAttribute('open');
+  }
+
+  const subsetKey = 'studio.subcanvases:' + email + ':' + spaceKey(active);
+  useEffect(() => {
+    if (!email) return;
+    setSelectedCanvas(editor ? '' : 'history');
+    setQuery('');
+    try {
+      const draft = localStorage.getItem('studio.infinite-canvas.v1');
+      setDraftEditedAt(localStorage.getItem('studio.infinite-canvas.v1.editedAt') || undefined);
+      setNodes(draft ? parseCanvasDocument(draft).cards : []);
+    } catch {
+      setNodes([]);
+    }
+    try {
+      const saved = JSON.parse(localStorage.getItem(subsetKey) || '[]');
+      const list: Subcanvas[] = Array.isArray(saved) ? saved : [];
+      setSubcanvases(list);
+      if (editor) {
+        const id = new URLSearchParams(window.location.search).get('subset');
+        if (list.some(item => item.id === id)) setSelectedCanvas(id!);
+      }
+    } catch {
+      setSubcanvases([]);
+    }
+  }, [email, subsetKey]);
+
+  function openSubsetDialog(edit?: Subcanvas) {
+    setError('');
+    setSubsetName(edit?.name ?? '');
+    setSubsetNodes(edit?.nodes ?? []);
+    subsetDialog.current?.showModal();
+  }
+
+  function saveSubset(event: React.FormEvent) {
+    event.preventDefault();
+    const name = subsetName.trim();
+    if (!name || !subsetNodes.length) return setError('请输入名称并选择至少一个节点。');
+    const id = selectedCanvas || window.crypto?.randomUUID?.() || String(Date.now());
+    const subset = {id, name, nodes: subsetNodes, editedAt: new Date().toISOString()};
+    const next = [...subcanvases.filter(item => item.id !== id), subset];
+    try {
+      localStorage.setItem(subsetKey, JSON.stringify(next));
+      setSubcanvases(next);
+      setSelectedCanvas(id);
+      setExpanded(true);
+      subsetDialog.current?.close();
+    } catch {
+      setError('浏览器无法保存子画布。');
+    }
+  }
+
+  async function signOut() {
+    try {
+      const response = await fetch('/api/account/logout', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: '{}'});
+      if (!response.ok) throw Error();
+      window.location.assign('/account?next=/workspace');
+    } catch {
+      setNotice('暂时无法退出登录，请重试。');
+    }
+  }
+
+  function openDialog() {
+    setStep('choice');
+    setCode('');
+    setPurpose('');
+    setName('');
+    setError('');
+    dialog.current?.showModal();
+  }
+
+  async function workspaceRequest(payload: object) {
+    const response = await fetch('/api/account/workspaces', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)});
+    const result = await response.json();
+    if (!response.ok) throw new Error(result.error || '空间操作失败');
+    return result;
+  }
+
+  async function submitWorkspace(event: React.FormEvent) {
+    event.preventDefault();
+    if (busy) return;
+    const clean = name.trim();
+    if (step === 'name' && !clean) return setError('请填写 Workspace 名称。');
+    if (step === 'join' && !code.trim()) return setError('请输入邀请码。');
+    setBusy(true);
+    setError('');
+    try {
+      const {space} = await workspaceRequest(step === 'join' ? {action:'join', code:code.trim()} : {action:'create', name:clean, purpose});
+      selectSpace(space, [...spaces.filter(item => spaceKey(item) !== spaceKey(space)), space]);
+      dialog.current?.close();
+      setNotice((step === 'join' ? '已加入' : '已创建') + '「' + space.name + '」');
+    } catch (error) {
+      setError(error instanceof Error ? error.message : '空间操作失败');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function inviteMember() {
+    if (busy || !active.id) return;
+    switcher.current?.removeAttribute('open');
+    setCode('');
+    setError('');
+    setStep('invite');
+    dialog.current?.showModal();
+    setBusy(true);
+    try {
+      const result = await workspaceRequest({action:'invite', workspaceId:active.id});
+      setCode(result.code);
+    } catch (error) {
+      setError(error instanceof Error ? error.message : '无法生成邀请码');
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const subset = subcanvases.find(item => item.id === selectedCanvas);
+  const visibleNodes = subset ? nodes.filter(node => subset.nodes.includes(node.id)) : nodes;
+  const visibleSubsets = subcanvases.filter(item => item.name.toLowerCase().includes(query.trim().toLowerCase()));
+  const canvasName = '无限画布';
+  const showHistory = selectedCanvas === 'history';
+  const dates = new Intl.DateTimeFormat('zh-CN', {year: 'numeric', month: 'long', day: 'numeric'});
+  const times = new Intl.DateTimeFormat('zh-CN', {hour: '2-digit', minute: '2-digit', hour12: false});
+  const entries = [
+    ...(nodes.length || draftEditedAt ? [{id: '', name: canvasName, editedAt: draftEditedAt, summary: nodes[0]?.text || nodes[0]?.title || '本机草稿'}] : []),
+    ...subcanvases.map(item => ({...item, summary: nodes.find(node => item.nodes.includes(node.id))?.text || '子画布'})),
+  ].filter(item => item.name.toLowerCase().includes(query.trim().toLowerCase()));
+  entries.sort((a, b) => (b.editedAt ?? '').localeCompare(a.editedAt ?? ''));
+  const history = new Map<string, typeof entries>();
+  for (const entry of entries) {
+    const day = entry.editedAt && Number.isFinite(Date.parse(entry.editedAt)) ? dates.format(new Date(entry.editedAt)) : '编辑时间未记录';
+    const group = history.get(day) ?? [];
+    group.push(entry);
+    history.set(day, group);
+  }
+  return <div className={s.app}>
+    {!editor && <Head><title>工作台 · 啡跃</title></Head>}
+    <nav className={s.rail} aria-label="全局导航">
+      <a className={s.logo} href="/" aria-label="啡跃首页"><Brand markOnly/></a>
+      <button type="button" aria-label="切换工作台导航" title="切换工作台导航" aria-current="page" aria-expanded={sidebar} onClick={() => setSidebar(!sidebar)}><LayoutGrid size={18}/></button>
+      <a href="/infinite_canvas" aria-label="无限画布" title="无限画布"><Workflow size={18}/></a>
+      <button type="button" aria-label="搜索画布" title="搜索画布" disabled={state !== 'ready'} onClick={() => {setSidebar(true); requestAnimationFrame(() => search.current?.focus());}}><Search size={18}/></button>
+      <a href="/graphic" aria-label="图形设计" title="图形设计"><Palette size={18}/></a>
+      <a href="/studio/api" aria-label="Agent 接入" title="Agent 接入"><Bot size={18}/></a>
+      <a className={s.settings} href="/account" aria-label="账户设置" title="账户设置"><Settings size={18}/></a>
+    </nav>
+    {sidebar && <aside className={s.panel} id="workspace-navigation">
+      <div className={s.identity}>
+        <details ref={switcher} className={s.switcher}>
+          <summary><span className={s.avatar}>{Array.from(active.name)[0]}</span><strong>{active.name}</strong><ChevronDown size={14}/></summary>
+          {state === 'ready' && <div className={s.menu}>
+            <div className={s.menuIdentity}><span className={s.avatar}>{Array.from(active.name)[0]}</span><div><strong>{active.name}</strong><small>{active.id ? '当前空间 · 共享空间' : '当前空间 · 保存在此浏览器'}</small></div></div>
+            {email && <div className={s.menuSection}>
+              {active.owner && <button type="button" onClick={() => void inviteMember()}><Plus size={16}/>邀请成员</button>}<small>{email}</small>
+              {[personal, ...spaces].map(space => <button type="button" key={spaceKey(space)} aria-pressed={spaceKey(space) === spaceKey(active)} onClick={() => {
+                try { selectSpace(space); } catch { setNotice('浏览器无法保存空间切换。'); }
+              }}><span className={s.avatar}>{Array.from(space.name)[0]}</span><span>{space.name}</span>{spaceKey(space) === spaceKey(active) && <Check size={16}/>}</button>)}
+              <button className={s.menuAdd} type="button" onClick={() => {switcher.current?.removeAttribute('open'); openDialog();}}><Plus size={16}/>添加 Workspace</button>
+            </div>}
+            <div className={s.menuSection}><a href="/account"><User size={16}/>账户管理</a>{email && <button type="button" onClick={() => void signOut()}><LogOut size={16}/>退出登录</button>}</div>
+          </div>}
+        </details>
+        <a className={s.avatar} href="/account" aria-label="账户设置" title={email || '账户设置'}>{email ? email.charAt(0).toUpperCase() : <Settings size={15}/>}</a>
+      </div>
+      <div className={s.panelTitle}><strong>画布</strong><button type="button" disabled={!email || !nodes.length} onClick={() => {setSelectedCanvas(''); openSubsetDialog();}} aria-label="新建子画布" title="新建子画布"><Plus size={18}/></button></div>
+      <label className={s.search}><Search size={16}/><input ref={search} type="search" value={query} onChange={e => setQuery(e.target.value)} placeholder="搜索画布…" aria-label="搜索画布名称"/></label>
+      {state === 'ready' && <nav className={s.links} aria-label="画布树">
+        <button className={s.historyLink} type="button" aria-current={showHistory ? 'page' : undefined} onClick={() => editor ? window.location.assign('/workspace') : setSelectedCanvas('history')}>编辑历史</button>
+        <p>本机画布</p>
+        <div className={s.treeRoot}>
+          <button type="button" aria-label="展开或折叠子画布" aria-expanded={expanded || !!query} disabled={!!query} onClick={() => setExpanded(!expanded)}>{expanded || query ? <ChevronDown size={15}/> : <ChevronRight size={15}/>}</button>
+          <button type="button" aria-current={!subset && !showHistory ? 'page' : undefined} onClick={() => setSelectedCanvas('')}><Layers size={16}/>{canvasName}</button>
+        </div>
+        {(expanded || query) && <ul className={s.children}>{visibleSubsets.map(item => <li key={item.id}><button type="button" aria-current={item.id === selectedCanvas ? 'page' : undefined} onClick={() => setSelectedCanvas(item.id)}><LayoutGrid size={15}/>{item.name}</button></li>)}</ul>}
+        {query && !visibleSubsets.length && !canvasName.includes(query.trim()) && <p role="status">没有匹配的画布。</p>}
+      </nav>}
+      <small className={s.local}>空间设置保存在此浏览器</small>
+    </aside>}
+    <main className={editor ? s.editorMain : s.main}>
+      {editor ? <>
+        <button className={s.editorToggle} type="button" aria-label="切换画布树" aria-expanded={sidebar} onClick={() => setSidebar(!sidebar)}><PanelLeft size={18}/></button>
+        {editor(subset)}
+      </> : <>
+      <header className={s.top}>
+        <div><button type="button" title="切换导航栏" aria-label="切换导航栏" aria-expanded={sidebar} aria-controls={sidebar ? 'workspace-navigation' : undefined} onClick={() => setSidebar(!sidebar)}><PanelLeft size={18}/></button><span>{active.name} / {showHistory ? '编辑历史' : subset?.name ?? canvasName}</span></div>
+        <ThemeToggle/>
+      </header>
+      {state === 'loading' ? <p className={s.status} role="status">正在打开工作台…</p> : state === 'error' ? <p className={s.status} role="alert">暂时无法读取账户。 <a href="/account?next=/workspace">重新登录</a></p> :
+        showHistory ? <section className={s.history} aria-labelledby="history-heading">
+          <header><div><h1 id="history-heading">编辑历史</h1><p>按最近编辑日期排列</p></div><a className={s.primary} href="/infinite_canvas">打开画布 <ArrowUpRight size={16}/></a></header>
+          {Array.from(history, ([day, items]) => <section className={s.historyGroup} key={day}>
+            <h2>{day} · {items.length}</h2>
+            <ul>{items.map(item => <li key={item.id}><button type="button" onClick={() => setSelectedCanvas(item.id)}>
+              {item.id ? <LayoutGrid size={18}/> : <Layers size={18}/>}
+              <span className={s.historyItem}><strong>{item.name}</strong><small>{item.summary}</small></span>
+              {item.editedAt && Number.isFinite(Date.parse(item.editedAt)) && <time dateTime={item.editedAt}>{times.format(new Date(item.editedAt))}</time>}
+              <ChevronRight size={16}/>
+            </button></li>)}</ul>
+          </section>)}
+          {!entries.length && <p className={s.historyEmpty}>{query ? '没有匹配的画布。' : '还没有编辑记录。打开画布开始创作，保存后就会出现在这里。'}</p>}
+        </section> : <div className={s.content}>
+          <section className={s.intro}>
+            <Layers size={20}/>
+            <h1>{subset?.name ?? canvasName}</h1>
+            <p>{subset ? `子画布 · ${visibleNodes.length} 个节点 · 属于无限画布` : `${active.name} · ${nodes.length} 个节点`}</p>
+            {subset ? <><button className={s.primary} type="button" onClick={() => openSubsetDialog(subset)}>编辑子画布</button><a className={s.openSubset} href={'/infinite_canvas?subset=' + encodeURIComponent(subset.id)}>在编辑器打开 <ArrowUpRight size={16}/></a></> : <a className={s.primary} href="/infinite_canvas">打开画布 <ArrowUpRight size={16}/></a>}
+          </section>
+          <section aria-labelledby="workspace-nodes">
+            <h2 id="workspace-nodes">画布内容</h2>
+            {visibleNodes.length ? <div className={s.tools}>{visibleNodes.map(node => <article className={s.node} key={node.id}><strong>{node.title || '未命名节点'}</strong>{node.image && <img src={node.image} alt=""/>}{node.text && <p>{node.text}</p>}</article>)}</div> : <p>{subset ? '原画布中已没有这些节点。' : '画布还是空的。添加节点后，就可以在这里创建子画布。'}</p>}
+          </section>
+          <nav className={s.shortcuts} aria-label="其他创作工具">{tools.slice(1).map(({label, href}) => <a key={href} href={href}>{label} <ArrowUpRight size={14}/></a>)}</nav>
+        </div>}
+      </>}
+    </main>
+    <dialog className={s.dialog} ref={subsetDialog} aria-labelledby="subcanvas-title">
+      <div className={s.dialogTop}><h2 id="subcanvas-title">{subset ? '编辑子画布' : '新建子画布'}</h2><button type="button" aria-label="关闭" onClick={() => subsetDialog.current?.close()}><X size={20}/></button></div>
+      <form onSubmit={saveSubset}>
+        <p>从无限画布选择节点。原画布会保留这些节点。</p>
+        <label htmlFor="subcanvas-name">子画布名称</label>
+        <input id="subcanvas-name" value={subsetName} maxLength={40} onChange={event => setSubsetName(event.target.value)}/>
+        <fieldset className={s.members}><legend>包含的节点</legend>{nodes.map(node => <label key={node.id}><input type="checkbox" checked={subsetNodes.includes(node.id)} onChange={event => setSubsetNodes(event.target.checked ? [...subsetNodes, node.id] : subsetNodes.filter(id => id !== node.id))}/>{node.title || '未命名节点'}</label>)}</fieldset>
+        {error && <p className={s.error} role="alert">{error}</p>}
+        <button className={s.primary} type="submit">保存子画布</button>
+      </form>
+    </dialog>
+    <dialog className={s.dialog} ref={dialog} aria-labelledby="workspace-dialog-title">
+      <div className={s.dialogTop}>
+        {step !== 'choice' && step !== 'invite' && <button type="button" aria-label="返回上一步" onClick={() => {setError(''); setStep(step === 'name' ? 'purpose' : 'choice');}}><ArrowLeft size={20}/></button>}
+        <h2 id="workspace-dialog-title">{{choice:'建立一个创作空间',join:'加入 Workspace',purpose:'这个空间用来做什么？',name:'给你的 Workspace 命名',invite:'邀请成员'}[step]}</h2>
+        <button type="button" aria-label="关闭" onClick={() => dialog.current?.close()}><X size={20}/></button>
+      </div>
+      {step === 'choice' ? <>
+        <p>加入已有空间，或创建自己的 Workspace。</p>
+        <div className={s.options}>
+          <button type="button" onClick={() => setStep('join')}><User size={22}/><span><strong>加入已有空间</strong><small>使用空间所有者提供的邀请码</small></span></button>
+          <button type="button" onClick={() => setStep('purpose')}><Plus size={22}/><span><strong>创建 Workspace</strong><small>为新项目建立一个空间</small></span></button>
+        </div>
+      </> : step === 'join' ? <form onSubmit={submitWorkspace}>
+        <label htmlFor="workspace-invite">邀请码</label>
+        <input id="workspace-invite" value={code} maxLength={80} onChange={event => setCode(event.target.value)}/>
+        {error && <p className={s.error} role="alert">{error}</p>}
+        <button className={s.primary} type="submit" disabled={busy}>加入 Workspace</button>
+      </form> : step === 'invite' ? <>
+        <p>邀请码有效期为 24 小时。把它交给要加入的成员。</p>
+        {busy && <p role="status">正在生成邀请码…</p>}
+        {error && <p className={s.error} role="alert">{error}</p>}
+        {code && <input aria-label="邀请码" readOnly value={code} onFocus={event => event.target.select()}/>}
+      </> : step === 'purpose' ? <>
+        <p>选择一个起点。</p>
+        <div className={s.options}>{purposes.map(({label, detail, icon: Icon}) => <button key={label} type="button" aria-pressed={purpose === label} onClick={() => setPurpose(label)}><Icon size={23}/><span><strong>{label}</strong><small>{detail}</small></span></button>)}</div>
+        <button className={s.primary} type="button" disabled={!purpose} onClick={() => setStep('name')}>继续 <ArrowUpRight size={16}/></button>
+      </> : <form onSubmit={submitWorkspace}>
+        <p>{purpose} · 一个空间，装下你的想法与作品。</p>
+        <div className={s.iconPreview}><span className={s.avatar}>{Array.from(name.trim())[0] || '空'}</span>空间图标</div>
+        <label htmlFor="workspace-name">Workspace 名称</label>
+        <input id="workspace-name" autoFocus value={name} maxLength={40} onChange={e => {setName(e.target.value); setError('');}} aria-invalid={!!error} aria-describedby={error ? 'workspace-error' : undefined} placeholder="输入空间名称"/>
+        {error && <p id="workspace-error" role="alert" className={s.error}>{error}</p>}
+        <button className={s.primary} type="submit" disabled={busy}>创建 Workspace <ArrowUpRight size={16}/></button>
+      </form>}
+    </dialog>
+    {notice && <div role="status" className={s.notice}>{notice}</div>}
+  </div>;
+}

apps/dashboard/src/lib/account-crypto.ts

@@ -1,7 +1,8 @@
 import { randomBytes, scrypt as derive, timingSafeEqual, createHash } from 'node:crypto';
 import { promisify } from 'node:util';
 const scrypt = promisify(derive);
-export const ACCOUNT_COOKIE = 'wiki_account';
+export const ACCOUNT_COOKIE = process.env.ACCOUNT_COOKIE_NAME || 'wiki_account';
+if (!/^[A-Za-z0-9_-]{1,64}$/.test(ACCOUNT_COOKIE)) throw Error('Invalid ACCOUNT_COOKIE_NAME');
 export const SESSION_TTL = 7 * 86400;
 export function normalizeEmail(value: unknown) {
  if (typeof value !== 'string') return null;

apps/dashboard/src/lib/auth.ts

@@ -1,7 +1,8 @@
 import { createHash, createHmac, randomBytes, timingSafeEqual } from 'node:crypto';
 import { readFileSync } from 'node:fs';
 
-export const SESSION_COOKIE = 'prompt_session';
+export const SESSION_COOKIE = process.env.AUTH_COOKIE_NAME || 'prompt_session';
+if (!/^[A-Za-z0-9_-]{1,64}$/.test(SESSION_COOKIE)) throw Error('Invalid AUTH_COOKIE_NAME');
 export const SESSION_SECONDS = 7 * 24 * 60 * 60;
 export type AuthConfig = { secret: string; jwtKey: string };
 export function authConfig(): AuthConfig | null {

apps/dashboard/src/pages/api/account/workspaces.ts

@@ -0,0 +1,69 @@
+import {randomUUID} from 'node:crypto';
+import type {NextApiRequest, NextApiResponse} from 'next';
+import {currentAccount} from '@/lib/account';
+import {newToken, tokenDigest, trustedOrigin} from '@/lib/account-crypto';
+import {db} from '@/lib/db';
+
+const purposes = new Set(['工作与团队', '个人创作', '学习与研究']);
+
+export default async function workspaces(req: NextApiRequest, res: NextApiResponse) {
+  res.setHeader('Cache-Control', 'private, no-store');
+  if (req.method !== 'GET' && req.method !== 'POST') {
+    res.setHeader('Allow', 'GET, POST');
+    return res.status(405).end();
+  }
+  const headers = new Headers(Object.entries(req.headers).filter(([, value]) => typeof value === 'string') as [string, string][]);
+  try {
+    const origin = process.env.ACCOUNT_PUBLIC_ORIGIN || 'http://' + req.headers.host;
+    const request = new Request(new URL('/api/account/workspaces', origin), {headers});
+    if (req.method === 'POST' && !trustedOrigin(request)) return res.status(403).json({error: '请求来源不受信任'});
+    const user = await currentAccount(request);
+    if (!user) return res.status(401).json({error: '请先登录邮箱账户'});
+    const pool = db();
+    if (req.method === 'GET') {
+      const result = await pool.query(
+        `SELECT w.id, w.name, w.purpose, w.owner_id = $1 AS owner
+           FROM workspaces w JOIN workspace_members m ON m.workspace_id = w.id
+          WHERE m.user_id = $1 ORDER BY w.created_at, w.id`, [user.id]);
+      return res.json({spaces: result.rows});
+    }
+    const {action, name, purpose, code, workspaceId} = req.body ?? {};
+    if (action === 'create') {
+      const clean = typeof name === 'string' ? name.trim() : '';
+      if (!clean || clean.length > 40 || !purposes.has(purpose)) return res.status(400).json({error: '请输入有效的空间名称并选择用途'});
+      const id = randomUUID();
+      await pool.query(
+        `WITH created AS (INSERT INTO workspaces(id,owner_id,name,purpose) VALUES($1,$2,$3,$4) RETURNING id)
+         INSERT INTO workspace_members(workspace_id,user_id) SELECT id,$2 FROM created`,
+        [id, user.id, clean, purpose]);
+      return res.status(201).json({space: {id, name: clean, purpose, owner: true}});
+    }
+    if (action === 'invite') {
+      if (typeof workspaceId !== 'string' || !/^[0-9a-f]{8}-(?:[0-9a-f]{4}-){3}[0-9a-f]{12}$/i.test(workspaceId)) return res.status(400).json({error: '无效的空间'});
+      const token = newToken();
+      const result = await pool.query(
+        `INSERT INTO workspace_invites(digest,workspace_id,expires_at)
+         SELECT $1,id,now()+interval '1 day' FROM workspaces WHERE id=$2 AND owner_id=$3 RETURNING expires_at`,
+        [tokenDigest(token), workspaceId, user.id]);
+      if (!result.rowCount) return res.status(404).json({error: '只有空间所有者可以邀请成员'});
+      return res.json({code: token});
+    }
+    if (action === 'join') {
+      if (typeof code !== 'string' || !/^[a-f0-9]{64}$/.test(code)) return res.status(400).json({error: '请输入有效的邀请码'});
+      const result = await pool.query(
+        `WITH target AS (
+           SELECT w.id,w.name,w.purpose,w.owner_id=$2 AS owner
+           FROM workspace_invites i JOIN workspaces w ON w.id=i.workspace_id
+           WHERE i.digest=$1 AND i.expires_at>now()
+         ), joined AS (
+           INSERT INTO workspace_members(workspace_id,user_id) SELECT id,$2 FROM target ON CONFLICT DO NOTHING
+         ) SELECT * FROM target`,
+        [tokenDigest(code), user.id]);
+      if (!result.rowCount) return res.status(404).json({error: '邀请不存在或已过期'});
+      return res.json({space: result.rows[0]});
+    }
+    return res.status(400).json({error: '未知空间操作'});
+  } catch {
+    return res.status(503).json({error: '空间服务暂时不可用，请稍后再试'});
+  }
+}

apps/dashboard/src/pages/api/dev-preview.ts

@@ -0,0 +1,14 @@
+import { readFile } from 'node:fs/promises';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (process.env.PREVIEW_MODE !== 'true') return res.status(404).end();
+  if (req.method !== 'GET' && req.method !== 'HEAD') return res.status(405).end();
+  res.setHeader('Cache-Control', 'no-store');
+  try {
+    const status = JSON.parse(await readFile('/preview-status/status.json', 'utf8'));
+    return req.method === 'HEAD' ? res.status(200).end() : res.status(200).json({ ...status, mode: 'development' });
+  } catch {
+    return res.status(503).json({ error: 'Preview source has not synchronized yet' });
+  }
+}

apps/dashboard/src/pages/infinite_canvas/index.tsx

@@ -1,5 +1,6 @@
 import { ThemeToggle } from "../../studio/components/ThemeToggle";
 import { Brand } from "../../studio/components/Brand";
+import {WorkspaceShell, type Subcanvas} from '@/components/WorkspaceShell';
 import Head from 'next/head';
 import {useEffect,useRef,useState} from 'react';
 import {ArrowLeft,Plus,MousePointer2,Hand,ImagePlus,Type,Workflow,Undo2,Redo2,Minus,Maximize,Download,Upload,Trash2,Link2,Sparkles,ChevronRight,Sun,Moon} from 'lucide-react';
@@ -12,12 +13,22 @@ const example:Doc={version:1,cards:[{id:'brief',kind:'text',title:'01 / 创意
 const initial:Doc={version:1,cards:[],links:[]};
 const key='studio.infinite-canvas.v1';
 export default function InfiniteCanvas(){
+ const [nodes, setNodes] = useState<Card[]>();
+ return <WorkspaceShell liveNodes={nodes} editor={subset => <CanvasEditor subset={subset} onNodesChange={setNodes}/>}/>;
+}
+
+function CanvasEditor({subset,onNodesChange}:{subset?:Subcanvas;onNodesChange:(nodes:Card[])=>void}){
+
  const [doc,setDoc]=useState<Doc>(initial),[selected,select]=useState('shot'),[zoom,setZoom]=useState(.8),[pan,setPan]=useState({x:0,y:0}),[tool,setTool]=useState('select'),[past,setPast]=useState<Doc[]>([]),[future,setFuture]=useState<Doc[]>([]),[status,setStatus]=useState('示例项目 · 尚未保存'),[ready,setReady]=useState(false),[email,setEmail]=useState(''),[link,setLink]=useState(''),[menu,setMenu]=useState<{x:number;y:number}|null>(null),[editing,setEditing]=useState(''),[refMenu,setRefMenu]=useState(''),[taskFeedback,setTaskFeedback]=useState(''),[composerTarget,setComposerTarget]=useState(''),[pickerRequest,setPickerRequest]=useState(0);
  const file=useRef<HTMLInputElement>(null),json=useRef<HTMLInputElement>(null),viewport=useRef<HTMLDivElement>(null),drag=useRef<{id:string;x:number;y:number;ox:number;oy:number;before:Doc;resize?:boolean}|null>(null);
  const pickerSequence=useRef(0),agent=useRef<CanvasAgentHandle>(null);
- const active=doc.cards.find(c=>c.id===selected);
+ const visibleCards=subset?doc.cards.filter(card=>subset.nodes.includes(card.id)):doc.cards;
+ const visibleIds=new Set(visibleCards.map(card=>card.id));
+ const active=visibleCards.find(c=>c.id===selected);
+ useEffect(()=>{onNodesChange(doc.cards)},[doc.cards,onNodesChange]);
+ useEffect(()=>{select('');setEditing('');setMenu(null);setRefMenu('');setComposerTarget('')},[subset?.id]);
  useEffect(()=>{try{const raw=localStorage.getItem(key);if(raw){const d=parseCanvasDocument(raw);setDoc(d);setStatus('已恢复本机草稿')}}catch{setStatus('草稿读取失败，可导入 JSON 恢复')}try{const v=JSON.parse(localStorage.getItem(key+'.view')||'null');if(v&&Number.isFinite(v.zoom)&&v.zoom>=.2&&v.zoom<=2&&Number.isFinite(v.x)&&Number.isFinite(v.y)){setZoom(v.zoom);setPan({x:v.x,y:v.y})}}catch{}setReady(true);fetch('/api/account/session').then(r=>r.ok?r.json():null).then(d=>setEmail(d?.user?.email||'')).catch(()=>{});},[]);
- useEffect(()=>{if(!ready)return;try{localStorage.setItem(key,JSON.stringify(doc));setStatus('已保存到此浏览器')}catch{setStatus('本机空间不足，请导出项目备份')}},[doc,ready]);
+ useEffect(()=>{if(!ready)return;try{const serialized=JSON.stringify(doc);const previous=localStorage.getItem(key);if(previous!==serialized){localStorage.setItem(key,serialized);if(previous||doc.cards.length)localStorage.setItem(key+'.editedAt',new Date().toISOString());}setStatus('已保存到此浏览器')}catch{setStatus('本机空间不足，请导出项目备份')}},[doc,ready]);
  useEffect(()=>{if(ready)try{localStorage.setItem(key+'.view',JSON.stringify({...pan,zoom}))}catch{}},[pan,zoom,ready]);
  useEffect(()=>{const el=viewport.current;if(!el)return;const block=(e:WheelEvent)=>{if(!(e.target as HTMLElement).closest('textarea,input,select'))e.preventDefault()};el.addEventListener('wheel',block,{passive:false});return()=>el.removeEventListener('wheel',block)},[]);
  useEffect(()=>{const keys=(e:KeyboardEvent)=>{if(e.key==='Escape'){setMenu(null);setRefMenu('');setEditing('');return}if((e.target as HTMLElement).closest('input,textarea,select,[contenteditable]'))return;if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='z'){e.preventDefault();if(e.shiftKey)redo();else undo()}if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==='d'){e.preventDefault();duplicate()}};window.addEventListener('keydown',keys);return()=>window.removeEventListener('keydown',keys)});
@@ -25,12 +36,12 @@ export default function InfiniteCanvas(){
  function scaleAt(next:number,cx?:number,cy?:number){const el=viewport.current;if(!el)return;const r=el.getBoundingClientRect(),x=cx===undefined?r.width/2:cx-r.left,y=cy===undefined?r.height/2:cy-r.top;const z=Math.max(.2,Math.min(2,next));setPan({x:x-(x-pan.x)*z/zoom,y:y-(y-pan.y)*z/zoom});setZoom(z)}
  function duplicate(){if(!active||doc.cards.length>=80)return;const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');commit({...doc,cards:[...doc.cards,{...active,id,title:active.title.slice(0,197)+' 副本',x:active.x+40,y:active.y+40}]});select(id)}
  function commit(next:Doc){setPast(p=>[...p.slice(-29),doc]);setFuture([]);setDoc(next)}
- function add(kind:Card['kind'],image?:string){if(doc.cards.length>=80){setStatus('最多 80 个节点');return}const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');const rect=viewport.current?.getBoundingClientRect();commit({...doc,cards:[...doc.cards,{id,kind,title:kind==='text'?'灵感笔记':kind==='image'?'图片节点':kind==='script'?'脚本生成器':'生成提示词',text:'',x:((menu?.x??(rect?.width||700)/2)-pan.x)/zoom-160,y:((menu?.y??(rect?.height||600)/2)-pan.y)/zoom-100,image}]});select(id)}
+ function add(kind:Card['kind'],image?:string){if(subset){setStatus('请在父画布中添加节点');return;}if(doc.cards.length>=80){setStatus('最多 80 个节点');return}const id=Array.from(crypto.getRandomValues(new Uint8Array(16)),b=>b.toString(16).padStart(2,'0')).join('');const rect=viewport.current?.getBoundingClientRect();commit({...doc,cards:[...doc.cards,{id,kind,title:kind==='text'?'灵感笔记':kind==='image'?'图片节点':kind==='script'?'脚本生成器':'生成提示词',text:'',x:((menu?.x??(rect?.width||700)/2)-pan.x)/zoom-160,y:((menu?.y??(rect?.height||600)/2)-pan.y)/zoom-100,image}]});select(id)}
  function change(field:'title'|'text'|'instruction',value:string,id=selected){setDoc(d=>({...d,cards:d.cards.map(c=>c.id===id?{...c,[field]:value}:c)}))}
  function beginEdit(){setPast(p=>[...p.slice(-29),doc]);setFuture([])}
  function undo(){if(!past.length)return;setFuture(f=>[doc,...f]);setDoc(past[past.length-1]);setPast(p=>p.slice(0,-1))}
  function redo(){if(!future.length)return;setPast(p=>[...p,doc]);setDoc(future[0]);setFuture(f=>f.slice(1))}
- function fit(){const el=viewport.current;if(!el||!doc.cards.length)return;const minX=Math.min(...doc.cards.map(c=>c.x)),minY=Math.min(...doc.cards.map(c=>c.y));const w=Math.max(...doc.cards.map(c=>c.x+(c.width||320)))-minX,h=Math.max(...doc.cards.map(c=>c.y+(c.height||350)))-minY;const z=Math.max(.2,Math.min(1,(el.clientWidth-80)/w,(el.clientHeight-100)/h));setZoom(z);setPan({x:(el.clientWidth-w*z)/2-minX*z,y:(el.clientHeight-h*z)/2-minY*z})}
+ function fit(){const el=viewport.current;if(!el||!visibleCards.length)return;const minX=Math.min(...visibleCards.map(c=>c.x)),minY=Math.min(...visibleCards.map(c=>c.y));const w=Math.max(...visibleCards.map(c=>c.x+(c.width||320)))-minX,h=Math.max(...visibleCards.map(c=>c.y+(c.height||350)))-minY;const z=Math.max(.2,Math.min(1,(el.clientWidth-80)/w,(el.clientHeight-100)/h));setZoom(z);setPan({x:(el.clientWidth-w*z)/2-minX*z,y:(el.clientHeight-h*z)/2-minY*z})}
  function selectNode(id:string){if(id!==selected)setEditing('');select(id)}
  function editNode(id:string){setPickerRequest(0);setComposerTarget('');select(id);setEditing(id);setMenu(null);setRefMenu('');setTaskFeedback('');setTool('select')}
  function patchNode(id:string,patch:Partial<Card>){commit({...doc,cards:doc.cards.map(n=>n.id===id?{...n,...patch}:n)})}
@@ -43,18 +54,18 @@ export default function InfiniteCanvas(){
  function connect(from:string,to:string){try{const next=connectNodes(doc,from,to);if(next!==doc)commit(next);setTaskFeedback('')}catch(e){setTaskFeedback(e instanceof Error?e.message:'无法引用节点')}}
  function exportTask(id:string){try{const task=agentTask(doc,id),url=URL.createObjectURL(new Blob([JSON.stringify(task,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download=`canvas-task-${id}.json`;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);setTaskFeedback('Agent 任务已导出')}catch(e){setTaskFeedback(e instanceof Error?e.message:'无法导出任务')}}
  function exportDoc(){const url=URL.createObjectURL(new Blob([JSON.stringify(doc,null,2)],{type:'application/json'}));const a=document.createElement('a');a.href=url;a.download='studio-canvas.json';a.click();setTimeout(()=>URL.revokeObjectURL(url),1000)}
- return <main className={s.app}><Head><title>无限画布 · 啡跃 Endoleap</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
- <header className={s.header}><a href="/workspace" className={s.back} aria-label="返回 Studio"><ArrowLeft size={18}/></a><a href="/workspace" className={s.brand}><Brand compact/></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><CanvasAgentPanel ref={agent} document={doc} email={email} onLoad={next=>{setDoc(next);setPast([]);setFuture([]);setEditing('');select('')}} onFeedback={setTaskFeedback}/><ThemeToggle/><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
+ return <div className={s.app}><Head><title>无限画布 · 啡跃 Endoleap</title><meta name="description" content="在无限画布上组织灵感、参考素材与镜头提示词"/></Head>
+ <header className={s.header}><a href="/workspace" className={s.back} aria-label="返回工作台"><ArrowLeft size={18}/></a><a href="/workspace" className={s.brand}><Brand compact/></a><i/><span className={s.crumb}>工作空间 <ChevronRight size={13}/></span><strong>未命名的灵感宇宙</strong><span className={s.badge}>本机草稿</span><div className={s.spacer}/><CanvasAgentPanel ref={agent} document={doc} email={email} onLoad={next=>{setDoc(next);setPast([]);setFuture([]);setEditing('');select('')}} onFeedback={setTaskFeedback}/><ThemeToggle/><a href="/account">{email||'登录账户'}</a><button className={s.export} onClick={exportDoc}><Download size={15}/>导出项目</button></header>
  <div className={s.workspace}><nav className={s.rail} aria-label="画布工具"><button title="选择工具" aria-label="选择工具" aria-pressed={tool==='select'} onClick={()=>setTool('select')}><MousePointer2/></button><button title="移动画布" aria-label="移动画布" aria-pressed={tool==='hand'} onClick={()=>setTool('hand')}><Hand/></button><hr/><button title="添加笔记" aria-label="添加笔记" onClick={()=>add('text')}><Type/></button><button title="上传图片" aria-label="上传图片" onClick={()=>file.current?.click()}><ImagePlus/></button><button title="添加提示词" aria-label="添加提示词" onClick={()=>add('prompt')}><Sparkles/></button><button title="导入项目" aria-label="导入项目" onClick={()=>json.current?.click()}><Upload/></button><div className={s.spacer}/><span>∞</span></nav>
- <section className={s.canvasArea}>{!doc.cards.length&&<div className={s.startPanel}><span>YOUR NEXT IDEA STARTS HERE</span><h2>给想法，一个无限的空间。</h2><p>双击画布添加节点，或选择一个起点。</p><div><button onClick={()=>add('text')}><Type size={19}/>灵感笔记</button><button onClick={()=>file.current?.click()}><ImagePlus size={19}/>参考图片</button><button onClick={()=>add('prompt')}><Sparkles size={19}/>创作提示词</button></div><button onClick={()=>{commit(example);select('');setPan({x:0,y:0});setZoom(.7)}}>从示例开始 ↗</button><a href="/studio/api" target="_blank" rel="noreferrer">连接你的 coding agent · 接入文档 ↗</a></div>}<div className={s.canvasTitle}><span className={s.eyebrow}>YOUR IDEAS, CONNECTED</span><h1>无限画布<span> / Infinite canvas</span></h1><p>从一个灵感，连接所有可能。</p></div>
+ <section className={s.canvasArea}>{subset && <div className={s.subsetLabel}>{subset.name} · {visibleCards.length} 个节点</div>}{!subset&&!doc.cards.length&&<div className={s.startPanel}><span>YOUR NEXT IDEA STARTS HERE</span><h2>给想法，一个无限的空间。</h2><p>双击画布添加节点，或选择一个起点。</p><div><button onClick={()=>add('text')}><Type size={19}/>灵感笔记</button><button onClick={()=>file.current?.click()}><ImagePlus size={19}/>参考图片</button><button onClick={()=>add('prompt')}><Sparkles size={19}/>创作提示词</button></div><button onClick={()=>{commit(example);select('');setPan({x:0,y:0});setZoom(.7)}}>从示例开始 ↗</button><a href="/studio/api" target="_blank" rel="noreferrer">连接你的 coding agent · 接入文档 ↗</a></div>}<div className={s.canvasTitle}><span className={s.eyebrow}>YOUR IDEAS, CONNECTED</span><h1>无限画布<span> / Infinite canvas</span></h1><p>从一个灵感，连接所有可能。</p></div>
  <div className={s.viewport} style={{backgroundPosition:`${pan.x}px ${pan.y}px`,backgroundSize:`${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px ${24*zoom*Math.max(1,2**Math.ceil(Math.log2(1/zoom)))}px`}} ref={viewport} onDoubleClick={e=>{if(e.target===e.currentTarget){setMenu(null);add('text')}}} onContextMenu={e=>{e.preventDefault();const id=(e.target as HTMLElement).closest('[data-node-id]')?.getAttribute('data-node-id');select(id||'');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}} onWheel={e=>{const target=e.target as HTMLElement;if(drag.current)return;if(target.closest('textarea,input,select'))return;if(e.ctrlKey||e.metaKey){scaleAt(zoom*Math.exp(-e.deltaY*.002),e.clientX,e.clientY)}else setPan(p=>({x:p.x-e.deltaX,y:p.y-e.deltaY}))}} onPointerDown={e=>{setMenu(null);setRefMenu('');if(e.target===e.currentTarget){setEditing('');select('')};if(e.target===e.currentTarget||(tool==='hand'&&!(e.target as HTMLElement).closest('input,textarea,button,select'))||e.button===1){e.currentTarget.setPointerCapture(e.pointerId);drag.current={id:'pan',x:e.clientX,y:e.clientY,ox:pan.x,oy:pan.y,before:doc}}}} onPointerMove={e=>{const d=drag.current;if(!d)return;if(d.id==='pan')setPan({x:d.ox+e.clientX-d.x,y:d.oy+e.clientY-d.y});else {if(!d.resize&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4)return;e.currentTarget.setPointerCapture(e.pointerId);setDoc({...d.before,cards:d.before.cards.map(c=>c.id===d.id?(d.resize?{...c,width:Math.max(260,Math.min(1200,d.ox+(e.clientX-d.x)/zoom)),height:Math.max(300,Math.min(1200,d.oy+(e.clientY-d.y)/zoom))}:{...c,x:d.ox+(e.clientX-d.x)/zoom,y:d.oy+(e.clientY-d.y)/zoom}):c)})}}} onPointerUp={e=>{const d=drag.current;if(d?.id==='pan'&&tool==='select'&&Math.hypot(e.clientX-d.x,e.clientY-d.y)<4){select('');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-230)})}if(d&&d.id!=='pan'&&doc!==d.before){setPast(p=>[...p.slice(-29),d.before]);setFuture([])}drag.current=null}} onPointerCancel={()=>{if(drag.current?.id!=='pan'&&drag.current)setDoc(drag.current.before);drag.current=null}}>
- <div className={s.world} style={{transform:`translate(${pan.x}px,${pan.y}px) scale(${zoom})`}}><svg className={s.wires} aria-hidden="true">{doc.links.map(([a,b])=>{const from=doc.cards.find(c=>c.id===a),to=doc.cards.find(c=>c.id===b);if(!from||!to)return null;return <path key={a+b} d={`M ${from.x+(from.width||320)} ${from.y+(from.height||350)/2} C ${from.x+(from.width||320)+70} ${from.y+(from.height||350)/2},${to.x-45} ${to.y+(to.height||350)/2},${to.x} ${to.y+(to.height||350)/2}`}/>})}</svg>
- {doc.cards.map(c=><CanvasNodeView key={c.id} node={c} selected={selected===c.id} editing={editing===c.id&&composerTarget!==c.id} hand={tool==='hand'} onSelect={()=>selectNode(c.id)} onChooseReference={()=>{editNode(c.id);setComposerTarget(c.id);setPickerRequest(++pickerSequence.current)}} onEdit={()=>editNode(c.id)} onDrag={e=>{setMenu(null);if(c.id!==editing)setEditing('');drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.x,oy:c.y,before:doc}}} onResize={e=>{viewport.current?.setPointerCapture(e.pointerId);select(c.id);drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.width||320,oy:c.height||350,before:doc,resize:true}}} onChange={value=>change('text',value,c.id)} onRename={value=>change('title',value,c.id)} onStyle={style=>patchNode(c.id,{style})} onReference={e=>{select(c.id);setRefMenu(c.id);setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-230)})}} onMenu={e=>{select(c.id);setRefMenu('');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}} onUpload={()=>{select(c.id);file.current?.click()}} onUpscale={()=>derive(c.id,'image','upscale')} onExpand={()=>patchNode(c.id,{width:Math.min(1200,(c.width||320)*1.5),height:Math.min(1200,(c.height||350)*1.3)})} onBeginEdit={beginEdit}/>)}
+ <div className={s.world} style={{transform:`translate(${pan.x}px,${pan.y}px) scale(${zoom})`}}><svg className={s.wires} aria-hidden="true">{doc.links.filter(([a,b])=>visibleIds.has(a)&&visibleIds.has(b)).map(([a,b])=>{const from=doc.cards.find(c=>c.id===a),to=doc.cards.find(c=>c.id===b);if(!from||!to)return null;return <path key={a+b} d={`M ${from.x+(from.width||320)} ${from.y+(from.height||350)/2} C ${from.x+(from.width||320)+70} ${from.y+(from.height||350)/2},${to.x-45} ${to.y+(to.height||350)/2},${to.x} ${to.y+(to.height||350)/2}`}/>})}</svg>
+ {visibleCards.map(c=><CanvasNodeView key={c.id} node={c} selected={selected===c.id} editing={editing===c.id&&composerTarget!==c.id} hand={tool==='hand'} onSelect={()=>selectNode(c.id)} onChooseReference={()=>{editNode(c.id);setComposerTarget(c.id);setPickerRequest(++pickerSequence.current)}} onEdit={()=>editNode(c.id)} onDrag={e=>{setMenu(null);if(c.id!==editing)setEditing('');drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.x,oy:c.y,before:doc}}} onResize={e=>{viewport.current?.setPointerCapture(e.pointerId);select(c.id);drag.current={id:c.id,x:e.clientX,y:e.clientY,ox:c.width||320,oy:c.height||350,before:doc,resize:true}}} onChange={value=>change('text',value,c.id)} onRename={value=>change('title',value,c.id)} onStyle={style=>patchNode(c.id,{style})} onReference={e=>{select(c.id);setRefMenu(c.id);setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-230)})}} onMenu={e=>{select(c.id);setRefMenu('');setMenu({x:Math.min(e.clientX,window.innerWidth-250),y:Math.min(e.clientY,window.innerHeight-330)})}} onUpload={()=>{select(c.id);file.current?.click()}} onUpscale={()=>derive(c.id,'image','upscale')} onExpand={()=>patchNode(c.id,{width:Math.min(1200,(c.width||320)*1.5),height:Math.min(1200,(c.height||350)*1.3)})} onBeginEdit={beginEdit}/>)}
 
  </div></div><div className={s.canvasBottom}><span role="status">● {status}</span><div className={s.controls}><button aria-label="撤销" disabled={!past.length} onClick={undo}><Undo2 size={16}/></button><button aria-label="重做" disabled={!future.length} onClick={redo}><Redo2 size={16}/></button><i/><button aria-label="缩小" onClick={()=>scaleAt(zoom-.1)}><Minus size={16}/></button><span>{Math.round(zoom*100)}%</span><button aria-label="放大" onClick={()=>scaleAt(zoom+.1)}><Plus size={16}/></button><button aria-label="适应画布" onClick={fit}><Maximize size={16}/></button></div></div></section>
  {menu&&<div className={s.contextMenu} role="dialog" aria-label="画布操作" style={{left:Math.max(8,menu.x),top:Math.max(8,menu.y)}}><div className={s.menuTitle}>{refMenu?'引用该节点生成':active?active.title:'添加到画布'}<button aria-label="关闭画布操作" onClick={()=>setMenu(null)}>×</button></div>{refMenu?<>{(['text','image','script'] as const).map(kind=><button key={kind} onClick={()=>derive(refMenu,kind,kind==='script'?'script':'generate')}>{kind==='text'?'文本':kind==='image'?'图片':'脚本'}</button>)}</>:active?<><button onClick={()=>{editNode(active.id);setComposerTarget(active.id)}}>创作要求</button><button onClick={duplicate}>复制节点</button><button onClick={()=>{commit(removeCanvasNode(doc,selected));select('');setEditing('');setMenu(null)}}>删除节点</button><label>连接到<select value={link} onChange={e=>setLink(e.target.value)}><option value="">选择目标节点</option>{doc.cards.filter(c=>c.id!==selected).map(c=><option key={c.id} value={c.id}>{c.title}</option>)}</select></label><button disabled={!link} onClick={()=>{connect(selected,link);setLink('')}}>连接节点</button>{doc.links.filter(l=>l.includes(selected)).map(([a,b])=><button key={a+b} onClick={()=>commit({...doc,links:doc.links.filter(l=>l[0]!==a||l[1]!==b)})}>断开：{doc.cards.find(c=>c.id===(a===selected?b:a))?.title}</button>)}</>:<><button onClick={()=>{add('text');setMenu(null)}}>添加笔记</button><button onClick={()=>{add('image');setMenu(null)}}>添加图片</button><button onClick={()=>{add('script');setMenu(null)}}>添加脚本</button></>}</div>}</div>
  {active&&editing===active.id&&(active.kind!=='text'||composerTarget===active.id)&&<CanvasComposer pickerRequest={pickerRequest} key={active.id} node={active} nodes={doc.cards} references={referencedNodes(doc,active.id)} onChange={value=>change('instruction',value,active.id)} onRename={value=>change('title',value,active.id)} onBeginEdit={beginEdit} onUpload={()=>file.current?.click()} onAddReference={id=>connect(id,active.id)} onRemoveReference={id=>commit({...doc,links:doc.links.filter(([from,to])=>from!==id||to!==active.id)})} onQueue={()=>void agent.current?.queue(active.id)} onExport={()=>exportTask(active.id)} onClose={()=>setEditing('')} feedback={taskFeedback}/>}
  <input hidden ref={file} type="file" accept="image/png,image/jpeg,image/webp" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;if(!['image/png','image/jpeg','image/webp'].includes(f.type)||f.size>2000000){setStatus('请选择 2MB 以内的 PNG、JPEG 或 WebP');return}const reader=new FileReader();reader.onload=()=>{const image=String(reader.result);if(active?.kind==='image')commit({...doc,cards:doc.cards.map(c=>c.id===selected?{...c,image}:c)});else add('image',image)};reader.readAsDataURL(f)}}/>
  <input hidden ref={json} type="file" accept="application/json,.json" onChange={async e=>{const f=e.target.files?.[0];e.target.value='';if(!f)return;try{if(f.size>15000000)throw Error();const d=parseCanvasDocument(await f.text());commit(d);select(d.cards[0]?.id||'');setPan({x:0,y:0});setStatus('项目已导入')}catch{setStatus('无法导入：项目格式错误或文件过大')}}}/>
- </main>;
+ </div>;
 }

apps/dashboard/src/pages/workspace.tsx

@@ -1,7 +1,5 @@
-import { ThemeToggle } from "../components/ThemeToggle";
-import { Brand } from "../components/Brand";
-import Head from 'next/head';
-import {useEffect,useState} from 'react';
-import {ArrowUpRight, Layers, Workflow, BookOpen, Link2} from 'lucide-react';
-import s from '@/styles/workspace.module.css';
-export default function Workspace(){const [email,setEmail]=useState(''),[state,setState]=useState('loading');useEffect(()=>{fetch('/api/account/session').then(async r=>{if(!r.ok)throw Error();const d=await r.json();if(!d.user){window.location.replace('/account?next=/workspace');return}setEmail(d.user.email);setState('ready')}).catch(()=>setState('error'))},[]);return <main className={s.app}><Head><title>工作台 · 啡跃 Studio</title></Head><aside><a className={s.brand} href="/"><Brand/></a><span>你的工作空间</span><a aria-current="page" href="/workspace">◈ 创作概览</a><a href="/graphic"><Layers size={16}/>图形设计</a><a href="/infinite_canvas"><Workflow size={16}/>无限画布</a><a href="/documents"><BookOpen size={16}/>知识与教程</a><a href="/studio/api"><Link2 size={16}/>Agent 接入文档</a><a className={s.account} href="/account">{email||'账户设置'} ↗</a></aside><section>{state==='loading'?<p role="status">正在打开你的工作台…</p>:state==='error'?<p role="alert">暂时无法读取账户。<a href="/account?next=/workspace">重新登录</a></p>:<><header><span>WORKSPACE / OVERVIEW</span><ThemeToggle/><a href="/account">账户设置 ↗</a></header><p className={s.kicker}>MAKE SOMETHING THAT MATTERS.</p><h1>今天，让哪个想法成形？</h1><p className={s.sub}>选一个空间，开始你的下一次创作。</p><div className={s.grid}><a href="/graphic"><Layers/><small>GRAPHIC</small><h2>图形设计</h2><p>在文字、图形与图像之间，找到你的表达。</p><div className={s.poster}>Ideas,<br/><i>in shape.</i><b>✳</b></div><strong>打开编辑器 <ArrowUpRight size={18}/></strong></a><a href="/infinite_canvas"><Workflow/><small>INFINITE CANVAS</small><h2>无限画布</h2><p>收集灵感、连接参考，让思路自由生长。</p><div className={s.canvas}><span>灵感</span>⟶<span>参考</span>⟶<span>作品</span></div><strong>打开画布 <ArrowUpRight size={18}/></strong></a></div><div className={s.agent}><Link2/><div><h3>带上你的 coding agent</h3><p>从接入文档开始，使用已有的创作 API。连接由你的 Agent 发起。</p></div><a href="/studio/api">查看文档 ↗</a></div><p className={s.hint}>编辑器草稿保存在当前浏览器。更换设备前，请先导出项目备份。</p></>}</section></main>}
+import {WorkspaceShell} from '../components/WorkspaceShell';
+
+export default function Workspace() {
+  return <WorkspaceShell/>;
+}

apps/dashboard/src/proxy.ts

@@ -2,6 +2,7 @@ import { NextResponse, type NextRequest } from 'next/server';
 import { authConfig, SESSION_COOKIE, validSession } from './lib/auth';
 export function proxy(request: NextRequest) {
  const path = request.nextUrl.pathname;
+ if (process.env.PREVIEW_MODE === 'true' && path === '/api/dev-preview' && ['GET','HEAD'].includes(request.method)) return NextResponse.next();
  const publicBrandAssets = ['/favicon.ico','/apple-touch-icon.png','/brand/logo-light.svg','/brand/logo-dark.svg','/brand/icon-dark.svg','/studio/favicon.ico','/studio/apple-touch-icon.png','/studio/brand/logo-light.svg','/studio/brand/logo-dark.svg','/studio/brand/icon-dark.svg'];
  if (['GET','HEAD'].includes(request.method) && publicBrandAssets.includes(path)) return NextResponse.next({headers:{'Referrer-Policy':'same-origin'}});
  const responseHeaders = {'Cache-Control':'private, no-store', 'Referrer-Policy':'same-origin'};

apps/dashboard/src/studio/styles/infinite-canvas.module.css

@@ -20,3 +20,5 @@
 .header .export:hover{background:var(--primary-hover)}
 .wires path{stroke:var(--connector)}
 .brand{display:inline-flex;align-items:center;letter-spacing:normal}
+.header { padding-left: 39px; }
+.subsetLabel { position: absolute; top: 76px; left: 16px; z-index: 4; max-width: calc(100% - 32px); padding: 6px 10px; border-radius: 6px; background: var(--surface); color: var(--muted-foreground); overflow-wrap: anywhere; pointer-events: none; }

apps/dashboard/src/styles/workspace.module.css

@@ -1 +1,111 @@
-.app{display:flex;min-height:100dvh;background:var(--background);color:var(--foreground-strong);font-family:Arial,'PingFang SC',sans-serif}.app *{box-sizing:border-box}.app a{color:inherit;text-decoration:none}.app>aside{width:230px;flex-shrink:0;border-right:1px solid var(--border);background:var(--selection);padding:30px 20px;display:flex;flex-direction:column;gap:9px}.brand{font-size:22px;font-weight:600;margin-bottom:45px}.brand small{font-size:9px;letter-spacing:1px;color:var(--muted-foreground)}.app aside>span{font-size:10px;color:var(--muted-foreground);margin-bottom:10px;padding-left:10px}.app aside>a:not(.brand){display:flex;align-items:center;gap:12px;font-size:12px;padding:12px;border-radius:7px}.app aside>a[aria-current]{background:var(--selection)}.app aside>.account{margin-top:auto;overflow-wrap:anywhere}.app>section{padding:35px 55px;max-width:1250px;width:100%;margin:auto;min-height:100dvh}.app header{display:flex;justify-content:space-between;color:var(--muted-foreground);font-size:10px;letter-spacing:1px}.kicker{font-size:10px;letter-spacing:2px;color:var(--muted-foreground);margin-top:65px}.app h1{font-size:34px;font-weight:500;letter-spacing:-1px;margin:18px 0}.sub{font-size:13px;color:var(--muted-foreground)}.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:35px}.grid>a{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:26px;transition:transform .2s}.grid>a:hover{transform:translateY(-3px)}.grid small{font-size:9px;letter-spacing:1.5px;margin-left:12px;color:var(--muted-foreground)}.grid>a>svg{vertical-align:middle;width:20px;color:var(--muted-foreground)}.grid h2{font-size:23px;font-weight:500;margin:24px 0 12px}.grid p{font-size:12px;color:var(--muted-foreground);line-height:1.8}.poster,.canvas{height:190px;margin:25px 0;background:#ecf0e3;position:relative;overflow:hidden;border-radius:5px}.poster{padding:25px;font-size:40px;line-height:1;font-weight:600;letter-spacing:-2px}.poster i{font-family:Georgia,serif;font-weight:400}.poster b{position:absolute;right:0;top:12px;font-size:155px;color:#a7b88b}.canvas{display:flex;align-items:center;justify-content:center;gap:12px;background:radial-gradient(var(--selection) 1px,transparent 1px) 0 0/18px 18px,var(--selection);color:var(--muted-foreground)}.canvas span{background:var(--surface);border:1px solid var(--selection-border);padding:20px 13px;font-size:12px;border-radius:6px;color:var(--foreground)}.grid strong{display:flex;justify-content:space-between;font-size:12px;font-weight:400}.agent{display:flex;align-items:center;gap:18px;border:1px solid var(--selection-border);border-radius:10px;padding:23px;margin-top:28px}.agent>svg{color:var(--muted-foreground)}.agent h3{font-size:14px;margin:0 0 8px}.agent p{font-size:11px;color:var(--muted-foreground);margin:0;line-height:1.8}.agent a{margin-left:auto;font-size:12px;white-space:nowrap}.hint{font-size:10px;color:var(--muted-foreground);margin-top:25px}.app a:focus-visible{outline:2px solid var(--ring);outline-offset:4px}@media(max-width:850px){.app>aside{width:180px}.app>section{padding:30px 25px}.grid{gap:15px}.grid>a{padding:20px}.app h1{font-size:28px}.canvas{gap:5px}.canvas span{padding:15px 8px}}@media(max-width:600px){.app{display:block}.app>aside{width:100%;flex-direction:row;flex-wrap:wrap;padding:18px;gap:5px;border-right:0;border-bottom:1px solid var(--border)}.brand{margin:0;width:100%}.app aside>span,.app aside>.account{display:none}.app aside>a:not(.brand){padding:8px;font-size:10px}.grid{grid-template-columns:1fr}.kicker{margin-top:35px}.agent{flex-wrap:wrap}.agent a{margin-left:0}}
+.app { display: flex; min-height: 100dvh; background: var(--background); color: var(--foreground-strong); font-size: 14px; }
+.rail, .panel { position: sticky; top: 0; height: 100dvh; border-right: 1px solid var(--border); flex-shrink: 0; }
+.rail { width: 50px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 5px; background: var(--surface-muted); }
+.rail > a, .rail > button, .panelTitle button, .top button, .dialogTop button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 7px; color: var(--muted-foreground); }
+.rail > :hover, .links a:hover, .top button:hover, .panelTitle button:hover, .dialogTop button:hover, .menu button:hover { background: var(--row-hover); }
+.rail [aria-current], .links a[aria-current], .menu button[aria-pressed=true] { background: var(--selection); color: var(--foreground-strong); }
+.logo { margin-bottom: 14px; }
+.logo :global(.endoleap-brand) :global(.endoleap-mark) { width: 26px; height: 26px; }
+.settings { margin-top: auto; }
+.panel { width: 248px; padding: 0 12px 14px; display: flex; flex-direction: column; background: var(--surface); }
+.identity, .panelTitle { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.identity { min-height: 58px; border-bottom: 1px solid var(--border); }
+.panelTitle { padding: 8px 4px; min-height: 50px; }
+.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; background: var(--selection); color: var(--foreground-strong); }
+.switcher { min-width: 0; position: relative; flex: 1; }
+.switcher summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; min-height: 36px; }
+.switcher summary::-webkit-details-marker { display: none; }
+.switcher strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.switcher summary svg { margin-left: auto; flex-shrink: 0; }
+.menu { position: absolute; top: 42px; left: 0; width: 222px; z-index: 2; padding: 6px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 20px var(--shadow); max-height: 55dvh; overflow: auto; }
+.menu button, .links a { display: flex; align-items: center; text-align: left; gap: 9px; width: 100%; min-height: 36px; padding: 6px 9px; border-radius: 6px; overflow-wrap: anywhere; }
+.search { display: flex; align-items: center; gap: 8px; background: var(--surface-muted); color: var(--muted-foreground); border-radius: 7px; padding: 8px; }
+.search input { min-width: 0; width: 100%; background: transparent; color: var(--foreground); border: 0; }
+.search:focus-within, .dialog input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.links { margin-top: 12px; overflow: auto; }
+.links p, .local, .top, .content p, .tools small, .dialog p, .options small { color: var(--muted-foreground); }
+.links p { margin: 24px 8px 5px; font-size: 12px; }
+.local { margin-top: auto; padding: 12px 5px 0; border-top: 1px solid var(--border); }
+.main { flex: 1; min-width: 0; background-image: radial-gradient(var(--border) .75px, transparent .75px); background-size: 24px 24px; }
+.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 16px; }
+.top > div { display: flex; gap: 8px; align-items: center; padding: 2px 12px 2px 3px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow-wrap: anywhere; }
+.content, .status { max-width: 840px; margin: clamp(30px, 7vh, 90px) auto; padding: 0 clamp(15px, 4vw, 44px); }
+.intro { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: clamp(20px, 4vw, 44px); }
+.intro > svg { color: var(--primary); }
+.intro h1 { margin: 9px 0 14px; font-size: clamp(25px, 4vw, 42px); line-height: 1.2; overflow-wrap: anywhere; }
+.intro p { margin: 8px 0; line-height: 1.55; }
+.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 15px; border-radius: 7px; background: var(--primary); color: var(--primary-foreground); }
+.primary:hover:not(:disabled) { background: var(--primary-hover); }
+.intro .primary { margin-top: 15px; }
+.content h2 { font-size: 16px; margin: 28px 0 12px; }
+.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.tools a, .options button { display: flex; align-items: center; gap: 12px; padding: 16px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
+.tools a:hover, .options button:hover { border-color: var(--selection-border); background: var(--row-hover); }
+.tools a svg, .options svg { flex-shrink: 0; }
+.tools a svg:last-child { margin-left: auto; }
+.tools small, .options small { display: block; margin-top: 5px; line-height: 1.5; }
+.dialog { width: min(535px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: clamp(18px, 4vw, 32px); color: var(--foreground-strong); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 48px var(--shadow); }
+.dialog::backdrop { background: var(--scrim); }
+.dialogTop { display: flex; align-items: center; gap: 6px; }
+.dialogTop h2 { flex: 1; font-size: clamp(18px, 3vw, 24px); margin: 0; }
+.dialog p { line-height: 1.55; }
+.options { display: grid; gap: 12px; margin: 24px 0; }
+.options button { min-height: 74px; }
+.options button[aria-pressed=true] { background: var(--selection); border-color: var(--primary); }
+.dialog .primary { width: 100%; }
+.iconPreview { display: flex; align-items: center; gap: 10px; margin: 22px 0; }
+.iconPreview .avatar { width: 48px; height: 48px; font-size: 20px; }
+.dialog input { width: 100%; min-height: 42px; margin: 8px 0 20px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--foreground-strong); }
+.dialog input[aria-invalid=true] { border-color: var(--danger); margin-bottom: 0; }
+.dialog .error { color: var(--danger); }
+.notice { position: fixed; right: 16px; bottom: 16px; z-index: 4; max-width: calc(100vw - 32px); overflow-wrap: anywhere; padding: 14px 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 24px var(--shadow); }
+@media (max-width: 760px) { .panel { position: fixed; left: 50px; width: min(248px, calc(100% - 50px)); z-index: 3; box-shadow: 8px 0 20px var(--shadow); } .rail { z-index: 4; } .top { position: sticky; top: 0; z-index: 4; margin-left: 8px; } .app:has(.panel) .top { z-index: 2; } .tools { grid-template-columns: 1fr; } }
+.panel { z-index: 3; }
+.menu { width: min(286px, calc(100vw - 76px)); padding: 10px; }
+.menuIdentity { display: flex; gap: 10px; align-items: center; padding: 4px 4px 10px; }
+.menuIdentity small, .menuSection small { display: block; color: var(--muted-foreground); overflow-wrap: anywhere; margin: 4px 0; }
+.menuSection { border-top: 1px solid var(--border); padding: 6px 0; }
+.menuSection a { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 6px; }
+.menuSection a:hover, .treeRoot button:hover, .children button:hover { background: var(--row-hover); }
+.menuSection button > svg:last-child:not(:first-child) { margin-left: auto; }
+.menuSection .menuAdd { justify-content: center; background: var(--surface-muted); margin-top: 4px; }
+.treeRoot { display: flex; gap: 2px; }
+.treeRoot button, .children button { display: flex; align-items: center; gap: 8px; min-height: 34px; border-radius: 6px; text-align: left; overflow-wrap: anywhere; }
+.treeRoot button:last-child, .children button { flex: 1; width: 100%; padding: 5px 8px; }
+.treeRoot button[aria-current], .children button[aria-current] { background: var(--selection); }
+.children { list-style: none; margin: 2px 0 0 21px; padding: 0 0 0 7px; border-left: 1px solid var(--border); }
+.children svg, .treeRoot svg { flex-shrink: 0; }
+.node { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); overflow-wrap: anywhere; }
+.node p { white-space: pre-wrap; }
+.node img { max-height: 200px; object-fit: contain; margin-top: 8px; }
+.shortcuts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
+.shortcuts a { display: inline-flex; align-items: center; gap: 4px; padding: 6px; }
+.members { display: grid; gap: 8px; max-height: 30vh; overflow: auto; margin: 0 0 16px; border: 1px solid var(--border); }
+.members label { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
+.members input[type=checkbox] { width: auto; min-height: 0; margin: 0; accent-color: var(--primary); }
+.historyLink { width: 100%; padding: 9px; text-align: left; border-radius: 6px; }
+.historyLink[aria-current] { background: var(--selection); }
+.historyLink:hover { background: var(--row-hover); }
+.history { margin: 12px 16px 24px; padding: clamp(16px, 3vw, 38px); min-height: calc(100dvh - 92px); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
+.history > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
+.history h1 { margin: 0; font-size: 23px; }
+.history header p, .historyGroup h2, .historyItem small, .history time, .historyEmpty { color: var(--muted-foreground); }
+.history header p { margin: 6px 0 0; }
+.historyGroup { margin-top: 22px; }
+.historyGroup h2 { font-size: 14px; font-weight: 500; margin: 0 0 6px; }
+.historyGroup ul { list-style: none; padding: 0; margin: 0; }
+.historyGroup button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; min-height: 52px; border-radius: 7px; text-align: left; }
+.historyGroup button:hover { background: var(--row-hover); }
+.historyGroup button > svg { flex-shrink: 0; color: var(--muted-foreground); }
+.historyItem { flex: 1; min-width: 0; }
+.historyItem strong, .historyItem small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.historyItem small { margin-top: 4px; }
+.history time { font-variant-numeric: tabular-nums; }
+.historyEmpty { padding: 18px 0; line-height: 1.65; }
+.editorMain { position: relative; flex: 1; min-width: 0; height: 100dvh; }
+.editorToggle { position: absolute; z-index: 6; top: 22px; left: 20px; display: grid; place-items: center; width: 32px; height: 34px; border-radius: 6px; color: var(--muted-foreground); }
+.editorToggle:hover { background: var(--row-hover); }
+.openSubset { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 12px; }
+@media(max-width:760px) {
+  .editorToggle { top: 16px; left: 12px; }
+}

apps/dashboard/tests/studio/canvas-document.test.mjs

@@ -0,0 +1,65 @@
+import test from 'node:test';
+import {readFileSync} from 'node:fs';
+import assert from 'node:assert/strict';
+import {parseCanvasDocument,deriveNode,connectNodes,removeCanvasNode,referencedNodes,agentTask} from '../../src/studio/lib/canvas-document.ts';
+const note={id:'brief',kind:'text',title:'创意简报',text:'清晨的城市',x:20,y:50};
+const doc={version:1,cards:[note],links:[]};
+test('existing v1 browser drafts remain readable and untrusted fields are discarded',()=>{
+ assert.deepEqual(parseCanvasDocument(JSON.stringify({...doc,token:'ignored',cards:[{...note,html:'ignored'}]})),doc);
+ for(const bad of [{...doc,cards:[note,note]},{...doc,links:[['brief','missing']]},{...doc,cards:[{...note,image:'https://example.com/x.png'}]},{...doc,cards:[{...note,style:{color:'url(javascript:bad)'}}]}])assert.throws(()=>parseCanvasDocument(bad));
+});
+test('derived image and script nodes preserve directed references across save and restore',()=>{
+ const picture={...note,id:'picture',kind:'image',title:'参考图',image:'data:image/png;base64,AAAA',operation:'generate'};
+ const next=deriveNode(doc,'brief',picture);
+ const restored=parseCanvasDocument(JSON.stringify(deriveNode(next,'picture',{...note,id:'script',kind:'script',operation:'script'})));
+ assert.equal(referencedNodes(restored,'picture')[0].id,'brief');assert.equal(referencedNodes(restored,'script')[0].id,'picture');
+ assert.throws(()=>connectNodes(restored,'script','brief'),/循环/);
+ assert.throws(()=>parseCanvasDocument({...restored,links:[...restored.links,['script','brief']]}),/循环/);
+ const removed=removeCanvasNode(restored,'picture');assert.deepEqual(removed.links,[]);assert.equal(removed.cards.length,2);
+});
+test('agent task captures current referenced content and validates upscale inputs',()=>{
+ const next=deriveNode(doc,'brief',{...note,id:'out',kind:'script',operation:'script'});
+ assert.equal(agentTask(next,'out').references[0].text,'清晨的城市');
+ assert.equal(agentTask(next,'out').result.targetId,'out');
+ assert.throws(()=>agentTask({...next,cards:next.cards.map(n=>n.id==='out'?{...n,operation:'upscale'}:n)},'out'),/引用一张图片/);
+});
+
+test('instructions stay distinct from generated content in agent requests',()=>{
+ const result={...note,id:'script',kind:'script',text:'已有脚本正文',instruction:'改写为六个分镜',operation:'script'};
+ const restored=parseCanvasDocument(JSON.stringify(deriveNode(doc,'brief',result)));
+ assert.equal(agentTask(restored,'script').instruction,'改写为六个分镜');
+ assert.equal(restored.cards.find(n=>n.id==='script').text,'已有脚本正文');
+});
+
+test('editing an image passes the current image to the external agent',()=>{
+ const image={...note,id:'image',kind:'image',instruction:'把背景改为雪夜',image:'data:image/png;base64,AAAA'};
+ assert.equal(agentTask({version:1,cards:[image],links:[]},'image').sourceImage,image.image);
+});
+
+const overlaps=(a,b)=>a.x<b.x+(b.width||320)&&a.x+(a.width||320)>b.x&&a.y<b.y+(b.height||350)&&a.y+(a.height||350)>b.y;
+test('branching the example keeps the source image accessible after image and script derivation',()=>{
+ const scene={version:1,cards:[
+  {...note,x:70,y:140},
+  {...note,id:'reference',kind:'image',x:460,y:80},
+  {...note,id:'shot',kind:'prompt',x:850,y:160},
+ ],links:[['brief','reference'],['reference','shot']]};
+ const image=deriveNode(scene,'reference',{...note,id:'hd',kind:'image',operation:'upscale',x:930,y:80,width:360,height:300});
+ const result=deriveNode(image,'brief',{...note,id:'script',kind:'script',operation:'script',x:540,y:140,width:360,height:300});
+ assert.deepEqual(result.cards.slice(0,3),scene.cards,'Existing content and positions stay unchanged');
+ for(const added of result.cards.slice(3))for(const other of result.cards.filter(n=>n.id!==added.id))assert.equal(overlaps(added,other),false,`${added.id} blocks ${other.id}`);
+ assert.equal(referencedNodes(result,'hd')[0].id,'reference');
+ assert.equal(referencedNodes(result,'script')[0].id,'brief');
+ assert.deepEqual(parseCanvasDocument(JSON.stringify(result)),result);
+});
+test('a free requested position is retained and large nodes near the coordinate limit can still branch',()=>{
+ const free=deriveNode(doc,'brief',{...note,id:'free',x:2000,y:50});
+ assert.deepEqual({x:free.cards[1].x,y:free.cards[1].y},{x:2000,y:50});
+ const edge={version:1,cards:[{...note,x:90000,y:99600,width:1200,height:1200}],links:[]};
+ const result=deriveNode(edge,'brief',{...note,id:'edge',x:90500,y:99700,width:360,height:300});
+ assert.equal(overlaps(result.cards[0],result.cards[1]),false);
+ assert.deepEqual(parseCanvasDocument(JSON.stringify(result)),result);
+});
+
+test('agent and browser parse the same canvas document contract',()=>{
+ assert.equal(readFileSync(new URL('../../src/studio/lib/canvas-document.ts',import.meta.url),'utf8'),"export * from '../../lib/canvas-document.ts';\n");
+});

apps/dashboard/tests/studio/graphic-document.test.mjs

@@ -0,0 +1,8 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {parseGraphicDocument} from '../../src/studio/lib/graphic-document.ts';
+const item={id:'one',kind:'text',name:'标题',text:'<script>文本</script>',x:20,y:20,w:300,h:100,fill:'#123456',size:32,hidden:false,locked:false};
+const doc={name:'作品',background:'#ffffff',items:[item]};
+test('graphic backup restores editable text and ignores unrelated properties',()=>{assert.deepEqual(parseGraphicDocument(JSON.stringify({...doc,extra:'ignored'})),doc)});
+test('graphic backup rejects corrupted layers, duplicate IDs and unbounded geometry',()=>{for(const items of [[{...item,text:null}],[item,item],[{...item,x:Infinity}],[{...item,w:-1}],[{...item,fill:'url(https://example.com)'}]])assert.throws(()=>parseGraphicDocument(JSON.stringify({...doc,items})));});
+test('graphic backup disallows active SVG and remote image loads',()=>{for(const src of ['https://example.com/image.png','javascript:alert(1)','data:image/svg+xml;base64,PHN2Zz4='])assert.throws(()=>parseGraphicDocument(JSON.stringify({...doc,items:[{...item,kind:'image',src}]})));});

apps/dashboard/tests/studio/layout-images.test.mjs

@@ -0,0 +1,27 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {embedSvgMedia} from '../../src/studio/lib/layout-images.ts';
+const id='a05dc841-240a-5a3a-b01b-d589fc21cd36';
+test('SVG export fetches each internal media once with the caller authentication',async()=>{
+ const original=globalThis.fetch;let calls=0;
+ try{
+  globalThis.fetch=async(url,options)=>{calls++;assert.equal(url,(process.env.STUDIO_WIKI_ORIGIN || `http://127.0.0.1:${process.env.PORT || '3000'}`)+'/api/media/'+id);assert.equal(options.headers.cookie,'session=fixture');assert.equal(options.redirect,'error');return new Response(Buffer.from('fixture'),{headers:{'content-type':'image/png'}});};
+  const svg=await embedSvgMedia({headers:{cookie:'session=fixture'}},`<svg><image href="/api/media/${id}"/><image href="/api/media/${id}"/></svg>`);
+  assert.equal(calls,1);assert.equal((svg.match(/data:image\/png;base64,Zml4dHVyZQ==/g)||[]).length,2);assert.ok(!svg.includes('/api/media/'));
+ }finally{globalThis.fetch=original;}
+});
+test('SVG export rejects unavailable or non-image objects',async()=>{
+ const original=globalThis.fetch;
+ try{for(const response of [new Response('missing',{status:404}),new Response('<svg/>',{headers:{'content-type':'image/svg+xml'}})]){
+  globalThis.fetch=async()=>response;await assert.rejects(()=>embedSvgMedia({headers:{}},`<image href="/api/media/${id}"/>`),/模板图片不可访问/);
+ }}finally{globalThis.fetch=original;}
+});
+test('SVG exports without managed images do not access storage',async()=>{
+ assert.equal(await embedSvgMedia({headers:{}},'<svg><text>Title</text></svg>'),'<svg><text>Title</text></svg>');
+});
+
+test('SVG export uses the configured isolated Wiki origin',async()=>{
+ const original=globalThis.fetch,previous=process.env.STUDIO_WIKI_ORIGIN;
+ try{process.env.STUDIO_WIKI_ORIGIN='http://127.0.0.1:19000';globalThis.fetch=async url=>{assert.equal(url,'http://127.0.0.1:19000/api/media/'+id);return new Response('fixture',{headers:{'content-type':'image/png'}})};assert.ok((await embedSvgMedia({headers:{}},`<image href="/api/media/${id}"/>`)).includes('data:image/png;base64,'));}
+ finally{globalThis.fetch=original;if(previous===undefined)delete process.env.STUDIO_WIKI_ORIGIN;else process.env.STUDIO_WIKI_ORIGIN=previous;}
+});

apps/dashboard/tests/studio/layout-parameters.test.mjs

@@ -0,0 +1,7 @@
+import {test} from 'node:test';import assert from 'node:assert/strict';import {readFileSync} from 'node:fs';
+import {parameters} from '../../src/studio/lib/layout-parameters.ts';
+const layouts=JSON.parse(readFileSync(new URL('../../src/studio/content/templates/layouts.json',import.meta.url)));
+test('27 layouts preserve unique typed source slots and complete shapes',()=>{assert.equal(layouts.length,27);for(const [i,l] of layouts.entries()){assert.equal(l.id,'ref-'+String(i+1).padStart(2,'0'));assert.equal(new Set(l.elements.map(s=>s.id)).size,l.elements.length);for(const s of l.elements){assert.match(s.id,/^[TID]\d{2}$/);assert.equal(s.kind,({T:'text',I:'image',D:'decoration'})[s.id[0]]);assert.ok(s.box[0]>=0&&s.box[1]>=0&&s.box[0]+s.box[2]<=l.width&&s.box[1]+s.box[3]<=l.height);assert.match(s.raster,/^\/api\/media\/[a-f0-9-]{36}$/);if(s.kind==='image')assert.match(s.shape,/^\/api\/media\/[a-f0-9-]{36}$/)}assert.deepEqual(parameters(l,{}),{texts:{},images:{},decorations:{}})}});
+test('parameters reject mismatched slots, unsafe URLs and excessive text',()=>{const l=layouts[0];for(const input of [{texts:{I01:{value:'bad'}}},{images:{I01:{url:'https://evil.test'}}},{texts:{T01:{value:'x',scale:3}}},{texts:{T01:{value:'x'.repeat(501)}}},{paper:'url(x)'},{decorations:{D01:{hidden:'true'}}},null,[]])assert.throws(()=>parameters(l,input));const p=parameters(l,{texts:{T01:{value:'<script>not markup</script>',scale:1.2,align:'middle'}},images:{I01:{color:'#abcdef',fit:'contain'}},decorations:{D01:{hidden:true}}});assert.equal(p.texts.T01.value,'<script>not markup</script>');assert.equal(p.decorations.D01.hidden,true)});
+test('workspace parameters round-trip identically through Studio and Wiki validation',async()=>{const {parameters:wiki}=await import('../../src/lib/layout-parameters.ts');for(const l of layouts){const added={id:'user-example',kind:'text',role:'Added text',box:[3,4,20,12],direction:'horizontal',text:'Hello',reading:'custom'};const input={added:[added],layers:{T01:{x:2,y:4,width:15,height:10,rotation:25,opacity:.7,radius:2,z:10,hidden:false,locked:true},'user-example':{x:8,z:20}},texts:{T01:{value:'Updated',fontFamily:'serif',fontSize:4,fontWeight:700,lineHeight:1.6,letterSpacing:.2},'user-example':{value:'Hello'}},images:{I01:{fit:'cover',cropX:15,cropY:85,zoom:2}}};assert.deepEqual(parameters(l,input),wiki(l,input));assert.deepEqual(parameters(l,parameters(l,input)),parameters(l,input))}});
+test('workspace validation rejects unbounded, mismatched and executable properties',()=>{const l=layouts[0];for(const input of [{layers:{unknown:{x:2}}},{layers:{T01:{rotation:Infinity}}},{layers:{T01:{width:0}}},{layers:{T01:{opacity:2}}},{layers:{T01:{locked:'yes'}}},{texts:{T01:{value:'x',fontFamily:'url(evil)'}}},{images:{I01:{cropX:101}}},{images:{I01:{zoom:0}}},{added:[{id:'T01'}]},{added:Array(101).fill({})},{layers:{T01:{onClick:'evil'}}}])assert.throws(()=>parameters(l,input))});

apps/dashboard/tests/studio/native-layout.test.mjs

@@ -0,0 +1,19 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {readFileSync} from 'node:fs';
+import {nativeLayout,defaultText,textSize,imageShape,designUrl,newElementId} from '../../src/studio/lib/native-layout.ts';
+const layouts=JSON.parse(readFileSync(new URL('../../src/studio/content/templates/layouts.json',import.meta.url)));
+test('all 27 native pages are independent of source images and supply actual text',()=>{
+ for(const original of layouts){const layout=nativeLayout(original),serialized=JSON.stringify(layout);assert.ok(!serialized.includes('data:image'));assert.ok(!serialized.includes('raster'));assert.ok(!serialized.includes('source'));assert.ok(serialized.length<7000);
+  for(const slot of layout.elements.filter(s=>s.kind==='text')){assert.ok(defaultText(layout,slot).length);for(const text of [defaultText(layout,slot),'','新的文字\n第二行','<script>plain text</script>']){const size=textSize(layout,slot,text);assert.ok(Number.isFinite(size)&&size>0)}}
+ }
+});
+test('geometric templates retain their distinct silhouettes without bitmap masks',()=>{
+ assert.equal(imageShape(layouts[4],layouts[4].elements.find(s=>s.id==='I03')).borderRadius,'50%');
+ assert.ok(imageShape(layouts[21],layouts[21].elements.find(s=>s.id==='I02')).clipPath.startsWith('polygon('));
+ assert.notEqual(imageShape(layouts[21],layouts[21].elements.find(s=>s.id==='I02')).clipPath,imageShape(layouts[26],layouts[26].elements.find(s=>s.id==='I02')).clipPath);
+ assert.equal(designUrl('ref-01','abc'),'/studio/template-layout?id=abc');
+ assert.equal(designUrl('standard-01','abc'),'/studio/template-layout?id=abc');
+});
+
+test('element IDs work on HTTP origins without secure-context randomUUID',()=>{const saved=Object.getOwnPropertyDescriptor(globalThis,'crypto');let calls=0;Object.defineProperty(globalThis,'crypto',{configurable:true,value:{getRandomValues(array){for(let i=0;i<array.length;i++)array[i]=++calls;return array}}});try{const first=newElementId(),second=newElementId();assert.match(first,/^user-[a-f0-9]{32}$/);assert.notEqual(first,second)}finally{Object.defineProperty(globalThis,'crypto',saved)}});

apps/dashboard/tests/studio/series.test.mjs

@@ -0,0 +1,11 @@
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {readFileSync} from 'node:fs';
+import {registerHooks} from 'node:module';
+registerHooks({resolve(specifier,context,next){try{return next(specifier,context)}catch(e){if(e.code==='ERR_MODULE_NOT_FOUND'&&specifier.startsWith('.'))return next(specifier+'.ts',context);throw e}}});
+const {series,pageParameters}=await import('../../src/studio/lib/series.ts');
+const layout=JSON.parse(readFileSync(new URL('../../src/studio/content/standard-layout.json',import.meta.url)));
+// Fixture copied into the CI image; no build is performed by these tests.
+const input=JSON.parse(readFileSync(new URL('../../fixtures/studio/autumn-journal.json',import.meta.url)));
+test('a complete three-page document preserves copy and resolves shared visual tokens',()=>{const d=series(input.document,[layout]);assert.equal(d.pages.length,3);for(const page of d.pages){const p=pageParameters(d,page,layout);assert.equal(p.paper,d.style.palette.paper);assert.equal(p.texts.T01.fontFamily,'serif');assert.equal(p.texts.T01.value,page.parameters.texts.T01.value);assert.equal(p.layers.T01.x,10)}const change=structuredClone(d);change.style.palette.ink='#112233';change.style.spacing.margin=8;for(const page of change.pages){const p=pageParameters(change,page,layout);assert.equal(p.texts.T02.color,'#112233');assert.equal(p.layers.T01.x,8)}change.pages[1].parameters.texts.T01.color='#ABCDEF';assert.equal(pageParameters(change,change.pages[1],layout).texts.T01.color,'#ABCDEF')});
+test('invalid page order, stale template placeholders, untracked images and unsafe fields fail',()=>{for(const mutate of [d=>d.pages.reverse(),d=>d.pages[1].key=d.pages[0].key,d=>delete d.pages[0].parameters.texts.T02,d=>d.pages[0].parameters.images.I01.assetId='f76134e7-6e4f-4261-b90c-3c523dc16307',d=>d.style.palette.ink='url(evil)',d=>d.style.spacing.gap=10,d=>d.pages[0].bindings.I01='title',d=>d.pages[0].parameters.images.I01.url='https://evil.test']){const d=structuredClone(input.document);mutate(d);assert.throws(()=>series(d,[layout]))}});