feat(time-picker): [time-picker] Optimize and modify component style issues (#2452)

Youyou-smiles · zzcr · commit 92901178ab66 · 2024-11-04T14:34:24.000+08:00
* feat(date-picker): [date-picker]Optimize case display and fix style issues

* feat(date-picker): [date-picker]Optimize case display and fix style issues

* feat(date-picker): [date-picker] Fix style issues

* feat(date-picker): [date-picker] Modify console for a large number of alarms

* feat(button): [button] Optimize demo style for feature display

* feat(date-picker): [date-picker] Optimize demo style

* feat(time-picker): [time-picker] Optimize and modify component style issues

* feat(time-picker): [time-picker] Optimize and modify component style issues

* feat(time-picker): [time-picker] Optimize style

* feat(time-picker): [time-picker] Optimize style
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
@@ -52,6 +50,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
@@ -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>
@@ -64,6 +62,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -48,12 +48,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -76,7 +76,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
@@ -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
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
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
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
diff --git a/examples/sites/demos/pc/app/time-picker/is-range.vue b/examples/sites/demos/pc/app/time-picker/is-range.vue
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
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
diff --git a/packages/theme/src/time-panel/index.less b/packages/theme/src/time-panel/index.less
diff --git a/packages/theme/src/time-panel/vars.less b/packages/theme/src/time-panel/vars.less
diff --git a/packages/theme/src/time-spinner/index.less b/packages/theme/src/time-spinner/index.less
diff --git a/packages/vue/src/picker/package.json b/packages/vue/src/picker/package.json
diff --git a/packages/vue/src/picker/src/pc.vue b/packages/vue/src/picker/src/pc.vue
diff --git a/packages/vue/src/time/package.json b/packages/vue/src/time/package.json
diff --git a/packages/vue/src/time/src/pc.vue b/packages/vue/src/time/src/pc.vue

Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,6 @@ const IconClose = iconClose()`
`31`	`31`
`32`	`32`	`<style scoped>`
`33`	`33`	`.demo-date-picker-wrap {`
`34`		`- width: 280px;`
	`34`	`+ width: 360px;`
`35`	`35`	`}`
`36`	`36`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,6 @@ export default {`
`41`	`41`
`42`	`42`	`<style scoped>`
`43`	`43`	`.demo-date-picker-wrap {`
`44`		`- width: 280px;`
	`44`	`+ width: 360px;`
`45`	`45`	`}`
`46`	`46`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const IconMinus = iconMinus()`
`15`	`15`
`16`	`16`	`<style>`
`17`	`17`	`.demo-date-picker-wrap {`
`18`		`- width: 280px;`
	`18`	`+ width: 360px;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.my-date-picker {`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export default {`
`23`	`23`
`24`	`24`	`<style>`
`25`	`25`	`.demo-date-picker-wrap {`
`26`		`- width: 280px;`
	`26`	`+ width: 360px;`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`.my-date-picker {`
Original file line number	Diff line number	Diff line change
`@@ -48,6 +48,6 @@ function formatWeeks(customWeeks, weekFirstDays) {`
`48`	`48`
`49`	`49`	`<style scoped>`
`50`	`50`	`.demo-date-picker-wrap {`
`51`		`- width: 280px;`
	`51`	`+ width: 360px;`
`52`	`52`	`}`
`53`	`53`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,6 @@ export default {`
`57`	`57`
`58`	`58`	`<style scoped>`
`59`	`59`	`.demo-date-picker-wrap {`
`60`		`- width: 280px;`
	`60`	`+ width: 360px;`
`61`	`61`	`}`
`62`	`62`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ const now = () => {`
`38`	`38`
`39`	`39`	`<style scoped>`
`40`	`40`	`.demo-date-picker {`
`41`		`- width: 280px;`
	`41`	`+ width: 360px;`
`42`	`42`	`}`
`43`	`43`	`.nowclass {`
`44`	`44`	`display: inline-flex;`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ export default {`
`46`	`46`
`47`	`47`	`<style scoped>`
`48`	`48`	`.demo-date-picker {`
`49`		`- width: 280px;`
	`49`	`+ width: 360px;`
`50`	`50`	`}`
`51`	`51`	`.nowclass {`
`52`	`52`	`display: inline-flex;`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,6 @@ const value = ref('')`
`35`	`35`
`36`	`36`	`<style scoped>`
`37`	`37`	`.demo-date-picker-wrap {`
`38`		`- width: 280px;`
	`38`	`+ width: 360px;`
`39`	`39`	`}`
`40`	`40`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,6 @@ export default {`
`36`	`36`
`37`	`37`	`<style scoped>`
`38`	`38`	`.demo-date-picker-wrap {`
`39`		`- width: 280px;`
	`39`	`+ width: 360px;`
`40`	`40`	`}`
`41`	`41`	`</style>`