From b8f097cbce7863f638b1a9dc16bb0448fb00a216 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Thu, 24 Oct 2024 02:32:48 -0700
Subject: [PATCH 01/10] feat(date-picker): [date-picker]Optimize case display
 and fix style issues

---
 .../demos/pc/app/date-picker/align-composition-api.vue     | 2 +-
 examples/sites/demos/pc/app/date-picker/align.vue          | 2 +-
 .../pc/app/date-picker/date-range-composition-api.vue      | 1 +
 examples/sites/demos/pc/app/date-picker/date-range.vue     | 1 +
 .../demos/pc/app/date-picker/events-composition-api.vue    | 2 +-
 examples/sites/demos/pc/app/date-picker/events.vue         | 2 +-
 .../sites/demos/pc/app/date-picker/now-composition-api.vue | 7 +++++--
 examples/sites/demos/pc/app/date-picker/now.vue            | 7 +++++--
 .../demos/pc/app/date-picker/timezone-composition-api.vue  | 6 ++++++
 packages/theme/src/date-table/index.less                   | 4 +++-
 10 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
index 391a97e588..76b3ee515e 100644
--- a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
@@ -31,6 +31,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 350px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/align.vue b/examples/sites/demos/pc/app/date-picker/align.vue
index c7d0095ed0..b031f52c2d 100644
--- a/examples/sites/demos/pc/app/date-picker/align.vue
+++ b/examples/sites/demos/pc/app/date-picker/align.vue
@@ -39,6 +39,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 350px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue b/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
index 17f2dcbf86..d3fe5b7fe4 100644
--- a/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue
@@ -39,6 +39,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/date-range.vue b/examples/sites/demos/pc/app/date-picker/date-range.vue
index 549bd05593..2bd3dc075c 100644
--- a/examples/sites/demos/pc/app/date-picker/date-range.vue
+++ b/examples/sites/demos/pc/app/date-picker/date-range.vue
@@ -47,6 +47,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
index 59670e5873..341b905d1f 100644
--- a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
@@ -15,7 +15,7 @@
       </tiny-col>
     </tiny-row>
     <tiny-row>
-      <tiny-col :span="12">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
       </tiny-col>
diff --git a/examples/sites/demos/pc/app/date-picker/events.vue b/examples/sites/demos/pc/app/date-picker/events.vue
index 68932d435e..b009573cb5 100644
--- a/examples/sites/demos/pc/app/date-picker/events.vue
+++ b/examples/sites/demos/pc/app/date-picker/events.vue
@@ -15,7 +15,7 @@
       </tiny-col>
     </tiny-row>
     <tiny-row>
-      <tiny-col :span="12">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
       </tiny-col>
diff --git a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
index 155489b621..50c971cdfe 100644
--- a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">插槽式：</div>
       <tiny-date-picker v-model="value1" type="datetime">
         <template #now>
@@ -9,7 +9,7 @@
       </tiny-date-picker>
     </div>
 
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">函数式：</div>
       <tiny-date-picker v-model="value2" type="datetime" :now-click="nowClick"> </tiny-date-picker>
     </div>
@@ -37,6 +37,9 @@ const now = () => {
 </script>
 
 <style scoped>
+.demo-date-picker {
+  width: 280px;
+}
 .nowclass {
   display: inline-flex;
   height: 28px;
diff --git a/examples/sites/demos/pc/app/date-picker/now.vue b/examples/sites/demos/pc/app/date-picker/now.vue
index 04c9c9571e..3a7297a462 100644
--- a/examples/sites/demos/pc/app/date-picker/now.vue
+++ b/examples/sites/demos/pc/app/date-picker/now.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">插槽式：</div>
       <tiny-date-picker v-model="value1" type="datetime">
         <template #now>
@@ -9,7 +9,7 @@
       </tiny-date-picker>
     </div>
 
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">函数式：</div>
       <tiny-date-picker v-model="value2" type="datetime" :now-click="nowClick"> </tiny-date-picker>
     </div>
@@ -45,6 +45,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-date-picker {
+  width: 280px;
+}
 .nowclass {
   display: inline-flex;
   height: 28px;
diff --git a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
index 7cfc7d3fa3..90aae215fd 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
@@ -42,3 +42,9 @@ function selectChange(tz) {
   Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-date-picker-wrap {
+  width: 280px;
+}
+</style>
diff --git a/packages/theme/src/date-table/index.less b/packages/theme/src/date-table/index.less
index 73163b53ec..7d28832a7b 100644
--- a/packages/theme/src/date-table/index.less
+++ b/packages/theme/src/date-table/index.less
@@ -228,7 +228,6 @@
       div {
         margin-left: 4px;
         margin-right: 4px;
-        background-color: var(--tv-DateTable-td-bg-color-range-selected);
       }
 
       span {
@@ -242,6 +241,9 @@
         background-color: var(--tv-DateTable-bg-color-current-select);
       }
     }
+    &.selected.in-range {
+      background-color: var(--tv-DateTable-td-bg-color-range-selected);
+    }
 
     &.week {
       font-size: 80%;

From f78f240a43d98435a3efc0f1f9fd0b065505079e Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Thu, 24 Oct 2024 02:47:08 -0700
Subject: [PATCH 02/10] feat(date-picker): [date-picker]Optimize case display
 and fix style issues

---
 packages/theme/src/date-table/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/theme/src/date-table/index.less b/packages/theme/src/date-table/index.less
index 7d28832a7b..d5e4ac1f3e 100644
--- a/packages/theme/src/date-table/index.less
+++ b/packages/theme/src/date-table/index.less
@@ -241,7 +241,7 @@
         background-color: var(--tv-DateTable-bg-color-current-select);
       }
     }
-    &.selected.in-range {
+    &.selected.in-range div{
       background-color: var(--tv-DateTable-td-bg-color-range-selected);
     }
 

From b8b608e9b95130d64739ef10d20884f5ec27c775 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Thu, 24 Oct 2024 20:23:11 -0700
Subject: [PATCH 03/10] feat(date-picker): [date-picker] Fix style issues

---
 packages/theme/src/month-table/index.less | 3 ++-
 packages/theme/src/month-table/vars.less  | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/theme/src/month-table/index.less b/packages/theme/src/month-table/index.less
index e5ac40a79b..4f14427016 100644
--- a/packages/theme/src/month-table/index.less
+++ b/packages/theme/src/month-table/index.less
@@ -64,10 +64,11 @@
       .cell {
         background-color: var(--tv-MonthTable-bg-color-disabled);
         cursor: not-allowed;
-        color: var(--tv-MonthTable-bg-color-disabled);
+        color: var(--tv-MonthTable-cell-color-disabled);
 
         &:hover {
           cursor: not-allowed;
+          background-color: var(--tv-MonthTable-bg-color-disabled);
         }
       }
     }
diff --git a/packages/theme/src/month-table/vars.less b/packages/theme/src/month-table/vars.less
index 8c8438d1a2..dfd0d339ae 100644
--- a/packages/theme/src/month-table/vars.less
+++ b/packages/theme/src/month-table/vars.less
@@ -42,6 +42,8 @@
 
   // 背景色（禁用）
   --tv-MonthTable-bg-color-disabled: var(--tv-color-bg-disabled, #f0f0f0);
+  // 文字色（禁用）
+  --tv-MonthTable-cell-color-disabled: var(--tv-color-text-disabled, #c2c2c2);
   // 背景色（悬浮）
   --tv-MonthTable-bg-color-hover: var(--tv-color-bg-hover-1, #deecff);
   // 背景色(高亮） 开始/结束如期高亮

From 14ff6f6d333d8f5123ae671efb7c003f69772cc9 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Fri, 25 Oct 2024 03:00:00 -0700
Subject: [PATCH 04/10] feat(date-picker): [date-picker] Modify console for a
 large number of alarms

---
 packages/renderless/src/date-panel/vue.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/renderless/src/date-panel/vue.ts b/packages/renderless/src/date-panel/vue.ts
index fc0340f72c..8ef37833af 100644
--- a/packages/renderless/src/date-panel/vue.ts
+++ b/packages/renderless/src/date-panel/vue.ts
@@ -135,7 +135,7 @@ const initState = ({ reactive, computed, api, i18n, designConfig }) => {
     isShowTz: computed(() => state.showTimezone && state.showTime),
     isShowFooter: computed(() => state.footerVisible && [DATEPICKER.Date, DATEPICKER.Year].includes(state.currentView)),
     buttonType: designConfig?.state?.buttonType || 'default',
-    buttonSize: designConfig?.state?.buttonSize || 'default'
+    buttonSize: designConfig?.state?.buttonSize || ''
   })
 
   state.needChangeTimezoneData = true // 控制重新渲染时区列表

From 16d1b48aa435cd99feedbabbc8b8cfab60ba9528 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Sun, 27 Oct 2024 20:34:39 -0700
Subject: [PATCH 05/10] feat(button): [button] Optimize demo style for feature
 display

---
 .../sites/demos/pc/app/date-picker/align-composition-api.vue    | 2 +-
 examples/sites/demos/pc/app/date-picker/align.vue               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
index 76b3ee515e..2cec3c8af5 100644
--- a/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/align-composition-api.vue
@@ -31,6 +31,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/align.vue b/examples/sites/demos/pc/app/date-picker/align.vue
index b031f52c2d..72f1c98d1e 100644
--- a/examples/sites/demos/pc/app/date-picker/align.vue
+++ b/examples/sites/demos/pc/app/date-picker/align.vue
@@ -39,6 +39,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>

From ad7ca1d680d2a7766078f41a377d31a3f652d33a Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Sun, 27 Oct 2024 23:44:05 -0700
Subject: [PATCH 06/10] feat(date-picker): [date-picker] Optimize demo style

---
 .../pc/app/date-picker/custom-suffix-icon-composition-api.vue   | 2 +-
 examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
index 8d27563881..79ae7d8110 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
@@ -19,6 +19,6 @@ const IconMinus = iconMinus()
 }
 
 .my-date-picker {
-  background: #ddd;
+  background: #f0f0f0;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
index f222428905..3e66b38905 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
@@ -27,6 +27,6 @@ export default {
 }
 
 .my-date-picker {
-  background-color: #ddd;
+  background-color: #f0f0f0;
 }
 </style>

From 1afb3ce24da1199cc33f9a4749d3e1f3def5ebae Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 28 Oct 2024 07:13:45 -0700
Subject: [PATCH 07/10] feat(time-picker): [time-picker] Optimize and modify
 component style issues

---
 .../basic-usage-composition-api.vue           |  2 +-
 .../demos/pc/app/date-picker/basic-usage.vue  |  2 +-
 .../app/date-picker/clear-composition-api.vue |  2 +-
 .../sites/demos/pc/app/date-picker/clear.vue  |  2 +-
 .../custom-suffix-icon-composition-api.vue    |  2 +-
 .../pc/app/date-picker/custom-suffix-icon.vue |  2 +-
 .../custom-weeks-composition-api.vue          |  2 +-
 .../demos/pc/app/date-picker/custom-weeks.vue |  2 +-
 .../default-value-composition-api.vue         |  7 +-----
 .../pc/app/date-picker/default-value.vue      |  7 +-----
 .../date-picker/disabled-composition-api.vue  |  7 +-----
 .../demos/pc/app/date-picker/disabled.vue     |  7 +-----
 .../date-picker/events-composition-api.vue    | 13 ++++++-----
 .../sites/demos/pc/app/date-picker/events.vue | 13 ++++++-----
 .../filter-mode-composition-api.vue           |  2 +-
 .../demos/pc/app/date-picker/filter-mode.vue  |  2 +-
 .../date-picker/format-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/date-picker/format.vue |  2 +-
 .../label-inside-composition-api.vue          |  9 +-------
 .../demos/pc/app/date-picker/label-inside.vue |  9 +-------
 .../multiple-dates-composition-api.vue        |  2 +-
 .../pc/app/date-picker/multiple-dates.vue     |  2 +-
 .../app/date-picker/now-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/date-picker/now.vue    |  2 +-
 .../app/date-picker/size-composition-api.vue  |  7 +-----
 .../sites/demos/pc/app/date-picker/size.vue   |  7 +-----
 .../app/date-picker/step-composition-api.vue  |  2 +-
 .../sites/demos/pc/app/date-picker/step.vue   |  2 +-
 .../date-picker/timezone-composition-api.vue  |  2 +-
 .../demos/pc/app/date-picker/timezone.vue     |  2 +-
 .../unlink-panels-composition-api.vue         |  2 +-
 .../pc/app/date-picker/unlink-panels.vue      |  2 +-
 .../validate-event-composition-api.vue        |  2 +-
 .../pc/app/date-picker/validate-event.vue     |  2 +-
 .../basic-usage-composition-api.vue           |  2 +-
 .../pc/app/time-picker/basic-usage.spec.ts    |  8 +++----
 .../demos/pc/app/time-picker/basic-usage.vue  |  2 +-
 .../demos/pc/app/time-picker/format.spec.ts   |  2 +-
 .../time-picker/is-range-composition-api.vue  |  2 +-
 .../demos/pc/app/time-picker/is-range.vue     |  2 +-
 .../pc/app/time-picker/webdoc/time-picker.js  |  4 ++--
 packages/theme/src/picker/index.less          | 22 ++++++++-----------
 packages/theme/src/time-panel/index.less      |  5 +----
 packages/theme/src/time-panel/vars.less       |  2 +-
 packages/theme/src/time-spinner/index.less    | 10 ++++++++-
 packages/vue/src/picker/src/pc.vue            |  4 ++--
 packages/vue/src/time/src/pc.vue              |  5 -----
 47 files changed, 79 insertions(+), 125 deletions(-)

diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
index 94afbfa07e..0bbf51d678 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue
@@ -23,7 +23,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/basic-usage.vue b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
index c8c4faa39c..9c92db48ed 100644
--- a/examples/sites/demos/pc/app/date-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage.vue
@@ -31,7 +31,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
index 8ae172fc75..31affe857b 100644
--- a/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear-composition-api.vue
@@ -31,6 +31,6 @@ const IconClose = iconClose()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/clear.vue b/examples/sites/demos/pc/app/date-picker/clear.vue
index 29236fde9a..a13639283a 100644
--- a/examples/sites/demos/pc/app/date-picker/clear.vue
+++ b/examples/sites/demos/pc/app/date-picker/clear.vue
@@ -41,6 +41,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
index 79ae7d8110..8e89c78684 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue
@@ -15,7 +15,7 @@ const IconMinus = iconMinus()
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
index 3e66b38905..6ba5c6624d 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue
@@ -23,7 +23,7 @@ export default {
 
 <style>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 
 .my-date-picker {
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
index 4713aa4985..00e440f68e 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue
@@ -48,6 +48,6 @@ function formatWeeks(customWeeks, weekFirstDays) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
index b3cea104c8..2f3f276df8 100644
--- a/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
+++ b/examples/sites/demos/pc/app/date-picker/custom-weeks.vue
@@ -57,6 +57,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
index 0e26f8d5cc..55ee57366b 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue
@@ -31,12 +31,7 @@ const defaultTimeRange = ref(['09:00:00', '18:00:00'])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/default-value.vue b/examples/sites/demos/pc/app/date-picker/default-value.vue
index d4167ea928..981b487166 100644
--- a/examples/sites/demos/pc/app/date-picker/default-value.vue
+++ b/examples/sites/demos/pc/app/date-picker/default-value.vue
@@ -39,12 +39,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--datetimerange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
index 7044c4c876..81f4cb454b 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue
@@ -50,12 +50,7 @@ const pickerOptions = {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/disabled.vue b/examples/sites/demos/pc/app/date-picker/disabled.vue
index 3b17dcd0c7..1678dd3e14 100644
--- a/examples/sites/demos/pc/app/date-picker/disabled.vue
+++ b/examples/sites/demos/pc/app/date-picker/disabled.vue
@@ -57,12 +57,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
index 341b905d1f..7fc8ff6aad 100644
--- a/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/events-composition-api.vue
@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -58,6 +56,9 @@ const pickerOptions = {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;
diff --git a/examples/sites/demos/pc/app/date-picker/events.vue b/examples/sites/demos/pc/app/date-picker/events.vue
index b009573cb5..ee0147e4ef 100644
--- a/examples/sites/demos/pc/app/date-picker/events.vue
+++ b/examples/sites/demos/pc/app/date-picker/events.vue
@@ -1,20 +1,18 @@
 <template>
   <tiny-layout>
-    <tiny-row>
-      <tiny-col :span="4">
+    <tiny-row class="demo-row">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">focus:</label>
         <tiny-date-picker v-model="valueFocus" @focus="handleFocus"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">blur:</label>
         <tiny-date-picker v-model="valueBlur" @blur="handleBlur"></tiny-date-picker>
       </tiny-col>
-      <tiny-col :span="4">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">change:</label>
         <tiny-date-picker v-model="valueChange" @change="handleChange"></tiny-date-picker>
       </tiny-col>
-    </tiny-row>
-    <tiny-row>
       <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
@@ -61,6 +59,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-row {
+  width: 80%;
+}
 .demo-date-picker-label {
   display: inline-block;
   margin: 12px 0;
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
index 18db78f05b..1ddcb3e16c 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue
@@ -15,7 +15,7 @@ const rangeValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/filter-mode.vue b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
index 36c22ccdf6..b21a659d9a 100644
--- a/examples/sites/demos/pc/app/date-picker/filter-mode.vue
+++ b/examples/sites/demos/pc/app/date-picker/filter-mode.vue
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
index 0b26370777..bd500b40e4 100644
--- a/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/format-composition-api.vue
@@ -35,7 +35,7 @@ const selectedValue = ref(1590076800000)
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/format.vue b/examples/sites/demos/pc/app/date-picker/format.vue
index c7360c8dde..821ac14745 100644
--- a/examples/sites/demos/pc/app/date-picker/format.vue
+++ b/examples/sites/demos/pc/app/date-picker/format.vue
@@ -43,7 +43,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
index ff0f3cd15a..a4165391cd 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue
@@ -15,14 +15,7 @@ const dateRangeValue = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/label-inside.vue b/examples/sites/demos/pc/app/date-picker/label-inside.vue
index fb2d2184ce..f44494411d 100644
--- a/examples/sites/demos/pc/app/date-picker/label-inside.vue
+++ b/examples/sites/demos/pc/app/date-picker/label-inside.vue
@@ -23,14 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-  :deep(.tiny-range__close-icon) {
-    right: -4px;
-  }
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
index c8fd93c0de..db2d38075d 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue
@@ -15,7 +15,7 @@ const yearsValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
index f5a898aef9..ff80ec3c80 100644
--- a/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
+++ b/examples/sites/demos/pc/app/date-picker/multiple-dates.vue
@@ -23,7 +23,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
index 50c971cdfe..b75fb3c2d1 100644
--- a/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/now-composition-api.vue
@@ -38,7 +38,7 @@ const now = () => {
 
 <style scoped>
 .demo-date-picker {
-  width: 280px;
+  width: 360px;
 }
 .nowclass {
   display: inline-flex;
diff --git a/examples/sites/demos/pc/app/date-picker/now.vue b/examples/sites/demos/pc/app/date-picker/now.vue
index 3a7297a462..84af0a8f56 100644
--- a/examples/sites/demos/pc/app/date-picker/now.vue
+++ b/examples/sites/demos/pc/app/date-picker/now.vue
@@ -46,7 +46,7 @@ export default {
 
 <style scoped>
 .demo-date-picker {
-  width: 280px;
+  width: 360px;
 }
 .nowclass {
   display: inline-flex;
diff --git a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
index 099f3cf0cd..7626b5ff5b 100644
--- a/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/size-composition-api.vue
@@ -52,12 +52,7 @@ const radioValue = ref('default')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/size.vue b/examples/sites/demos/pc/app/date-picker/size.vue
index 4dd3a81694..c8526f7d50 100644
--- a/examples/sites/demos/pc/app/date-picker/size.vue
+++ b/examples/sites/demos/pc/app/date-picker/size.vue
@@ -58,12 +58,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
-
-  :deep(.tiny-date-editor--daterange.tiny-input__inner) {
-    width: 360px;
-  }
-
+  width: 360px;
   & > * {
     margin-top: 12px;
   }
diff --git a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
index f4134851f2..315a98856c 100644
--- a/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/step-composition-api.vue
@@ -35,6 +35,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/step.vue b/examples/sites/demos/pc/app/date-picker/step.vue
index 526c475bc6..91d3b5aa4c 100644
--- a/examples/sites/demos/pc/app/date-picker/step.vue
+++ b/examples/sites/demos/pc/app/date-picker/step.vue
@@ -36,6 +36,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
index 90aae215fd..ac89908a3c 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue
@@ -45,6 +45,6 @@ function selectChange(tz) {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/timezone.vue b/examples/sites/demos/pc/app/date-picker/timezone.vue
index e148dc86fe..cc63e9abca 100644
--- a/examples/sites/demos/pc/app/date-picker/timezone.vue
+++ b/examples/sites/demos/pc/app/date-picker/timezone.vue
@@ -55,6 +55,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
index 78799e78e7..98c8f99ae8 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue
@@ -24,6 +24,6 @@ const value = ref([])
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
index fce19d102c..45443a4c9f 100644
--- a/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
+++ b/examples/sites/demos/pc/app/date-picker/unlink-panels.vue
@@ -32,6 +32,6 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 280px;
+  width: 360px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
index 73600329e9..514d981e0c 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue
@@ -84,7 +84,7 @@ function resetForm() {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 400px;
+  width: 360px;
 
   :deep(.tiny-form-item .tiny-form-item) {
     margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/date-picker/validate-event.vue b/examples/sites/demos/pc/app/date-picker/validate-event.vue
index 496bc43484..c9b7019c63 100644
--- a/examples/sites/demos/pc/app/date-picker/validate-event.vue
+++ b/examples/sites/demos/pc/app/date-picker/validate-event.vue
@@ -88,7 +88,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 400px;
+  width: 360px;
 
   :deep(.tiny-form-item .tiny-form-item) {
     margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
index 0593e49af6..530927feae 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue
@@ -16,7 +16,7 @@
 import { ref } from 'vue'
 import { TimePicker as TinyTimePicker } from '@opentiny/vue'
 
-const value1 = ref(new Date(2016, 9, 10, 18, 40))
+const value1 = ref(new Date(2016, 9, 10, 18, 40, 20))
 </script>
 
 <style scoped>
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts b/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
index 7c32637c8d..681e3c76e0 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts
@@ -5,15 +5,15 @@ test('时间选择器基本用法', async ({ page }) => {
   await page.goto('time-picker#basic-usage')
 
   // 测试滚动选择时间
-  const timePicker = page.getByRole('textbox', { name: '18:42:00' }).first()
-  await page.getByRole('textbox', { name: '18:40:00' }).first().click()
+  const timePicker = page.getByRole('textbox', { name: '18:42:20' }).first()
+  await page.getByRole('textbox', { name: '18:40:20' }).first().click()
   await page.getByRole('listitem').filter({ hasText: '42' }).first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await expect(timePicker).toBeVisible()
 
   // 测试箭头选择时间
-  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:00' }).nth(1)
-  await page.getByRole('textbox', { name: '18:42:00' }).nth(1).click()
+  const timePickerArrowControl = page.getByRole('textbox', { name: '19:42:20' }).nth(1)
+  await page.getByRole('textbox', { name: '18:42:20' }).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()
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
index 36a958282c..981e20a5c5 100644
--- a/examples/sites/demos/pc/app/time-picker/basic-usage.vue
+++ b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -21,7 +21,7 @@ export default {
   },
   data() {
     return {
-      value1: new Date(2016, 9, 10, 18, 40)
+      value1: new Date(2016, 9, 10, 18, 40, 20)
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/time-picker/format.spec.ts b/examples/sites/demos/pc/app/time-picker/format.spec.ts
index 5babeec549..dcafe50c0b 100644
--- a/examples/sites/demos/pc/app/time-picker/format.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/format.spec.ts
@@ -12,7 +12,7 @@ test('时间格式化', async ({ page }) => {
 
   await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').click()
+  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').first().click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
diff --git a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
index 17d2fdfb6d..3925e6f570 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue
@@ -16,6 +16,6 @@ const value1 = ref([startTime, endTime])
 
 <style scoped lang="less">
 .demo-time-picker-wrap {
-  width: 360px;
+  width: 280px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.vue b/examples/sites/demos/pc/app/time-picker/is-range.vue
index c88c0c18b8..a7c28ee54e 100644
--- a/examples/sites/demos/pc/app/time-picker/is-range.vue
+++ b/examples/sites/demos/pc/app/time-picker/is-range.vue
@@ -24,6 +24,6 @@ export default {
 
 <style scoped lang="less">
 .demo-time-picker-wrap {
-  width: 360px;
+  width: 280px;
 }
 </style>
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 8093293f67..a8616d485c 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
@@ -22,7 +22,7 @@ export default {
         'en-US': 'Select time range'
       },
       desc: {
-        'zh-CN': '<p><code>picker-options</code> 设置固定时间范围</p>',
+        'zh-CN': '<p>通过<code>picker-options</code> 设置固定时间范围</p>',
         'en-US': '<p><code>picker-options</code> Setting a fixed time range.</p>'
       },
       codeFiles: ['picker-options.vue']
@@ -35,7 +35,7 @@ export default {
       },
       desc: {
         'zh-CN':
-          "<p><code>is-range</code> 设置是否为范围选择，默认为 false，<code>range-separator</code>，设置范围选择分隔符（为可选值）默认为 '-'。</p>",
+          "<p>通过<code>is-range</code> 设置是否为范围选择，默认为 false，通过<code>range-separator</code>设置范围选择分隔符（为可选值）默认为 '-'。</p>",
         'en-US':
           "<p><code> is-range </code> whether the setting is range selection. Default is false, <code> range-separator </code>, and the range selection delimiter (optional) defaults to'-'.</p>"
       },
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
index 888a7dede8..0719632349 100644
--- a/packages/theme/src/picker/index.less
+++ b/packages/theme/src/picker/index.less
@@ -114,21 +114,17 @@
       width: 12%;
     }
 
-    .@{range-prefix-cls}__close-box {
-      height: 16px;
-      z-index: 5;
-      position: relative;
-    }
-
     .@{range-prefix-cls}__close-icon {
-      width: 20px;
-      height: 18px;
+      width: 16px;
+      height: 16px;
       position: absolute;
-      right: -20px;
+      top: 16px;
+      right: 12px;
+      transform: translateY(-50%);
       background-color: #ffffff;
-      margin-top: -1px;
-
-      &,
+      fill: var(--tv-Picker-icon-color);
+      z-index: 5;
+      
       &:hover {
         fill: var(--tv-Picker-icon-color-hover);
       }
@@ -177,7 +173,7 @@
     }
 
     .@{range-prefix-cls}-separator {
-      line-height: 28px;
+      line-height: 20px;
       font-size: var(--tv-Picker-font-size);
     }
 
diff --git a/packages/theme/src/time-panel/index.less b/packages/theme/src/time-panel/index.less
index 45663d660a..61a26e12a8 100644
--- a/packages/theme/src/time-panel/index.less
+++ b/packages/theme/src/time-panel/index.less
@@ -36,13 +36,10 @@
     display: block;
   }
 
-  &__header-input {
-    margin: var(--tv-TimePanel-header-margin);
-  }
-
   &__header-title {
     display: flex;
     justify-content: space-around;
+    margin: var(--tv-TimePanel-header-margin);
     color: var(--tv-TimePanel-header-text-color);
     align-items: center;
   }
diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less
index e74010011a..fcb84b88c6 100644
--- a/packages/theme/src/time-panel/vars.less
+++ b/packages/theme/src/time-panel/vars.less
@@ -29,7 +29,7 @@
   --tv-TimePanel-border-color-divider: var(--tv-color-border-divider, #f0f0f0);
 
   // 头部外间距
-  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 24px 2px;
+  --tv-TimePanel-header-margin: var(--tv-space-xl, 16px) 2px 0 2px;
   // 头部文本色
   --tv-TimePanel-header-text-color: var(--tv-color-text-weaken, #808080);
   // 内容区底部内间距
diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less
index 21085ceb06..d21a9901ff 100644
--- a/packages/theme/src/time-spinner/index.less
+++ b/packages/theme/src/time-spinner/index.less
@@ -54,6 +54,9 @@
     }
 
     .@{time-spinner-prefix-cls}__list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       transform: translateY(-6px);
       margin: var(--tv-TimeSpinner-list-margin);
     }
@@ -64,7 +67,12 @@
       }
     }
   }
-
+  &__wrapper.is-arrow {
+    height: 220px;
+  }
+  &__wrapper.is-arrow .@{time-spinner-prefix-cls}__list{
+    height: 200px;
+  }
   &__arrow {
     height: 30px;
     line-height: 30px;
diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
index f5407f9ef5..02a3a3ec2b 100644
--- a/packages/vue/src/picker/src/pc.vue
+++ b/packages/vue/src/picker/src/pc.vue
@@ -120,11 +120,11 @@
       />
       <i class="tiny-input__icon tiny-input__icon">
         <transition name="tiny-transition-icon-scale-in">
-          <div v-if="state.haveTrigger" class="tiny-range__close-box">
+          <div v-if="state.haveTrigger">
             <component
               :is="state.showClose ? clearIcon : null"
               @click="handleClickIcon"
-              class="baseClearicon tiny-range__close-icon"
+              class="tiny-range__close-icon"
             />
           </div>
         </transition>
diff --git a/packages/vue/src/time/src/pc.vue b/packages/vue/src/time/src/pc.vue
index 6a29bd7dee..6b6a1a4fc6 100644
--- a/packages/vue/src/time/src/pc.vue
+++ b/packages/vue/src/time/src/pc.vue
@@ -13,9 +13,6 @@
   <transition name="tiny-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div v-show="state.visible" class="tiny-time tiny-time-panel tiny-popper" :class="state.popperClass">
       <div class="tiny-time-panel__header">
-        <div class="tiny-time-panel__header-input">
-          <tiny-input v-model="state.displayValue" :placeholder="state.format"></tiny-input>
-        </div>
         <div class="tiny-time-panel__header-title">
           <span>{{ t('ui.datepicker.hour') }}</span>
           <span>{{ t('ui.datepicker.minute') }}</span>
@@ -58,14 +55,12 @@
 import { renderless, api } from '@opentiny/vue-renderless/time/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 import TimeSpinner from '@opentiny/vue-time-spinner'
-import Input from '@opentiny/vue-input'
 import Button from '@opentiny/vue-button'
 
 export default defineComponent({
   emits: ['dodestroy', 'pick', 'select-range'],
   components: {
     TimeSpinner,
-    TinyInput: Input,
     TinyButton: Button
   },
   props: [...props, 'show', 'timeArrowControl', 'emitter', 'value', 'step'],

From 3f895ff1f6a9895f5fe089a76104f6776d37cd30 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 28 Oct 2024 18:44:43 -0700
Subject: [PATCH 08/10] feat(time-picker): [time-picker] Optimize and modify
 component style issues

---
 packages/vue/src/date-picker/package.json | 2 +-
 packages/vue/src/time-picker/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue/src/date-picker/package.json b/packages/vue/src/date-picker/package.json
index 7b83957605..62c433c190 100644
--- a/packages/vue/src/date-picker/package.json
+++ b/packages/vue/src/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-picker",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-picker/package.json b/packages/vue/src/time-picker/package.json
index 973585a26f..9ada182806 100644
--- a/packages/vue/src/time-picker/package.json
+++ b/packages/vue/src/time-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-picker",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

From ba5b62b3d018060cb97ac81bf8b15ed6126afd0e Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 28 Oct 2024 19:12:48 -0700
Subject: [PATCH 09/10] feat(time-picker): [time-picker] Optimize style

---
 packages/vue/src/date-picker/package.json | 2 +-
 packages/vue/src/picker/package.json      | 2 +-
 packages/vue/src/time-picker/package.json | 2 +-
 packages/vue/src/time/package.json        | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vue/src/date-picker/package.json b/packages/vue/src/date-picker/package.json
index 62c433c190..7b83957605 100644
--- a/packages/vue/src/date-picker/package.json
+++ b/packages/vue/src/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-date-picker",
-  "version": "3.19.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/picker/package.json b/packages/vue/src/picker/package.json
index 001116b175..274c20c13e 100644
--- a/packages/vue/src/picker/package.json
+++ b/packages/vue/src/picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-picker",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time-picker/package.json b/packages/vue/src/time-picker/package.json
index 9ada182806..973585a26f 100644
--- a/packages/vue/src/time-picker/package.json
+++ b/packages/vue/src/time-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time-picker",
-  "version": "3.19.0",
+  "version": "3.18.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time/package.json b/packages/vue/src/time/package.json
index 36464596e9..8d73008758 100644
--- a/packages/vue/src/time/package.json
+++ b/packages/vue/src/time/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

From ada0e28e10369c5042d6e16ddd7471022eb89419 Mon Sep 17 00:00:00 2001
From: You-Hw-Y <1664677472@qq.com>
Date: Mon, 28 Oct 2024 19:26:49 -0700
Subject: [PATCH 10/10] feat(time-picker): [time-picker] Optimize style

---
 examples/sites/demos/pc/app/time-picker/format.spec.ts | 2 +-
 packages/vue/src/picker/package.json                   | 2 +-
 packages/vue/src/time/package.json                     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/sites/demos/pc/app/time-picker/format.spec.ts b/examples/sites/demos/pc/app/time-picker/format.spec.ts
index dcafe50c0b..0a4c4c9bde 100644
--- a/examples/sites/demos/pc/app/time-picker/format.spec.ts
+++ b/examples/sites/demos/pc/app/time-picker/format.spec.ts
@@ -12,7 +12,7 @@ test('时间格式化', async ({ page }) => {
 
   await page.getByRole('textbox', { name: '19:40:00 pm' }).click()
   await page.waitForTimeout(100)
-  await page.getByRole('listitem').filter({ hasText: '08 pm' }).locator('span').first().click()
+  await page.getByRole('listitem').filter({ hasText: '08 pm' }).first().locator('span').click()
   await page.getByRole('button', { name: '确定' }).click()
   await page.waitForTimeout(100)
   await expect(page.getByRole('textbox', { name: '20:40:00 pm' })).toBeVisible()
diff --git a/packages/vue/src/picker/package.json b/packages/vue/src/picker/package.json
index 274c20c13e..d55d5f3c2f 100644
--- a/packages/vue/src/picker/package.json
+++ b/packages/vue/src/picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-picker",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",
diff --git a/packages/vue/src/time/package.json b/packages/vue/src/time/package.json
index 8d73008758..9b22baf730 100644
--- a/packages/vue/src/time/package.json
+++ b/packages/vue/src/time/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-time",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",