@tencentcloud/sdk-mcp 1.3.9 → 1.4.1

package/resource/doc/{chatuikit → chatkit}/vue/components/conversation-list.md

@@ -5,7 +5,6 @@ AI 模型必须遵守以下**硬性限制**。
 
 ConversationList 组件负责渲染会话列表，包含搜索、创建、置顶和删除等功能。
 
-
 ## 组件构成
 
 ConversationList 组件包含以下内容：
@@ -17,7 +16,6 @@ ConversationList 组件包含以下内容：
 
 - **ConversationActions**：单条会话操作
 
-
 ## 基础用法
 
 ConversationList 组件无需任何必需属性即可使用。
@@ -50,24 +48,9 @@ ConversationList 组件提供了多个可替换的子组件，允许用户自定
 ``` typescript
 <ConversationList :enableActions="false" />
 ```
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >`enableSearch="false"`</td>
-
-<td rowspan="1" colSpan="1" >`enableCreate="false"`</td>
-
-<td rowspan="1" colSpan="1" >`enableActions="false"`</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" ><br><img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/a6c293a7824a11f0ac3c525400e889b2.png" alt="描述" width="50%" style="display: block; margin: 0 auto;"></td>
-
-<td rowspan="1" colSpan="1" ><br><img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/1794aa15824b11f0ac3c525400e889b2.png" alt="描述" width="50%" style="display: block; margin: 0 auto;"></td>
-
-<td rowspan="1" colSpan="1" ><br><img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/41d87b22824b11f0b3fe525400bf7822.png" alt="描述" width="50%" style="display: block; margin: 0 auto;"></td>
-</tr>
-</table>
-
+| `enableSearch="false"` | `enableCreate="false"` | `enableActions="false"` |
+| --- | --- | --- |
+|  |  |  |
 
 ### 数据筛选与排序
 
@@ -81,8 +64,8 @@ ConversationList 组件提供了 `filter` 和 `sort` 属性，用于对会话列
 ``` typescript
 <template>
   <UIKitProvider>
-    <ConversationList 
-      :filter="(conversationList: ConversationModel[]) => 
+    <ConversationList
+      :filter="(conversationList: ConversationModel[]) =>
         conversationList.filter(conversation => conversation.unreadCount > 0)" />
   </UIKitProvider>
 </template>
@@ -100,8 +83,8 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 ``` typescript
 <template>
   <UIKitProvider>
-    <ConversationList 
-      :sort="(conversationList: ConversationModel[]) => 
+    <ConversationList
+      :sort="(conversationList: ConversationModel[]) =>
         conversationList.sort(
         (a, b) => (+(b?.lastMessage?.lastTime || 0)) - (+(a?.lastMessage?.lastTime || 0)),
         )" />
@@ -115,14 +98,14 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 
 ### 自定义 actionsConfig
 
-通过 [actionsConfig](https://write.woa.com/document/186960379083898880) 可以自定义会话操作菜单。
+通过 actionsConfig 可以自定义会话操作菜单。
 ``` typescript
 <template>
   <UIKitProvider>
-    <ConversationList 
+    <ConversationList
       :actionsConfig="{
         enablePin: false,
-        onConversationDelete: (conversation: ConversationModel) => 
+        onConversationDelete: (conversation: ConversationModel) =>
         { console.log('Delete conversation success'); },
         customConversationActions: {
           'custom-actions-1': {
@@ -139,7 +122,6 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 </script>
 ```
 
-
 ### 自定义 Placeholder
 
 `ConversationList` 支持在不同状态下显示自定义占位符，包括列表为空、加载中和加载失败。
@@ -149,7 +131,6 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 
 - `PlaceholderError`：加载失败时显示。
 
-
    **示例：自定义空列表占位符**
 
 1. **创建自定义组件 **`MyEmptyPlaceholder.vue`
@@ -166,7 +147,7 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
    ``` typescript
    <template>
      <UIKitProvider>
-       <ConversationList 
+       <ConversationList
          :PlaceholderEmptyList="MyEmptyPlaceholder" />
      </UIKitProvider>
    </template>
@@ -181,80 +162,23 @@ import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
 **ConversationListHeader** 负责 ConversationList Header 部分的渲染工作，作为包裹层渲染默认 `Search` 与 `ConversationCreate` 。您可以通过传入 `left`、`right` 等属性进行自定义，同时，您也可以自定义整个组件。
 
 #### Props
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**参数名**</td>
-
-<td rowspan="1" colSpan="1" >**类型**</td>
-
-<td rowspan="1" colSpan="1" >**默认值**</td>
-
-<td rowspan="1" colSpan="1" >**说明**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >children</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表头部中心组件。<br>默认传入 `<Search>` 和 `<ConversationCreate>`。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >left</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表头部左侧组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >right</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表头部右侧组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >className</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >指定根元素类的 CSS 自定义名称。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >style</td>
-
-<td rowspan="1" colSpan="1" >CSSProperties</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >指定根元素样式的自定义样式。</td>
-</tr>
-</table>
-
+| **参数名** | **类型** | **默认值** | **说明** |
+| --- | --- | --- | --- |
+| children | Component | - | 自定义会话列表头部中心组件。<br>默认传入 `<Search>` 和 `<ConversationCreate>`。 |
+| left | Component | - | 自定义会话列表头部左侧组件。 |
+| right | Component | - | 自定义会话列表头部右侧组件。 |
+| className | String | - | 指定根元素类的 CSS 自定义名称。 |
+| style | CSSProperties | - | 指定根元素样式的自定义样式。 |
 
 ##### 示例：实现一个简易的会话分组功能
 
 按照全部会话、未读会话、单聊会话、群会话四个维度进行区分，通过点击不同分组按钮执行不同的筛选规则。
 
-
-
 【App.vue】
 ``` typescript
 <template>
   <UIKitProvider>
-    <ConversationList 
+    <ConversationList
       :Header="CustomConversationListHeader"
       :filter="conversationFilter"
   </UIKitProvider>
@@ -370,224 +294,26 @@ const handleFilterClick = (filterType: FilterType) => {
 ```
 
 ## Props
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**参数名**</td>
-
-<td rowspan="1" colSpan="1" >**类型**</td>
-
-<td rowspan="1" colSpan="1" >**默认值**</td>
-
-<td rowspan="1" colSpan="1" >**说明**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >enableSearch</td>
-
-<td rowspan="1" colSpan="1" >Boolean</td>
-
-<td rowspan="1" colSpan="1" >true</td>
-
-<td rowspan="1" colSpan="1" >控制会话搜索功能是否显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >enableCreate</td>
-
-<td rowspan="1" colSpan="1" >Boolean</td>
-
-<td rowspan="1" colSpan="1" >true</td>
-
-<td rowspan="1" colSpan="1" >控制创建会话功能是否显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >enableActions</td>
-
-<td rowspan="1" colSpan="1" >Boolean</td>
-
-<td rowspan="1" colSpan="1" >true</td>
-
-<td rowspan="1" colSpan="1" >控制会话操作功能是否显示。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >actionsConfig</td>
-
-<td rowspan="1" colSpan="1" >ConversationActionsConfig</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >用于自定义会话操作配置。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Header</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >Header</td>
-
-<td rowspan="1" colSpan="1" >自定义 Header 组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >List</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >List</td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Preview</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >[ConversationPreview](https://write.woa.com/document/186960335138078720)</td>
-
-<td rowspan="1" colSpan="1" >自定义会话预览组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >ConversationCreate</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >ConversationCreate</td>
-
-<td rowspan="1" colSpan="1" >自定义创建会话组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >ConversationSearch</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >[Search](https://write.woa.com/document/186960410207154176)</td>
-
-<td rowspan="1" colSpan="1" >自定义会话搜索组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >ConversationActions</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >[ConversationActions](https://write.woa.com/document/186960379083898880)</td>
-
-<td rowspan="1" colSpan="1" >自定义会话操作组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Avatar</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >Avatar</td>
-
-<td rowspan="1" colSpan="1" >自定义头像组件。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >PlaceholderEmptyList</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" ><PlaceHolder type={PlaceHolderTypes.NO_CONVERSATIONS} /></td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表为空时的占位元素。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >PlaceholderLoading</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" ><PlaceHolder type={PlaceHolderTypes.LOADING} /></td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表加载中的占位元素。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >PlaceholderLoadError</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" ><PlaceHolder type={PlaceHolderTypes.WRONG} /></td>
-
-<td rowspan="1" colSpan="1" >自定义会话列表加载错误时的占位元素。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >filter</td>
-
-<td rowspan="1" colSpan="1" >(conversationList: ConversationModel[]) => ConversationModel[]</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >用于筛选会话列表的函数。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >sort</td>
-
-<td rowspan="1" colSpan="1" >(conversationList: ConversationModel[]) => ConversationModel[]</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >用于排序会话列表的函数。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onConversationSelect</td>
-
-<td rowspan="1" colSpan="1" >(conversation: ConversationModel) => void;</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >点击会话后的回调函数，参数为所点击的会话对象。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onBeforeCreateConversation</td>
-
-<td rowspan="1" colSpan="1" >(params: CreateParams) => CreateParams;</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >创建会话前执行的自定义操作，参数为创建会话所需的参数。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onConversationCreate</td>
-
-<td rowspan="1" colSpan="1" >(conversation: ConversationModel)  => void;</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >会话创建后的回调函数，参数为创建的会话对象。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >className</td>
-
-<td rowspan="1" colSpan="1" >String</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >指定根元素类的 CSS 自定义名称。</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >style</td>
-
-<td rowspan="1" colSpan="1" >CSSProperties</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >指定根元素样式的自定义样式。</td>
-</tr>
-</table>
+| **参数名** | **类型** | **默认值** | **说明** |
+| --- | --- | --- | --- |
+| enableSearch | Boolean | true | 控制会话搜索功能是否显示。 |
+| enableCreate | Boolean | true | 控制创建会话功能是否显示。 |
+| enableActions | Boolean | true | 控制会话操作功能是否显示。 |
+| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置。 |
+| Header | Component | Header | 自定义 Header 组件。 |
+| List | Component | List | 自定义会话列表组件。 |
+| Preview | Component | ConversationPreview | 自定义会话预览组件。 |
+| ConversationCreate | Component | ConversationCreate | 自定义创建会话组件。 |
+| ConversationSearch | Component | Search | 自定义会话搜索组件。 |
+| ConversationActions | Component | ConversationActions | 自定义会话操作组件。 |
+| Avatar | Component | Avatar | 自定义头像组件。 |
+| PlaceholderEmptyList | Component |  | 自定义会话列表为空时的占位元素。 |
+| PlaceholderLoading | Component |  | 自定义会话列表加载中的占位元素。 |
+| PlaceholderLoadError | Component |  | 自定义会话列表加载错误时的占位元素。 |
+| filter | (conversationList: ConversationModel[]) => ConversationModel[] | - | 用于筛选会话列表的函数。 |
+| sort | (conversationList: ConversationModel[]) => ConversationModel[] | - | 用于排序会话列表的函数。 |
+| onConversationSelect | (conversation: ConversationModel) => void; | - | 点击会话后的回调函数，参数为所点击的会话对象。 |
+| onBeforeCreateConversation | (params: CreateParams) => CreateParams; | - | 创建会话前执行的自定义操作，参数为创建会话所需的参数。 |
+| onConversationCreate | (conversation: ConversationModel)  => void; | - | 会话创建后的回调函数，参数为创建的会话对象。 |
+| className | String | - | 指定根元素类的 CSS 自定义名称。 |
+| style | CSSProperties | - | 指定根元素样式的自定义样式。 |

package/resource/doc/chatkit/vue/components/conversation-preview.md

@@ -0,0 +1,213 @@
+## 概述
+
+ConversationPreview 组件用于预览会话列表中的单个会话。它负责显示会话信息、未读数，并提供会话操作功能。
+
+借助该组件，您可以自由地设计和组合出您所期望的 ConversationPreview 布局。此外，您还可以通过 `@select-conversation` 事件自定义选中会话时的行为。
+
+## 自定义用法
+
+您可以使用 `ConversationList `的 `Preview` prop 来自定义会话列表中每个会话的预览项。如果未指定 `Preview` prop，系统将默认使用 `ConversationPreviewUI` 组件。
+``` typescript
+<template>
+  <div class="custom-preview">
+    <div class="content">
+      <h4>Custom Preview</h4>
+      <p>{{ conversation?.getShowName() }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+interface Props {
+  conversation?: ConversationModel;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+</script>
+```
+``` typescript
+<template>
+  <ConversationList :Preview="CustomConversationPreview" />
+</template>
+
+<script setup lang="ts">
+import { ConversationList } from '@tencentcloud/chat-uikit-vue3';
+import CustomConversationPreview from './CustomConversationPreview.vue';
+</script>
+```
+
+## Props
+
+### ConversationPreviewProps
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| **conversation***(Required)* | ConversationModel | - | 必选参数，标识当前渲染的会话列表项 |
+| isSelected | boolean | false | 控制会话列表项 UI 是否处于选中状态 |
+| enableActions | boolean | true | 控制会话操作功能是否显示 |
+| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置 |
+| highlightMatchString | string | - | 会话列表项 Title 高亮匹配关键词，常用于会话搜索结果高亮 |
+| Preview | Component | ConversationPreviewUI | 自定义预览组件 |
+| Avatar | Component | Avatar | 渲染会话列表项头像区域 |
+| ConversationActions | Component | ConversationActions | 渲染会话列表项会话操作区域 |
+| className | string | - | 指定根元素类的 CSS 自定义名称 |
+| style | CSSProperties | - | 指定根元素样式的自定义样式 |
+
+### ConversationPreviewUIProps
+| 参数名 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| **conversation***(Required)* | ConversationModel | - | 必选参数，标识当前渲染的会话列表项 |
+| isSelected | boolean | false | 控制会话列表项 UI 是否处于选中状态 |
+| enableActions | boolean | true | 控制会话操作功能是否显示 |
+| actionsConfig | ConversationActionsConfig | - | 用于自定义会话操作配置 |
+| highlightMatchString | string | - | 会话列表项 Title 高亮匹配关键词 |
+| Title | Component | ConversationPreviewTitle | 渲染会话列表项标题区域 |
+| LastMessageAbstract | Component | ConversationPreviewAbstract | 渲染会话列表项最新消息摘要区域 |
+| LastMessageTimestamp | Component | ConversationPreviewTimestamp | 渲染会话列表项最新消息时间戳区域 |
+| Unread | Component | ConversationPreviewUnread | 渲染会话列表项消息未读标识区域 |
+| ConversationActions | Component | ConversationActions | 渲染会话列表项会话操作区域 |
+| Avatar | Component | Avatar | 渲染会话列表项头像区域 |
+| className | string | - | 指定根元素类的 CSS 自定义名称 |
+| style | CSSProperties | - | 指定根元素样式的自定义样式 |
+
+## Events
+| 事件名 | 参数 | 说明 |
+| --- | --- | --- |
+| select-conversation | (conversation: ConversationModel) | 指定在选择对话列表中的对话时接收回调的事件 |
+
+## 示例：自定义类 Discord 风格
+
+Discord 是一个流行的聊天应用程序，类似于 Skype 或 Telegram。Discord 中的聊天内容如下图所示:
+
+通过对 `ConversationPreview` 布局、功能以及样式的定制，我们可以快速实现类 Discord 效果。
+``` java
+<template>
+  <div
+    :class="[
+      'discord-preview-ui',
+      {
+        'conversationPreview--active': activeConversation?.conversationID === props.conversation.conversationID,
+      }
+    ]"
+    @click="handleSelectConversation"
+  >
+    <label class="discord-preview-ui__tag">
+      #
+    </label>
+    <span class="discord-preview-ui__title">{{ conversation?.getShowName() }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useConversationListState } from '@tencentcloud/chat-uikit-vue3';
+import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';
+
+const { setActiveConversation, activeConversation } = useConversationListState();
+
+interface Props {
+  conversation: ConversationModel;
+}
+
+const emit = defineEmits<{
+  selectConversation: [conversation: ConversationModel];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const handleSelectConversation = () => {
+  setActiveConversation(props.conversation.conversationID);
+  emit('selectConversation', props.conversation);
+};
+</script>
+<style scoped>
+.discord-style-app {
+  background-color: #2f3136;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.discord-conversation-list {
+  background-color: #2f3136;
+}
+
+.discord-preview-ui {
+  height: 34px;
+  border-radius: 4px;
+  padding: 6px 8px;
+  margin: 1px 8px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  position: relative;
+}
+
+.discord-preview-ui__tag {
+  margin-right: 6px;
+  font-size: 16px;
+  color: #8e9297;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.discord-preview-ui__title {
+  font-size: 16px;
+  color: #8e9297;
+  font-weight: 500;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.discord-preview-ui:hover {
+  background-color: #393c43;
+}
+
+.discord-preview-ui:hover .discord-preview-ui__tag,
+.discord-preview-ui:hover .discord-preview-ui__title {
+  color: #dcddde;
+}
+
+.conversationPreview--active {
+  background-color: #404249 !important;
+}
+
+.conversationPreview--active .discord-preview-ui__tag,
+.conversationPreview--active .discord-preview-ui__title {
+  color: #ffffff !important;
+}
+
+.discord-preview-ui::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 8px;
+  background-color: #ffffff;
+  border-radius: 0 4px 4px 0;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+</style>
+
+```
+``` typescript
+<template>
+  <ConversationList :Preview="CustomConversationPreview" />
+</template>
+
+<script setup lang="ts">
+import { ConversationList } from '@tencentcloud/chat-uikit-vue3';
+import CustomConversationPreview from './CustomConversationPreview.vue';
+</script>
+```
+
+`ConversationListPreview` 定制后效果如下：
+| **修改前** | **修改后** |
+| --- | --- |
+|  |  |