docs(search): [search] Add types display area and Optimize search documents (#720)

* docs(types): Add types display area

* docs(search): Optimize search documents

examples/sites/demos/pc/app/search/basic-usage-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-search v-model="value" placeholder="请输入关键词"></tiny-search>
-    {{ value }}
+    <div class="mt10">当前搜索值为：{{ value }}</div>
   </div>
 </template>
 
@@ -9,5 +9,5 @@
 import { ref } from 'vue'
 import { Search as TinySearch } from '@opentiny/vue'
 
-const value = ref('')
+const value = ref('默认值')
 </script>

examples/sites/demos/pc/app/search/basic-usage.spec.ts

@@ -15,6 +15,7 @@ test('是否正常渲染', async ({ page }) => {
   await expect(icon).toBeVisible()
   await expect(selector).not.toBeVisible()
   await expect(firstPresent).not.toBeVisible()
+  await expect(firstInput).toHaveValue('搜索')
   await firstInput.fill('123')
   await expect(firstInput).toHaveValue('123')
 })

examples/sites/demos/pc/app/search/basic-usage.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <tiny-search v-model="value" placeholder="请输入关键词"></tiny-search>
-    {{ value }}
+    <div class="mt10">当前搜索值为：{{ value }}</div>
   </div>
 </template>
 
@@ -14,7 +14,7 @@ export default {
   },
   data() {
     return {
-      value: ''
+      value: '默认值'
     }
   }
 }

examples/sites/demos/pc/app/search/change-events-composition-api.vue

@@ -1,11 +1,15 @@
 <template>
-  <tiny-search @change="change"></tiny-search>
+  <tiny-search @change="change" @input="input"></tiny-search>
 </template>
 
 <script setup lang="jsx">
 import { Search as TinySearch, Modal } from '@opentiny/vue'
 
 function change(key, value) {
-  Modal.message(`${value}`)
+  Modal.message(`change: ${value}`)
+}
+
+function input(key, value) {
+  Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
 }
 </script>

examples/sites/demos/pc/app/search/change-events.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-test('cahnge事件是否正常触发', async ({ page }) => {
+test('change事件是否正常触发', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#change-events')
 

examples/sites/demos/pc/app/search/change-events.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-search @change="change"></tiny-search>
+  <tiny-search @change="change" @input="input"></tiny-search>
 </template>
 
 <script lang="jsx">
@@ -11,7 +11,10 @@ export default {
   },
   methods: {
     change(key, value) {
-      Modal.message(`${value}`)
+      Modal.message(`change: ${value}`)
+    },
+    input(key, value) {
+      Modal.message(`input: ${key}, ${JSON.stringify(value)}`)
     }
   }
 }

examples/sites/demos/pc/app/search/custom-search-types-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="height: 200px">
-    <tiny-search :search-types="searchTypes1" :type-value="typeValue">
+  <div style="height: 130px">
+    <tiny-search :search-types="searchTypes1">
       <template #poplist="slotScope">
         <b>{{ slotScope.slotScope.text }}</b>
       </template>
@@ -26,6 +26,4 @@ const searchTypes1 = ref([
     value: 3
   }
 ])
-
-const typeValue = searchTypes1.value[2]
 </script>

examples/sites/demos/pc/app/search/custom-search-types.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="height: 200px">
-    <tiny-search :search-types="searchTypes1" :type-value="typeValue">
+  <div style="height: 130px">
+    <tiny-search :search-types="searchTypes1">
       <template #poplist="slotScope">
         <b>{{ slotScope.slotScope.text }}</b>
       </template>
@@ -30,12 +30,8 @@ export default {
           text: '插槽3',
           value: 3
         }
-      ],
-      typeValue: null
+      ]
     }
-  },
-  created() {
-    this.typeValue = this.searchTypes1[2]
   }
 }
 </script>

examples/sites/demos/pc/app/search/default-value-composition-api.vue

@@ -1,10 +0,0 @@
-<template>
-  <tiny-search v-model="value"></tiny-search>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { Search as TinySearch } from '@opentiny/vue'
-
-const value = ref('搜索')
-</script>

examples/sites/demos/pc/app/search/default-value.spec.ts

@@ -1,10 +0,0 @@
-import { expect, test } from '@playwright/test'
-
-test('设置默认值搜索', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('search#default-value')
-
-  const input = page.locator('.tiny-search__input')
-
-  await expect(input).toHaveValue('搜索')
-})

examples/sites/demos/pc/app/search/default-value.vue

@@ -1,18 +0,0 @@
-<template>
-  <tiny-search v-model="value"></tiny-search>
-</template>
-
-<script lang="jsx">
-import { Search } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinySearch: Search
-  },
-  data() {
-    return {
-      value: '搜索'
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/search/search-types-composition-api.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-search :search-types="searchTypes"></tiny-search>
+  <div style="height: 130px">
+    <tiny-search :search-types="searchTypes" :type-value="typeValue"></tiny-search>
+  </div>
 </template>
 
 <script setup lang="jsx">
-import { ref } from 'vue'
+import { reactive } from 'vue'
 import { Search as TinySearch } from '@opentiny/vue'
 
-const searchTypes = ref([
+const searchTypes = reactive([
   {
     text: '找人',
     value: 1
@@ -20,4 +22,5 @@ const searchTypes = ref([
     value: 3
   }
 ])
+const typeValue = reactive(searchTypes[2])
 </script>

examples/sites/demos/pc/app/search/search-types.spec.ts

@@ -9,7 +9,7 @@ test('下拉选择搜索类型', async ({ page }) => {
   const option = search.locator('.tiny-search__poplist-item').filter({ hasText: '找文档' })
   const text = search.locator('.tiny-search__text')
 
-  await expect(text).toHaveText('找人')
+  await expect(text).toHaveText('找谁')
   await expand.click()
   await option.click() // 下拉选择
   await expect(text).toHaveText('找文档')

examples/sites/demos/pc/app/search/search-types.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-search :search-types="searchTypes"></tiny-search>
+  <div style="height: 130px">
+    <tiny-search :search-types="searchTypes" :type-value="typeValue"></tiny-search>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,8 +26,12 @@ export default {
           text: '找谁',
           value: 3
         }
-      ]
+      ],
+      typeValue: null
     }
+  },
+  created() {
+    this.typeValue = this.searchTypes[2]
   }
 }
 </script>

examples/sites/demos/pc/app/search/show-selected-types-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 200px">
+  <div style="height: 130px">
     <tiny-search :search-types="searchTypes">
       <template #text="data">
         <b>{{ data.slotScope.text }}</b>

examples/sites/demos/pc/app/search/show-selected-types.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height: 200px">
+  <div style="height: 130px">
     <tiny-search :search-types="searchTypes">
       <template #text="data">
         <b>{{ data.slotScope.text }}</b>

examples/sites/demos/pc/app/search/webdoc/search.cn.md

@@ -4,4 +4,4 @@ title: Search 搜索
 
 # Search 搜索
 
-<div>指定条件对象进行搜索数据。</div>
+<div>指定条件进行数据搜索。</div>

examples/sites/demos/pc/app/search/webdoc/search.en.md

@@ -4,4 +4,4 @@ title: Search
 
 # Search
 
-<div>Specify a condition object to search for data.</div>
+<div>Specify criteria for data search.</div>

examples/sites/demos/pc/app/search/webdoc/search.js

@@ -5,16 +5,19 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>v-model</code>设置双向绑定搜索值，<code>placeholder</code>设置默认占位符文本。',
+        'en-US':
+          'Set bidirectional binding search values through<code>v-model</code>, and set default placeholder text through<code>placeholder</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'clearable',
       'name': { 'zh-CN': '可清除', 'en-US': 'Can be cleared' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>clearable</code> 属性设置显示清空图标按钮。</p>\n',
-        'en-US':
-          '<p>You can use the <code>clearable</code> attribute to set the display of the clear icon button. </p>\n'
+        'zh-CN': '通过<code>clearable</code>设置显示清空图标按钮。',
+        'en-US': 'Set the display clear icon button through<code>clear</code>.'
       },
       'codeFiles': ['clearable.vue']
     },
@@ -22,83 +25,87 @@ export default {
       'demoId': 'mini-mode',
       'name': { 'zh-CN': '迷你模式', 'en-US': 'Mini mode' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>mini</code> 设置组件为mini模式。</p>\n',
-        'en-US': '<p>You can use <code>mini</code> to set the component to the mini mode. </p>\n'
+        'zh-CN': '通过<code>mini</code>设置为mini模式。',
+        'en-US': 'Set to mini mode through<code>mini</code>.'
       },
       'codeFiles': ['mini-mode.vue']
     },
-    {
-      'demoId': 'transparent-mode',
-      'name': { 'zh-CN': '透明模式', 'en-US': 'Transparent mode' },
-      'desc': {
-        'zh-CN': '<p>可通过 <code>transparent</code> 设置组件为透明模式（<code>mini</code>模式下有效）。搜索类型</p>\n',
-        'en-US':
-          '<p>You can use <code>transparent</code> to set the component to the transparent mode (valid in <code>mini</code> mode). Search Type</p>\n'
-      },
-      'codeFiles': ['transparent-mode.vue']
-    },
-    {
-      'demoId': 'default-value',
-      'name': { 'zh-CN': '默认值搜索', 'en-US': 'Default Search' },
-      'desc': {
-        'zh-CN': '<p>可通过 <code>v-model</code> 配置组件默认搜索条件。</p>\n',
-        'en-US': '<p>You can use <code>v-model</code> to configure the default search criteria of the component. </p>\n'
-      },
-      'codeFiles': ['default-value.vue']
-    },
     {
       'demoId': 'search-types',
       'name': { 'zh-CN': '搜索类型', 'en-US': 'Search Type' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>search-types</code> 配置组件可选的搜索类型。</p>\n',
+        'zh-CN': '通过<code>search-types</code>设置可选的搜索类型，<code>type-value</code>设置搜索类型的默认值。',
         'en-US':
-          '<p>You can use <code>search-types</code> to configure the search types available for the component. </p>\n'
+          'Set optional search types by<code>search types</code>, and set default values for search types by<code>type value</code>.'
       },
       'codeFiles': ['search-types.vue']
     },
+    {
+      'demoId': 'transparent-mode',
+      'name': { 'zh-CN': '透明模式', 'en-US': 'Transparent mode' },
+      'desc': {
+        'zh-CN': '通过<code>transparent</code>设置为透明模式（注：<code>mini</code>模式下有效）。',
+        'en-US': 'Set to transparent mode through<code>transparent</code>(note: valid in<code>mini</code>mode).'
+      },
+      'codeFiles': ['transparent-mode.vue']
+    },
     {
       'demoId': 'custom-search-types',
       'name': {
-        'zh-CN': '自定义搜索类型的内容',
-        'en-US': 'Content of the user-defined search type'
+        'zh-CN': '自定义搜索类型下拉项',
+        'en-US': 'Custom Search Type Dropdown'
       },
       'desc': {
-        'zh-CN': '通过<code>type-value</code>属性设置搜索类型的默认值',
-        'en-US': 'Set the default value of the search type through the<code>type value</code>attribute'
+        'zh-CN': '通过<code>poplist</code>插槽自定义搜索类型弹出的内容。',
+        'en-US': 'Customize the search type pop-up content through the<code>popup</code>slot.'
       },
       'codeFiles': ['custom-search-types.vue']
     },
     {
       'demoId': 'show-selected-types',
-      'name': { 'zh-CN': '自定义搜索类型', 'en-US': 'Customized search type' },
-      'desc': { 'zh-CN': '<p>搜索类型</p>\n', 'en-US': '<p>Search Type</p>\n' },
+      'name': { 'zh-CN': '自定义默认搜索类型', 'en-US': 'Customize default search type' },
+      'desc': {
+        'zh-CN': '通过<code>text</code>插槽自定义默认搜索类型的内容。',
+        'en-US': 'Customize the content of the default search type through the<code>text</code>slot.'
+      },
       'codeFiles': ['show-selected-types.vue']
     },
     {
       'demoId': 'slot-prefix',
       'name': { 'zh-CN': '左侧插槽', 'en-US': 'Left slot' },
       'desc': {
-        'zh-CN': '<p>可通过<code>prefix</code>插入左侧插槽</p>\n',
-        'en-US': '<p>can be inserted into the left slot through <code>prefix</code></p>\n'
+        'zh-CN': '通过<code>prefix</code>插槽自定义左侧内容。',
+        'en-US': 'Customize the left content through the<code>prefix</code>slot.'
       },
       'codeFiles': ['slot-prefix.vue']
     },
     {
       'demoId': 'search-events',
-      'name': { 'zh-CN': '自定义 search 事件', 'en-US': 'Customized search event' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': 'search 事件', 'en-US': 'Search event' },
+      'desc': {
+        'zh-CN': '通过<code>is-enter-search</code>设置回车触发搜索事件，<code>search</code>监听搜索事件。',
+        'en-US':
+          'Set a carriage return to trigger a search event by<code>is enter search</code>, and listen for search events by<code>search</code>.'
+      },
       'codeFiles': ['search-events.vue']
     },
     {
       'demoId': 'change-events',
-      'name': { 'zh-CN': '自定义 change 事件', 'en-US': 'Customized change event' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': '值变化事件', 'en-US': 'Change event' },
+      'desc': {
+        'zh-CN': '通过<code>change</code>监听输入框失焦时搜索值改变事件, <code>input</code>监听搜索值实时改变事件。',
+        'en-US':
+          'By<code>change</code>listening for search value change events when the input box is out of focus,<code>input</code>listening for real-time search value change events.'
+      },
       'codeFiles': ['change-events.vue']
     },
     {
       'demoId': 'select-events',
-      'name': { 'zh-CN': '自定义 select 事件', 'en-US': 'Customized select event' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': 'select 事件', 'en-US': 'Select event' },
+      'desc': {
+        'zh-CN': '通过<code>select</code>监听搜索类型选中事件。',
+        'en-US': 'Listen for search type selection events through<code>select</code>.'
+      },
       'codeFiles': ['select-events.vue']
     }
   ],
@@ -106,57 +113,56 @@ export default {
     {
       'name': 'search',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'clearable',
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN': '设置是否显示清空图标按钮',
-            'en-US': 'Set whether to display the clear icon button'
+            'zh-CN': '是否显示清空图标按钮',
+            'en-US': 'Is the clear icon button displayed'
           },
           'demoId': 'clearable'
         },
-        {
-          'name': 'mini',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': {
-            'zh-CN': '迷你模式，配置为true时，搜索默认显示为一个带图标的圆形按钮，点击后展开，默认 false 。',
-            'en-US':
-              'Mini mode. If this parameter is set to true, a round button with an icon is displayed by default. After you click the button, the button is displayed. The default value is false.'
-          },
-          'demoId': 'mini-mode'
-        },
         {
           'name': 'is-enter-search',
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
-            'zh-CN': '是否在按下键盘Enter键的时候触发search事件',
-            'en-US':
-              'Transparent mode. If this parameter is set to true, the border becomes transparent and is displayed semi-transparently after being collapsed. Generally, this parameter is used in scenarios with a background. The default value is false.'
+            'zh-CN': '是否在按下键盘Enter键时触发search事件',
+            'en-US': 'Whether to trigger the search event when pressing the Enter key on the keyboard'
           },
           'demoId': 'search-events'
         },
+        {
+          'name': 'mini',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否为迷你模式，配置为true时，默认显示为一个带图标的圆形按钮，点击后展开',
+            'en-US':
+              'Is it mini mode? When configured to true, it will default to a circular button with an icon, which will expand after clicking'
+          },
+          'demoId': 'mini-mode'
+        },
         {
           'name': 'placeholder',
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置搜索输入框内的提示占位文本 。',
-            'en-US': 'Set the placeholder text in the search box.'
+            'zh-CN': '搜索输入框内的提示占位文本',
+            'en-US': 'Search for prompt placeholder text in the input box'
           },
           'demoId': 'basic-usage'
         },
         {
           'name': 'search-types',
-          'type': 'Array',
-          'defaultValue': '',
+          'type': 'ISearchValue[]',
+          'typeAnchorName': 'ISearchValue',
+          'defaultValue': '[]',
           'desc': {
-            'zh-CN': "搜索的类型选项，格式为[{text:'文档',value:1},...]，不配置时类型选择固定显示为All 。",
-            'en-US':
-              "Search type. The format is [{text:'Document', value:1}, ...]. If this parameter is not specified, All is displayed."
+            'zh-CN': '搜索类型的选项列表',
+            'en-US': 'List of options for search types'
           },
           'demoId': 'search-types'
         },
@@ -165,27 +171,28 @@ export default {
           'type': 'boolean',
           'defaultValue': 'false',
           'desc': {
-            'zh-CN':
-              '设置为透明模式，配置为true时，边框变为透明且收缩后半透明显示，一般用在带有背景的场景，默认 false 。',
-            'en-US': ''
+            'zh-CN': '是否为透明模式，此模式一般用在带有背景的场景',
+            'en-US': 'Is it transparent mode? This mode is generally used in scenes with a background'
           },
           'demoId': 'transparent-mode'
         },
         {
           'name': 'type-value',
-          'type': 'object',
+          'type': 'ISearchValue',
+          'typeAnchorName': 'ISearchValue',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置搜索类型的默认值。默认搜索类型的第一项【3.11.0新增】',
-            'en-US': 'Set default values for search types. First item of default search type [3.11.0 New]'
+            'zh-CN': '搜索类型的默认值。默认为搜索类型的第一项【3.11.0新增】',
+            'en-US':
+              'The default value for the search type. Default to the first item of the search type [added on 3.11.0]'
           },
-          'demoId': 'custom-search-types'
+          'demoId': 'search-types'
         },
         {
           'name': 'v-model',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '绑定搜索值。', 'en-US': 'Bind search values.' },
+          'desc': { 'zh-CN': '绑定搜索值', 'en-US': 'Bind search values' },
           'demoId': 'basic-usage'
         }
       ],
@@ -195,9 +202,9 @@ export default {
           'type': 'Function(arg1,arg2)',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '在 input 框中输入完成时触发的回调函数;arg1:{object 搜索类型}，arg2:{string 当前input框中值}',
+            'zh-CN': '输入完成时触发的回调函数;arg1:{object 搜索类型}，arg2:{string 当前input框中值}',
             'en-US':
-              'Callback function triggered when input is complete in the input box; arg1:{object search type}, arg2:{string value in the current input box}'
+              'The callback function triggered upon input completion; Arg1: {object search type}, arg2: {string current input box value}'
           },
           'demoId': 'change-events'
         },
@@ -206,21 +213,20 @@ export default {
           'type': 'Function(arg1,arg2)',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '在search组件输入实时触发的回调函数;arg1:{string 当前input框中值}，arg2:{object 搜索类型}【3.9.1新增】',
+            'zh-CN': '输入实时触发的回调函数;arg1:{string 当前input框中值}，arg2:{object 搜索类型}【3.9.1新增】',
             'en-US':
-              'Enter the callback function triggered in real time in the search component. arg1:{string value in the current input box}, arg2:{object search type} [added in 3.9.1]'
+              'Input a real-time triggered callback function; Arg1: {string current input box value}, arg2: {object search type} [added in 3.9.1]'
           },
-          'demoId': ''
+          'demoId': 'change-events'
         },
         {
           'name': 'search',
           'type': 'Function(arg1,arg2)',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '在展开状态点击搜索按钮时触发的回调函数;arg1:{object 搜索类型}，arg2:{string 当前input框中值}',
+            'zh-CN': '展开模式下，点击搜索按钮时触发的回调函数;arg1:{object 搜索类型}，arg2:{string 当前input框中值}',
             'en-US':
-              'Callback function triggered when the search button is clicked in the expanded state; arg1:{object search type}, arg2:{string value in the current input box}'
+              'The callback function triggered when clicking the search button in expansion mode; Arg1: {object search type}, arg2: {string current input box value}'
           },
           'demoId': 'search-events'
         },
@@ -229,9 +235,8 @@ export default {
           'type': 'Function(arg1)',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '在search组件切换类型时触发的回调函数;arg1:{object 搜索类型}',
-            'en-US':
-              'Callback function triggered when the type of the search component is switched; arg1:{object search type}'
+            'zh-CN': '切换类型时触发的回调函数;arg1:{object 搜索类型}',
+            'en-US': 'The callback function triggered when switching types; Arg1: {object search type}'
           },
           'demoId': 'select-events'
         }
@@ -260,5 +265,16 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'ISearchValue',
+      type: 'interface',
+      code: `
+interface ISearchValue {
+  text: string
+  value: number
+}`
+    }
   ]
 }

examples/sites/src/views/components/async-highlight.vue

@@ -7,6 +7,8 @@
 <script>
 import { defineComponent, ref } from 'vue'
 import hljs from 'highlight.js/lib/core'
+import 'highlight.js/styles/github.css'
+import tsPath from 'highlight.js/lib/languages/typescript'
 
 export default defineComponent({
   name: 'AsyncHighlight',
@@ -14,14 +16,29 @@ export default defineComponent({
     code: {
       type: String,
       default: ''
+    },
+    types: {
+      type: String
     }
   },
   setup(props) {
     const highlightFinish = ref(false)
     const highlightCode = ref('')
+
+    const getFormatCodes = (types) => {
+      hljs.registerLanguage('ts', tsPath)
+      const textHtml = hljs.highlight(props.code, { language: types }).value
+
+      return textHtml
+    }
+
     // highlight和其他同步任务叠加容易形成长任务，改成异步消除长任务。
     setTimeout(() => {
-      highlightCode.value = hljs.highlightAuto(props.code).value
+      if (props.types && props.types === 'ts') {
+        highlightCode.value = getFormatCodes(props.types)
+      } else {
+        highlightCode.value = hljs.highlightAuto(props.code).value
+      }
       highlightFinish.value = true
     }, 0)
     return {

examples/sites/src/views/components/components.vue

@@ -67,9 +67,17 @@
                           <a v-if="row.demoId" @click="jumpToDemo(row.demoId)">{{ row.name }}</a>
                           <span v-else>{{ row.name }}</span>
                         </td>
-                        <td v-if="!key.includes('slots')"><span v-html="row.type"></span></td>
+                        <td v-if="!key.includes('slots')">
+                          <a
+                            v-if="row.typeAnchorName"
+                            :href="`#${row.typeAnchorName}`"
+                            v-html="row.type"
+                            @click="handleTypeClick"
+                          ></a>
+                          <span v-else v-html="row.type"></span>
+                        </td>
                         <td v-if="!key.includes('slots') && !key.includes('events')">
-                          <span v-html="row.defaultValue"></span>
+                          <span v-html="row.defaultValue || '--'"></span>
                         </td>
                         <td><span v-html="row.desc[langKey]"></span></td>
                       </tr>
@@ -80,6 +88,16 @@
             </div>
           </div>
         </template>
+        <template v-if="currJson.types && currJson.types.length">
+          <div class="ti-f18 ti-py28" id="types">types</div>
+          <tiny-collapse v-model="activeNames">
+            <div v-for="typeItem in currJson.types" :id="typeItem.name" :key="typeItem.name">
+              <tiny-collapse-item :title="typeItem.name" :name="typeItem.name">
+                <async-highlight :code="typeItem.code.trim()" types="ts"></async-highlight
+              ></tiny-collapse-item>
+            </div>
+          </tiny-collapse>
+        </template>
         <h2 id="FAQ" v-if="cmpFAQMd" class="ti-f30 ti-fw-normal ti-mt28 ti-mb20">FAQ</h2>
         <div class="markdown-body" v-html="cmpFAQMd"></div>
         <div v-if="currJson.owner" class="ti-abs ti-right24 ti-top24" @click="copyText(currJson.owner)">
@@ -111,11 +129,20 @@ import { $t, $t2, $clone, $split, fetchDemosFile, useApiMode, useTemplateMode }
 import demo from '@/views/components/demo'
 import { router } from '@/router.js'
 import { getAllComponents } from '@/menus.jsx'
+import { Collapse, CollapseItem } from '@opentiny/vue'
 import { faqMdConfig, staticDemoPath, getWebdocPath } from './cmpConfig'
+import AsyncHighlight from './async-highlight.vue'
 
 export default defineComponent({
   name: 'CmpPageVue',
-  components: { Demo: demo, TinyAnchor: Anchor, TinyButtonGroup: ButtonGroup },
+  components: {
+    Demo: demo,
+    TinyAnchor: Anchor,
+    TinyButtonGroup: ButtonGroup,
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    AsyncHighlight
+  },
   directives: {
     loading: Loading.directive
   },
@@ -149,7 +176,8 @@ export default defineComponent({
         return links
       }),
       // 单demo显示时
-      singleDemo: null
+      singleDemo: null,
+      activeNames: ''
     })
 
     const { apiModeState } = useApiMode()
@@ -197,6 +225,20 @@ export default defineComponent({
       }
     }
 
+    // 改变折叠筐的展开状态， 2参为TRUE则表示是通过点击type属性跳转的锚点。不用进行判断直接赋值
+    const changeActiveNames = (hash, isType = false) => {
+      const newVal = hash.replace('#', '')
+      if (isType) {
+        state.activeNames = newVal
+        return
+      }
+
+      const isTypeHashChange = state.currJson.types.some((item) => item.name === newVal)
+      if (isTypeHashChange) {
+        state.activeNames = newVal
+      }
+    }
+
     // saas下切换mode和组价示例都会触发loadPage,需要防抖
     const loadPage = debounce(templateModeState.isSaas ? 100 : 0, false, () => {
       const lang = $t2('cn', 'en')
@@ -249,6 +291,10 @@ export default defineComponent({
           if (!state.singleDemo) {
             state.singleDemo = state.currJson.demos[0]
           }
+
+          if (state.currJson.types && state.currJson.types.length) {
+            changeActiveNames(hash)
+          }
         } else {
           state.singleDemo = state.currJson.demos[0]
         }
@@ -279,6 +325,9 @@ export default defineComponent({
           scrollByHash(hash)
         }
       },
+      handleTypeClick: (ev) => {
+        changeActiveNames(ev.target.hash, true)
+      },
       handleAnchorClick: (e, data) => {
         if (apiModeState.demoMode === 'single' && data.link.startsWith('#')) {
           e.preventDefault()