diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
index 06af0a63b..3e55bdfca 100644
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -1,9 +1,10 @@
 import Select from '../select';
 import { Group, Button } from '../radio';
-import { CalendarMode } from './generateCalendar';
-import { defineComponent, ref, Ref } from 'vue';
-import { Locale } from '../vc-picker/interface';
-import { GenerateConfig } from '../vc-picker/generate';
+import type { CalendarMode } from './generateCalendar';
+import type { Ref } from 'vue';
+import { defineComponent, ref } from 'vue';
+import type { Locale } from '../vc-picker/interface';
+import type { GenerateConfig } from '../vc-picker/generate';
 
 const YearSelectOffset = 10;
 const YearSelectTotal = 20;
@@ -72,6 +73,7 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {
     />
   );
 }
+YearSelect.inheritAttrs = false;
 
 function MonthSelect<DateType>(props: SharedProps<DateType>) {
   const { prefixCls, fullscreen, validRange, value, generateConfig, locale, onChange, divRef } =
@@ -115,6 +117,8 @@ function MonthSelect<DateType>(props: SharedProps<DateType>) {
   );
 }
 
+MonthSelect.inheritAttrs = false;
+
 interface ModeSwitchProps<DateType> extends Omit<SharedProps<DateType>, 'onChange'> {
   mode: CalendarMode;
   onModeChange: (type: CalendarMode) => void;
@@ -136,6 +140,7 @@ function ModeSwitch<DateType>(props: ModeSwitchProps<DateType>) {
     </Group>
   );
 }
+ModeSwitch.inheritAttrs = false;
 
 export interface CalendarHeaderProps<DateType> {
   prefixCls: string;
@@ -151,6 +156,7 @@ export interface CalendarHeaderProps<DateType> {
 
 export default defineComponent<CalendarHeaderProps<any>>({
   name: 'CalendarHeader',
+  inheritAttrs: false,
   setup(_props, { attrs }) {
     const divRef = ref<HTMLDivElement>(null);
     return () => {
diff --git a/components/calendar/dayjs.tsx b/components/calendar/dayjs.tsx
index 009d8c4c4..fc3222303 100644
--- a/components/calendar/dayjs.tsx
+++ b/components/calendar/dayjs.tsx
@@ -1,4 +1,4 @@
-import { Dayjs } from 'dayjs';
+import type { Dayjs } from 'dayjs';
 import generateConfig from '../vc-picker/generate/dayjs';
 import { withInstall } from '../_util/type';
 import generateCalendar, { CalendarProps } from './generateCalendar';
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index 64219740d..51b1bed5c 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -1,9 +1,9 @@
 import useMergedState from '../_util/hooks/useMergedState';
 import padStart from 'lodash-es/padStart';
-import { PickerPanel as RCPickerPanel } from '../vc-picker';
-import { Locale } from '../vc-picker/interface';
-import { GenerateConfig } from '../vc-picker/generate';
-import {
+import { PickerPanel } from '../vc-picker';
+import type { Locale } from '../vc-picker/interface';
+import type { GenerateConfig } from '../vc-picker/generate';
+import type {
   PickerPanelBaseProps as RCPickerPanelBaseProps,
   PickerPanelDateProps as RCPickerPanelDateProps,
   PickerPanelTimeProps as RCPickerPanelTimeProps,
@@ -11,8 +11,9 @@ import {
 import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import enUS from './locale/en_US';
 import CalendarHeader from './Header';
-import { VueNode } from '../_util/type';
-import { App, computed, defineComponent, toRef } from 'vue';
+import type { VueNode } from '../_util/type';
+import type { App } from 'vue';
+import { computed, defineComponent, toRef } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
 
@@ -255,11 +256,11 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
           <div
             {...attrs}
             class={classNames(
-              calendarPrefixCls,
+              calendarPrefixCls.value,
               {
-                [`${calendarPrefixCls}-full`]: fullscreen,
-                [`${calendarPrefixCls}-mini`]: !fullscreen,
-                [`${calendarPrefixCls}-rtl`]: direction.value === 'rtl',
+                [`${calendarPrefixCls.value}-full`]: fullscreen,
+                [`${calendarPrefixCls.value}-mini`]: !fullscreen,
+                [`${calendarPrefixCls.value}-rtl`]: direction.value === 'rtl',
               },
               attrs.class,
             )}
@@ -285,7 +286,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
               />
             )}
 
-            <RCPickerPanel
+            <PickerPanel
               value={mergedValue.value}
               prefixCls={prefixCls.value}
               locale={mergedLocale.value.lang}
diff --git a/components/calendar/moment.tsx b/components/calendar/moment.tsx
index f93d033f8..4acc05a03 100644
--- a/components/calendar/moment.tsx
+++ b/components/calendar/moment.tsx
@@ -1,4 +1,4 @@
-import { Moment } from 'moment';
+import type { Moment } from 'moment';
 import generateConfig from '../vc-picker/generate/moment';
 import { withInstall } from '../_util/type';
 import generateCalendar, { CalendarProps } from './generateCalendar';
diff --git a/components/date-picker/date-fns.tsx b/components/date-picker/date-fns.tsx
index 57fd2050b..f7e6c3cc2 100755
--- a/components/date-picker/date-fns.tsx
+++ b/components/date-picker/date-fns.tsx
@@ -6,7 +6,7 @@ import type {
   RangePickerProps as BaseRangePickerProps,
 } from './generatePicker';
 import generatePicker from './generatePicker';
-import { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
+import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
 
 export type DatePickerProps = PickerProps<Date> & ExtraDatePickerProps<Date>;
 export type MonthPickerProps = Omit<PickerDateProps<Date>, 'picker'> & ExtraDatePickerProps<Date>;
diff --git a/components/date-picker/dayjs.tsx b/components/date-picker/dayjs.tsx
index ec5aea6d0..44cefca2e 100755
--- a/components/date-picker/dayjs.tsx
+++ b/components/date-picker/dayjs.tsx
@@ -7,7 +7,7 @@ import type {
   RangePickerProps as BaseRangePickerProps,
 } from './generatePicker';
 import generatePicker from './generatePicker';
-import { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
+import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
 
 export type DatePickerProps = PickerProps<Dayjs> & ExtraDatePickerProps<Dayjs>;
 export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'> & ExtraDatePickerProps<Dayjs>;
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index bdab1df7b..9644af395 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -12,9 +12,10 @@ import { getTimeProps, Components } from '.';
 import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import { commonProps, ExtraRangePickerProps, rangePickerProps } from './props';
-import { PanelMode, RangeValue } from '../../vc-picker/interface';
-import { RangePickerSharedProps } from '../../vc-picker/RangePicker';
+import type { ExtraRangePickerProps } from './props';
+import { commonProps, rangePickerProps } from './props';
+import type { PanelMode, RangeValue } from '../../vc-picker/interface';
+import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
 import devWarning from '../../vc-util/devWarning';
 
 export default function generateRangePicker<DateType>(
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index d5f1e2275..d947729eb 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -9,10 +9,12 @@ import { getPlaceholder } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
 import type { PickerProps, PickerDateProps, PickerTimeProps } from '.';
 import { getTimeProps, Components } from '.';
-import { computed, DefineComponent, defineComponent, ref } from 'vue';
+import type { DefineComponent } from 'vue';
+import { computed, defineComponent, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
-import { commonProps, datePickerProps, ExtraDatePickerProps } from './props';
+import type { ExtraDatePickerProps } from './props';
+import { commonProps, datePickerProps } from './props';
 import devWarning from '../../vc-util/devWarning';
 
 export default function generatePicker<DateType>(
diff --git a/components/date-picker/moment.tsx b/components/date-picker/moment.tsx
index 7ffdc2482..2141f11b9 100755
--- a/components/date-picker/moment.tsx
+++ b/components/date-picker/moment.tsx
@@ -7,7 +7,7 @@ import type {
   RangePickerProps as BaseRangePickerProps,
 } from './generatePicker';
 import generatePicker from './generatePicker';
-import { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
+import type { ExtraDatePickerProps, ExtraRangePickerProps } from './generatePicker/props';
 
 export type DatePickerProps = PickerProps<Moment> & ExtraDatePickerProps<Moment>;
 export type MonthPickerProps = Omit<PickerDateProps<Moment>, 'picker'> &
diff --git a/components/locale-provider/LocaleReceiver.tsx b/components/locale-provider/LocaleReceiver.tsx
index ed4349a54..dc324e8ca 100644
--- a/components/locale-provider/LocaleReceiver.tsx
+++ b/components/locale-provider/LocaleReceiver.tsx
@@ -1,4 +1,5 @@
 import type { VNodeTypes, PropType, ComputedRef } from 'vue';
+import { toRefs, unref } from 'vue';
 import { inject, defineComponent, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultLocaleData from './default';
@@ -66,13 +67,13 @@ type LocaleComponent = keyof Locale;
 
 export function useLocaleReceiver<T extends LocaleComponent>(
   componentName: T,
-  defaultLocale?: Locale[T] | Function,
+  defaultLocale?: Locale[T] | Function | ComputedRef<Locale[T] | Function>,
 ): [ComputedRef<Locale[T]>] {
   const localeData = inject<LocaleReceiverContext>('localeData', {} as LocaleReceiverContext);
   const componentLocale = computed<Locale[T]>(() => {
     const { antLocale } = localeData;
     const locale =
-      defaultLocale || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
+      unref(defaultLocale) || (defaultLocaleData as LocaleInterface)[componentName || 'global'];
     const localeFromContext = componentName && antLocale ? antLocale[componentName] : {};
 
     return {
diff --git a/components/time-picker/date-fns.tsx b/components/time-picker/date-fns.tsx
index d3e7b3a11..c2f363cd3 100644
--- a/components/time-picker/date-fns.tsx
+++ b/components/time-picker/date-fns.tsx
@@ -1,7 +1,7 @@
 import createTimePicker from './time-picker';
 import dateFnsGenerateConfig from '../vc-picker/generate/dateFns';
-import { App } from 'vue';
-import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
+import type { App } from 'vue';
+import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
 
 const { TimePicker, TimeRangePicker } = createTimePicker<Date>(dateFnsGenerateConfig);
 
diff --git a/components/time-picker/dayjs.tsx b/components/time-picker/dayjs.tsx
index e9e57e219..fe3f702ce 100644
--- a/components/time-picker/dayjs.tsx
+++ b/components/time-picker/dayjs.tsx
@@ -1,8 +1,8 @@
-import { Dayjs } from 'dayjs';
+import type { Dayjs } from 'dayjs';
 import createTimePicker from './time-picker';
 import dayjsGenerateConfig from '../vc-picker/generate/dayjs';
-import { App } from 'vue';
-import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
+import type { App } from 'vue';
+import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
 
 const { TimePicker, TimeRangePicker } = createTimePicker<Dayjs>(dayjsGenerateConfig);
 
diff --git a/components/time-picker/locale/ar_EG.tsx b/components/time-picker/locale/ar_EG.tsx
index 865610375..87e95b28d 100644
--- a/components/time-picker/locale/ar_EG.tsx
+++ b/components/time-picker/locale/ar_EG.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'اختيار الوقت',
diff --git a/components/time-picker/locale/az_AZ.tsx b/components/time-picker/locale/az_AZ.tsx
index d1944d919..d016e5b57 100644
--- a/components/time-picker/locale/az_AZ.tsx
+++ b/components/time-picker/locale/az_AZ.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Vaxtı seç',
diff --git a/components/time-picker/locale/bg_BG.tsx b/components/time-picker/locale/bg_BG.tsx
index 62c0ba812..d18122b26 100644
--- a/components/time-picker/locale/bg_BG.tsx
+++ b/components/time-picker/locale/bg_BG.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Избор на час',
diff --git a/components/time-picker/locale/by_BY.tsx b/components/time-picker/locale/by_BY.tsx
index fff5ce8e2..750979381 100644
--- a/components/time-picker/locale/by_BY.tsx
+++ b/components/time-picker/locale/by_BY.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Выберыце час',
diff --git a/components/time-picker/locale/ca_ES.tsx b/components/time-picker/locale/ca_ES.tsx
index f0a9e8780..390c6f1eb 100644
--- a/components/time-picker/locale/ca_ES.tsx
+++ b/components/time-picker/locale/ca_ES.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Seleccionar hora',
diff --git a/components/time-picker/locale/cs_CZ.tsx b/components/time-picker/locale/cs_CZ.tsx
index 907efd222..2fc167197 100644
--- a/components/time-picker/locale/cs_CZ.tsx
+++ b/components/time-picker/locale/cs_CZ.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Vybrat čas',
diff --git a/components/time-picker/locale/da_DK.tsx b/components/time-picker/locale/da_DK.tsx
index 0bf9bf9ca..81d0d5ee8 100644
--- a/components/time-picker/locale/da_DK.tsx
+++ b/components/time-picker/locale/da_DK.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Vælg tid',
diff --git a/components/time-picker/locale/de_DE.tsx b/components/time-picker/locale/de_DE.tsx
index d343e86b0..f4b00c50d 100644
--- a/components/time-picker/locale/de_DE.tsx
+++ b/components/time-picker/locale/de_DE.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Zeit auswählen',
diff --git a/components/time-picker/locale/el_GR.tsx b/components/time-picker/locale/el_GR.tsx
index e7828f2d6..199e1a5e6 100644
--- a/components/time-picker/locale/el_GR.tsx
+++ b/components/time-picker/locale/el_GR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Επιλέξτε ώρα',
diff --git a/components/time-picker/locale/en_GB.tsx b/components/time-picker/locale/en_GB.tsx
index 7f4b5b42f..d04444685 100644
--- a/components/time-picker/locale/en_GB.tsx
+++ b/components/time-picker/locale/en_GB.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Select time',
diff --git a/components/time-picker/locale/en_US.tsx b/components/time-picker/locale/en_US.tsx
index 14e181f9e..56d89dd08 100644
--- a/components/time-picker/locale/en_US.tsx
+++ b/components/time-picker/locale/en_US.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Select time',
diff --git a/components/time-picker/locale/es_ES.tsx b/components/time-picker/locale/es_ES.tsx
index f0a9e8780..390c6f1eb 100644
--- a/components/time-picker/locale/es_ES.tsx
+++ b/components/time-picker/locale/es_ES.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Seleccionar hora',
diff --git a/components/time-picker/locale/et_EE.tsx b/components/time-picker/locale/et_EE.tsx
index 7ded47e07..72dd5cb8e 100644
--- a/components/time-picker/locale/et_EE.tsx
+++ b/components/time-picker/locale/et_EE.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Vali aeg',
diff --git a/components/time-picker/locale/fa_IR.tsx b/components/time-picker/locale/fa_IR.tsx
index 70fcfe4bd..ef5bb6e42 100644
--- a/components/time-picker/locale/fa_IR.tsx
+++ b/components/time-picker/locale/fa_IR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'انتخاب زمان',
diff --git a/components/time-picker/locale/fi_FI.tsx b/components/time-picker/locale/fi_FI.tsx
index 8c689a94d..bc0c0b4fa 100644
--- a/components/time-picker/locale/fi_FI.tsx
+++ b/components/time-picker/locale/fi_FI.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Valitse aika',
diff --git a/components/time-picker/locale/fr_BE.tsx b/components/time-picker/locale/fr_BE.tsx
index 52bbeda32..f066f6c27 100644
--- a/components/time-picker/locale/fr_BE.tsx
+++ b/components/time-picker/locale/fr_BE.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: "Sélectionner l'heure",
diff --git a/components/time-picker/locale/fr_CA.tsx b/components/time-picker/locale/fr_CA.tsx
index 67e0ba57e..8bf25122d 100644
--- a/components/time-picker/locale/fr_CA.tsx
+++ b/components/time-picker/locale/fr_CA.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: "Sélectionner l'heure",
diff --git a/components/time-picker/locale/fr_FR.tsx b/components/time-picker/locale/fr_FR.tsx
index 67e0ba57e..8bf25122d 100644
--- a/components/time-picker/locale/fr_FR.tsx
+++ b/components/time-picker/locale/fr_FR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: "Sélectionner l'heure",
diff --git a/components/time-picker/locale/ga_IE.tsx b/components/time-picker/locale/ga_IE.tsx
index e608c74b5..3a2206903 100644
--- a/components/time-picker/locale/ga_IE.tsx
+++ b/components/time-picker/locale/ga_IE.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Roghnaigh am',
diff --git a/components/time-picker/locale/gl_ES.tsx b/components/time-picker/locale/gl_ES.tsx
index 88c3729e9..2a51d722a 100644
--- a/components/time-picker/locale/gl_ES.tsx
+++ b/components/time-picker/locale/gl_ES.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Escolla hora',
diff --git a/components/time-picker/locale/he_IL.tsx b/components/time-picker/locale/he_IL.tsx
index 0eb825657..63b764f82 100644
--- a/components/time-picker/locale/he_IL.tsx
+++ b/components/time-picker/locale/he_IL.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'בחר שעה',
diff --git a/components/time-picker/locale/hi_IN.tsx b/components/time-picker/locale/hi_IN.tsx
index fb87fbee2..96f4608a3 100644
--- a/components/time-picker/locale/hi_IN.tsx
+++ b/components/time-picker/locale/hi_IN.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'समय का चयन करें',
diff --git a/components/time-picker/locale/hr_HR.tsx b/components/time-picker/locale/hr_HR.tsx
index d565f6f25..484eec8e1 100644
--- a/components/time-picker/locale/hr_HR.tsx
+++ b/components/time-picker/locale/hr_HR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Odaberite vrijeme',
diff --git a/components/time-picker/locale/hu_HU.tsx b/components/time-picker/locale/hu_HU.tsx
index 63696d67c..e3ce591c0 100644
--- a/components/time-picker/locale/hu_HU.tsx
+++ b/components/time-picker/locale/hu_HU.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Válasszon időt',
diff --git a/components/time-picker/locale/id_ID.tsx b/components/time-picker/locale/id_ID.tsx
index aefffb16e..033637a5e 100644
--- a/components/time-picker/locale/id_ID.tsx
+++ b/components/time-picker/locale/id_ID.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Pilih waktu',
diff --git a/components/time-picker/locale/is_IS.tsx b/components/time-picker/locale/is_IS.tsx
index 1d1d73bca..efdf1cab6 100644
--- a/components/time-picker/locale/is_IS.tsx
+++ b/components/time-picker/locale/is_IS.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Velja tíma',
diff --git a/components/time-picker/locale/it_IT.tsx b/components/time-picker/locale/it_IT.tsx
index 0666ba6e3..6aa9d8034 100644
--- a/components/time-picker/locale/it_IT.tsx
+++ b/components/time-picker/locale/it_IT.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: "Selezionare l'orario",
diff --git a/components/time-picker/locale/ja_JP.tsx b/components/time-picker/locale/ja_JP.tsx
index 5bfcda80f..4411853b0 100644
--- a/components/time-picker/locale/ja_JP.tsx
+++ b/components/time-picker/locale/ja_JP.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: '時間を選択',
diff --git a/components/time-picker/locale/kk_KZ.tsx b/components/time-picker/locale/kk_KZ.tsx
index fa01c1f5e..0d5eff5df 100644
--- a/components/time-picker/locale/kk_KZ.tsx
+++ b/components/time-picker/locale/kk_KZ.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Уақытты таңдаңыз',
diff --git a/components/time-picker/locale/kmr_IQ.tsx b/components/time-picker/locale/kmr_IQ.tsx
index a02ab860d..07cb074c2 100755
--- a/components/time-picker/locale/kmr_IQ.tsx
+++ b/components/time-picker/locale/kmr_IQ.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Demê hilbijêre',
diff --git a/components/time-picker/locale/kn_IN.tsx b/components/time-picker/locale/kn_IN.tsx
index 4819666c7..9fc680548 100644
--- a/components/time-picker/locale/kn_IN.tsx
+++ b/components/time-picker/locale/kn_IN.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'ಸಮಯ ಆಯ್ಕೆಮಾಡಿ',
diff --git a/components/time-picker/locale/ko_KR.tsx b/components/time-picker/locale/ko_KR.tsx
index 21eaf3ca1..8a7f3c388 100644
--- a/components/time-picker/locale/ko_KR.tsx
+++ b/components/time-picker/locale/ko_KR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: '시간 선택',
diff --git a/components/time-picker/locale/lt_LT.tsx b/components/time-picker/locale/lt_LT.tsx
index 4954e10f5..27fd504d6 100644
--- a/components/time-picker/locale/lt_LT.tsx
+++ b/components/time-picker/locale/lt_LT.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Pasirinkite laiką',
diff --git a/components/time-picker/locale/lv_LV.tsx b/components/time-picker/locale/lv_LV.tsx
index 1b8776f32..bee77ff34 100644
--- a/components/time-picker/locale/lv_LV.tsx
+++ b/components/time-picker/locale/lv_LV.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Izvēlieties laiku',
diff --git a/components/time-picker/locale/mk_MK.tsx b/components/time-picker/locale/mk_MK.tsx
index a952dd98c..dcef7d65d 100644
--- a/components/time-picker/locale/mk_MK.tsx
+++ b/components/time-picker/locale/mk_MK.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Избери време',
diff --git a/components/time-picker/locale/mn_MN.tsx b/components/time-picker/locale/mn_MN.tsx
index a5e19333d..0359f999d 100644
--- a/components/time-picker/locale/mn_MN.tsx
+++ b/components/time-picker/locale/mn_MN.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Цаг сонгох',
diff --git a/components/time-picker/locale/ms_MY.tsx b/components/time-picker/locale/ms_MY.tsx
index 369f5c6ab..3cfbbe354 100644
--- a/components/time-picker/locale/ms_MY.tsx
+++ b/components/time-picker/locale/ms_MY.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Sila pilih masa',
diff --git a/components/time-picker/locale/nb_NO.tsx b/components/time-picker/locale/nb_NO.tsx
index 7c2a15cf0..7a034022d 100644
--- a/components/time-picker/locale/nb_NO.tsx
+++ b/components/time-picker/locale/nb_NO.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Velg tid',
diff --git a/components/time-picker/locale/nl_BE.tsx b/components/time-picker/locale/nl_BE.tsx
index 68fce6897..cc5ede683 100644
--- a/components/time-picker/locale/nl_BE.tsx
+++ b/components/time-picker/locale/nl_BE.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Selecteer tijd',
diff --git a/components/time-picker/locale/nl_NL.tsx b/components/time-picker/locale/nl_NL.tsx
index 68fce6897..cc5ede683 100644
--- a/components/time-picker/locale/nl_NL.tsx
+++ b/components/time-picker/locale/nl_NL.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Selecteer tijd',
diff --git a/components/time-picker/locale/pl_PL.tsx b/components/time-picker/locale/pl_PL.tsx
index 81d1f4ced..12e9c4da7 100644
--- a/components/time-picker/locale/pl_PL.tsx
+++ b/components/time-picker/locale/pl_PL.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Wybierz godzinę',
diff --git a/components/time-picker/locale/pt_BR.tsx b/components/time-picker/locale/pt_BR.tsx
index ae6627072..8b6c5f843 100644
--- a/components/time-picker/locale/pt_BR.tsx
+++ b/components/time-picker/locale/pt_BR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Hora',
diff --git a/components/time-picker/locale/pt_PT.tsx b/components/time-picker/locale/pt_PT.tsx
index ae6627072..8b6c5f843 100644
--- a/components/time-picker/locale/pt_PT.tsx
+++ b/components/time-picker/locale/pt_PT.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Hora',
diff --git a/components/time-picker/locale/ro_RO.tsx b/components/time-picker/locale/ro_RO.tsx
index e6c1635cc..caba56127 100644
--- a/components/time-picker/locale/ro_RO.tsx
+++ b/components/time-picker/locale/ro_RO.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Selectează ora',
diff --git a/components/time-picker/locale/ru_RU.tsx b/components/time-picker/locale/ru_RU.tsx
index e1cc02d18..9f3519165 100644
--- a/components/time-picker/locale/ru_RU.tsx
+++ b/components/time-picker/locale/ru_RU.tsx
@@ -1,5 +1,5 @@
 /** Created by Andrey Gayvoronsky on 13/04/16. */
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Выберите время',
diff --git a/components/time-picker/locale/sk_SK.tsx b/components/time-picker/locale/sk_SK.tsx
index 6a1299f26..ce643fd7e 100644
--- a/components/time-picker/locale/sk_SK.tsx
+++ b/components/time-picker/locale/sk_SK.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Vybrať čas',
diff --git a/components/time-picker/locale/sl_SI.tsx b/components/time-picker/locale/sl_SI.tsx
index 7450339b6..942dec7c6 100644
--- a/components/time-picker/locale/sl_SI.tsx
+++ b/components/time-picker/locale/sl_SI.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Izberite čas',
diff --git a/components/time-picker/locale/sr_RS.tsx b/components/time-picker/locale/sr_RS.tsx
index 8ae76f5dd..3b21cfee6 100644
--- a/components/time-picker/locale/sr_RS.tsx
+++ b/components/time-picker/locale/sr_RS.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Izaberi vreme',
diff --git a/components/time-picker/locale/sv_SE.tsx b/components/time-picker/locale/sv_SE.tsx
index 97b3b923f..af732fd21 100644
--- a/components/time-picker/locale/sv_SE.tsx
+++ b/components/time-picker/locale/sv_SE.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Välj tid',
diff --git a/components/time-picker/locale/ta_IN.tsx b/components/time-picker/locale/ta_IN.tsx
index 0471f00a4..dc2bb9489 100644
--- a/components/time-picker/locale/ta_IN.tsx
+++ b/components/time-picker/locale/ta_IN.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'நேரத்தைத் தேர்ந்தெடுக்கவும்',
diff --git a/components/time-picker/locale/th_TH.tsx b/components/time-picker/locale/th_TH.tsx
index fadebd1a6..d6b79f80c 100644
--- a/components/time-picker/locale/th_TH.tsx
+++ b/components/time-picker/locale/th_TH.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'เลือกเวลา',
diff --git a/components/time-picker/locale/tr_TR.tsx b/components/time-picker/locale/tr_TR.tsx
index 0744f8a30..4578a5ee1 100644
--- a/components/time-picker/locale/tr_TR.tsx
+++ b/components/time-picker/locale/tr_TR.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Zaman seç',
diff --git a/components/time-picker/locale/uk_UA.tsx b/components/time-picker/locale/uk_UA.tsx
index 1c7b6cfa5..9398e4e67 100644
--- a/components/time-picker/locale/uk_UA.tsx
+++ b/components/time-picker/locale/uk_UA.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Оберіть час',
diff --git a/components/time-picker/locale/vi_VN.tsx b/components/time-picker/locale/vi_VN.tsx
index f7722b3ce..37ae3215e 100644
--- a/components/time-picker/locale/vi_VN.tsx
+++ b/components/time-picker/locale/vi_VN.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'Chọn thời gian',
diff --git a/components/time-picker/locale/zh_CN.tsx b/components/time-picker/locale/zh_CN.tsx
index e1f427a5a..110be8a2e 100644
--- a/components/time-picker/locale/zh_CN.tsx
+++ b/components/time-picker/locale/zh_CN.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: '请选择时间',
diff --git a/components/time-picker/locale/zh_TW.tsx b/components/time-picker/locale/zh_TW.tsx
index 74bdf6dd8..b295be19c 100644
--- a/components/time-picker/locale/zh_TW.tsx
+++ b/components/time-picker/locale/zh_TW.tsx
@@ -1,4 +1,4 @@
-import { TimePickerLocale } from '../index';
+import type { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: '請選擇時間',
diff --git a/components/time-picker/moment.tsx b/components/time-picker/moment.tsx
index 2d065d7cd..f268cc06f 100644
--- a/components/time-picker/moment.tsx
+++ b/components/time-picker/moment.tsx
@@ -1,8 +1,8 @@
-import { Moment } from 'moment';
+import type { Moment } from 'moment';
 import createTimePicker from './time-picker';
 import momentGenerateConfig from '../vc-picker/generate/moment';
-import { App } from 'vue';
-import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
+import type { App } from 'vue';
+import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
 
 const { TimePicker, TimeRangePicker } = createTimePicker<Moment>(momentGenerateConfig);
 
diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx
index e4b304bb0..2849f061c 100644
--- a/components/time-picker/time-picker.tsx
+++ b/components/time-picker/time-picker.tsx
@@ -1,16 +1,14 @@
 import { defineComponent, ref } from 'vue';
-import generatePicker, {
-  PickerTimeProps,
-  RangePickerTimeProps,
-} from '../date-picker/generatePicker';
+import type { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
+import generatePicker from '../date-picker/generatePicker';
 import {
   commonProps,
   datePickerProps,
   rangePickerProps,
 } from '../date-picker/generatePicker/props';
-import { GenerateConfig } from '../vc-picker/generate';
-import { PanelMode, RangeValue } from '../vc-picker/interface';
-import { RangePickerSharedProps } from '../vc-picker/RangePicker';
+import type { GenerateConfig } from '../vc-picker/generate';
+import type { PanelMode, RangeValue } from '../vc-picker/interface';
+import type { RangePickerSharedProps } from '../vc-picker/RangePicker';
 import devWarning from '../vc-util/devWarning';
 
 export interface TimePickerLocale {
diff --git a/components/vc-picker/PanelContext.tsx b/components/vc-picker/PanelContext.tsx
index 1949ca843..5ea2f23b6 100644
--- a/components/vc-picker/PanelContext.tsx
+++ b/components/vc-picker/PanelContext.tsx
@@ -32,7 +32,7 @@ export const useProvidePanel = (props: PanelContextProps) => {
 };
 
 export const useInjectPanel = () => {
-  return inject(PanelContextKey);
+  return inject(PanelContextKey, {});
 };
 
 export default PanelContextKey;
diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx
index 0deb4e827..fd951126e 100644
--- a/components/vc-picker/Picker.tsx
+++ b/components/vc-picker/Picker.tsx
@@ -36,7 +36,7 @@ import type { AlignType } from '../vc-align/interface';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
 import classNames from '../_util/classNames';
-import { SharedTimeProps } from './panels/TimePanel';
+import type { SharedTimeProps } from './panels/TimePanel';
 
 export type PickerRefConfig = {
   focus: () => void;
diff --git a/examples/App.vue b/examples/App.vue
index d134bb1ee..0ffd6aa97 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,39 +1,21 @@
 <template>
-  <div>
-    <demo />
-  </div>
+  <a-calendar v-model:value="value" @panelChange="onPanelChange" />
 </template>
-<script>
-import { defineComponent } from 'vue';
-import demo from '../v2-doc/src/docs/time-picker/demo/index.vue';
-// import Affix from '../components/affix';
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { Dayjs } from 'dayjs';
+
 export default defineComponent({
-  components: {
-    demo,
-    // Affix,
-  },
-  data() {
-    return {
-      visible: false,
-      pStyle: {
-        fontSize: '16px',
-        color: 'rgba(0,0,0,0.85)',
-        lineHeight: '24px',
-        display: 'block',
-        marginBottom: '16px',
-      },
-      pStyle2: {
-        marginBottom: '24px',
-      },
+  setup() {
+    const value = ref<Dayjs>();
+    const onPanelChange = (value: Dayjs, mode: string) => {
+      console.log(value, mode);
+    };
+
+    return {
+      value,
+      onPanelChange,
     };
-  },
-  methods: {
-    showDrawer() {
-      this.visible = true;
-    },
-    onClose() {
-      this.visible = false;
-    },
   },
 });
 </script>