@opentiny/vue-docs 2.2.7 → 2.2.9

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

@@ -6,7 +6,7 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>配置 <code>name</code> 属性作为每个 collapse-item 的唯一标志符，配置 <code>v-model</code> 设置当前激活的面板。默认情况下可以同时展开多个面板，这个例子默认展开了第一和第三个面板。</p>',
+        'zh-CN': '<p>配置 <code>name</code> 属性作为每个 <code>collapse-item</code> 的唯一标志符，配置 <code>v-model</code> 设置当前激活的面板。默认情况下可以同时展开多个面板，这个例子默认展开了第一和第三个面板。</p>',
         'en-US': '<p>For details, see the following example.<br/>Configure the <code>name</code> attribute as the unique identifier for each collapse-item.</p>'
       },
       'codeFiles': ['basic-usage.vue']
@@ -15,7 +15,7 @@ export default {
       'demoId': 'accordion',
       'name': { 'zh-CN': '手风琴效果', 'en-US': 'Accordion Effect' },
       'desc': {
-        'zh-CN': '<p>配置 <code>accordion</code> 属性为 true 后，折叠面板将展示手风琴效果，一次只允许展开一个面板。</p>',
+        'zh-CN': '<p>配置 <code>accordion</code> 属性为 <code>true</code>  后，折叠面板将展示手风琴效果，一次只允许展开一个面板。</p>',
         'en-US': '<p>After <code>accordion</code> is set to true, the collapsed panel displays the accordion effect. <br/>Configure <code>v-model</code> to set the currently active panel. (In accordion mode, the binding value type must be string. Otherwise, the binding value type is array.) </p>'
       },
       'codeFiles': ['accordion.vue']
@@ -47,15 +47,6 @@ export default {
       },
       'codeFiles': ['icon.vue']
     },
-    {
-      'demoId': 'events',
-      'name': { 'zh-CN': '事件', 'en-US': 'Fold panel change event' },
-      'desc': {
-        'zh-CN': '<p>激活面板的值改变时将触发 <code>change</code> 事件。</p>',
-        'en-US': '<p>When the value of the active panel changes, the <code>change</code> event is triggered. </p>'
-      },
-      'codeFiles': ['events.vue']
-    },
     {
       'demoId': 'before-close',
       'name': { 'zh-CN': '阻止切换', 'en-US': 'Prevent the event of closing the folding panel' },
@@ -73,6 +64,15 @@ export default {
         'en-US': '<p>Embed the form through the default slot of the <code>collapse-item</code> element. </p>'
       },
       'codeFiles': ['nested-content.vue']
+    },
+    {
+      'demoId': 'events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Fold panel change event' },
+      'desc': {
+        'zh-CN': '<p>激活面板的值改变时将触发 <code>change</code> 事件。</p>',
+        'en-US': '<p>When the value of the active panel changes, the <code>change</code> event is triggered. </p>'
+      },
+      'codeFiles': ['events.vue']
     }
   ],
   apis: [

package/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -6,7 +6,7 @@ export default {
       'demoId': 'base',
       'name': { 'zh-CN': '基本使用', 'en-US': 'Basic Use' },
       'desc': {
-        'zh-CN': '通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑。',
+        'zh-CN': '可通过<code>design</code>属性设置自定义不同设计规范的图标和逻辑。',
         'en-US':
           'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
       },
@@ -17,7 +17,7 @@ export default {
       'name': { 'zh-CN': '改变文字方向', 'en-US': 'Change the direction of text' },
       'desc': {
         'zh-CN':
-          '通过<code>:direction="ltr"</code>设置文字对齐方向，<code>ltr</code>为左对齐，<code>rtl</code>为右对齐。',
+          '可通过<code>direction="ltr"</code>属性设置文字对齐方向，<code>ltr</code>为左对齐，<code>rtl</code>为右对齐。',
         'en-US':
           'Set the text alignment direction through<code>: direction="ltr"</code>, where<code>ltr</code>is left aligned and<code>rtl</code>is right aligned.'
       },
@@ -27,7 +27,7 @@ export default {
       'demoId': 'tag',
       'name': { 'zh-CN': '自定义标签', 'en-US': 'Custom tags' },
       'desc': {
-        'zh-CN': '通过<code>tag</code>可以自定义容器标签。',
+        'zh-CN': '可通过<code>tag</code>属性设置自定义容器标签。',
         'en-US': 'Container labels can be customized through<code>tag</code>.'
       },
       'codeFiles': ['tag.vue']

package/demos/pc/app/date-picker/align.spec.ts

@@ -6,29 +6,28 @@ test('[DatePicker] 测试对齐方式', async ({ page }) => {
 
   // 左对齐
   const leftDateInputDom = page.getByRole('textbox').nth(1)
-  const leftDatePanelDom = page.locator('body > div:nth-child(3)')
-  console.log('leftDatePanelDom', leftDatePanelDom)
+  const leftDatePanelDom = page.locator('body > div:nth-child(8)')
 
   const { x: leftDateInputX } = await leftDateInputDom.boundingBox()
   await leftDateInputDom.click()
   const { x: leftDatePanelX } = await leftDatePanelDom.boundingBox()
   expect(leftDateInputX - leftDatePanelX).toBeCloseTo(0)
 
-  // 右对齐
-  const rightDateInputDom = page.getByRole('textbox').nth(2)
-  const rightDatePanelDom = page.locator('body > div:nth-child(4)')
-  const { x: rightDateInputX, width: rightDateInputWidth } = await rightDateInputDom.boundingBox()
-  await rightDateInputDom.click()
-  const { x: rightDatePanelX, width: rightDatePanelWidth } = await rightDatePanelDom.boundingBox()
-  expect(rightDateInputX + rightDateInputWidth - rightDatePanelX - rightDatePanelWidth).toBeCloseTo(0)
-
   // 居中对齐
-  const centerDateInputDom = page.getByRole('textbox').nth(3)
-  const centerDatePanelDom = page.locator('body > div:nth-child(5)')
+  const centerDateInputDom = page.getByRole('textbox').nth(2)
+  const centerDatePanelDom = page.locator('body > div:nth-child(9)')
   const { x: centerDateInputX, width: centerDateInputWidth } = await centerDateInputDom.boundingBox()
   await centerDateInputDom.click()
   const { x: centerDatePanelX, width: centerDatePanelWidth } = await centerDatePanelDom.boundingBox()
   expect(
     centerDateInputX + Math.round(centerDateInputWidth / 2) - centerDatePanelX - Math.round(centerDatePanelWidth / 2)
   ).toBeCloseTo(0)
+
+  // 右对齐
+  const rightDateInputDom = page.getByRole('textbox').nth(3)
+  const rightDatePanelDom = page.locator('body > div:nth-child(10)')
+  const { x: rightDateInputX, width: rightDateInputWidth } = await rightDateInputDom.boundingBox()
+  await rightDateInputDom.click()
+  const { x: rightDatePanelX, width: rightDatePanelWidth } = await rightDatePanelDom.boundingBox()
+  expect(rightDateInputX + rightDateInputWidth - rightDatePanelX - rightDatePanelWidth).toBeCloseTo(0)
 })

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

@@ -3,75 +3,69 @@ import { test, expect } from '@playwright/test'
 test('[DatePicker] 测试日期选择和清除', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#basic-usage')
+
   const dateInput = page.getByRole('textbox', { name: '2023-05-20' })
   const dateInput2 = page.getByRole('textbox', { name: '2023-05-21' })
-  const clearIcon = page.locator('#preview').getByRole('img').nth(1)
 
-  await page.locator('#preview').getByRole('textbox').fill('2023-05-20')
-  await page.locator('#preview').getByRole('textbox').press('Enter')
+  await page.getByPlaceholder('请选择日期').nth(1).fill('2023-05-20')
+  await page.getByPlaceholder('请选择日期').nth(1).press('Enter')
   await expect(dateInput).toBeVisible()
 
   // 测试日期选择
   await dateInput.click()
-  await page.getByText('21', { exact: true }).click()
+  await page.getByRole('cell', { name: '21' }).getByText('21').click()
   await expect(dateInput2).toBeVisible()
-
-  // 测试日期清除
-  await dateInput2.hover()
-  await expect(clearIcon).toBeVisible()
-  await clearIcon.click()
-  await expect(dateInput2).not.toBeVisible()
 })
 
 test('[DatePicker] 测试上一月/下一月/前一年/后一年', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#basic-usage')
+
   const dateInputNextMonth = page.getByRole('textbox', { name: '2023-06-04' })
-  const dateInputNextYear = page.getByRole('textbox', { name: '2024-06-01' })
+  const dateInputNextYear = page.getByRole('textbox', { name: '2024-06-10' })
   const dateInputPreMonth = page.getByRole('textbox', { name: '2023-05-14' })
   const dateInputPreYear = page.getByRole('textbox', { name: '2023-06-11' })
 
   // 先输入一个日期，确保后续选中的月份、年份正确
-  await page.locator('#preview').getByRole('textbox').click()
-  await page.locator('#preview').getByRole('textbox').fill('2023-05-20')
-  await page.locator('#preview').getByRole('textbox').press('Enter')
+  await page.getByPlaceholder('请选择日期').nth(1).fill('2023-05-20')
+  await page.getByPlaceholder('请选择日期').nth(1).press('Enter')
 
   // 下一月/后一年
-  await page.locator('#preview').getByRole('textbox').click()
+  await page.getByRole('textbox', { name: '2023-05-20' }).click()
   await page.getByRole('button', { name: '下个月' }).click()
   await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
   await expect(dateInputNextMonth).toBeVisible()
 
   await dateInputNextMonth.click()
   await page.getByRole('button', { name: '后一年' }).click()
-  await page.getByRole('row', { name: '26 27 28 29 30 31 1' }).getByText('1', { exact: true }).click()
+  await page.getByRole('cell', { name: '10' }).getByText('10').click()
   await expect(dateInputNextYear).toBeVisible()
 
   // 前一年/上一月
   await dateInputNextYear.click()
   await page.getByRole('button', { name: '前一年' }).click()
-  await page.getByText('11', { exact: true }).click()
+  await page.getByRole('cell', { name: '11' }).getByText('11').click()
   await expect(dateInputPreYear).toBeVisible()
 
   await dateInputPreYear.click()
   await page.getByRole('button', { name: '上个月' }).click()
-  await page.getByText('14').click()
+  await page.getByRole('cell', { name: '14' }).getByText('14').click()
   await expect(dateInputPreMonth).toBeVisible()
 })
 
 test('[DatePicker] 测试月份/年份选择', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#basic-usage')
+
   const dateInputMonth = page.getByRole('textbox', { name: '2023-06-04' })
   const dateInputYear = page.getByRole('textbox', { name: '2024-02-07' })
 
   // 先输入一个日期，确保后续选中的月份、年份正确
-  await page.locator('#preview').getByRole('textbox').click()
-  await page.locator('#preview').getByRole('textbox').fill('2023-04-20')
-  await page.locator('#preview').getByRole('textbox').press('Enter')
+  await page.getByPlaceholder('请选择日期').nth(1).fill('2023-04-20')
+  await page.getByPlaceholder('请选择日期').nth(1).press('Enter')
 
   // 选择月份
-  await page.locator('#preview').getByRole('textbox').click()
+  await page.getByRole('textbox', { name: '2023-04-20' }).click()
   await page.getByRole('button', { name: '4 月' }).click()
   await page.getByText('六月').click()
   await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
@@ -80,7 +74,7 @@ test('[DatePicker] 测试月份/年份选择', async ({ page }) => {
   // 选择年份
   await dateInputMonth.click()
   await page.getByRole('button', { name: '2023 年' }).click()
-  await page.getByText('2024').click()
+  await page.getByRole('cell', { name: '2024' }).getByText('2024').click()
   await page.getByText('二月', { exact: true }).click()
   await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('7').click()
   await expect(dateInputYear).toBeVisible()

package/demos/pc/app/date-picker/clear.spec.ts

@@ -3,9 +3,28 @@ import { test, expect } from '@playwright/test'
 test('[DatePicker] 测试清除输入', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#clear')
-  const dateInputHasText = page.getByRole('textbox', { name: '2023-05-24' })
-  await expect(dateInputHasText).toBeVisible()
-  await dateInputHasText.hover()
-  await page.locator('div:nth-child(2) > .tiny-date-editor .tiny-input__icon-container > svg').first().click()
-  await expect(dateInputHasText).not.toBeVisible()
+
+  const datePickerDefaultClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).first()
+  const datePickerHideClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).nth(1)
+  const datePickerCustomClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).nth(2)
+  const clearIcon = page.locator('.tiny-date-editor .tiny-input__icon-container .baseClearicon')
+
+  // 默认显示清除按钮
+  await datePickerDefaultClearIcon.hover()
+  await expect(clearIcon).toBeVisible()
+  await expect(clearIcon.locator('path')).toHaveAttribute('d', 'M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm4.8-8.4L13.2 12l3.6-3.6c.3-.3.3-.9 0-1.2-.3-.3-.9-.3-1.2 0L12 10.8 8.4 7.2c-.3-.3-.9-.3-1.2 0s-.3.9 0 1.2l3.6 3.6-3.6 3.6c-.3.3-.3.9 0 1.2.2.1.4.2.6.2s.4-.1.6-.2l3.6-3.6 3.6 3.6c.2.2.4.2.6.2.2 0 .4-.1.6-.2.3-.4.3-.9 0-1.2z')
+
+  // 隐藏清除按钮
+  await datePickerHideClearIcon.hover()
+  await expect(clearIcon).not.toBeVisible()
+
+  // 自定义清除图标
+  await datePickerCustomClearIcon.hover()
+  await expect(clearIcon).toBeVisible()
+  await expect(clearIcon.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 expect(datePickerCustomClearIcon).toHaveValue('2023-05-24')
+  await page.locator('.tiny-input__icon-container > svg > .st0').click()
+  await expect(datePickerCustomClearIcon).not.toBeVisible()
 })

package/demos/pc/app/date-picker/date-range.spec.ts

@@ -3,16 +3,68 @@ import { test, expect } from '@playwright/test'
 test('测试日期范围选择', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#date-range')
-  const startDateDom = page.getByRole('textbox').nth(1)
-  const endDateDom = page.getByRole('textbox').nth(2)
 
-  await startDateDom.click()
-  await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('14').click()
-  await page.getByRole('row', { name: '14 15 16 17 18 19 20' }).getByText('20').click()
-  expect(await startDateDom.inputValue()).toBe('2023-05-14')
-  expect(await endDateDom.inputValue()).toBe('2023-05-20')
-  await startDateDom.hover()
-  await page.locator('#preview').getByRole('img').nth(1).click()
-  expect(await startDateDom.inputValue()).not.toBe('2023-05-14')
-  expect(await endDateDom.inputValue()).not.toBe('2023-05-20')
+  // 日期范围
+  // TINY-TODO: 日期范围和日期时间范围无法成功在输入框中输入日期
+  const startDate = page.getByPlaceholder('开始日期').first()
+  const endDate = page.getByPlaceholder('结束日期').first()
+  await startDate.click()
+  await startDate.fill('2023-05-20')
+  await startDate.press('Tab')
+  await endDate.fill('2023-06-20')
+  await startDate.click()
+  await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
+  await page.getByRole('row', { name: '9 10 11 12 13 14 15' }).getByText('10').click()
+  await expect(startDate).toHaveValue('2023-06-04')
+  await expect(endDate).toHaveValue('2023-07-10')
+
+  // 日期时间范围
+  const startDateTime = page.getByPlaceholder('开始日期').nth(1)
+  const endDateTime = page.getByPlaceholder('结束日期').nth(1)
+  await startDateTime.click()
+  await startDateTime.fill('2023-05-20 08:00:00')
+  await startDateTime.press('Tab')
+  await endDateTime.fill('2023-06-20 18:00:00')
+  await startDateTime.click()
+  await startDateTime.press('Enter')
+  await startDateTime.click()
+  await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
+  await page.getByRole('row', { name: '9 10 11 12 13 14 15' }).getByText('10').click()
+  await page.getByRole('textbox', { name: '开始时间' }).click()
+  await page.locator('li:nth-child(2) > span').first().click()
+  await page.getByRole('button', { name: '确定' }).first().click()
+  await page.getByRole('textbox', { name: '结束时间' }).click()
+  await page.locator('span:nth-child(3) > span:nth-child(2) > .tiny-time-panel > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3) > span').first().click()
+  await page.getByRole('button', { name: '确定' }).first().click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(startDateTime).toHaveValue('2023-06-04 01:00:00')
+  await expect(endDateTime).toHaveValue('2023-07-10 02:00:00')
+
+  // 月份范围
+  const startMonth = page.getByPlaceholder('开始月份')
+  const endMonth = page.getByPlaceholder('结束月份')
+  await startMonth.click()
+  await startMonth.fill('2023-05')
+  await startMonth.press('Tab')
+  await endMonth.fill('2023-06')
+  await endMonth.press('Enter')
+  await startMonth.click()
+  await page.getByText('一月').first().click()
+  await page.getByText('十二月').first().click()
+  await expect(startMonth).toHaveValue('2023-01')
+  await expect(endMonth).toHaveValue('2023-12')
+
+  // 年份范围
+  const startYear = page.getByPlaceholder('开始年份')
+  const endYear = page.getByPlaceholder('结束年份')
+  await startYear.click()
+  await startYear.fill('2022')
+  await startYear.press('Tab')
+  await endYear.fill('2023')
+  await endYear.press('Enter')
+  await endYear.click()
+  await page.getByRole('cell', { name: '2020' }).getByText('2020').click()
+  await page.getByRole('cell', { name: '2023' }).getByText('2023').click()
+  await expect(startYear).toHaveValue('2020')
+  await expect(endYear).toHaveValue('2023')
 })

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

@@ -3,9 +3,24 @@ import { test, expect } from '@playwright/test'
 test('[DatePicker] 测试选择器打开时默认时间设置', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#default-value')
-  const dateInput = page.getByRole('textbox', { name: '2000-11-11' })
 
-  await page.getByRole('textbox', { name: '2000-11-10' }).click()
-  await page.getByText('11', { exact: true }).click()
-  await expect(dateInput).toBeVisible()
+  // default-value: 打开日期面板，默认显示的日期
+  await page.getByRole('textbox').nth(1).click()
+  await expect(page.getByRole('button', { name: '2000 年' })).toBeVisible()
+  await expect(page.getByRole('button', { name: '11 月' })).toBeVisible()
+
+  // default-time: 日期时间(范围)，选择日期之后默认显示的时间(范围)
+  const dateInputDefaultTime = page.getByRole('textbox').nth(2)
+  await dateInputDefaultTime.fill('2023-05-20 09:00:00')
+  await dateInputDefaultTime.press('Enter')
+
+  await page.getByRole('textbox', { name: '2023-05-20 09:00:00' }).click()
+  await page.getByRole('cell', { name: '15' }).getByText('15').click()
+  await expect(page.getByRole('textbox', { name: '选择时间' })).toHaveValue('09:00:00')
+
+  await page.getByRole('textbox').nth(3).click()
+  await page.getByRole('cell', { name: '10' }).getByText('10').first().click()
+  await page.getByRole('cell', { name: '10' }).getByText('10').nth(1).click()
+  await expect(page.getByRole('textbox', { name: '开始时间' })).toHaveValue('09:00:00')
+  await expect(page.getByRole('textbox', { name: '结束时间' })).toHaveValue('18:00:00')
 })

package/demos/pc/app/date-picker/events.spec.ts

@@ -4,20 +4,34 @@ test('[DatePicker] 测试事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#events')
 
+  // focus 事件
+  await page.locator('input[type="text"]').nth(1).click()
+  const focusEventMessageDom = page.locator('div').filter({ hasText: '触发 focus 事件' }).nth(1)
+  await expect(focusEventMessageDom).toBeVisible()
+
   // blur 事件
-  await page.getByRole('textbox').nth(1).click()
-  await page.getByText('blur：').click()
-  const blurEventMessageDom = page.locator('div').filter({ hasText: '可获取组件实例' }).nth(1)
+  const dateInputBlur = page.locator('input[type="text"]').nth(2)
+  await dateInputBlur.fill('2023-05-20')
+  await dateInputBlur.press('Enter')
+
+  await page.getByRole('textbox', { name: '2023-05-20' }).click()
+  await page.getByRole('cell', { name: '15' }).getByText('15').click()
+  const blurEventMessageDom = page.locator('div').filter({ hasText: '触发 blur 事件' }).nth(1)
   await expect(blurEventMessageDom).toBeVisible()
 
   // change 事件
-  await page.getByRole('textbox').nth(2).click()
-  await page.getByRole('cell', { name: '20' }).getByText('20').last().click()
-  const changeEventMessageDom = page.locator('div').filter({ hasText: '组件绑定值' }).nth(1)
+  const dateInputChange = page.locator('input[type="text"]').nth(3)
+  await dateInputChange.fill('2023-05-20')
+  await dateInputChange.press('Enter')
+
+  await page.getByRole('textbox', { name: '2023-05-20' }).click()
+  await page.getByRole('cell', { name: '15' }).getByText('15').click()
+  const changeEventMessageDom = page.locator('div').filter({ hasText: '触发 change 事件，组件绑定值为：' }).nth(1)
   await expect(changeEventMessageDom).toBeVisible()
 
-  // focus 事件
-  await page.getByRole('textbox').nth(3).click()
-  const focusEventMessageDom = page.locator('div').filter({ hasText: '回调参数为组件实例' }).nth(1)
-  await expect(focusEventMessageDom).toBeVisible()
+  // onPick 事件
+  await page.locator('#events').getByRole('textbox').nth(3).click()
+  await page.getByRole('cell', { name: '10' }).getByText('10').first().click()
+  const onPickEventMessageDom = page.locator('div').filter({ hasText: '触发 onPick 事件，开始日期为：' }).nth(1)
+  await expect(onPickEventMessageDom).toBeVisible()
 })

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

@@ -3,19 +3,20 @@ import { test, expect } from '@playwright/test'
 test('[DatePicker] 测试日期格式化', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#format')
-  const dateInputDefault = page.getByRole('textbox', { name: '2023 年 05 月 20 日' })
-  const dateInputTimestamp = page.getByRole('textbox', { name: '2020 年 5 月 20 日 0 时 0 分钟 0 秒 AM' })
-  const dateInputString = page.getByRole('textbox', { name: '2020 年 05 月 20 日' })
 
-  await page.getByRole('textbox', { name: '2023 年 05 月 24 日' }).click()
+  // format: 日期输入框中显示的格式
+  await page.getByRole('textbox', { name: '2023 年 05 月 24 日' }).first().click()
   await page.getByRole('cell', { name: '20' }).getByText('20').click()
-  await expect(dateInputDefault).toBeVisible()
+  await expect(page.getByRole('textbox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()
 
-  await page.getByRole('textbox', { name: '2020 年 5 月 22 日 0 时 0 分钟 0 秒 AM' }).click()
-  await page.getByRole('cell', { name: '20' }).getByText('20').nth(1).click()
-  await expect(dateInputTimestamp).toBeVisible()
+  // time-format: 时间输入框中显示的格式
+  await page.getByRole('textbox', { name: '2023 年 05 月 20 日 00 时 00 分 00 秒' }).click()
+  await page.getByRole('row', { name: '21 22 23 24 25 26 27' }).getByText('24').click()
+  await page.getByRole('button', { name: '确定' }).click()
+  await expect(page.getByRole('textbox', { name: '2023 年 05 月 24 日 00 时 00 分 00 秒' })).toBeVisible()
 
-  await page.getByRole('textbox', { name: '2020 年 05 月 22 日' }).click()
-  await page.getByRole('cell', { name: '20' }).getByText('20').nth(1).click()
-  await expect(dateInputString).toBeVisible()
+  // value-format: 选中值的格式
+  await page.locator('.tiny-date-editor input').nth(2).click()
+  await page.getByRole('cell', { name: '20' }).getByText('20').click()
+  await expect(page.locator('.select-date')).toHaveText(`当前选中时间：${1589904000000}`)
 })

package/demos/pc/app/date-picker/shortcuts.spec.ts

@@ -3,14 +3,15 @@ import { test, expect } from '@playwright/test'
 test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('date-picker#shortcuts')
-  const datePickerDom = page.locator('body > .tiny-date-picker')
-  // 选择今天/昨天/一周前
-  await page.locator('#preview').getByRole('textbox').click()
+
+  // 日期选择：今天/昨天/一周前
+  const datePickerDom = page.getByRole('textbox', { name: '请选择日期' })
+  await datePickerDom.click()
   await expect(datePickerDom).toBeVisible()
   await page.getByRole('button', { name: '今天' }).click()
-  await page.locator('.tiny-date-editor input').click()
+  await page.locator('.tiny-date-editor input').first().click()
   await page.getByRole('button', { name: '昨天' }).click()
-  await page.locator('.tiny-date-editor input').click()
+  await page.locator('.tiny-date-editor input').first().click()
   await page.getByRole('button', { name: '一周前' }).click()
   await expect(datePickerDom).not.toBeVisible()
 })

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility">弹出Dialog</tiny-button>
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

package/demos/pc/app/dialog-box/basic-usage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility">弹出Dialog</tiny-button>
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box内容</span>
       <template #footer>

package/demos/pc/app/dialog-box/center-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/center.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/close-on-click-modal.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/close-on-press-escape.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <tiny-alert description="内容是Alert组件"></tiny-alert>

package/demos/pc/app/dialog-box/custom-dialog-content.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <tiny-alert description="内容是Alert组件"></tiny-alert>

package/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
       <span>dialog-box内容</span>

package/demos/pc/app/dialog-box/custom-dialog-footer.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
-        <div style="width: 100%; height: 100%; background: #dddddd">自定义footer区域</div>
+        <div style="width: 100%; height: 100%; background: #dddddd">自定义 footer 区域</div>
       </template>
     </tiny-dialog-box>
   </div>

package/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true" :title="'弹出Dialog' + boxVisibility"
-      >弹出Dialog{{ boxVisibility }}</tiny-button
+    <tiny-button @click="boxVisibility = true" :title="'弹出 Dialog' + boxVisibility"
+      >弹出 Dialog{{ boxVisibility }}</tiny-button
     >
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>