feat(canvas): 设计token系统 - 建立三层架构骨架 (#101)

* feat(canvas): 设计token系统 - 建立三层架构骨架 #94 #96

建立 Primitive→Semantic→Component 三层设计 token 体系，覆盖 9 个维度：
色彩/间距/字号/圆角/阴影/Elevation/动效/描边/不透明度。

- Primitive 层：纯值无语义，含 neutral 色板+节点类型色板+状态色、
  4px 栅格间距、10档字号、10档圆角、阴影+glow、12档 z-index、
  动效(duration+easing+delay+motion-scale)、描边、不透明度
- Semantic 层：引用 Primitive，随主题切换，含通用语义色、
  Canvas 语义(--cn-*)、Aceternity spatial 语义、节点类型语义、状态语义
- Component 层：引用 Semantic，含 Dock/Node/Modal/Panel/Prompt面板/
  进度条/缩放控制专属 token
- @theme inline 映射：节点类型色、状态色、Canvas 语义色、字号映射到 Tailwind utility
- prefers-reduced-motion 三级降级(L0正常/L1简化/L2禁用)
- AGENTS.md 新增 Design Token 使用规范，禁止新增裸 px 值
- 附带修复 canvas-drawing-excalidraw-editor.tsx TS7006 类型注解
- 附带修复 canvas-drawing-editor-modal.tsx TS2339 engine 字段缺失

Wayfinder 决策来源：#95 #96 #97 #98 #99

* fix(canvas): 设计token系统 - 修复CSS变量循环引用和命名兼容性 #94 #96

修复两个问题：

1. CSS变量循环引用：Primitive层 --color-node-*/--color-status-* 与
   @theme inline 中的 --color-node-*/--color-status-* 同名，经 Semantic
   层中转后形成循环（A→B→A）。改用 --palette- 前缀隔离 Primitive 色板，
   打断循环链路。

2. 变量名小数点兼容性：--space-0.5/1.5/2.5/3.5 中的小数点被部分 CSS
   linter 误判为类选择器。改为 --space-half/-1-half/-2-half/-3-half，
   保持语义清晰的同时提升工具链兼容性。

* refactor(canvas): 画布核心组件 - 迁移硬编码值到设计token #94

批次1：5个画布核心组件的裸 text-[Npx]/rounded-[Npx]/z-[N] 替换为
对应设计token，统一视觉语言：

- canvas-node.tsx：text-[10/11/9/17px]→fs-tiny/label/micro/heading-lg，
  rounded-[18px]→node-radius
- canvas-node-hover-toolbar.tsx：text-[11/17/10/9px]→fs-*，
  rounded-[14/9px]→dock-radius/dock-item-radius，z-[70]→z-panel-floating
- canvas-toolbar.tsx：text-[9/10/11px]→fs-*，
  rounded-[17/16/11/10px]→panel-radius/dock-item-radius-*，
  z-[30/40]→z-toolbar/z-toolbar-floating
- canvas-assistant-panel.tsx：text-[8/9/10/11px]→fs-*
- canvas-script-node.tsx：text-[9/10/11px]→fs-*

视觉零回归（token值与原硬编码值一致），代码可维护性提升。

* refactor(canvas): 画布辅助组件 - 迁移硬编码值到设计token #94

批次2：6个画布辅助组件的裸 text-[Npx]/rounded-[Npx]/z-[N] 替换为
对应设计token：

- canvas-style-picker-modal.tsx：text-[10/11px]→fs-tiny/label
- canvas-file-drop-overlay.tsx：z-[110]→z-modal-overlay，
  rounded-[28/20px]→r-5xl/r-3xl
- canvas-character-reference-node.tsx：text-[10px]→fs-tiny
- canvas-drawing-editor-modal.tsx：text-[11px]→fs-label
- canvas-video-prompt-tools.tsx：z-[1500]→z-toast，
  rounded-[12/10px]→r-lg/dock-item-radius
- asset-picker-modal.tsx：text-[10px]→fs-tiny

视觉零回归（token值与原硬编码值一致）。

* refactor(*): 全项目硬编码值 - 批量迁移到设计token #94

批次3：全项目 .tsx 文件中 372 处裸 text-[Npx]/rounded-[Npx] 批量
替换为对应设计token，剩余 25 处无直接 token 对应的低频值保留。

替换覆盖（按频率）：
- text-[10px]→fs-tiny (132处)
- text-[11px]→fs-label (100处)
- text-[9px]→fs-micro (45处)
- text-[12px]→fs-caption, text-[13/14px]→fs-body, text-[15px]→fs-body-lg
- text-[18px]→fs-heading-lg, text-[22px]→fs-title, text-[8px]→fs-micro
- rounded-[9/10px]→dock-item-radius, rounded-[12px]→r-lg
- rounded-[14px]→dock-radius, rounded-[16px]→r-2xl
- rounded-[17px]→panel-radius, rounded-[8px]→r-md

涉及 components/ 和 pages/ 下所有 .tsx 文件。
视觉零回归（token值与原硬编码值一致）。

* feat(canvas): 节点视觉层次规范 - 色带+状态徽章+四态递进 #97 #94

基于 Wayfinder 地图 #97 决议执行节点视觉重设计：

1. 节点类型色带（决策1）
   - 新增 nodeTypeColorVar() 函数，10种节点类型对应色带色
   - 节点左侧3px色条，引用 --cn-type-* token
   - 远距离最强信号，用户扫视画布即可识别节点类型

2. 节点状态徽章（决策2）
   - 新增 NodeStatusBadge 组件，loading/success/error 三态
   - 左上角圆角徽章，backdrop-blur 玻璃质感
   - success 态 2s 后自动淡出（canvas-status-success-fade 动画）

3. 四态递进视觉权重（决策3）
   - idle：无额外阴影
   - hover：轻微抬升阴影（16px 48px）
   - selected：2px 边框环（accent.primary 40% 透明度）
   - selected-primary：4px 软色环 + resize handle
   - active：6px 外发光环 + inner glow（最强强调）
   - 120-150ms ease-out 过渡

4. 阴影迁移
   - boxShadow 从硬编码改为分层语义化表达
   - 边框色 hover 态使用 color-mix 动态加深

Closes #97

---------

Co-authored-by: sikongyue <3155157671@qq.com>

web/src/components/layout/app-top-nav.tsx

@@ -64,7 +64,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                         >
                             <Link to="/" className={cn("min-w-0 items-center gap-2", mobileSidebarExpanded || spatialWorkbench ? "flex" : "hidden", "lg:flex")} title="影策">
                                 <span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
-                                {spatialWorkbench ? <span className="min-w-0"><span className="block truncate text-[13px] font-semibold">影策</span><span className="block truncate text-[9px] text-foreground/36">AI 叙事工作台</span></span> : <span className="truncate text-[13px] font-semibold">影策</span>}
+                                {spatialWorkbench ? <span className="min-w-0"><span className="block truncate text-[var(--fs-body)] font-semibold">影策</span><span className="block truncate text-[var(--fs-micro)] text-foreground/36">AI 叙事工作台</span></span> : <span className="truncate text-[var(--fs-body)] font-semibold">影策</span>}
                             </Link>
                         </div>
 
@@ -83,7 +83,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                                 const showSection = index === 0 || tool.section !== visibleNavigationTools[index - 1]?.section;
                                 return (
                                     <Fragment key={tool.slug}>
-                                        {showSection ? <div className={cn("mb-2 px-2 text-[10px] font-medium text-foreground/34", index > 0 && "mt-4", mobileSidebarExpanded ? "block" : "hidden", "lg:hidden")}>{tool.section}</div> : null}
+                                        {showSection ? <div className={cn("mb-2 px-2 text-[var(--fs-tiny)] font-medium text-foreground/34", index > 0 && "mt-4", mobileSidebarExpanded ? "block" : "hidden", "lg:hidden")}>{tool.section}</div> : null}
                                         <Link
                                             to={`/${tool.slug}`}
                                             title={tool.label}
@@ -91,7 +91,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
                                                 if (window.innerWidth < 1024) setMobileSidebarExpanded(false);
                                             }}
                                             className={cn(
-                                                "app-workspace-nav-link relative mb-1 flex shrink-0 items-center rounded-md text-[13px] transition-colors",
+                                                "app-workspace-nav-link relative mb-1 flex shrink-0 items-center rounded-md text-[var(--fs-body)] transition-colors",
                                                 spatialWorkbench ? "h-11" : "h-9",
                                                 mobileSidebarExpanded ? "gap-3 px-2.5" : "justify-center px-0",
                                                 "lg:justify-center lg:px-0",

web/src/components/layout/identity-provider-badge.tsx

@@ -12,7 +12,7 @@ export function IdentityProviderBadge({ user, compact = false, className }: { us
         <span
             className={cn(
                 "inline-flex shrink-0 items-center justify-center border border-border bg-background font-semibold text-foreground/65",
-                compact ? "size-3.5 rounded-full text-[8px] leading-none" : "h-4 rounded px-1 text-[9px] leading-none",
+                compact ? "size-3.5 rounded-full text-[var(--fs-micro)] leading-none" : "h-4 rounded px-1 text-[var(--fs-micro)] leading-none",
                 className,
             )}
             title={user.identityUsername ? `Linux.do · @${user.identityUsername}` : "Linux.do 用户"}

web/src/components/layout/system-announcement-center.tsx

@@ -114,7 +114,7 @@ export function SystemAnnouncementCenter({ userId, className, style, showLabel =
                 {showLabel ? (
                     <span className={`min-w-0 flex-1 items-center justify-between gap-2 whitespace-nowrap ${labelClassName || ""}`}>
                         <span>系统公告</span>
-                        <Tag color={unreadCount > 0 ? "gold" : undefined} className="!m-0 !min-w-6 !px-1.5 !text-center !text-[9px] !font-medium !leading-[18px] tabular-nums">{announcements.length}</Tag>
+                        <Tag color={unreadCount > 0 ? "gold" : undefined} className="!m-0 !min-w-6 !px-1.5 !text-center !text-[var(--fs-micro)] !font-medium !leading-[18px] tabular-nums">{announcements.length}</Tag>
                     </span>
                 ) : null}
             </motion.button>

web/src/components/layout/workspace-page.tsx

@@ -20,7 +20,7 @@ export function PageHeader({ title, description, meta, actions, icon }: { title:
                 {icon ? <WorkspaceSignalIcon variant={icon} /> : null}
                 <div className="min-w-0">
                     <div className="flex min-w-0 flex-wrap items-baseline gap-2.5">
-                        <h1 className="truncate text-[22px] font-semibold leading-7">{title}</h1>
+                        <h1 className="truncate text-[var(--fs-title)] font-semibold leading-7">{title}</h1>
                         {meta}
                     </div>
                     {description ? <p className="mt-1 text-xs leading-5 text-foreground/58">{description}</p> : null}

web/src/components/layout/workspace-sidebar-footer.tsx

@@ -69,7 +69,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                                 <UserAvatar user={user} className="size-8" />
                                 <div className="min-w-0 flex-1">
                                     <div className="flex min-w-0 items-center gap-1.5"><span className="truncate text-sm font-medium">{user.displayName || user.username}</span><IdentityProviderBadge user={user} /></div>
-                                    <div className="mt-0.5 truncate text-[11px] tabular-nums text-foreground/45">可用 {balance} 积分</div>
+                                    <div className="mt-0.5 truncate text-[var(--fs-label)] tabular-nums text-foreground/45">可用 {balance} 积分</div>
                                 </div>
                             </div>
 
@@ -80,7 +80,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                             ) : null}
 
                             <div className="border-y border-border/65 py-2">
-                                <AppChangelogButton className="flex h-8 w-full items-center gap-2 rounded px-2 text-[11px] text-foreground/58 hover:bg-foreground/[.055] hover:text-foreground [&_svg]:size-3.5" showLabel showVersion versionClassName="ml-auto text-[9px] tabular-nums text-foreground/32" />
+                                <AppChangelogButton className="flex h-8 w-full items-center gap-2 rounded px-2 text-[var(--fs-label)] text-foreground/58 hover:bg-foreground/[.055] hover:text-foreground [&_svg]:size-3.5" showLabel showVersion versionClassName="ml-auto text-[var(--fs-micro)] tabular-nums text-foreground/32" />
                             </div>
 
                             <div className="flex h-10 items-center px-2">
@@ -96,7 +96,7 @@ export function WorkspaceSidebarFooter({ expandedClassName, collapsedClassName,
                         <UserAvatar user={user} className="size-7" />
                         <span className={cn("min-w-0 flex-1 flex-col", expandedClassName)}>
                             <span className="truncate text-xs font-medium">{user.displayName || user.username}</span>
-                            <span className="mt-0.5 block truncate text-[9px] tabular-nums text-foreground/42">{balance} 积分</span>
+                            <span className="mt-0.5 block truncate text-[var(--fs-micro)] tabular-nums text-foreground/42">{balance} 积分</span>
                         </span>
                         <ChevronRight className={cn("size-3.5 shrink-0 text-foreground/30", expandedClassName)} />
                     </button>

web/src/components/layout/workspace-state.tsx

@@ -8,7 +8,7 @@ export function WorkspaceState({ icon = "empty", title, description, action, com
     return (
         <section className={cn("workspace-state flex flex-col items-center justify-center text-center", compact ? "min-h-44 py-8" : "min-h-[320px] py-12", className)}>
             <WorkspaceSignalIcon variant={icon} size={compact ? "md" : "lg"} />
-            <h2 className="mt-4 text-[15px] font-semibold leading-6 text-foreground">{title}</h2>
+            <h2 className="mt-4 text-[var(--fs-body-lg)] font-semibold leading-6 text-foreground">{title}</h2>
             {description ? <p className="mt-1.5 max-w-[42ch] text-xs leading-5 text-foreground/58">{description}</p> : null}
             {action ? <div className="mt-5">{action}</div> : null}
         </section>