@opentiny/vue-docs 2.2.5 → 2.2.7

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

@@ -1,11 +1,11 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义数据映射规则', async ({ page }) => {
+test('自定义字段', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
-  await page.goto('time-line#different-data')
+  await page.goto('time-line#custom-field')
 
-  const timeline = page.locator('#preview .tiny-steps')
+  const timeline = page.locator('#custom-field .tiny-steps')
   const nodes = timeline.locator('.timeline')
 
   await expect(nodes.first().locator('.date-time .date')).toHaveText('2018-04-15')

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

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义节点顶部与底部内容', async ({ page }) => {
+test('自定义横向时间线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#custom-normal-step')
+  await page.goto('time-line#custom-horizontal-timeline')
 
-  const node = page.locator('#preview .tiny-steps .normal').first()
+  const node = page.locator('#custom-horizontal-timeline .tiny-steps .normal').first()
   // 自定义顶部内容
   await expect(node.locator('.custom-top')).toBeVisible()
   await expect(node.locator('.custom-top')).toContainText('已下单')

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

@@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
 test('自定义竖向时间线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
 
-  await page.goto('time-line#custom-vertical-step')
+  await page.goto('time-line#custom-vertical-timeline')
 
-  const node = page.locator('#preview .tiny-steps .timeline').first()
+  const node = page.locator('#custom-vertical-timeline .tiny-steps .timeline').first()
   // 自定义左侧内容
-  await expect(node.locator('ul > span').first()).toHaveCSS('text-align', 'right')
-  await expect(node.locator('ul > span').first()).toHaveText('已下单')
+  await expect(node.locator('span').first()).toHaveClass('custom-left')
+  await expect(node.locator('span').first()).toHaveText('已下单')
   // 自定义右侧内容
-  await expect(node.locator('ul > span').nth(1)).toHaveCSS('margin-left', '15px')
-  await expect(node.locator('ul > span').nth(1)).toContainText('2019')
+  await expect(node.locator('span').nth(1)).toHaveCSS('margin-left', '15px')
+  await expect(node.locator('span').nth(1)).toContainText('2019')
 })

package/demos/pc/app/time-line/set-node-width.spec.ts

@@ -1,14 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('节点长度设置', async ({ page }) => {
+test('宽度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#set-step-width')
+  await page.goto('time-line#set-node-width')
 
-  const node1 = page.locator('#preview .tiny-steps').first().locator('.tiny-timeline-item').first()
-  const { width: itemWidth1 } = await node1.boundingBox()
-  expect(Math.round(itemWidth1)).toBeCloseTo(200)
+  const node1 = page.locator('#set-node-width .tiny-steps').nth(0).locator('.tiny-timeline-item').first()
+  await expect(node1).toHaveCSS('width', '200px')
 
-  const node2 = page.locator('#preview .tiny-steps').nth(1).locator('.tiny-timeline-item').first()
-  const { width: itemWidth2 } = await node2.boundingBox()
-  expect(Math.round(itemWidth2)).toBeCloseTo(160)
+  const node2 = page.locator('#set-node-width .tiny-steps').nth(1).locator('.tiny-timeline-item').first()
+  await expect(node2).toHaveCSS('flex', '0 0 20%')
 })

package/demos/pc/app/time-line/set-start-value.spec.ts

@@ -1,10 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('设置序号起始值', async ({ page }) => {
+test('序号起始值', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#set-start-value')
 
-  const nodes = page.locator('#preview .tiny-steps .normal')
-  await expect(nodes.nth(1).locator('.icon')).toHaveText('3')
-  await expect(nodes.nth(2).locator('.icon')).toHaveText('4')
+  const nodes = page.locator('#set-start-value .tiny-steps .tiny-timeline-item')
+  await expect(nodes.nth(1).locator('.icon span')).toHaveText('3')
+  await expect(nodes.nth(2).locator('.icon span')).toHaveText('4')
 })

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

@@ -1,14 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test('节点外观风格', async ({ page }) => {
+test('圆点外观', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#shape')
 
-  const timeline = page.locator('#preview .tiny-steps-timeline')
+  const timeline = page.locator('#shape .tiny-steps-timeline')
   await expect(timeline.locator('.dot').first()).toBeVisible()
   await expect(timeline.locator('.tiny-timeline-item__content .time').first()).toBeVisible()
 
-  await page.getByRole('button', { name: '点击切换shape的值为 circle' }).click()
+  await page.getByRole('button', { name: '点击切换 shape 为 circle' }).click()
   await expect(timeline.locator('.dot').first()).not.toBeVisible()
   await expect(timeline.locator('.tiny-timeline-item__content .time').first()).not.toBeVisible()
 })

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

@@ -4,7 +4,7 @@ test('节点状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#status')
 
-  const timeline = page.locator('#preview .tiny-steps-timeline')
+  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/)

package/demos/pc/app/time-line/timeline-item.spec.ts

@@ -4,7 +4,7 @@ test('步骤条节点组件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-line#basic-usage')
 
-  const timeline = page.locator('#preview .tiny-steps')
+  const timeline = page.locator('#basic-usage .tiny-steps')
   const nodes = timeline.locator('.normal')
 
   await expect(nodes.first()).toHaveClass(/process-done/)

package/demos/pc/app/time-line/vertical-timeline.spec.ts

@@ -1,10 +1,14 @@
 import { test, expect } from '@playwright/test'
 
-test('纵向时间线', async ({ page }) => {
+test('竖向时间线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('time-line#vertical-step')
+  await page.goto('time-line#vertical-timeline')
 
-  const timeline = page.locator('#preview .tiny-steps')
-  await expect(timeline).not.toHaveClass(/is-horizontal/)
-  await expect(timeline.locator('div').first()).toHaveClass('tiny-steps-timeline')
+  const node1 = page.locator('#vertical-timeline .tiny-steps').nth(0).locator('.tiny-steps-timeline')
+  await expect(node1).not.toHaveClass('text-bottom')
+
+  const node2 = page.locator('#vertical-timeline .tiny-steps').nth(1).locator('.tiny-timeline-item')
+  await expect(node2.nth(0).locator('.name')).toHaveText('已签收')
+  await expect(node2.nth(1).locator('.name')).toHaveText('运输中')
+  await expect(node2.nth(2).locator('.name')).toHaveText('已下单')
 })

package/demos/pc/app/time-line/webdoc/time-line.js

@@ -47,14 +47,14 @@ export default {
       'demoId': 'status',
       'name': { 'zh-CN': '节点状态', 'en-US': 'Status of Node' },
       'desc': {
-        'zh-CN': '<p>在单项数据中使用 <code>status</code> 指定对应节点的状态.</p>',
+        'zh-CN': '<p>在单项数据中使用 <code>status</code> 指定对应节点的状态。</p>',
         'en-US': '<p>Use the <code>shape</code> attribute to set the appearance of a vertical time line node. </p>'
       },
       'codeFiles': ['status.vue']
     },
     {
       'demoId': 'set-node-width',
-      'name': { 'zh-CN': '宽度设置', 'en-US': 'Width Setting' },
+      'name': { 'zh-CN': '宽度', 'en-US': 'Width Setting' },
       'desc': {
         'zh-CN': '<p>通过 <code>space</code> 属性设置节点的宽度。</p>\n',
         'en-US': '<p>Use the <code>space</code> attribute to set the width of timeline node. </p>\n'
@@ -108,7 +108,7 @@ export default {
     {
       'name': 'time-line',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'active',
           'type': 'number',
@@ -154,7 +154,7 @@ export default {
         {
           'name': 'name-field',
           'type': 'string',
-          'defaultValue': 'name',
+          'defaultValue': "'name'",
           'desc': {
             'zh-CN': '节点名称对应的字段名',
             'en-US': 'Set the field name in the node information.'
@@ -174,10 +174,10 @@ export default {
         {
           'name': 'shape',
           'type': 'string',
-          'defaultValue': 'circle',
+          'defaultValue': "'circle'",
           'desc': {
-            'zh-CN': '圆点外形: 空心圆形或实心圆点，分别对应 circle | dot',
-            'en-US': 'Set the appearance of point, optional values include circle and dot'
+            'zh-CN': "圆点外形: 空心圆形或实心圆点，取值分别对应 'circle' | 'dot'",
+            'en-US': "Set the appearance of point, optional values include 'circle' and 'dot'"
           },
           'demoId': 'shape'
         },
@@ -196,7 +196,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
             'en-US':
               'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
           },
@@ -215,12 +215,12 @@ export default {
         {
           'name': 'time-field',
           'type': 'string',
-          'defaultValue': 'time',
+          'defaultValue': "'time'",
           'desc': {
             'zh-CN': '节点时间信息对应的字段名',
             'en-US': 'The name of the field corresponding to the node time information'
           },
-          'demoId': 'custome-filed'
+          'demoId': 'custom-field'
         },
         {
           'name': 'vertical',
@@ -236,7 +236,7 @@ export default {
       'events': [
         {
           'name': 'click',
-          'type': '(index: number, node: ITimelineItem) => void',
+          'type': '(index: number, node: <a href="#ITimelineItem">ITimelineItem</a>) => void',
           'desc': {
             'zh-CN': '节点的点击事件，参数：<br />index：点击节点的下标<br /> node： 点击节点数据}',
             'en-US': 'Click event of a node. arguments:<br />index: click the subscript of a node<br />node: node data'
@@ -282,7 +282,7 @@ export default {
     {
       'name': 'timeline-item',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'node',
           'type': 'ITimelineItem',
@@ -299,7 +299,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效。',
+            'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效',
             'en-US':
               'The length of the connection line and it is valid only when text-position is set to true. After setting, the space property is invalid'
           },
@@ -310,7 +310,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
             'en-US':
               'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
           },

package/demos/pc/app/time-picker/basic-usage.spec.ts

@@ -4,38 +4,17 @@ test('时间选择器基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#basic-usage')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const timeSelect = page.locator('.tiny-time-panel')
-  const hourSelect = timeSelect.locator('.tiny-scrollbar').first()
-  const minSelect = timeSelect.locator('.tiny-scrollbar').nth(1)
-  const secondSelect = timeSelect.locator('.tiny-scrollbar').nth(2)
+  // 测试滚动选择时间
+  const timePicker = page.getByRole('textbox', { name: '18:42:00' }).first()
+  await page.getByRole('textbox', { name: '18:40:00' }).first().click()
+  await page.getByRole('listitem').filter({ hasText: '42' }).first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(timePicker).toBeVisible()
 
-  // 测试非法输入是否赋予默认值
-  await expect(timePicker).toHaveValue('18:40:00')
-  await timePicker.click()
-  await expect(timeSelect).toBeVisible()
-  await timePicker.fill('inValidInput')
-  await timePicker.press('Enter')
-  await expect(timePicker).toHaveValue('18:40:00')
-  // 测试可选时间范围
-  await timePicker.click()
-  await expect(hourSelect.locator('.tiny-time-spinner__item')).toHaveCount(24)
-  await expect(minSelect.locator('.tiny-time-spinner__item')).toHaveCount(60)
-  await expect(secondSelect.locator('.tiny-time-spinner__item')).toHaveCount(60)
-  await expect(hourSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(21)
-  await expect(minSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(30)
-  await expect(secondSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
-  await hourSelect.locator('.tiny-time-spinner__item').getByText('19').click()
-  await minSelect.locator('.tiny-time-spinner__item').getByText('42').click()
-  await secondSelect.locator('.tiny-time-spinner__item').getByText('01').click()
-  await expect(hourSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(21)
-  await expect(minSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
-  await expect(secondSelect.locator('.tiny-time-spinner__item.disabled')).toHaveCount(0)
-  await expect(timePicker).toHaveValue('19:42:01')
-  // 测试清除按钮
-  await timePicker.hover()
-  await expect(preview.locator('.tiny-date-editor--time svg.baseClearicon')).toBeVisible()
-  await preview.locator('.tiny-date-editor--time svg.baseClearicon').click()
-  await expect(timePicker).toHaveValue('')
+  // 测试箭头选择时间
+  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:00' }).nth(1)
+  await page.getByRole('textbox', { name: '18:42:00' }).nth(1).click()
+  await page.locator('.tiny-time-spinner__wrapper > i:nth-child(2)').first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(timePickerArrowControl).toBeVisible()
 })

package/demos/pc/app/time-picker/clearable.spec.ts

@@ -1,16 +1,31 @@
 import { test, expect } from '@playwright/test'
 
-test('隐藏清除按钮', async ({ page }) => {
+test('清除按钮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#clearable')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const closeIcon = preview.locator('.tiny-date-editor--time svg.baseClearicon')
+  const timePickerDefaultClearIcon = page.getByRole('textbox', { name: '18:40:00' }).first()
+  const timePickerHideClearIcon = page.getByRole('textbox', { name: '18:40:00' }).nth(1)
+  const timePickerCustomClearIcon = page.getByRole('textbox', { name: '18:40:00' }).nth(2)
+  const closeIcon = page.locator('.tiny-date-editor--time svg.baseClearicon')
 
-  await timePicker.click()
-  await timePicker.fill('19:40:00')
-  await timePicker.press('Enter')
-  await timePicker.hover()
+  // 默认显示清除按钮
+  await timePickerDefaultClearIcon.hover()
+  await expect(closeIcon).toBeVisible()
+  await expect(closeIcon.locator('path')).toHaveAttribute('d', 'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z')
+
+  // 隐藏清除按钮
+  await timePickerHideClearIcon.hover()
   await expect(closeIcon).not.toBeVisible()
+
+  // 自定义清除按钮图标
+  await timePickerCustomClearIcon.hover()
+  await expect(closeIcon).toBeVisible()
+  await expect(closeIcon.locator('path').first()).toHaveAttribute('d', 'M14 7c0 3.87-3.13 7-7 7s-7-3.13-7-7 3.13-7 7-7 7 3.13 7 7z')
+  await expect(closeIcon.locator('path').nth(1)).toHaveAttribute('d', 'M9.96 9.29c.09.09.14.21.14.34 0 .13-.05.25-.14.33a.47.47 0 0 1-.67 0L7 7.67 4.71 9.96c-.18.18-.49.18-.67 0a.483.483 0 0 1 0-.67L6.33 7 4.04 4.71c-.09-.09-.14-.21-.14-.34s.05-.25.14-.34c.18-.18.49-.18.67 0L7 6.33l2.29-2.29c.19-.18.49-.18.67 0 .09.09.14.21.14.34s-.05.25-.14.34L7.67 7l2.29 2.29z')
+
+  // 测试清除功能
+  await timePickerDefaultClearIcon.hover()
+  await closeIcon.first().click()
+  await expect(page.getByRole('textbox').nth(1)).toHaveValue('')
 })

package/demos/pc/app/time-picker/default-value.spec.ts

@@ -4,14 +4,29 @@ test('选择器打开时默认时间设置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#default-value')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const timeSelect = page.locator('.tiny-time-panel')
-  const confirmBtn = timeSelect.getByRole('button', { name: '确定' })
+  // 日期选择
+  const hour = page.getByRole('listitem').filter({ hasText: '18' }).first()
+  const minute = page.getByRole('listitem').filter({ hasText: '40' }).first()
+  const second = page.getByRole('listitem').filter({ hasText: '00' }).nth(2)
 
-  await expect(timePicker).toHaveValue('')
-  await timePicker.click()
-  await expect(timeSelect).toBeVisible()
-  await confirmBtn.click()
-  await expect(timePicker).toHaveValue('18:40:00')
+  await page.locator('#default-value input[type="text"]').click()
+  await expect(hour).toHaveClass(/active/)
+  await expect(minute).toHaveClass(/active/)
+  await expect(second).toHaveClass(/active/)
+
+  // 日期范围选择
+  const startHour = page.locator('div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(19)').first()
+  const startMinute = page.getByRole('listitem').filter({ hasText: '40' }).first()
+  const startSecond = page.locator('div:nth-child(2) > .tiny-time-spinner > div:nth-child(3) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li').first()
+  const endHour = page.locator('div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(19)').first()
+  const endMinute = page.getByRole('listitem').filter({ hasText: '50' }).nth(2)
+  const endSecond = page.locator('div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div:nth-child(3) > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li').first()
+
+  await page.getByRole('textbox').nth(2).click()
+  await expect(startHour).toHaveClass(/active/)
+  await expect(startMinute).toHaveClass(/active/)
+  await expect(startSecond).toHaveClass(/active/)
+  await expect(endHour).toHaveClass(/active/)
+  await expect(endMinute).toHaveClass(/active/)
+  await expect(endSecond).toHaveClass(/active/)
 })

package/demos/pc/app/time-picker/disabled.spec.ts

@@ -4,9 +4,15 @@ test('测试禁用状态', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#disabled')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
+  // 整体禁用
+  const timePickerDisabled = page.getByRole('textbox', { name: '18:40:00' }).first()
+  await expect(timePickerDisabled).toBeDisabled()
+  await expect(timePickerDisabled).toHaveCSS('cursor', 'not-allowed')
 
-  await expect(timePicker).toBeDisabled()
-  await expect(timePicker).toHaveCSS('cursor', 'not-allowed')
+  // 部分禁用
+  const timePicker = page.getByRole('textbox', { name: '18:40:00' }).nth(1)
+  await page.getByRole('textbox', { name: '18:40:00' }).nth(1).click()
+  await page.locator('div:nth-child(9) > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(18) > span').first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(timePicker).toBeVisible()
 })

package/demos/pc/app/time-picker/editable.spec.ts

@@ -4,15 +4,14 @@ test('文本框不可输入', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#editable')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const closeIcon = preview.locator('svg.baseClearicon')
+  const timePicker = page.locator('.tiny-date-editor input')
+  const closeIcon = page.locator('svg.baseClearicon')
 
   await expect(timePicker).toHaveValue('18:40:00')
   await timePicker.hover()
   await closeIcon.click()
   await expect(timePicker).toHaveValue('')
   await timePicker.click()
-  await page.keyboard.type('Hello World!')
+  await page.keyboard.type('19:40:00')
   await expect(timePicker).toHaveValue('')
 })

package/demos/pc/app/time-picker/event-composition-api.vue

@@ -19,7 +19,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 const timePickerRef = ref()
 
 function handleFocus() {
-  timePickerRef.value.focus()
+  timePickerRef.value.$el.querySelector('input').focus()
 }
 
 function blur() {

package/demos/pc/app/time-picker/event.spec.ts

@@ -4,17 +4,17 @@ test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#event')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const focusBtn = preview.getByRole('button', { name: 'focus' })
+  const timePicker = page.locator('.tiny-date-editor input')
+  const focusBtn = page.getByRole('button', { name: 'focus' })
   const modal = page.locator('.tiny-modal__box')
-  const timeSelect = page.locator('.tiny-time-panel')
-  const confirmBtn = timeSelect.getByRole('button', { name: '确定' })
+  const timeSelect = page.locator('.tiny-time-panel').first()
+  const confirmBtn = page.getByRole('button', { name: '确定' })
 
   await timePicker.click()
   await expect(modal.filter({ hasText: 'focus事件' })).toBeVisible()
   await confirmBtn.click()
   await expect(modal.filter({ hasText: 'blur事件' })).toBeVisible()
   await focusBtn.click()
-  await expect(timeSelect).toBeVisible()
+  // TINY-TODO: focus 方法不生效，picker 组件 renderless 中的 focus 方法存在问题
+  // await expect(timeSelect).toBeVisible()
 })

package/demos/pc/app/time-picker/event.vue

@@ -26,7 +26,7 @@ export default {
   },
   methods: {
     handleFocus() {
-      this.$refs.timePickerRef.focus()
+      this.$refs.timePickerRef.$el.querySelector('input').focus()
     },
     blur() {
       Modal.message('blur事件')

package/demos/pc/app/time-picker/format.spec.ts

@@ -4,23 +4,39 @@ test('时间格式化', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#format')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-  const timeSelect = page.locator('.tiny-time-panel')
-  const hourSelect = timeSelect.locator('.tiny-scrollbar').first()
-  const valueSpan = preview.locator('span.select-time')
+  // format: 时间输入框中显示的格式
+  await page.getByRole('textbox', { name: '06:40:00 pm' }).click()
+  await page.getByText('07 pm').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '07:40:00 pm' })).toBeVisible()
 
-  await expect(timePicker).toHaveValue('18:30:00')
-  await expect(valueSpan).toHaveText('当前选中时间：1476095400000')
-  await timePicker.click()
-  await hourSelect.locator('.tiny-time-spinner__item').filter({ hasText: '19' }).click()
-  await timeSelect.getByRole('button', { name: '确定' }).click()
-  await expect(timePicker).toHaveValue('19:30:00')
-  await expect(valueSpan).toHaveText('当前选中时间：1476099000000')
+  await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
+  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
 
-  // 测试 am/pm 格式
-  const timePickerFormat = preview.locator('.tiny-date-editor')
+  await page.getByRole('textbox', { name: '8:40:0 PM' }).click()
+  await page.getByRole('listitem').filter({ hasText: '09 PM' }).locator('span').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '9:40:0 PM' })).toBeVisible()
 
-  await expect(timePickerFormat.first().locator('input')).toHaveValue('06:40:00 pm')
-  await expect(timePickerFormat.nth(1).locator('input')).toHaveValue('18:40:00 pm')
+  await page.getByRole('textbox', { name: '21:40:0 PM' }).click()
+  await page.getByRole('listitem').filter({ hasText: '10 PM' }).locator('span').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '22:40:0 PM' })).toBeVisible()
+
+  // value-format: 选中值的格式
+  await page.getByRole('textbox', { name: '18:30:00' }).click()
+  await page.getByRole('listitem').filter({ hasText: '19' }).first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '19:30:00' })).toBeVisible()
+
+  // picker-options.format: 下拉框中显示的格式
+  const timePickerHour = page.locator('.of-hidden > div:nth-child(14) .tiny-scrollbar').nth(0)
+  const timePickerMinute = page.locator('.of-hidden > div:nth-child(14) .tiny-scrollbar').nth(1)
+  const timePickerSecond = page.locator('.of-hidden > div:nth-child(14) .tiny-scrollbar').nth(2)
+  await page.getByRole('textbox', { name: '18:40:00' }).click()
+  await expect(timePickerHour).toBeVisible()
+  await expect(timePickerMinute).toBeVisible()
+  await expect(timePickerSecond).not.toBeVisible()
 })

package/demos/pc/app/time-picker/is-range.spec.ts

@@ -4,36 +4,12 @@ test('范围选择', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#is-range')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor')
-  const rangePicker = page.locator('.tiny-time-range-picker')
-  const getHourSelect = (parent) => parent.locator('.tiny-scrollbar.tiny-transition-timepicker').first()
-  const startSelect = rangePicker.locator('.tiny-time-range-picker__cell').first()
-  const endSelect = rangePicker.locator('.tiny-time-range-picker__cell').nth(1)
-  const startHourSelectItem = getHourSelect(startSelect).locator('.tiny-time-spinner__item')
-  const endHourSelectItem = getHourSelect(endSelect).locator('.tiny-time-spinner__item')
-  const cancelBtn = rangePicker.getByRole('button', { name: '取消' })
-  const confirmBtn = rangePicker.getByRole('button', { name: '确定' })
-
-  await expect(timePicker.locator('input')).toHaveCount(2)
-  await expect(timePicker.locator('.tiny-range-separator')).toHaveText('至')
-  await timePicker.locator('input').first().click()
-  await expect(rangePicker).toBeVisible()
-  await cancelBtn.click()
-  await expect(rangePicker).not.toBeVisible()
-  await timePicker.locator('input').nth(1).click()
-  await expect(rangePicker).toBeVisible()
-  await cancelBtn.click()
-  await expect(rangePicker).not.toBeVisible()
-  await timePicker.locator('input').first().click()
-  await getHourSelect(endSelect).getByText('19').click()
-
-  await expect(startHourSelectItem.filter({ hasText: '19' })).not.toHaveClass(/disabled/)
-  await expect(startHourSelectItem.filter({ hasText: '20' })).toHaveClass(/disabled/)
-  await getHourSelect(startSelect).getByText('19').click()
-  await expect(endHourSelectItem.filter({ hasText: '19' })).not.toHaveClass(/disabled/)
-  await expect(endHourSelectItem.filter({ hasText: '18' })).toHaveClass(/disabled/)
-  await confirmBtn.click()
-  await expect(timePicker.locator('input').first()).toHaveValue('19:40:00')
-  await expect(timePicker.locator('input').nth(1)).toHaveValue('19:50:00')
+  const startTime = page.getByRole('textbox').nth(1)
+  const endTime = page.getByRole('textbox').nth(2)
+  await page.getByRole('textbox').nth(1).click()
+  await page.getByText('42').first().click()
+  await page.locator('div:nth-child(2) > div:nth-child(2) > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(21) > span').first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(startTime).toHaveValue('18:42:00')
+  await expect(endTime).toHaveValue('20:50:00')
 })

package/demos/pc/app/time-picker/name.spec.ts

@@ -4,8 +4,6 @@ test('原生属性name', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#name')
 
-  const preview = page.locator('#preview')
-  const timePicker = preview.locator('.tiny-date-editor > input')
-
+  const timePicker = page.getByRole('textbox', { name: '18:40:00' })
   await expect(timePicker).toHaveAttribute('name', 'name')
 })

package/demos/pc/app/time-picker/placeholder.spec.ts

@@ -3,4 +3,8 @@ import { test, expect } from '@playwright/test'
 test('占位符', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('time-picker#placeholder')
+
+  await expect(page.getByRole('textbox', { name: '请选择时间' })).toBeVisible()
+  await expect(page.getByPlaceholder('请选择开始时间')).toBeVisible()
+  await expect(page.getByPlaceholder('请选择结束时间')).toBeVisible()
 })