feat(time-picker): [time-picker] updata time frame xdesign (#2092)

wuyiping0628 · web-flow · commit 2bf9e90dc403 · 2024-09-11T11:32:39.000+08:00
* feat(time-picker): [atime-picker] updata time frame xdesign

* feat(time-picker): [atime-picker] updata time frame xdesign

* feat(time-picker): [atime-picker] updata time frame xdesign
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
@@ -21,7 +21,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/basic-usage.vue b/examples/sites/demos/pc/app/time-picker/basic-usage.vue
@@ -29,7 +29,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/clearable-composition-api.vue
@@ -26,7 +26,7 @@ const IconError = iconError()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/clearable.vue b/examples/sites/demos/pc/app/time-picker/clearable.vue
@@ -34,7 +34,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue b/examples/sites/demos/pc/app/time-picker/default-value-composition-api.vue
@@ -25,7 +25,7 @@ const rangeValue = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/default-value.vue b/examples/sites/demos/pc/app/time-picker/default-value.vue
@@ -31,7 +31,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue b/examples/sites/demos/pc/app/time-picker/disabled-composition-api.vue
@@ -24,7 +24,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/disabled.vue b/examples/sites/demos/pc/app/time-picker/disabled.vue
@@ -32,7 +32,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue b/examples/sites/demos/pc/app/time-picker/editable-composition-api.vue
@@ -13,6 +13,6 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/editable.vue b/examples/sites/demos/pc/app/time-picker/editable.vue
@@ -21,6 +21,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/event-composition-api.vue b/examples/sites/demos/pc/app/time-picker/event-composition-api.vue
@@ -37,7 +37,7 @@ function focus() {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/event.vue b/examples/sites/demos/pc/app/time-picker/event.vue
@@ -43,7 +43,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/format-composition-api.vue b/examples/sites/demos/pc/app/time-picker/format-composition-api.vue
@@ -38,7 +38,7 @@ const pickerValue = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/format.vue b/examples/sites/demos/pc/app/time-picker/format.vue
@@ -50,7 +50,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/name-composition-api.vue b/examples/sites/demos/pc/app/time-picker/name-composition-api.vue
@@ -13,6 +13,6 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/name.vue b/examples/sites/demos/pc/app/time-picker/name.vue
@@ -21,6 +21,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue b/examples/sites/demos/pc/app/time-picker/placeholder-composition-api.vue
@@ -27,7 +27,7 @@ const rangeValue = ref(['', ''])
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/placeholder.vue b/examples/sites/demos/pc/app/time-picker/placeholder.vue
@@ -35,7 +35,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 p {
   font-size: 14px;
diff --git a/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue b/examples/sites/demos/pc/app/time-picker/popper-class-composition-api.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="demo-date-picker-wrap">
-    <tiny-time-picker
-      v-model="value1"
-      popper-class="picker-class"
-      :popper-append-to-body="false"
-    ></tiny-time-picker>
+    <tiny-time-picker v-model="value1" popper-class="picker-class" :popper-append-to-body="false"></tiny-time-picker>
   </div>
 </template>
 
@@ -17,7 +13,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 
 .picker-class {
diff --git a/examples/sites/demos/pc/app/time-picker/popper-class.vue b/examples/sites/demos/pc/app/time-picker/popper-class.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="demo-date-picker-wrap">
-    <tiny-time-picker
-      v-model="value1"
-      popper-class="picker-class"
-      :popper-append-to-body="false"
-    ></tiny-time-picker>
+    <tiny-time-picker v-model="value1" popper-class="picker-class" :popper-append-to-body="false"></tiny-time-picker>
   </div>
 </template>
 
@@ -25,7 +21,7 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 
 .picker-class {
diff --git a/examples/sites/demos/pc/app/time-picker/size-composition-api.vue b/examples/sites/demos/pc/app/time-picker/size-composition-api.vue
@@ -35,7 +35,7 @@ const radioValue = ref('default')
 }
 
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/size.vue b/examples/sites/demos/pc/app/time-picker/size.vue
@@ -14,11 +14,7 @@
 </template>
 
 <script>
-import {
-  TimePicker,
-  RadioGroup,
-  RadioButton
-} from '@opentiny/vue'
+import { TimePicker, RadioGroup, RadioButton } from '@opentiny/vue'
 
 export default {
   components: {
@@ -45,7 +41,7 @@ export default {
 }
 
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 
   & > * {
     margin-top: 12px;
diff --git a/examples/sites/demos/pc/app/time-picker/step-composition-api.vue b/examples/sites/demos/pc/app/time-picker/step-composition-api.vue
@@ -19,6 +19,6 @@ const value = ref(new Date(2016, 9, 10, 18, 40))
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/step.vue b/examples/sites/demos/pc/app/time-picker/step.vue
@@ -27,6 +27,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue b/examples/sites/demos/pc/app/time-picker/suffix-icon-composition-api.vue
@@ -15,6 +15,6 @@ const IconMinus = iconMinus()
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/time-picker/suffix-icon.vue b/examples/sites/demos/pc/app/time-picker/suffix-icon.vue
@@ -23,6 +23,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 182px;
+  width: 200px;
 }
 </style>
diff --git a/packages/design/smb/index.ts b/packages/design/smb/index.ts
@@ -12,6 +12,7 @@ import Pager from './src/pager'
 import Select from './src/select'
 import TreeNode from './src/tree-node'
 import TimeSpinner from './src/time-spinner'
+import TimeRange from './src/time-range'
 import Time from './src/time-spinner'
 import UploadList from './src/upload-list'
 import BreadcrumbItem from './src/breadcrumb-item'
@@ -38,6 +39,7 @@ export default {
     Select,
     TreeNode,
     TimeSpinner,
+    TimeRange,
     Time,
     BreadcrumbItem,
     UploadList,
diff --git a/packages/design/smb/src/time-range/index.ts b/packages/design/smb/src/time-range/index.ts
@@ -0,0 +1,4 @@
+export default {
+  // 控制time-picker组件时间范围button显示和样式
+  showTimePickerRangeButton: true
+}
diff --git a/packages/renderless/src/time-range/vue.ts b/packages/renderless/src/time-range/vue.ts
@@ -54,6 +54,7 @@ const initState = ({ reactive, computed, vm, api }) => {
     arrowControl: false,
     maxDate: new Date(),
     minDate: new Date(),
+    showTimePickerRangeButton: false,
     showSeconds: computed(() => (state.format || '').includes('ss')),
     offset: computed(() => (state.showSeconds ? 11 : 8)),
     spinner: computed(() => (state.selectionRange[0] < state.offset ? vm.$refs.minSpinner : vm.$refs.maxSpinner)),
@@ -64,12 +65,13 @@ const initState = ({ reactive, computed, vm, api }) => {
   return state
 }
 
-export const renderless = (props, { computed, reactive, watch, nextTick }, { t, vm, emit: $emit }) => {
+export const renderless = (props, { computed, reactive, watch, nextTick }, { t, vm, emit: $emit, designConfig }) => {
   const api = {}
   const emit = props.emitter ? props.emitter.emit : $emit
   const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss', t)
   const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss', t)
   const state = initState({ reactive, computed, vm, api })
+  state.showTimePickerRangeButton = designConfig?.showTimePickerRangeButton
 
   Object.assign(api, {
     t,
diff --git a/packages/theme-saas/src/time-panel/index.less b/packages/theme-saas/src/time-panel/index.less
@@ -43,6 +43,10 @@
     }
   }
 
+  &__header {
+    @apply hidden;
+  }
+
   &__footer {
     @apply border-t border-t-color-bg-3;
     @apply py-3 px-4;
diff --git a/packages/theme-saas/src/time-range/index.less b/packages/theme-saas/src/time-range/index.less
@@ -27,6 +27,10 @@
     @apply text-xs;
   }
 
+  &__header-title {
+    @apply hidden;
+  }
+
   &__body {
     @apply border-r border-r-color-bg-3;
   }
diff --git a/packages/theme/src/picker/index.less b/packages/theme/src/picker/index.less
diff --git a/packages/theme/src/picker/smb-theme.js b/packages/theme/src/picker/smb-theme.js
diff --git a/packages/theme/src/picker/vars.less b/packages/theme/src/picker/vars.less
diff --git a/packages/theme/src/theme.config.js b/packages/theme/src/theme.config.js
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-range/index.less b/packages/theme/src/time-range/index.less
diff --git a/packages/theme/src/time-range/smb-theme.js b/packages/theme/src/time-range/smb-theme.js
diff --git a/packages/theme/src/time-range/vars.less b/packages/theme/src/time-range/vars.less
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-range/src/pc.vue b/packages/vue/src/time-range/src/pc.vue

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))`
`21`	`21`
`22`	`22`	`<style scoped>`
`23`	`23`	`.demo-date-picker-wrap {`
`24`		`- width: 182px;`
	`24`	`+ width: 200px;`
`25`	`25`	`}`
`26`	`26`	`p {`
`27`	`27`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export default {`
`29`	`29`
`30`	`30`	`<style scoped>`
`31`	`31`	`.demo-date-picker-wrap {`
`32`		`- width: 182px;`
	`32`	`+ width: 200px;`
`33`	`33`	`}`
`34`	`34`	`p {`
`35`	`35`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const IconError = iconError()`
`26`	`26`
`27`	`27`	`<style scoped>`
`28`	`28`	`.demo-date-picker-wrap {`
`29`		`- width: 182px;`
	`29`	`+ width: 200px;`
`30`	`30`	`}`
`31`	`31`	`p {`
`32`	`32`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ export default {`
`34`	`34`
`35`	`35`	`<style scoped>`
`36`	`36`	`.demo-date-picker-wrap {`
`37`		`- width: 182px;`
	`37`	`+ width: 200px;`
`38`	`38`	`}`
`39`	`39`	`p {`
`40`	`40`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ const rangeValue = ref('')`
`25`	`25`
`26`	`26`	`<style scoped>`
`27`	`27`	`.demo-date-picker-wrap {`
`28`		`- width: 182px;`
	`28`	`+ width: 200px;`
`29`	`29`	`}`
`30`	`30`	`p {`
`31`	`31`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export default {`
`31`	`31`
`32`	`32`	`<style scoped>`
`33`	`33`	`.demo-date-picker-wrap {`
`34`		`- width: 182px;`
	`34`	`+ width: 200px;`
`35`	`35`	`}`
`36`	`36`	`p {`
`37`	`37`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))`
`24`	`24`
`25`	`25`	`<style scoped lang="less">`
`26`	`26`	`.demo-date-picker-wrap {`
`27`		`- width: 182px;`
	`27`	`+ width: 200px;`
`28`	`28`	`}`
`29`	`29`	`p {`
`30`	`30`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export default {`
`32`	`32`
`33`	`33`	`<style scoped lang="less">`
`34`	`34`	`.demo-date-picker-wrap {`
`35`		`- width: 182px;`
	`35`	`+ width: 200px;`
`36`	`36`	`}`
`37`	`37`	`p {`
`38`	`38`	`font-size: 14px;`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,6 @@ const value1 = ref(new Date(2016, 9, 10, 18, 40))`
`13`	`13`
`14`	`14`	`<style scoped>`
`15`	`15`	`.demo-date-picker-wrap {`
`16`		`- width: 182px;`
	`16`	`+ width: 200px;`
`17`	`17`	`}`
`18`	`18`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,6 @@ export default {`
`21`	`21`
`22`	`22`	`<style scoped>`
`23`	`23`	`.demo-date-picker-wrap {`
`24`		`- width: 182px;`
	`24`	`+ width: 200px;`
`25`	`25`	`}`
`26`	`26`	`</style>`