From 291fd37ec3b3422695d2ac360007f5abe1960517 Mon Sep 17 00:00:00 2001
From: kanghuiyi <1193185379@qq.com>
Date: Mon, 22 Feb 2021 16:12:52 +0800
Subject: [PATCH 1/2] style: modify the display style

---
 packages/varlet-cli/site/mobile/App.vue |  40 +++---
 packages/varlet-cli/site/pc/App.vue     | 162 +++++++++++++++---------
 packages/varlet-ui/src/cell/cell.less   |   1 +
 3 files changed, 126 insertions(+), 77 deletions(-)

diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
index edf6fd6bb24..fb2be9b92f3 100644
--- a/packages/varlet-cli/site/mobile/App.vue
+++ b/packages/varlet-cli/site/mobile/App.vue
@@ -8,23 +8,31 @@
 </template>
 
 <script lang="ts">
-export default {
-  data() {
+import { defineComponent, ref, Ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export default defineComponent({
+  setup() {
+    const componentName: Ref<string> = ref('')
+    const route = useRoute()
+    watch(
+      () => route.path,
+      (to: string) => {
+        const index = to.lastIndexOf('/')
+        const componentNameInner = to.slice(index + 1).replace(/-([a-z])/g, (all: string, i: string) => i.toUpperCase())
+        componentName.value = componentNameInner[0]?.toUpperCase() + componentNameInner.slice(1)
+      }
+    )
     return {
-      componentName: '',
+      componentName,
     }
   },
-  watch: {
-    $route(this: any, to: any) {
-      const index = to.path.lastIndexOf('/')
-      const componentName = to.path.slice(index + 1).replace(/-([a-z])/g, (all: string, i: string) => i.toUpperCase())
-      this.componentName = componentName[0]?.toUpperCase() + componentName.slice(1)
-    },
-  },
-}
+})
 </script>
 
 <style lang="less">
+@import '../varlet-ui/src/styles/var';
+
 body {
   margin: 0;
   padding: 0;
@@ -44,17 +52,19 @@ header {
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  background-color: #fff;
-  font-weight: 500;
+  background-color: @color-primary;
+  color: #fff;
   font-size: 18px;
-  height: 80px;
+  line-height: 40px;
+  height: 40px;
   position: fixed;
   z-index: 1;
   width: 100%;
+  font-weight: bold;
 }
 
 .router-view__block {
-  padding: 80px 15px 30px;
+  padding: 45px 15px 30px;
 }
 
 * {
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
index af89ed8188c..a260bc0b490 100644
--- a/packages/varlet-cli/site/pc/App.vue
+++ b/packages/varlet-cli/site/pc/App.vue
@@ -35,13 +35,19 @@
     </div>
     <div class="varlet-site-content">
       <div class="varlet-site-nav">
-        <p v-for="item in menu" class="varlet-site-nav__item" v-ripple @click="changeRoute(item)">
-          <span v-if="item.isTitle">{{ item.text[language] }}</span>
-          <a v-else>{{ item.text[language] }}</a>
-        </p>
+        <var-cell v-for="item in menu" class="varlet-site-nav__item" v-ripple @click="changeRoute(item)">
+          <span v-if="item.isTitle" class="varlet-site-nav__item--title">{{ item.text[language] }}</span>
+          <span
+            v-else
+            class="varlet-site-nav__item--link"
+            :class="`${item.doc === componentName ? 'varlet-site-nav__item--active' : ''}`"
+            >{{ item.text[language] }}</span
+          >
+        </var-cell>
       </div>
       <router-view />
       <div class="varlet-site-mobile">
+        <div class="varlet-site-empty"></div>
         <div class="varlet-site-mobile-content">
           <iframe :src="`./mobile.html#/${componentName}`"></iframe>
         </div>
@@ -54,54 +60,85 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, Ref, getCurrentInstance, watch } from 'vue'
 import Ripple from '../../../varlet-ui/src/ripple'
+import { useRoute, useRouter } from 'vue-router'
+import Cell from '../../../varlet-ui/src/cell'
 
 export default defineComponent({
-  computed: {},
   directives: { Ripple },
-  data() {
-    return {
-      menu: [],
-      language: '',
-      header: {},
-      componentName: 'button',
-      title: '',
-      versionList: ['2.10.14', '1.x', '3.x'],
-      isHideVersion: true,
-    }
+  components: {
+    [Cell.name]: Cell,
   },
-  methods: {
-    switchLanguage() {
-      this.language = this.language === 'zh_CN' ? 'en_US' : 'zh_CN'
-      const pathArr = this.$route.fullPath.split('/')
+  setup() {
+    type Menu = {
+      isTitle: boolean
+      doc: string
+      text: Record<string, string>
+    }
+    type Header = {
+      i18nButton: Record<string, string>
+      logo: string
+      search: Record<string, string>
+    }
+    const menu: Ref<Menu[]> = ref([])
+    const language: Ref<string> = ref('')
+    const header: Ref<Header> = ref({ i18nButton: {}, logo: '', search: {} })
+    const componentName = ref('button')
+    const title: Ref<string> = ref('')
+    const versionList: Ref<string[]> = ref()[('2.10.14', '1.x', '3.x')]
+    const isHideVersion: Ref<boolean> = ref(true)
+    const config = getCurrentInstance().appContext.config.globalProperties.$config
+    const { pc = {}, title: configTitle } = config
+    const {
+      header: configHeader = { i18nButton: {}, logo: '', search: {} },
+      menu: configMenu = [],
+      language: configLanguage,
+    } = pc
+    menu.value = configMenu
+    language.value = configLanguage
+    header.value = configHeader
+    title.value = configTitle
+    const route = useRoute()
+    const router = useRouter()
+    const switchLanguage = () => {
+      language.value = language.value === 'zh_CN' ? 'en_US' : 'zh_CN'
+      const pathArr = route.fullPath.split('/')
       const componentName = pathArr[pathArr.length - 1]
-      this.$router.push(`/${this.language}/${componentName}`)
-    },
-    changeRoute(item: any) {
-      this.$router.push(`/${this.language}/${item.doc}`)
-    },
-  },
-  created() {
-    const _this: any = this
-    const { pc = {}, title } = _this.$config
-    const { description, header = {}, logo, menu = [], language } = pc
-    this.menu = menu
-    this.language = language
-    this.header = header
-    this.title = title
-  },
-  watch: {
-    $route(to, from) {
-      // todo 还需拿取对应组件名的数组进行判断
-      const index = to.path.lastIndexOf('/')
-      this.componentName = to.path.slice(index + 1)
-    },
+      router.push(`/${language.value}/${componentName}`)
+    }
+    const changeRoute = (item) => {
+      if (item.isTitle) {
+        return false
+      }
+      router.push(`/${language.value}/${item.doc}`)
+    }
+    console.log(header.value)
+    watch(
+      () => route.path,
+      (to: string) => {
+        const index = to.lastIndexOf('/')
+        componentName.value = to.slice(index + 1)
+      }
+    )
+    return {
+      menu,
+      language,
+      header,
+      componentName,
+      title,
+      versionList,
+      isHideVersion,
+      switchLanguage,
+      changeRoute,
+    }
   },
 })
 </script>
 
 <style lang="less">
+@import '../varlet-ui/src/styles/var';
+
 body,
 html,
 #app {
@@ -120,7 +157,6 @@ iframe {
   width: 100%;
   height: 100%;
   border: none;
-  border-radius: 3.5vh;
 }
 
 .varlet {
@@ -136,10 +172,10 @@ iframe {
       align-self: center;
 
       &-content {
-        height: 99%;
+        height: 660px;
         position: absolute;
-        z-index: -1;
-        top: 0.5%;
+        z-index: -2;
+        top: 47px;
         width: calc(100% - 40px);
         margin-left: 20px;
       }
@@ -157,10 +193,20 @@ iframe {
       }
     }
 
+    &-empty {
+      height: 27px;
+      width: calc(100% - 40px);
+      margin-left: 20px;
+      background-color: @color-primary;
+      position: absolute;
+      top: 21px;
+      z-index: -1;
+    }
+
     &-header {
+      background-color: @color-primary;
       display: flex;
       align-items: center;
-      background-color: #001938;
       color: white;
       height: 60px;
       padding: 0 30px;
@@ -300,13 +346,14 @@ iframe {
       }
 
       h1 {
-        margin: 0 0 30px;
+        //margin: 0 0 30px;
+        line-height: 40px;
         font-size: 30px;
         cursor: default;
       }
 
       h2 {
-        margin: 45px 0 20px;
+        margin: 30px 0 20px;
         font-size: 25px;
       }
 
@@ -434,32 +481,23 @@ iframe {
         margin: 0;
         cursor: pointer;
 
-        a,
-        span {
-          display: inline-block;
-          margin: 0;
-          padding: 8px 0 8px 30px;
-          line-height: 28px;
-        }
-
-        span {
+        &--title {
           font-weight: 700;
           font-size: 16px;
         }
 
-        a {
-          text-decoration: none;
+        &--link {
           font-size: 14px;
           color: #455a64;
           transition: color 0.2s;
 
           &:hover {
-            color: blueviolet;
+            color: @color-primary;
           }
         }
 
-        .router-link-active {
-          color: blueviolet;
+        &--active {
+          color: @color-primary;
         }
       }
     }
diff --git a/packages/varlet-ui/src/cell/cell.less b/packages/varlet-ui/src/cell/cell.less
index ec2301e4ece..894f5d684dd 100644
--- a/packages/varlet-ui/src/cell/cell.less
+++ b/packages/varlet-ui/src/cell/cell.less
@@ -7,6 +7,7 @@
   outline: none;
   padding: 10px 16px;
   position: relative;
+  box-sizing: border-box;
   font-size: @font-size-md;
   &--border {
     &:after {

From 40048a4ad7963aae926bf3f66c4ba6804e8308c7 Mon Sep 17 00:00:00 2001
From: BeADre <beadre_wang@163.com>
Date: Mon, 22 Feb 2021 23:45:03 +0800
Subject: [PATCH 2/2] feat: time-picker

---
 .../varlet-ui/src/time-picker/TimePicker.vue  | 364 ++++++++++++++++++
 .../src/time-picker/__tests__/index.spec.js   |   7 +
 packages/varlet-ui/src/time-picker/clock.vue  | 272 +++++++++++++
 .../varlet-ui/src/time-picker/docs/en_US.md   |   0
 .../varlet-ui/src/time-picker/docs/zh_CN.md   |   0
 .../src/time-picker/example/index.vue         |  39 ++
 packages/varlet-ui/src/time-picker/index.ts   |   8 +
 packages/varlet-ui/src/time-picker/props.ts   |  53 +++
 .../varlet-ui/src/time-picker/timePicker.less | 156 ++++++++
 packages/varlet-ui/src/time-picker/utils.ts   |   8 +
 10 files changed, 907 insertions(+)
 create mode 100644 packages/varlet-ui/src/time-picker/TimePicker.vue
 create mode 100644 packages/varlet-ui/src/time-picker/__tests__/index.spec.js
 create mode 100644 packages/varlet-ui/src/time-picker/clock.vue
 create mode 100644 packages/varlet-ui/src/time-picker/docs/en_US.md
 create mode 100644 packages/varlet-ui/src/time-picker/docs/zh_CN.md
 create mode 100644 packages/varlet-ui/src/time-picker/example/index.vue
 create mode 100644 packages/varlet-ui/src/time-picker/index.ts
 create mode 100644 packages/varlet-ui/src/time-picker/props.ts
 create mode 100644 packages/varlet-ui/src/time-picker/timePicker.less
 create mode 100644 packages/varlet-ui/src/time-picker/utils.ts

diff --git a/packages/varlet-ui/src/time-picker/TimePicker.vue b/packages/varlet-ui/src/time-picker/TimePicker.vue
new file mode 100644
index 00000000000..aaa28567bdc
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/TimePicker.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="var-time-picker" :class="[shadow ? 'var-elevation--2' : null]">
+    <div class="var-time-picker-title" :style="{ background: headerColor || color }">
+      <div class="var-time-picker-title__time">
+        <div
+          class="var-time-picker-title__btn"
+          :class="type === 'hour' ? 'var-time-picker-title__btn--active' : null"
+          @click="checkPanel('hour')"
+        >
+          {{ time.hour }}
+        </div>
+        <span>:</span>
+        <div
+          class="var-time-picker-title__btn"
+          :class="type === 'minute' ? 'var-time-picker-title__btn--active' : null"
+          @click="checkPanel('minute')"
+        >
+          {{ time.minute }}
+        </div>
+        <span v-if="useSeconds">:</span>
+        <div
+          v-if="useSeconds"
+          class="var-time-picker-title__btn"
+          :class="type === 'second' ? 'var-time-picker-title__btn--active' : null"
+          @click="checkPanel('second')"
+        >
+          {{ time.second }}
+        </div>
+      </div>
+      <div class="var-time-picker-title__ampm" v-if="format === 'ampm'">
+        <div
+          class="var-time-picker-title__btn"
+          :class="ampm === 'am' ? 'var-time-picker-title__btn--active' : null"
+          @click="checkAmpm('am')"
+        >
+          AM
+        </div>
+        <div
+          class="var-time-picker-title__btn"
+          :class="ampm === 'pm' ? 'var-time-picker-title__btn--active' : null"
+          @click="checkAmpm('pm')"
+        >
+          PM
+        </div>
+      </div>
+    </div>
+    <div class="var-time-picker-body">
+      <div
+        class="var-time-picker-clock__container"
+        @touchstart="moveHand"
+        @touchmove="moveHand"
+        @touchend="end"
+        ref="container"
+      >
+        <transition name="var-time-picker-panel-fade">
+          <clock
+            :key="type"
+            ref="inner"
+            :type="type"
+            :ampm="ampm"
+            :color="color"
+            :is-inner="isInner"
+            :format="format"
+            :rad="getRad"
+            :time="time"
+            :use-seconds="useSeconds"
+            :max="max"
+            :min="min"
+            @update="update"
+          />
+        </transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  ComputedRef,
+  defineComponent,
+  onMounted,
+  reactive,
+  ref,
+  Ref,
+  watch,
+  DefineComponent,
+  UnwrapRef,
+} from 'vue'
+import dayjs from 'dayjs'
+import Clock from './clock.vue'
+import { props, Time, AmPm, hoursAmpm, hours24 } from './props'
+import { convertHour } from './utils'
+
+export default defineComponent({
+  name: 'VarTimePicker',
+  components: {
+    [Clock.name]: Clock,
+  },
+  props,
+  setup(props) {
+    const container: Ref<HTMLDivElement | null> = ref(null)
+    const inner: Ref<DefineComponent | null> = ref(null)
+    const isInner: Ref<boolean> = ref(false)
+    const isActualInner: Ref<boolean> = ref(false)
+    const hourRad: Ref<number> = ref(0)
+    const minuteRad: Ref<number> = ref(0)
+    const secondRad: Ref<number> = ref(0)
+    const type: Ref<keyof Time> = ref('hour')
+    const ampm: Ref<AmPm> = ref('am')
+    const isDisableHour: Ref<boolean> = ref(false)
+    const isDisableMinute: Ref<boolean> = ref(false)
+
+    const center: UnwrapRef<Record<string, number>> = reactive({
+      x: 0,
+      y: 0,
+    })
+    const innerRange: UnwrapRef<Record<string, Array<number>>> = reactive({
+      x: [],
+      y: [],
+    })
+
+    const time: ComputedRef<Time> = computed(() => {
+      const hourFormat = props.format === '24hr' ? 'HH' : 'hh'
+      if (!props.modelValue) {
+        return {
+          hour: '00',
+          minute: '00',
+          second: '00',
+        }
+      }
+      const [hour, minute, second] = props.modelValue.split(':')
+      return {
+        hour: dayjs()
+          .hour(+hour)
+          .format(hourFormat),
+        minute: dayjs()
+          .minute(+minute)
+          .format('mm'),
+        second: dayjs()
+          .second(+second)
+          .format('ss'),
+      }
+    })
+
+    const getRad: ComputedRef<number> = computed(() => {
+      if (type.value === 'hour') return hourRad.value
+      if (type.value === 'minute') return minuteRad.value
+      return secondRad.value
+    })
+
+    const update = (newTime: string) => {
+      props['onUpdate:modelValue']?.(newTime)
+      props.onChange?.(newTime)
+    }
+
+    const rad2deg = (rad: number): number => {
+      return rad * 57.29577951308232
+    }
+
+    const checkPanel = (panelType: keyof Time) => {
+      type.value = panelType
+    }
+    const checkAmpm = (ampmType: AmPm) => {
+      ampm.value = ampmType
+    }
+
+    const getInner = (clientX: number, clientY: number): boolean => {
+      const xIsInRange = clientX >= innerRange.x[0] && clientX <= innerRange.x[1]
+      const yIsInRange = clientY >= innerRange.y[0] && clientY <= innerRange.y[1]
+      return xIsInRange && yIsInRange
+    }
+
+    const getHourIndex = (rad: number): number => {
+      const value = rad / 30
+      return value >= 0 ? value : value + 12
+    }
+
+    const setHourRad = (clientX: number, clientY: number, roundDeg: number) => {
+      const { disableHour } = inner.value as DefineComponent
+      isActualInner.value = getInner(clientX, clientY)
+      const rad = Math.round(roundDeg / 30) * 30 + 90
+      const index = getHourIndex(rad)
+
+      const anotherHour = isInner.value ? hoursAmpm[index] : hours24[index]
+      if (!disableHour.includes(anotherHour)) {
+        isInner.value = props.format === '24hr' ? getInner(clientX, clientY) : false
+      }
+      if (isInner.value !== isActualInner.value) return
+
+      const newHour = isInner.value || ampm.value === 'pm' ? hours24[index] : hoursAmpm[index]
+      isDisableHour.value = disableHour.includes(newHour)
+      if (isDisableHour.value) return
+      hourRad.value = rad
+    }
+
+    const setMinuteRad = (roundDeg: number) => {
+      const { disableHour } = inner.value as DefineComponent
+      const rad = Math.round(roundDeg / 6) * 6 + 90
+      const radToMin = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60
+      const hour = convertHour(props.format, ampm.value, time.value.hour)
+      if (disableHour.includes(hour)) return true
+
+      if (props.max && !props.min) {
+        const [maxHour, maxMinute] = props.max.split(':')
+        if (+maxHour === +hour && radToMin > +maxMinute) {
+          isDisableMinute.value = true
+          return
+        }
+      } else if (!props.max && props.min) {
+        const [minHour, minMinute] = props.min.split(':')
+        if (+minHour === +hour && radToMin < +minMinute) {
+          isDisableMinute.value = true
+          return
+        }
+      } else if (props.max && props.min) {
+        const [maxHour, maxMinute] = props.max.split(':')
+        const [minHour, minMinute] = props.min.split(':')
+        if ((+minHour === +hour && radToMin < +minMinute) || (+maxHour === +hour && radToMin > +maxMinute)) {
+          isDisableMinute.value = true
+          return
+        }
+      }
+      isDisableMinute.value = false
+      minuteRad.value = rad
+    }
+
+    const setSecondRad = (roundDeg: number) => {
+      const { disableHour } = inner.value as DefineComponent
+      const rad = Math.round(roundDeg / 6) * 6 + 90
+      const radToSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60
+      const hour = convertHour(props.format, ampm.value, time.value.hour)
+      if (disableHour.includes(hour)) return true
+
+      if (props.max && !props.min) {
+        const [maxHour, maxMinute, maxSecond] = props.max.split(':')
+        if (
+          (+maxHour === +hour && +maxMinute < +time.value.minute) ||
+          (+maxHour === +hour && +maxMinute === +time.value.minute && radToSec > +maxSecond)
+        )
+          return
+      } else if (!props.max && props.min) {
+        const [minHour, minMinute, minSecond] = props.min.split(':')
+        if (
+          (+minHour === +hour && +minMinute > +time.value.minute) ||
+          (+minHour === +hour && +minMinute === +time.value.minute && radToSec > +minSecond)
+        )
+          return
+      } else if (props.max && props.min) {
+        const [maxHour, maxMinute, maxSecond] = props.max.split(':')
+        const [minHour, minMinute, minSecond] = props.min.split(':')
+
+        if (
+          (+maxHour === +hour && +maxMinute < +time.value.minute) ||
+          (+minHour === +hour && +minMinute > +time.value.minute) ||
+          (+maxHour === +hour && +maxMinute === +time.value.minute && radToSec > +maxSecond) ||
+          (+minHour === +hour && +minMinute === +time.value.minute && radToSec < +minSecond)
+        )
+          return
+      }
+      secondRad.value = rad
+    }
+
+    const moveHand = (event: TouchEvent) => {
+      event.preventDefault()
+      if (props.readonly) return
+      const { clientX, clientY } = event.touches[0]
+      const x = clientX - center.x
+      const y = clientY - center.y
+      const roundDeg = Math.round(rad2deg(Math.atan2(y, x)))
+
+      if (type.value === 'hour') setHourRad(clientX, clientY, roundDeg)
+      else if (type.value === 'minute') setMinuteRad(roundDeg)
+      else setSecondRad(roundDeg)
+    }
+
+    const end = () => {
+      if (props.readonly) return
+
+      if (type.value === 'hour') {
+        if (isDisableHour.value || isInner.value !== isActualInner.value) return
+        type.value = 'minute'
+        return
+      }
+      if (type.value === 'minute' && props.useSeconds && !isDisableMinute.value) type.value = 'second'
+    }
+
+    onMounted(() => {
+      const { left, top, width, height } = (container.value as HTMLDivElement).getBoundingClientRect()
+
+      center.x = left + width / 2
+      center.y = top + height / 2
+      if (props.format === '24hr') {
+        const { width: innerWidth, height: innerHeight } = (inner.value as DefineComponent).getSize()
+        innerRange.x = [center.x - innerWidth / 2 - 8, center.x + innerWidth / 2 + 8]
+        innerRange.y = [center.y - innerHeight / 2 - 8, center.y + innerHeight / 2 + 8]
+      }
+    })
+
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (value) {
+          const [hour, minute, second] = value.split(':')
+          const formatHour = dayjs()
+            .hour(+hour)
+            .format('hh')
+          const formatMinute = dayjs()
+            .minute(+minute)
+            .format('mm')
+          const formatSecond = dayjs()
+            .second(+second)
+            .format('ss')
+          hourRad.value = (formatHour === '12' ? 0 : +formatHour) * 30
+          minuteRad.value = +formatMinute * 6
+          secondRad.value = +formatSecond * 6
+          isInner.value =
+            props.format === '24hr' &&
+            hours24.includes(
+              dayjs()
+                .hour(+hour)
+                .format('HH')
+            )
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(ampm, (newAmpm) => {
+      let newTime
+      if (newAmpm === 'pm') {
+        const index = hoursAmpm.findIndex((hour) => +hour === +time.value.hour)
+        const pmHour = hours24[index]
+        const second = props.useSeconds ? `:${time.value.second}` : ''
+        newTime = `${pmHour}:${time.value.minute}${second}`
+      } else {
+        const second = props.useSeconds ? `:${time.value.second}` : ''
+        newTime = `${time.value.hour}:${time.value.minute}${second}`
+      }
+      props['onUpdate:modelValue']?.(newTime)
+      props.onChange?.(newTime)
+    })
+
+    return {
+      getRad,
+      time,
+      container,
+      inner,
+      isInner,
+      type,
+      ampm,
+      moveHand,
+      checkPanel,
+      checkAmpm,
+      end,
+      update,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import './timePicker';
+</style>
diff --git a/packages/varlet-ui/src/time-picker/__tests__/index.spec.js b/packages/varlet-ui/src/time-picker/__tests__/index.spec.js
new file mode 100644
index 00000000000..9072568f0b5
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const TimePicker = require('../../../cjs/time-picker').default
+const { render } = require('@testing-library/vue')
+
+test('test timePicker', async () => {
+  const wrapper = render(TimePicker)
+  console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/time-picker/clock.vue b/packages/varlet-ui/src/time-picker/clock.vue
new file mode 100644
index 00000000000..9e25c03fe0d
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/clock.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="var-time-picker-clock">
+    <div class="var-time-picker-clock__hand" :style="handStyle"></div>
+    <div
+      class="var-time-picker-clock__item"
+      :class="[
+        isActive(index, false) ? 'var-time-picker-clock__item--active' : null,
+        isDisable(time) ? 'var-time-picker-clock__item--disable' : null,
+      ]"
+      v-for="(time, index) in timeList"
+      :key="time"
+      :style="getStyle(index, false)"
+    >
+      {{ time }}
+    </div>
+    <div class="var-time-picker-clock__inner" ref="inner" v-if="format === '24hr' && type === 'hour'">
+      <div
+        class="var-time-picker-clock__item"
+        :class="[
+          isActive(index, true) ? 'var-time-picker-clock__item--active' : null,
+          isDisable(hour) ? 'var-time-picker-clock__item--disable' : null,
+        ]"
+        v-for="(hour, index) in hours24"
+        :key="hour"
+        :style="getStyle(index, true)"
+      >
+        {{ hour }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, ComputedRef, defineComponent, PropType, ref, Ref, watch } from 'vue'
+import dayjs from 'dayjs'
+import { hoursAmpm, hours24, minSec, Time, AmPm, Format } from './props'
+import { notConvert, convertHour } from './utils'
+
+export default defineComponent({
+  name: 'Clock',
+  props: {
+    isInner: {
+      type: Boolean,
+      required: true,
+    },
+    rad: {
+      type: Number,
+      required: true,
+    },
+    format: {
+      type: String as PropType<Format>,
+      default: 'ampm',
+    },
+    time: {
+      type: Object as PropType<Time>,
+      required: true,
+    },
+    useSeconds: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String as PropType<keyof Time>,
+      default: 'hour',
+    },
+    ampm: {
+      type: String as PropType<AmPm>,
+    },
+    color: {
+      type: String,
+    },
+    min: {
+      type: String,
+    },
+    max: {
+      type: String,
+    },
+  },
+  setup(props, { emit }) {
+    const inner: Ref<HTMLDivElement | null> = ref(null)
+    const disableHour: Ref<Array<string>> = ref([])
+    const disable24HourIndex: Ref<Array<number>> = ref([])
+
+    const handStyle = computed(() => ({
+      transform: `rotate(${props.rad}deg)`,
+      height: props.isInner && props.type === 'hour' ? 'calc(50% - 40px)' : 'calc(50% - 4px)',
+      backgroundColor: props.color,
+      borderColor: props.color,
+    }))
+
+    const activeItemIndex: ComputedRef<number> = computed(() => {
+      const value = props.rad / 30
+      return value >= 0 ? value : value + 12
+    })
+
+    const isActive: ComputedRef<(index: number, inner: boolean) => boolean> = computed(() => {
+      return (index, inner) => {
+        if (inner) return activeItemIndex.value === index && props.isInner
+        return activeItemIndex.value === index && (!props.isInner || props.type !== 'hour')
+      }
+    })
+
+    const timeList: ComputedRef<Array<string>> = computed(() => {
+      if (props.type === 'hour') return hoursAmpm
+      return minSec
+    })
+
+    const isDisable = (time: string) => {
+      if (props.type === 'hour') {
+        if (notConvert(props.format, props.ampm)) return disableHour.value.includes(time)
+        const timeIndex = hoursAmpm.findIndex((hour) => hour === time)
+        return disable24HourIndex.value.includes(timeIndex)
+      }
+      if (props.type === 'minute') {
+        const hour = convertHour(props.format, props.ampm, props.time.hour)
+        if (disableHour.value.includes(hour)) return true
+        if (props.max && !props.min) {
+          const [maxHour, maxMinute] = props.max.split(':')
+          return +maxHour === +hour && +time > +maxMinute
+        }
+        if (!props.max && props.min) {
+          const [minHour, minMinute] = props.min.split(':')
+          return +minHour === +hour && +time < +minMinute
+        }
+        if (props.max && props.min) {
+          const [maxHour, maxMinute] = props.max.split(':')
+          const [minHour, minMinute] = props.min.split(':')
+          return (+minHour === +hour && +time < +minMinute) || (+maxHour === +hour && +time > +maxMinute)
+        }
+        return false
+      }
+      if (props.type === 'second') {
+        const hour = convertHour(props.format, props.ampm, props.time.hour)
+        if (disableHour.value.includes(hour)) return true
+        if (props.max && !props.min) {
+          const [maxHour, maxMinute, maxSecond] = props.max.split(':')
+          return (
+            (+maxHour === +hour && +maxMinute < +props.time.minute) ||
+            (+maxMinute === +props.time.minute && +time > +maxSecond)
+          )
+        }
+        if (!props.max && props.min) {
+          const [minHour, minMinute, minSecond] = props.min.split(':')
+          return (
+            (+minHour === +hour && +minMinute > +props.time.minute) ||
+            (+minMinute === +props.time.minute && +time > +minSecond)
+          )
+        }
+        if (props.max && props.min) {
+          const [maxHour, maxMinute, maxSecond] = props.max.split(':')
+          const [minHour, minMinute, minSecond] = props.min.split(':')
+
+          return (
+            (+maxHour === +hour && +maxMinute < +props.time.minute) ||
+            (+minHour === +hour && +minMinute > +props.time.minute) ||
+            (+maxHour === +hour && +maxMinute === +props.time.minute && +time > +maxSecond) ||
+            (+minHour === +hour && +minMinute === +props.time.minute && +time < +minSecond)
+          )
+        }
+        return false
+      }
+    }
+
+    const getStyle = (index: number, inner: boolean) => {
+      const rad = ((2 * Math.PI) / 12) * index - Math.PI / 2
+      const left = 50 * (1 + Math.cos(rad))
+      const top = 50 * (1 + Math.sin(rad))
+
+      return {
+        left: `${left}%`,
+        top: `${top}%`,
+        backgroundColor: isActive.value(index, inner) ? props.color : null,
+      }
+    }
+
+    const getSize = () => {
+      const { width, height } = (inner.value as HTMLDivElement).getBoundingClientRect()
+      return {
+        width,
+        height,
+        handStyle,
+      }
+    }
+
+    const getHour = (): string => {
+      if (props.ampm === 'am')
+        return dayjs()
+          .hour(+hoursAmpm[activeItemIndex.value])
+          .format('hh')
+      return hours24[activeItemIndex.value]
+    }
+
+    watch([activeItemIndex, () => props.isInner], ([index, inner], [oldIndex, oldInner]) => {
+      if ((index === oldIndex && inner === oldInner) || props.type !== 'hour') return
+      const newHour = inner ? hours24[activeItemIndex.value] : getHour()
+      const second = props.useSeconds ? `:${props.time.second}` : ''
+      const newTime = `${newHour}:${props.time.minute}${second}`
+      emit('update', newTime)
+    })
+
+    watch(
+      () => props.rad,
+      (rad, oldRad) => {
+        if (props.type === 'hour') return
+        const radToMinSec = rad / 6 >= 0 ? rad / 6 : rad / 6 + 60
+        const oldRadToMinSec = oldRad / 6 >= 0 ? oldRad / 6 : oldRad / 6 + 60
+        if (radToMinSec === oldRadToMinSec) return
+
+        if (props.type === 'minute') {
+          const hour = convertHour(props.format, props.ampm, props.time.hour)
+          const newMinute = dayjs().minute(radToMinSec).format('mm')
+          const second = props.useSeconds ? `:${props.time.second}` : ''
+          const newTime = `${hour}:${newMinute}${second}`
+          emit('update', newTime)
+        }
+        if (props.type === 'second') {
+          const hour = convertHour(props.format, props.ampm, props.time.hour)
+          const newSecond = dayjs().second(radToMinSec).format('ss')
+          const second = props.useSeconds ? `:${newSecond}` : ''
+          const newTime = `${hour}:${props.time.minute}${second}`
+          emit('update', newTime)
+        }
+      }
+    )
+
+    watch(
+      [() => props.max, () => props.min],
+      ([max, min]) => {
+        disableHour.value = []
+        if (max && !min) {
+          const [maxHour] = max.split(':')
+          const disableAmpmHours = hoursAmpm.filter((hour) => +hour > +maxHour)
+          const disable24Hours = hours24.filter((hour) => +hour > +maxHour)
+          disableHour.value = [...disableAmpmHours, ...disable24Hours]
+          return
+        }
+        if (!max && min) {
+          const [minHour] = min.split(':')
+          const disableAmpmHours = hoursAmpm.filter((hour) => +hour < +minHour)
+          const disable24Hours = hours24.filter((hour) => +hour < +minHour)
+          disableHour.value = [...disableAmpmHours, ...disable24Hours]
+          return
+        }
+        if (max && min) {
+          const [maxHour] = max.split(':')
+          const [minHour] = min.split(':')
+          const disableAmpmHours = hoursAmpm.filter((hour) => +hour < +minHour || +hour > +maxHour)
+          const disable24Hours = hours24.filter((hour) => +hour < +minHour || +hour > +maxHour)
+          disableHour.value = [...disableAmpmHours, ...disable24Hours]
+        }
+        disable24HourIndex.value = disableHour.value
+          .map((hour) => hours24.findIndex((hour24) => hour === hour24))
+          .filter((hour) => hour >= 0)
+      },
+      { immediate: true }
+    )
+
+    return {
+      hours24,
+      timeList,
+      inner,
+      handStyle,
+      disableHour,
+      isActive,
+      isDisable,
+      getSize,
+      getStyle,
+      activeItemIndex,
+    }
+  },
+})
+</script>
diff --git a/packages/varlet-ui/src/time-picker/docs/en_US.md b/packages/varlet-ui/src/time-picker/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/time-picker/docs/zh_CN.md b/packages/varlet-ui/src/time-picker/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/time-picker/example/index.vue b/packages/varlet-ui/src/time-picker/example/index.vue
new file mode 100644
index 00000000000..ff7a450b083
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/example/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <var-time-picker
+    v-model="date"
+    shadow
+    header-color="purple"
+    color="#7bb872"
+    min="2:28:38"
+    max="19:40:22"
+    @change="change"
+  />
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import TimePicker from '..'
+
+export default defineComponent({
+  name: 'TimePickerExample',
+  components: {
+    [TimePicker.name]: TimePicker,
+  },
+  setup() {
+    const date = ref('')
+    const change = (time) => {
+      console.log(time)
+    }
+    return {
+      date,
+      change,
+    }
+  },
+})
+</script>
+
+<style scoped>
+.example {
+  background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/time-picker/index.ts b/packages/varlet-ui/src/time-picker/index.ts
new file mode 100644
index 00000000000..baf6ea7292a
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import TimePicker from './TimePicker.vue'
+
+TimePicker.install = function (app: App) {
+  app.component(TimePicker.name, TimePicker)
+}
+
+export default TimePicker
diff --git a/packages/varlet-ui/src/time-picker/props.ts b/packages/varlet-ui/src/time-picker/props.ts
new file mode 100644
index 00000000000..4df65d61a3f
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/props.ts
@@ -0,0 +1,53 @@
+import { PropType } from 'vue'
+
+export type Format = 'ampm' | '24hr'
+export type AmPm = 'am' | 'pm'
+export type Time = {
+  hour: string
+  minute: string
+  second?: string
+}
+
+export const hoursAmpm = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
+export const hours24 = ['00', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
+export const minSec = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
+
+export const props = {
+  modelValue: {
+    type: String,
+  },
+  shadow: {
+    type: Boolean,
+    default: false,
+  },
+  color: {
+    type: String,
+  },
+  headerColor: {
+    type: String,
+  },
+  format: {
+    type: String as PropType<Format>,
+    default: 'ampm',
+  },
+  min: {
+    type: String,
+  },
+  max: {
+    type: String,
+  },
+  useSeconds: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  'onUpdate:modelValue': {
+    type: Function,
+  },
+  onChange: {
+    type: Function,
+  },
+}
diff --git a/packages/varlet-ui/src/time-picker/timePicker.less b/packages/varlet-ui/src/time-picker/timePicker.less
new file mode 100644
index 00000000000..1839944c262
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/timePicker.less
@@ -0,0 +1,156 @@
+@import '../styles/elevation';
+@import '../styles/var';
+
+.var-time-picker {
+  border-radius: 4px;
+  contain: layout style;
+  display: flex;
+  flex-direction: column;
+  font-size: @font-size-md;
+  position: relative;
+  min-width: 290px;
+  height: 385px;
+  overflow: hidden;
+
+  &-title {
+    padding: 16px;
+    color: white;
+    background: @color-primary;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+
+    &__time {
+      display: flex;
+      justify-content: flex-end;
+
+      .var-time-picker-title__btn {
+        font-size: 50px;
+        align-items: center;
+        margin: 0 5px;
+      }
+
+      span {
+        font-size: 50px;
+      }
+    }
+
+    &__btn {
+      opacity: 0.6;
+      cursor: pointer;
+      transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+      white-space: nowrap;
+
+      &--active {
+        opacity: 1;
+      }
+    }
+
+    &__ampm {
+      margin-left: 5px;
+    }
+  }
+
+  &-body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-clock {
+    position: absolute;
+    bottom: 27px;
+    left: 27px;
+    right: 27px;
+    top: 27px;
+
+    &__container {
+      width: 270px;
+      height: 270px;
+      background: #e0e0e0;
+      border-radius: 50%;
+      position: relative;
+    }
+
+    &__hand {
+      height: calc(50% - 4px);
+      width: 2px;
+      bottom: 50%;
+      left: calc(50% - 1px);
+      transform-origin: center bottom;
+      position: absolute;
+      will-change: transform;
+      z-index: 1;
+      background-color: @color-primary;
+      border-color: @color-primary;
+
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        border-radius: 100%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      &::before {
+        background: transparent;
+        border: 2px solid;
+        border-color: inherit;
+        width: 10px;
+        height: 10px;
+        top: -5px;
+      }
+
+      &::after {
+        height: 4px;
+        width: 4px;
+        top: 100%;
+        border-style: solid;
+        border-color: inherit;
+        background-color: inherit;
+      }
+    }
+
+    &__item {
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      height: 32px;
+      position: absolute;
+      width: 32px;
+      user-select: none;
+      transform: translate(-50%, -50%);
+
+      &--active {
+        background: @color-primary;
+        z-index: 2;
+        color: #fff;
+      }
+
+      &--disable {
+        color: rgba(0, 0, 0, 0.26);
+      }
+    }
+
+    &__inner {
+      position: absolute;
+      bottom: 36px;
+      left: 36px;
+      right: 36px;
+      top: 36px;
+    }
+  }
+
+  &-panel-fade-enter-from,
+  &-panel-fade-leave-to {
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+    opacity: 0;
+  }
+
+  &-panel-fade-leave-active {
+    position: absolute;
+  }
+}
diff --git a/packages/varlet-ui/src/time-picker/utils.ts b/packages/varlet-ui/src/time-picker/utils.ts
new file mode 100644
index 00000000000..4b8f21b68b3
--- /dev/null
+++ b/packages/varlet-ui/src/time-picker/utils.ts
@@ -0,0 +1,8 @@
+import { hours24, hoursAmpm, AmPm } from './props'
+
+export const notConvert = (format: string, ampm: AmPm | undefined) => format === '24hr' || ampm === 'am'
+
+export const convertHour = (format: string, ampm: AmPm | undefined, hour: string) => {
+  const index = hoursAmpm.findIndex((hourAmpm) => +hourAmpm === +hour)
+  return notConvert(format, ampm) ? hour : hours24[index]
+}