@neatui/nuxt 0.1.0 → 1.0.0

package/src/components/form/DateView@v3.vue

@@ -1,271 +1,149 @@
 <template>
-  <div ui-date="@a" class="fekit-date-view pr" :class="`${frame ? 'b-solid bk-line b-xs r-sm' : ''}`" ui-flex="col xy" style="width: 31em; height: 24.5em">
-    <div class="flex-block" ui-flex="row xy">
-      <div style="width: 20em; height: 100%">
-        <div ui-date-head="" class="h-xs+ flex-fixed nx-sl mt-ss ny-ss b-solid bk-back -bb-xs" 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')">
-              <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="nx-ss-sub nowrap" ui-flex="row cm" ui-btns="@a none xs">
-                <b @click="setPanelType('year')">{{ state.curr.y }}年</b>
-                <b @click="setPanelType('month')">{{ state.curr.m }}月</b>
-              </p>
-            </div>
-          </div>
-          <div ui-flex="row rm" class="o-lm">
-            <div ui-btn="@a s none :square" @click="next('m')">
-              <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="" class="flex-block pr">
-          <div class="full nb-sm">
-            <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
-              <li class="flex-block ac"><span>日</span></li>
-              <li class="flex-block ac"><span>一</span></li>
-              <li class="flex-block ac"><span>二</span></li>
-              <li class="flex-block ac"><span>三</span></li>
-              <li class="flex-block ac"><span>四</span></li>
-              <li class="flex-block ac"><span>五</span></li>
-              <li class="flex-block ac"><span>六</span></li>
-            </ul>
-            <ul ui-date-days="" ui-flex="col xm" class="flex-wrap nx-sm">
-              <li v-for="(week, idx) in state.curr.days" :key="idx" :ui-date-week="idx + 1" class="flex-block" ui-flex="row am" style="margin-bottom: -0.25em">
-                <div v-for="(item, i) in week" :key="i" class="pr flex-block nb-sm" ui-flex="col xy">
-                  <div
-                    v-if="item.day"
-                    :ui-date-day="item.day"
-                    class="flex-block"
-                    :class="`${item.range ? 'bg-main-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"
-                      style="width: 1.8em; height: 1.8em"
-                      :class="`${item.isLastMonth || item.isNextMonth ? 'co-idle' : item.isHoliday ? 'co-risk' : ''} ${
-                        item.selected ? 'active bg-main-lm co-fore' : 'hover-bg-weak'
-                      }`"
-                    >
-                      <span>{{ item.day }}</span>
-                    </div>
-                  </div>
-                  <div class="pa full-x 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 ui-date="@a" class="fekit-date-view pr" :class="`${frame ? 'b-solid bk-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 bk-back" ui-flex="row xm">
+      <div ui-flex="row lm" class="o-lm">
+        <div ui-btn="@a s none :square" @click="prev()">
+          <Icon name="arrow-left" />
         </div>
       </div>
-      <div style="width: 11em" class="flex-fixed b-solid bk-back bl-xs" ui-flex="col xy">
-        <div ui-date-head="" class="h-xs+ flex-fixed nx-sl mt-ss ny-ss b-solid bk-back -bb-xs" ui-flex="row cm">
-          <div ui-flex="row cm" class="nx-ss-sub">
-            <div ui-flex="row cm" class="nx-ss-sub">
-              <p class="nx-ss-sub nowrap" ui-flex="row cm" ui-btns="@a none xs">
-                <b @click="setPanelType('year')">时间</b>
-              </p>
-            </div>
-          </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()">
+          <Icon name="arrow-right" />
         </div>
-        <div ui-date-body="" class="flex-block pr nl-ss n-ss-sub ac">
-          <div class="full" ui-row="mob-8">
-            <div class="full" ui-scroll=":y" style="padding-bottom: 15.2em">
-              <ul ui-btns="@a none s :block">
-                <li>00</li>
-                <li>01</li>
-                <li>02</li>
-                <li>03</li>
-                <li>04</li>
-                <li>05</li>
-                <li>06</li>
-                <li>07</li>
-                <li>08</li>
-                <li>09</li>
-                <li>10</li>
-                <li>11</li>
-                <li>12</li>
-                <li>13</li>
-                <li>14</li>
-                <li>15</li>
-                <li>16</li>
-                <li>17</li>
-                <li>18</li>
-                <li>19</li>
-                <li>20</li>
-                <li>21</li>
-                <li>22</li>
-                <li>23</li>
-              </ul>
-            </div>
-            <div class="full" ui-scroll=":y" style="padding-bottom: 15.2em">
-              <ul ui-btns="@a none s :block">
-                <li>00</li>
-                <li>01</li>
-                <li>02</li>
-                <li>03</li>
-                <li>04</li>
-                <li>05</li>
-                <li>06</li>
-                <li>07</li>
-                <li>08</li>
-                <li>09</li>
-
-                <li>10</li>
-                <li>11</li>
-                <li>12</li>
-                <li>13</li>
-                <li>14</li>
-                <li>15</li>
-                <li>16</li>
-                <li>17</li>
-                <li>18</li>
-                <li>19</li>
-
-                <li>20</li>
-                <li>21</li>
-                <li>22</li>
-                <li>23</li>
-                <li>24</li>
-                <li>25</li>
-                <li>26</li>
-                <li>27</li>
-                <li>28</li>
-                <li>29</li>
-
-                <li>30</li>
-                <li>31</li>
-                <li>32</li>
-                <li>33</li>
-                <li>34</li>
-                <li>35</li>
-                <li>36</li>
-                <li>37</li>
-                <li>38</li>
-                <li>39</li>
-
-                <li>40</li>
-                <li>41</li>
-                <li>42</li>
-                <li>43</li>
-                <li>44</li>
-                <li>45</li>
-                <li>46</li>
-                <li>47</li>
-                <li>48</li>
-                <li>49</li>
-
-                <li>50</li>
-                <li>51</li>
-                <li>52</li>
-                <li>53</li>
-                <li>54</li>
-                <li>55</li>
-                <li>56</li>
-                <li>57</li>
-                <li>58</li>
-                <li>59</li>
-              </ul>
-            </div>
-            <div class="full" ui-scroll=":y" style="padding-bottom: 15.2em">
-              <ul ui-btns="@a none s :block">
-                <li>00</li>
-                <li>01</li>
-                <li>02</li>
-                <li>03</li>
-                <li>04</li>
-                <li>05</li>
-                <li>06</li>
-                <li>07</li>
-                <li>08</li>
-                <li>09</li>
-
-                <li>10</li>
-                <li>11</li>
-                <li>12</li>
-                <li>13</li>
-                <li>14</li>
-                <li>15</li>
-                <li>16</li>
-                <li>17</li>
-                <li>18</li>
-                <li>19</li>
-
-                <li>20</li>
-                <li>21</li>
-                <li>22</li>
-                <li>23</li>
-                <li>24</li>
-                <li>25</li>
-                <li>26</li>
-                <li>27</li>
-                <li>28</li>
-                <li>29</li>
-
-                <li>30</li>
-                <li>31</li>
-                <li>32</li>
-                <li>33</li>
-                <li>34</li>
-                <li>35</li>
-                <li>36</li>
-                <li>37</li>
-                <li>38</li>
-                <li>39</li>
-
-                <li>40</li>
-                <li>41</li>
-                <li>42</li>
-                <li>43</li>
-                <li>44</li>
-                <li>45</li>
-                <li>46</li>
-                <li>47</li>
-                <li>48</li>
-                <li>49</li>
-
-                <li>50</li>
-                <li>51</li>
-                <li>52</li>
-                <li>53</li>
-                <li>54</li>
-                <li>55</li>
-                <li>56</li>
-                <li>57</li>
-                <li>58</li>
-                <li>59</li>
-              </ul>
+      </div>
+    </div>
+    <div ui-date-body="" class="flex-block pr">
+      <div v-if="state.type === 2" class="full n-ms">
+        <ul ui-row="mob-6" 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-xs+ h-xs+ ac ux-none co-main:hover">{{ year }}</div>
+          </li>
+        </ul>
+      </div>
+      <div v-else-if="state.type === 1" class="full">
+        <ul ui-row="mob-4" class="n-ms ny-sm-sub">
+          <li ui-flex="col cm" @click="setDateValue('m', 1)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">1月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 2)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">2月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 3)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">3月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 4)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">4月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 5)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">5月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 6)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">6月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 7)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">7月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 8)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">8月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 9)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">9月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 10)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">10月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 11)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">11月</div></li>
+          <li ui-flex="col cm" @click="setDateValue('m', 12)"><div ui-flex="col cm" class="w-xs+ h-xs+ ac ux-none co-main:hover">12月</div></li>
+        </ul>
+      </div>
+      <div v-else class="full">
+        <ul ui-flex="row am" class="fs-xs nx-sm nt-sm">
+          <li class="flex-block ac"><span>日</span></li>
+          <li class="flex-block ac"><span>一</span></li>
+          <li class="flex-block ac"><span>二</span></li>
+          <li class="flex-block ac"><span>三</span></li>
+          <li class="flex-block ac"><span>四</span></li>
+          <li class="flex-block ac"><span>五</span></li>
+          <li class="flex-block ac"><span>六</span></li>
+        </ul>
+        <ul ui-date-days="" ui-flex="col xm" class="flex-wrap nx-sm">
+          <li v-for="(week, idx) in state.curr.days" :key="idx" :ui-date-week="idx + 1" class="flex-block" ui-flex="row am" style="margin-bottom: -0.25em">
+            <div v-for="(item, i) in week" :key="i" class="pr flex-block nb-sm" ui-flex="col xy">
+              <div
+                v-if="item.day"
+                :ui-date-day="item.day"
+                class="flex-block"
+                :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)"
+              >
+                <div
+                  ui-flex="col cm"
+                  class="r-sm b-solid bk-none b-xs my-ss ux-scale co-main:hover"
+                  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'}`"
+                >
+                  <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% 100%" ui-flex="row ct" v-html="extras(item)"></div>
             </div>
-          </div>
-        </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-if="!state.isNoTime && state.type === 0" class="ny-sm nx-ms">
+      <div class="full ac b-solid bk-back 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-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-mm bt-xs">
+    <div v-if="tools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line-o-mm bt-xs">
       <div ui-flex="row lm" class="nl-ss">
-        <p v-if="state.panel" ui-flex="row lm">
-          <span ui-btn="@a xs none" class="nx-ss" @click="setPanelType('date')">{{ state.panel }}</span>
-          <span v-if="!state.isNoTime" ui-btn="@a xs none" class="nx-ss" @click="setPanelType('time')"> {{ state.time.h }}:{{ state.time.m }}:{{ state.time.s }} </span>
-        </p>
+        <div v-if="state.panel" ui-flex="row lm">
+          <span :anim-editing="state.type === 'date'" class="nx-ss">{{ idate(state.panel).format('YYYY-MM-DD') }}</span>
+          <span v-if="!state.isNoTime" :anim-editing="state.type === 'time'" class="nx-ss">{{ idate(state.panel).format('HH:mm:ss') }}</span>
+        </div>
         <div v-else-if="state.shortcuts?.length" ui-flex="row lm">
           <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-xs co-main r-xl" ui-btn="@a xs none :round" @click="item?.func">{{ item?.text }}</p>
-            <p class="bg-main-xs co-main r-xl" ui-btn="@a xs none :round"><Icon class="co-main" name="more" /></p>
+            <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>&nbsp;</div>
       </div>
-      <div class="ml-sm-sub" ui-flex="row rm">
+      <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>
@@ -273,10 +151,14 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, reactive, watch } from 'vue';
-  import { idate, isDateString, isObject, isString } from '@fekit/utils';
+  import { computed, ref, reactive, watch, onMounted } from 'vue';
+  import { isDateString, isObject, isString } from '@fekit/utils';
+  // import { idate } from '@fekit/utils';
+  import { idate } from './date';
   import { Icon } from '../basic';
 
+  // const _level: any = { 0: ['d', 1], 1: ['m', 1], 2: ['y', 10], 3: ['y', 100] };
+
   // 创建日期
   const cDate = (date: any = null) => {
     return isDateString(date) ? new Date(date) : new Date();
@@ -288,20 +170,20 @@
       text: '昨天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() - 1)).format('YYYY-MM-DD') });
-      }
+      },
     },
     today: {
       text: '今天',
       func() {
         change({ date: idate(new Date()).format('YYYY-MM-DD') });
-      }
+      },
     },
     tomorrow: {
       text: '明天',
       func() {
         change({ date: idate(new Date().setDate(new Date().getDate() + 1)).format('YYYY-MM-DD') });
-      }
-    }
+      },
+    },
   };
 
   const emits: any = defineEmits(['update:modelValue', 'change', 'update']);
@@ -321,6 +203,7 @@
     shortcuts?: Array<'yesterday' | 'today' | 'tomorrow'>;
     extras?: (item: any) => string;
     time?: boolean | TimeProps;
+    lang?: string;
   }
   const props: any = withDefaults(defineProps<Props>(), {
     // 值
@@ -343,74 +226,196 @@
     format: 'YYYY-MM-DD',
     // 节假日
     holiday: () => ({}),
-    time: false
+    time: false,
+    // 语言
+    lang: 'zh-CN',
+  });
+
+  // 小时
+  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 state: any = reactive({
     // 面板显示时间
-    panel: '',
+    panel: undefined,
+    // 面板年份选择
+    years: 0,
     // 当前时间计算
     curr: computed(() => {
+      // console.log(158, state.panel);
       const date = idate(state.panel);
       const days = date.calendar({ group: true, value: [state.panel] });
-      const { y = 0, M: m = 0, d = 0 } = date.attr || {};
-      return { days, y, m, d };
+      return { days, ...date.attr };
     }),
-    type: 'date',
+    // 当前面板类型
+    type: 0,
     // 值
-    value: '',
+    value: undefined,
     // 快捷选择
     shortcuts: computed(() => {
       return props.shortcuts.map((item: any) => {
         return isString(item) ? shortcutsList[item] : item;
       });
     }),
-    // 时间
-    time: {
-      h: '00',
-      m: '00',
-      s: '00'
-    },
+    // 不带时间（只要时或分的也考虑到）
     isNoTime: computed(() => {
       if (isObject(props.time)) {
         return !(props.time.h || props.time.m || props.time.s);
       } else {
-        return props.time;
+        return !props.time;
       }
-    })
+    }),
   });
 
+  // 面板
+  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) => {
+    state.panel = upload(type, value, add);
+    // 面板返回上一级
+    state.type -= 1;
+  };
+
+  // 时分秒
+  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.panel = value || '';
+      state.panel = value || undefined;
       // 值
-      state.value = value || '';
-      // 时间
+      state.value = value || undefined;
+    },
+    { deep: true, immediate: true },
+  );
+
+  onMounted(() => {
+    setTimeValue();
+  });
+  watch(
+    () => state.panel,
+    () => {
+      setTimeValue();
     },
-    { deep: true, immediate: true }
   );
 
   // 更新时间
-  const upload = (a: any = 'm', b: any = 1) => {
+  const upload = (type: string = 'm', value: number = 0, add: number = 1) => {
     const date = cDate(state.panel);
-    if (a === 'm') {
-      date.setMonth(date.getMonth() + b);
-    } else {
-      date.setFullYear(date.getFullYear() + b);
+
+    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);
   };
 
   // 日期前翻
-  const prev = (type: any = 'm') => {
-    state.panel = 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.panel = upload(type, 1);
+  const next = () => {
+    state.panel = upload(state.type > 0 ? 'y' : 'm', 0, state.type === 2 ? 10 : 1);
   };
 
   // 向外通信
@@ -418,54 +423,62 @@
     state.panel = item ? idate(item.date).format(props.format) : item;
     emits('change', state.value);
     if (state.isNoTime) {
-      console.log('这是没有时间的');
       update();
     }
   };
 
   // 清空日期
   const remove = () => {
-    state.panel = '';
+    state.panel = undefined;
     update();
   };
 
   // 更新数据
   const update = () => {
-    emits('update:modelValue', state.panel);
-    emits('update', state.panel);
+    emits('update:modelValue', state.panel ? idate(state.panel).format(props.format) : undefined);
+    emits('update', state.panel ? idate(state.panel).format(props.format) : undefined);
   };
 
-  // 设置范围
-  const setRangeValue = (item: any) => {};
-  // 设置面板类型
-  const setPanelType = (type: any) => {
-    state.type = type;
-  };
-  // 设置年份
-  const setYear = (y: any) => {
-    state.type = 'month';
+  // 面板类型
+  const setPanelType = () => {
+    if (state.type < 3) {
+      state.type += 1;
+    }
   };
-  // 设置月份
-  const setMonth = (m: any) => {
-    state.type = 'date';
+
+  // 时间滚动
+  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 { YYYY = 0, MM = 0, DD = 0, HH = '', mm = '', ss = '' }: any = state.curr || {};
+        let _panel = `${YYYY}-${MM}-${DD}`;
+        if (type === 'h') {
+          _panel += ` ${idx}:${mm}:${ss}`;
+        }
+        if (type === 'm') {
+          _panel += ` ${HH}:${idx}:${ss}`;
+        }
+        if (type === 's') {
+          _panel += ` ${HH}:${mm}:${idx}`;
+        }
+        state.panel = idate(_panel).format('YYYY-MM-DD HH:mm:ss');
+      }, 100);
+    }
   };
 </script>
 <style lang="scss">
-  @keyframes am-editing {
-    0%,
-    20% {
-      opacity: 1;
-    }
-    40%,
-    60% {
-      opacity: 0;
+  .fekit-date-view-time-scroll {
+    position: relative;
+    height: 100%;
+    scroll-snap-type: y mandatory;
+    & > * {
+      scroll-snap-align: center;
     }
-    80%,
-    100% {
-      opacity: 1;
-    }
-  }
-  .am-editing {
-    animation: am-editing 1s linear infinite;
   }
 </style>