@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/tabs/custom-tab-title.vue

@@ -16,10 +16,10 @@
           <span>数据组件</span>
         </div>
       </template>
-      <div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等</div>
+      <div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。</div>
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/lazy-composition-api.vue

@@ -4,10 +4,12 @@
       表单组件,具有与用户交互，并可完成数据采集功能的控件。
     </tiny-tab-item>
     <tiny-tab-item title="数据组件" lazy name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
+    </tiny-tab-item>
+    <tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" lazy name="fourth">
+      业务组件,与业务紧密相关实现某种业务功能的组件集。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" lazy name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/lazy.vue

@@ -4,10 +4,12 @@
       表单组件,具有与用户交互，并可完成数据采集功能的控件。
     </tiny-tab-item>
     <tiny-tab-item title="数据组件" lazy name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
+    </tiny-tab-item>
+    <tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" lazy name="fourth">
+      业务组件,与业务紧密相关实现某种业务功能的组件集。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" lazy name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/position-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="tab-demo-position">
-    <div class="mb10">
-      <tiny-radio v-model="position" label="top">top显示</tiny-radio>
-      <tiny-radio v-model="position" label="bottom">bottom显示</tiny-radio>
-      <tiny-radio v-model="position" label="left">left显示</tiny-radio>
-      <tiny-radio v-model="position" label="right">right显示</tiny-radio>
-    </div>
+    <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">
       <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
         {{ item.content }}
@@ -16,35 +16,40 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Tabs as TinyTabs, TabItem as TinyTabItem, Radio as TinyRadio } from '@opentiny/vue'
+import {
+  Tabs as TinyTabs,
+  TabItem as TinyTabItem,
+  RadioGroup as TinyRadioGroup,
+  RadioButton as TinyRadioButton
+} from '@opentiny/vue'
 
 const activeName4 = ref('navigation1')
 const position = ref('left')
 const tabs3 = ref([
   {
     name: 'navigation1',
-    title: 'Navigation1',
-    content: 'Navigation1'
+    title: 'Navigation 1',
+    content: 'Navigation 1'
   },
   {
     name: 'navigation2',
-    title: 'Navigation2',
-    content: 'Navigation2'
+    title: 'Navigation 2',
+    content: 'Navigation 2'
   },
   {
     name: 'navigation3',
-    title: 'Navigation3',
-    content: 'Navigation3'
+    title: 'Navigation 3',
+    content: 'Navigation 3'
   },
   {
     name: 'navigation4',
-    title: 'Navigation4',
-    content: 'Navigation4'
+    title: 'Navigation 4',
+    content: 'Navigation 4'
   },
   {
     name: 'navigation5',
-    title: 'Navigation5',
-    content: 'Navigation5'
+    title: 'Navigation 5',
+    content: 'Navigation 5'
   }
 ])
 </script>

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

@@ -11,7 +11,7 @@ test('位置：四种显示', async ({ page }) => {
 
   // left 显示
   const header = tabs.locator('.tiny-tabs__header')
-  const item2 = tabs.getByRole('tab').nth(1)
+  const item2 = tabs.getByRole('tab', { name: 'Navigation 2' })
   const content = tabs.getByRole('tabpanel')
   const { width, height } = await header.boundingBox()
 
@@ -27,21 +27,21 @@ test('位置：四种显示', async ({ page }) => {
   await expect(content).toHaveText(/2/)
 
   // top显示
-  await page.getByRole('radio', { name: 'top显示' }).click()
+  await page.getByRole('radio', { name: 'top 显示' }).filter({ hasText: 'top 显示' }).click()
   await expect(tabs).toHaveClass(/tiny-tabs--top/)
   await expect(tabsList).toHaveCount(2)
   await expect(top).toHaveClass(/tiny-tabs__header/)
   await expect(bottom).toHaveClass('tiny-tabs__content')
 
   // bottom显示
-  await page.getByRole('radio', { name: 'bottom显示' }).click()
+  await page.getByRole('radio', { name: 'bottom 显示' }).filter({ hasText: 'bottom 显示' }).click()
   await expect(tabs).toHaveClass(/tiny-tabs--bottom/)
   await expect(tabsList).toHaveCount(2)
   await expect(top).toHaveClass('tiny-tabs__content')
   await expect(bottom).toHaveClass(/tiny-tabs__header/)
 
   // right显示
-  await page.getByRole('radio', { name: 'right显示' }).click()
+  await page.getByRole('radio', { name: 'right 显示' }).filter({ hasText: 'right 显示' }).click()
   await expect(tabs).toHaveClass(/tiny-tabs--right/)
   await expect(tabsList).toHaveCount(2)
   await expect(top).toHaveClass(/tiny-tabs__header/)

package/demos/pc/app/tabs/position.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="tab-demo-position">
-    <div class="mb10">
-      <tiny-radio v-model="position" label="top">top显示</tiny-radio>
-      <tiny-radio v-model="position" label="bottom">bottom显示</tiny-radio>
-      <tiny-radio v-model="position" label="left">left显示</tiny-radio>
-      <tiny-radio v-model="position" label="right">right显示</tiny-radio>
-    </div>
+    <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">
       <tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
         {{ item.content }}
@@ -15,13 +15,14 @@
 </template>
 
 <script lang="jsx">
-import { Tabs, TabItem, Radio } from '@opentiny/vue'
+import { Tabs, TabItem, RadioGroup, RadioButton } from '@opentiny/vue'
 
 export default {
   components: {
     TinyTabs: Tabs,
     TinyTabItem: TabItem,
-    TinyRadio: Radio
+    TinyRadioGroup: RadioGroup,
+    TinyRadioButton: RadioButton
   },
   data() {
     return {
@@ -30,28 +31,28 @@ export default {
       tabs3: [
         {
           name: 'navigation1',
-          title: 'Navigation1',
-          content: 'Navigation1'
+          title: 'Navigation 1',
+          content: 'Navigation 1'
         },
         {
           name: 'navigation2',
-          title: 'Navigation2',
-          content: 'Navigation2'
+          title: 'Navigation 2',
+          content: 'Navigation 2'
         },
         {
           name: 'navigation3',
-          title: 'Navigation3',
-          content: 'Navigation3'
+          title: 'Navigation 3',
+          content: 'Navigation 3'
         },
         {
           name: 'navigation4',
-          title: 'Navigation4',
-          content: 'Navigation4'
+          title: 'Navigation 4',
+          content: 'Navigation 4'
         },
         {
           name: 'navigation5',
-          title: 'Navigation5',
-          content: 'Navigation5'
+          title: 'Navigation 5',
+          content: 'Navigation 5'
         }
       ]
     }

package/demos/pc/app/tabs/prevent-tab-switching-composition-api.vue

@@ -5,10 +5,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>

package/demos/pc/app/tabs/prevent-tab-switching.vue

@@ -5,10 +5,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
   </div>
 </template>

package/demos/pc/app/tabs/stretch-wh-composition-api.vue

@@ -4,10 +4,10 @@
       表单组件,具有与用户交互，并可完成数据采集功能的控件。
     </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/stretch-wh.vue

@@ -4,10 +4,10 @@
       表单组件,具有与用户交互，并可完成数据采集功能的控件。
     </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/tab-style-bordercard-composition-api.vue

@@ -14,28 +14,28 @@ const activeName4 = ref('navigation1')
 const tabs3 = ref([
   {
     name: 'navigation1',
-    title: 'Navigation1',
-    content: 'Navigation1'
+    title: 'Navigation 1',
+    content: 'Navigation 1'
   },
   {
     name: 'navigation2',
-    title: 'Navigation2',
-    content: 'Navigation2'
+    title: 'Navigation 2',
+    content: 'Navigation 2'
   },
   {
     name: 'navigation3',
-    title: 'Navigation3',
-    content: 'Navigation3'
+    title: 'Navigation 3',
+    content: 'Navigation 3'
   },
   {
     name: 'navigation4',
-    title: 'Navigation4',
-    content: 'Navigation4'
+    title: 'Navigation 4',
+    content: 'Navigation 4'
   },
   {
     name: 'navigation5',
-    title: 'Navigation5',
-    content: 'Navigation5'
+    title: 'Navigation 5',
+    content: 'Navigation 5'
   }
 ])
 </script>

package/demos/pc/app/tabs/tab-style-bordercard.vue

@@ -20,28 +20,28 @@ export default {
       tabs3: [
         {
           name: 'navigation1',
-          title: 'Navigation1',
-          content: 'Navigation1'
+          title: 'Navigation 1',
+          content: 'Navigation 1'
         },
         {
           name: 'navigation2',
-          title: 'Navigation2',
-          content: 'Navigation2'
+          title: 'Navigation 2',
+          content: 'Navigation 2'
         },
         {
           name: 'navigation3',
-          title: 'Navigation3',
-          content: 'Navigation3'
+          title: 'Navigation 3',
+          content: 'Navigation 3'
         },
         {
           name: 'navigation4',
-          title: 'Navigation4',
-          content: 'Navigation4'
+          title: 'Navigation 4',
+          content: 'Navigation 4'
         },
         {
           name: 'navigation5',
-          title: 'Navigation5',
-          content: 'Navigation5'
+          title: 'Navigation 5',
+          content: 'Navigation 5'
         }
       ]
     }

package/demos/pc/app/tabs/tab-style-card-composition-api.vue

@@ -13,7 +13,7 @@ import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
 const setTabs3 = () => {
   const arr = []
   for (let i = 1; i <= 5; i++) {
-    const text = `Navigation${i}`
+    const text = `Navigation ${i}`
     arr.push({
       name: `navigation${i}`,
       title: text,

package/demos/pc/app/tabs/tab-style-card.vue

@@ -18,7 +18,7 @@ export default {
     const setTabs3 = () => {
       const arr = []
       for (let i = 1; i <= 5; i++) {
-        const text = `Navigation${i}`
+        const text = `Navigation ${i}`
         arr.push({
           name: `navigation${i}`,
           title: text,

package/demos/pc/app/tabs/tabs-draggable-composition-api.vue

@@ -29,7 +29,7 @@ const Tabs = ref([
   {
     title: 'Tab 1',
     name: '1',
-    content: 'Tab content '
+    content: 'Tab 1 content '
   },
   {
     title: 'Tab 2',

package/demos/pc/app/tabs/tabs-draggable.spec.ts

@@ -12,17 +12,11 @@ test('可拖拽', async ({ page }) => {
   for (let i = 0; i < 3; ++i) {
     await expect(items.nth(i)).toHaveText(`Tab ${i + 1}`)
   }
-
-  await page.getByRole('tab', { name: 'Tab 1' }).hover()
-  await page.mouse.down()
-  await page.mouse.move(box2.x + box2.width / 2, box2.y + box2.height / 2)
-  await page.mouse.up()
-
-  await page.waitForTimeout(200)
   await page.getByRole('tab', { name: 'Tab 1' }).hover()
   await page.mouse.down()
   await page.mouse.move(box3.x + box3.width / 2, box3.y + box3.height / 2)
   await page.mouse.up()
+  await page.waitForTimeout(200)
   for (let i = 0; i < 3; ++i) {
     await expect(items.nth(i)).toHaveText(`Tab ${arr2[i]}`)
   }

package/demos/pc/app/tabs/tabs-draggable.vue

@@ -35,7 +35,7 @@ export default {
         {
           title: 'Tab 1',
           name: '1',
-          content: 'Tab content '
+          content: 'Tab 1 content '
         },
         {
           title: 'Tab 2',

package/demos/pc/app/tabs/tabs-events-click-composition-api.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" @click="click" tab-style="card">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/tabs-events-click.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" @click="click" tab-style="card">
     <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
     <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
     </tiny-tab-item>
-    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+    <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+    <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
   </tiny-tabs>
 </template>
 

package/demos/pc/app/tabs/tabs-events-close-composition-api.vue

@@ -20,22 +20,22 @@ const Tabs = ref([
   {
     title: '数据组件',
     name: 'second',
-    content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+    content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
   },
   {
     title: '导航组件',
     name: 'third',
-    content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+    content: ' 导航组件,帮助网站访问者浏览站点的组件。'
   },
   {
     title: '业务组件',
     name: 'fourth',
-    content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+    content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
   },
   {
     title: '其他组件',
     name: 'fifth',
-    content: '其他组件，更多种类组件'
+    content: '其他组件，更多种类组件。'
   }
 ])
 const instance = getCurrentInstance()

package/demos/pc/app/tabs/tabs-events-close.vue

@@ -26,22 +26,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ]
     }

package/demos/pc/app/tabs/tabs-events-edit-composition-api.vue

@@ -20,22 +20,22 @@ const Tabs = ref([
   {
     title: '数据组件',
     name: 'second',
-    content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+    content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
   },
   {
     title: '导航组件',
     name: 'third',
-    content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+    content: ' 导航组件,帮助网站访问者浏览站点的组件。'
   },
   {
     title: '业务组件',
     name: 'fourth',
-    content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+    content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
   },
   {
     title: '其他组件',
     name: 'fifth',
-    content: '其他组件，更多种类组件'
+    content: '其他组件，更多种类组件。'
   }
 ])
 const instance = getCurrentInstance()

package/demos/pc/app/tabs/tabs-events-edit.vue

@@ -26,22 +26,22 @@ export default {
         {
           title: '数据组件',
           name: 'second',
-          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
+          content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
         },
         {
           title: '导航组件',
           name: 'third',
-          content: ' 导航组件,帮助网站访问者浏览站点的组件.'
+          content: ' 导航组件,帮助网站访问者浏览站点的组件。'
         },
         {
           title: '业务组件',
           name: 'fourth',
-          content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
+          content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
         },
         {
           title: '其他组件',
           name: 'fifth',
-          content: '其他组件，更多种类组件'
+          content: '其他组件，更多种类组件。'
         }
       ]
     }

package/demos/pc/app/tabs/tabs-separator-composition-api.vue

@@ -5,10 +5,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs v-model="activeName2" separator>
@@ -16,10 +16,10 @@
         表单组件,具有与用户交互，并可完成数据采集功能的控件。
       </tiny-tab-item>
       <tiny-tab-item title="数据组件" name="second">
-        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+        数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
       </tiny-tab-item>
-      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
-      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
+      <tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
+      <tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
     </tiny-tabs>
     <br /><br /><br /><br />
     <tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
@@ -41,7 +41,7 @@ const Tabs = reactive([
   {
     title: 'Tab 1',
     name: '1',
-    content: 'Tab content '
+    content: 'Tab 1 content '
   },
   {
     title: 'Tab 2',