@opentiny/vue-docs 2.2.19 → 2.2.21

package/demos/pc/app/statistic/statistic-slot-composition-api.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true" class="row-bg">
+        <tiny-col :span="3">
+          <tiny-statistic :value="10010258" :precision="0">
+            <template #title> 活跃度 </template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="2" :title="msg"> </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="2" :title="money">
+            <template #title:data="{ scoped }">{{ scoped }}</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="600" :precision="0" title="队伍比分">
+            <template #suffix>/220</template>
+          </tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+
+const num = 306526.23
+const msg = { value: '额度' }
+const money = { value: '存款' }
+</script>

package/demos/pc/app/statistic/statistic-slot.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('插槽用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('statistic#statistic-slot')
+  await page.locator('div').filter({ hasText: /^10,010,258$/ })
+  await page
+    .locator('div')
+    .filter({ hasText: /^306,526\.23$/ })
+    .first()
+  await page.getByText('Like:306,526').click()
+  await page.getByText('600/').click()
+})

package/demos/pc/app/statistic/statistic-slot.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true" class="row-bg">
+        <tiny-col :span="3">
+          <tiny-statistic :value="10010258" :precision="0">
+            <template #title> 活跃度 </template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="2" :title="msg"> </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="2" :title="money">
+            <template #title:data="{ scoped }">{{ scoped }}</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="num" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="3">
+          <tiny-statistic :value="600" :precision="0" title="队伍比分">
+            <template #suffix>/220</template>
+          </tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script>
+import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyStatistic: Statistic,
+    TinyLayout: Layout,
+    TinyRow: Row,
+    TinyCol: Col
+  },
+  data() {
+    return {
+      num: 306526.23,
+      msg: { value: '额度' },
+      money: { value: '存款' }
+    }
+  }
+}
+</script>

package/demos/pc/app/statistic/statistic-style-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true" class="row-bg">
+        <tiny-col :span="6">
+          <tiny-statistic :value="num" :value-style="{ color: '#b12220' }" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="6">
+          <tiny-statistic :value="num" :value-style="{ 'color': '#3ac295' }" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="6">
+          <tiny-statistic :value="num" :value-style="[{ 'color': '#e37d29' }]" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+
+const num = 306526.23
+</script>

package/demos/pc/app/statistic/statistic-style.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('样式用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('statistic#statistic-style')
+  await expect(page.getByText('Like:306,526').first()).toHaveClass(/tiny-statistic__slots/)
+})

package/demos/pc/app/statistic/statistic-style.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <tiny-layout>
+      <tiny-row :flex="true" class="row-bg">
+        <tiny-col :span="6">
+          <tiny-statistic :value="num" :value-style="{ color: '#b12220' }" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="6">
+          <tiny-statistic :value="num" :value-style="{ 'color': '#3ac295' }" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+        <tiny-col :span="6">
+          <tiny-statistic :value="num" :value-style="[{ 'color': '#e37d29' }]" :precision="0" title="点赞数量">
+            <template #prefix> Like:</template>
+          </tiny-statistic>
+        </tiny-col>
+      </tiny-row>
+    </tiny-layout>
+  </div>
+</template>
+
+<script>
+import { Statistic, Layout, Row, Col } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyStatistic: Statistic,
+    TinyLayout: Layout,
+    TinyRow: Row,
+    TinyCol: Col
+  },
+  data() {
+    return {
+      num: 306526.23
+    }
+  }
+}
+</script>

package/demos/pc/app/statistic/webdoc/statistic.cn.md

@@ -0,0 +1,7 @@
+---
+title: Statistic 统计组件
+---
+
+# Statistic 统计组件
+
+显示统计。

package/demos/pc/app/statistic/webdoc/statistic.en.md

@@ -0,0 +1,7 @@
+---
+title: Statistics component
+---
+
+# Statistics component
+
+Display statistical data.

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

@@ -0,0 +1,46 @@
+export default {
+  column: '2',
+  owner: '',
+  demos: [
+    {
+      demoId: 'basic-usage',
+      name: {
+        'zh-CN': '基本用法',
+        'en-US': 'Basic Usage'
+      },
+      desc: {
+        'zh-CN':
+          '通过<code>value</code>设置数字内容，<code>precision</code>设置数字精度值，<code>title</code>设置数字内容标题，<code>prefix</code>设置数字内容前置插槽，<code>suffix</code>设置数字内容后置插槽。',
+        'en-US':
+          'Set digital content through<code>value</code>,<code>precision</code>set digital precision value,<code>title</code>set digital content title,<code>prefix</code>set digital content front slot, and<code>suffix</code>set digital content rear slot.'
+      },
+      codeFiles: ['basic-usage.vue']
+    },
+    {
+      demoId: 'statistic-slot',
+      name: {
+        'zh-CN': '插槽用法',
+        'en-US': 'Slot Usage'
+      },
+      desc: {
+        'zh-CN':
+          '通过<code>title</code>设置标题插槽，<code>prefix</code>设置数字前缀插槽，<code>suffix</code>设置数字后缀插槽。',
+        'en-US':
+          'Set the title slot through<code>title</code>, set the number prefix slot through<code>prefix</code>, and set the number suffix slot through<code>suffix</code>.'
+      },
+      codeFiles: ['statistic-slot.vue']
+    },
+    {
+      demoId: 'statistic-style',
+      name: {
+        'zh-CN': '样式用法',
+        'en-US': 'Style Usage'
+      },
+      desc: {
+        'zh-CN': '通过<code>value-style</code>设置数字样式。',
+        'en-US': 'Set the number style through<code>value style</code>.'
+      },
+      codeFiles: ['statistic-style.vue']
+    }
+  ]
+}

package/demos/pc/app/tabs/tabs-events-close.spec.ts

@@ -5,7 +5,7 @@ test('删除事件', async ({ page }) => {
   await page.goto('tabs#tabs-events-close')
 
   const tabs = page.locator('.tiny-tabs')
-  const tabItem = tabs.getByRole('tab', { name: '表单组件' })
+  const tabItem = tabs.getByRole('tab', { name: '其他组件' })
   const close = tabItem.locator('.tiny-tabs__icon-close')
   const modal = page.locator('.tiny-modal').first()
 

package/demos/pc/app/tag/color3-composition-api.vue

@@ -1,13 +1,31 @@
 <template>
   <div class="tiny-tag-demo">
-    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
     <tiny-tag type="success" hit>标签二</tiny-tag>
     <tiny-tag type="info" hit>标签三</tiny-tag>
     <tiny-tag type="warning" hit>标签四</tiny-tag>
     <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
   </div>
 </template>
 
 <script setup lang="jsx">
 import { Tag as TinyTag } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+</style>

package/demos/pc/app/tag/color3.spec.ts

@@ -5,16 +5,12 @@ test('边框和自定义背景色', async ({ page }) => {
   await page.goto('tag#color3')
 
   const tags = page.locator('.all-demos-container').locator('.tiny-tag')
-  const first = tags.nth(0)
+  const first = tags.getByText('标签一')
+  const red = tags.getByText('red标签')
+  const custom = tags.getByText('自定义背景色', { exact: true })
 
-  await expect(tags).toHaveClass([
-    /tiny-tag/,
-    /tiny-tag--success/,
-    /tiny-tag--info/,
-    /tiny-tag--warning/,
-    /tiny-tag--danger/
-  ])
-  await expect(tags).toHaveClass([/is-hit/, /is-hit/, /is-hit/, /is-hit/, /is-hit/])
-  await expect(first).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
-  await expect(first).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+  await expect(first).toHaveClass(/is-hit/)
+  await expect(red).toHaveClass(/tiny-tag--red/)
+  await expect(custom).toHaveCSS('background-color', 'rgba(82, 196, 26, 0.8)')
+  await expect(custom).toHaveCSS('border-color', 'rgb(87, 93, 108)')
 })

package/demos/pc/app/tag/color3.vue

@@ -1,10 +1,22 @@
 <template>
   <div class="tiny-tag-demo">
-    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <div class="mb5">hit：</div>
+    <tiny-tag hit>标签一</tiny-tag>
     <tiny-tag type="success" hit>标签二</tiny-tag>
     <tiny-tag type="info" hit>标签三</tiny-tag>
     <tiny-tag type="warning" hit>标签四</tiny-tag>
     <tiny-tag type="danger" hit>标签五</tiny-tag>
+    <div class="mb5">color 预设值：</div>
+    <tiny-tag color="red">red标签</tiny-tag>
+    <tiny-tag color="orange">orange标签</tiny-tag>
+    <tiny-tag color="green">green标签</tiny-tag>
+    <tiny-tag color="blue">blue标签</tiny-tag>
+    <tiny-tag color="purple">purple标签</tiny-tag>
+    <tiny-tag color="brown">brown标签</tiny-tag>
+    <tiny-tag color="grey">grey标签</tiny-tag>
+    <div class="mb5">自定义 color 值：</div>
+    <tiny-tag color="rgba(82,196,26,0.8)" hit>自定义背景色</tiny-tag>
+    <tiny-tag :color="['linear-gradient(to right, #e8cda4, #f8eddb)', '#8f3c00']" hit>自定义背景色和文本色</tiny-tag>
   </div>
 </template>
 
@@ -17,3 +29,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.tiny-tag {
+  border-radius: 0px 8px 0px 8px;
+}
+</style>

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

@@ -29,12 +29,12 @@ export default {
     {
       demoId: 'color3',
       name: {
-        'zh-CN': '背景色与边框',
-        'en-US': 'Background color and border'
+        'zh-CN': '颜色与边框',
+        'en-US': 'Color and border'
       },
       desc: {
-        'zh-CN': '通过 <code>color</code> 设置背景色， <code>hit</code> 设置边框。',
-        'en-US': 'Set the size through <code>size</code> , with optional values: <code>(medium/small/mini)</code> .'
+        'zh-CN': `通过 <code>hit</code> 设置边框；<code>color</code> 设置颜色，可使用预设值，也可自定义颜色值；当自定义颜色值为字符串则只能设置背景色；若为数组则第一个值为背景色，第二个为文本色。`,
+        'en-US': `Use <code>hit</code> to set the border. <code>color</code> Set the color. You can use the preset value or customize the color value. If the value of Custom Color is a character string, only the background color can be set. If it is an array, the first value is the background color and the second is the text color.`
       },
       codeFiles: ['color3.vue']
     },

package/demos/pc/app/time-line/custom-field-composition-api.vue

@@ -5,6 +5,7 @@
     @click="click"
     name-field="content"
     time-field="timestamp"
+    auto-color-field="icon"
     vertical
   ></tiny-time-line>
 </template>
@@ -12,6 +13,7 @@
 <script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { iconLoading } from '@opentiny/vue-icon'
 
 const active = ref(1)
 const data = ref([
@@ -21,7 +23,8 @@ const data = ref([
   },
   {
     content: '通过审核',
-    timestamp: '2018-04-13'
+    timestamp: '2018-04-13',
+    icon: iconLoading()
   },
   {
     content: '创建成功',

package/demos/pc/app/time-line/custom-field.spec.ts

@@ -12,5 +12,6 @@ test('自定义字段', async ({ page }) => {
   await expect(nodes.first().locator('.date-time .time')).toHaveText('00:00')
   await expect(nodes.first().locator('.name')).toHaveText('提交审批')
   await expect(nodes.nth(1).locator('.date-time .date')).toHaveText('2018-04-13')
+  await expect(nodes.nth(1).locator('.icon-custom')).toBeVisible()
   await expect(nodes.nth(2).locator('.name')).toHaveText('创建成功')
 })

package/demos/pc/app/time-line/custom-field.vue

@@ -5,12 +5,14 @@
     @click="click"
     name-field="content"
     time-field="timestamp"
+    auto-color-field="icon"
     vertical
   ></tiny-time-line>
 </template>
 
 <script>
 import { TimeLine } from '@opentiny/vue'
+import { iconLoading } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -26,7 +28,8 @@ export default {
         },
         {
           content: '通过审核',
-          timestamp: '2018-04-13'
+          timestamp: '2018-04-13',
+          icon: iconLoading()
         },
         {
           content: '创建成功',

package/demos/pc/app/time-line/custom-icon-composition-api.vue

@@ -0,0 +1,21 @@
+<template>
+  <tiny-time-line :data="data" :active="active" @click="onClick"></tiny-time-line>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { iconCheckOut, iconCalendar, iconLoading, iconEnd } from '@opentiny/vue-icon'
+
+const active = ref(1)
+const data = reactive([
+  { name: '立项', time: '2022-11-12 10:00', autoColor: iconCheckOut() },
+  { name: '开发', time: '2022-11-15 20:00', autoColor: iconCalendar() },
+  { name: '交付', time: '2022-12-10 20:00', autoColor: iconLoading() },
+  { name: '结项', time: '2022-12-15 00:00', autoColor: iconEnd() }
+])
+
+const onClick = (index) => {
+  active.value = index
+}
+</script>

package/demos/pc/app/time-line/custom-icon.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('time-line#custom-icon')
+
+  const timeline = page.locator('#custom-icon .tiny-timeline')
+  const timelineItems = await timeline.locator('.tiny-timeline-item').all()
+
+  for (const node of timelineItems) {
+    await expect(node.locator('.icon-custom .fixicons')).toBeVisible()
+  }
+})

package/demos/pc/app/time-line/custom-icon.vue

@@ -0,0 +1,34 @@
+<template>
+  <tiny-time-line :data="data" :active="active" @click="click"></tiny-time-line>
+</template>
+
+<script>
+import { TimeLine, Modal } from '@opentiny/vue'
+import { iconCheckOut, iconCalendar, iconLoading, iconEnd } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTimeLine: TimeLine
+  },
+  data() {
+    return {
+      active: 2,
+      data: [
+        { name: '立项', time: '2022-11-12 10:00', autoColor: iconCheckOut() },
+        { name: '开发', time: '2022-11-15 20:00', autoColor: iconCalendar() },
+        { name: '交付', time: '2022-12-10 20:00', autoColor: iconLoading() },
+        { name: '结项', time: '2022-12-15 00:00', autoColor: iconEnd() }
+      ]
+    }
+  },
+  methods: {
+    click(index, node) {
+      this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>

package/demos/pc/app/time-line/status-composition-api.vue

@@ -1,11 +1,16 @@
 <template>
   <div class="demo-timeline">
+    <p>
+      (1)
+      <code>autoColor</code>
+      可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
+    </p>
     <tiny-time-line :data="data1"></tiny-time-line>
     <br />
 
     <p>
-      竖式时间线可以通过 <code>type</code> 属性指定节点类型，可选值有 <code>primary</code>|<code>success</code>
-      |<code>warning</code>|<code>danger</code>|<code>info</code>
+      (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
+      <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
     </p>
     <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
   </div>
@@ -15,7 +20,13 @@
 import { reactive } from 'vue'
 import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 
-const data1 = reactive([{ name: '默认状态' }, { name: '异常状态', error: true }, { name: '禁用状态', disabled: true }])
+const data1 = reactive([
+  { name: '默认状态' },
+  { name: '成功状态', autoColor: 'success' },
+  { name: '警告状态', autoColor: 'warning' },
+  { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
+  { name: '禁用状态', disabled: true }
+])
 const data2 = reactive([
   { name: '基本 / primary', time: '2019-11-10 00:00:00', type: 'primary' },
   { name: '成功 / success', time: '2019-11-11 00:01:30', type: 'success' },
@@ -24,3 +35,13 @@ const data2 = reactive([
   { name: '信息 / info', time: '2019-11-14 20:45:50', type: 'info' }
 ])
 </script>
+
+<style scoped>
+code {
+  color: #476582;
+  padding: 4px 8px;
+  margin: 0 4px;
+  border-radius: 3px;
+  background-color: rgba(27, 31, 35, 0.05);
+}
+</style>

package/demos/pc/app/time-line/status.spec.ts

@@ -1,14 +1,56 @@
 import { test, expect } from '@playwright/test'
 
-test('节点状态', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#status')
-
-  const timeline = page.locator('#status .tiny-steps-timeline')
-  const timelineItems = timeline.locator('.tiny-timeline-item')
-  await expect(timelineItems.first()).toHaveClass(/timeline-item--primary/)
-  await expect(timelineItems.nth(1)).toHaveClass(/timeline-item--success/)
-  await expect(timelineItems.nth(2)).toHaveClass(/timeline-item--warning/)
-  await expect(timelineItems.nth(3)).toHaveClass(/timeline-item--danger/)
-  await expect(timelineItems.nth(4)).toHaveClass(/timeline-item--info/)
+test.describe('节点状态', () => {
+  test('autoColor属性设置节点状态', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('time-line#status')
+
+    const timeline = page.locator('#status .tiny-timeline').first()
+    const timelineItems = timeline.locator('.tiny-timeline-item')
+
+    // 默认状态
+    await expect(timelineItems.first()).toHaveClass(/process-wait/)
+    await expect(timelineItems.first().locator('.icon')).toHaveCSS('border-color', 'rgb(87, 93, 108)')
+    await expect(timelineItems.first().locator('.icon .number')).toHaveCSS('color', 'rgb(87, 93, 108)')
+
+    // 成功状态
+    await expect(timelineItems.nth(1)).toBeVisible()
+    await expect(timelineItems.nth(1).locator('.icon')).toHaveCSS('border-color', 'rgb(94, 124, 224)')
+    await expect(timelineItems.nth(1).locator('.icon .icon-yes')).toHaveCSS('fill', 'rgb(94, 124, 224)')
+
+    // 警告状态
+    await expect(timelineItems.nth(2).locator('.icon.icon-warning')).toBeVisible()
+    await expect(timelineItems.nth(2).locator('.icon')).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+    await expect(timelineItems.nth(2).locator('.icon .icon-warning')).toHaveCSS('fill', 'rgb(255, 255, 255)')
+
+    // 异常状态
+    await expect(timelineItems.nth(3).locator('.icon')).toBeVisible()
+    await expect(timelineItems.nth(3).locator('.icon')).toHaveCSS('border-color', 'rgb(246, 111, 106)')
+    await expect(timelineItems.nth(3).locator('.icon .icon-error')).toHaveCSS('fill', 'rgb(222, 80, 78)')
+
+    // 禁用状态
+    await expect(timelineItems.nth(4)).toHaveClass(/process-disabled/)
+    await expect(timelineItems.nth(4).locator('.icon')).toHaveCSS('background-color', 'rgb(245, 245, 246)')
+    await expect(timelineItems.nth(4).locator('.icon .number')).toHaveCSS('color', 'rgb(173, 176, 184)')
+  })
+
+  test('type属性设置节点状态', async ({ page }) => {
+    page.on('pageerror', (exception) => expect(exception).toBeNull())
+    await page.goto('time-line#status')
+
+    const timeline = page.locator('#status .tiny-timeline').nth(1)
+    const timelineItems = timeline.locator('.tiny-timeline-item')
+
+    await expect(timelineItems.first()).toHaveClass(/timeline-item--primary/)
+    await expect(timelineItems.first().locator('.dot')).toHaveCSS('background-color', 'rgb(223, 225, 230)')
+    await expect(timelineItems.nth(1)).toHaveClass(/timeline-item--success/)
+    await expect(timelineItems.nth(1).locator('.dot')).toHaveCSS('background-color', 'rgb(80, 212, 171)')
+
+    await expect(timelineItems.nth(2)).toHaveClass(/timeline-item--warning/)
+    await expect(timelineItems.nth(2).locator('.dot')).toHaveCSS('background-color', 'rgb(250, 152, 65)')
+    await expect(timelineItems.nth(3)).toHaveClass(/timeline-item--danger/)
+    await expect(timelineItems.nth(3).locator('.dot')).toHaveCSS('background-color', 'rgb(246, 111, 106)')
+    await expect(timelineItems.nth(4)).toHaveClass(/timeline-item--info/)
+    await expect(timelineItems.nth(4).locator('.dot')).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+  })
 })