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>
This commit is contained in:
爱笑的毛毛虫
@@ -275,7 +275,7 @@ export default function TasksPage() {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-xs font-medium text-foreground/82" title={context.canvasName}>{context.canvasName}</div>
|
||||
<div className="mt-1 flex min-w-0 items-center gap-1 text-[10px] text-foreground/42" title={context.projectName || "未加入项目"}>
|
||||
<div className="mt-1 flex min-w-0 items-center gap-1 text-[var(--fs-tiny)] text-foreground/42" title={context.projectName || "未加入项目"}>
|
||||
<FolderKanban className="size-3 shrink-0" />
|
||||
<span className="truncate">{context.projectName || "未加入项目"}</span>
|
||||
</div>
|
||||
@@ -287,7 +287,7 @@ export default function TasksPage() {
|
||||
title: "类型｜模型",
|
||||
width: 180,
|
||||
responsive: ["md"],
|
||||
render: (_, task) => <div className="min-w-0"><div className="truncate text-xs font-medium text-foreground/78">{formatTaskKind(task)}</div><div className="mt-1 truncate text-[10px] text-foreground/42" title={formatModelName(effectiveConfig, task)}>{formatModelName(effectiveConfig, task)}</div></div>,
|
||||
render: (_, task) => <div className="min-w-0"><div className="truncate text-xs font-medium text-foreground/78">{formatTaskKind(task)}</div><div className="mt-1 truncate text-[var(--fs-tiny)] text-foreground/42" title={formatModelName(effectiveConfig, task)}>{formatModelName(effectiveConfig, task)}</div></div>,
|
||||
},
|
||||
{
|
||||
title: "任务名称",
|
||||
@@ -299,14 +299,14 @@ export default function TasksPage() {
|
||||
<TaskPreviewThumbnail task={task} onOpen={() => task.previewUrl && setMediaPreview({ url: task.previewUrl, kind: task.previewKind === "video" ? "video" : "image", title: prompt || formatTaskKind(task) })} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div title={prompt} className="line-clamp-2 max-w-full break-words text-xs font-medium leading-5 text-foreground/88">{prompt || "未命名任务"}</div>
|
||||
<div className={`mt-1 hidden truncate text-[10px] md:block ${task.status === "failed" ? "text-red-600 dark:text-red-400" : task.status === "cancelled" ? "text-amber-600 dark:text-amber-400" : "text-foreground/38"}`} title={task.error ? generationErrorMessage(task.error) : undefined}>
|
||||
<div className={`mt-1 hidden truncate text-[var(--fs-tiny)] md:block ${task.status === "failed" ? "text-red-600 dark:text-red-400" : task.status === "cancelled" ? "text-amber-600 dark:text-amber-400" : "text-foreground/38"}`} title={task.error ? generationErrorMessage(task.error) : undefined}>
|
||||
{task.status === "failed" || task.status === "cancelled" ? taskAttentionReason(task) : task.stage || statusLabel[task.status]}
|
||||
</div>
|
||||
<div className="mt-2 space-y-2 md:hidden">
|
||||
<div className="truncate text-[10px] text-foreground/45">{formatTaskKind(task)} · {formatModelName(effectiveConfig, task)}</div>
|
||||
<div className="truncate text-[10px] text-foreground/38">{context.canvasName}{context.projectName ? ` · ${context.projectName}` : ""}</div>
|
||||
<div className="truncate text-[var(--fs-tiny)] text-foreground/45">{formatTaskKind(task)} · {formatModelName(effectiveConfig, task)}</div>
|
||||
<div className="truncate text-[var(--fs-tiny)] text-foreground/38">{context.canvasName}{context.projectName ? ` · ${context.projectName}` : ""}</div>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex min-w-0 items-center gap-2 text-[11px]"><span className={`size-1.5 shrink-0 rounded-full ${statusDotClassName(task.status)}`} /><span>{statusLabel[task.status]}</span><TaskBilling billing={task.billing} /></div>
|
||||
<div className="flex min-w-0 items-center gap-2 text-[var(--fs-label)]"><span className={`size-1.5 shrink-0 rounded-full ${statusDotClassName(task.status)}`} /><span>{statusLabel[task.status]}</span><TaskBilling billing={task.billing} /></div>
|
||||
<Space size={0}>
|
||||
<Button type="text" size="small" aria-label="查看详情" icon={<Eye className="size-3.5" />} onClick={() => openTaskDetail(task)} />
|
||||
{task.status === "failed" || task.status === "cancelled" ? <Button type="text" size="small" aria-label="重新生成" icon={<RotateCcw className="size-3.5" />} loading={actingId === task.id} disabled={task.errorCode === CONTENT_MODERATION_ERROR_CODE || isContentModerationError(task.error)} onClick={() => runAction(task.id, "retry")} /> : null}
|
||||
@@ -327,7 +327,7 @@ export default function TasksPage() {
|
||||
<div className="flex items-center gap-2 text-xs font-medium">
|
||||
<span className={`size-1.5 shrink-0 rounded-full ${statusDotClassName(task.status)}`} />
|
||||
<span>{statusLabel[task.status]}</span>
|
||||
{task.status === "queued" || task.status === "running" ? <span className="ml-auto text-[10px] tabular-nums text-foreground/42">{task.progress || 0}%</span> : null}
|
||||
{task.status === "queued" || task.status === "running" ? <span className="ml-auto text-[var(--fs-tiny)] tabular-nums text-foreground/42">{task.progress || 0}%</span> : null}
|
||||
</div>
|
||||
{task.status === "queued" || task.status === "running" ? <Progress className="!mb-0 !mt-1.5 block" percent={task.progress || 0} showInfo={false} size={[90, 3]} strokeColor="var(--workspace-accent)" /> : null}
|
||||
</div>
|
||||
@@ -591,14 +591,14 @@ function TaskDate({ value }: { value?: string }) {
|
||||
if (!value) return <span className="text-xs text-foreground/38">-</span>;
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return <span className="text-xs text-foreground/38">-</span>;
|
||||
return <div className="text-xs tabular-nums text-foreground/62"><div>{date.toLocaleDateString()}</div><div className="mt-1 text-[10px] text-foreground/38">{date.toLocaleTimeString()}</div></div>;
|
||||
return <div className="text-xs tabular-nums text-foreground/62"><div>{date.toLocaleDateString()}</div><div className="mt-1 text-[var(--fs-tiny)] text-foreground/38">{date.toLocaleTimeString()}</div></div>;
|
||||
}
|
||||
|
||||
function TaskBilling({ billing }: { billing?: GenerationTask["billing"] }) {
|
||||
if (!billing) return <span className="text-xs text-foreground/30">-</span>;
|
||||
const amount = formatCredits(billing.amountMicrocredits);
|
||||
const note = billing.status === "settled" ? "已结算" : billing.status === "refunded" ? "已退回" : billing.status === "uncertain" ? "待核对" : "预计";
|
||||
return <div className="text-right"><div className="text-xs font-medium tabular-nums text-foreground/78">{amount}</div><div className={`mt-1 text-[10px] ${billing.status === "uncertain" ? "text-amber-600 dark:text-amber-300" : "text-foreground/38"}`}>{note}</div></div>;
|
||||
return <div className="text-right"><div className="text-xs font-medium tabular-nums text-foreground/78">{amount}</div><div className={`mt-1 text-[var(--fs-tiny)] ${billing.status === "uncertain" ? "text-amber-600 dark:text-amber-300" : "text-foreground/38"}`}>{note}</div></div>;
|
||||
}
|
||||
|
||||
function formatModelName(config: AiConfig, task: GenerationTask) {
|
||||
|
||||
Reference in New Issue
Block a user