@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/{chatuikit → chatkit}/vue/components/search.md

@@ -3,208 +3,35 @@
 Search is a complete search solution that includes a comprehensive component set for search box, search results display, advanced search, and more. It's suitable for user, group, and message search scenarios in instant messaging, online meetings, online education, and more.
 
 > **Note:**
-> 
+>
 
 > This feature is a value-added service that requires you to purchase the Cloud Search Plugin. Please click [Purchase](https://console.trtc.io/chat/plugin/TUICloudSearch).
-> 
-
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027116646/a31b2bd2870911f0bd05525400454e06.png)
-
+>
 
 ## Search Modes
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Mini Mode (MINI)**</td>
-
-<td rowspan="1" colSpan="1" >**Standard Mode (STANDARD)**</td>
-
-<td rowspan="1" colSpan="1" >**Embedded Mode (EMBEDDED)**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Suitable for sidebar or small containers<br>Displays limited number of results<br>Supports expanding to view more</td>
-
-<td rowspan="1" colSpan="1" >Suitable for full-screen search interface<br>Complete feature display<br>Supports advanced search</td>
-
-<td rowspan="1" colSpan="1" >Suitable for chat interface<br>Focuses on message search<br>Optimized layout</td>
-</tr>
-</table>
-
+| **Mini Mode (MINI)** | **Standard Mode (STANDARD)** | **Embedded Mode (EMBEDDED)** |
+| --- | --- | --- |
+| Suitable for sidebar or small containers<br>Displays limited number of results<br>Supports expanding to view more | Suitable for full-screen search interface<br>Complete feature display<br>Supports advanced search | Suitable for chat interface<br>Focuses on message search<br>Optimized layout |
 
 ## Props
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >variant</td>
-
-<td rowspan="1" colSpan="1" >VariantType</td>
-
-<td rowspan="1" colSpan="1" >VariantType.MINI</td>
-
-<td rowspan="1" colSpan="1" >Search mode: mini (Mini), standard (Standard), embedded (Embedded)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchBar</td>
-
-<td rowspan="1" colSpan="1" >Component<SearchBarProps></td>
-
-<td rowspan="1" colSpan="1" >DefaultSearchBar</td>
-
-<td rowspan="1" colSpan="1" >Custom search bar component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResults</td>
-
-<td rowspan="1" colSpan="1" >Component<SearchResultsProps></td>
-
-<td rowspan="1" colSpan="1" >DefaultSearchResults</td>
-
-<td rowspan="1" colSpan="1" >Custom search results component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchAdvanced</td>
-
-<td rowspan="1" colSpan="1" >Component<SearchAdvancedProps></td>
-
-<td rowspan="1" colSpan="1" >DefaultSearchAdvanced</td>
-
-<td rowspan="1" colSpan="1" >Custom advanced search component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsPresearch</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Pre-search placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsLoading</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Loading placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsEmpty</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Empty results placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultItem</td>
-
-<td rowspan="1" colSpan="1" >Component<ResultItemProps></td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Custom search result item component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >debounceTime</td>
-
-<td rowspan="1" colSpan="1" >number</td>
-
-<td rowspan="1" colSpan="1" >300</td>
-
-<td rowspan="1" colSpan="1" >Search debounce time (milliseconds)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >autoFocus</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >false</td>
-
-<td rowspan="1" colSpan="1" >Whether to auto-focus search box</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" >Custom style class name</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" >Custom styles</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onKeywordChange</td>
-
-<td rowspan="1" colSpan="1" >(keyword: string) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search keyword change callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onSearchComplete</td>
-
-<td rowspan="1" colSpan="1" >(results: Map<SearchType, SearchResult>) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search complete callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onResultItemClick</td>
-
-<td rowspan="1" colSpan="1" >(data: SearchResultItem, type: SearchType) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search result click callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onError</td>
-
-<td rowspan="1" colSpan="1" >(error: Error) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search error callback</td>
-</tr>
-</table>
-
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| variant | VariantType | VariantType.MINI | Search mode: mini (Mini), standard (Standard), embedded (Embedded) |
+| SearchBar | Component<SearchBarProps> | DefaultSearchBar | Custom search bar component |
+| SearchResults | Component<SearchResultsProps> | DefaultSearchResults | Custom search results component |
+| SearchAdvanced | Component<SearchAdvancedProps> | DefaultSearchAdvanced | Custom advanced search component |
+| SearchResultsPresearch | Component | - | Pre-search placeholder component |
+| SearchResultsLoading | Component | - | Loading placeholder component |
+| SearchResultsEmpty | Component | - | Empty results placeholder component |
+| SearchResultItem | Component<ResultItemProps> | - | Custom search result item component |
+| debounceTime | number | 300 | Search debounce time (milliseconds) |
+| autoFocus | boolean | false | Whether to auto-focus search box |
+| className | string | - | Custom style class name |
+| style | CSSProperties | - | Custom styles |
+| onKeywordChange | (keyword: string) => void | - | Search keyword change callback |
+| onSearchComplete | (results: Map<SearchType, SearchResult>) => void | - | Search complete callback |
+| onResultItemClick | (data: SearchResultItem, type: SearchType) => void | - | Search result click callback |
+| onError | (error: Error) => void | - | Search error callback |
 
 ## Basic Usage
 ``` typescript
@@ -241,153 +68,24 @@ const handleError = (error: Error) => {
 
 The `Search` component provides multiple replaceable child components, allowing users to customize `SearchBar`, `SearchResults`, `SearchAdvanced`, `SearchResultItem`, `SearchResultsPresearch`, `SearchResultsLoading`, `SearchResultsEmpty`, etc. Users can also utilize default child components for further customization.
 
-
-
 【Custom SearchBar】
 
 **Props**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >value</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search box value</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onChange</td>
-
-<td rowspan="1" colSpan="1" >(e: Event) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Input change callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onKeyDown</td>
-
-<td rowspan="1" colSpan="1" >(e: KeyboardEvent) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Keyboard event callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onClear</td>
-
-<td rowspan="1" colSpan="1" >() => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Clear callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >placeholder</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Placeholder text</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchIcon</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Custom search icon</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >ClearIcon</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Custom clear icon</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" >Custom style class name</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" >Custom styles</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onFocus</td>
-
-<td rowspan="1" colSpan="1" >(e: FocusEvent) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Focus callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onBlur</td>
-
-<td rowspan="1" colSpan="1" >(e: FocusEvent) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Blur callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >autoFocus</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >false</td>
-
-<td rowspan="1" colSpan="1" >Whether to auto-focus</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >variant</td>
-
-<td rowspan="1" colSpan="1" >VariantType</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search mode</td>
-</tr>
-</table>
-
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| value | string | - | Search box value |
+| onChange | (e: Event) => void | - | Input change callback |
+| onKeyDown | (e: KeyboardEvent) => void | - | Keyboard event callback |
+| onClear | () => void | - | Clear callback |
+| placeholder | string | - | Placeholder text |
+| SearchIcon | Component | - | Custom search icon |
+| ClearIcon | Component | - | Custom clear icon |
+| className | string | - | Custom style class name |
+| style | CSSProperties | - | Custom styles |
+| onFocus | (e: FocusEvent) => void | - | Focus callback |
+| onBlur | (e: FocusEvent) => void | - | Blur callback |
+| autoFocus | boolean | false | Whether to auto-focus |
+| variant | VariantType | - | Search mode |
 
 **Example**
 ``` typescript
@@ -519,148 +217,21 @@ import CustomSearchBar from './CustomSearchBar.vue';
 【Custom SearchResults】
 
 **Props**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >results</td>
-
-<td rowspan="1" colSpan="1" >Map<SearchType, SearchResult></td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search result data</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >isLoading</td>
-
-<td rowspan="1" colSpan="1" >boolean</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Whether loading</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >error</td>
-
-<td rowspan="1" colSpan="1" >Error \| null</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Error information</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >keyword</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search keyword</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >typeLabels</td>
-
-<td rowspan="1" colSpan="1" >Record<SearchType, string></td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search type labels</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onLoadMore</td>
-
-<td rowspan="1" colSpan="1" >(type: SearchType) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Load more callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onResultItemClick</td>
-
-<td rowspan="1" colSpan="1" >(data: SearchResultItemType, type: SearchType) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Result item click callback</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsLoading</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >Loading</td>
-
-<td rowspan="1" colSpan="1" >Custom loading component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsPresearch</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Pre-search placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsEmpty</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >EmptyResult</td>
-
-<td rowspan="1" colSpan="1" >Empty results placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultItem</td>
-
-<td rowspan="1" colSpan="1" >Component<ResultItemProps></td>
-
-<td rowspan="1" colSpan="1" >DefaultSearchResultsItem</td>
-
-<td rowspan="1" colSpan="1" >Custom result item component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >variant</td>
-
-<td rowspan="1" colSpan="1" >VariantType</td>
-
-<td rowspan="1" colSpan="1" >VariantType.STANDARD</td>
-
-<td rowspan="1" colSpan="1" >Display mode</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >searchType</td>
-
-<td rowspan="1" colSpan="1" >SearchType \| 'all'</td>
-
-<td rowspan="1" colSpan="1" >'all'</td>
-
-<td rowspan="1" colSpan="1" >Current search type</td>
-</tr>
-</table>
-
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| results | Map<SearchType, SearchResult> | - | Search result data |
+| isLoading | boolean | - | Whether loading |
+| error | Error \\| null | - | Error information |
+| keyword | string | - | Search keyword |
+| typeLabels | Record<SearchType, string> | - | Search type labels |
+| onLoadMore | (type: SearchType) => void | - | Load more callback |
+| onResultItemClick | (data: SearchResultItemType, type: SearchType) => void | - | Result item click callback |
+| SearchResultsLoading | Component | Loading | Custom loading component |
+| SearchResultsPresearch | Component | - | Pre-search placeholder component |
+| SearchResultsEmpty | Component | EmptyResult | Empty results placeholder component |
+| SearchResultItem | Component<ResultItemProps> | DefaultSearchResultsItem | Custom result item component |
+| variant | VariantType | VariantType.STANDARD | Display mode |
+| searchType | SearchType \\| 'all' | 'all' | Current search type |
 
 **Example**
 ``` typescript
@@ -709,7 +280,7 @@ import CustomSearchBar from './CustomSearchBar.vue';
                 :key="index"
                 @click="handleResultClick(data)"
               >
-                {{ (data as SearchCloudGroupsResultItem).groupInfo.name 
+                {{ (data as SearchCloudGroupsResultItem).groupInfo.name
                 || (data as SearchCloudGroupsResultItem).groupInfo.groupID }}
               </li>
             </ul>
@@ -834,58 +405,12 @@ import CustomSearchResults from './CustomSearchResults.vue';
 【Custom SearchAdvanced】
 
 **Props**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >variant</td>
-
-<td rowspan="1" colSpan="1" >VariantType</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Display mode</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >searchType</td>
-
-<td rowspan="1" colSpan="1" >SearchTabType</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Current search type</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >advancedParams</td>
-
-<td rowspan="1" colSpan="1" >Map<SearchType, SearchParamsMap[SearchType]></td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Advanced search parameters</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onAdvancedParamsChange</td>
-
-<td rowspan="1" colSpan="1" >(type: SearchType, params: SearchParamsMap[SearchType]) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Parameter change callback</td>
-</tr>
-</table>
-
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| variant | VariantType | - | Display mode |
+| searchType | SearchTabType | - | Current search type |
+| advancedParams | Map<SearchType, SearchParamsMap[SearchType]> | - | Advanced search parameters |
+| onAdvancedParamsChange | (type: SearchType, params: SearchParamsMap[SearchType]) => void | - | Parameter change callback |
 
 **Example**
 ``` typescript
@@ -1033,68 +558,13 @@ import CustomSearchAdvanced from './CustomSearchAdvanced.vue';
 【Custom SearchResultItem】
 
 **Props**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >data</td>
-
-<td rowspan="1" colSpan="1" >SearchResultItem</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search result data</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >type</td>
-
-<td rowspan="1" colSpan="1" >SearchType</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search result type</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >keyword</td>
-
-<td rowspan="1" colSpan="1" >string</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Search keyword</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >onClick</td>
-
-<td rowspan="1" colSpan="1" >(data: SearchResultItem, type: SearchType) => void</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Click callback</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" >Custom style class name</td>
-</tr>
-</table>
-
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| data | SearchResultItem | - | Search result data |
+| type | SearchType | - | Search result type |
+| keyword | string | - | Search keyword |
+| onClick | (data: SearchResultItem, type: SearchType) => void | - | Click callback |
+| className | string | - | Custom style class name |
 
 **Example**
 ``` java
@@ -1106,7 +576,7 @@ import CustomSearchAdvanced from './CustomSearchAdvanced.vue';
       @click="handleClick"
     >
       <div class="user-avatar">
-        <img :src="data.profile.avatar" :alt="data.profile.nick" />
+
       </div>
       <div class="user-info">
         <div class="user-name">{{ data.profile.nick }}</div>
@@ -1247,48 +717,11 @@ import CustomSearchItem from './CustomSearchItem.vue';
 【Custom Placeholders】
 
 **Props**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Property</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsPresearch</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Pre-search placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsLoading</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Loading placeholder component</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >SearchResultsEmpty</td>
-
-<td rowspan="1" colSpan="1" >Component</td>
-
-<td rowspan="1" colSpan="1" >-</td>
-
-<td rowspan="1" colSpan="1" >Empty results placeholder component</td>
-</tr>
-</table>
-
+| Property | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| SearchResultsPresearch | Component | - | Pre-search placeholder component |
+| SearchResultsLoading | Component | - | Loading placeholder component |
+| SearchResultsEmpty | Component | - | Empty results placeholder component |
 
 **Example**
 ``` typescript