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

* 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
2024-09-10 20:32:39 -07:00 · 2024-09-10 20:32:39 -07:00 · 2bf9e90dc4
parent 8f1012f56f
commit 2bf9e90dc4
41 changed files with 229 additions and 85 deletions
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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>
--- 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>
--- 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;
--- 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;
--- 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;
--- 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;
--- 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>
--- 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>
--- 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;
--- 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;
--- 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 {
--- 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 {
--- 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;
--- 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;
--- 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>
--- 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>
--- 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>
--- 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>
--- 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,
--- 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
+}
--- 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,
--- 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;
--- 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;
  }
--- a/packages/theme/src/picker/index.less
+++ b/packages/theme/src/picker/index.less
@ -49,7 +49,7 @@
  &--timerange {
    &.@{input-prefix-cls},
    &.@{input-prefix-cls}__inner {
-      width: 350px;
+      width: 360px;
    }
  }

@ -120,6 +120,7 @@
  }

  .@{range-prefix-cls}-input {
+    text-align: left;
    appearance: none;
    border: none;
    outline: 0;
@ -141,7 +142,8 @@
    font-size: var(--ti-date-picker-icon-font-size);
    width: 25px;
    float: right;
-    line-height: 32px;
+    line-height: 26px;
+    height: 26px;
    margin-right: 14px;
    display: flex;
    justify-content: center;
@ -157,7 +159,7 @@
 .@{range-editor-prefix-cls} {
  &:not(.is-display-only).@{input-prefix-cls}__inner {
    display: inline-flex;
-    align-items: center;
+    align-items: left;
    padding: 3px 10px;
  }

@ -167,32 +169,33 @@

  &:not(.is-display-only).is-active,
  &:not(.is-display-only).is-active:hover {
-    border-color: var(--ti-date-picker-current-border-color);
+    border-color: var(--ti-date-editor-input-border-color);
  }

  &--medium:not(.is-display-only) {
    &.@{input-prefix-cls}__inner {
-      height: 42px;
+      height: var(--ti-date-editor-input-medium-height);
    }

    .@{range-prefix-cls}-separator {
      line-height: 34px;
-      font-size: var(--ti-common-font-size-2);
+      font-size: var(--ti-common-font-size-1);
    }

    .@{range-prefix-cls}-input {
-      font-size: var(--ti-common-font-size-2);
+      font-size: var(--ti-common-font-size-1);
    }

    .@{range-prefix-cls}__close-icon,
    .@{range-prefix-cls}__icon {
      line-height: 34px;
+      height: 34px;
    }
  }

  &--small:not(.is-display-only) {
    &.@{input-prefix-cls}__inner {
-      height: 36px;
+      height: var(--ti-date-editor-input-small-height);
    }

    .@{range-prefix-cls}-separator {
@ -206,7 +209,8 @@

    .@{range-prefix-cls}__close-icon,
    .@{range-prefix-cls}__icon {
-      line-height: 28px;
+      line-height: 22px;
+      height: 22px;
    }
  }

@ -227,6 +231,7 @@
    .@{range-prefix-cls}__close-icon,
    .@{range-prefix-cls}__icon {
      line-height: 16px;
+      height: 16px;
    }
  }

--- a/packages/theme/src/picker/smb-theme.js
+++ b/packages/theme/src/picker/smb-theme.js
@ -1,3 +1,6 @@
 export const tinyPickerSmbTheme = {
-  'ti-date-editor-input-icon-color-fill': 'var(--ti-base-color-common-2)'
+  'ti-date-editor-input-icon-color-fill': 'var(--ti-base-color-common-2)',
+  'ti-date-editor-input-medium-height': 'var(--ti-common-size-height-medium)',
+  'ti-date-editor-input-border-color': 'var(--ti-common-color-line-hover)',
+  'ti-date-editor-input-small-height': 'var(--ti-common-line-height-3)'
 }
--- a/packages/theme/src/picker/vars.less
+++ b/packages/theme/src/picker/vars.less
@ -12,5 +12,8 @@

 .component-css-vars-picker() {
  --ti-range-separator-text-color: #303133;
+  --ti-date-editor-input-medium-height: 42px;
+  --ti-date-editor-input-small-height: 36px;
+  --ti-date-editor-input-border-color: var(--ti-base-color-brand-6, #5e7ce0);
  --ti-date-editor-input-icon-color-fill: #575d6c;
 }
--- a/packages/theme/src/theme.config.js
+++ b/packages/theme/src/theme.config.js
@ -67,6 +67,7 @@ export default {
  'time-spinner': 'time-spinner',
  'time-panel': 'time-panel',
  'time-range': 'time-range',
+  'time-range-picker': 'time-range-picker',
  'time-select': 'time-select',
  'scroll-text': 'scroll-text',
  'slider-input': 'slider__input',
--- a/packages/theme/src/time-panel/index.less
+++ b/packages/theme/src/time-panel/index.less
@ -50,7 +50,7 @@
    display: flex;
    justify-content: space-around;
    color: #808080;
-    margin-bottom: 12px;
+    margin-top: 8px;
    height: 22px;
    align-items: center;
    line-height: 22px;
--- a/packages/theme/src/time-range/index.less
+++ b/packages/theme/src/time-range/index.less
@ -24,27 +24,89 @@
  &__content {
    position: relative;
    text-align: center;
-    padding: 10px;
+    padding: var(--ti-time-range-picker-content-padding);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

+  &__content-date {
+    border-right: 1px solid var(--ti-time-range-picker-header-border-bottom);
+  }
+
+  &__header-title {
+    font-size: 14px;
+    display: var(--ti-time-range-picker-header-title-display);
+    justify-content: space-around;
+    color: #808080;
+    padding: 8px;
+    height: 30px;
+    align-items: center;
+    line-height: 30px;
+  }
+
  &__cell {
    box-sizing: border-box;
    margin: 0;
-    padding: 4px 7px 7px;
+    padding: var(--ti-time-range-picker-cell-padding-top) var(--ti-time-range-picker-cell-padding-right) var(--ti-time-range-picker-cell-padding-bottom);
    width: 50%;
  }

  &__header {
-    margin-bottom: 5px;
-    text-align: center;
+    height: var(--ti-time-range-picker-header-height);
+    color: var(--ti-time-range-picker-header-color);
+    line-height: var(--ti-time-range-picker-header-line-height);
+    margin-bottom: var(--ti-time-range-picker-header-margin-bottom);
+    text-align: var(--ti-time-range-picker-header-text-align);
    font-size: var(--ti-time-range-picker-header-font-size);
+    border-bottom: 1px solid var(--ti-time-range-picker-header-border-bottom);
+
+    span {
+      margin-left: var(--ti-time-range-picker-header-margin-left);
+    }
  }

  &__body {
    border-radius: var(--ti-date-picker-border-radius);
    border: 1px solid var(--ti-date-picker-border-color);
  }
+
+  &__footer {
+    border-top: 1px solid var(--ti-time-range-picker-border-color);
+    padding: var(--ti-time-range-picker-footer-padding-top) var(--ti-time-range-picker-footer-padding-right);
+    height: var(--ti-time-range-picker-footer-height, 36px);
+    box-sizing: border-box;
+    margin-top: 12px;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+  }
+
+  &__btn.tiny-button {
+    min-width: var(--ti-time-range-picker-btn-min-width);
+    border: none;
+    line-height: var(--ti-time-range-picker-btn-height);
+    padding: var(--ti-time-range-picker-btn-padding-vertical) var(--ti-time-range-picker-btn-padding-horizontal);
+    margin: 0 5px;
+    cursor: pointer;
+    background-color: var(--ti-time-range-picker-btn-bg-color);
+    outline: 0;
+    font-size: 12px;
+    color: var(--ti-time-range-picker-btn-text-color);
+    border-radius: var(--ti-time-range-picker-btn-border-radius);
+    transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.cancel {
+      display: var(--ti-time-range-picker-btn-cancel-display);
+    }
+
+    &.confirm {
+      font-weight: var(--ti-time-range-picker-btn-font-weight);
+      color: var(--ti-time-range-picker-btn-confirm-text-color);
+
+      &:hover {
+        background-color: var(--ti-time-range-picker-btn-confirm-hover-bg-color);
+      }
+    }
+  }
 }
--- a/packages/theme/src/time-range/smb-theme.js
+++ b/packages/theme/src/time-range/smb-theme.js
@ -0,0 +1,19 @@
+export const tinyTimeRangeSmbTheme = {
+  'ti-time-range-picker-content-padding': 'var(--ti-common-space-0)',
+  'ti-time-range-picker-cell-padding-top': 'var(--ti-common-space-0)',
+  'ti-time-range-picker-cell-padding-right': 'var(--ti-common-space-0)',
+  'ti-time-range-picker-cell-padding-bottom': 'var(--ti-common-space-0)',
+  'ti-time-range-picker-header-margin-bottom': 'var(--ti-common-space-0)',
+  'ti-time-range-picker-header-height': 'var(--ti-common-size-height-large)',
+  'ti-time-range-picker-header-line-height': 'calc(var(--ti-common-line-height-6) - 2px)',
+  'ti-time-range-picker-header-text-align': 'left',
+  'ti-time-range-picker-header-title-display': 'flex',
+  'ti-time-range-picker-header-margin-left': 'var(--ti-common-size-4x)',
+  'ti-time-range-picker-header-color': 'var(--ti-base-color-common-2)',
+  'ti-time-range-picker-header-border-bottom': 'var(--ti-common-color-line-dividing)',
+  'ti-time-range-picker-footer-height': 'var(--ti-common-size-14x)',
+  'ti-time-range-picker-footer-padding-top': 'var(--ti-common-size-4x)',
+  'ti-time-range-picker-footer-padding-right': 'var(--ti-common-size-4x)',
+  'ti-time-range-picker-header-font-size': 'var(--ti-common-font-size-base)',
+  'ti-time-panel-btn-cancel-display': 'none'
+}
--- a/packages/theme/src/time-range/vars.less
+++ b/packages/theme/src/time-range/vars.less
@ -12,4 +12,31 @@

 .component-css-vars-time-range-picker() {
  --ti-time-range-picker-header-font-size: var(--ti-common-font-size-1, 14px);
+  --ti-time-range-picker-content-padding: 10px;
+  --ti-time-range-picker-cell-padding-top: 4px;
+  --ti-time-range-picker-content-right: 7px;
+  --ti-time-range-picker-content-bottom: 7px;
+  --ti-time-range-picker-header-height: 32px;
+  --ti-time-range-picker-header-line-height: 32px;
+  --ti-time-range-picker-header-margin-bottom: 5px;
+  --ti-time-range-picker-header-title-display: none;
+  --ti-time-range-picker-header-text-align: center;
+  --ti-time-range-picker-header-border-bottom: #fff;
+  --ti-time-range-picker-header-color: var(--ti-common-color-info-normal, #252b3a);
+  --ti-time-range-picker-header-margin-left: 0;
+  --ti-time-range-picker-footer-height: 36px;
+  --ti-time-range-picker-footer-padding-top: 4px;
+  --ti-time-range-picker-footer-padding-right: 0;
+  --ti-time-range-picker-btn-cancel-display: inline-block;
+  --ti-time-range-picker-btn-bg-color: transparent;
+  --ti-time-range-picker-btn-padding-vertical: 0;
+  --ti-time-range-picker-btn-padding-horizontal: 5px;
+  --ti-time-range-picker-btn-border-radius: var(--ti-common-border-radius-normal, 2px);
+  --ti-time-range-picker-btn-height: 28px;
+  --ti-time-range-picker-btn-min-width: inherit;
+  --ti-time-range-picker-btn-font-weight: 800;
+  --ti-time-range-picker-btn-confirm-hover-bg-color: transparent;
+  --ti-time-range-picker-btn-text-color: #303133;
+  --ti-time-range-picker-btn-confirm-text-color: var(--ti-base-color-brand-7, #526ecc);
+  --ti-time-range-picker-border-color: var(--ti-common-color-line-dividing, #dfe1e6);
 }
--- a/packages/vue/src/picker/src/pc.vue
+++ b/packages/vue/src/picker/src/pc.vue
@ -67,7 +67,7 @@
      class="tiny-date-editor tiny-range-editor tiny-input tiny-input__inner"
      :class="[
        'tiny-date-editor--' + state.type,
-        state.pickerSize ? `tiny-range-editor--${state.pickerSize}` : '',
+        state.pickerSize ? `tiny-range-editor--${state.pickerSize} tiny-input-${state.pickerSize}` : '',
        state.pickerDisabled ? 'is-disabled' : '',
        state.pickerVisible ? 'is-active' : '',
        state.isDisplayOnly ? 'is-display-only' : ''
--- a/packages/vue/src/time-range/src/pc.vue
+++ b/packages/vue/src/time-range/src/pc.vue
@ -16,31 +16,43 @@
      <div class="tiny-time-range-picker__content">
        <div class="tiny-time-range-picker__cell">
          <div class="tiny-time-range-picker__header">
-            {{ t('ui.datepicker.startTime') }}
+            <span>{{ t('ui.datepicker.startTime') }}</span>
          </div>
-          <div
-            :class="{
-              'has-seconds': state.showSeconds,
-              'is-arrow': state.arrowControl
-            }"
-            class="tiny-time-range-picker__body tiny-time-panel__content"
-          >
-            <time-spinner
-              ref="minSpinner"
-              :show-seconds="state.showSeconds"
-              :am-pm-mode="state.amPmMode"
-              @change="handleMinChange"
-              :end-date="state.maxDate"
-              :arrow-control="state.arrowControl"
-              @select-range="setMinSelectionRange"
-              :date="state.minDate"
+          <div class="tiny-time-range-picker__content-date">
+            <div class="tiny-time-range-picker__header-title">
+              <span>{{ t('ui.datepicker.hour') }}</span>
+              <span>{{ t('ui.datepicker.minute') }}</span>
+              <span v-if="state.showSeconds">{{ t('ui.datepicker.second') }}</span>
+            </div>
+            <div
+              :class="{
+                'has-seconds': state.showSeconds,
+                'is-arrow': state.arrowControl
+              }"
+              class="tiny-time-range-picker__body tiny-time-panel__content"
            >
-            </time-spinner>
+              <time-spinner
+                ref="minSpinner"
+                :show-seconds="state.showSeconds"
+                :am-pm-mode="state.amPmMode"
+                @change="handleMinChange"
+                :end-date="state.maxDate"
+                :arrow-control="state.arrowControl"
+                @select-range="setMinSelectionRange"
+                :date="state.minDate"
+              >
+              </time-spinner>
+            </div>
          </div>
        </div>
        <div class="tiny-time-range-picker__cell">
          <div class="tiny-time-range-picker__header">
-            {{ t('ui.datepicker.endTime') }}
+            <span>{{ t('ui.datepicker.endTime') }}</span>
+          </div>
+          <div class="tiny-time-range-picker__header-title">
+            <span>{{ t('ui.datepicker.hour') }}</span>
+            <span>{{ t('ui.datepicker.minute') }}</span>
+            <span v-if="state.showSeconds">{{ t('ui.datepicker.second') }}</span>
          </div>
          <div
            :class="{
@ -63,18 +75,25 @@
          </div>
        </div>
      </div>
-      <div class="tiny-time-panel__footer">
-        <button type="button" class="tiny-time-panel__btn cancel" @click="handleCancel()">
+      <div class="tiny-time-range-picker__footer">
+        <tiny-button
+          v-if="!state.showTimePickerRangeButton"
+          class="tiny-time-range-picker__btn"
+          @click="handleCancel()"
+        >
          {{ t('ui.datepicker.cancel') }}
-        </button>
-        <button
-          type="button"
-          class="tiny-time-panel__btn confirm"
+        </tiny-button>
+        <tiny-button
          @click="handleConfirm()"
          :disabled="state.btnDisabled"
+          size="small"
+          :class="{
+            'tiny-time-range-picker__btn': !state.showTimePickerRangeButton,
+            confirm: !state.disabled && !state.showTimePickerRangeButton
+          }"
        >
          {{ t('ui.datepicker.confirm') }}
-        </button>
+        </tiny-button>
      </div>
    </div>
  </transition>
@ -84,11 +103,12 @@
 import { renderless, api } from '@opentiny/vue-renderless/time-range/vue'
 import { $prefix, setup, defineComponent } from '@opentiny/vue-common'
 import TimeSpinner from '@opentiny/vue-time-spinner'
+import Button from '@opentiny/vue-button'

 export default defineComponent({
  name: $prefix + 'TimeRange',
  emits: ['dodestroy', 'pick', 'select-range'],
-  components: { TimeSpinner },
+  components: { TimeSpinner, TinyButton: Button },
  props: {
    emitter: Object
  },