@neatui/vue 3.1.0 → 4.0.0

package/src/components/form/DateView.vue

@@ -1,34 +1,83 @@
 <template>
-  <div ui-date="@a" class="w-ll" :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy">
-    <div ui-date-head="" class="nx-sl mt-ss ny-sm b-solid bk-back" ui-flex="row xm">
+  <div ui-date="@a" class="fekit-date-view pr" :class="`${frame ? 'b-solid b-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 22em">
+    <div ui-date-head="" class="flex-fixed nx-ms mt-ss ny-sm b-solid b-line" ui-flex="row xm">
       <div ui-flex="row lm" class="o-lm">
-        <div ui-btn="@a s none :square" @click="prev('y')">
-          <Icon name="double-arrow-left" />
-        </div>
-        <div ui-btn="@a s none :square" @click="prev('m')">
+        <div ui-btn="@a s none :square" @click="prev()">
           <Icon name="arrow-left" />
         </div>
       </div>
-      <div ui-flex="row cm" class="nx-ss-sub">
-        <div ui-flex="row cm" class="nx-ss-sub">
-          <p class="mx-ss-sub">
-            <b>{{ state.curr.y }}年</b>
-            <b>{{ state.curr.m }}月</b>
-          </p>
-        </div>
+      <div ui-btns="@a none s" @click="setPanelType()">
+        <p v-if="state.type === 2" class="nowrap" ui-flex="row cm">
+          <b class="nx-ss">{{ panel.sta }}年</b>
+          <span class="nx-xs">-</span>
+          <b class="nx-ss">{{ panel.end }}年</b>
+        </p>
+        <p v-else-if="state.type === 1" class="nowrap" ui-flex="row cm">
+          <b class="nx-ss">{{ state.curr.y }}年</b>
+        </p>
+        <p v-else class="nowrap" ui-flex="row cm">
+          <b class="nx-xs">{{ state.curr.y }}年</b>
+          <b class="nx-xs">{{ state.curr.M }}月</b>
+        </p>
       </div>
       <div ui-flex="row rm" class="o-lm">
-        <div ui-btn="@a s none :square" @click="next('m')">
+        <div ui-btn="@a s none :square" @click="next()">
           <Icon name="arrow-right" />
         </div>
-        <div ui-btn="@a s none :square" @click="next('y')">
-          <Icon name="double-arrow-right" />
-        </div>
       </div>
     </div>
-    <div ui-date-body="">
-      <div class="nb-sm">
-        <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+    <div ui-date-body="" :class="['flex-block pr', bodyClass]">
+      <div v-if="state.type === 2" class="full">
+        <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
+          <li v-for="(year, idx) in panel.years" :key="idx" ui-flex="col cm" @click="setDateValue('y', year)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedYear(year) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">
+              {{ year }}
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div v-else-if="state.type === 1" class="full">
+        <ul ui-grid="mob:4" class="n-ms ny-sm-sub">
+          <li ui-flex="col cm" @click="setDateValue('m', 1)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(1) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">1月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 2)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(2) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">2月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 3)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(3) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">3月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 4)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(4) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">4月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 5)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(5) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">5月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 6)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(6) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">6月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 7)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(7) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">7月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 8)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(8) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">8月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 9)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(9) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">9月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 10)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(10) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">10月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 11)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(11) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">11月</div>
+          </li>
+          <li ui-flex="col cm" @click="setDateValue('m', 12)">
+            <div ui-flex="col cm" class="w-ls h-sl ac ux-none r-sm" :class="isSelectedMonth(12) ? 'active bg-main-o-lm co-w' : 'co-main:hover'">12月</div>
+          </li>
+        </ul>
+      </div>
+      <div v-else class="full">
+        <ul ui-flex="row am" class="fs-ss nx-sm nt-ss">
           <li class="flex-block ac"><span>日</span></li>
           <li class="flex-block ac"><span>一</span></li>
           <li class="flex-block ac"><span>二</span></li>
@@ -47,52 +96,129 @@
                 :class="`${item.range ? 'bg-main-o-xs' : ''} ${item.sta ? 'r-lt-sl r-lb-sl' : ''} ${item.end ? 'r-rt-sl r-rb-sl' : ''}`"
                 ui-flex="col cm"
                 @click="change(item)"
-                @mouseenter="setRangeValue(item)"
               >
                 <div
                   ui-flex="col cm"
-                  class="r-sm b-solid bk-none b-xs my-ss ux-scale"
+                  class="r-sm b-solid b-none b-xs my-ss ux-scale"
                   style="width: 1.8em; height: 1.8em"
-                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-fore' : 'hover-bg-weak'}`"
+                  :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${item.selected ? 'active bg-main-o-lm co-w' : 'bg-weak:hover co-main:hover'}`"
                 >
                   <span>{{ item.day }}</span>
                 </div>
               </div>
-              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 110%" ui-flex="row ct" v-html="extras(item)"></div>
+              <div class="pa w-full lh-xs ny-ss ob-no ol-no nowrap s-ml bold" style="transform-origin: 50% 100%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
           </li>
         </ul>
       </div>
     </div>
-    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
+    <template v-if="!state.isNoTime">
+      <div v-if="state.type === 0" class="h-ls ny-sm nx-ms">
+        <div class="full ac b-solid b-line b-xs r-sm" ui-row="mob-8" style="width: 100%; height: 3em; padding: 0.5em">
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="ths"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="h"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in hours" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="tms"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="m"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in seconds" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+          <ul
+            :style="`${state.panel ? '' : 'pointer-events: none; opacity:.35'}`"
+            class="fekit-date-view-time-scroll"
+            ref="tss"
+            ui-scroll=":y xs"
+            ui-btns="@a none s :block"
+            data-type="s"
+            @scroll="timeScroll"
+          >
+            <li v-for="(item, idx) in seconds" :key="idx">
+              {{ item }}
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div v-else class="h-ls"></div>
+    </template>
+    <div v-if="showTools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid b-line bt-xs">
       <div ui-flex="row lm" class="nl-ss">
-        <p v-if="state.date">
-          <span class="nowrap">已选：</span>
-          <span>{{ state.value }}</span>
-        </p>
+        <div v-if="state.panel" ui-flex="row lm">
+          <span :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format(panelFormat) }}</span>
+          <!-- <span v-if="!state.isNoTime" :anim-editing="state.type === baseType" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span> -->
+        </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
-          <span class="nowrap">推荐：</span>
-          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-ss dib-sub" ui-scroll=":x y:hidden">
-            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-o-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+          <div class="mr-sm-sub nx-sl-sub ny-ss-sub lh-ss nowrap fs-sm dib-sub" ui-scroll=":x y:hidden">
+            <p v-for="(item, idx) in state.shortcuts" :key="idx" class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
+            <p class="bg-main-o-ss co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
           </div>
         </div>
-        <div v-else>&nbsp;</div>
+        <div>&nbsp;</div>
       </div>
-      <div>
-        <button v-if="state.value" ui-btn="@a xs none" class="co-risk" @click="change('')">清空</button>
+      <div class="ml-ss-sub" ui-flex="row rm">
+        <button v-if="state.panel" ui-btn="@a xs none" class="nx-ss co-risk" @click="remove">清除</button>
+        <button v-if="state.panel && !state.isNoTime" ui-btn="@a xs none" class="nx-ss co-main" @click="update">确定</button>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, reactive, watch } from 'vue';
-  import { idate, isDateString, isString } from '@fekit/utils';
+  import { computed, ref, reactive, watch, onMounted } from 'vue';
+  import { idate, isDateString, isObject, isString } from '@fekit/utils';
   import { Icon } from '../basic';
 
+  const normalizeDateInput = (value: any) => {
+    if (!value) {
+      return value;
+    }
+    if (isString(value)) {
+      if (/^\d{4}$/.test(value)) {
+        return `${value}-01-01`;
+      }
+      if (/^\d{4}-(\d{1,2})$/.test(value)) {
+        const [year, month] = value.split('-');
+        const m = month.padStart(2, '0');
+        return `${year}-${m}-01`;
+      }
+    }
+    return value;
+  };
+
+  interface PickerConfig {
+    baseType: number;
+    format: string;
+    bodyClass: string;
+    tools: boolean;
+  }
+
+  const PICKER_CONFIGS: Record<string, PickerConfig> = {
+    date: { baseType: 0, format: 'YYYY-MM-DD', bodyClass: 'min-h-xs*m', tools: true },
+    month: { baseType: 1, format: 'YYYY-MM', bodyClass: 'min-h-ms*s', tools: false },
+    year: { baseType: 2, format: 'YYYY', bodyClass: 'min-h-ms*s', tools: false },
+  };
+
   // 创建日期
   const cDate = (date: any = null) => {
-    return isDateString(date) ? new Date(date) : new Date();
+    const normalized = normalizeDateInput(date);
+    // iOS 兼容：Safari 不支持 "YYYY-MM-DD" 格式，需要替换为 "YYYY/MM/DD"
+    return isDateString(normalized) ? new Date(normalized?.replace(/-/g, '/')) : new Date();
   };
 
   // 快捷预设
@@ -117,18 +243,24 @@
     },
   };
 
-  const emits: any = defineEmits(['update:modelValue', 'change']);
+  const emits: any = defineEmits(['update:modelValue', 'change', 'update']);
+  interface TimeProps {
+    h: boolean | number;
+    m?: boolean | number;
+    s?: boolean | number;
+  }
   interface Props {
     modelValue?: string | number;
     frame: boolean;
     tools?: boolean;
     range?: boolean;
     format?: string;
-    picker?: 'date' | 'week' | 'month' | 'quarter';
+    picker?: 'date' | 'week' | 'month' | 'quarter' | 'year';
     holiday?: object;
     shortcuts?: Array<'yesterday' | 'today' | 'tomorrow'>;
     extras?: (item: any) => string;
-    rangeValue?: string;
+    time?: boolean | TimeProps;
+    lang?: string;
   }
   const props: any = withDefaults(defineProps<Props>(), {
     // 值
@@ -136,94 +268,341 @@
     // 是否显示框架
     frame: false,
     // 是否是示工具
-    tools: true,
+    tools: undefined,
     // 时间范围
     range: false,
     // 面板类型
     picker: 'date',
     // 额外内容
     extras: (item: any) => {
-      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.6em; height:.6em;"></i>`;
+      return `<i class="dib o-ms mb-xs r-xl ${item.today ? 'bg-main' : 'bg-none'}" style="width:.5em; height:.5em;"></i>`;
     },
     // 快捷选择
     shortcuts: () => ['yesterday', 'today', 'tomorrow'],
     // 数据格式化
-    format: 'YYYY-MM-DD',
+    format: undefined,
     // 节假日
     holiday: () => ({}),
-    // 范围时间
-    rangeValue: '',
+    time: false,
+    // 语言
+    lang: 'zh-CN',
+  });
+
+  const pickerConfig = computed<PickerConfig>(() => {
+    const key = props.picker || 'date';
+    return PICKER_CONFIGS[key] || PICKER_CONFIGS.date;
+  });
+
+  // 小时
+  const hours = computed(() => {
+    const _hours: any = [];
+    for (let i = 0; i < 24; i++) {
+      _hours.push(i > 9 ? `${i}` : `0${i}`);
+    }
+    return _hours;
+  });
+  // 分秒
+  const seconds = computed(() => {
+    const _seconds: any = [];
+    for (let i = 0; i < 60; i++) {
+      _seconds.push(i > 9 ? `${i}` : `0${i}`);
+    }
+    return _seconds;
+  });
+
+  const baseType = computed(() => pickerConfig.value.baseType);
+
+  const panelFormat = computed(() => props.format || pickerConfig.value.format);
+
+  const bodyClass = computed(() => pickerConfig.value.bodyClass);
+
+  const showTools = computed(() => {
+    if (props.tools !== undefined) {
+      return !!props.tools;
+    }
+    return pickerConfig.value.tools;
   });
 
+  const isSelectedYear = (year: number) => {
+    return !!state.panel && state.curr?.y === year;
+  };
+
+  const isSelectedMonth = (month: number) => {
+    return !!state.panel && state.curr?.M === month;
+  };
+
   // 内部数据
   const state: any = reactive({
-    date: '',
+    // 面板显示时间
+    panel: undefined,
+    // 面板年份选择
+    years: 0,
     // 当前时间计算
     curr: computed(() => {
-      const date = idate(state.date);
-      const days = date.calendar({ group: true, value: [state.value] });
-      const { y = 0, M: m = 0, d = 0 } = date.attr || {};
-      return { days, y, m, d };
+      const date = idate(state.panel);
+      const days = date.calendar({ group: true, value: [state.panel] });
+      return { days, ...date.attr };
     }),
+    // 当前面板类型
+    type: 0,
     // 值
-    value: '',
-    // 范围时间值
-    rangeValue: '',
+    value: undefined,
     // 快捷选择
     shortcuts: computed(() => {
       return props.shortcuts.map((item: any) => {
         return isString(item) ? shortcutsList[item] : item;
       });
     }),
+    // 不带时间（只要时或分的也考虑到）
+    isNoTime: computed(() => {
+      if (isObject(props.time)) {
+        return !(props.time.h || props.time.m || props.time.s);
+      } else {
+        return !props.time;
+      }
+    }),
   });
 
+  watch(
+    () => baseType.value,
+    (value) => {
+      state.type = value;
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => panelFormat.value,
+    (format) => {
+      if (state.panel) {
+        const formatted = idate(state.panel).format(format);
+        if (formatted !== state.panel) {
+          state.panel = formatted;
+        }
+        state.value = formatted;
+      }
+    },
+    { immediate: true },
+  );
+
+  // 面板
+  const panel: any = reactive({
+    years: computed(() => {
+      const startYear = Math.floor(state.curr.year / 10) * 10;
+      const list = [];
+      for (let i = 0; i < 10; i++) {
+        list.push(startYear + i);
+      }
+      return list;
+    }),
+    sta: computed(() => {
+      return panel.years[0];
+    }),
+    end: computed(() => {
+      return panel.years[9];
+    }),
+  });
+
+  // 设置日期
+  const setDateValue = (type: any, value: number = 0, add: number = 0) => {
+    const panelValue = upload(type, value, add);
+    state.panel = panelValue;
+    state.value = panelValue;
+    // 面板返回上一级
+    const base = baseType.value;
+    const nextType = Math.max(base, state.type - 1);
+    state.type = nextType;
+
+    if (base > 0 && nextType === base) {
+      emits('change', panelValue);
+      update();
+    }
+  };
+
+  // 时分秒
+  const ths: any = ref(null);
+  const tms: any = ref(null);
+  const tss: any = ref(null);
+  const setTimeValue = () => {
+    const { H = 0, m = 0, s = 0 }: any = state.curr || {};
+    if (state.panel) {
+      if (ths.value && ths.value.children[H]) {
+        ths.value.scrollTop = ths.value.children[H].offsetTop;
+      }
+      if (tms.value && tms.value.children[m]) {
+        tms.value.scrollTop = tms.value.children[m].offsetTop;
+      }
+      if (tss.value && tss.value.children[s]) {
+        tss.value.scrollTop = tss.value.children[s].offsetTop;
+      }
+    } else {
+      if (ths.value && ths.value.children[H]) {
+        ths.value.scrollTop = ths.value.children[0].offsetTop;
+      }
+      if (tms.value && tms.value.children[m]) {
+        tms.value.scrollTop = tms.value.children[0].offsetTop;
+      }
+      if (tss.value && tss.value.children[s]) {
+        tss.value.scrollTop = tss.value.children[0].offsetTop;
+      }
+    }
+  };
+
   watch(
     () => props.modelValue,
     (value: any) => {
-      state.date = value || '';
-      state.value = value || '';
+      const formatted = value ? idate(value).format(panelFormat.value) : undefined;
+      // 面板显示日期
+      state.panel = formatted;
+      // 值
+      state.value = formatted;
     },
     { deep: true, immediate: true },
   );
-  // 范围时间值
+
+  onMounted(() => {
+    setTimeValue();
+  });
   watch(
-    () => props.rangeValue,
-    (value: any) => {
-      state.rangeValue = value;
+    () => state.panel,
+    () => {
+      setTimeValue();
     },
-    { deep: true, immediate: true },
   );
 
   // 更新时间
-  const upload = (a: any = 'm', b: any = 1) => {
-    const date = cDate(state.date);
-    if (a === 'm') {
-      date.setMonth(date.getMonth() + b);
-    } else {
-      date.setFullYear(date.getFullYear() + b);
+  const upload = (type: string = 'm', value: number = 0, add: number = 1) => {
+    const date = cDate(state.panel);
+
+    switch (type) {
+      case 'y':
+        if (value !== 0) {
+          date.setFullYear(value);
+        } else {
+          date.setFullYear(date.getFullYear() + add);
+        }
+        break;
+      case 'm':
+        if (value !== 0) {
+          date.setMonth(value - 1);
+        } else {
+          date.setMonth(date.getMonth() + add);
+        }
+        break;
+      case 'd':
+        if (value !== 0) {
+          date.setDate(value);
+        } else {
+          date.setDate(date.getDate() + add);
+        }
+        break;
+      case 'h':
+        if (value !== 0) {
+          date.setHours(value);
+        } else {
+          date.setHours(date.getHours() + add);
+        }
+        break;
+      case 'n':
+        if (value !== 0) {
+          date.setMinutes(value);
+        } else {
+          date.setMinutes(date.getMinutes() + add);
+        }
+        break;
+      case 's':
+        if (value !== 0) {
+          date.setSeconds(value);
+        } else {
+          date.setSeconds(date.getSeconds() + add);
+        }
+        break;
+      default:
+        break;
     }
-    return idate(date).format(props.format);
+    return idate(date).format(panelFormat.value);
   };
 
   // 日期前翻
-  const prev = (type: any = 'm') => {
-    state.date = upload(type, -1);
+  const prev = () => {
+    state.panel = upload(state.type > 0 ? 'y' : 'm', 0, state.type === 2 ? -10 : -1);
   };
   // 日期后翻
-  const next = (type: any = 'm') => {
-    state.date = upload(type, 1);
-  };
-  // 设置范围时间
-  const setRangeValue = (item: any) => {
-    if (state.value) {
-      state.rangeValue = idate(item.date).format(props.format);
-    }
+  const next = () => {
+    state.panel = upload(state.type > 0 ? 'y' : 'm', 0, state.type === 2 ? 10 : 1);
   };
 
   // 向外通信
   const change = (item: any) => {
-    emits('update:modelValue', item ? idate(item.date).format(props.format) : item);
-    emits('change', state.value);
+    const panelValue = item ? idate(item.date).format(panelFormat.value) : item;
+    state.panel = panelValue;
+    state.value = panelValue;
+    emits('change', panelValue);
+    if (state.isNoTime) {
+      update();
+    }
+  };
+
+  // 清空日期
+  const remove = () => {
+    state.panel = undefined;
+    state.value = undefined;
+    update();
+  };
+
+  // 更新数据
+  const update = () => {
+    const nextValue = state.panel ? idate(state.panel).format(panelFormat.value) : undefined;
+    if (state.panel && nextValue !== state.panel) {
+      state.panel = nextValue;
+    }
+    state.value = nextValue;
+    emits('update:modelValue', nextValue);
+    emits('update', nextValue);
+  };
+
+  // 面板类型
+  const setPanelType = () => {
+    if (state.type < 2) {
+      state.type += 1;
+    }
+  };
+
+  // 时间滚动
+  const _timer: any = ref(null);
+  const timeScroll = (ev: any) => {
+    const item: any = ev.target?.children[0];
+    const type: any = ev.target.getAttribute('data-type') || '';
+    if (state.panel && item) {
+      clearTimeout(_timer.value);
+      _timer.value = setTimeout(() => {
+        const h = item.offsetHeight;
+        const idx = Math.floor(ev.target.scrollTop / h);
+        const maxIdx = type === 'h' ? 23 : 59;
+        const safeIdx = Math.min(Math.max(idx, 0), maxIdx);
+        const { YYYY = 0, MM = 0, DD = 0, HH = '', mm = '', ss = '' }: any = state.curr || {};
+        let _panel = `${YYYY}-${MM}-${DD}`;
+        if (type === 'h') {
+          _panel += ` ${safeIdx}:${mm}:${ss}`;
+        }
+        if (type === 'm') {
+          _panel += ` ${HH}:${safeIdx}:${ss}`;
+        }
+        if (type === 's') {
+          _panel += ` ${HH}:${mm}:${safeIdx}`;
+        }
+        state.panel = idate(_panel).format('YYYY-MM-DD HH:mm:ss');
+      }, 100);
+    }
   };
-  // 向外通信范围时间
 </script>
+<style lang="scss">
+  .fekit-date-view-time-scroll {
+    position: relative;
+    height: 100%;
+    scroll-snap-type: y mandatory;
+    & > * {
+      scroll-snap-align: center;
+    }
+  }
+</style>