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
@@ -71,7 +71,7 @@ export function VideoSettingsPanel({ config, onConfigChange, theme, showTitle =
|
||||
<button
|
||||
key={item.value}
|
||||
type="button"
|
||||
className="flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-1 text-[11px] font-medium transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
|
||||
className="flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-1 text-[var(--fs-label)] font-medium transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
|
||||
style={{ background: size === item.value ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onClick={() => onConfigChange("size", item.value)}
|
||||
@@ -141,7 +141,7 @@ function SeedanceVideoSettingsPanel({ config, onConfigChange, theme, showTitle,
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{isSeedanceFastModel(model) ? <div className="text-[10px] leading-4 opacity-55">fast 模型自动使用 720P</div> : null}
|
||||
{isSeedanceFastModel(model) ? <div className="text-[var(--fs-tiny)] leading-4 opacity-55">fast 模型自动使用 720P</div> : null}
|
||||
</SettingGroup>
|
||||
<SettingGroup title="比例" color={theme.node.muted}>
|
||||
<div className="grid grid-cols-4 gap-1.5">
|
||||
@@ -149,7 +149,7 @@ function SeedanceVideoSettingsPanel({ config, onConfigChange, theme, showTitle,
|
||||
<button
|
||||
key={item.value}
|
||||
type="button"
|
||||
className="flex h-11 min-w-0 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-md px-1 text-[10px] font-medium leading-none transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
|
||||
className="flex h-11 min-w-0 cursor-pointer flex-col items-center justify-center gap-0.5 rounded-md px-1 text-[var(--fs-tiny)] font-medium leading-none transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1"
|
||||
style={{ background: ratio === item.value ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onClick={() => onConfigChange("size", item.value)}
|
||||
@@ -211,7 +211,7 @@ export function normalizeVideoResolutionValue(value: string) {
|
||||
|
||||
function OptionPill({ selected, disabled = false, theme, onClick, children }: { selected: boolean; disabled?: boolean; theme: CanvasTheme; onClick: () => void; children: ReactNode }) {
|
||||
return (
|
||||
<button type="button" disabled={disabled} className="h-8 cursor-pointer whitespace-nowrap rounded-md px-1 text-[11px] font-medium leading-none transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:opacity-35" style={{ background: selected ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }} onMouseDown={(event) => event.stopPropagation()} onClick={onClick}>
|
||||
<button type="button" disabled={disabled} className="h-8 cursor-pointer whitespace-nowrap rounded-md px-1 text-[var(--fs-label)] font-medium leading-none transition-colors hover:brightness-110 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:opacity-35" style={{ background: selected ? theme.toolbar.activeBg : "transparent", color: theme.node.text, outlineColor: theme.node.muted }} onMouseDown={(event) => event.stopPropagation()} onClick={onClick}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
@@ -220,7 +220,7 @@ function OptionPill({ selected, disabled = false, theme, onClick, children }: {
|
||||
function SettingGroup({ title, color, children }: { title: string; color: string; children: ReactNode }) {
|
||||
return (
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-[10px] font-semibold" style={{ color }}>
|
||||
<div className="text-[var(--fs-tiny)] font-semibold" style={{ color }}>
|
||||
{title}
|
||||
</div>
|
||||
{children}
|
||||
@@ -230,7 +230,7 @@ function SettingGroup({ title, color, children }: { title: string; color: string
|
||||
|
||||
function DimensionInput({ prefix, value, disabled, theme, onChange }: { prefix: string; value: number; disabled: boolean; theme: CanvasTheme; onChange: (value: number | null) => void }) {
|
||||
return (
|
||||
<label className="flex h-8 overflow-hidden rounded-md text-[11px]" style={{ background: theme.toolbar.itemHover, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
|
||||
<label className="flex h-8 overflow-hidden rounded-md text-[var(--fs-label)]" style={{ background: theme.toolbar.itemHover, color: theme.node.text, opacity: disabled ? 0.55 : 1 }}>
|
||||
<span className="grid w-7 place-items-center" style={{ color: theme.node.muted }}>
|
||||
{prefix}
|
||||
</span>
|
||||
@@ -247,7 +247,7 @@ function DurationInput({ value, min, theme, onChange }: { value: number; min: nu
|
||||
};
|
||||
|
||||
return (
|
||||
<label className="flex h-8 min-w-0 items-center overflow-hidden rounded-md border text-[11px]" style={{ background: theme.toolbar.itemHover, borderColor: theme.toolbar.border, color: theme.node.text }}>
|
||||
<label className="flex h-8 min-w-0 items-center overflow-hidden rounded-md border text-[var(--fs-label)]" style={{ background: theme.toolbar.itemHover, borderColor: theme.toolbar.border, color: theme.node.text }}>
|
||||
<input
|
||||
key={`${min}-${value}`}
|
||||
type="number"
|
||||
@@ -288,7 +288,7 @@ function ratioPreview(ratio: string) {
|
||||
function SwitchRow({ label, checked, theme, onChange }: { label: string; checked: boolean; theme: CanvasTheme; onChange: (checked: boolean) => void }) {
|
||||
return (
|
||||
<div className="flex h-8 items-center justify-between gap-2">
|
||||
<span className="min-w-0 whitespace-nowrap text-[11px]" style={{ color: theme.node.text }}>
|
||||
<span className="min-w-0 whitespace-nowrap text-[var(--fs-label)]" style={{ color: theme.node.text }}>
|
||||
{label}
|
||||
</span>
|
||||
<span className="shrink-0" onMouseDown={(event) => event.stopPropagation()}>
|
||||
|
||||
Reference in new issue
Block a user