tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(canvas): 硬编码字号/圆角清理 → 语义 token（审计 D1/P1-3） (#131)

Browse Source 
清理画布组件散落的硬编码字号与圆角，统一走 token 体系：

字号：
- 新增 --fs-nano(7px) 覆盖原 text-[6px]/text-[7px] 子微型标注
  （角标计数、节点预览、% 后缀）
- text-[19px] → --fs-heading-lg(18px)

圆角（就近映射，±1~2px）：
- rounded-[3px] → --r-xs | rounded-[5px] → --r-sm
- rounded-[6px] → --r-sm | rounded-[7px] → --r-md
- rounded-[18px] → --r-2xl

涉及 11 个组件文件。rounded-[1px]（minimap 视口指示框，刻意尖角）保留。
颜色项（bg-white/border-stone）经核实均带 dark: 变体，属标准 Tailwind
双主题模式非误用，不在本轮处理。

Co-authored-by: sikongyue <3155157671@qq.com>
This commit is contained in:
爱笑的毛毛虫
2026-08-04 21:20:53 +08:00
committed by GitHub
parent dcddc59d28
commit e84fbb8a76
11 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/canvas/canvas-frame-node.tsx
View File

@@ -263,12 +263,12 @@ function FramePreview({ nodes, frame, theme }: { nodes: CanvasNodeData[]; frame:
<div className="pointer-events-none absolute inset-x-2 bottom-2 overflow-hidden rounded-md" style={{ top: FRAME_HEADER_HEIGHT, background: theme.frame.preview }}>
{layout.length ? (
layout.map(({ node, ...style }) => (
<div key={node.id} className="absolute overflow-hidden rounded-[3px] border" style={{ ...style, background: theme.node.fill, borderColor: theme.node.stroke }}>
<div key={node.id} className="absolute overflow-hidden rounded-[var(--r-xs)] border" style={{ ...style, background: theme.node.fill, borderColor: theme.node.stroke }}>
{node.type === CanvasNodeType.Image && node.metadata?.content ? <img src={node.metadata.content} alt="" className="h-full w-full object-cover" loading="lazy" decoding="async" draggable={false} /> : null}
{node.type === CanvasNodeType.Video && node.metadata?.content ? <video src={node.metadata.content} className="h-full w-full object-cover" muted playsInline preload="metadata" /> : null}
{node.type === CanvasNodeType.Video && !node.metadata?.content ? <Video className="m-auto size-4 h-full opacity-40" /> : null}
{node.type === CanvasNodeType.Text ? <div className="line-clamp-3 p-1 text-[7px] leading-[9px]" style={{ color: theme.node.text }}>{node.metadata?.content || node.title}</div> : null}
{node.type === CanvasNodeType.Script ? <div className="p-1 text-[7px] leading-[9px]" style={{ color: theme.node.text }}>分镜脚本 · {node.metadata?.storyboard?.rows.length || 0} 镜</div> : null}
{node.type === CanvasNodeType.Text ? <div className="line-clamp-3 p-1 text-[var(--fs-nano)] leading-[9px]" style={{ color: theme.node.text }}>{node.metadata?.content || node.title}</div> : null}
{node.type === CanvasNodeType.Script ? <div className="p-1 text-[var(--fs-nano)] leading-[9px]" style={{ color: theme.node.text }}>分镜脚本 · {node.metadata?.storyboard?.rows.length || 0} 镜</div> : null}
</div>
))
) : (