@zfqh/uniapp 0.1.1

package/docs/components/g-skeleton.md

@@ -0,0 +1,64 @@
+# g-skeleton 骨架屏
+
+::: tip 组件名
+`g-skeleton`
+
+发布路径：`@zfqh/uniapp/lib/components/g-skeleton/g-skeleton.vue`
+:::
+
+骨架屏容器，提供统一背景和高度。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-skeleton bg-color="#fff" :custom-style="{ padding: '24rpx' }">
+    <g-skeleton-view height="44rpx" width="350rpx" border-radius="8rpx" />
+    <g-skeleton-view height="70rpx" border-radius="100rpx" margin-top="20rpx" />
+    <g-skeleton-view height="356rpx" border-radius="20rpx" margin-top="24rpx" />
+  </g-skeleton>
+</template>
+```
+
+## API
+
+### 骨架屏 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
+| `height` | `String` | `'auto'` | 否 | 高度。 |
+| `bgColor` | `String` | `() => color.bgColor` | 否 | 背景颜色。 |
+
+### 骨架屏 Events
+
+无显式组件事件。
+
+### 骨架屏 Slots
+
+| 插槽 | 说明 |
+| --- | --- |
+| `default` | 默认内容区域。 |
+
+### 骨架屏 Methods
+
+无 Options API methods。
+
+### 骨架屏 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `style` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |

package/docs/components/g-tag-editor.md

@@ -0,0 +1,134 @@
+# g-tag-editor 标签编辑器
+
+::: tip 组件名
+`g-tag-editor`
+
+发布路径：`@zfqh/uniapp/lib/components/g-tag-editor/g-tag-editor.vue`
+:::
+
+标签输入/搜索/选择编辑器，支持标签模式、输入模式、禁用、分隔符、候选项和自定义列表。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-tag-editor
+    v-model="describedList"
+    mode="tag"
+    :data="diseaseLabels"
+    :separate="false"
+    input-bg-color="#fff"
+    active-color="var(--primary)"
+    inactive-color="#E8F4F1"
+    placeholder="请输入主诉症状"
+    @search="searchLabels"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const describedList = ref(['咳嗽']);
+const diseaseLabels = ref([
+  { label: '咳嗽', value: 'cough' },
+  { label: '乏力', value: 'fatigue' },
+]);
+
+function searchLabels(keyword) {
+  labelApi.search({ keyword });
+}
+</script>
+```
+
+## API
+
+### 标签编辑器 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `mode` | `String` | `'text'` | 否 | 组件模式，不同组件含义不同；例如 popup 方位、tag-editor 编辑模式、refresh-view 刷新模式。 |
+| `placeholder` | `String` | `''` | 否 | 输入框占位文本。 |
+| `data` | `Array` | `() => []` | 否 | 组件渲染或业务计算使用的数据源。 |
+| `values` | `Array` | `null` | 否 | 组件公开属性 values，用于控制该组件对应的渲染、交互或业务参数。 |
+| `autoHeight` | `Boolean` | `true` | 否 | 组件公开属性 autoHeight，用于控制该组件对应的渲染、交互或业务参数。 |
+| `adjustPosition` | `Boolean` | `true` | 否 | 组件公开属性 adjustPosition，用于控制该组件对应的渲染、交互或业务参数。 |
+| `disabled` | `Boolean` | `false` | 否 | 是否禁用交互。 |
+| `cursorSpacing` | `[Number, String]` | `0` | 否 | 组件公开属性 cursorSpacing，用于控制该组件对应的渲染、交互或业务参数。 |
+| `separate` | `[String, Boolean]` | `'，'` | 否 | 组件公开属性 separate，用于控制该组件对应的渲染、交互或业务参数。 |
+| `maxlength` | `[String, Number]` | `1000` | 否 | 最大输入长度。 |
+| `height` | `[String, Number]` | `40` | 否 | 高度。 |
+| `inputSize` | `[String, Number]` | `14` | 否 | input 尺寸。 |
+| `placeholderSize` | `[String, Number]` | `13` | 否 | placeholder 尺寸。 |
+| `inputBgColor` | `String` | `() => color.bgColor` | 否 | inputBg 颜色。 |
+| `disabledBgColor` | `String` | `() => color.bgColor` | 否 | disabledBg 颜色。 |
+| `inputColor` | `String` | `() => color.mainColor` | 否 | input 颜色。 |
+| `activeColor` | `String` | `() => color.primary` | 否 | active 颜色。 |
+| `inactiveColor` | `String` | `() => color.primaryLight` | 否 | inactive 颜色。 |
+| `placeholderColor` | `String` | `() => color.tipsColor` | 否 | placeholder 颜色。 |
+| `titleStyle` | `Object` | `() => ({})` | 否 | 自定义 title 区域 style 对象。 |
+| `inputStyle` | `Object` | `() => ({})` | 否 | 自定义 input 区域 style 对象。 |
+| `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
+| `tagStyle` | `Object` | `() => ({})` | 否 | 自定义 tag 区域 style 对象。 |
+| `labelStyle` | `Object` | `() => ({})` | 否 | 自定义 label 区域 style 对象。 |
+| `placeholderStyle` | `Object` | `() => ({})` | 否 | 自定义 placeholder 区域 style 对象。 |
+| `customList` | `Array` | `null` | 否 | 组件公开属性 customList，用于控制该组件对应的渲染、交互或业务参数。 |
+| `selectClean` | `Boolean` | `true` | 否 | 组件公开属性 selectClean，用于控制该组件对应的渲染、交互或业务参数。 |
+
+### 标签编辑器 Events
+
+| 事件 | 说明 |
+| --- | --- |
+| `input` | 输入内容变化时触发。 |
+| `search` | 用户提交搜索时触发。 |
+
+### 标签编辑器 Slots
+
+| 插槽 | 说明 |
+| --- | --- |
+| `extra` | 头部额外内容区，受 showExtra 控制。 |
+
+### 标签编辑器 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `mergeChecked(source)` | 组件内部公开方法 mergeChecked(source)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `initList()` | 组件内部公开方法 initList()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `updateList()` | 组件内部公开方法 updateList()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `updateTags(value)` | 组件内部公开方法 updateTags(value)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `input(e)` | 同步输入框内容并抛出 input。 |
+| `blur(e)` | 组件内部公开方法 blur(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `select(item)` | 处理选中/取消选中逻辑并触发 change。 |
+| `removeTag(i)` | 组件内部公开方法 removeTag(i)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `findTag(i)` | 组件内部公开方法 findTag(i)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `defineType(tag)` | 组件内部公开方法 defineType(tag)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `confirmTag()` | 组件内部公开方法 confirmTag()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+
+### 标签编辑器 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `tagsWrapStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `__inputStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_inputStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_labelStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_tagStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `_placeholderStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `contents` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| data | `list` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `content` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `cursor` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `focus` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `inputList` | 内部响应式状态，通常不建议由外部直接依赖。 |

package/docs/components/g-timer.md

@@ -0,0 +1,72 @@
+# g-timer 倒计时
+
+::: tip 组件名
+`g-timer`
+
+发布路径：`@zfqh/uniapp/lib/components/g-timer/g-timer.vue`
+:::
+
+计时器组件，从 start 起算并每秒抛出格式化时间。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <view class="call-time">
+    通话时长：<g-timer :start="startAt" @change="duration = $event" />
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const startAt = Date.now();
+const duration = ref(0);
+</script>
+```
+
+## API
+
+### 倒计时 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `start` | `[String, Number]` | `0` | 否 | 计时开始时间；数字按时间戳处理。 |
+
+### 倒计时 Events
+
+| 事件 | 说明 |
+| --- | --- |
+| `change` | 值或状态变化时触发。 |
+
+### 倒计时 Slots
+
+无显式插槽。
+
+### 倒计时 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `timeFormat(duration)` | 组件内部公开方法 timeFormat(duration)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `execTimer(timestamp)` | 组件内部公开方法 execTimer(timestamp)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `init()` | 组件内部公开方法 init()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+
+### 倒计时 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+
+| data | `time` | 内部响应式状态，通常不建议由外部直接依赖。 |

package/docs/components/g-trtc-room.md

@@ -0,0 +1,116 @@
+# g-trtc-room TRTC 房间
+
+::: tip 组件名
+`g-trtc-room`
+
+发布路径：`@zfqh/uniapp/lib/components/g-trtc-room/g-trtc-room.vue`
+:::
+
+音视频房间 UI 组件，包装 g-trtc、来电铃声、缩小悬浮和房间头部信息。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-trtc-room
+    :app-id="trtc.appId"
+    :room-id="trtc.roomId"
+    :user-id="trtc.userId"
+    :user-sig="trtc.userSig"
+    title="视频问诊"
+    description="正在与医生通话"
+    :avatar="doctor.avatar"
+    @zoom="isMiniRoom = $event"
+  >
+    <template #title>
+      <view class="room-title">{{ doctor.name }}医生</view>
+    </template>
+  </g-trtc-room>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isMiniRoom = ref(false);
+const doctor = { name: '张', avatar: 'https://static.example.com/avatar.png' };
+const trtc = {
+  appId: 1400000000,
+  roomId: 10001,
+  userId: 'patient_1001',
+  userSig: 'USER_SIG_FROM_SERVER',
+};
+</script>
+```
+
+## API
+
+### TRTC 房间 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `roomId` | `[String, Number]` | `0` | 否 | TRTC 房间 ID。 |
+| `appId` | `[String, Number]` | `0` | 否 | 腾讯实时音视频 SDKAppID。 |
+| `userId` | `[String, Number]` | `''` | 否 | TRTC 用户 ID。 |
+| `userSig` | `String` | `''` | 否 | TRTC 用户签名。 |
+| `title` | `String` | `''` | 否 | 标题文本；传 false 时可隐藏标题内容。 |
+| `description` | `String` | `''` | 否 | 组件公开属性 description，用于控制该组件对应的渲染、交互或业务参数。 |
+| `avatar` | `String` | `''` | 否 | 组件公开属性 avatar，用于控制该组件对应的渲染、交互或业务参数。 |
+| `enableZoom` | `Boolean` | `true` | 否 | 是否启用 Zoom 能力。 |
+| `callType` | `[String, Number]` | `1` | 否 | 通话类型。 |
+| `bgColor` | `String` | `'#000'` | 否 | 背景颜色。 |
+| `bellsUrl` | `String` | `() => `${cdn.baseUrl}/files/audios/calling.wav`` | 否 | 来电铃声音频地址。 |
+
+### TRTC 房间 Events
+
+| 事件 | 说明 |
+| --- | --- |
+| `zoom` | 通话房间缩放状态变化时触发。 |
+
+### TRTC 房间 Slots
+
+| 插槽 | 说明 |
+| --- | --- |
+| `title` | 标题区域。 |
+
+### TRTC 房间 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `leave(players)` | 组件内部公开方法 leave(players)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `join(players)` | 组件内部公开方法 join(players)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `handler(type)` | 组件内部公开方法 handler(type)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `timerChange(e)` | 组件内部公开方法 timerChange(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `touchStart(e)` | 组件内部公开方法 touchStart(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `touchMove(e)` | 组件内部公开方法 touchMove(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `touchEnd()` | 组件内部公开方法 touchEnd()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `createBells()` | 组件内部公开方法 createBells()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `destroyBells()` | 组件内部公开方法 destroyBells()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+
+### TRTC 房间 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `systemInfo` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `roomStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `trtcStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `headerStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `titleStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `buttons` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `tips` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| data | `start` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `zoom` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `touched` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `offset` | 内部响应式状态，通常不建议由外部直接依赖。 |

package/docs/components/g-trtc-tui.md

@@ -0,0 +1,84 @@
+# g-trtc-tui TUI 房间
+
+::: tip 组件名
+`g-trtc-tui`
+
+发布路径：`@zfqh/uniapp/lib/components/g-trtc-tui/g-trtc-tui.vue`
+:::
+
+基于腾讯 TUIChatEngine 的通话邀请层，处理接听、挂断、消息监听和房间状态。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-trtc-tui
+    ref="trtcRef"
+    title="视频问诊"
+    :avatar="doctor.avatar"
+    description="医生邀请你进行视频通话"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const trtcRef = ref(null);
+const doctor = { avatar: 'https://static.example.com/avatar.png' };
+</script>
+```
+
+## API
+
+### TUI 房间 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `title` | `String` | `''` | 否 | 标题文本；传 false 时可隐藏标题内容。 |
+| `avatar` | `String` | `''` | 否 | 组件公开属性 avatar，用于控制该组件对应的渲染、交互或业务参数。 |
+| `description` | `String` | `''` | 否 | 组件公开属性 description，用于控制该组件对应的渲染、交互或业务参数。 |
+
+### TUI 房间 Events
+
+无显式组件事件。
+
+### TUI 房间 Slots
+
+无显式插槽。
+
+### TUI 房间 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `zoom(e)` | 组件内部公开方法 zoom(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `hangup(type)` | 挂断 TUI 通话。 |
+| `accept()` | 接听 TUI 通话邀请。 |
+| `getMemberList(e)` | 组件内部公开方法 getMemberList(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `sendMessage({ data, callData, conversationID, conversationType })` | 发送 TUI 自定义消息。 |
+| `receivedMessage(event)` | 处理 TUI 收到的自定义消息。 |
+
+### TUI 房间 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `maskStyle` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `imInfo` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `profile` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| data | `visible` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `float` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `roomId` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `callType` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `calling` | 内部响应式状态，通常不建议由外部直接依赖。 |

package/docs/components/g-trtc.md

@@ -0,0 +1,124 @@
+# g-trtc TRTC 推流
+
+::: tip 组件名
+`g-trtc`
+
+发布路径：`@zfqh/uniapp/lib/components/g-trtc/g-trtc.vue`
+:::
+
+腾讯实时音视频底层组件，管理 pusher/player、进退房、前后摄像头和音频状态。
+
+## 平台兼容性
+
+| App（vue） | App（nvue） | H5 | 小程序 | Vue 2 | Vue 3 |
+| --- | --- | --- | --- | --- | --- |
+| √ | 依赖源码条件编译 | √ | √ | - | √ |
+
+## 使用前提
+
+- 已安装并注册 `@zfqh/uniapp` 插件。
+- 已按 [项目接入](./usage) 配置 easycom，或手动从构建产物导入组件。
+- 尺寸类属性通常支持数字或带单位字符串；数字值会在组件内部通过 `uni.$uv.addUnit` 转成样式单位。
+- 样式类属性中，`customStyle`、`xxxStyle` 接收对象，`customClass`、`xxxClass` 接收 class 字符串。
+
+## 基本使用
+
+```vue
+<template>
+  <g-trtc
+    ref="trtcRef"
+    :app-id="trtc.appId"
+    :room-id="trtc.roomId"
+    :user-id="trtc.userId"
+    :user-sig="trtc.userSig"
+    enable-mic
+    enable-camera
+    enable-speaker
+    @join="onJoin"
+    @leave="onLeave"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const trtcRef = ref(null);
+const trtc = {
+  appId: 1400000000,
+  roomId: 10001,
+  userId: 'patient_1001',
+  userSig: 'USER_SIG_FROM_SERVER',
+};
+
+function onJoin(event) {
+  console.log('joined room', event);
+}
+
+function onLeave(event) {
+  console.log('left room', event);
+}
+</script>
+```
+
+## API
+
+### TRTC 推流 Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `customStyle` | `Object` | `() => ({})` | 否 | 最外层自定义 style 对象。 |
+| `appId` | `[String, Number]` | `''` | 否 | 腾讯实时音视频 SDKAppID。 |
+| `roomId` | `[String, Number]` | `0` | 否 | TRTC 房间 ID。 |
+| `userId` | `[String, Number]` | `''` | 否 | TRTC 用户 ID。 |
+| `userSig` | `String` | `''` | 否 | TRTC 用户签名。 |
+| `enableMic` | `Boolean` | `false` | 否 | 是否启用麦克风。 |
+| `enableCamera` | `Boolean` | `false` | 否 | 是否启用摄像头。 |
+| `enableSpeaker` | `Boolean` | `false` | 否 | 是否启用扬声器。 |
+| `frontCamera` | `Boolean` | `true` | 否 | 是否使用前置摄像头。 |
+| `autopush` | `Boolean` | `true` | 否 | 进房后是否自动推流。 |
+
+### TRTC 推流 Events
+
+| 事件 | 说明 |
+| --- | --- |
+| `join` | TRTC 加入房间或成员加入时触发。 |
+| `leave` | TRTC 离开房间或成员离开时触发。 |
+
+### TRTC 推流 Slots
+
+无显式插槽。
+
+### TRTC 推流 Methods
+
+| 方法 | 说明 |
+| --- | --- |
+| `pusherStateChange(e)` | 组件内部公开方法 pusherStateChange(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `pusherNetStatus(e)` | 组件内部公开方法 pusherNetStatus(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `pusherError(e)` | 组件内部公开方法 pusherError(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `pusherBGMStart(e)` | 组件内部公开方法 pusherBGMStart(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `pusherBGMProgress(e)` | 组件内部公开方法 pusherBGMProgress(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `pusherBGMComplete(e)` | 组件内部公开方法 pusherBGMComplete(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `pusherAudioVolumeNotify(e)` | 组件内部公开方法 pusherAudioVolumeNotify(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `playerStateChange(e)` | 组件内部公开方法 playerStateChange(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `playerFullscreenChange(e)` | 组件内部公开方法 playerFullscreenChange(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `playerNetStatus(e)` | 组件内部公开方法 playerNetStatus(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `playerAudioVolumeNotify(e)` | 组件内部公开方法 playerAudioVolumeNotify(e)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `setFront(stream)` | 组件内部公开方法 setFront(stream)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `setPusher(params)` | 组件内部公开方法 setPusher(params)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `setPlayer(player, options)` | 组件内部公开方法 setPlayer(player, options)；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `leaveRoom()` | 离开 TRTC 房间并清理客户端状态。 |
+| `enterRoom()` | 加入 TRTC 房间。 |
+| `start()` | 初始化并启动 TRTC 推流/拉流流程。 |
+| `listenner()` | 组件内部公开方法 listenner()；通过 ref 调用前需要确认组件平台条件和当前状态。 |
+| `initRTC()` | 初始化 TRTC 客户端。 |
+
+### TRTC 推流 Internal State
+
+| 类型 | 名称 | 说明 |
+| --- | --- | --- |
+| computed | `streams` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| computed | `soundMode` | 内部计算属性，用于把 props、平台信息或样式配置转换为模板可用值。 |
+| data | `frontUserId` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `client` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `pusher` | 内部响应式状态，通常不建议由外部直接依赖。 |
+| data | `players` | 内部响应式状态，通常不建议由外部直接依赖。 |