@neatui/vue 3.0.0 → 4.0.0

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

@@ -1,608 +0,0 @@
-<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: 22em">
-    <div ui-date-head="" class="flex-fixed nx-ms mt-ss ny-sm b-solid bk-line" 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 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>
-    </div>
-    <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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-ss h-xs 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-xs 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>
-          <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"
-                  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-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% 100%" ui-flex="row ct" v-html="extras(item)"></div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <template v-if="!state.isNoTime">
-      <div v-if="state.type === 0" class="h-ss ny-sm nx-ms">
-        <div class="full ac b-solid bk-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-ss"></div>
-    </template>
-    <div v-if="showTools" ui-date-foot="" ui-flex="row xm" class="flex-fixed nx-sl ny-sl b-solid bk-line bt-xs">
-      <div ui-flex="row lm" class="nl-ss">
-        <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">
-          <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-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-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, 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-ls+', tools: true },
-    month: { baseType: 1, format: 'YYYY-MM', bodyClass: 'min-h-ms', tools: false },
-    year: { baseType: 2, format: 'YYYY', bodyClass: 'min-h-ms', tools: false },
-  };
-
-  // 创建日期
-  const cDate = (date: any = null) => {
-    const normalized = normalizeDateInput(date);
-    // iOS 兼容：Safari 不支持 "YYYY-MM-DD" 格式，需要替换为 "YYYY/MM/DD"
-    return isDateString(normalized) ? new Date(normalized?.replace(/-/g, '/')) : new Date();
-  };
-
-  // 快捷预设
-  const shortcutsList: any = {
-    yesterday: {
-      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']);
-  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' | 'year';
-    holiday?: object;
-    shortcuts?: Array<'yesterday' | 'today' | 'tomorrow'>;
-    extras?: (item: any) => string;
-    time?: boolean | TimeProps;
-    lang?: string;
-  }
-  const props: any = withDefaults(defineProps<Props>(), {
-    // 值
-    modelValue: '',
-    // 是否显示框架
-    frame: false,
-    // 是否是示工具
-    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:.5em; height:.5em;"></i>`;
-    },
-    // 快捷选择
-    shortcuts: () => ['yesterday', 'today', 'tomorrow'],
-    // 数据格式化
-    format: undefined,
-    // 节假日
-    holiday: () => ({}),
-    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({
-    // 面板显示时间
-    panel: undefined,
-    // 面板年份选择
-    years: 0,
-    // 当前时间计算
-    curr: computed(() => {
-      const date = idate(state.panel);
-      const days = date.calendar({ group: true, value: [state.panel] });
-      return { days, ...date.attr };
-    }),
-    // 当前面板类型
-    type: 0,
-    // 值
-    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) => {
-      const formatted = value ? idate(value).format(panelFormat.value) : undefined;
-      // 面板显示日期
-      state.panel = formatted;
-      // 值
-      state.value = formatted;
-    },
-    { deep: true, immediate: true },
-  );
-
-  onMounted(() => {
-    setTimeValue();
-  });
-  watch(
-    () => state.panel,
-    () => {
-      setTimeValue();
-    },
-  );
-
-  // 更新时间
-  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(panelFormat.value);
-  };
-
-  // 日期前翻
-  const prev = () => {
-    state.panel = upload(state.type > 0 ? 'y' : 'm', 0, state.type === 2 ? -10 : -1);
-  };
-  // 日期后翻
-  const next = () => {
-    state.panel = upload(state.type > 0 ? 'y' : 'm', 0, state.type === 2 ? 10 : 1);
-  };
-
-  // 向外通信
-  const change = (item: any) => {
-    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>

package/src/components/tools/MoreTools@v2.vue

@@ -1,74 +0,0 @@
-<template>
-  <div ui-tips="@a ux:hover">
-    <button :ui-btn="`@a none s :square`"><i class="icon icon-more"></i></button>
-    <div ui-tips-box="bl" class="n-sl">
-      <slot name="prefix"></slot>
-      <slot>
-        <div>
-          <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
-          <div ui-btns="@a line s :group :border">
-            <button @click="setLinkMode('default')"><code :class="`${state.tools.confs.linkMode === 'default' ? 'co-main' : ''}`">跳转</code></button>
-            <button @click="setLinkMode('preview')"><code :class="`${state.tools.confs.linkMode === 'preview' ? 'co-main' : ''}`">预览</code></button>
-            <button @click="setLinkMode('windows')"><code :class="`${state.tools.confs.linkMode === 'windows' ? 'co-main' : ''}`">新窗口</code></button>
-          </div>
-        </div>
-        <div ui-line="@a" class="mt-sm mb-ss"></div>
-        <div>
-          <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
-          <div ui-btns="@a line s :group :border">
-            <button @click="setPageSize(10)"><code :class="`${state.tools.param.pageSize === 10 ? 'co-main' : ''}`">10</code></button>
-            <button @click="setPageSize(20)"><code :class="`${state.tools.param.pageSize === 20 ? 'co-main' : ''}`">20</code></button>
-            <button @click="setPageSize(50)"><code :class="`${state.tools.param.pageSize === 50 ? 'co-main' : ''}`">50</code></button>
-            <button @click="setPageSize(100)"><code :class="`${state.tools.param.pageSize === 100 ? 'co-main' : ''}`">100</code></button>
-          </div>
-        </div>
-      </slot>
-      <slot name="prefix"></slot>
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-  import { reactive, computed } from 'vue';
-  import { useRoute } from 'vue-router';
-  const emits = defineEmits(['update:confs', 'update:param']);
-  const props = defineProps({
-    confs: {
-      type: Object,
-      default: () => ({})
-    },
-    param: {
-      type: Object,
-      default: () => ({})
-    }
-  });
-
-  const route = useRoute();
-  const state: any = reactive({
-    name: computed(() => 'confs' + route.path?.replace(/\//g, '_')),
-    tools: {
-      confs: {},
-      param: {}
-    }
-  });
-
-  const init = () => {
-    const _cache = JSON.parse(localStorage.getItem(`${state.name}`) || '{}');
-    state.tools.confs = _cache.confs || JSON.parse(JSON.stringify(props.confs));
-    state.tools.param = _cache.param || JSON.parse(JSON.stringify(props.param));
-    emits('update:confs', state.tools.confs);
-    emits('update:param', state.tools.param);
-  };
-  init();
-
-  const setLinkMode = (linkMode: any) => {
-    state.tools.confs.linkMode = linkMode;
-    emits('update:confs', state.tools.confs);
-    localStorage.setItem(state.name, JSON.stringify(state.tools));
-  };
-
-  const setPageSize = (pageSize: any) => {
-    state.tools.param.pageSize = pageSize;
-    emits('update:param', state.tools.param);
-    localStorage.setItem(state.name, JSON.stringify(state.tools));
-  };
-</script>