@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/steps/only-number.spec.ts

@@ -4,7 +4,7 @@ test('序号仅显示数字', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#normal-steps')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   await expect(steps.locator('div').first()).toHaveClass(/tiny-steps-normal/)
   const nodes = steps.locator('.tiny-timeline-item')
 

package/demos/pc/app/steps/only-number.vue

@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       normalActive: 0,
-      data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
+      data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
     }
   },
   methods: {

package/demos/pc/app/steps/show-divider-composition-api.vue

@@ -8,7 +8,7 @@ import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
-const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
+const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 
 const normalClick = (index, node) => {
   normalActive.value = index

package/demos/pc/app/steps/show-divider.spec.ts

@@ -4,6 +4,6 @@ test('底部分割线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#show-divider')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   await expect(steps.locator('.tiny-steps__bottom-divider')).toBeVisible()
 })

package/demos/pc/app/steps/show-divider.vue

@@ -13,7 +13,7 @@ export default {
   data() {
     return {
       normalActive: 0,
-      data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
+      data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
     }
   },
   methods: {

package/demos/pc/app/steps/size-composition-api.vue

@@ -9,19 +9,16 @@ import { Steps as TinySteps, Modal } from '@opentiny/vue'
 const active = ref(0)
 const data = ref([
   {
-    name: 'Basic Info'
-  },
-  {
-    name: 'AAAAA'
+    name: 'Basic Info',
+    status: 'done'
   },
+  { name: 'BOQ Info', status: 'done', description: 'done 已完成' },
+  { name: 'BBQ Info', status: 'error', description: 'error 错误' },
   {
     name: 'Involved Parties',
-    error: true
+    status: 'disabled'
   },
-  {
-    name: 'Billing',
-    disabled: true
-  }
+  { name: 'Billing', status: '', description: '默认无状态' }
 ])
 
 const normalClick = (index, node) => {

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

@@ -4,8 +4,6 @@ test('尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#size')
 
-  const miniSteps = page.locator('#preview .tiny-steps').first()
-  const normalSteps = page.locator('#preview .tiny-steps').nth(1)
-  await expect(miniSteps).toHaveClass(/tiny-steps--mini/)
-  await expect(normalSteps).not.toHaveClass(/tiny-steps--mini/)
+  const miniSteps = page.locator('#size .tiny-steps-block').first()
+  await expect(miniSteps).toHaveClass(/small/)
 })

package/demos/pc/app/steps/size.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-steps vertical line size="small" :data="data" :active="advancedActive" @click="normalClick"></tiny-steps>
+  <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      advancedActive: 1,
+      active: 1,
       data: [
         {
           name: 'Basic Info',
@@ -20,7 +20,7 @@ export default {
         { name: 'BOQ Info', status: 'done', description: 'done 已完成' },
         { name: 'BBQ Info', status: 'error', description: 'error 错误' },
         {
-          name: 'Involved Parties Involved Parties Involved Parties',
+          name: 'Involved Parties',
           status: 'disabled'
         },
         { name: 'Billing', status: '', description: '默认无状态' }
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     normalClick(index, node) {
-      normalActive.value = index
+      this.active = index
     }
   }
 }

package/demos/pc/app/steps/slot-active-node-desc-composition-api.vue

@@ -12,7 +12,7 @@ import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 
 const active = ref(0)
 const data = ref([
-  { name: 'Basic Info.', desc: '基本信息必填' },
+  { name: 'Basic Info', desc: '基本信息必填' },
   { name: 'BOQ Info', desc: '第二步信息' },
   { name: 'Involved Parties', desc: '第三步信息' },
   { name: 'Billing', desc: '最终步骤信息' }
@@ -26,6 +26,8 @@ function normalClick(index, node) {
 <style scoped>
 .active-node-desc {
   width: 100px;
+  padding: 2px;
+  margin-top: 2px;
   background-color: #fafafa;
   font-size: 12px;
 }

package/demos/pc/app/steps/slot-active-node-desc.spec.ts

@@ -4,7 +4,7 @@ test('当前节点描述信息', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#slot-active-node-desc')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   const nodes = steps.locator('.tiny-timeline-item')
   await expect(nodes.first().locator('.active-node-desc')).toBeVisible()
   await nodes.nth(1).locator('.name').click()

package/demos/pc/app/steps/slot-active-node-desc.vue

@@ -17,7 +17,7 @@ export default {
     return {
       active: 0,
       data: [
-        { name: 'Basic Info.', desc: '基本信息必填' },
+        { name: 'Basic Info', desc: '基本信息必填' },
         { name: 'BOQ Info', desc: '第二步信息' },
         { name: 'Involved Parties', desc: '第三步信息' },
         { name: 'Billing', desc: '最终步骤信息' }
@@ -35,6 +35,8 @@ export default {
 <style scoped>
 .active-node-desc {
   width: 100px;
+  padding: 2px;
+  margin-top: 2px;
   background-color: #fafafa;
   font-size: 12px;
 }

package/demos/pc/app/steps/slot-description-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line :active="active" :show-divider="true" text-position="right" space="280px">
+  <tiny-time-line :active="active" :show-divider="true" text-position="right" space="220px">
     <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)">
       <template #description>
         <div class="my-description">
@@ -16,10 +16,9 @@ import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem } from '@ope
 
 const active = ref(0)
 const data = ref([
-  { name: 'Basic Info.', description: '基本信息必填' },
-  { name: 'BOQ Info', description: '第二步信息' },
-  { name: 'Involved Parties', description: '第三步信息' },
-  { name: 'Billing', description: '最终步骤信息' }
+  { name: 'Basic Info', description: '基本信息必填' },
+  { name: 'BOQ Info', description: '第二步描述信息' },
+  { name: 'Billing', description: '最终步骤描述' }
 ])
 
 const normalClick = (index, node) => {
@@ -30,7 +29,8 @@ const normalClick = (index, node) => {
 <style scoped>
 .my-description {
   width: 100px;
-  background-color: #fafafa;
+  padding: 0 2px;
+  margin-top: 4px;
   font-size: 12px;
 }
 </style>

package/demos/pc/app/steps/slot-description.spec.ts

@@ -4,7 +4,7 @@ test('节点描述信息插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#slot-description')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   const nodes = steps.locator('.tiny-timeline-item')
 
   await expect(nodes.first().locator('.my-description')).toBeVisible()

package/demos/pc/app/steps/slot-description.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line :active="active" text-position="right" show-divider="true" space="280px">
+  <tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
     <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)">
       <template #description>
         <div class="my-description">
@@ -22,9 +22,9 @@ export default {
     return {
       active: 1,
       data: [
-        { name: 'Basic Info.', description: '基本信息必填' },
+        { name: 'Basic Info', description: '基本信息必填' },
         { name: 'BOQ Info', description: '第二步描述信息' },
-        { name: 'Billing', description: '最终步骤信息' }
+        { name: 'Billing', description: '最终步骤描述' }
       ]
     }
   },
@@ -39,8 +39,8 @@ export default {
 <style scoped>
 .my-description {
   width: 100px;
-  margin-top: 2px;
-  background-color: #eee;
+  padding: 0 2px;
+  margin-top: 4px;
   font-size: 12px;
 }
 </style>

package/demos/pc/app/steps/slot-item-composition-api.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="demo-steps-slot-item">
-    <div>通过 item 插槽添加自定义图标</div>
     <tiny-steps :data="stepsData">
       <template #item="data">
         <a class="label"

package/demos/pc/app/steps/slot-item.spec.ts

@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('插槽的使用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('steps#slot')
+  await page.goto('steps#slot-item')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('#slot-item .tiny-steps')
   const nodes = steps.locator('li')
 
   await expect(nodes.first()).toHaveText('Basic Info')

package/demos/pc/app/steps/slot-item.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="demo-steps-slot-item">
-    <div>通过 item 插槽添加自定义图标：</div>
     <tiny-steps :data="stepsData">
       <template #item="data">
-        <a class="label"
-          ><span>{{ data.slotScope.name }}</span></a
-        >
+        <div class="label">
+          <span>{{ data.slotScope.name }}</span>
+        </div>
         <span>
           <div :class="['dot', data.slotScope.status]">
-            <component :is="data.slotScope.status == 'done' ? IconYes : IconClose" class="tiny-svg-size" />
+            <component :is="data.slotScope.status === 'done' ? IconYes : IconClose" class="tiny-svg-size" />
           </div>
         </span>
       </template>

package/demos/pc/app/steps/space.spec.ts

@@ -4,7 +4,7 @@ test('节点宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#space')
 
-  const steps = page.locator('#preview .tiny-steps')
+  const steps = page.locator('.pc-demo .tiny-steps')
   const node = steps.locator('li').first()
   const { width } = await node.boundingBox()
 

package/demos/pc/app/steps/text-position-composition-api.vue

@@ -9,7 +9,7 @@ import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 const normalActive = ref(0)
 const data = ref([
   {
-    name: 'Basic Info.'
+    name: 'Basic Info'
   },
   {
     name: 'AAAAA'

package/demos/pc/app/steps/text-position.spec.ts

@@ -4,8 +4,6 @@ test('文本内容位置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('steps#text-position')
 
-  const steps1 = page.locator('#preview .tiny-steps').first()
-  const steps2 = page.locator('#preview .tiny-steps').nth(1)
-  await expect(steps1.locator('.tiny-steps-normal')).toHaveClass(/text-bottom/)
-  await expect(steps2.locator('.tiny-steps-normal')).toHaveClass(/text-right/)
+  const steps1 = page.locator('#text-position .tiny-steps')
+  await expect(steps1.locator('.tiny-steps-normal')).toHaveClass(/text-right/)
 })

package/demos/pc/app/steps/text-position.vue

@@ -14,7 +14,7 @@ export default {
       normalActive: 0,
       data: [
         {
-          name: 'Basic Info.'
+          name: 'Basic Info'
         },
         {
           name: 'AAAAA'

package/demos/pc/app/steps/vertical-steps.spec.ts

@@ -1,29 +1,23 @@
 import { test, expect } from '@playwright/test'
 
-test('时间线步骤条', async ({ page }) => {
+test('竖式步骤条', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('steps#timeline-steps')
+  await page.goto('steps#vertical-steps')
 
-  const timelineHorizotal = page.locator('#preview .tiny-steps').first()
-  const timelineVertical = page.locator('#preview .tiny-steps').nth(1)
-  const timelineReverse = page.locator('#preview .tiny-steps').nth(2)
-
-  // 横向时间线
-  await expect(timelineHorizotal).toHaveAttribute('type', 'timeline')
-  await expect(timelineHorizotal.locator('div').first()).toHaveClass(/tiny-steps-normal/)
-  await timelineHorizotal.getByText('运输中').click()
-  await expect(timelineHorizotal.locator('.normal').nth(1)).toHaveClass(/process-current/)
+  const timelineVertical = page.locator('.pc-demo .tiny-steps').first()
+  const timelineReverse = page.locator('.pc-demo .tiny-steps').nth(1)
 
   // 竖向步骤条 正序
-  await expect(timelineVertical).toHaveAttribute('type', 'timeline')
-  await expect(timelineVertical.locator('div').first()).toHaveClass('tiny-steps-timeline')
-  await timelineVertical.locator('.icon').nth(2).click()
-  await expect(timelineVertical.locator('.timeline').nth(2)).toHaveClass(/process-current/)
+  await expect(timelineVertical.locator('.tiny-steps-timeline')).toBeVisible()
+  await expect(timelineVertical.locator('.icon').first()).toHaveText('1')
+  await expect(timelineVertical.locator('.timeline').nth(1)).toHaveClass(/process-wait/)
+  await timelineVertical.locator('.icon').nth(1).click()
+  await expect(timelineVertical.locator('.timeline').nth(1)).toHaveClass(/process-current/)
 
   // 竖向步骤条 逆序
-  await expect(timelineReverse).toHaveAttribute('type', 'timeline')
-  await expect(timelineReverse.locator('div').first()).toHaveClass(/tiny-steps-timeline/)
-  await expect(timelineReverse.locator('div').first()).toHaveClass(/reverse/)
-  await timelineReverse.locator('div').filter({ hasText: /^3$/ }).click()
+  await expect(timelineReverse.locator('.tiny-steps-timeline')).toHaveClass(/reverse/)
+  await expect(timelineReverse.locator('.icon').first()).toContainText('3')
+  await expect(timelineReverse.locator('.timeline').first()).toHaveClass(/process-wait/)
+  await timelineReverse.locator('.icon').first().click()
   await expect(timelineReverse.locator('.timeline').first()).toHaveClass(/process-current/)
 })

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

@@ -45,7 +45,7 @@ export default {
       'name': { 'zh-CN': '节点状态', 'en-US': 'Timeline Step Bar' },
       'desc': {
         'zh-CN':
-          '<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态</p>\n',
+          '<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态。</p>\n',
         'en-US':
           '<p>The <code>disabled</code> attribute in single node data is used to configure whether to disable, while the <code>error</code> attribute is used to configure error state</p>\n'
       },
@@ -123,15 +123,6 @@ export default {
       },
       'codeFiles': ['only-number.vue']
     },
-    {
-      'demoId': 'click',
-      'name': { 'zh-CN': '点击事件', 'en-US': '' },
-      'desc': {
-        'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
-        'en-US': 'Trigger <code>click</code> event when clicking on a node.'
-      },
-      'codeFiles': ['click.vue']
-    },
     {
       'demoId': 'slot-item',
       'name': { 'zh-CN': 'item插槽', 'en-US': 'item slot' },
@@ -140,13 +131,22 @@ export default {
         'en-US': 'Customize step bar node content through scope slot <code>item</code>.'
       },
       'codeFiles': ['slot-item.vue']
+    },
+    {
+      'demoId': 'click',
+      'name': { 'zh-CN': '点击事件', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
+        'en-US': 'Trigger <code>click</code> event when clicking on a node.'
+      },
+      'codeFiles': ['click.vue']
     }
   ],
   apis: [
     {
       'name': 'steps',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'active',
           'type': 'number',
@@ -160,7 +160,7 @@ export default {
         {
           'name': 'count-field',
           'type': 'string',
-          'defaultValue': 'count',
+          'defaultValue': "'count'",
           'desc': {
             'zh-CN': '条形步骤条里徽标计数对应的字段名',
             'en-US': 'Custom field name corresponding to logo count in bar steps'
@@ -183,7 +183,7 @@ export default {
         {
           'name': 'name-field',
           'type': 'string',
-          'defaultValue': 'name',
+          'defaultValue': "'name'",
           'desc': {
             'zh-CN': '节点名称对应的字段名',
             'en-US': 'Field name corresponds to  name of node'
@@ -225,7 +225,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位。',
+            'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位',
             'en-US':
               'Node width can be set to numeric values, values with length units, or percentages. Numeric values will default to using pixels as the length unit'
           },
@@ -234,7 +234,7 @@ export default {
         {
           'name': 'status-field',
           'type': 'string',
-          'defaultValue': 'status',
+          'defaultValue': "'status'",
           'desc': {
             'zh-CN': '数据状态对应的字段名，用于条形步骤条',
             'en-US': 'Field name corresponding to data status, used for bar steps '
@@ -244,7 +244,7 @@ export default {
         {
           'name': 'text-position',
           'type': 'string',
-          'defaultValue': 'bottom',
+          'defaultValue': "'bottom'",
           'desc': {
             'zh-CN': '节点名称的位置， 可选值有right | bottom，用于单链型步骤条',
             'en-US':
@@ -256,7 +256,8 @@ export default {
       'events': [
         {
           'name': 'click',
-          'type': '(index: number, node: IStepsItem | ITimelineItem) => void',
+          'type':
+            '(index: number, node: <a href="#IStepsItem">IStepsItem</a> | <a href="time-line#ITimelineItem">ITimelineItem</a>) => void',
           'desc': {
             'zh-CN': '节点点击事件，参数：<li>index: 点击节点的索引</li><li>node：点击节点的数据</li>',
             'en-US': 'Node click event. Parameter: (index: node index, node: node data information)'

package/demos/pc/app/tabs/basic-usage-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <tiny-tabs v-model="activeName">
-    <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
-    <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+    <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
+    <tiny-tab-item title="数据组件" name="second" disabled>
+      数据组件,提供了非常强大数据表格功能，在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/basic-usage.spec.ts

@@ -7,6 +7,7 @@ test('基本用法', async ({ page }) => {
   const tabs = page.locator('.tiny-tabs')
   const tabItems = tabs.getByRole('tab')
   const item1 = tabItems.nth(0)
+  const item2 = tabItems.nth(1)
   const content = tabs.getByRole('tabpanel')
   const activeBar = tabs.locator('.tiny-tabs__active-bar')
 
@@ -21,4 +22,9 @@ test('基本用法', async ({ page }) => {
   await expect(activeBar).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
   await expect(item1).toHaveCSS('color', 'rgb(94, 124, 224)')
   await expect(content).toHaveText(/表单组件/)
+
+  // 禁用
+  await item2.click()
+  await expect(item1).toHaveClass(/is-active/)
+  await expect(content).toHaveText(/表单组件/)
 })

package/demos/pc/app/tabs/basic-usage.vue

@@ -1,11 +1,11 @@
 <template>
   <tiny-tabs v-model="activeName">
-    <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
-    <tiny-tab-item title="数据组件" name="second">
-      数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
+    <tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
+    <tiny-tab-item title="数据组件" name="second" disabled>
+      数据组件,提供了非常强大数据表格功能，在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/before-leave-composition-api.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" :before-leave="beforeLeave" 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/before-leave.vue

@@ -2,10 +2,10 @@
   <tiny-tabs v-model="activeName" :before-leave="beforeLeave" 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/custom-more-icon-composition-api.vue

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

package/demos/pc/app/tabs/custom-more-icon.vue

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

package/demos/pc/app/tabs/custom-tab-title-composition-api.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/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>