Back to Details

easeui-core-components

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

EaseUI Core Components & Design Tokens

EaseUI核心组件与设计令牌

Source of truth. Every token, component, and animation in this file is extracted from EaseUI's production codebase (
app/src/app/globals.css
+ 
project/css/design-system.css
). Do NOT invent values — use these exactly.
权威来源：本文件中的每一项令牌、组件和动效均提取自EaseUI的生产代码库（
app/src/app/globals.css
+ 
project/css/design-system.css
）。请勿自行创建值——请严格使用此处提供的内容。

🎨 Color Tokens

🎨 颜色令牌

Accent Palette

强调色板

TokenHexUsage
--green
#49BA61
Success, AI completion, streaming indicators, positive feedback
--orange
#E36323
In-progress status, warnings
--red
#FE5938
Errors, destructive actions, 
btn-red
--blue
#3582FF
Links, progress bars, info badges, focus rings
--yellow
#FFB73A
Paused status, warnings
--purple
#8755E9
Phase badges, AI gradient accents
令牌十六进制值用途
--green
#49BA61
成功状态、AI生成完成、流式加载指示器、正向反馈
--orange
#E36323
进行中状态、警告
--red
#FE5938
错误、破坏性操作、
btn-red
按钮
--blue
#3582FF
链接、进度条、信息徽章、焦点环
--yellow
#FFB73A
暂停状态、警告
--purple
#8755E9
阶段徽章、AI渐变强调色

Neutrals

中性色

TokenValueUsage
--bg-page
#F4F4F5
Page background
--bg-card
#FFFFFF
Card surfaces
--bg-nav
rgba(255,255,255,0.85)
Frosted nav bars
--text-primary
#121212
Headings, primary content
--text-secondary
#71717A
Descriptions, metadata
--text-muted
#A1A1AA
Placeholders, disabled text
--border-subtle
rgba(0,0,0,0.06)
Card borders
--border-light
#E4E4E7
Dividers, separators
令牌值用途
--bg-page
#F4F4F5
页面背景
--bg-card
#FFFFFF
卡片表面
--bg-nav
rgba(255,255,255,0.85)
毛玻璃导航栏
--text-primary
#121212
标题、主要内容文本
--text-secondary
#71717A
描述文本、元数据
--text-muted
#A1A1AA
占位符、禁用状态文本
--border-subtle
rgba(0,0,0,0.06)
卡片边框
--border-light
#E4E4E7
分隔线、分割符

Selection

选中文本样式

css
::selection { background: rgba(73, 186, 97, 0.2); color: inherit; }
css
::selection { background: rgba(73, 186, 97, 0.2); color: inherit; }

🔲 Shadow System

🔲 阴影系统

TokenUsageLight Layers
--shadow-toolbar
Floating toolbars, navbars2 layers, subtle
--shadow-subtle
Default card rest state5 layers, nearly invisible
--shadow-slight-hover
Light hover elevation1 layer
--shadow-card-hover
Card 
:hover
lift		2 layers
--shadow-prompt-input
Prompt bar input focus3 layers with inset white
--shadow-popover
Dropdowns, popovers, sidebar mobile4 layers
--shadow-modal
Modal overlays1 deep layer
--shadow-btn-primary
Primary button depth3 layers with inset highlight
--shadow-btn-secondary
Dark button depth4 layers with inset rim
--shadow-btn-red
Destructive button3 layers, orange-tinted
--shadow-tab-active
Active tab indicator2 layers with inset white
令牌用途层级（浅色模式）
--shadow-toolbar
浮动工具栏、导航栏2层，效果柔和
--shadow-subtle
卡片默认静止状态5层，几乎不可见
--shadow-slight-hover
轻量悬浮抬升效果1层
--shadow-card-hover
卡片
:hover
抬升效果		2层
--shadow-prompt-input
提示栏输入框焦点状态3层，内含白色内阴影
--shadow-popover
下拉菜单、弹出框、移动端侧边栏4层
--shadow-modal
模态框遮罩1层深色阴影
--shadow-btn-primary
主按钮立体效果3层，内含高亮内阴影
--shadow-btn-secondary
深色按钮立体效果4层，内含边缘内阴影
--shadow-btn-red
破坏性按钮3层，带橙色色调
--shadow-tab-active
激活标签指示器2层，内含白色内阴影

📐 Radii

📐 圆角半径

TokenValueUsage
--radius-sm
0.375rem
(6px)		Small badges, inputs
--radius-md
0.625rem
(10px)		Ghost buttons, tags
--radius-lg
0.75rem
(12px)		Buttons (.btn default: 
0.875rem
)
--radius-xl
1.25rem
(20px)		Cards
--radius-full
9999px
Badges, pills, scrollbars
令牌值用途
--radius-sm
0.375rem
(6px)		小型徽章、输入框
--radius-md
0.625rem
(10px)		幽灵按钮、标签
--radius-lg
0.75rem
(12px)		按钮（
.btn
默认值：
0.875rem
）
--radius-xl
1.25rem
(20px)		卡片
--radius-full
9999px
徽章、胶囊型控件、滚动条

✏️ Typography

✏️ 排版系统

Font Stack

字体栈

css
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-code: 'JetBrains Mono', ui-monospace, monospace;
css
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-code: 'JetBrains Mono', ui-monospace, monospace;

Scale

字体层级

🔴 MINIMUM FONT SIZE: 12px (0.75rem). Never use smaller. No exceptions.
ClassSizeLine HeightTrackingUsage
.text-xs
0.75rem (12px)1.4—Badge labels, timestamps, metadata
.text-sm
0.8125rem (13px)1.5—Button text, descriptions
.text-base
0.875rem (14px)1.5—Body text (EaseUI default)
.text-lg
1rem (16px)1.5—Emphasized body
.text-xl
1.25rem (20px)1.3—Subheadings
.text-2xl
1.5rem (24px)1.2—Section headings
.text-3xl
1.875rem (30px)1.15-0.02emPage titles
🔴 最小字体尺寸：12px (0.75rem)。禁止使用更小尺寸，无例外。
类名尺寸行高字间距用途
.text-xs
0.75rem (12px)1.4—徽章标签、时间戳、元数据
.text-sm
0.8125rem (13px)1.5—按钮文本、描述文本
.text-base
0.875rem (14px)1.5—正文文本（EaseUI默认值）
.text-lg
1rem (16px)1.5—强调型正文
.text-xl
1.25rem (20px)1.3—子标题
.text-2xl
1.5rem (24px)1.2—章节标题
.text-3xl
1.875rem (30px)1.15-0.02em页面标题

Weights

字体权重

  • .font-medium
    = 500 — Labels, interactive text
  • .font-semibold
    = 600 — Buttons, subheadings
  • .font-bold
    = 700 — Page titles, hero text
  • .font-medium
    = 500 — 标签、交互文本
  • .font-semibold
    = 600 — 按钮、子标题
  • .font-bold
    = 700 — 页面标题、核心展示文本

🔘 Button System

🔘 按钮系统

Base 
.btn

基础
.btn

Height: 2.75rem (44px) | Padding: 0 1.25rem | Radius: 0.875rem (14px)
Font: 0.8125rem/600/-0.01em | Transition: transform 0.25s spring + shadow/opacity 0.2s
高度: 2.75rem (44px) | 内边距: 0 1.25rem | 圆角: 0.875rem (14px)
字体: 0.8125rem/600/-0.01em | 过渡效果: transform 0.25s spring + shadow/opacity 0.2s

Variants

变体

ClassBackgroundTextShadowUsage
.btn-primary
linear-gradient(#E5E5E5, #E2E2E2)
#121212
--shadow-btn-primary
Primary actions (light button)
.btn-secondary
linear-gradient(#323232, #222222)
#FCFCFC
--shadow-btn-secondary
Secondary actions (dark button)
.btn-red
linear-gradient(#E36323, #DF5A18)
#FCFCFC
--shadow-btn-red
Destructive actions
.btn-ghost
transparent
--text-secondary
noneTertiary, toolbar actions
类名背景文本阴影用途
.btn-primary
linear-gradient(#E5E5E5, #E2E2E2)
#121212
--shadow-btn-primary
主要操作（浅色按钮）
.btn-secondary
linear-gradient(#323232, #222222)
#FCFCFC
--shadow-btn-secondary
次要操作（深色按钮）
.btn-red
linear-gradient(#E36323, #DF5A18)
#FCFCFC
--shadow-btn-red
破坏性操作
.btn-ghost
transparent
--text-secondary
nonetertiary操作、工具栏操作

States

状态

StateBehavior
:hover
translateY(-1px)
+ 
::after
overlay opacity 1
:active
scale(0.96) translateY(0)
— 0.1s
:focus-visible
0 0 0 2px #fff, 0 0 0 4px rgba(53,130,255,0.5)
:disabled
opacity: 0.55; cursor: not-allowed; transform: none
.btn-loading
pointer-events: none; opacity: 0.8
— label hidden, spinner shown
状态行为
:hover
translateY(-1px)
+ 
::after
遮罩层透明度变为1
:active
scale(0.96) translateY(0)
— 过渡时长0.1s
:focus-visible
0 0 0 2px #fff, 0 0 0 4px rgba(53,130,255,0.5)
:disabled
opacity: 0.55; cursor: not-allowed; transform: none
.btn-loading
pointer-events: none; opacity: 0.8
— 标签隐藏，加载指示器显示

🏷️ Badge System

🏷️ 徽章系统

Base 
.badge

基础
.badge

Display: inline-flex | Gap: 0.25rem | Padding: 0.125rem 0.5rem
Radius: --radius-full | Font: 0.6875rem/600/0.02em/uppercase
显示方式: inline-flex | 间距: 0.25rem | 内边距: 0.125rem 0.5rem
圆角: --radius-full | 字体: 0.6875rem/600/0.02em/uppercase

Status Variants

状态变体

ClassBackgroundTextMaps to
.badge-shipped
#E8F5E9
#2E7D32
Feature shipped
.badge-specced
#E3F2FD
#1565C0
Spec complete
.badge-progress
#FFF3E0
#E65100
In progress
.badge-backlog
#F5F5F5
#757575
Backlog
.badge-paused
#FFF8E1
#F9A825
Paused
.badge-p1
#FFEBEE
#C62828
Priority 1
.badge-p2
#FFF3E0
#EF6C00
Priority 2
.badge-p3
#F5F5F5
#757575
Priority 3
.badge-phase
rgba(0,0,0,0.05)
--text-secondary
Phase label
类名背景文本对应状态
.badge-shipped
#E8F5E9
#2E7D32
功能已上线
.badge-specced
#E3F2FD
#1565C0
需求文档完成
.badge-progress
#FFF3E0
#E65100
进行中
.badge-backlog
#F5F5F5
#757575
待办队列
.badge-paused
#FFF8E1
#F9A825
已暂停
.badge-p1
#FFEBEE
#C62828
优先级1
.badge-p2
#FFF3E0
#EF6C00
优先级2
.badge-p3
#F5F5F5
#757575
优先级3
.badge-phase
rgba(0,0,0,0.05)
--text-secondary
阶段标签

🃏 Card System

🃏 卡片系统

Base 
.card

基础
.card

css
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);     /* 1.25rem = 20px */
padding: 1rem 1.125rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
cursor: pointer;
css
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);     /* 1.25rem = 20px */
padding: 1rem 1.125rem;
transition: box-shadow 0.2s ease, transform 0.2s ease;
cursor: pointer;

Hover State

悬浮状态

css
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
css
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

⌨️ Keyboard Shortcut Badge 
.kbd

⌨️ 键盘快捷键徽章
.kbd

Size: 1.25rem min-width/height | Padding: 0 0.3rem
Font: inherit/0.625rem/500 | Color: zinc-400
Background: zinc-100 | Border: 1px solid zinc-200 | Radius: 0.25rem
尺寸: 最小宽高1.25rem | 内边距: 0 0.3rem
字体: inherit/0.625rem/500 | 颜色: zinc-400
背景: zinc-100 | 边框: 1px solid zinc-200 | 圆角: 0.25rem

🎬 Animation Library

🎬 动效库

Page Transitions

页面过渡

ClassKeyframesDuration/Easing
.page-transition
page-enter
— opacity 0→1, translateY 8px→0		0.4s 
cubic-bezier(0.16, 1, 0.3, 1)
.reveal
reveal-up
— opacity 0→1, translateY 12px→0		0.4s same easing
.reveal-1
through 
.reveal-8
Staggered delays: 0ms, 50ms, 100ms, 150ms, 200ms, 250ms, 300ms, 350msUse for sequential entrance
.device-switch
opacity 0.5→1, scale 0.97→10.35s same easing
类名关键帧时长/缓动函数
.page-transition
page-enter
— 透明度0→1，Y轴位移8px→0		0.4s 
cubic-bezier(0.16, 1, 0.3, 1)
.reveal
reveal-up
— 透明度0→1，Y轴位移12px→0		0.4s 相同缓动函数
.reveal-1
至 
.reveal-8
延迟时间依次递增：0ms, 50ms, 100ms, 150ms, 200ms, 250ms, 300ms, 350ms用于元素依次入场
.device-switch
透明度0.5→1，缩放0.97→10.35s 相同缓动函数

AI / Streaming Animations

AI / 流式加载动效

ClassKeyframesDurationUsage
.streaming-border
gradient-rotate
— conic gradient 0°→360°		2.5s linear ∞Active AI generation border
.streaming-shimmer
streaming-shimmer
— translateX -100%→100%		2s ease-in-out ∞Shimmer overlay during generation
.streaming-dot
pulse-glow
— opacity + box-shadow pulse		1.5s ease-in-out ∞AI activity indicator dot
.streaming-progress
progress-indeterminate
— translateX -100%→400%		1.5s ease-in-out ∞Indeterminate progress bar
.radiant-ai-border
radiant-rotate
— conic gradient rotation		4s linear ∞Premium AI processing border
.skeleton-shimmer
shimmer
— background-position sweep		1.8s ease-in-out ∞Loading placeholder
.animate-gradient-border
rotation
— conic gradient rotation		4s linear ∞Rainbow gradient border
类名关键帧时长用途
.streaming-border
gradient-rotate
— 锥形渐变0°→360°		2.5s linear 无限循环AI生成中边框动效
.streaming-shimmer
streaming-shimmer
— X轴位移-100%→100%		2s ease-in-out 无限循环生成过程中闪烁遮罩
.streaming-dot
pulse-glow
— 透明度+阴影脉冲效果		1.5s ease-in-out 无限循环AI活动指示器圆点
.streaming-progress
progress-indeterminate
— X轴位移-100%→400%		1.5s ease-in-out 无限循环不确定进度条
.radiant-ai-border
radiant-rotate
— 锥形渐变旋转		4s linear 无限循环高级AI处理边框动效
.skeleton-shimmer
shimmer
— 背景位置扫过效果		1.8s ease-in-out 无限循环加载占位符
.animate-gradient-border
rotation
— 锥形渐变旋转		4s linear 无限循环彩虹渐变边框

Feedback Animations

反馈动效

ClassKeyframesDurationUsage
.animate-completion
completion-flash
— scale + green glow burst		0.6s ease-outGeneration complete
.feedback-success-ring
Ring burst scale + fading box-shadow0.6s springPositive rating
.feedback-sparkle
Scale 0→1.2→0 + rotate 0→360°0.5s springSparkle on positive feedback
.animate-shake
input-shake
— horizontal shake ±4px		0.3s ease-outValidation error
类名关键帧时长用途
.animate-completion
completion-flash
— 缩放+绿色发光爆发效果		0.6s ease-out生成完成提示
.feedback-success-ring
环形爆发缩放+阴影淡出0.6s spring正向评分反馈
.feedback-sparkle
缩放0→1.2→0 + 旋转0→360°0.5s spring正向反馈时的闪烁效果
.animate-shake
input-shake
— 水平抖动±4px		0.3s ease-out验证错误提示

Reduced Motion

简化动效模式

All animations respect 
prefers-reduced-motion: reduce
— durations set to 0.01ms, animations disabled, scroll-behavior set to auto.
所有动效均遵循
prefers-reduced-motion: reduce
规则——时长设为0.01ms，动效禁用，滚动行为设为自动。

🧩 Responsive Breakpoints

🧩 响应式断点

BreakpointBehavior
< 768px
Sidebar: full-width overlay
< 1024px
Sidebar: slides out (
translateX(-100%)
), header goes full-width
≥ 1024px
Sidebar: persistent, content offset
断点行为
< 768px
侧边栏：全屏覆盖层
< 1024px
侧边栏：滑出（
translateX(-100%)
），头部栏变为全屏宽度
≥ 1024px
侧边栏：固定显示，内容区域偏移

📜 Scrollbar

📜 滚动条

css
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }
Hide scrollbar: 
.scrollbar-none
css
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }
隐藏滚动条：
.scrollbar-none

🔑 EaseUI Easing Curves

🔑 EaseUI缓动曲线

NameValueUsage
Default
0.2s ease
Standard transitions (buttons, cards)
Spring
0.25s cubic-bezier(0.34, 1.56, 0.64, 1)
Button press/release
Smooth decelerate
0.4s cubic-bezier(0.16, 1, 0.3, 1)
Page transitions, reveal, device switch
Quick feedback
0.1s
Active press states
Toast exitPaired 
toast-in
+ 
toast-out
animations		Toast notifications
名称值用途
默认
0.2s ease
标准过渡（按钮、卡片）
弹簧效果
0.25s cubic-bezier(0.34, 1.56, 0.64, 1)
按钮按压/释放效果
平滑减速
0.4s cubic-bezier(0.16, 1, 0.3, 1)
页面过渡、元素入场、设备切换
快速反馈
0.1s
激活按压状态
提示框退出配对
toast-in
+ 
toast-out
动效		提示通知框

📊 Design Knowledge Databases

📊 设计知识数据库

Searchable CSV data for UX patterns, accessibility, performance, and more. Grep these when you need specific guidance:
FileEntriesContentWhen to Use
ux-guidelines.csv99UX rules: smooth scroll, z-index, animation duration, loading states, form patternsAny UX decision
web-interface.csv31WCAG: aria-labels, focus management, keyboard nav, semantic HTMLAccessibility work
react-performance.csv45Async waterfall, memo, rerender, cache, suspense, bundle optimizationPerformance tuning
charts.csv25Chart type selection, color guidance, a11y notes, library recommendationsData visualization
nextjs.csv~40SSR, routing, images, API routes, caching — EaseUI's stackNext.js-specific patterns
icons.csv101Lucide icon name → keyword mappingFinding the right icon
Quick search example:
bash
undefined
可搜索的CSV数据，包含UX模式、无障碍、性能优化等内容。需要特定指导时可检索这些文件：
文件条目数内容使用场景
ux-guidelines.csv99UX规则：平滑滚动、z-index、动效时长、加载状态、表单模式任何UX决策场景
web-interface.csv31WCAG规范：aria标签、焦点管理、键盘导航、语义化HTML无障碍开发工作
react-performance.csv45异步瀑布流、memo、重渲染、缓存、suspense、包体积优化性能调优
charts.csv25图表类型选择、颜色指导、无障碍说明、库推荐数据可视化
nextjs.csv~40SSR、路由、图片、API路由、缓存——EaseUI技术栈Next.js专属模式
icons.csv101Lucide图标名称→关键词映射查找合适图标
快速检索示例：
bash
undefined

Find UX rules about animation

查找关于动效的UX规则

grep -i "animation" .agent/skills/easeui-core-components/data/ux-guidelines.csv
grep -i "animation" .agent/skills/easeui-core-components/data/ux-guidelines.csv

Find React performance rules about memo

查找关于memo的React性能规则

grep -i "memo" .agent/skills/easeui-core-components/data/react-performance.csv
grep -i "memo" .agent/skills/easeui-core-components/data/react-performance.csv

Find the right Lucide icon

查找合适的Lucide图标

grep -i "search" .agent/skills/easeui-core-components/data/icons.csv

---
grep -i "search" .agent/skills/easeui-core-components/data/icons.csv

---

🧩 Component Registry (NEVER REINVENT — REUSE FIRST)

🧩 组件注册表（切勿重复造轮子——优先复用）

🔴 Before creating ANY new component, check this registry. If it exists here, use it. Only create new components if confirmed absent.
🔴 创建任何新组件前，请先检查本注册表。如果组件已存在，请直接使用。仅在确认不存在时才创建新组件。

Shared Components (
components/
)

共享组件（
components/
）

ComponentFilePurpose
Tooltip
tooltip.tsx
Hover tooltip with positioning
Toast
toast.tsx
Notification toasts
Skeleton
skeleton.tsx
Loading placeholders
CopyButton
copy-button.tsx
Copy-to-clipboard with feedback
EmptyState
empty-state.tsx
Zero-data state with CTA
ErrorBoundary
error-boundary.tsx
React error boundary
PageTransition
page-transition.tsx
Page entrance animation
KeyboardShortcuts
keyboard-shortcuts.tsx
Shortcut modal/handler
ColorPickerPopover
color-picker-popover.tsx
Color picker dropdown
TagPopover
tag-popover.tsx
Tag management popover
Sidebar
sidebar.tsx
Main app sidebar navigation
GenerationHUD
generation-hud.tsx
AI generation progress overlay
BackgroundTaskBar
background-task-bar.tsx
Background task status
FeedbackModal
feedback-modal.tsx
User feedback collection
UpgradeModal
upgrade-modal.tsx
Plan upgrade prompt
DSExportModal
ds-export-modal.tsx
Design system export
NotificationCenter
notification-center.tsx
Notification panel
VariantRating
variant-rating.tsx
Rate generated variants
ProjectCostPanel
project-cost-panel.tsx
Token/cost tracking
PropertiesInspector
properties-inspector.tsx
CSS property editor
AiSparkleIcon
ai-sparkle-icon.tsx
Animated AI indicator
LayerTree
layer-tree.tsx
HTML layer tree panel
InteractiveWavesBackground
InteractiveWavesBackground.tsx
Animated wave background
SoundProvider
SoundProvider.tsx
Sound effects context provider
AdminSidebar
admin/admin-sidebar.tsx
Admin panel navigation
BubbleMenu
admin/editor/bubble-menu.tsx
Rich text floating menu
CommandList
admin/editor/command-list.tsx
Slash command menu
MarkdownEditor
admin/editor/markdown-editor.tsx
Markdown WYSIWYG editor
组件文件用途
Tooltip
tooltip.tsx
带定位的悬浮提示框
Toast
toast.tsx
通知提示框
Skeleton
skeleton.tsx
加载占位符
CopyButton
copy-button.tsx
带反馈的复制到剪贴板按钮
EmptyState
empty-state.tsx
空数据状态带CTA按钮
ErrorBoundary
error-boundary.tsx
React错误边界
PageTransition
page-transition.tsx
页面入场动效
KeyboardShortcuts
keyboard-shortcuts.tsx
快捷键模态框/处理器
ColorPickerPopover
color-picker-popover.tsx
颜色选择器下拉框
TagPopover
tag-popover.tsx
标签管理弹出框
Sidebar
sidebar.tsx
主应用侧边栏导航
GenerationHUD
generation-hud.tsx
AI生成进度覆盖层
BackgroundTaskBar
background-task-bar.tsx
后台任务状态栏
FeedbackModal
feedback-modal.tsx
用户反馈收集模态框
UpgradeModal
upgrade-modal.tsx
套餐升级提示框
DSExportModal
ds-export-modal.tsx
设计系统导出模态框
NotificationCenter
notification-center.tsx
通知面板
VariantRating
variant-rating.tsx
评分生成变体
ProjectCostPanel
project-cost-panel.tsx
令牌/成本追踪面板
PropertiesInspector
properties-inspector.tsx
CSS属性编辑器
AiSparkleIcon
ai-sparkle-icon.tsx
动画AI指示器
LayerTree
layer-tree.tsx
HTML层级树面板
InteractiveWavesBackground
InteractiveWavesBackground.tsx
动画波浪背景
SoundProvider
SoundProvider.tsx
音效上下文提供者
AdminSidebar
admin/admin-sidebar.tsx
管理面板侧边栏导航
BubbleMenu
admin/editor/bubble-menu.tsx
富文本浮动菜单
CommandList
admin/editor/command-list.tsx
斜杠命令菜单
MarkdownEditor
admin/editor/markdown-editor.tsx
Markdown所见即所得编辑器

Editor Components (
components/editor/
)

编辑器组件（
components/editor/
）

ComponentFilePurpose
CanvasLayer
canvas-layer.tsx
Canvas layer container
CanvasViewport
canvas-viewport.tsx
Main canvas with pan/zoom
DSCanvasViewport
ds-canvas-viewport.tsx
Design system canvas
ArtboardRenderer
artboard-renderer.tsx
Render artboard iframes
ArtboardContextMenu
artboard-context-menu.tsx
Right-click menu
SelectionRing
selection-ring.tsx
Blue selection border
DotGrid
dot-grid.tsx
Canvas background grid
CanvasMinimap
canvas-minimap.tsx
Overview minimap
ConnectionLines
connection-lines.tsx
Artboard connection lines
ZoomToolbar
zoom-toolbar.tsx
Zoom controls
RadialDial
radial-dial.tsx
Circular control dial
EditorSidebar
editor-sidebar.tsx
Editor right panel
EditorDrawer
editor-drawer.tsx
Slide-out drawer
GenerationPanel
generation-panel.tsx
Prompt input panel
ComponentSelectorModal
component-selector-modal.tsx
Pick wireframe component
SlidePresenter
slide-presenter.tsx
Slide presentation mode
SlideFilmstrip
slide-filmstrip.tsx
Slide thumbnails
SlideExportMenu
slide-export-menu.tsx
Export slide options
DSCardRenderer
ds-card-renderer.tsx
Design system card
组件文件用途
CanvasLayer
canvas-layer.tsx
画布层级容器
CanvasViewport
canvas-viewport.tsx
支持平移/缩放的主画布
DSCanvasViewport
ds-canvas-viewport.tsx
设计系统画布
ArtboardRenderer
artboard-renderer.tsx
渲染画板iframe
ArtboardContextMenu
artboard-context-menu.tsx
右键菜单
SelectionRing
selection-ring.tsx
蓝色选择边框
DotGrid
dot-grid.tsx
画布背景网格
CanvasMinimap
canvas-minimap.tsx
概览小地图
ConnectionLines
connection-lines.tsx
画板连接线
ZoomToolbar
zoom-toolbar.tsx
缩放控制栏
RadialDial
radial-dial.tsx
圆形控制旋钮
EditorSidebar
editor-sidebar.tsx
编辑器右侧面板
EditorDrawer
editor-drawer.tsx
滑出式抽屉
GenerationPanel
generation-panel.tsx
提示输入面板
ComponentSelectorModal
component-selector-modal.tsx
选择线框组件模态框
SlidePresenter
slide-presenter.tsx
幻灯片演示模式
SlideFilmstrip
slide-filmstrip.tsx
幻灯片缩略图栏
SlideExportMenu
slide-export-menu.tsx
幻灯片导出选项
DSCardRenderer
ds-card-renderer.tsx
设计系统卡片

Sidebar Panels (
components/editor/sidebar-panels/
)

侧边栏面板（
components/editor/sidebar-panels/
）

ComponentFilePurpose
VariantPanel
variant-panel.tsx
Selected variant details
ProjectOverviewPanel
project-overview-panel.tsx
Project summary
EmptyCanvasPanel
empty-canvas-panel.tsx
Empty canvas CTA
MultiSelectPanel
multi-select-panel.tsx
Bulk actions
GenerationOverlay
generation-overlay.tsx
Generation progress
InspectorGuidePanel
inspector-guide-panel.tsx
Inspector help
DSComponentPanel
ds-component-panel.tsx
DS component view
DSOverviewPanel
ds-overview-panel.tsx
DS overview
DSFoundationPanel
ds-foundation-panel.tsx
DS foundations
DSGuidelinesPanel
ds-guidelines-panel.tsx
DS usage guidelines
DSItemPreviewPanel
ds-item-preview-panel.tsx
DS item detail
DSEmptyPanel
ds-empty-panel.tsx
DS empty state
组件文件用途
VariantPanel
variant-panel.tsx
选中变体详情面板
ProjectOverviewPanel
project-overview-panel.tsx
项目概览面板
EmptyCanvasPanel
empty-canvas-panel.tsx
空画布CTA面板
MultiSelectPanel
multi-select-panel.tsx
批量操作面板
GenerationOverlay
generation-overlay.tsx
生成进度覆盖层
InspectorGuidePanel
inspector-guide-panel.tsx
编辑器帮助面板
DSComponentPanel
ds-component-panel.tsx
设计系统组件视图
DSOverviewPanel
ds-overview-panel.tsx
设计系统概览
DSFoundationPanel
ds-foundation-panel.tsx
设计系统基础设置
DSGuidelinesPanel
ds-guidelines-panel.tsx
设计系统使用指南
DSItemPreviewPanel
ds-item-preview-panel.tsx
设计系统项详情
DSEmptyPanel
ds-empty-panel.tsx
设计系统空状态

Icons (
components/icons/
) — 40 custom icons

图标（
components/icons/
）——40个自定义图标

Search before creating: 
grep -l "icon-name" app/src/components/icons/
创建前先检索：
grep -l "icon-name" app/src/components/icons/

📁 Source Files

📁 源文件

FileContains
globals.cssMain app design tokens, buttons, animations (799 lines)
design-system.cssPM Hub tokens, badges, cards, utilities (238 lines)
design-tokens.tsToken parser (markdown → structured tokens)
color-scales.tsOKLCH perceptual color scale generator
component-catalog.ts24 wireframe component templates
文件包含内容
globals.css主应用设计令牌、按钮、动效（799行）
design-system.cssPM Hub令牌、徽章、卡片、工具类（238行）
design-tokens.ts令牌解析器（markdown → 结构化令牌）
color-scales.tsOKLCH感知颜色色阶生成器
component-catalog.ts24个线框组件模板

Done Condition

完成条件

Correct token/component identified + registry consulted before creating new components + sync script passes
已识别正确的令牌/组件 + 创建新组件前已查阅注册表 + 同步脚本执行通过