更新：登录功能

uni_modules/wot-design-uni/components/wd-calendar/index.scss

@@ -0,0 +1,158 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(calendar) {
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-calendar__arrow),
+    :deep(.wd-calendar__close),
+    :deep(.wd-calendar__clear) {
+      color: $-dark-color;
+    }
+
+    @include e(range-label-item) {
+      color: $-dark-color;
+
+      @include when(placeholder) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(range-sperator) {
+      color: $-dark-color-gray;
+    }
+
+    :deep(.wd-calendar__cell--placeholder) {
+      .wd-cell__value {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(calendar) {
+
+  @include e(header) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include e(title) {
+    color: $-action-sheet-color;
+    height: $-action-sheet-title-height;
+    line-height: $-action-sheet-title-height;
+    text-align: center;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: $-action-sheet-close-top;
+    right: $-action-sheet-close-right;
+    color: $-action-sheet-close-color;
+    font-size: $-action-sheet-close-fs;
+    transform: rotate(-45deg);
+    line-height: 1.1;
+  }
+
+  @include e(tabs) {
+    width: 222px;
+    margin: 10px auto 12px;
+  }
+
+  @include e(shortcuts) {
+    padding: 20px 0;
+    text-align: center;
+  }
+
+  @include edeep(tag) {
+    margin-right: 8px;
+  }
+
+  @include e(view) {
+    @include when(show-confirm) {
+      height: 394px;
+
+      @include when(range) {
+        height: 384px;
+      }
+    }
+  }
+
+  @include e(range-label) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+
+    @include when(monthrange) {
+      padding-bottom: 10px;
+      box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  @include e(range-label-item) {
+    flex: 1;
+    color: rgba(0, 0, 0, 0.85);
+
+    @include when(placeholder) {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  @include e(range-sperator) {
+    margin: 0 24px;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  @include e(confirm) {
+    padding: 12px 25px 14px;
+  }
+
+  @include edeep(cell) {
+    @include when(disabled) {
+      .wd-cell__value {
+        color: $-input-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+    @include when(error) {
+      .wd-cell__value {
+        color: $-input-error-color;
+      }
+      :deep(.wd-calendar__arrow) {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      .wd-calendar__arrow {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+
+    @include m(placeholder) {
+      .wd-cell__value {
+        color: $-input-placeholder-color;
+      }
+    }
+  }
+  
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include edeep(clear) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-clear-color;
+    line-height: $-cell-line-height;
+  }
+}

uni_modules/wot-design-uni/components/wd-calendar/types.ts

@@ -0,0 +1,226 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2025-07-11 16:00:26
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
+import type { FormItemRule } from '../wd-form/types'
+
+export const calendarProps = {
+  ...baseProps,
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   */
+  modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
+  /**
+   * 日期类型，可选值：date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange
+   */
+  type: makeStringProp<CalendarType>('date'),
+  /**
+   * 最小日期，为 13 位时间戳
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()),
+  /**
+   * 最大日期，为 13 位时间戳
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()),
+  /**
+   * 周起始天
+   */
+  firstDayOfWeek: makeNumberProp(0),
+  /**
+   * 日期格式化函数
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   */
+  allowSameDay: makeBooleanProp(false),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   */
+  defaultTime: {
+    type: [String, Array] as PropType<string | string[]>
+  },
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+   */
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
+   */
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 是否垂直居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 是否显示确定按钮
+   */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 确定按钮文字
+   */
+  confirmText: String,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<CalendarDisplayFormat>,
+  /**
+   * 自定义范围选择类型的面板内部回显，返回一个字符串
+   */
+  innerDisplayFormat: Function as PropType<CalendarInnerDisplayFormat>,
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否显示类型切换功能
+   */
+  showTypeSwitch: makeBooleanProp(false),
+  /**
+   * 快捷选项，为对象数组，其中对象的 text 必传
+   */
+  shortcuts: makeArrayProp<Record<string, any>>(),
+  /**
+   * 快捷操作点击回调
+   */
+  onShortcutsClick: Function as PropType<CalendarOnShortcutsClick>,
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数
+   */
+  beforeConfirm: Function as PropType<CalendarBeforeConfirm>,
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  customViewClass: makeStringProp(''),
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否使用内置单元格
+   * 默认为 true，使用内置单元格
+   */
+  withCell: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 必填标记位置，可选值：before、after
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before'),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
+}
+
+export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
+
+export type CalendarInnerDisplayFormat = (value: number, rangeType: 'start' | 'end', type: CalendarType) => string
+
+export type CalendarBeforeConfirmOption = {
+  value: number | number[] | null
+  resolve: (isPass: boolean) => void
+}
+
+export type CalendarBeforeConfirm = (option: CalendarBeforeConfirmOption) => void
+
+export type CalendarOnShortcutsClickOption = {
+  item: Record<string, any>
+  index: number
+}
+
+export type CalendarOnShortcutsClick = (option: CalendarOnShortcutsClickOption) => number | number[]
+
+export type CalendarExpose = {
+  /** 关闭时间选择器弹窗 */
+  close: () => void
+  /** 打开时间选择器弹窗 */
+  open: () => void
+}
+
+export type CalendarProps = ExtractPropTypes<typeof calendarProps>
+
+export type CalendarInstance = ComponentPublicInstance<CalendarExpose, CalendarProps>

uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue

@@ -0,0 +1,451 @@
+<template>
+  <view :class="`wd-calendar ${customClass}`">
+    <template v-if="withCell">
+      <wd-cell
+        v-if="!$slots.default"
+        :title="label"
+        :value="showValue || placeholder || translate('placeholder')"
+        :required="required"
+        :size="size"
+        :title-width="labelWidth"
+        :prop="prop"
+        :rules="rules"
+        :clickable="!disabled && !readonly"
+        :value-align="alignRight ? 'right' : 'left'"
+        :center="center"
+        :custom-class="cellClass"
+        :custom-style="customStyle"
+        :custom-title-class="customLabelClass"
+        :custom-value-class="customValueClass"
+        :ellipsis="ellipsis"
+        :use-title-slot="!!$slots.label"
+        :marker-side="markerSide"
+        @click="open"
+      >
+        <template #title v-if="$slots.label">
+          <slot name="label"></slot>
+        </template>
+
+        <template #right-icon>
+          <wd-icon v-if="showArrow" custom-class="wd-calendar__arrow" name="arrow-right" />
+          <view v-else-if="showClear" @click.stop="handleClear">
+            <wd-icon custom-class="wd-calendar__clear" name="error-fill" />
+          </view>
+        </template>
+      </wd-cell>
+      <view v-else @click="open">
+        <slot></slot>
+      </view>
+    </template>
+    <wd-action-sheet
+      v-model="pickerShow"
+      :duration="250"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :z-index="zIndex"
+      :root-portal="rootPortal"
+      @close="close"
+    >
+      <view class="wd-calendar__header">
+        <view v-if="!showTypeSwitch && shortcuts.length === 0" class="wd-calendar__title">{{ title || translate('title') }}</view>
+        <view v-if="showTypeSwitch" class="wd-calendar__tabs">
+          <wd-tabs ref="calendarTabs" v-model="currentTab" @change="handleTypeChange">
+            <wd-tab :title="translate('day')" :name="translate('day')" />
+            <wd-tab :title="translate('week')" :name="translate('week')" />
+            <wd-tab :title="translate('month')" :name="translate('month')" />
+          </wd-tabs>
+        </view>
+        <view v-if="shortcuts.length > 0" class="wd-calendar__shortcuts">
+          <wd-tag
+            v-for="(item, index) in shortcuts"
+            :key="index"
+            custom-class="wd-calendar__tag"
+            type="primary"
+            plain
+            round
+            @click="handleShortcutClick(index)"
+          >
+            {{ item.text }}
+          </wd-tag>
+        </view>
+        <wd-icon custom-class="wd-calendar__close" name="add" @click="close" />
+      </view>
+      <view
+        v-if="inited"
+        :class="`wd-calendar__view  ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`"
+      >
+        <view v-if="range(type)" :class="`wd-calendar__range-label ${type === 'monthrange' ? 'is-monthrange' : ''}`">
+          <view
+            :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[0] ? 'is-placeholder' : ''}`"
+            style="text-align: right"
+          >
+            {{ rangeLabel[0] }}
+          </view>
+          <view class="wd-calendar__range-sperator">/</view>
+          <view :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[1] ? 'is-placeholder' : ''}`">
+            {{ rangeLabel[1] }}
+          </view>
+        </view>
+        <wd-calendar-view
+          ref="calendarView"
+          v-model="calendarValue"
+          :type="currentType"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :first-day-of-week="firstDayOfWeek"
+          :formatter="formatter"
+          :panel-height="panelHeight"
+          :max-range="maxRange"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          :time-filter="timeFilter"
+          :hide-second="hideSecond"
+          :show-panel-title="!range(type)"
+          :immediate-change="immediateChange"
+          @change="handleChange"
+        />
+      </view>
+      <view v-if="showConfirm" class="wd-calendar__confirm">
+        <wd-button block :disabled="confirmBtnDisabled" @click="handleConfirm">{{ confirmText || translate('confirm') }}</wd-button>
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-calendar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdCalendarView from '../wd-calendar-view/wd-calendar-view.vue'
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import wdCell from '../wd-cell/wd-cell.vue'
+import { ref, computed, watch } from 'vue'
+import dayjs from '../../dayjs'
+import { deepClone, isArray, isEqual, padZero, pause } from '../common/util'
+import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { calendarProps, type CalendarExpose } from './types'
+import type { CalendarType } from '../wd-calendar-view/types'
+const { translate } = useTranslate('calendar')
+
+const defaultDisplayFormat = (value: number | number[], type: CalendarType): string => {
+  switch (type) {
+    case 'date':
+      return dayjs(value as number).format('YYYY-MM-DD')
+    case 'dates':
+      return (value as number[])
+        .map((item) => {
+          return dayjs(item).format('YYYY-MM-DD')
+        })
+        .join(', ')
+    case 'daterange':
+      return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY-MM-DD') : translate('startTime')} ${translate('to')} ${
+        (value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY-MM-DD') : translate('endTime')
+      }`
+    case 'datetime':
+      return dayjs(value as number).format('YYYY-MM-DD HH:mm:ss')
+    case 'datetimerange':
+      return `${(value as number[])[0] ? dayjs((value as number[])[0]).format(translate('timeFormat')) : translate('startTime')} ${translate(
+        'to'
+      )}\n${(value as number[])[1] ? dayjs((value as number[])[1]).format(translate('timeFormat')) : translate('endTime')}`
+    case 'week': {
+      const date = new Date(value as number)
+      const year = date.getFullYear()
+      const week = getWeekNumber(value as number)
+      const weekStart = new Date(date)
+      weekStart.setDate(date.getDate() - date.getDay() + 1)
+      const weekEnd = new Date(date)
+      weekEnd.setDate(date.getDate() + (7 - date.getDay()))
+      const adjustedYear = weekEnd.getFullYear() > year ? weekEnd.getFullYear() : year
+      return translate('weekFormat', adjustedYear, padZero(week))
+    }
+    case 'weekrange': {
+      const date1 = new Date((value as number[])[0])
+      const date2 = new Date((value as number[])[1])
+      const year1 = date1.getFullYear()
+      const year2 = date2.getFullYear()
+      const week1 = getWeekNumber((value as number[])[0])
+      const week2 = getWeekNumber((value as number[])[1])
+      const weekStart1 = new Date(date1)
+      weekStart1.setDate(date1.getDate() - date1.getDay() + 1)
+      const weekEnd1 = new Date(date1)
+      weekEnd1.setDate(date1.getDate() + (7 - date1.getDay()))
+      const weekStart2 = new Date(date2)
+      weekStart2.setDate(date2.getDate() - date2.getDay() + 1)
+      const weekEnd2 = new Date(date2)
+      weekEnd2.setDate(date2.getDate() + (7 - date2.getDay()))
+      const adjustedYear1 = weekEnd1.getFullYear() > year1 ? weekEnd1.getFullYear() : year1
+      const adjustedYear2 = weekEnd2.getFullYear() > year2 ? weekEnd2.getFullYear() : year2
+      return `${(value as number[])[0] ? translate('weekFormat', adjustedYear1, padZero(week1)) : translate('startWeek')} - ${
+        (value as number[])[1] ? translate('weekFormat', adjustedYear2, padZero(week2)) : translate('endWeek')
+      }`
+    }
+    case 'month':
+      return dayjs(value as number).format('YYYY / MM')
+    case 'monthrange':
+      return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY / MM') : translate('startMonth')} ${translate('to')} ${
+        (value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY / MM') : translate('endMonth')
+      }`
+  }
+}
+
+const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarType) => {
+  switch (type) {
+    case 'daterange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endTime') : translate('startTime')
+      }
+      return dayjs(value).format(translate('dateFormat'))
+    case 'datetimerange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endTime') : translate('startTime')
+      }
+      return dayjs(value).format(translate('timeFormat'))
+    case 'weekrange': {
+      if (!value) {
+        return rangeType === 'end' ? translate('endWeek') : translate('startWeek')
+      }
+      const date = new Date(value)
+      const year = date.getFullYear()
+      const week = getWeekNumber(value)
+      return translate('weekFormat', year, padZero(week))
+    }
+    case 'monthrange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endMonth') : translate('startMonth')
+      }
+      return dayjs(value).format(translate('monthFormat'))
+  }
+}
+
+const props = defineProps(calendarProps)
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open', 'clear'])
+
+const pickerShow = ref<boolean>(false)
+const calendarValue = ref<null | number | number[]>(null)
+const lastCalendarValue = ref<null | number | number[]>(null)
+const panelHeight = ref<number>(338)
+const confirmBtnDisabled = ref<boolean>(true)
+const currentTab = ref<number>(0)
+const lastTab = ref<number>(0)
+const currentType = ref<CalendarType>('date')
+const lastCurrentType = ref<CalendarType>()
+const inited = ref<boolean>(false)
+const calendarView = ref()
+const calendarTabs = ref()
+
+const rangeLabel = computed(() => {
+  const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
+  return [start, end].map((item, index) => {
+    return (props.innerDisplayFormat || formatRange)(item, index === 0 ? 'start' : 'end', currentType.value)
+  })
+})
+
+const showValue = computed(() => {
+  if ((!isArray(props.modelValue) && props.modelValue) || (isArray(props.modelValue) && props.modelValue.length)) {
+    return (props.displayFormat || defaultDisplayFormat)(props.modelValue, lastCurrentType.value || currentType.value)
+  } else {
+    return ''
+  }
+})
+
+const cellClass = computed(() => {
+  const classes = ['wd-calendar__cell']
+  if (props.disabled) classes.push('is-disabled')
+  if (props.readonly) classes.push('is-readonly')
+  if (props.error) classes.push('is-error')
+  if (!showValue.value) classes.push('wd-calendar__cell--placeholder')
+  return classes.join(' ')
+})
+
+watch(
+  () => props.modelValue,
+  (val, oldVal) => {
+    if (isEqual(val, oldVal)) return
+    calendarValue.value = deepClone(val)
+    confirmBtnDisabled.value = getConfirmBtnStatus(val)
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.type,
+  (newValue, oldValue) => {
+    if (props.showTypeSwitch) {
+      const tabs = ['date', 'week', 'month']
+      const rangeTabs = ['daterange', 'weekrange', 'monthrange']
+
+      const index = newValue.indexOf('range') > -1 ? rangeTabs.indexOf(newValue) || 0 : tabs.indexOf(newValue)
+      currentTab.value = index
+    }
+    panelHeight.value = props.showConfirm ? 338 : 400
+    currentType.value = deepClone(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.showConfirm,
+  (val) => {
+    panelHeight.value = val ? 338 : 400
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const range = computed(() => {
+  return (type: CalendarType) => {
+    return isRange(type)
+  }
+})
+
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length > 0
+})
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
+function handleClear() {
+  emit('clear')
+  emit('update:modelValue', null)
+}
+
+function scrollIntoView() {
+  calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
+}
+// 对外暴露方法
+async function open() {
+  const { disabled, readonly } = props
+
+  if (disabled || readonly) return
+
+  inited.value = true
+  pickerShow.value = true
+  lastCalendarValue.value = deepClone(calendarValue.value)
+  lastTab.value = currentTab.value
+  lastCurrentType.value = currentType.value
+  // 等待渲染完毕
+  await pause()
+  scrollIntoView()
+  setTimeout(() => {
+    if (props.showTypeSwitch) {
+      calendarTabs.value.scrollIntoView()
+      calendarTabs.value.updateLineStyle(false)
+    }
+  }, 250)
+  emit('open')
+}
+// 对外暴露方法
+function close() {
+  pickerShow.value = false
+  setTimeout(() => {
+    calendarValue.value = deepClone(lastCalendarValue.value)
+    currentTab.value = lastTab.value
+    currentType.value = lastCurrentType.value || 'date'
+    confirmBtnDisabled.value = getConfirmBtnStatus(lastCalendarValue.value)
+  }, 250)
+  emit('cancel')
+}
+function handleTypeChange({ index }: { index: number }) {
+  const tabs = ['date', 'week', 'month']
+  const rangeTabs = ['daterange', 'weekrange', 'monthrange']
+  const type = props.type.indexOf('range') > -1 ? rangeTabs[index] : tabs[index]
+  currentTab.value = index
+  currentType.value = type as CalendarType
+}
+function getConfirmBtnStatus(value: number | number[] | null) {
+  let confirmBtnDisabled = false
+  // 范围选择未选择满，或者多日期选择未选择日期，按钮置灰不可点击
+  if (
+    (props.type.indexOf('range') > -1 && (!isArray(value) || !value[0] || !value[1] || !value)) ||
+    (props.type === 'dates' && (!isArray(value) || value.length === 0 || !value)) ||
+    !value
+  ) {
+    confirmBtnDisabled = true
+  }
+
+  return confirmBtnDisabled
+}
+function handleChange({ value }: { value: number | number[] | null }) {
+  calendarValue.value = deepClone(value)
+  confirmBtnDisabled.value = getConfirmBtnStatus(value)
+
+  emit('change', {
+    value
+  })
+
+  if (!props.showConfirm && !confirmBtnDisabled.value) {
+    handleConfirm()
+  }
+}
+function handleConfirm() {
+  if (props.beforeConfirm) {
+    props.beforeConfirm({
+      value: calendarValue.value,
+      resolve: (isPass: boolean) => {
+        isPass && onConfirm()
+      }
+    })
+  } else {
+    onConfirm()
+  }
+}
+function onConfirm() {
+  pickerShow.value = false
+  lastCurrentType.value = currentType.value
+  emit('update:modelValue', calendarValue.value)
+  emit('confirm', {
+    value: calendarValue.value,
+    type: currentType.value
+  })
+}
+
+function handleShortcutClick(index: number) {
+  if (props.onShortcutsClick && typeof props.onShortcutsClick === 'function') {
+    calendarValue.value = deepClone(
+      props.onShortcutsClick({
+        item: props.shortcuts[index],
+        index
+      })
+    )
+    confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
+  }
+
+  if (!props.showConfirm) {
+    handleConfirm()
+  }
+}
+
+defineExpose<CalendarExpose>({
+  close,
+  open
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>