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

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

@@ -9,7 +9,7 @@ MessageList 组件是聊天界面的核心组件，负责展示消息列表并
 
 - 智能滚动：自动滚动到底部，支持手动滚动控制。
 
-- 历史加载：上加载更多历史消息。
+- 历史加载：上拉加载更多历史消息。
 
 - 已读回执：支持消息已读状态显示。
 
@@ -36,25 +36,23 @@ import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/ch
 
 ```
 
-> **说明：**
->
+实践建议：
+1. MessageList 组件需要放在 UIKitProvider、Chat 容器中使用。
 
-> 实践建议：
->
-> 1. MessageList 组件需要放在 UIKitProvider、Chat 容器中使用。
-> 2. MessageList 建议和 MessageInput 组件搭配使用。
-> 3. MessageList 会默认读取当前激活的会话，如果您不集成 ConversationList 组件，请参考 仅集成聊天 文档。
+2. MessageList 建议和 MessageInput 组件搭配使用。
 
 ## Props 字段速查表
-| 字段 | 类型 | 默认值 | 描述 |
-| --- | --- | --- | --- |
-| alignment | 'left' \\| 'right' \\| 'two-sided' | 'two-sided' | 消息的对齐方式，支持左对齐、右对齐和双边对齐。 |
-| messageAggregationTime | number | 300 (秒) | 消息聚合的时间间隔（秒），在此时间内发送的同一发送者的消息会被聚合。设置为 0 可禁用消息聚合。 |
-| enableReadReceipt | boolean | false | 是否启用消息已读回执功能。 |
-| messageActionList | MessageAction[] | undefined | 自定义消息操作列表，例如撤回、删除等。 |
-| filter | (message: MessageModel) => boolean | undefined | 自定义消息过滤函数，用于控制哪些消息应该显示。 |
-| Message | Component | undefined | 自定义消息组件，用于渲染单条消息。 |
-| MessageTimeDivider | Component | undefined | 自定义消息时间分割线组件。 |
+
+|字段|类型|默认值|描述|
+|---------|---------|---------|---------|
+|alignment|'left' \| 'right' \| 'two-sided'|'two-sided'|消息的对齐方式，支持左对齐、右对齐和双边对齐。|
+|enableReadReceipt|boolean|false|是否启用消息已读回执功能。|
+|messageActionList|MessageAction[]|undefined|自定义消息操作列表，例如撤回、删除等。|
+|messageAggregationTime|number|300 (秒)|消息聚合的时间间隔（秒），在此时间内发送的同一发送者的消息会被聚合。设置为 0 可禁用消息聚合。|
+|filter|(message: MessageInfo) => boolean|undefined|自定义消息过滤函数，用于控制哪些消息应该显示。|
+|enableReadReceipt|boolean|false|是否启用消息已读回执功能。|
+|Message|Component|undefined|自定义消息组件，用于渲染单条消息。|
+|MessageTimeDivider|Component|undefined|自定义消息时间分割线组件。|
 
 ## Props 详细介绍
 
@@ -84,7 +82,7 @@ import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/ch
 
    ``` typescript
    import type { Component } from 'vue';
-   import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
+   import type { MessageInfo } from '@tencentcloud/chat-uikit-vue3';
 
    interface MessageAction {
      /** 唯一的操作标识符 */
@@ -94,9 +92,9 @@ import { UIKitProvider, Chat, MessageList, MessageInput } from '@tencentcloud/ch
      /** 操作的图标组件或图标名称 */
      icon?: Component | string;
      /** 操作点击时的回调函数 */
-     onClick?: (message: MessageModel) => void;
+     onClick?: (message: MessageInfo) => void;
      /** 控制操作的可见性，可以是布尔值或一个根据消息决定可见性的函数 */
-     visible?: boolean | ((message: MessageModel) => boolean);
+     visible?: boolean | ((message: MessageInfo) => boolean);
      /** 自定义组件，如果提供了，将替代默认的标签和图标 */
      component?: Component;
      /** 自定义类名 */
@@ -165,7 +163,7 @@ const actions = useMessageActions(['copy', 'recall']);
      style: {
        color: 'orange',
      },
-     visible: (message) => message.flow === 'in',
+     visible: (message) => message.isSentBySelf === false,
    }, 'quote', 'recall', 'delete']);
    </script>
    ```
@@ -187,9 +185,9 @@ const customLikeAction = {
   key: 'like',
   label: 'Like',
   icon: '🩷',
-  visible: (message) => message.flow === 'in',
+  visible: (message) => message.isSentBySelf === false,
   onClick: (message) => {
-    console.log('like message:', message.ID);
+    console.log('like message:', message.msgID);
     // 在这里实现点赞逻辑，例如调用后端API
   },
 };
@@ -201,9 +199,9 @@ const actions = useMessageActions(['forward', 'copy', 'recall', customLikeAction
 示例效果：
 
 ### filter
-- type：((message: MessageModel) => boolean) | undefined
+- type：((message: MessageInfo) => boolean) | undefined
 
-- 详细说明：一个自定义的过滤函数，用于在消息列表渲染之前对消息进行筛选。该函数接收一个 `MessageModel` 类型的消息对象，并返回一个布尔值。如果返回 `true`，则消息会显示；如果返回 `false`，则消息不会显示。默认值为 `undefined`，表示不进行额外过滤（但组件内部会默认过滤掉 `isDeleted` 为 `true` 的消息）。
+- 详细说明：一个自定义的过滤函数，用于在消息列表渲染之前对消息进行筛选。该函数接收一个 `MessageInfo` 类型的消息对象，并返回一个布尔值。如果返回 `true`，则消息会显示；如果返回 `false`，则消息不会显示。默认值为 `undefined`，表示不进行额外过滤（但组件内部会默认过滤掉 `isDeleted` 为 `true` 的消息）。
 
 #### 代码示例：过滤掉机器人发送的文本消息
 
@@ -215,13 +213,13 @@ const actions = useMessageActions(['forward', 'copy', 'recall', customLikeAction
 
 <script lang="ts" setup>
 import { MessageList, MessageType } from '@tencentcloud/chat-uikit-vue3';
-import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
+import type { MessageInfo } from '@tencentcloud/chat-uikit-vue3';
 
 // 定义自定义消息过滤函数
-const customMessageFilter = (message: MessageModel): boolean => {
+const customMessageFilter = (message: MessageInfo): boolean => {
   if (
     message.nick?.includes('_robot')
-    && message.type === MessageType.TEXT as any
+    && message.messageType === MessageType.Text as any
   ) {
     return false;
   }
@@ -235,67 +233,32 @@ const customMessageFilter = (message: MessageModel): boolean => {
 
 - 详细说明：用于自定义渲染消息列表中的单个消息组件。
 
-   如果您需要完全控制消息的显示样式和内部逻辑，可以传入一个 Vue 组件来替代默认的消息渲染。自定义组件将接收 `message` (IMessageModel 类型)、`alignment`、`messageActionList` 等 props。默认值会使用内部的默认消息组件 `Message`。
-
-#### 代码示例：自定义 CUSTOM 消息点击跳转的消息组件
+   如果您需要完全控制消息的显示样式和内部逻辑，可以传入一个 Vue 组件来替代默认的消息渲染。自定义组件将接收 `message` 、`alignment`、`messageActionList` 等 props。默认值会使用内部的默认消息组件 `Message`。
 
-这个示例展示了如何创建一个自定义消息组件，用于渲染特定 `CUSTOM` 消息（`businessID` 为 `text_link`）为可点击跳转的链接。
-``` typescript
-<template>
-  <MessageList :Message="CustomMessage" />
-</template>
+   这个示例展示了如何重写Message 组件实现在自己的消息上显示头像和昵称（默认自己发送的消息不显示头像和昵称）。
 
-<script lang="ts" setup>
-import { defineComponent, h } from 'vue';
-import { MessageList, Message, MessageType } from '@tencentcloud/chat-uikit-vue3';
-import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
-
-const CustomMessage = defineComponent({
-  name: 'CustomMessage',
-  props: {
-    message: {
-      type: Object as () => MessageModel,
-      required: true,
-    },
-    // MessageList 会传递其他 props，这里可以按需接收，例如 alignment, messageActionList 等
-  },
-  setup(props) {
-    return () => {
-      const { message } = props;
-
-      if (message.type === MessageType.CUSTOM as any) {
-        const { businessID, ...restData } = JSON.parse(message.payload.data);
-        if (businessID === 'text_link') {
-          return h('div', { class: 'custom-text-link-message' }, [
-            h('div', restData.text),
-            h('a', { href: restData.link, target: '_blank' }, `跳转到外部网址 ${restData.link}`),
-          ]);
-        }
-      }
-      // 其他消息类型使用默认消息组件
-      return h(Message, props);
-    };
-  },
-});
-</script>
-
-<style scoped>
-.custom-text-link-message {
-  padding: 8px;
-  background-color: #f0f8ff;
-  border-radius: 8px;
-  max-width: 60%;
-  margin-bottom: 4px;
-}
-
-.custom-text-link-message a {
-  color: #1890ff;
-  text-decoration: underline;
-}
-</style>
-```
+   ``` typescript
+   <template>
+     <MessageList :Message="MessageWithSelfAvatarAndNick" />
+   </template>
 
-示例效果：
+   <script lang="ts" setup>
+   import { defineComponent, h } from 'vue';
+   import { MessageList, Message } from '@tencentcloud/chat-uikit-vue3';
+
+   const MessageWithSelfAvatarAndNick = defineComponent({
+     name: 'MessageWithSelfAvatar',
+     inheritAttrs: false,
+     setup(_, { attrs }) {
+       return () => h(Message as Component, {
+         ...attrs,
+         removeAvatar: false,
+         isHiddenMessageNick: false,
+       });
+     },
+   });
+   </script>
+   ```
 
 ### MessageTimeDivider
 - 类型：Component | undefined
@@ -304,116 +267,66 @@ const CustomMessage = defineComponent({
 
    您可以传入一个 Vue 组件来替代默认的时间分割线渲染。自定义组件将接收 `currentMessage` (当前时间分割线关联的消息)、`previousMessage` (上一条消息) 等 props，可以根据这些信息决定时间分割线的显示逻辑和样式。默认值会使用内部的默认时间分割线组件 `MessageTimeDivider`。
 
-#### 代码示例：自定义时间分割线组件，根据时间展示是否为上班时间
+   这个示例展示了如何创建一个自定义时间分割线组件，根据消息时间判断是否为工作时间，并显示相应的标签和颜色。
 
-这个示例展示了如何创建一个自定义时间分隔线组件，根据消息时间判断是否为工作时间，并显示相应的标签和颜色。
-``` typescript
-<template>
-  <MessageList :MessageTimeDivider="BusinessTimeDivider" />
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, h } from 'vue';
-import { MessageList } from '@tencentcloud/chat-uikit-vue3';
-import type { MessageModel } from '@tencentcloud/chat-uikit-vue3';
-
-const BusinessTimeDivider = defineComponent({
-  name: 'BusinessTimeDivider',
-  props: {
-    previousMessage: {
-      type: Object as () => MessageModel | undefined,
-      default: undefined,
-    },
-    currentMessage: {
-      type: Object as () => MessageModel,
-      required: true,
-    },
-  },
-  setup(props) {
-    if (!props.previousMessage || !props.currentMessage) {
-      return () => null;
-    }
-
-    const currentTime = new Date(props.currentMessage.time * 1000);
-    const prevTime = new Date(props.previousMessage.time * 1000);
-
-    // 跨天或间隔超过4小时才显示
-    const shouldShow = currentTime.toDateString() !== prevTime.toDateString()
-      || (currentTime.getTime() - prevTime.getTime()) > 4 * 60 * 60 * 1000;
-
-    if (!shouldShow) {
-      return () => null;
-    }
-
-    // 判断工作时间 (9:00-18:00, 周一到周五)
-    const isWorkingTime = () => {
-      const hour = currentTime.getHours();
-      const day = currentTime.getDay();
-      return day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
-    };
-
-    const timeLabel = isWorkingTime() ? 'Working' : 'Non working';
-    const timeColor = isWorkingTime() ? '#52c41a' : '#faad14';
-
-    return () =>
-      h('div', { style: { textAlign: 'center', margin: '16px 0' } }, [
-        h('span', {
-          style: {
-            backgroundColor: timeColor,
-            color: 'white',
-            padding: '2px 8px',
-            borderRadius: '12px',
-            marginRight: '8px',
-          },
-        }, timeLabel),
-        currentTime.toLocaleString(),
-      ]);
-  },
-});
-</script>
-```
-
-示例效果：
-
-## 扩展资料
-
-`MessageModel` 类型常用字段：
-``` typescript
-// MessageModel 接口定义，详细内容请参考 @tencentcloud/chat-uikit-engine 文档
-// 这是一个复杂的消息模型，包含消息ID、类型、发送者、内容、时间、状态等属性。
-// 示例结构 (非完整定义):
-interface MessageModel {
-  ID: string;
-  conversationID: string;
-  type: MessageType;
-  payload: any;
-  flow: 'in' | 'out';
-  from: string;
-  to: string;
-  time: number; // Unix 时间戳 (秒)
-  status: 'unSend' | 'success' | 'fail';
-  isDeleted: boolean;
-  isRevoked: boolean;
-  hasRiskContent: boolean; // 是否包含风险内容
-  // ... 其他属性
-}
-
-enum MessageType {
-  TEXT,     // 文本
-  IMAGE,    // 图像
-  AUDIO,    // 音频
-  VIDEO,    // 视频
-  FILE,     // 文件
-  FACE,     // 大表情
-  LOCATION, // 定位
-  GRP_TIP,  // 群提示
-  CUSTOM,   // 自定义
-  MERGER,   // 合并转发
-}
-
-```
+   ``` typescript
+   <template>
+     <MessageList :MessageTimeDivider="BusinessTimeDivider" />
+   </template>
 
-MessageModel 的完整内容请参见：[TUIChatEngine 参考文档](https://web.sdk.qcloud.com/im/doc/chat-engine/IMessageModel.html)。
+   <script lang="ts" setup>
+   import { defineComponent, h } from 'vue';
+   import { MessageList } from '@tencentcloud/chat-uikit-vue3';
+   import type { MessageInfo } from '@tencentcloud/chat-uikit-vue3';
+
+   const BusinessTimeDivider = defineComponent({
+     name: 'BusinessTimeDivider',
+     props: {
+       previousMessage: {
+         type: Object as PropType<MessageInfo | undefined>,
+         default: undefined,
+       },
+       currentMessage: {
+         type: Object as PropType<MessageInfo>,
+         required: true,
+       },
+     },
+     setup(props) {
+       return () => {
+         if (!props.previousMessage || !props.currentMessage) {
+           return null;
+         }
+
+         const currentTime = props.currentMessage.timestamp ?? new Date();
+         const previousTime = props.previousMessage.timestamp ?? new Date();
+         const shouldShow = currentTime.toDateString() !== previousTime.toDateString()
+           || currentTime.getTime() - previousTime.getTime() > 4 * 60 * 60 * 1000;
+
+         if (!shouldShow) {
+           return null;
+         }
+
+         const hour = currentTime.getHours();
+         const day = currentTime.getDay();
+         const isWorkingTime = day >= 1 && day <= 5 && hour >= 9 && hour <= 18;
+
+         return h('div', { class: 'message-props-demo__time-divider' }, [
+           h(
+             'span',
+             {
+               class: isWorkingTime
+                 ? 'message-props-demo__time-label message-props-demo__time-label--work'
+                 : 'message-props-demo__time-label message-props-demo__time-label--off',
+             },
+             isWorkingTime ? '工作时间' : '非工作时间',
+           ),
+           currentTime.toLocaleString(),
+         ]);
+       };
+     },
+   });
+   </script>
+   ```
 
 ## 相关文档
 - 自定义组件 - UIKitProvider
@@ -432,6 +345,6 @@ MessageModel 的完整内容请参见：[TUIChatEngine 参考文档](https://web
 
 - [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)
+- [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}/search.md

@@ -1,6 +1,6 @@
 ## 概述
 
-Search 是一个功能完整的搜索解决方案，包含了搜索框、搜索结果展示、高级搜索等功能的完整组件集合。适用于即时通讯、在线会议、在线教育等场景的用户、群组、消息搜索。
+Search 是一个功能完整的搜索解决方案，包含了搜索框、搜索结果展示、高级搜索等功能的完整组件集合。适用于即时通信、在线会议、在线教育等场景的用户、群组、消息搜索。
 
 > **说明：**
 >
@@ -9,29 +9,30 @@ Search 是一个功能完整的搜索解决方案，包含了搜索框、搜索
 >
 
 ## 搜索模式
-| **迷你模式 (MINI)** | **标准模式 (STANDARD)** | **嵌入式模式 (EMBEDDED)** |
+| <strong>迷你模式 (MINI)</strong> | <strong>标准模式 (STANDARD)</strong> | <strong>嵌入式模式 (EMBEDDED)</strong> |
 | --- | --- | --- |
 | 适用于侧边栏或小容器<br>显示有限结果数量<br>支持展开查看更多 | 适用于全屏搜索界面<br>完整功能展示<br>支持高级搜索 | 适用于聊天界面<br>专注消息搜索<br>优化的布局 |
 
 ## Props
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| variant | VariantType | VariantType.MINI | 搜索模式：mini(迷你)、standard(标准)、embedded(嵌入式) |
-| SearchBar | Component<SearchBarProps> | DefaultSearchBar | 自定义搜索框组件 |
-| SearchResults | Component<SearchResultsProps> | DefaultSearchResults | 自定义搜索结果组件 |
-| SearchAdvanced | Component<SearchAdvancedProps> | DefaultSearchAdvanced | 自定义高级搜索组件 |
-| SearchResultsPresearch | Component | - | 搜索前占位符组件 |
-| SearchResultsLoading | Component | - | 加载中占位符组件 |
-| SearchResultsEmpty | Component | - | 空结果占位符组件 |
-| SearchResultItem | Component<ResultItemProps> | - | 自定义搜索结果项组件 |
-| debounceTime | number | 300 | 搜索防抖时间(毫秒) |
-| autoFocus | boolean | false | 是否自动聚焦搜索框 |
-| className | string | - | 自定义样式类名 |
-| style | CSSProperties | - | 自定义样式 |
-| onKeywordChange | (keyword: string) => void | - | 搜索关键词变化回调 |
-| onSearchComplete | (results: Map<SearchType, SearchResult>) => void | - | 搜索完成回调 |
-| onResultItemClick | (data: SearchResultItem, type: SearchType) => void | - | 搜索结果点击回调 |
-| onError | (error: Error) => void | - | 搜索错误回调 |
+
+|属性名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|variant|VariantType|VariantType.MINI|搜索模式：mini(迷你)、standard(标准)、embedded(嵌入式)|
+|SearchBar|Component<SearchBarProps>|DefaultSearchBar|自定义搜索框组件|
+|SearchResults|Component<SearchResultsProps>|DefaultSearchResults|自定义搜索结果组件|
+|SearchAdvanced|Component<SearchAdvancedProps>|DefaultSearchAdvanced|自定义高级搜索组件|
+|SearchResultsPresearch|Component|-|搜索前占位符组件|
+|SearchResultsLoading|Component|-|加载中占位符组件|
+|SearchResultsEmpty|Component|-|空结果占位符组件|
+|SearchResultItem|Component<ResultItemProps>|-|自定义搜索结果项组件|
+|debounceTime|number|300|搜索防抖时间(毫秒)|
+|autoFocus|boolean|false|是否自动聚焦搜索框|
+|className|string|-|自定义样式类名|
+|style|CSSProperties|-|自定义样式|
+|onKeywordChange|(keyword: string) => void|-|搜索关键词变化回调|
+|onSearchComplete|(results: Map<SearchType, SearchResult>) => void|-|搜索完成回调|
+|onResultItemClick|(data: SearchResultItem, type: SearchType) => void|-|搜索结果点击回调|
+|onError|(error: Error) => void|-|搜索错误回调|
 
 ## 基础用法
 ``` typescript
@@ -71,21 +72,22 @@ const handleError = (error: Error) => {
 【自定义 SearchBar】
 
 **Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| value | string | - | 搜索框值 |
-| onChange | (e: Event) => void | - | 输入变化回调 |
-| onKeyDown | (e: KeyboardEvent) => void | - | 键盘事件回调 |
-| onClear | () => void | - | 清除回调 |
-| placeholder | string | - | 占位符文本 |
-| SearchIcon | Component | - | 自定义搜索图标 |
-| ClearIcon | Component | - | 自定义清除图标 |
-| className | string | - | 自定义样式类名 |
-| style | CSSProperties | - | 自定义样式 |
-| onFocus | (e: FocusEvent) => void | - | 获得焦点回调 |
-| onBlur | (e: FocusEvent) => void | - | 失去焦点回调 |
-| autoFocus | boolean | false | 是否自动聚焦 |
-| variant | VariantType | - | 搜索模式 |
+
+|属性名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|value|string|-|搜索框值|
+|onChange|(e: Event) => void|-|输入变化回调|
+|onKeyDown|(e: KeyboardEvent) => void|-|键盘事件回调|
+|onClear|() => void|-|清除回调|
+|placeholder|string|-|占位符文本|
+|SearchIcon|Component|-|自定义搜索图标|
+|ClearIcon|Component|-|自定义清除图标|
+|className|string|-|自定义样式类名|
+|style|CSSProperties|-|自定义样式|
+|onFocus|(e: FocusEvent) => void|-|获得焦点回调|
+|onBlur|(e: FocusEvent) => void|-|失去焦点回调|
+|autoFocus|boolean|false|是否自动聚焦|
+|variant|VariantType|-|搜索模式|
 
 **示例**
 ``` typescript
@@ -217,21 +219,22 @@ import CustomSearchBar from './CustomSearchBar.vue';
 【自定义 SearchResults】
 
 **Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| results | Map<SearchType, SearchResult> | - | 搜索结果数据 |
-| isLoading | boolean | - | 是否正在加载 |
-| error | Error \\| null | - | 错误信息 |
-| keyword | string | - | 搜索关键词 |
-| typeLabels | Record<SearchType, string> | - | 搜索类型标签 |
-| onLoadMore | (type: SearchType) => void | - | 加载更多回调 |
-| onResultItemClick | (data: SearchResultItemType, type: SearchType) => void | - | 结果项点击回调 |
-| SearchResultsLoading | Component | Loading | 自定义加载组件 |
-| SearchResultsPresearch | Component | - | 搜索前占位符组件 |
-| SearchResultsEmpty | Component | EmptyResult | 空结果占位符组件 |
-| SearchResultItem | Component<ResultItemProps> | DefaultSearchResultsItem | 自定义结果项组件 |
-| variant | VariantType | VariantType.STANDARD | 显示模式 |
-| searchType | SearchType \\| 'all' | 'all' | 当前搜索类型 |
+
+|属性名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|results|Map<SearchType, SearchResult>|-|搜索结果数据|
+|isLoading|boolean|-|是否正在加载|
+|error|Error \| null|-|错误信息|
+|keyword|string|-|搜索关键词|
+|typeLabels|Record<SearchType, string>|-|搜索类型标签|
+|onLoadMore|(type: SearchType) => void|-|加载更多回调|
+|onResultItemClick|(data: SearchResultItemType, type: SearchType) => void|-|结果项点击回调|
+|SearchResultsLoading|Component|Loading|自定义加载组件|
+|SearchResultsPresearch|Component|-|搜索前占位符组件|
+|SearchResultsEmpty|Component|EmptyResult|空结果占位符组件|
+|SearchResultItem|Component<ResultItemProps>|DefaultSearchResultsItem|自定义结果项组件|
+|variant|VariantType|VariantType.STANDARD|显示模式|
+|searchType|SearchType \| 'all'|'all'|当前搜索类型|
 
 **示例**
 ``` typescript
@@ -405,12 +408,13 @@ import CustomSearchResults from './CustomSearchResults.vue';
 【自定义 SearchAdvanced】
 
 **Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| variant | VariantType | - | 显示模式 |
-| searchType | SearchTabType | - | 当前搜索类型 |
-| advancedParams | Map<SearchType, SearchParamsMap[SearchType]> | - | 高级搜索参数 |
-| onAdvancedParamsChange | (type: SearchType, params: SearchParamsMap[SearchType]) => void | - | 参数变化回调 |
+
+|属性名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|variant|VariantType|-|显示模式|
+|searchType|SearchTabType|-|当前搜索类型|
+|advancedParams|Map<SearchType, SearchParamsMap[SearchType]>|-|高级搜索参数|
+|onAdvancedParamsChange|(type: SearchType, params: SearchParamsMap[SearchType]) => void|-|参数变化回调|
 
 **示例**
 ``` typescript
@@ -558,13 +562,14 @@ import CustomSearchAdvanced from './CustomSearchAdvanced.vue';
 【自定义 SearchResultItem】
 
 **Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| data | SearchResultItem | - | 搜索结果数据 |
-| type | SearchType | - | 搜索结果类型 |
-| keyword | string | - | 搜索关键词 |
-| onClick | (data: SearchResultItem, type: SearchType) => void | - | 点击回调 |
-| className | string | - | 自定义样式类名 |
+
+|属性名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|data|SearchResultItem|-|搜索结果数据|
+|type|SearchType|-|搜索结果类型|
+|keyword|string|-|搜索关键词|
+|onClick|(data: SearchResultItem, type: SearchType) => void|-|点击回调|
+|className|string|-|自定义样式类名|
 
 **示例**
 ``` java
@@ -717,11 +722,12 @@ import CustomSearchItem from './CustomSearchItem.vue';
 【自定义占位符】
 
 **Props**
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| SearchResultsPresearch | Component | - | 搜索前占位符组件 |
-| SearchResultsLoading | Component | - | 加载中占位符组件 |
-| SearchResultsEmpty | Component | - | 空结果占位符组件 |
+
+|属性名|类型|默认值|说明|
+|---------|---------|---------|---------|
+|SearchResultsPresearch|Component|-|搜索前占位符组件|
+|SearchResultsLoading|Component|-|加载中占位符组件|
+|SearchResultsEmpty|Component|-|空结果占位符组件|
 
 **示例**
 ``` typescript