From 6a0858d3f87c1765006a002237f38211d2c949ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=A4=A9=E4=BD=91?=
 <66231260+You-Hw-Y@users.noreply.github.com>
Date: Mon, 15 Jan 2024 00:47:12 -0800
Subject: [PATCH] docs(time-picker): [time-picker] optimize docs and demos
 (#1273)

* fix(switch): [switch] amend demo and api bug of switch

* feat(switch): [switch] amend demo and API bug of switch

* feat(switch): [switch] amend demo and API bug of switch

* docs(time-picker): [time-picker] optimize docs and demos

* docs(time-picker): [time-picker] optimize docs and demos
---
 examples/sites/demos/pc/app/time-picker/event.vue     |  6 +++---
 .../demos/pc/app/time-picker/webdoc/time-picker.js    | 11 +++++------
 packages/renderless/src/picker/index.ts               |  8 +++++---
 packages/theme/src/index.less                         |  2 +-
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/examples/sites/demos/pc/app/time-picker/event.vue b/examples/sites/demos/pc/app/time-picker/event.vue
index 6684f6e98..76b1d5910 100644
--- a/examples/sites/demos/pc/app/time-picker/event.vue
+++ b/examples/sites/demos/pc/app/time-picker/event.vue
@@ -29,13 +29,13 @@ export default {
       this.$refs.timePickerRef.$el.querySelector('input').focus()
     },
     blur() {
-      Modal.message('blur事件')
+      Modal.message({ message: 'blur事件', status: 'info' })
     },
     change() {
-      Modal.message('change事件')
+      Modal.message({ message: 'change事件', status: 'info' })
     },
     focus() {
-      Modal.message('focus事件')
+      Modal.message({ message: 'focus事件', status: 'info' })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
index c092fdf5a..e0c47d68a 100644
--- a/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
+++ b/examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js
@@ -59,7 +59,7 @@ export default {
       'name': { 'zh-CN': '步长', 'en-US': 'Step' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-60</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>',
+          '<p>通过 <code>step</code> 设置步长，默认值为 <code>{ hour: 1, minute: 1, second: 1 }</code>，其中 <code>hour</code> 的设置范围是 <code>0-23</code>，<code>minute</code>、<code>second</code> 的设置范围是 <code>0-59</code>。可单独设置其中的一项或多项值，未设置的默认值为 <code>1</code>。</p>',
         'en-US':
           '<p>Set the step size through <code> step </code>. The default value is <code> {hour: 1, minute: 1, second: 1} </code>, where the setting range of <code> hour </code> is <code> 0-23 </code>, <code> minute </code>, <code> second </code> is <code> 0-60 </code>. One or more of these values can be set separately, and the unset default value is <code> 1 </code>.</p>'
       },
@@ -161,7 +161,7 @@ export default {
             'zh-CN': '是否使用箭头进行时间选择',
             'en-US': 'Whether to use arrows for time selection'
           },
-          'demoId': 'arrow-control'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'clearable',
@@ -175,14 +175,14 @@ export default {
         },
         {
           'name': 'clear-icon',
-          'type': 'object',
+          'type': 'Component',
           'defaultValue': 'IconOperationfaild',
           'desc': {
             'zh-CN': '自定义清空图标',
             'en-US':
               'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false'
           },
-          'demoId': 'clear-icon'
+          'demoId': 'clearable'
         },
         {
           'name': 'default-value',
@@ -261,8 +261,7 @@ export default {
           'typeAnchorName': 'IPickerOptions',
           'defaultValue': '--',
           'desc': {
-            'zh-CN':
-              '配置可选的时间范围、下拉框中显示的格式，包含 selectableRange / format 属性，详细用法可参考 IPickerOptions 类型声明',
+            'zh-CN': '配置可选的时间范围、下拉框中显示的格式',
             'en-US': ''
           },
           'demoId': 'disabled'
diff --git a/packages/renderless/src/picker/index.ts b/packages/renderless/src/picker/index.ts
index 6e324e917..432bb8e30 100644
--- a/packages/renderless/src/picker/index.ts
+++ b/packages/renderless/src/picker/index.ts
@@ -731,9 +731,11 @@ export const showPicker =
     state.pickerVisible = state.picker.state.visible = true
     state.picker.state.value = state.parsedValue
     state.picker.resetView && state.picker.resetView()
-
-    updatePopper(state.picker.$el)
-    state.picker.adjustSpinners && state.picker.adjustSpinners()
+    // 使用nextTick方法解决time-picker组件的demo"下拉框类名"点击input，时间选择框弹出位置错误的问题，
+    nextTick(() => {
+      updatePopper(state.picker.$el)
+      state.picker.adjustSpinners && state.picker.adjustSpinners()
+    })
   }
 
 export const handlePick =
diff --git a/packages/theme/src/index.less b/packages/theme/src/index.less
index 87a159c73..ea8e390d9 100644
--- a/packages/theme/src/index.less
+++ b/packages/theme/src/index.less
@@ -125,6 +125,7 @@
 @import './rich-text-editor/index.less';
 @import './roles/index.less';
 @import './row/index.less';
+@import './time-spinner/index.less';
 @import './scroll-text/index.less';
 @import './scrollbar/index.less';
 @import './search/index.less';
@@ -151,7 +152,6 @@
 @import './time-picker/index.less';
 @import './time-range/index.less';
 @import './time-select/index.less';
-@import './time-spinner/index.less';
 @import './tip/index.less';
 @import './toggle-menu/index.less';
 @import './tooltip/index.less';