core-components

# 核心组件 ## 设计系统概览 使用核心库中的组件，而不是原始平台组件。这能确保样式和行为的一致性。 ## 设计令牌 (Design Tokens) **严禁硬编码值。请始终使用设计令牌。** ### 间距令牌 tsx // 正确 - 使用令牌 // 错误 - 硬编码值 | 令牌 | 值 | |-------|-------| | `$1` | 4px | | `$2` | 8px | | `$3` | 12px | | `$4` | 16px | | `$6` | 24px | | `$8` | 32px | ### 颜色令牌 tsx // 正确 - 语义化令牌 // 错误 - 硬编码颜色 | 语义令牌 | 用途 | |----------------|---------| | `$textPrimary` | 主文本 | | `$textSecondary` | 辅助文本 | | `$textTertiary` | 禁用/提示文本 | | `$primary500` | 品牌/强调色 | | `$statusError` | 错误状态 | | `$statusSuccess` | 成功状态 | ### 排版令牌 tsx | 令牌 | 大小 | |-------|------| | `$xs` | 12px | | `$sm` | 14px | | `$md` | 16px | | `$lg` | 18px | | `$xl` | 20px | | `$2xl` | 24px | ## 核心组件 ### Box 支持令牌的基础布局组件： tsx {children} ### HStack / VStack 水平和垂直 Flex 布局： tsx 用户名 标题 内容 ### Text 支持令牌的排版组件： tsx Hello World ### Button 具有变体的交互式按钮： tsx 点击我 | 变体 | 用途 | |---------|---------| | `solid` | 主要操作 | | `outline` | 次要操作 | | `ghost` | 三级/微妙操作 | | `link` | 内联操作 | ### Input 带验证的表单输入： tsx ### Card 内容容器： tsx <Card