# 豆包智能服务组件 API

## 核心规则

所有组件使用**小写标签**，`components-loader` 在构建时自动注入 import，业务代码不需要手动 import 运行时组件：

```tsx
// ✅ 直接使用小写标签
<view><text>你好</text><button text="提交" /></view>

// ❌ 不要手动 import 运行时组件
import { View, Button } from '@doubao-dev/framework/components';
```

类型标注可以 import：

```tsx
import type { ButtonProps, SwiperRef, VideoRef, PopupRef } from '@doubao-dev/framework/components';
```

## 参考文档

| 类别 | 文件 | 涵盖标签 |
|------|------|---------|
| 滚动与列表 | [scroll-list.md](scroll-list.md) | `scroll-view` `list` `list-item` `swiper` `swiper-item` |
| 容器与覆层 | [container-overlay.md](container-overlay.md) | `view` `popup` `movable-area` `movable-view` `theme-provider` |
| 文本与媒体 | [text-media.md](text-media.md) | `text` `image` `svg` `video` `long-image` `web-view` |
| 交互控件 | [interactive-controls.md](interactive-controls.md) | `button` `switch` `slider` `radio` `radio-group` |
| 表单控件 | [form-controls.md](form-controls.md) | `input` `textarea` `picker-view` `picker-column` `picker-divider` |
| 地图与画布 | [map-canvas.md](map-canvas.md) | `map` `map-marker` `canvas` |

## 常见错误

| 错误 | 修正 |
|------|------|
| 手动 import 运行时组件 | 直接用小写标签，loader 自动注入 |
| `<list>` 没设置 height | 必须 `style={{ height: '...' }}`，list 不支持自适应高度 |
| `list-item` 没传 `item-key` | item-key 是必填项（原生 Lynx 元素，连字符属性名） |
| `picker-view` 高度只写在 CSS class | 必须同时写 `style={{ height: '...' }}` |
| `slider` 不传 value | slider 仅支持受控用法 |
| `image` 没设置 width/height 也没设 autoSize | 不满足条件图片不显示 |
| `popup` 没传 scrollContainerId | scrollContainerId 是必填项 |
| `long-image` 接外部滚动容器直接传外层 scrollTop | 有 header 时需减去 header 高度 |