@opentiny/vue-docs 3.25.0 → 3.26.0

package/demos/pc/app/pager/align-composition-api.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="content">
-    <tiny-pager align="left" :total="100"></tiny-pager>
-    <tiny-pager align="center" :total="100"></tiny-pager>
-    <tiny-pager align="right" :total="100"></tiny-pager>
+    <TinyRadioGroup v-model="state.align" type="button" :options="state.options"></TinyRadioGroup>
+    <TinyPager :align="state.align" :total="100"></TinyPager>
   </div>
 </template>
 
 <script setup>
-import { TinyPager } from '@opentiny/vue'
-</script>
+import { reactive } from 'vue'
+
+import { TinyPager, TinyRadioGroup } from '@opentiny/vue'
 
-<style scoped>
-.content {
-  margin-bottom: 20px;
-}
-.tiny-radio-group {
-  margin-bottom: 10px;
-}
-</style>
+const state = reactive({
+  align: 'left',
+  options: ['left', 'center', 'right'].map((item) => ({ label: item, text: item }))
+})
+</script>

package/demos/pc/app/pager/align.spec.ts

@@ -7,7 +7,12 @@ test('对齐方式', async ({ page }) => {
   const demo = page.locator('#align')
   const pager = demo.locator('.tiny-pager')
 
-  await expect(pager.first()).toHaveCSS('text-align', 'left')
-  await expect(pager.nth(1)).toHaveCSS('text-align', 'center')
-  await expect(pager.nth(2)).toHaveCSS('text-align', 'right')
+  await expect(pager).toHaveCSS('text-align', 'left')
+
+  await page.click('text=center')
+  await expect(pager).toHaveCSS('text-align', 'center')
+  await page.click('text=right')
+  await expect(pager).toHaveCSS('text-align', 'right')
+  await page.click('text=left')
+  await expect(pager).toHaveCSS('text-align', 'left')
 })

package/demos/pc/app/pager/align.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="content">
-    <tiny-pager align="left" :total="100"></tiny-pager>
-    <tiny-pager align="center" :total="100"></tiny-pager>
-    <tiny-pager align="right" :total="100"></tiny-pager>
+    <TinyRadioGroup v-model="align" type="button" :options="options"></TinyRadioGroup>
+    <tiny-pager :align="align" :total="100"></tiny-pager>
   </div>
 </template>
 
 <script>
-import { TinyPager } from '@opentiny/vue'
+import { TinyPager, TinyRadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyPager
+    TinyPager,
+    TinyRadioGroup
+  },
+  data() {
+    return {
+      align: 'left',
+      options: ['left', 'center', 'right'].map((item) => ({ label: item, text: item }))
+    }
   }
 }
 </script>

package/demos/pc/app/pager/page-size-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
-  <tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager>
+  <tiny-pager mode="number" :page-size="20" :page-sizes="[10, 20, 50, 100]" :total="100"> </tiny-pager>
 </template>
 
 <script setup>
-import { TinyPager, TinyModal } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 </script>

package/demos/pc/app/pager/page-size.spec.ts

@@ -7,7 +7,7 @@ test('每页显示数量', async ({ page }) => {
   const preview = page.locator('#page-size')
   const pager = preview.locator('.tiny-pager')
   const total = 100
-  const initPageSize = 5
+  const initPageSize = 20
   const getPageCount = (pageSize: number) => String(Math.ceil(total / pageSize))
   const sizeChange = pager.locator('.tiny-pager__page-size')
   const sizeSelect = page.locator('.tiny-pager__selector')

package/demos/pc/app/pager/page-size.vue

@@ -1,9 +1,9 @@
 <template>
-  <tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager>
+  <tiny-pager mode="number" :page-size="20" :page-sizes="[10, 20, 50, 100]" :total="100"> </tiny-pager>
 </template>
 
 <script>
-import { TinyPager, TinyModal } from '@opentiny/vue'
+import { TinyPager } from '@opentiny/vue'
 
 export default {
   components: {

package/demos/pc/app/pager/pager-in-grid-composition-api.vue

@@ -27,7 +27,6 @@
       :current-page="custPager.currentPage"
       :page-size="custPager.pageSize"
       :total="custPager.total"
-      :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
       layout="total, sizes, prev, pager, next, jumper"

package/demos/pc/app/pager/pager-in-grid.vue

@@ -27,7 +27,6 @@
       :current-page="custPager.currentPage"
       :page-size="custPager.pageSize"
       :total="custPager.total"
-      :page-sizes="[5, 10, 20, 50]"
       @current-change="currentChange"
       @size-change="sizeChange"
       layout="total, sizes, prev, pager, next, jumper"

package/demos/pc/app/pager/popper-append-to-body-composition-api.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    :popper-append-to-body="false"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script setup>

package/demos/pc/app/pager/popper-append-to-body.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    :popper-append-to-body="false"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager :popper-append-to-body="false" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script>

package/demos/pc/app/pager/popper-class-composition-api.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    popper-class="custom-pager"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script setup>

package/demos/pc/app/pager/popper-class.vue

@@ -1,11 +1,5 @@
 <template>
-  <tiny-pager
-    popper-class="custom-pager"
-    layout="sizes,prev, pager, next"
-    :page-size="5"
-    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
-    :total="50"
-  ></tiny-pager>
+  <tiny-pager popper-class="custom-pager" layout="sizes,prev, pager, next" :total="50"></tiny-pager>
 </template>
 
 <script>

package/demos/pc/app/popeditor/suggest.spec.ts

@@ -10,5 +10,5 @@ test('PopEditor 联想查询', async ({ page }) => {
 
   await textBox.fill('科技')
   await page.waitForTimeout(500)
-  await expect(grid).toBeVisible()
+  await expect(grid.filter({ hasText: /GFD 科技 YX 公司/ })).toBeVisible()
 })

package/demos/pc/app/qr-code/icon-composition-api.vue

@@ -1,16 +1,30 @@
 <template>
+  <div class="qr-code-attr">
+    iconSize:
+    <tiny-numeric v-model="params.iconSize" :min="1" :max="params.size * 0.3" />
+    size: <tiny-numeric v-model="params.size" :min="1" :max="1e4" />
+  </div>
   <tiny-qr-code v-bind="params"></tiny-qr-code>
 </template>
 
 <script setup>
-import { TinyQrCode } from '@opentiny/vue'
+import { reactive } from 'vue'
+import { TinyNumeric, TinyQrCode } from '@opentiny/vue'
 
-const params = {
+const params = reactive({
   value: '测试二维码数据',
   icon: import.meta.env.VITE_APP_BUILD_BASE_URL
     ? `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
     : 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/assets/tinyvue.svg',
   iconSize: 60,
   size: 250
-}
+})
 </script>
+
+<style scoped>
+.qr-code-attr {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+</style>

package/demos/pc/app/qr-code/icon.spec.ts

@@ -8,4 +8,23 @@ test('自定义 icon', async ({ page }) => {
   const canvasImg = page.locator('.tiny-qr-code .mask-icon img')
   await expect(canvas).toBeVisible()
   await expect(canvasImg).toBeVisible()
+
+  await page.getByLabel('示例', { exact: true }).getByRole('button').nth(1).click()
+  const iconSize = await canvasImg.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+  const inputIconSizeWidth = await page.getByRole('spinbutton').first().inputValue()
+
+  expect(iconSize.width === `${inputIconSizeWidth}px`).toBe(true)
+  expect(iconSize.height === `${inputIconSizeWidth}px`).toBe(true)
+  await page.getByLabel('示例', { exact: true }).getByRole('button').nth(3).click()
+  const [qrWidth, qrHeight] = await page.locator('.tiny-qr-code').evaluate((el) => {
+    const style = window.getComputedStyle(el)
+    return [style.width, style.height]
+  })
+
+  const inputSizeWidth = await page.getByRole('spinbutton').nth(1).inputValue()
+
+  expect(qrWidth === `${inputSizeWidth}px`).toBe(true)
+  expect(qrHeight === `${inputSizeWidth}px`).toBe(true)
 })

package/demos/pc/app/qr-code/icon.vue

@@ -1,25 +1,46 @@
 <template>
+  <div class="qr-code-attr">
+    iconSize:
+    <tiny-numeric v-model="iconSize" :min="1" :max="size * 0.3" />
+    size: <tiny-numeric v-model="size" :min="1" :max="1e4" />
+  </div>
+
   <tiny-qr-code v-bind="params"></tiny-qr-code>
 </template>
 
 <script>
-import { TinyQrCode } from '@opentiny/vue'
+import { TinyNumeric, TinyQrCode } from '@opentiny/vue'
 
 export default {
   components: {
+    TinyNumeric,
     TinyQrCode
   },
   data() {
     return {
-      params: {
+      size: 250,
+      iconSize: 60
+    }
+  },
+  computed: {
+    params() {
+      return {
         value: '测试二维码数据',
         icon: import.meta.env.VITE_APP_BUILD_BASE_URL
           ? `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/mountain.png`
           : 'https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/assets/tinyvue.svg',
-        iconSize: 60,
-        size: 250
+        iconSize: this.iconSize,
+        size: this.size
       }
     }
   }
 }
 </script>
+
+<style scoped>
+.qr-code-attr {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+</style>

package/demos/pc/app/qr-code/style-composition-api.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="qr-code-container">
-    <div>
-      <tiny-button @click="changeColor">改变颜色</tiny-button>
-    </div>
-    <br />
+    <tiny-color-picker v-model="params.color" />
     <tiny-qr-code v-bind="params"></tiny-qr-code>
   </div>
 </template>
 
 <script setup>
-import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { TinyQrCode, TinyColorPicker } from '@opentiny/vue'
 import { ref } from 'vue'
 
 const params = ref({
@@ -18,8 +15,4 @@ const params = ref({
   size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
 })
-
-const changeColor = () => {
-  params.value.color = '#666'
-}
 </script>

package/demos/pc/app/qr-code/style.spec.ts

@@ -4,6 +4,23 @@ test('自定义样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('qr-code#style')
 
-  const canvas = page.locator('.tiny-qr-code canvas')
+  const demo = page.locator('#style')
+  const wrapper = demo.locator('.tiny-qr-code')
+  const canvas = demo.locator('.tiny-qr-code canvas')
   await expect(canvas).toBeVisible()
+
+  const backgroundColor0 = await canvas.evaluate(
+    (el: any, { x, y }) => {
+      const ctx = el.getContext('2d')
+      const pixel = ctx.getImageData(x, y, 1, 1).data
+      const toHex = (num: number) => num.toString(16).padStart(2, '0')
+      return `#${toHex(pixel[0])}${toHex(pixel[1])}${toHex(pixel[2])}`
+    },
+    { x: 1, y: 1 }
+  )
+
+  expect(backgroundColor0 === '#1677ff').toBeTruthy()
+
+  const box = await wrapper.boundingBox()
+  expect(box?.width).toEqual(250)
 })

package/demos/pc/app/qr-code/style.vue

@@ -1,26 +1,29 @@
 <template>
   <div class="qr-code-container">
-    <div>
-      <tiny-button @click="changeColor">改变颜色</tiny-button>
-    </div>
-    <br />
+    <div>改变颜色<tiny-color-picker v-model="color" /></div>
+
     <tiny-qr-code v-bind="params"></tiny-qr-code>
   </div>
 </template>
 
 <script>
-import { TinyQrCode, TinyButton } from '@opentiny/vue'
+import { TinyQrCode, TinyColorPicker } from '@opentiny/vue'
 
 export default {
   components: {
     TinyQrCode,
-    TinyButton
+    TinyColorPicker
   },
   data() {
     return {
-      params: {
+      color: '#1677ff'
+    }
+  },
+  computed: {
+    params() {
+      return {
         value: '测试二维码数据',
-        color: '#1677ff',
+        color: this.color,
         size: 250,
         style: { background: '#f5f5f5', padding: '24px' }
       }

package/demos/pc/app/query-builder/webdoc/query-builder.js

@@ -9,8 +9,10 @@ export default {
         'en-US': 'Basic Usage'
       },
       desc: {
-        'zh-CN':
-          "\n          <div class=\"tip custom-block\">\n           <p class=\"custom-block-title\"> config 属性说明 </p>\n       <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  <br>\n       <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  <br>\n       <code>disabled</code>：禁用所有规则  <br>\n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  <br>\n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  <br>\n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  <br>\n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  <br>\n       <code>showNotToggle</code>：展示 not 条件切换框  <br>\n       <code>displayOnlyField</code>：是否仅展示字段选择器  <br>\n       </div>  <br>\n       二、fields 数据配置  <br>\n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  <br>\n       {  <br>\n         name: 'isMusician', //name：格式化数据中的值（形参）  <br>\n         label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  <br>\n         valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  <br>\n         operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  <br>\n           {  <br>\n             name: '=',  <br>\n             label: '='  <br>\n           }  <br>\n         ],  <br>\n         bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  <br>\n           input:{  <br>\n             clearable:true  <br>\n           },  <br>\n           select:{  <br>\n             filterable:true  <br>\n           }  <br>\n         },  <br>\n         defaultValue: false, //defaultOperator：运算符的默认缺省选择  <br>\n         validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  <br>\n         inputType: 'number', //值域的数值类型  <br>\n         valueEditorType: 'radio' //值域编辑器的类型  <br>\n         defaultValue: false, //值域的默认值  <br>\n         values: [ //值域的可选域配置（下拉）  <br>\n           {  <br>\n              label: 'Percussion instruments',  <br>\n              options: [  <br>\n               {  <br>\n                    name: 'Clapstick',  <br>\n                    label: 'Clapstick'  <br>\n               }  <br>\n             ]  <br>\n           }  <br>\n         ],  <br>\n         values: [ //值域的可选域配置（单选）  <br>\n           {  <br>\n              name: 'M',  <br>\n              label: 'Male'  <br>\n           },  <br>\n           {  <br>\n              name: 'F',  <br>\n              label: 'Female'  <br>\n           },  <br>\n           {  <br>\n              name: 'O',  <br>\n              label: 'Other'  <br>\n           }  <br>\n         ],  <br>\n         valueSources: ['field', 'value'], //值域类型可选择  <br>\n         comparator: 'groupNumber', //分组时的比较器  <br>\n         groupNumber: 'group1', //分组的组别  <br>\n       },  <br>\n       // 组合子数组配置，label 为展示字符，name 为数据值  <br>\n       combinators: [  <br>\n         {  <br>\n           name: 'and',  <br>\n           label: '且'  <br>\n         },  <br>\n         {  <br>\n           name: 'or',  <br>\n           label: '或'  <br>\n         }  <br>\n       ]  <br>\n       </code></pre>  <br>\n       ",
+        'zh-CN': `
+        <div class="tip custom-block"> 
+          <p class=\"custom-block-title\"> config 属性说明 </p>
+          <code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为-----  \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为-----  \n       <code>disabled</code>：禁用所有规则  \n       <code>parsenumbers</code>：数字会被转化为 Number 类型，而非 String 类型  \n       <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制  \n       <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现  \n       <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定  \n       <code>showNotToggle</code>：展示 not 条件切换框  \n       <code>displayOnlyField</code>：是否仅展示字段选择器  \n       </div>  \n       二、fields 数据配置  \n      <pre> <code>\n       fields 中的数据（只用于说明各字段含义，无业务特定性）  \n       {  \n name: 'isMusician', //name：格式化数据中的值（形参）  \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称  \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值  \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称  \n   {  \n     name: '=',  \n     label: '='  \n   }  \n ],  \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制  \n   input:{  \n     clearable:true  \n   },  \n   select:{  \n     filterable:true  \n   }  \n },  \n defaultValue: false, //defaultOperator：运算符的默认缺省选择  \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……）  \n inputType: 'number', //值域的数值类型  \n valueEditorType: 'radio' //值域编辑器的类型  \n defaultValue: false, //值域的默认值  \n values: [ //值域的可选域配置（下拉）  \n   {  \n      label: 'Percussion instruments',  \n      options: [  \n       {  \n            name: 'Clapstick',  \n            label: 'Clapstick'  \n       }  \n     ]  \n   }  \n ],  \n values: [ //值域的可选域配置（单选）  \n   {  \n      name: 'M',  \n      label: 'Male'  \n   },  \n   {  \n      name: 'F',  \n      label: 'Female'  \n   },  \n   {  \n      name: 'O',  \n      label: 'Other'  \n   }  \n ],  \n valueSources: ['field', 'value'], //值域类型可选择  \n comparator: 'groupNumber', //分组时的比较器  \n groupNumber: 'group1', //分组的组别  \n       },  \n       // 组合子数组配置，label 为展示字符，name 为数据值  \n       combinators: [  \n {  \n   name: 'and',  \n   label: '且'  \n },  \n {  \n   name: 'or',  \n   label: '或'  \n }  \n       ]  \n       </code></pre>  <br>`,
         'en-US': ''
       },
       codeFiles: ['basic-usage.vue']
@@ -60,7 +62,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          'config 配置添加 bindProps 属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： <br>\n        <div class="tip custom-block">\n        <p class="custom-block-title">  bindProps 属性说明 </p>\n        leftSelect：左侧 Select 参数，统一控制左侧所有 Select <br>\n        select：右侧 Select 参数 <br>\n        input：输入框参数，包括 textarea <br>\n        numeric：计数器 <br>\n        date：日期选择器 <br>\n        time：时间选择器 <br>\n        radio：单选框 <br>\n        checkbox：多选框 <br>\n        </div> <br>\n        ',
+          'config 配置添加 bindProps 属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： \n<div class="tip custom-block">\n<p class="custom-block-title">  bindProps 属性说明 </p>\nleftSelect：左侧 Select 参数，统一控制左侧所有 Select \nselect：右侧 Select 参数 \ninput：输入框参数，包括 textarea \nnumeric：计数器 \ndate：日期选择器 \ntime：时间选择器 \nradio：单选框 \ncheckbox：多选框 \n</div> \n',
         'en-US': ' '
       },
       codeFiles: ['sub-component-param.vue']

package/demos/pc/app/search/events.spec.ts

@@ -9,7 +9,7 @@ test('事件是否正常触发', async ({ page }) => {
   const button = page.locator('.tiny-search__input-btn > a').first()
 
   await button.click()
-  await expect(modal).toHaveCount(1)
+  await expect(modal).toHaveCount(2)
   await input.first().fill('111')
   await button.click()
   await modal.getByText('111').isVisible()

package/demos/pc/app/search/events.vue

@@ -15,6 +15,9 @@
     <p>类型选中事件</p>
     <br />
     <tiny-search :search-types="searchTypes" @select="select"></tiny-search>
+    <p>mini模式展开和收起事件</p>
+    <br />
+    <tiny-search mini @collapse="handleCollapse" @expand="handleExpand"></tiny-search>
   </div>
 </template>
 
@@ -58,6 +61,12 @@ export default {
     },
     select(value) {
       TinyModal.message({ message: `${value.text}`, status: 'info' })
+    },
+    handleCollapse() {
+      TinyModal.message({ message: '收回', status: 'info' })
+    },
+    handleExpand() {
+      TinyModal.message({ message: '展开', status: 'info' })
     }
   }
 }

package/demos/pc/app/search/slot-prefix-suffix.spec.ts

@@ -21,7 +21,7 @@ test('disabled', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('search#slot-prefix-suffix')
 
-  await page.locator('.tiny-button').last().click()
+  await page.getByRole('button', { name: '点击切换为“禁用状态”' }).click()
 
   const searchLocators = await page.locator('.tiny-search').all()
   for (const search of searchLocators) {

package/demos/pc/app/search/webdoc/search.js

@@ -112,10 +112,18 @@ export default {
         'en-US': 'Search event'
       },
       desc: {
-        'zh-CN':
-          '<div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />\n              通过 <code>change</code> 监听输入框失焦时搜索值改变事件，<code>input</code> 监听搜索值实时改变事件；<br />\n              通过 <code>select</code> 监听搜索类型选中事件。</div>',
-        'en-US':
-          '<div class="tip custom-block">Set a carriage return to trigger a search event by <code>is enter search</code> , and listen for search events by <code>search</code> <br />\n              By <code>change</code> listening for search value change events when the input box is out of focus, and <code>input</code> listening for real-time search value change events<br />\n              Listen for search type selection events through <code>select</code> .</div>'
+        'zh-CN': `
+        <div class="tip custom-block">通过 <code>is-enter-search</code> 设置回车触发搜索事件， <code>search</code> 监听搜索事件；<br />\n              
+        通过 <code>change</code> 监听输入框失焦时搜索值改变事件，<code>input</code> 监听搜索值实时改变事件；<br />\n              
+        通过 <code>select</code> 监听搜索类型选中事件；<br />\n                
+        通过 <code>expand</code> 监听 mini 搜索框展开事件；<br />\n                
+        通过 <code>collapse</code> 监听 mini 搜索框收起事件。</div>`,
+        'en-US': `<div class="tip custom-block">
+        Set carriage return to trigger search event through<code>is-enter-search</code>, and<code>search</code>to listen for search events; <br />\n              
+        Monitor the search value change event when the input box loses focus through<code>change</code>, and monitor the real-time search value change event through<code>input</code>; <br />\n              
+        Monitor the search type selection event through<code>select</code>; <br />\n                
+        Monitor mini search box expansion events through<code>expand</code>; <br />\n                
+        Monitor the mini search box collapse event through<code>collapse</code>.</div>`
       },
       codeFiles: ['events.vue']
     }

package/demos/pc/app/tabs/basic-usage.spec.ts

@@ -20,11 +20,11 @@ test('基本用法', async ({ page }) => {
     /tiny-tabs__item is-top/
   ])
   await expect(content).toHaveText(/表单组件/)
-  await expect(activeBar).toHaveCSS('width', '64px')
+  await expect(activeBar).toHaveCSS('width', '56px')
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await item1.click()
   await expect(item1).toHaveClass(/is-active/)
-  await expect(activeBar).toHaveCSS('width', '64px')
+  await expect(activeBar).toHaveCSS('width', '56px')
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await expect(item1).toHaveCSS('color', 'rgb(25, 25, 25)')
   await expect(content).toHaveText(/表单组件/)

package/demos/pc/app/tabs/header-only.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="tab-demo-position">
+    <tiny-radio-group v-model="position" class="mb10">
+      <tiny-radio-button label="top">top 显示</tiny-radio-button>
+      <tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
+      <tiny-radio-button label="left">left 显示</tiny-radio-button>
+      <tiny-radio-button label="right">right 显示</tiny-radio-button>
+    </tiny-radio-group>
+    <tiny-tabs v-model="activeName4" tab-style="card" :position="position" header-only>
+      <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
+        {{ item.content }}
+      </tiny-tab-item>
+    </tiny-tabs>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { TinyTabs, TinyTabItem, TinyRadioGroup, TinyRadioButton } from '@opentiny/vue'
+
+const activeName4 = ref('navigation1')
+const position = ref('left')
+const tabs3 = ref([
+  {
+    name: 'navigation1',
+    title: 'Navigation 1',
+    content: 'Navigation 1'
+  },
+  {
+    name: 'navigation2',
+    title: 'Navigation 2',
+    content: 'Navigation 2'
+  },
+  {
+    name: 'navigation3',
+    title: 'Navigation 3',
+    content: 'Navigation 3'
+  },
+  {
+    name: 'navigation4',
+    title: 'Navigation 4',
+    content: 'Navigation 4'
+  },
+  {
+    name: 'navigation5',
+    title: 'Navigation 5',
+    content: 'Navigation 5'
+  }
+])
+</script>
+
+<style scoped>
+.tab-demo-position {
+  min-height: 250px;
+}
+</style>

package/demos/pc/app/tabs/size.spec.ts

@@ -8,9 +8,9 @@ test('小尺寸', async ({ page }) => {
   const headerBox = container.locator('.tiny-tabs .tiny-tabs__nav-scroll')
 
   await expect(headerBox.nth(0)).toHaveCSS('height', '40px')
-  await expect(headerBox.nth(0)).toHaveCSS('font-size', '12px')
+  await expect(headerBox.nth(0).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
   await expect(headerBox.nth(1)).toHaveCSS('height', '24px')
-  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '16px')
+  await expect(headerBox.nth(1).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
   await expect(headerBox.nth(2)).toHaveCSS('height', '24px')
   await expect(headerBox.nth(2).locator('.tiny-tabs__item').first()).toHaveCSS('font-size', '12px')
 })

package/demos/pc/app/tabs/webdoc/tabs.js

@@ -282,6 +282,18 @@ export default {
           'Use <code>overflow-title</code> to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set <code>title-width</code> to the excess length of the title.'
       },
       codeFiles: ['overflow-title.vue']
+    },
+    {
+      demoId: 'header-only',
+      name: {
+        'zh-CN': '仅展示头部',
+        'en-US': 'Header only'
+      },
+      desc: {
+        'zh-CN': '通过 <code>header-only</code> 仅展示头部。',
+        'en-US': 'Use <code>>header-only</code> header only.'
+      },
+      codeFiles: ['header-only.vue']
     }
   ],
   features: [