tt-design-web-vue 0.1.0

package/docs/component-manifest.json

@@ -0,0 +1,100 @@
+{
+  "schemaVersion": "1.0",
+  "scope": "entry-export-compatibility",
+  "sources": {
+    "react": {
+      "reference": "tt-design/src/components/index.js",
+      "componentImportLines": "2-75",
+      "componentExportLines": "80-154",
+      "runtimeAliasLines": [77, 115]
+    },
+    "vue": {
+      "reference": "src/index.ts",
+      "runtimeExportLines": "1-114",
+      "typeOnlyExportLines": [2, 6, 8, 14, 17, 23, 28, 29, 32, 41, 43, 56, 59, 64, 69, 71, 74, 76, 79, 81, 84, 88, 90, 92, 97, 101, 104, 106, 108, 114]
+    }
+  },
+  "summary": {
+    "reactBaselineComponentCount": 74,
+    "reactPublicRuntimeExportCount": 75,
+    "vueRuntimeComponentExportCount": 109,
+    "vueDefaultReexports": 83,
+    "vueNamedRuntimeExports": 26,
+    "exactNameCount": 0,
+    "ttPrefixedMappingCount": 70,
+    "aliasCandidateCount": 2,
+    "missingCount": 1,
+    "nonEquivalentCount": 1
+  },
+  "mappingPolicy": {
+    "exact-name": "React 基线名称映射到 Vue 根入口的 Tt 前缀导出（例如 Button → TtButton）；不表示 props、事件、插槽、静态方法或行为已验证。",
+    "alias-candidate": "入口名称不同但可作为候选迁移映射；必须进行 API 级复核。",
+    "missing": "React 基线导出在 Vue 根入口不存在。",
+    "non-equivalent": "存在相关能力，但公开导出结构不同，不能直接替换。"
+  },
+  "exactNameComponents": [
+    "Alert", "Anchor", "Avatar", "BackTop", "Badge", "Breadcrumb", "Button", "Calendar", "Card", "Carousel", "Checkbox", "Collapse", "Comment", "Color", "ColorPicker", "DatePicker", "Descriptions", "Divider", "Empty", "Drawer", "Dropdown", "FilePreview", "FloatButton", "Font", "Form", "Icon", "Image", "Input", "List", "Menu", "Masonry", "Message", "Money", "Notification", "Pagination", "Popconfirm", "Popover", "Progress", "Radio", "Layout", "Row", "Select", "Space", "Segmented", "Skeleton", "Spin", "Steps", "Switch", "Tag", "Timeline", "Tooltip", "Tour", "Tree", "Watermark", "InputNumber", "Cascader", "Splitter", "Table", "Tabs", "Rate", "Result", "Statistic", "CardSelect", "Upload", "QRCode", "Plate", "Chart", "TimePicker", "Transfer", "TreeSelect"
+  ],
+  "mappings": {
+    "aliasCandidates": [
+      {
+        "react": "A",
+        "vue": "Link",
+        "reactLine": 80,
+        "vueLine": 50,
+        "note": "AnchorLink 是 Anchor 的 Vue 命名子组件导出，不是 A 的对应项。"
+      },
+      {
+        "react": "Modal",
+        "vue": "Dialog",
+        "reactLine": 116,
+        "vueLine": 34,
+        "note": "需要验证 props、静态方法和受控行为。"
+      }
+    ],
+    "missing": [
+      {
+        "react": "ScriptEditor",
+        "reactLine": 110,
+        "vue": null,
+        "note": "Vue 入口没有对应运行时导出。"
+      }
+    ],
+    "nonEquivalent": [
+      {
+        "react": "Grid",
+        "reactLine": 106,
+        "vue": ["Row", "Col"],
+        "vueLine": 45,
+        "note": "Vue 未导出顶层 Grid；Row 可独立精确映射 React Row，Col 是 Vue 的额外公开导出。"
+      }
+    ]
+  },
+  "reactNonComponentRuntimeExports": [
+    {
+      "name": "message",
+      "aliasOf": "Message",
+      "declarationLine": 77,
+      "exportLine": 115,
+      "vueEquivalent": null,
+      "note": "Vue 只导出大写 Message，不能自动标为小写 message API 的等价物。"
+    }
+  ],
+  "vueOnly": {
+    "defaultExtensions": [
+      {"name": "TtActivityFeed", "line": 1, "category": "business/domain candidate"},
+      {"name": "TtAttachmentList", "line": 6, "category": "business/domain candidate"},
+      {"name": "TtContainer", "line": 29, "category": "Element Plus layout container"},
+      {"name": "TtEChartsWrapper", "line": 22, "category": "chart adapter/extension"},
+      {"name": "TtLoading", "line": 89, "category": "Element Plus loading container"},
+      {"name": "TtQueryForm", "line": 67, "category": "business/domain candidate"},
+      {"name": "TtRichText", "line": 75, "category": "WangEditor rich-text editor"},
+      {"name": "TtSearchFilter", "line": 77, "category": "business/domain candidate"},
+      {"name": "TtTopicSwitch", "line": 100, "category": "business/domain candidate"},
+      {"name": "TtUserDisplay", "line": 110, "category": "business/domain candidate"}
+    ],
+    "namedCompositeOrSubcomponentExports": [
+      {"name": "TtAnchorLink", "line": 4}, {"name": "TtAvatarGroup", "line": 7}, {"name": "TtBreadcrumbItem", "line": 11}, {"name": "TtCarouselItem", "line": 19}, {"name": "TtCheckboxGroup", "line": 22}, {"name": "TtCollapseItem", "line": 30}, {"name": "TtDescriptionsItem", "line": 33}, {"name": "TtDropdownItem", "line": 37}, {"name": "TtDropdownMenu", "line": 37}, {"name": "TtFormItem", "line": 44}, {"name": "TtCol", "line": 45}, {"name": "TtListItem", "line": 49}, {"name": "TtMenuItem", "line": 57}, {"name": "TtMenuItemGroup", "line": 57}, {"name": "TtSubMenu", "line": 57}, {"name": "TtRadioButton", "line": 70}, {"name": "TtRadioGroup", "line": 70}, {"name": "TtSkeletonItem", "line": 82}, {"name": "TtSplitterPanel", "line": 85}, {"name": "TtTableColumn", "line": 93}, {"name": "TtTableOperationColumn", "line": 93}, {"name": "TtTabPane", "line": 94}, {"name": "TtTimelineItem", "line": 98}, {"name": "TtTourStep", "line": 102}, {"name": "TtStep", "line": 113}
+    ]
+  }
+}

package/docs/components/button.md

@@ -0,0 +1,32 @@
+# Button
+
+从根入口导入：
+
+```ts
+import { TtButton } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<template>
+  <tt-button>默认按钮</tt-button>
+  <tt-button type="primary">主要操作</tt-button>
+  <tt-button type="primary" disabled>不可用</tt-button>
+</template>
+```
+
+可交互预览、参数 Controls 与完整状态示例见本地 Storybook：`yarn storybook`。
+
+## API
+
+`TtButton` 是 `ElButton` 的样式封装，根节点使用 `tt-button` 类名。
+
+| 项目 | 说明 |
+| --- | --- |
+| Props | 源码未显式声明。传入的属性通过 `$attrs` 原样透传给 `ElButton`。 |
+| Events | 源码未显式声明；由 `ElButton` 的透传行为决定。 |
+| Slots | `default`。 |
+| Expose | 无。 |
+
+Element Plus 原生属性的可用范围以宿主使用的 Element Plus 版本文档为准。

package/docs/components/chart.md

@@ -0,0 +1,37 @@
+# Chart 图表
+
+基于 ECharts 的通用图表组件，支持折线、柱状、饼图、散点、雷达、仪表、漏斗、桑基、树图、热力图及 ECharts 的其他图表配置。
+
+```vue
+<script setup lang="ts">
+import { TtChart } from 'tt-design-web-vue';
+
+const option = {
+  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'line', data: [120, 200, 150] }],
+};
+</script>
+
+<template>
+  <tt-chart :option="option" theme="geekBlue" :height="360" />
+</template>
+```
+
+## API
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| option | ECharts 配置项 | `EChartsOption` | 必填 |
+| theme | TT 预设主题名或 ECharts 主题对象 | `ChartTheme` | `geekBlue` |
+| height | 图表高度 | `number \| string` | `300` |
+| loading | 是否显示加载层 | `boolean` | `false` |
+| loadingOptions | ECharts 加载配置 | `object` | `{}` |
+| onEvents | ECharts 事件映射 | `Record<string, Function>` | `{}` |
+| notMerge | 更新时是否不合并旧配置 | `boolean` | `false` |
+| lazyUpdate | 是否延迟更新 | `boolean` | `false` |
+| autoResize | 是否随容器尺寸缩放 | `boolean` | `true` |
+
+## 实例方法
+
+通过组件 `ref` 可调用 `getEchartsInstance`、`resize`、`setOption`、`dispatchAction`、`convertToPixel` 与 `convertFromPixel`。

package/docs/components/container.md

@@ -0,0 +1,28 @@
+# Container 容器
+
+`TtContainer` 是 Element Plus `ElContainer` 的薄包装，用于组织页面的头部、侧栏、主内容与底部区域。
+
+```ts
+import { TtContainer } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<template>
+  <tt-container direction="vertical">
+    <el-header>顶部</el-header>
+    <el-main>内容</el-main>
+    <el-footer>底部</el-footer>
+  </tt-container>
+</template>
+```
+
+## API
+
+| 项目 | 说明 |
+| --- | --- |
+| Props | 本组件未显式声明属性，`$attrs` 透传至当前 Element Plus 的 `ElContainer`，包括 `direction`。 |
+| Slots | `default`。 |
+
+Element Plus 的完整属性和子区域组件以宿主使用的 Element Plus 版本为准。

package/docs/components/dialog.md

@@ -0,0 +1,46 @@
+# Dialog
+
+从根入口导入：
+
+```ts
+import { TtDialog } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TtButton, TtDialog } from 'tt-design-web-vue';
+
+const visible = ref(false);
+</script>
+
+<template>
+  <tt-button type="primary" @click="visible = true">打开弹窗</tt-button>
+  <tt-dialog v-model="visible" title="确认操作" width="420px">
+    内容
+    <template #footer>
+      <tt-button @click="visible = false">取消</tt-button>
+      <tt-button type="primary" @click="visible = false">确认</tt-button>
+    </template>
+  </tt-dialog>
+</template>
+```
+
+可交互预览、受控开关与头部/底部插槽示例见本地 Storybook：`yarn storybook`。
+
+## API
+
+| 类别 | 名称 | 类型 / 说明 |
+| --- | --- | --- |
+| Prop | `modelValue` | `boolean`，用于控制内部 `ElDialog` 的 `v-model`。 |
+| Event | `update:modelValue` | 由 `defineModel` 提供。 |
+| Slot | `header` | 转发 Element Plus header slot 的 slot props。 |
+| Slot | `default` | 弹窗主体内容。 |
+| Slot | `footer` | 弹窗底部内容。 |
+| Expose | `dialogRef` | 内部 Dialog 实例引用。 |
+
+组件未暴露 `open()`、`close()` 等实例方法，也未定义服务式 Dialog API。其他属性通过 `$attrs` 透传给 `ElDialog`。
+
+**源码依据**：`src/components/Dialog/Dialog.vue:2-27`；`src/components/Dialog/index.ts:1`；`src/index.ts:33`。

package/docs/components/echarts-wrapper.md

@@ -0,0 +1,46 @@
+# EChartsWrapper
+
+从根入口导入：
+
+```ts
+import { TtEChartsWrapper } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<script setup lang="ts">
+import { TtEChartsWrapper } from 'tt-design-web-vue';
+
+const option = {
+  xAxis: { type: 'category', data: ['A'] },
+  yAxis: { type: 'value' },
+  series: [{ type: 'line', data: [1] }],
+};
+</script>
+
+<template>
+  <tt-e-charts-wrapper :option="option" />
+</template>
+```
+
+## Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `option` | `EChartsOption` | — | 必填。初始化时通过 `setOption` 写入，并被深度监听以更新图表。 |
+| `height` | `number \| string` | `300` | 图表容器高度；数字值会转换为像素。 |
+
+## 生命周期与 API
+
+| 类别 | 项目 | 说明 |
+| --- | --- | --- |
+| Events | — | 源码未声明 emits。 |
+| Slots | — | 源码未声明 slots。 |
+| Expose | — | 未暴露图表 instance、初始化、更新或 resize 方法。 |
+| 内部行为 | 图表模块 | 内部注册柱状、折线、饼图、散点图及常用 ECharts 组件，渲染器为 Canvas。 |
+| 内部行为 | 清理 | 自动监听尺寸变化，并在组件卸载时销毁图表实例。 |
+
+如需直接调用 ECharts 实例方法，当前组件没有公开 expose；这是后续 API 扩展项。
+
+**源码依据**：`src/components/EChartsWrapper/EChartsWrapper.vue:2,5-90`；`src/components/EChartsWrapper/index.ts:1`；`src/index.ts:21`。

package/docs/components/form.md

@@ -0,0 +1,67 @@
+# Form
+
+从根入口导入：
+
+```ts
+import { TtForm, TtFormItem } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TtButton, TtForm, TtFormItem, TtInput } from 'tt-design-web-vue';
+
+const name = ref('');
+</script>
+
+<template>
+  <tt-form label-width="72px">
+    <tt-form-item label="名称">
+      <tt-input v-model="name" placeholder="请输入名称" />
+    </tt-form-item>
+    <tt-form-item>
+      <tt-button type="primary">保存</tt-button>
+    </tt-form-item>
+  </tt-form>
+</template>
+```
+
+可交互预览、组合表单与标签插槽示例见本地 Storybook：`yarn storybook`。
+
+## Form API
+
+`TtForm` 将未显式声明的属性透传至 `ElForm`。
+
+| 项目 | 说明 |
+| --- | --- |
+| Props | 源码未显式声明；通过 `$attrs` 透传给 `ElForm`。 |
+| Events | 源码未显式声明。 |
+| Slots | `default`。 |
+| Expose | `formRef`、`validate(...unknown[])`、`validateField(...unknown[])`、`resetFields(...unknown[])`、`clearValidate(...unknown[])`、`scrollToField(...unknown[])`。 |
+
+暴露的方法会通过可选链调用内部 Element Plus 表单实例；其返回类型与完整参数规则由当前 Element Plus 版本决定。
+
+```ts
+formRef.value?.resetFields();
+```
+
+## FormItem API
+
+`TtFormItem` 将未显式声明的属性透传至 `ElFormItem`。
+
+| 项目 | 说明 |
+| --- | --- |
+| Props | 源码未显式声明；通过 `$attrs` 透传给 `ElFormItem`。 |
+| Events | 源码未显式声明。 |
+| Slots | `default`、`label`、`error`。 |
+| Expose | 无。 |
+
+```vue
+<tt-form-item>
+  <template #label>名称</template>
+</tt-form-item>
+```
+
+**源码依据**：`src/components/Form/Form.vue:2,7-44`；`src/components/Form/FormItem.vue:2-22`；`src/components/Form/index.ts:1-5`；`src/index.ts:43`。

package/docs/components/grid.md

@@ -0,0 +1,32 @@
+# Grid
+
+Vue 当前没有名为 `Grid` 的默认组件。根入口仅提供 `Row` 和 `Col`：
+
+```ts
+import { TtRow, TtCol } from 'tt-design-web-vue';
+```
+
+这与 React 基线的顶层 `Grid` 不等价，详见 [组件兼容清单](../component-compatibility#需单独验证的映射)。
+
+## 示例
+
+```vue
+<template>
+  <tt-row>
+    <tt-col>内容</tt-col>
+  </tt-row>
+</template>
+```
+
+## Row 与 Col API
+
+| 项目 | Row | Col |
+| --- | --- | --- |
+| Props | 源码未显式声明；`$attrs` 透传 `ElRow`。 | 源码未显式声明；`$attrs` 透传 `ElCol`。 |
+| Events | 源码未显式声明。 | 源码未显式声明。 |
+| Slots | `default`。 | `default`。 |
+| Expose | `rowRef`。 | `colRef`。 |
+
+Element Plus 的行列属性由宿主所使用的 Element Plus 版本决定。
+
+**源码依据**：`src/components/Grid/Row.vue:2-19`；`src/components/Grid/Col.vue:2-19`；`src/components/Grid/index.ts:1-2`；`src/index.ts:44`。

package/docs/components/icon.md

@@ -0,0 +1,45 @@
+# Icon
+
+从根入口导入：
+
+```ts
+import { TtIcon } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<script setup lang="ts">
+import { Star } from '@element-plus/icons-vue';
+import { TtIcon } from 'tt-design-web-vue';
+</script>
+
+<template>
+  <tt-icon :icon="Star" size="28" color="linear-gradient(135deg, #667eea 0%, #764ba2 100%)" />
+  <tt-icon iconfont="iconfont icon-search" size="28" color="#3388ff" label="搜索" />
+</template>
+```
+
+`iconfont` 传入的是已加载 Iconfont 样式表中的类名；图标字体文件与 CSS 由宿主项目自行引入。
+
+## Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `icon` | `Component \| string` | — | Element Plus 图标组件或字符串回退内容。 |
+| `iconfont` | `string` | `''` | Iconfont 的 CSS 类名，可包含多个类名。 |
+| `size` | `number \| string` | — | 透传给 `ElIcon` 的图标尺寸。 |
+| `color` | `string` | — | 普通 CSS 颜色；传入 `linear-gradient(...)` 或 `radial-gradient(...)` 时渲染渐变色。 |
+| `spin` | `boolean` | `false` | 是否持续旋转。 |
+| `inline` | `boolean` | `true` | 是否以内联方式展示。 |
+| `label` | `string` | `''` | 无障碍标签；设置后渲染为 `aria-label`。 |
+
+## 插槽
+
+| 名称 | 说明 |
+| --- | --- |
+| `default` | 自定义图标内容；优先于 `icon` 与 `iconfont`。 |
+
+未显式声明的属性会通过 `$attrs` 透传给 `ElIcon`。
+
+**源码依据**：`src/components/Icon/Icon.vue`；`src/components/Icon/index.ts`；`src/index.ts`。

package/docs/components/index.md

@@ -0,0 +1,36 @@
+# 组件
+
+首批组件页面以迁入后的 `src/` 为事实来源，记录公开导出、props、事件、插槽与实例方法。无法从源码确认的能力不会在文档中推断。
+
+需要查看真实组件、调节 Props Controls 或检查不同状态时，在项目根目录运行 `yarn storybook`；VitePress 页面只保留可复制的最小用法与 API 边界。
+
+## 表单与输入
+
+- [Button](./button)
+- [Form](./form)
+- [Select](./select)
+- [Upload](./upload)
+- [RichText](./rich-text)
+
+## 数据展示与布局
+
+- [Icon](./icon)
+- [Table](./table)
+- [Grid](./grid)
+- [Container](./container)
+- [EChartsWrapper](./echarts-wrapper)
+- [Chart](./chart)
+- [QRCode](./qr-code)
+
+## 反馈
+
+- [Dialog](./dialog)
+- [Loading](./loading)
+- [Message](./message)
+
+## 使用约定
+
+1. 组件统一从 `tt-design-web-vue` 根入口按需导入。
+2. 宿主先加载 `element-plus/dist/index.css`，再加载 `tt-design-web-vue/style.css`。
+3. wrapper 未显式声明的属性通常通过 `$attrs` 透传给 Element Plus；具体可用属性以当前 Element Plus 版本文档为准。
+4. 本库的公开 API 仍以 `src/index.ts` 为准；子组件和类型导出会在对应页面中单独标出。

package/docs/components/loading.md

@@ -0,0 +1,46 @@
+# Loading
+
+`TtLoading` 是 Element Plus Loading 的 Vue 容器组件。它只提供 `.tt-loading` 根节点和 `$attrs` 透传，不定义自研加载属性；加载状态仍由 Element Plus 的 `v-loading` 指令控制。
+
+## 局部加载
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TtLoading } from 'tt-design-web-vue';
+
+const loading = ref(true);
+</script>
+
+<template>
+  <tt-loading v-loading="loading" element-loading-text="正在加载">
+    内容区域
+  </tt-loading>
+</template>
+```
+
+`v-loading` 支持 Element Plus 当前版本提供的 `element-loading-text`、`element-loading-background`、`element-loading-spinner` 等指令属性。
+
+## 全屏加载
+
+```ts
+import { ElLoadingService } from 'tt-design-web-vue';
+
+const instance = ElLoadingService({
+  lock: true,
+  text: '正在加载',
+  background: 'rgba(255, 255, 255, 0.72)',
+});
+
+instance.close();
+```
+
+## API
+
+| 导出 | 说明 |
+| --- | --- |
+| `TtLoading` | Element Plus Loading 的 Vue 容器组件；指令和服务仍通过 `ElLoadingDirective`、`ElLoadingService` 使用。 |
+| `ElLoadingDirective` | Element Plus 的 `v-loading` 指令。 |
+| `ElLoadingService(options)` | 创建 Loading 实例，返回的实例可调用 `close()`。 |
+
+`LoadingOptions`、`LoadingInstance`、`LoadingOptionsResolved` 和 `LoadingParentElement` 类型也从根入口导出；具体参数和默认行为以当前 Element Plus 版本为准。

package/docs/components/message.md

@@ -0,0 +1,26 @@
+# Message
+
+`TtMessage` 是服务式反馈 API，而不是 Vue SFC。
+
+```ts
+import { TtMessage } from 'tt-design-web-vue';
+
+TtMessage('保存成功');
+```
+
+## API
+
+| 方法 | 参数 | 说明 |
+| --- | --- | --- |
+| `TtMessage(options)` | `string \| number \| boolean \| Record<string, any>` | 创建默认类型消息。标量会规范化为 `{ type, message, customClass: 'tt-message' }`。 |
+| `TtMessage.success(options)` | 同上 | 创建成功消息。 |
+| `TtMessage.warning(options)` | 同上 | 创建警告消息。 |
+| `TtMessage.info(options)` | 同上 | 创建信息消息。 |
+| `TtMessage.error(options)` | 同上 | 创建错误消息。 |
+| `TtMessage.closeAll()` | — | 转发 `ElMessage.closeAll`。 |
+
+对象参数会被展开，并与 TT 默认 `customClass` 合并。底层 `ElMessage` 的完整配置与返回 handler 类型由当前 Element Plus 版本决定。
+
+`TtMessage` 不具有 props、emits、slots 或 Vue 实例 expose。
+
+**源码依据**：`src/components/Message/index.ts:6-35`；`src/index.ts:52`。

package/docs/components/qr-code.md

@@ -0,0 +1,49 @@
+# QRCode
+
+从根入口导入：
+
+```ts
+import { TtQRCode } from 'tt-design-web-vue';
+import type { QRCodeLevel, QRCodeStatus } from 'tt-design-web-vue';
+```
+
+## 示例
+
+```vue
+<template>
+  <tt-q-r-code value="https://example.com" />
+</template>
+```
+
+## Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `value` | `string` | `''` | 二维码内容；为空时会清除生成的 data URL。 |
+| `size` | `number` | `156` | CSS 变量和二维码生成宽高。 |
+| `level` | `QRCodeLevel` | `'M'` | 纠错等级。 |
+| `status` | `QRCodeStatus` | `'active'` | 控制正常、加载、过期状态。 |
+| `bordered` | `boolean` | `true` | 是否添加边框样式。 |
+| `description` | `string` | `''` | 描述文本的后备内容。 |
+| `refreshText` | `string` | `'刷新'` | 过期状态刷新按钮的文案。 |
+| `alt` | `string` | `''` | 图片替代文本；为空时使用 `QRCode: ${value}`。 |
+
+```ts
+export type QRCodeLevel = 'L' | 'M' | 'Q' | 'H';
+export type QRCodeStatus = 'active' | 'expired' | 'loading';
+```
+
+## Events、插槽与实例方法
+
+| 类别 | 项目 | 说明 |
+| --- | --- | --- |
+| Event | `refresh` | 过期态默认刷新按钮会触发该事件。 |
+| Slot | `loading` | 加载状态内容；默认文案为“生成中”。 |
+| Slot | `expired` | 过期状态内容及刷新区域。 |
+| Slot | `icon` | 二维码中央图标。 |
+| Slot | `description` | 描述内容；优先于 `description` prop。 |
+| Expose | — | 无。`toDataURL` 仅在内部 watcher 中调用。 |
+
+未显式声明的额外属性会通过 `$attrs` 透传到外层容器。
+
+**源码依据**：`src/components/QRCode/QRCode.vue:2-88`；`src/components/QRCode/index.ts:1-2`；`src/index.ts:67-68`。

package/docs/components/rich-text.md

@@ -0,0 +1,65 @@
+# RichText 富文本编辑器
+
+`TtRichText` 基于 WangEditor 开发，提供完整的富文本工具栏与编辑能力，并使用 TT Design 的视觉样式。
+
+从根入口导入：
+
+```ts
+import { TtRichText } from 'tt-design-web-vue';
+import type { RichTextTool } from 'tt-design-web-vue';
+// wangEditor 基础样式未包含在全量 style.css 中，使用 RichText 时需额外引入：
+import 'tt-design-web-vue/rich-text.css';
+```
+
+> wangEditor 为浏览器专属依赖，TtRichText 在组件挂载后才动态加载它；SSR/Node 环境导入包入口不会触发加载，也不会因 `global.navigator` 报错。
+
+## 示例
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { TtRichText } from 'tt-design-web-vue';
+
+const content = ref('<p>请输入内容...</p>');
+</script>
+
+<template>
+  <tt-rich-text v-model="content" placeholder="请输入内容..." style="max-width: 720px" />
+</template>
+```
+
+可交互预览、工具栏组合和只读状态见本地 Storybook：`yarn storybook`。
+
+## Props
+
+| 名称 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `modelValue` | `string` | `''` | 编辑器 HTML 内容，支持 `v-model`。 |
+| `placeholder` | `string` | `'请输入内容...'` | 空内容时的占位文案。 |
+| `disabled` | `boolean` | `false` | 是否禁用编辑和工具栏。 |
+| `readonly` | `boolean` | `false` | 是否以只读方式展示内容；只读时不显示工具栏。 |
+| `minHeight` | `number \| string` | `200` | 编辑区域最小高度；数值按 px 处理。 |
+| `toolbar` | `RichTextTool[]` | — | 自定义精简工具栏；未传入时使用 WangEditor 默认工具栏，`divider` 为分隔线。 |
+
+```ts
+export type RichTextTool =
+  | 'bold' | 'italic' | 'underline' | 'strike'
+  | 'heading1' | 'heading2'
+  | 'unorderedList' | 'orderedList'
+  | 'alignLeft' | 'alignCenter' | 'alignRight'
+  | 'link' | 'removeFormat' | 'divider';
+```
+
+## Events 与实例方法
+
+| 类别 | 项目 | 说明 |
+| --- | --- | --- |
+| Event | `update:modelValue` | 编辑内容变化时由 `defineModel` 触发。 |
+| Event | `change` | 编辑内容变化时触发，参数为 HTML 字符串。 |
+| Event | `focus` / `blur` | 编辑区获得或失去焦点时触发。 |
+| Event | `clear` | 调用 `clear()` 清空成功后触发。 |
+| Expose | `focus()` / `blur()` | 控制编辑区焦点。 |
+| Expose | `clear()` | 清空编辑器内容。 |
+| Expose | `getHtml()` / `setHtml(value)` | 读取或更新当前 HTML 内容。 |
+
+**源码依据**：`src/components/RichText/RichText.vue`、`src/components/RichText/index.ts`、`src/index.ts`。