@doubao-apps/ai 0.0.19 → 0.0.20

package/dist/skills/douyin-to-doubao/references/source-framework/components.md

@@ -0,0 +1,252 @@
+# 抖音小程序组件参考
+
+> 本文档为迁移参考，聚焦抖音小程序常用基础组件及其迁移判断。
+> 官方事实优先来源已于 `2026-04-01` 校验。
+
+## 官方文档入口
+
+- 组件概述: `https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/overview/`
+- TTML 数据绑定: `https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/tutorial/miniapp-framework/view/ttml-data-bind`
+- TTML 列表渲染: `https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/tutorial/miniapp-framework/view/ttml-list-draw`
+- TTML 事件: `https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/tutorial/miniapp-framework/view/ttml-event`
+
+---
+
+## 组件通用规则
+
+官方组件概述说明：
+
+- 组件在 `.ttml` 中使用
+- 所有组件与属性名称都是小写，以连字符连接
+- 通用属性包括 `id`、`class`、`style`、`hidden`、`data-*`、`bind* / catch*`
+
+**迁移判断**：
+
+- `class` / `style` 需要重写到 Doubao `className` / `index.scss`
+- `data-*` 可以迁移为 `data-*` 或直接改成闭包传值
+- 事件名从字符串方法名切到 TSX 函数引用
+
+---
+
+## 视图容器
+
+### `view`
+
+官方组件概述将 `view` 描述为“相当于 html 中的 div”。
+
+```ttml
+<view class="container">内容</view>
+```
+
+**迁移**：→ `<view className="container">...</view>`
+
+### `scroll-view`
+
+官方组件概述说明：
+
+- 可实现横向滚动和竖向滚动
+- 竖向滚动时需要给定固定高度
+- 长度单位支持 `px` 和 `rpx`
+
+```ttml
+<scroll-view scroll-y style="height: 400rpx;" bindscrolltolower="loadMore">
+  ...
+</scroll-view>
+```
+
+**迁移**：
+
+- 保留为 `<scroll-view>`
+- 高度放到 `index.scss`
+- 事件改为 `onScrollToLower`
+
+### `swiper` / `swiper-item`
+
+官方组件概述说明：
+
+- `swiper` 为滑块视图容器
+- 内部只允许使用 `swiper-item`
+- `swiper-item` 仅可放在 `swiper` 内，宽高自动为 `100%`
+
+```ttml
+<swiper indicator-dots autoplay>
+  <swiper-item tt:for="{{banners}}" tt:key="id">
+    <image src="{{item.url}}" mode="aspectFill" />
+  </swiper-item>
+</swiper>
+```
+
+**迁移**：
+
+- 当前项目优先保留小写 `<swiper>` / `<swiper-item>` 标签，loader 会自动补齐组件 import
+- 不要把源端 `swiper` 误降级成普通 `scroll-view`
+- 若当前项目确实缺少对应标签能力，再考虑补封装或显式组件方案
+- 若业务依赖抖音端特有行为，单独补兼容说明
+
+### `movable-area` / `movable-view`
+
+官方组件概述说明其为拖拽滑动容器。
+
+**迁移**：当前项目已有 `<movable-area>` / `<movable-view>`，优先直接映射；复杂缩放、越界和动画参数需要逐项校对。
+
+---
+
+## 基础内容
+
+### `text`
+
+```ttml
+<text>标题</text>
+```
+
+**迁移**：→ `<text>标题</text>`
+
+### `rich-text`
+
+源端为富文本组件。
+
+**迁移**：按目标业务决定是保留富文本、转安全渲染，还是降级为普通文本；不要机械展开 HTML 字符串。
+
+---
+
+## 媒体
+
+### `image`
+
+官方组件概述说明支持 `JPG`、`PNG`、`SVG`、`WEBP`、`GIF` 等格式。
+
+```ttml
+<image src="{{imgUrl}}" mode="aspectFill" />
+```
+
+**迁移**：→ `<image src={imgUrl} mode="aspectFill" />`
+
+### `video`
+
+源端为视频组件，并可结合抖音视频能力。
+
+**迁移**：
+
+- 纯播放能力可映射到 Doubao 视频能力
+- 与“发布到抖音视频”“挂载到视频”强绑定的逻辑必须单列处理
+
+### `camera`
+
+官方组件概述标注其为原生组件。
+
+**迁移**：优先查 Doubao 目标侧是否有对应宿主能力；默认视为需专项适配。
+
+---
+
+## 表单
+
+### `button`
+
+```ttml
+<button type="primary" bind:tap="handleSubmit">提交</button>
+```
+
+**迁移**：
+
+- 常规点击按钮 → Doubao 按钮组件或内置按钮
+- `open-type="share"`、授权、手机号、视频挂载等平台能力按钮必须单列
+
+### `input`
+
+官方组件概述将其定义为“用于键盘交互”的输入框组件。
+
+```ttml
+<input value="{{keyword}}" bind:input="handleInput" />
+```
+
+**迁移**：→ `<input value={keyword} onInput={handleInput} />`
+
+### `textarea`
+
+**迁移**：保留为 `<textarea>`，事件改为 TSX 函数引用。
+
+### `switch`
+
+**迁移**：优先使用目标侧小写 `<switch>` 标签；回调语义改成 `onChange(checked)`。
+
+### `slider`
+
+**迁移**：保留滑块语义；回调语义改成 `onChange(value)`。
+
+### `picker` / `picker-view`
+
+源端提供选择器与嵌入式滚动选择器。
+
+**迁移**：
+
+- 优先使用当前项目现成的 `<picker-view>` / `<picker-column>`
+- 弹出式选择器通常配合 `<popup>`、`Dialog` 或业务弹层容器实现
+
+### `checkbox` / `checkbox-group` / `radio` / `radio-group`
+
+源端原生支持。
+
+**迁移**：`radio` / `radio-group` 优先直接使用目标侧小写标签；`checkbox` / `checkbox-group` 当前仍建议替换为受控表单组件或业务封装。
+
+---
+
+## 导航
+
+### `navigator`
+
+官方组件概述将其定义为“页面链接，控制小程序的跳转”。
+
+```ttml
+<navigator url="/pages/detail/index?id={{item.id}}">
+  <view>查看详情</view>
+</navigator>
+```
+
+**迁移**：→ 用 `navigateTo` / `redirectTo` 显式控制跳转，而不是保留标签式导航。
+
+---
+
+## TTML 指令与组件组合
+
+### 数据绑定
+
+官方 TTML 数据绑定示例：
+
+```ttml
+<view>{{ message }}</view>
+<view id="item-{{id}}"></view>
+<view tt:if="{{condition}}"></view>
+```
+
+### 列表渲染
+
+官方 TTML 列表渲染示例：
+
+```ttml
+<view tt:for="{{array}}" tt:key="id">{{item.name}}</view>
+```
+
+**迁移**：
+
+- `{{expr}}` → `{expr}`
+- `tt:if` → 条件表达式
+- `tt:for` / `tt:key` → `.map()` / `key`
+
+---
+
+## 事件与 dataset
+
+官方 TTML 事件文档说明：
+
+- `bind:tap` / `catch:tap` 可绑定事件
+- 事件对象可携带 `id`、`dataset`、`touches`
+- `data-element-type` 会在 `dataset` 中变为 `elementType`
+
+```ttml
+<view data-id="{{item.id}}" bind:tap="handleTap"></view>
+```
+
+**迁移**：
+
+- 简单场景优先闭包传值：`onClick={() => handleTap(item.id)}`
+- 只有在需要完全保留通用事件模型时才继续使用 `data-*`

package/dist/skills/h5-to-doubao/SKILL.md

@@ -39,7 +39,7 @@ description: Migrate H5 projects to Doubao Apps SDK (React Lynx). Supports stand
 | Claude Code | `.claude/skills/doubao-apps-dev` |
 | 其他（Cursor 等） | `.agent/skills/doubao-apps-dev` |
 
-通过 `npx @byted-doubao-apps/ai skills add doubao-apps-dev --agent claude` 安装。
+通过 `npx @doubao-apps/ai skills add doubao-apps-dev --agent claude` 安装。
 
 | 文档 | 路径 | 用途 |
 |------|------|------|
@@ -67,7 +67,9 @@ description: Migrate H5 projects to Doubao Apps SDK (React Lynx). Supports stand
 |------|------|------|
 | `@doubao-apps/framework` | 框架 API 和 React Hooks | `import { definePage, useState } from '@doubao-apps/framework'` |
 | `@doubao-apps/framework/api` | 端能力 API（替代 fetch/localStorage 等） | `import { request, showToast } from '@doubao-apps/framework/api'` |
-| （无需导入组件库） | UI 组件已编译为全局变量 | 直接写 `<button>`, `<switch>`, `<slider>`, `<swiper>` 等小写标签即可 |
+| `@doubao-apps/framework/components` | 目标组件库导出；对已支持的小写标签会由 loader 自动注入 import | `import { PickerView, PickerColumn, RadioGroup, Radio } from '@doubao-apps/framework/components'` |
+
+> 当前项目已支持直接写小写标签：`<view>`、`<text>`、`<image>`、`<input>`、`<textarea>`、`<scroll-view>`、`<list>`、`<list-item>`、`<button>`、`<switch>`、`<slider>`、`<swiper>`、`<swiper-item>`、`<map>`、`<map-marker>`、`<movable-area>`、`<movable-view>`、`<popup>`、`<radio>`、`<radio-group>`、`<picker-view>`、`<picker-column>`、`<web-view>`、`<svg>`。
 
 ### 源框架知识
 
@@ -87,11 +89,11 @@ description: Migrate H5 projects to Doubao Apps SDK (React Lynx). Supports stand
 | `<img>`          | `<image>`                      | 图片              |
 | `<a>`            | `<view onClick={...}>`         | 链接（无 a 标签） |
 | `<ul>/<ol>/<li>` | `<view>` + map                 | 列表              |
-| `<button>`       | `<button>`（内置，无需导入）   | 按钮              |
+| `<button>`       | `<button>`（可直接保留小写标签） | 按钮            |
 | `<input>`        | `<input>`                      | 输入框            |
 | `<textarea>`     | `<textarea>`                   | 多行输入          |
-| `<select>`       | `<switch>` / `<slider>`（内置，无需导入） | 表单控件 |
-| `<svg>`          | `<svg>`（内置，无需导入）      | SVG 图形，直接支持 |
+| `<select>`       | `<picker-view>` / `<picker-column>`（常配合 `<popup>`） | 单选枚举控件 |
+| `<svg>`          | `<svg>`（可直接保留小写标签）  | SVG 图形，直接支持 |
 
 ### 事件映射
 
@@ -147,7 +149,7 @@ ls .agent/skills/doubao-apps-dev/AGENTS.md 2>/dev/null && echo "SKILLS_BASE=.age
 **2. 如未安装，执行安装**：
 
 ```bash
-npx @byted-doubao-apps/ai skills add doubao-apps-dev --agent claude
+npx @doubao-apps/ai skills add doubao-apps-dev --agent claude
 ```
 
 **3. 初始化 Doubao Apps 目标项目**
@@ -308,7 +310,7 @@ HTML 元素：
 
 **A. 公共步骤**
 
-1. **依赖更新**（package.json）：移除 Web 框架相关包，添加 `@byted-doubao-apps/*`
+1. **依赖更新**（package.json）：移除 Web 框架相关包，添加 `@doubao-apps/*`
 2. **入口收敛**：源文件无论来自 React、Vue 还是原生 H5，统一落到 `index.tsx` / `index.scss`
 3. **框架导入转换**：组件/hook 从 `@doubao-apps/framework` 导入，浏览器 API 从 `@doubao-apps/framework/api` 导入
 4. **组件定义转换**：顶层页面组件用 `definePage({})` 包装，子组件输出为 FC

package/dist/skills/weixin-to-doubao/SKILL.md

@@ -1,28 +1,6 @@
 ---
 name: weixin-to-doubao
 description: Migrate WeChat Mini Program (微信小程序) projects to Doubao Apps SDK (React Lynx). Use when converting WeChat Mini Program WXML/WXSS/JS code, or when users request migration from 微信小程序 / WeChat / wx.* APIs.
-
-# 版本化知识管理
-knowledge:
-  source:
-    framework: "weixin"
-    version: "3.x"
-    docs_path: "./references/source-framework/"
-  target:
-    framework: "doubao-apps"
-    package: "@byted-doubao-apps/ai"
-    runtime_package: "@doubao-apps/framework"
-    version: "0.0.1"
-  mapping:
-    version: "1.0.0"
-    last_verified: "2026-03-11"
-    docs_path: "./references/mapping/"
-  fetch:
-    method: "npx"
-    command: "npx @byted-doubao-apps/ai --skills --agent claude"
-    local_path:
-      claude_code: ".claude/skills/doubao-apps-dev"
-      other: ".agent/skills/doubao-apps-dev"
 ---
 
 # 微信小程序 to Doubao Apps Migration Skill
@@ -59,7 +37,7 @@ knowledge:
 | Claude Code | `.claude/skills/doubao-apps-dev` |
 | 其他（Cursor 等） | `.agent/skills/doubao-apps-dev` |
 
-通过 `npx @byted-doubao-apps/ai skills add doubao-apps-dev --agent claude` 安装。
+通过 `npx @doubao-apps/ai skills add doubao-apps-dev --agent claude` 安装。
 
 | 文档 | 路径 | 用途 |
 |------|------|------|
@@ -84,7 +62,9 @@ knowledge:
 |------|------|------|
 | `@doubao-apps/framework` | 框架 API 和 React Hooks | `import { definePage, useState } from '@doubao-apps/framework'` |
 | `@doubao-apps/framework/api` | 端能力 API（替代 wx.*） | `import { request, showToast } from '@doubao-apps/framework/api'` |
-| （无需组件库） | UI 组件已编译为全局变量，**无需导入** | 直接写 `<button>`, `<switch>`, `<slider>`, `<swiper>` 等小写标签即可 |
+| `@doubao-apps/framework/components` | 目标组件库导出；对已支持的小写标签会由 loader 自动注入 import | `import { PickerView, PickerColumn, RadioGroup, Radio } from '@doubao-apps/framework/components'` |
+
+> 当前项目已支持直接写小写标签：`<view>`、`<text>`、`<image>`、`<input>`、`<textarea>`、`<scroll-view>`、`<list>`、`<list-item>`、`<button>`、`<switch>`、`<slider>`、`<swiper>`、`<swiper-item>`、`<map>`、`<map-marker>`、`<movable-area>`、`<movable-view>`、`<popup>`、`<radio>`、`<radio-group>`、`<picker-view>`、`<picker-column>`、`<web-view>`、`<svg>`。
 
 ---
 
@@ -107,7 +87,7 @@ ls .agent/skills/doubao-apps-dev/AGENTS.md 2>/dev/null && echo "SKILLS_BASE=.age
 **2. 如未安装，执行安装**：
 
 ```bash
-npx @byted-doubao-apps/ai skills add doubao-apps-dev --agent claude
+npx @doubao-apps/ai skills add doubao-apps-dev --agent claude
 ```
 
 **3. 初始化 Doubao Apps 目标项目**
@@ -159,9 +139,9 @@ $SKILLS_BASE：.claude/skills/doubao-apps-dev
   ⚠️  需确认：wx.login, wx.getUserProfile (2 个，无直接映射)
 
 组件：
-  ✅ 有映射：view, text, image, button, input, scroll-view (6 个)
-  ❌ 不支持：web-view (1 个，需跳过)
-  ⚠️  需适配：swiper (1 个，需自定义实现)
+  ✅ 有映射：view, text, image, button, input, scroll-view, swiper, web-view (8 个)
+  ⚠️  需适配：picker, checkbox-group (2 个)
+  ⚠️  宿主校验：web-view 白名单、地图/相机等原生能力
 
 复杂度评估：中等
 ```
@@ -197,7 +177,7 @@ $SKILLS_BASE：.claude/skills/doubao-apps-dev
 
 风险点：
   ⚠️  wx.login 无直接映射，需人工决策
-  ❌  web-view 组件不支持，建议移除或替代
+  ⚠️  web-view 需确认宿主支持与白名单配置
 
 是否开始迁移？(y/n)
 ```
@@ -221,7 +201,7 @@ $SKILLS_BASE：.claude/skills/doubao-apps-dev
 
 #### 4.2 单文件转换步骤（每个页面/组件）
 
-1. **依赖更新**（package.json）：移除微信相关包，添加 `@byted-doubao-apps/*`
+1. **依赖更新**（package.json）：移除微信相关包，添加 `@doubao-apps/*`
 2. **import 语句转换**：`wx.*` → `@doubao-apps/framework/api`
 3. **组件定义方式**：`Page({})` → `definePage({})`, `Component({})` → 子组件 FC
 4. **状态管理**：`this.data` + `this.setData()` → `useState()`
@@ -245,11 +225,11 @@ $SKILLS_BASE：.claude/skills/doubao-apps-dev
 ```
 📋 迁移摘要
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-已迁移：14/15 文件
-  └─ 页面：10 个  └─ 组件：4 个
+已迁移：15/15 文件
+  └─ 页面：10 个  └─ 组件：5 个
 
-跳过（不支持）：
-  - pages/webview/webview：web-view 组件不受支持
+需宿主校验：
+  - pages/webview/webview：已保留 `<web-view>`，待确认运行时支持与域名白名单
 
 需人工处理：
   - wx.login × 1 处：无直接映射，请查阅平台登录 API
@@ -333,7 +313,7 @@ const IndexPage: FC = () => {
   return (
     <view style={{ padding: 16 }}>
       <text style={{ fontSize: 18, fontWeight: 'bold' }}>Hello</text>
-      {/* button 是内置元素，无需导入 */}
+      {/* button 可直接保留小写标签，由 components-loader 自动引入 */}
       <button onClick={() => setCount(count + 1)}>
         <text>点击 {count} 次</text>
       </button>
@@ -482,10 +462,10 @@ export const Card: FC<CardProps> = ({ title, desc, onCardTap }) => {
 **原因**：Doubao Apps 使用独立的 bridge API 包
 **解决**：参考 core-api-mapping.md 中的 wx.* → bridge API 映射表
 
-### `<web-view>` 不支持
+### `<web-view>` 运行异常 / 无法打开
 
-**原因**：Lynx 不支持 web-view 组件
-**解决**：使用原生能力 API 打开 webview，或重构该功能
+**原因**：当前 SDK 已提供 `<web-view>` 组件，但是否可用仍取决于宿主能力、白名单和运行时配置
+**解决**：优先保留 `<web-view src="..." />`，若运行侧受限，再退回原生打开页或外链方案
 
 ### 内联样式不生效 / 运行时报错 `CSS length need units`
 

package/dist/skills/weixin-to-doubao/assets/migration-checklist-template.md

@@ -7,7 +7,7 @@
 ## 前置准备
 
 - [ ] 备份原始微信小程序项目
-- [ ] 安装 Doubao Apps 知识库：`npx @byted-doubao-apps/ai --skills --agent claude`
+- [ ] 安装 Doubao Apps 知识库：`npx @doubao-apps/ai --skills --agent claude`
 - [ ] 梳理项目页面列表（来自 `app.json` 的 `pages` 字段）
 - [ ] 梳理自定义组件列表
 - [ ] 识别所有 `wx.*` API 调用，标记无直接映射的 API
@@ -96,13 +96,17 @@
 
 ### 9. 表单组件替换
 
-- [ ] `<button>` → `<button>`（内置，无需导入，`bindtap` → `onClick`）
-- [ ] `<switch>` → `<switch>`（内置，无需导入，`bindchange` → `onChange={(checked)=>...}`）
-- [ ] `<slider>` → `<slider>`（内置，无需导入，`bindchange` → `onChange={(value)=>...}`）
-- [ ] `<swiper>` → `<swiper>`（内置，无需导入，API 有差异，参考 component-mapping.md）
+- [ ] `<button>` → `<button>`（可保留小写标签，loader 自动注入，`bindtap` → `onClick`）
+- [ ] `<switch>` → `<switch>`（可保留小写标签，`bindchange` → `onChange={(checked)=>...}`）
+- [ ] `<slider>` → `<slider>`（可保留小写标签，`bindchange` → `onChange={(value)=>...}`）
+- [ ] `<swiper>` → `<swiper>`（可保留小写标签，API 有差异，参考 component-mapping.md）
 - [ ] `<scroll-view scroll-y>` → `<scroll-view scrollOrientation="vertical">`
-- [ ] `<picker>` → 自定义实现或标记待处理
-- [ ] `<checkbox>/<radio>` → 自定义实现或标记待处理
+- [ ] `<picker>` → `<popup>` + `<picker-view>` / `<picker-column>`，或标记为待处理
+- [ ] `<picker-view>` → `<picker-view>` / `<picker-column>`
+- [ ] `<radio>/<radio-group>` → `<radio>` / `<radio-group>`
+- [ ] `<movable-area>/<movable-view>` → `<movable-area>` / `<movable-view>`
+- [ ] `<web-view>` → `<web-view>`，并补充宿主白名单/运行时校验
+- [ ] `<checkbox>` / `<checkbox-group>` → 自定义实现或标记待处理
 
 ---
 

package/dist/skills/weixin-to-doubao/references/mapping/component-mapping.md

@@ -1,9 +1,9 @@
 # Component Mapping
 
-> **Mapping Version**: 1.1.0
+> **Mapping Version**: 1.2.0
 > **Source Framework**: 微信小程序 (WeChat Mini Program) v3.x
 > **Target Framework**: Doubao Apps (React Lynx)
-> **Last Updated**: 2026-03-16
+> **Last Updated**: 2026-04-02
 
 ---
 
@@ -20,6 +20,17 @@
 
 ---
 
+## 当前项目组件现状
+
+基于 `packages/components/src` 与 `packages/kit/src/builder/loader/components-loader/index.ts`，当前工程已经支持以下小写标签直接写入 TSX，并由 loader 自动从 `@doubao-apps/framework/components` 注入组件 import：
+
+- 基础标签：`<view>`、`<text>`、`<image>`、`<input>`、`<textarea>`、`<scroll-view>`、`<list>`、`<list-item>`、`<svg>`
+- 扩展标签：`<button>`、`<switch>`、`<slider>`、`<swiper>`、`<swiper-item>`、`<map>`、`<map-marker>`、`<movable-area>`、`<movable-view>`、`<popup>`、`<radio>`、`<radio-group>`、`<picker-view>`、`<picker-column>`、`<web-view>`
+
+迁移时优先保留这些小写标签，只有在需要显式类型、ref 或高级封装（如 `Dialog`、`ActionSheet`）时，再按需显式导入组件。
+
+---
+
 ## 布局容器
 
 | 微信小程序 | Doubao Apps | 说明 |
@@ -28,7 +39,7 @@
 | `<block>` | `<>` (Fragment) 或 `<view>` | `<block>` 只是容器不渲染，用 Fragment 替代 |
 | `<scroll-view scroll-y>` | `<scroll-view scrollOrientation="vertical">` | 垂直滚动容器 |
 | `<scroll-view scroll-x>` | `<scroll-view scrollOrientation="horizontal">` | 水平滚动容器 |
-| `<movable-area>` / `<movable-view>` | 无直接映射 | 需自定义手势实现 |
+| `<movable-area>` / `<movable-view>` | `<movable-area>` / `<movable-view>` | 当前项目已有对应组件，优先保留拖拽语义；复杂缩放/越界细节仍需校对 |
 
 ### 容器示例
 
@@ -88,6 +99,8 @@
 |-----------|-------------|------|
 | `<image src mode>` | `<image src mode>` | 图片组件，属性相同 |
 | `<video src>` | `<video src>` | 视频组件 |
+| `<map>` | `<map>` / `<map-marker>` | 当前项目已有地图与标注组件，中心点/覆盖物等 API 需按目标 props 适配 |
+| `<web-view src>` | `<web-view src>` | 当前项目已有 WebView 组件，运行时仍需确认宿主支持与白名单配置 |
 | `<camera>` | 无直接映射 | 需使用相机 API |
 | `<live-player>` | 无直接映射 | 直播播放 |
 | `<live-pusher>` | 无直接映射 | 直播推流 |
@@ -110,19 +123,19 @@
 
 ## 表单组件
 
-> **重要**：`button`、`switch`、`slider` 均为内置元素（编译为全局变量），**无需任何 import**，直接像 `<view>` 一样使用小写标签即可。
+> **重要**：当前工程支持将 `button`、`switch`、`slider`、`swiper`、`radio-group`、`picker-view` 等组件写成小写标签；构建时会由 `components-loader` 自动注入 import，因此迁移代码通常**无需手写 import**。
 
 | 微信小程序 | Doubao Apps | 说明 |
 |-----------|-------------|------|
-| `<button>` | `<button>` | 内置按钮，无需导入 |
+| `<button>` | `<button>` | 可直接保留小写标签 |
 | `<input>` | `<input>` | 原生输入框，属性基本相同 |
 | `<textarea>` | `<textarea>` | 多行输入框 |
-| `<switch>` | `<switch>` | 内置开关，无需导入 |
-| `<slider>` | `<slider>` | 内置滑块，无需导入 |
-| `<picker>` | 无直接映射 | 需用 Dialog + 列表模拟 |
-| `<picker-view>` | 无直接映射 | 需自定义 |
+| `<switch>` | `<switch>` | 可直接保留小写标签 |
+| `<slider>` | `<slider>` | 可直接保留小写标签 |
+| `<picker>` | `<popup>` + `<picker-view>` / `<picker-column>` | 单列/多列选择都可复用现有选择器组件 |
+| `<picker-view>` | `<picker-view>` + `<picker-column>` | 当前项目已有对应组件，支持多列滚动选择 |
 | `<checkbox` / `<checkbox-group>` | 无直接映射 | 需自定义 |
-| `<radio` / `<radio-group>` | 无直接映射 | 需自定义 |
+| `<radio` / `<radio-group>` | `<radio>` / `<radio-group>` | 当前项目已有单选组件，组内回调为 `onValueChange(value)` |
 | `<form>` | 无需 `<form>` 包裹 | 直接管理各字段状态 |
 
 ### 表单示例
@@ -139,7 +152,7 @@
   <button bindtap="handleSubmit" type="primary">提交</button>
 </view>
 
-// After (Doubao Apps) - 无需 import，直接使用小写内置标签
+// After (Doubao Apps) - 直接保留小写标签，loader 会自动补齐组件 import
 const [inputVal, setInputVal] = useState('');
 const [isOn, setIsOn] = useState(false);
 
@@ -255,7 +268,7 @@ import { navigateTo } from '@doubao-apps/framework/api';
 
 ## Swiper 轮播组件
 
-`<swiper>` 和 `<swiper-item>` 是内置元素，**无需导入**，但 API 与微信小程序不同：
+当前工程支持直接写 `<swiper>` 和 `<swiper-item>`，构建时会自动注入组件 import；但 API 与微信小程序不同：
 
 ```tsx
 // Before (微信小程序)
@@ -265,7 +278,7 @@ import { navigateTo } from '@doubao-apps/framework/api';
   </swiper-item>
 </swiper>
 
-// After (Doubao Apps) - 使用内置 swiper 元素，无需导入
+// After (Doubao Apps) - 保留小写 swiper 标签
 <swiper
   data={banners}
   itemWidth={375}
@@ -285,14 +298,18 @@ import { navigateTo } from '@doubao-apps/framework/api';
 
 ---
 
-## 支持的扩展内置元素
+## 当前工程已支持的小写标签
 
-以下元素是 Lynx 内置的，**无需导入**，可直接在 JSX 中使用：
+以下标签在当前项目中可以直接写入 JSX，由 loader 自动映射到组件库导出：
 
-| 元素 | 说明 |
+| 标签 | 说明 |
 |------|------|
-| `<map>` | 地图（微信小程序 `<map>` 的替代） |
-| `<map-marker>` | 地图标注点 |
+| `<map>` / `<map-marker>` | 地图与标注点 |
+| `<movable-area>` / `<movable-view>` | 拖拽与缩放容器 |
+| `<picker-view>` / `<picker-column>` | 多列滚动选择器 |
+| `<radio>` / `<radio-group>` | 单选组件 |
+| `<swiper>` / `<swiper-item>` | 轮播组件 |
+| `<web-view>` | WebView 容器 |
 | `<svg>` | SVG 图形，支持标准 SVG 子元素（`<path>`, `<rect>`, `<circle>` 等） |
 
 ---
@@ -301,9 +318,7 @@ import { navigateTo } from '@doubao-apps/framework/api';
 
 | 微信小程序组件 | 处理方案 |
 |--------------|---------|
-| `<web-view>` | 不支持，移除或使用原生 WebView API |
 | `<canvas>` | 有限支持，检查文档 |
 | `<open-data>` | 不支持，使用平台用户信息 API |
 | `<official-account>` | 不支持 |
 | `<ad>` | 不支持 |
-