@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.1

package/resource/knowledge/chat/preset/vue/features/chat-header.md

@@ -0,0 +1,331 @@
+## 概述
+
+ChatHeader 聊天头部组件是聊天界面的顶部导航组件，用于显示当前会话的基本信息。能够展示会话标题、头像、在线状态、输入状态提示等信息。组件采用容器组件模式，提供了灵活的插槽机制用于自定义左右两侧的操作区域。
+
+## Props 速查表
+
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|title|string|undefined|自定义标题，未提供时使用会话信息。|
+|avatarUrl|string|undefined|自定义头像图片 URL。|
+|enableUserStatus|boolean|false|是否显示用户状态。|
+|enableCall|bool|false|是否展示音视频通话按钮|
+
+## Slot 速查表
+
+|名称|描述|
+|---------|---------|
+|ChatHeaderLeft|ChatHeader 左侧自定义内容区域。|
+|ChatHeaderRight|ChatHeader 右侧自定义内容区域。|
+
+## Props 详细介绍
+
+### title
+- **类型**：`string`
+
+- **描述**：自定义会话标题，当不提供此属性时，组件会自动根据会话类型显示相应的标题（单聊显示用户昵称或备注，群聊显示群名称），默认值为 `undefined`。
+
+### avatarUrl
+- **类型**：`string`
+
+- **描述**：自定义头像图片的 URL 地址，当不提供此属性时，组件会自动根据会话类型显示相应的头像（单聊显示用户头像，群聊显示群头像），默认值为 `undefined`。
+
+### enableUserStatus
+- **类型**：`boolean`
+
+- **描述**：是否启用并显示用户在线状态功能，仅在单聊模式下生效，开启后会显示用户的在线/离线状态，默认值为 `false`。
+
+### enableCall
+- **类型**：`boolean`
+
+- **描述**：是否启用并显示音视频通话按钮，开启后会显示音视频通话的按钮，默认值为 `false`。
+
+- **注意**：显示按钮并不意味着可以发起通话，发起音视频通话的前提是集成了 CallKit，集成 CallKit 可以参考集成 TUICallKit。
+
+## Slots 详细介绍
+
+### ChatHeaderLeft
+
+**描述**：头部左侧自定义内容区域插槽，通常用于放置返回按钮、菜单按钮等导航控件。
+
+#### 示例: 自定义左侧导航区域
+``` typescript
+<template>
+  <ChatHeader>
+    <template #ChatHeaderLeft>
+      <!-- 返回按钮, 清除激活的会话 -->
+      <button
+        class="nav-button"
+        @click="handleBack"
+      >
+        ⬅️
+      </button>
+    </template>
+  </ChatHeader>
+</template>
+
+<script setup lang="ts">
+import { ChatHeader, useChatContext } from '@tencentcloud/chat-uikit-vue3';
+
+const { setActiveConversation } = useChatContext();
+
+const handleBack = () => {
+  // 设置激活的会话ID为空
+  setActiveConversation('');
+};
+</script>
+
+<style scoped>
+.header-left-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+}
+
+.nav-button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+</style>
+```
+
+### ChatHeaderRight
+
+**描述**：头部右侧自定义内容区域插槽，通常用于放置功能按钮、操作菜单等控件。
+
+#### 示例: 通过 ChatHeaderRight 插槽 和抽屉组件集成 ChatSetting 组件
+
+【App.vue】
+``` typescript
+<template>
+  <div class="chat-container">
+    <Chat>
+      <ChatHeader>
+        <template #ChatHeaderRight>
+          <!-- 设置按钮，点击打开聊天设置面板 -->
+          <button
+            class="nav-button"
+            @click="setIsSettingOpen(true)"
+          >
+            ⚙️
+          </button>
+        </template>
+      </ChatHeader>
+      <MessageList />
+      <MessageInput />
+    </Chat>
+    <Drawer
+      :open="isChatSettingOpen"
+      @close="setIsSettingOpen(false)"
+    >
+      <ChatSetting style="flex: 1;" />
+    </Drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Chat,
+  ChatHeader,
+  MessageList,
+  MessageInput,
+  ChatSetting
+} from '@tencentcloud/chat-uikit-vue3';
+import { Drawer } from './components/Drawer.vue';
+
+// 状态管理
+const isChatSettingOpen = ref(false);
+
+const setIsSettingOpen = (isOpen: boolean) => {
+  isChatSettingOpen.value = isOpen;
+};
+</script>
+
+<style scoped>
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+</style>
+
+```
+
+【Drawer.vue】
+``` typescript
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import type { PropType } from 'vue';
+
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  placement: {
+    type: String as PropType<'right' | 'left' | 'bottom'>,
+    default: 'right',
+  },
+  duration: { type: Number, default: 300 },
+  container: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: 'body',
+  },
+  zIndex: { type: Number, default: 1000 },
+  maskClosable: { type: Boolean, default: true },
+});
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+const isRendered = ref(false);
+const isVisible = ref(false);
+const isAnimating = ref(false);
+
+const containerTarget = computed(() => props.container ?? 'body');
+const cssVars = computed(() => ({
+  '--duration': `${props.duration}ms`,
+  '--z-index': String(props.zIndex),
+}));
+
+watch(
+  () => props.open,
+  async (nextOpen) => {
+    if (nextOpen) {
+      // open drawer
+      if (!isRendered.value) {
+        isRendered.value = true;
+      }
+      // wait for DOM render
+      await nextTick();
+      // force repaint, ensure initial state is applied
+      requestAnimationFrame(() => {
+        isVisible.value = true;
+        isAnimating.value = true;
+      });
+    } else {
+      // close drawer
+      isVisible.value = false;
+      isAnimating.value = true;
+    }
+  },
+  { immediate: true },
+);
+
+function onMaskClick() {
+  if (props.maskClosable) {
+    emit('close');
+  }
+}
+
+function handlePanelTransitionEnd(e: TransitionEvent) {
+  if (e.propertyName !== 'transform') {
+    return;
+  }
+  isAnimating.value = false;
+  if (!isVisible.value) {
+    isRendered.value = false;
+  }
+}
+
+function handleMaskTransitionEnd(e: TransitionEvent) {
+  if (e.propertyName !== 'opacity') {
+    // mask animation end
+  }
+}
+</script>
+
+<template>
+  <Teleport :to="containerTarget">
+    <div
+      v-if="isRendered"
+      :class="[$style.wrapper, isVisible ? $style['wrapper-open'] : '']"
+      :style="cssVars"
+    >
+      <div
+        :class="[$style.mask, isVisible ? $style['mask-open'] : '']"
+        @click="onMaskClick"
+        @transitionend="handleMaskTransitionEnd"
+      />
+      <div
+        :class="[
+          $style.panel,
+          $style[`from-${props.placement}`],
+          isVisible ? $style['panel-open'] : ''
+        ]"
+        @click.stop
+        @transitionend="handlePanelTransitionEnd"
+      >
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style module lang="scss">
+.wrapper{position:fixed;inset:0;z-index:var(--z-index);pointer-events:none;}.wrapper-open{pointer-events:auto;}.mask{position:absolute;inset:0;background:rgba(0,0,0,0.45);opacity:0;transition:opacity var(--duration) ease;pointer-events:auto;}.mask-open{opacity:1;}.panel{position:absolute;background:var(--bg-color-operate);max-width:100%;max-height:100%;transition:transform var(--duration) ease;pointer-events:auto;box-shadow:0 8px 16px rgba(0,0,0,0.15);display:flex;flex-direction:row;}.from-right{top:0;right:0;height:100%;width:320px;transform:translateX(100%);}.from-left{top:0;left:0;height:100%;width:320px;transform:translateX(-100%);}.from-bottom{left:0;bottom:0;width:100%;height:40%;transform:translateY(100%);}.panel-open.from-right,.panel-open.from-left,.panel-open.from-bottom{transform:translate(0,0);}
+</style>
+
+```
+
+## 集成 TUICallKit
+
+需要安装 `@tencentcloud/call-uikit-vue` 并在项目中导入，更多信息参见 音视频通话（含 UI）。
+``` typescript
+<script lang="ts" setup>
+import { Teleport } from 'vue';
+import { TUICallKit } from '@tencentcloud/call-uikit-vue';
+<script>
+
+<template>
+  <UIKitProvider>
+    <Teleport to="body">
+      <TUICallKit
+        style="
+          position: fixed;
+          width: 600px;
+          height: 400px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 1000;
+        "
+      />
+    </Teleport>
+    // other code ...
+  </UIKitProvider>
+<template>
+```
+
+## 相关文档
+- 自定义组件 - 容器组件 Chat
+
+- 自定义组件 - UIKitProvider
+
+- 自定义组件 - ConversationList
+
+- 自定义组件 - MessageList
+
+- 自定义组件 - MessageInput
+
+- 自定义组件 - ChatSetting
+
+- 自定义组件 - ContactList
+
+- 自定义组件 - Search
+
+- [chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
+
+- [GitHub Demo](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/demos/rtcube-vite-vue3)
+
+## 交流与反馈

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/chat-setting.md

@@ -68,10 +68,6 @@ const toggleChatSetting = () => {
 
 - 自定义组件 - ChatSetting
 
-- 自定义组件 - C2CSetting State
-
-- 自定义组件 - GroupSetting State
-
 - 自定义组件 - ContactList
 
 - 自定义组件 - Search

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/contact-list.md

@@ -1,60 +1,64 @@
 ## 概述
 
-ContactList 是一个高度可配置的联系人列表组件。该组件支持好友列表、群组列表、黑名单和申请管理，提供分组折叠、搜索过滤、自定义渲染等核心功能，适用于即时通讯、社交应用等场景的联系人管理界面。
+ContactList 是一个高度可配置的联系人列表组件。该组件支持好友列表、群组列表、黑名单和申请管理，提供分组折叠、搜索过滤、自定义渲染等核心功能，适用于即时通信、社交应用等场景的联系人管理界面。
 
 ## ContactList Props
-| 字段 | 类型 | 默认值 | 描述 |
-| --- | --- | --- | --- |
-| activeContactItem | ContactGroupItem \\| undefined | undefined | 当前激活的联系人项 |
-| enableSearch | boolean | true | 是否启用搜索功能 |
-| groupConfig | Partial<Record<ContactItemType, CustomGroupConfig>> | {} | 自定义分组配置 |
-| searchPlaceholder | string | 'Search contacts' | 搜索框占位符文本 |
-| emptyText | string | 'No contacts' | 空状态提示文本 |
-| ContactItem | Component \\| undefined | ContactListItem | 自定义联系人项组件 |
-| ContactSearchComponent | Component \\| undefined | ContactSearch | 自定义搜索组件 |
-| GroupHeader | Component \\| undefined | 默认分组头 | 自定义分组头部组件 |
-| PlaceholderEmptyList | Component \\| undefined | 默认空状态 | 自定义空状态组件 |
-| onContactItemClick | (item: ContactGroupItem) => void | undefined | 联系人项点击事件 |
-| onFriendApplicationAction | (action: 'accept' \\| 'refuse', application: FriendApplication) => void | undefined | 好友申请操作事件 |
-| onGroupApplicationAction | (action: 'accept' \\| 'refuse', application: GroupApplication) => void | undefined | 群组申请操作事件 |
+
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|activeContactItem|ContactGroupItem \| undefined|undefined|当前激活的联系人项|
+|enableSearch|boolean|true|是否启用搜索功能|
+|groupConfig|Partial<Record<ContactItemType, CustomGroupConfig>>|{}|自定义分组配置|
+|searchPlaceholder|string|'Search contacts'|搜索框占位符文本|
+|emptyText|string|'No contacts'|空状态提示文本|
+|ContactItem|Component \| undefined|ContactListItem|自定义联系人项组件|
+|ContactSearchComponent|Component \| undefined|ContactSearch|自定义搜索组件|
+|GroupHeader|Component \| undefined|默认分组头|自定义分组头部组件|
+|PlaceholderEmptyList|Component \| undefined|默认空状态|自定义空状态组件|
+|onContactItemClick|(item: ContactGroupItem) => void|undefined|联系人项点击事件|
+|onFriendApplicationAction|(action: 'accept' \| 'refuse', application: FriendApplication) => void|undefined|好友申请操作事件|
+|onGroupApplicationAction|(action: 'accept' \| 'refuse', application: GroupApplication) => void|undefined|群组申请操作事件|
 
 ## ContactList Events
-| 事件名 | 参数 | 描述 |
-| --- | --- | --- |
-| contact-item-click | (item: ContactGroupItem) | 联系人项点击事件 |
-| friend-application-action | (action: 'accept' \\| 'refuse', application: FriendApplication) | 好友申请操作事件 |
-| group-application-action | (action: 'accept' \\| 'refuse', application: GroupApplication) | 群组申请操作事件 |
+
+|事件名|参数|描述|
+|---------|---------|---------|
+|contact-item-click|(item: ContactGroupItem)|联系人项点击事件|
+|friend-application-action|(action: 'accept' \| 'refuse', application: FriendApplication)|好友申请操作事件|
+|group-application-action|(action: 'accept' \| 'refuse', application: GroupApplication)|群组申请操作事件|
 
 ## ContactInfo Props
-| 字段 | 类型 | 默认值 | 描述 |
-| --- | --- | --- | --- |
-| contactItem | ContactGroupItem \\| undefined | undefined | 当前显示的联系人项 |
-| showActions | boolean | true | 是否显示操作按钮 |
-| PlaceholderEmpty | Component \\| undefined | undefined | 空状态占位组件 |
-| FriendInfoComponent | Component | FriendInfo | 好友信息组件 |
-| GroupInfoComponent | Component | GroupInfo | 群组信息组件 |
-| BlacklistInfoComponent | Component | BlacklistInfo | 黑名单信息组件 |
-| FriendApplicationInfoComponent | Component | FriendApplicationInfo | 好友申请信息组件 |
-| GroupApplicationInfoComponent | Component | GroupApplicationInfo | 群组申请信息组件 |
-| SearchGroupInfoComponent | Component | SearchGroupInfo | 搜索群组信息组件 |
-| SearchUserInfoComponent | Component | SearchUserInfo | 搜索用户信息组件 |
+
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|contactItem|ContactGroupItem \| undefined|undefined|当前显示的联系人项|
+|showActions|boolean|true|是否显示操作按钮|
+|PlaceholderEmpty|Component \| undefined|undefined|空状态占位组件|
+|FriendInfoComponent|Component|FriendInfo|好友信息组件|
+|GroupInfoComponent|Component|GroupInfo|群组信息组件|
+|BlacklistInfoComponent|Component|BlacklistInfo|黑名单信息组件|
+|FriendApplicationInfoComponent|Component|FriendApplicationInfo|好友申请信息组件|
+|GroupApplicationInfoComponent|Component|GroupApplicationInfo|群组申请信息组件|
+|SearchGroupInfoComponent|Component|SearchGroupInfo|搜索群组信息组件|
+|SearchUserInfoComponent|Component|SearchUserInfo|搜索用户信息组件|
 
 ## ContactInfo Events
-| 事件名 | 参数 | 描述 |
-| --- | --- | --- |
-| close | - | 关闭信息面板事件 |
-| sendMessage | (friend: Friend) | 发送消息事件 |
-| deleteFriend | (friend: Friend) | 删除好友事件 |
-| addToBlacklist | (friend: Friend) | 添加到黑名单事件 |
-| removeFromBlacklist | (profile: UserProfile) | 从黑名单移除事件 |
-| updateFriendRemark | (friend: Friend) | 更新好友备注事件 |
-| enterGroup | (group: GroupModel) | 进入群组事件 |
-| leaveGroup | (group: GroupModel) | 退出群组事件 |
-| dismissGroup | (group: GroupModel) | 解散群组事件 |
-| friendApplicationAction | (action: 'accept' \\| 'refuse', application: FriendApplication) | 好友申请操作事件 |
-| groupApplicationAction | (action: 'accept' \\| 'refuse', application: GroupApplication) | 群组申请操作事件 |
-| addFriend | (user: UserProfile, wording: string) | 添加好友事件 |
-| joinGroup | (group: GroupModel, note: string) | 加入群组事件 |
+
+|事件名|参数|描述|
+|---------|---------|---------|
+|close|-|关闭信息面板事件|
+|sendMessage|(friend: Friend)|发送消息事件|
+|deleteFriend|(friend: Friend)|删除好友事件|
+|addToBlacklist|(friend: Friend)|添加到黑名单事件|
+|removeFromBlacklist|(profile: UserProfile)|从黑名单移除事件|
+|updateFriendRemark|(friend: Friend)|更新好友备注事件|
+|enterGroup|(group: GroupModel)|进入群组事件|
+|leaveGroup|(group: GroupModel)|退出群组事件|
+|dismissGroup|(group: GroupModel)|解散群组事件|
+|friendApplicationAction|(action: 'accept' \| 'refuse', application: FriendApplication)|好友申请操作事件|
+|groupApplicationAction|(action: 'accept' \| 'refuse', application: GroupApplication)|群组申请操作事件|
+|addFriend|(user: UserProfile, wording: string)|添加好友事件|
+|joinGroup|(group: GroupModel, note: string)|加入群组事件|
 
 ## 基础用法
 ``` typescript
@@ -87,9 +91,10 @@ import { ContactList, ContactInfo } from '@tencentcloud/chat-uikit-vue3';
   <ContactList :enableSearch="false" />
 </template>
 ```
-| enableSearch="true" | enableSearch="false" |
-| --- | --- |
-|  |  |
+
+|enableSearch="true"|enableSearch="false"|
+|---------|---------|
+|<br>|<br>|
 
 ### 自定义联系列表联系人分组配置
 
@@ -122,9 +127,10 @@ const customGroupConfig = {
 };
 </script>
 ```
-| 修改前 | 修改后 |
-| --- | --- |
-|  |  |
+
+|修改前|修改后|
+|---------|---------|
+|<br>|<br>|
 
 ### 自定义联系列表子项
 

package/resource/{doc/chatkit/vue/components → knowledge/chat/preset/vue/features}/conversation-actions.md

@@ -14,17 +14,17 @@ ConversationActions 组件负责单条会话的操作，默认支持删除、置
 
 <script setup lang="ts">
 import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
 
 const actionsConfig = {
   enablePin: false,
-  onConversationDelete: (conversation: ConversationModel) => {
+  onConversationDelete: (conversation: ConversationInfo) => {
     console.log('Delete conversation success');
   },
   customConversationActions: {
     'custom-actions-1': {
       label: 'custom-actions',
-      onClick: (conversation: ConversationModel) => {
+      onClick: (conversation: ConversationInfo) => {
         console.log(conversation);
       },
     },
@@ -48,7 +48,7 @@ const actionsConfig = {
 <script setup lang="ts">
 import { defineComponent } from 'vue';
 import { UIKitProvider, ConversationList, ConversationActions } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-vue3';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
 
 const CustomConversationActions = defineComponent({
   name: 'CustomConversationActions',
@@ -67,45 +67,49 @@ const CustomConversationActions = defineComponent({
 ConversationActions 组件的接口类型 `ConversationActionsProps` 基于 `ConversationActionsConfig` 接口进行扩展。
 
 ### ConversationActionsProps
-| 参数名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| conversation(Required) | ConversationModel | - | 必选参数，表示当前渲染会话操作对应的会话 |
-| className | string | - | 自定义根元素的类名 |
-| style | CSSProperties | - | 自定义根元素的样式 |
+
+|参数名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|conversation(Required)|ConversationInfo|-|必选参数，表示当前渲染会话操作对应的会话|
+|className|string|-|自定义根元素的类名|
+|style|CSSProperties|-|自定义根元素的样式|
 
 ### ConversationActionsConfig
-| 参数名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| enablePin | boolean | true | 是否显示置顶功能按钮 |
-| enableMute | boolean | true | 是否显示免打扰功能按钮 |
-| enableDelete | boolean | true | 是否显示删除功能按钮 |
-| enableMarkUnread | boolean | true | 是否显示标记未读功能按钮 |
-| onMarkConversationUnread | (conversation: ConversationModel, e?: Event) => void | - | 自定义标记未读/已读会话的行为 |
-| onConversationPin | (conversation: ConversationModel, e?: Event) => void | - | 自定义置顶/取消置顶会话的行为 |
-| onConversationMute | (conversation: ConversationModel, e?: Event) => void | - | 自定义免打扰/取消免打扰会话的行为 |
-| onConversationDelete | (conversation: ConversationModel, e?: Event) => void | - | 自定义删除会话的行为 |
-| customConversationActions | Record<string, ConversationActionItem> | - | 自定义会话操作项 |
-| PopupIcon | any | - | 自定义动作弹窗的图标 |
-| PopupElements | any[] | - | 自定义动作弹窗的内容 |
-| onClick | (e: Event, key?: string, conversation?: ConversationModel) => void | - | 点击动作项时的回调函数 |
-| onClose | () => void | - | 关闭动作弹窗时的回调函数（H5 专用） |
+
+|参数名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|enablePin|boolean|true|是否显示置顶功能按钮|
+|enableMute|boolean|true|是否显示免打扰功能按钮|
+|enableDelete|boolean|true|是否显示删除功能按钮|
+|enableMarkUnread|boolean|true|是否显示标记未读功能按钮|
+|onMarkConversationUnread|(conversation: ConversationInfo, e?: Event) => void|-|自定义标记未读/已读会话的行为|
+|onConversationPin|(conversation: ConversationInfo, e?: Event) => void|-|自定义置顶/取消置顶会话的行为|
+|onConversationMute|(conversation: ConversationInfo, e?: Event) => void|-|自定义免打扰/取消免打扰会话的行为|
+|onConversationDelete|(conversation: ConversationInfo, e?: Event) => void|-|自定义删除会话的行为|
+|customConversationActions|Record<string, ConversationActionItem>|-|自定义会话操作项|
+|PopupIcon|any|-|自定义动作弹窗的图标|
+|PopupElements|any[]|-|自定义动作弹窗的内容|
+|onClick|(e: Event, key?: string, conversation?: ConversationInfo) => void|-|点击动作项时的回调函数|
+|onClose|() => void|-|关闭动作弹窗时的回调函数（H5 专用）|
 
 ### ConversationActionItem
-| 参数名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| enable | boolean | true | 是否启用自定义操作项 |
-| label | string | - | 自定义操作项的展示内容 |
-| onClick | (conversation: ConversationModel, e?: Event) => void | - | 点击自定义操作项时的回调函数 |
+
+|参数名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|enable|boolean|true|是否启用自定义操作项|
+|label|string|-|自定义操作项的展示内容|
+|onClick|(conversation: ConversationInfo, e?: Event) => void|-|点击自定义操作项时的回调函数|
 
 ## Events
-| 事件名 | 参数 | 说明 |
-| --- | --- | --- |
-| click | (e: Event, key?: string, conversation?: ConversationModel) | 点击操作项时触发 |
-| close | () | 关闭操作弹窗时触发 |
-| markConversationUnread | (conversation: ConversationModel, e?: Event) | 标记会话未读/已读时触发 |
-| conversationPin | (conversation: ConversationModel, e?: Event) | 置顶/取消置顶会话时触发 |
-| conversationMute | (conversation: ConversationModel, e?: Event) | 免打扰/取消免打扰会话时触发 |
-| conversationDelete | (conversation: ConversationModel, e?: Event) | 删除会话时触发 |
+
+|事件名|参数|说明|
+|---------|---------|---------|
+|click|(e: Event, key?: string, conversation?: ConversationInfo)|点击操作项时触发|
+|close|()|关闭操作弹窗时触发|
+|markConversationUnread|(conversation: ConversationInfo, e?: Event)|标记会话未读/已读时触发|
+|conversationPin|(conversation: ConversationInfo, e?: Event)|置顶/取消置顶会话时触发|
+|conversationMute|(conversation: ConversationInfo, e?: Event)|免打扰/取消免打扰会话时触发|
+|conversationDelete|(conversation: ConversationInfo, e?: Event)|删除会话时触发|
 
 ## 自定义组件
 
@@ -127,7 +131,7 @@ ConversationActions 组件的接口类型 `ConversationActionsProps` 基于 `Con
   <ConversationActions :enableMarkUnread="false" :conversation="conversation" />
 </template>
 ```
-| `enablePin: false` | `enableDelete: false` | `enableMute: false` | enableMarkUnread="false" |
+| <code>enablePin: false</code> | <code>enableDelete: false</code> | <code>enableMute: false</code> | enableMarkUnread="false" |
 | --- | --- | --- | --- |
 |  |  |  |  |
 
@@ -142,12 +146,13 @@ ConversationActions 组件默认支持会话删除、会话置顶/取消置顶
 <script setup lang="ts">
 import { defineComponent, h } from 'vue';
 import { ConversationActions, Toast } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
 
 const CustomConversationActions = defineComponent({
   name: 'CustomConversationActions',
   setup(props: ConversationActionsProps) {
-    const handleConversationDelete = (conversation: ConversationModel) => {
+    const handleConversationDelete = (conversation: ConversationInfo) => {
       conversation.deleteConversation().then(() => {
         console.log('delete conversation successfully!');
       }).catch(() => {
@@ -177,7 +182,8 @@ customConversationActions 用于在 ConversationActions 上新增自定义操作
 <script setup lang="ts">
 import { defineComponent, h } from 'vue';
 import { ConversationActions } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationInfo } from '@tencentcloud/chat-uikit-vue3';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
 
 const CustomConversationActions = defineComponent({
   name: 'CustomConversationActions',
@@ -187,7 +193,7 @@ const CustomConversationActions = defineComponent({
       customConversationActions: {
         'custom-actions-1': {
           label: 'custom-actions',
-          onClick: (conversation: ConversationModel) => {
+          onClick: (conversation: ConversationInfo) => {
             console.log(conversation);
           },
         },
@@ -211,7 +217,7 @@ const CustomConversationActions = defineComponent({
 <script setup lang="ts">
 import { defineComponent, h } from 'vue';
 import { ConversationActions } from '@tencentcloud/chat-uikit-vue3';
-import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-vue3';
+type ConversationActionsProps = Parameters<typeof ConversationActions>[0];
 
 const CustomConversationActions = defineComponent({
   name: 'CustomConversationActions',