furniture-3d-system-Wu/docs/solutions/workflow-issues/ui-token-and-raf-optimization-20260215.md

title, date, module, problem_type, severity, symptoms, root_cause, resolution_type, status, confidence, tags, related_patterns

title	date	module	problem_type	severity	symptoms	root_cause	resolution_type	status	confidence	tags	related_patterns
UI 令牌收敛与按需渲染优化	2026-02-15	ui-foundation	workflow_issue	medium	元组件存在硬编码色值与固定过渡时长 无可视标注场景仍持续 requestAnimationFrame 循环 explodeFactor 变化触发模型重复加载	动画/样式令牌与渲染生命周期缺少统一约束	code_fix	active	high	ui token animation raf performance

现象与影响

样式令牌不统一会导致视觉漂移；无效渲染循环和重复模型加载会产生不必要的 CPU/GPU 开销与卡顿。

修复动作

1. Button/Input/Select 统一过渡令牌，移除硬编码十六进制色值。
2. HoleOverlay2D 在无标注时停止 RAF，仅保留一次清屏。
3. ExplodedViewSelector 将 explodeFactor 与模型加载解耦，改为仅更新已加载 mesh 位移。
4. 材质缩略图兜底 SVG 接入语义色令牌并保持统一主题。

验证

• npm run type-check -- --pretty false 通过
• npm test -- tests/lib/cad-panel-linking.test.ts --runInBand 通过

预防策略

• 元组件层禁止硬编码主题色和动效参数，统一走 design tokens。
• 任何渲染循环都要有“空数据停机”策略，避免无意义帧消耗。