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:
爱笑的毛毛虫andsikongyue authored and GitHub committed
1 parent
d83ec033bb
commit
b4d2b34fae
79 files changed
+844
-400
No files matched your search
@@ -314,7 +314,7 @@ export function CanvasNodeHoverToolbar({
|
||||
<>
|
||||
<div
|
||||
ref={toolbarRef}
|
||||
className="canvas-node-toolbar absolute z-[70] flex -translate-x-1/2 -translate-y-full items-end justify-center overflow-visible"
|
||||
className="canvas-node-toolbar absolute z-[var(--z-panel-floating)] flex -translate-x-1/2 -translate-y-full items-end justify-center overflow-visible"
|
||||
style={{ left: anchor.left, top: anchor.top, width: "max-content", maxWidth: `min(calc(100% - 20px), ${showDockLabels ? 840 : 560}px)`, color: theme.node.text }}
|
||||
onMouseEnter={() => onKeep(node.id)}
|
||||
onMouseLeave={() => {
|
||||
@@ -323,7 +323,7 @@ export function CanvasNodeHoverToolbar({
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onPointerDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<div className={`aceternity-floating-dock thin-scrollbar relative flex max-w-full overflow-x-auto rounded-[14px] border backdrop-blur-2xl ${showDockLabels ? "h-11 items-center px-2 py-1" : "h-10 items-end gap-1 px-1.5 pb-1"}`} style={showDockLabels ? labeledDockStyle : dockShellStyle}>
|
||||
<div className={`aceternity-floating-dock thin-scrollbar relative flex max-w-full overflow-x-auto rounded-[var(--dock-radius)] border backdrop-blur-2xl ${showDockLabels ? "h-11 items-center px-2 py-1" : "h-10 items-end gap-1 px-1.5 pb-1"}`} style={showDockLabels ? labeledDockStyle : dockShellStyle}>
|
||||
{dockItems.length ? <FloatingDock embedded items={dockItems} size="compact" showLabels={showDockLabels} ariaLabel="节点快捷工具" className={`pointer-events-auto shrink-0 ${showDockLabels ? "" : "max-w-[min(calc(100vw-20px),400px)]"}`} style={embeddedDockStyle} /> : null}
|
||||
{hasImage && !simpleMode ? (
|
||||
<Dropdown
|
||||
@@ -341,13 +341,13 @@ export function CanvasNodeHoverToolbar({
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`aceternity-dock-command pointer-events-auto shrink-0 outline-none focus-visible:ring-2 ${showDockLabels ? "is-labeled inline-flex h-8 items-center justify-center gap-1.5 rounded-[9px] px-2.5" : "grid size-8 place-items-center rounded-full"}`}
|
||||
className={`aceternity-dock-command pointer-events-auto shrink-0 outline-none focus-visible:ring-2 ${showDockLabels ? "is-labeled inline-flex h-8 items-center justify-center gap-1.5 rounded-[var(--dock-item-radius)] px-2.5" : "grid size-8 place-items-center rounded-full"}`}
|
||||
style={{ color: theme.node.text, "--tw-ring-color": theme.accent.primary } as CSSProperties}
|
||||
aria-label="更多图片工具"
|
||||
title="更多图片工具"
|
||||
>
|
||||
<Ellipsis className="size-3.5" />
|
||||
{showDockLabels ? <span className="inline-flex h-4 items-center text-[11px] font-medium leading-none">更多</span> : null}
|
||||
{showDockLabels ? <span className="inline-flex h-4 items-center text-[var(--fs-label)] font-medium leading-none">更多</span> : null}
|
||||
</button>
|
||||
</Dropdown>
|
||||
) : null}
|
||||
@@ -433,7 +433,7 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
|
||||
const title = (
|
||||
<div className="flex items-center justify-between gap-4 pr-10">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[17px] font-semibold tracking-[-0.02em]">节点信息</div>
|
||||
<div className="text-[var(--fs-heading-lg)] font-semibold tracking-[-0.02em]">节点信息</div>
|
||||
{node ? <div className="mt-0.5 truncate text-xs opacity-45">{node.id}</div> : null}
|
||||
</div>
|
||||
<Segmented
|
||||
@@ -481,7 +481,7 @@ export function CanvasNodeInfoModal({ node, open, onClose, onMetadataChange, rea
|
||||
return <button key={option.value} type="button" disabled={readOnly} onClick={() => saveAssetCategory(option.value)} className="h-7 rounded-md border px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-60" style={{ borderColor: active ? theme.accent.primary : theme.toolbar.border, background: active ? theme.accent.primarySoft : theme.toolbar.panel, color: active ? theme.accent.primary : theme.node.muted }}>{option.label}</button>;
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2 text-[11px] leading-5 opacity-45">生成后会按此分类进入项目资产；角色、场景和画风工作流会自动预填。</div>
|
||||
<div className="mt-2 text-[var(--fs-label)] leading-5 opacity-45">生成后会按此分类进入项目资产；角色、场景和画风工作流会自动预填。</div>
|
||||
</div>
|
||||
) : null}
|
||||
{node.metadata?.prompt ? (
|
||||
|
||||
Reference in new issue
Block a user