你将做出什么
目标是做一套可复用的组件：按钮（Button）+ 导航栏（NavBar）。它们都用 Auto Layout（自动布局）保证自适应，用 Variants（变体）实现状态切换，并且把属性命名做到“看一眼就懂”。
准备：建立组件页与命名规范
- 新建一个页面：Components（组件页）。
- 建立命名约定：用斜杠分层，例如 Button/Primary、NavBar/Item。
- 建议把变体属性统一用英文小写：type、size、state、icon 等，避免出现 状态1/状态2 这种后期不可维护的名字。
Step 1：做基础按钮（Auto Layout）
- 画一个矩形当按钮背景，放一行文字（例如“确认”）。
- 框选背景 + 文字，按 Shift + A 变成 Auto Layout。
- 在右侧面板设置：
- Padding：左右 16，上下 10（可按你的风格调整）。
- Spacing：8（用于后续图标与文字的间距）。
- Horizontal：Hug contents；Vertical：Hug contents。
- 圆角 8，描边/阴影按你的体系设置。
- 把文字样式设为一个可复用的 Text Style（例如 Text/Button）。
Step 2：把按钮变成组件 + 规划 Variants 属性
- 选中按钮 Auto Layout 容器，Create component（创建组件）。
- 复制 3 份作为不同类型：Primary / Secondary / Ghost。
- 选中这 3 个组件，点击 Combine as variants（合并为变体）。
- 在 Variants 面板把默认属性重命名为：
- type：primary / secondary / ghost
- size：sm / md / lg
- state：default / hover / pressed / disabled
- icon：none / leading / trailing
Step 3：补齐 size（尺寸）变体
- 以 md 为基准，复制出 sm / lg。
- 用同一套规则调 padding 与字号：
- sm：左右 12，上下 8，字号 12/14（按你的体系）
- md：左右 16，上下 10
- lg：左右 20，上下 12
- 确保所有 size 都是 Hug contents，避免在不同文案长度下撑不开或被裁切。
Step 4：补齐 state（状态）变体（最常见坑）
- hover：只改背景/描边/阴影，不要改布局参数（padding/spacing），否则交互时会“跳动”。
- pressed：同上，避免组件尺寸变化。
- disabled：降低不透明度或切换到灰阶色板，且把文字对比度保证可读。
小技巧：把颜色都做成 Color Styles（例如 Color/Primary/600），状态只切换样式引用，后期改主题很省心。
Step 5：加入 icon（图标）能力
- 在按钮 Auto Layout 里新增一个 Icon 容器（可以放 16x16 图标）。
- 把 Icon 容器设为固定宽高，图标用矢量并统一对齐。
- 做三种 icon 变体：
- none：隐藏 icon（或把 icon 宽高设为 0；推荐用“隐藏”更直观）
- leading：图标在左，文字在右
- trailing：图标在右，文字在左
Step 6：用同样的方法做导航栏（NavBar）
- 先做一个 NavItem：图标（可选）+ 文本，用 Auto Layout 横向排列。
- 把 NavItem 做成 Variants：
- state：default / active / hover / disabled
- badge：none / dot / number（可选）
- 再做一个 NavBar 容器：把多个 NavItem 放进去，设为 Auto Layout（横向），Spacing 与 padding 统一。
- 需要自适应宽度时：NavItem 设为 Fill container，让它们均分；需要内容自适应时：NavItem 设为 Hug contents。
落库与交付建议
- 给组件加清晰描述（De ion）：写清属性含义与使用场景。
- 把默认值设置为最常用组合（例如 type=primary, size=md, state=default, icon=none）。
- 用组件示例区（Examples）放 6-10 个常见组合，方便团队直接复制。
- 如果你有开发同学：把属性命名与代码 props 对齐（type/size/state/icon），能显著减少沟通成本。
常见问题排查
- 文字被裁切：检查文本是否是 Hug contents，行高是否过小。
- 状态切换会跳动：检查是否在 hover/pressed 里改了 padding/spacing。
- 图标对不齐：把 icon 容器固定宽高，图标居中对齐，避免不同图标外框不一致。
- 组件太难用：减少属性数量，优先覆盖 80% 场景；少做“万能组件”。
