@neatui/vue 2.17.5 → 3.0.0

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    :ui-form="`${theme} sz:${sz} ${state.error.co} type:input ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''} ${preview ? 'preview' : ''}`"
     @click="emits('click', $event)"
   >
     <div v-if="state.interacted" :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
@@ -20,8 +20,7 @@
         :type="inputType"
         :placeholder="placeholder"
         :disabled="disabled"
-        :readonly="readonly"
-        autocomplete="new-password"
+        :readonly="readonly || preview"
         @focus="emits('focus', $event, state)"
         @input="input($event)"
         @change="emits('change', $event, state)"
@@ -29,10 +28,10 @@
       />
     </slot>
     <div ui-form-suffix="">
-      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !disabled" @click.stop="clear"></i>
+      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !preview && !disabled" @click.stop="clear"></i>
       <div
         class="o-ls"
-        v-if="type === 'password' && cipher"
+        v-if="type === 'password' && cipher && !preview"
         :ui-form-cipher="cipherVisible ? '1' : ''"
         @click.stop="toggleCipher"
       ></div>
@@ -70,7 +69,9 @@
    * minlength      最小长度
    * disabled       是否禁用
    * readonly       是否只读
+   * preview        是否预览展示
    * clearable      是否显示清除按钮
+   * cipher         密码框是否显示明密文切换
    * rules          校验规则
    * verify         是否显示校验
    * prefix         前缀内容
@@ -94,6 +95,7 @@
     minlength?: null | number;
     disabled?: boolean;
     readonly?: boolean;
+    preview?: boolean;
     clearable?: boolean;
     cipher?: boolean;
     verify?: boolean;
@@ -116,6 +118,7 @@
     minlength: null,
     disabled: false,
     readonly: false,
+    preview: false,
     clearable: true,
     cipher: true,
     verify: false,
@@ -217,7 +220,7 @@
   }
 
   const toggleCipher = () => {
-    if (props.disabled || props.readonly) return;
+    if (props.disabled || props.readonly || props.preview) return;
     cipherVisible.value = !cipherVisible.value;
   };
   // 输入

package/src/components/form/TextArea.vue

@@ -94,7 +94,7 @@
     verify?: boolean;
     prefix?: Array<any>;
     suffix?: Array<any>;
-    interacted?: boolean;
+    interacted?: boolean | number | null;
     autoHeight?: boolean;
     rows?: number;
   }
@@ -116,7 +116,7 @@
     verify: false,
     prefix: () => [],
     suffix: () => [],
-    interacted: false,
+    interacted: null,
     // textarea 特有属性默认值
     autoHeight: false,
     rows: 3,
@@ -124,7 +124,7 @@
 
   const state: any = reactive({
     // 用户是否交互
-    interacted: false,
+    interacted: null,
     // 值
     value: props.modelValue,
     // 错误

package/src/components/loader/FormLoader/FormLoader.vue

@@ -3,18 +3,18 @@
     <template v-for="(col, idx) in state.form" :key="idx">
       <div v-if="!col.clear" :id="col._fid" :ui-col="col.media" :ui-flex="`${vertical ? 'col xm' : 'row lt'}`">
         <template v-if="col.label">
-          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" class="o-ls">
+          <h6 v-if="vertical" :style="`${col.rules?.some((validator: any) => validator.required) ? 'text-indent: -1em' : ''}`" :class="labelClass">
             <template v-if="col.label == '*'"></template>
             <template v-else>
               <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk pr" style="left: 0.1em">﹡</b>
-              <span>{{ col.label ? col.label + ':' : '' }}</span>
+              <span>{{ formatLabel(col) }}</span>
             </template>
           </h6>
-          <p v-else :class="`${clh({ ...(col.model[1] || {}) })}`" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
+          <p v-else :class="[labelClass, `${clh({ ...(col.model[1] || {}) })}`]" :style="`width:${state._lw + 'em'}; max-width:50%;`" class="ar nr-sm flex-fixed o-ls">
             <template v-if="col.label == '*'"></template>
             <template v-else>
               <b v-if="col.rules?.some((validator: any) => validator.required)" class="co-risk">﹡</b>
-              <span>{{ col.label ? col.label + ':' : '' }}</span>
+              <span>{{ formatLabel(col) }}</span>
             </template>
           </p>
         </template>
@@ -262,6 +262,16 @@
       type: [String, Number],
       default: '',
     },
+    // label冒号控制，false不显示，string自定义字符
+    colon: {
+      type: [Boolean, String],
+      default: true,
+    },
+    // 统一的label class
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
     // 是否垂直排列
     vertical: {
       type: Boolean,
@@ -269,6 +279,21 @@
     },
   });
 
+  // label展示文案，支持全局/单个字段开关冒号
+  const formatLabel = (col: any = {}) => {
+    const { label = '', colon: localColon = undefined } = col || {};
+    if (!label) return '';
+    if (/[:：]\s*$/.test(label)) return label;
+    const suffix = (() => {
+      if (localColon === false) return '';
+      if (isString(localColon)) return localColon;
+      if (localColon === true) return ':';
+      if (isString(props.colon)) return props.colon;
+      return props.colon ? ':' : '';
+    })();
+    return suffix ? `${label}${suffix}` : label;
+  };
+
   // 数据
   const state: any = reactive({
     form: [],

package/src/components/loader/LayerLoader/LayerLoader.vue

@@ -76,7 +76,7 @@
   import { nextTick, reactive, ref, watch, onMounted } from 'vue';
   import LayerLoader from './LayerLoader.vue';
   import { useBasicStore, useWorksStore, storeToRefs } from '@/stores';
-  import { deepcopy } from '@fekit/utils';
+  import { deepcopy, env } from '@fekit/utils';
   import scrollto from '@fekit/scrollto';
 
   // 事件定义
@@ -131,6 +131,7 @@
         unfoldActivePath(props.data, newActive);
 
         nextTick(() => {
+          if (!env.client) return;
           const el = document.getElementById(`LID${newActive.replace(/\./g, '')}`);
           if (el && !store.isMouseInLayer) {
             scrollto({

package/src/components/loader/LimitLoader/LimitLoader@v3.vue

@@ -50,7 +50,7 @@
 <script lang="ts" setup>
   import { computed, reactive, watch } from 'vue';
   import { useRoute } from 'vue-router';
-  import { deepcopy, isObject, isString } from '@fekit/utils';
+  import { deepcopy, env, isObject, isString } from '@fekit/utils';
   import { IFollowView } from '../../basic';
   import { Input, Select, SelectTree, MoreSelect, SearchMoreSelect, DatePicker, DateRangePicker, Cascader } from '../../form';
 
@@ -108,7 +108,7 @@
   watch(
     () => props.limit,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
+      const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${state.name}_limit`) || '{}') : {};
       state.limit = deepcopy(props.limit)?.map((item: any) => {
         if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '_close')) {
           item._close = Number(_cache[item.field]?._close);
@@ -159,7 +159,7 @@
           }
         }
       });
-      localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
+      if (env.client) window.localStorage.setItem(`${state.name}_limit`, JSON.stringify(_limit));
     },
     { deep: true },
   );

package/src/components/loader/TableLoader/TableLoader.vue

@@ -152,7 +152,7 @@
   import { IFollowView, Icon } from '../../basic';
   import { itable } from '@fekit/itable';
   import TableRender from './TableRender.vue';
-  import { isFunction, isObject, hasOwnProp, deepcopy } from '@fekit/utils';
+  import { isFunction, isObject, hasOwnProp, deepcopy, env } from '@fekit/utils';
 
   const route = useRoute();
   const router = useRouter();
@@ -264,7 +264,7 @@
   watch(
     () => props.table,
     () => {
-      const _cache = JSON.parse(localStorage.getItem(`${name}_table`) || '{}');
+      const _cache = env.client ? JSON.parse(window.localStorage.getItem(`${name}_table`) || '{}') : {};
       state.__last = 0;
       state.table = deepcopy(props.table || [])
         ?.map((col: TableColumn, idx: number) => {
@@ -340,7 +340,7 @@
           state.__last = idx;
         }
       });
-      localStorage.setItem(`${name}_table`, JSON.stringify(_table));
+      if (env.client) window.localStorage.setItem(`${name}_table`, JSON.stringify(_table));
     },
     { deep: true },
   );

package/src/components/loader/index.ts

@@ -1,4 +1,4 @@
-import FormLoader from './FormLoader/FormLoader@v2.vue';
+import FormLoader from './FormLoader/FormLoader.vue';
 import LimitLoader from './LimitLoader';
 export * from './TableLoader/index';
 import TableLoader from './TableLoader/TableLoader.vue';

package/src/components/tools/FormDraftsView.vue

@@ -41,7 +41,7 @@
   import { ref, reactive, watch, onMounted, onUnmounted, computed } from 'vue';
   import { useRoute } from 'vue-router';
   import scrollTo from '@fekit/scrollto';
-  import { diff, deepcopy, isArray } from '@fekit/utils';
+  import { diff, deepcopy, env, isArray } from '@fekit/utils';
 
   // 通过枚举值查找枚举名
   const findEnumName = (enums: any, val: any, join: boolean | string = ' Ι ') => {
@@ -69,8 +69,8 @@
   const route: any = useRoute();
   const props: any = defineProps({
     area: {
-      type: HTMLElement,
-      default: document.body
+      type: Object,
+      default: () => (env.client ? document.body : null)
     },
     // 数据
     data: {
@@ -101,7 +101,7 @@
     // 对比数据
     diffs: computed(() => {
       const cloud = props.data || {};
-      const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+      const local = env.client ? JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}') : {};
 
       const diffs = Object.keys(local).length
         ? (diff(cloud, local) || []).map((item: any) => {
@@ -162,6 +162,7 @@
 
   // 定位字段
   const fScrollToField = (domId: any) => {
+    if (!env.client || !props.area) return;
     const dom = document.querySelector(domId);
     if (dom) {
       scrollTo({
@@ -182,7 +183,8 @@
 
   // 使用草稿
   const fConfirmDrafts = ({ field = '', path = [] }: any = {}) => {
-    const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+    if (!env.client) return;
+    const local = JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}');
     if (field) {
       state.field = field;
       // 无限树型遍历
@@ -221,7 +223,8 @@
   };
   // 放弃草稿
   const fDiscardDrafts = ({ field = '', path = [] }: any = {}) => {
-    const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+    if (!env.client) return;
+    const local = JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}');
     if (field) {
       // 无限树型遍历
       let _cloud = state.cloud || {};
@@ -232,7 +235,7 @@
       });
       _local[field] = _cloud[field];
 
-      localStorage.setItem(state.cacheKey, JSON.stringify(local));
+      window.localStorage.setItem(state.cacheKey, JSON.stringify(local));
       emits('discard', field);
     } else {
       state.diffs.forEach((item: any) => {
@@ -252,7 +255,7 @@
         }
         state.show = 0;
       });
-      localStorage.setItem(state.cacheKey, JSON.stringify(local));
+      window.localStorage.setItem(state.cacheKey, JSON.stringify(local));
       emits('discard');
       state.show = 0;
     }
@@ -312,14 +315,15 @@
   watch(
     () => props.data,
     (edit: any, old: any) => {
+      if (!env.client) return;
       if (edit === old) {
         if (state.field) {
-          const local = JSON.parse(localStorage.getItem(state.cacheKey) || '{}');
+          const local = JSON.parse(window.localStorage.getItem(state.cacheKey) || '{}');
           local[state.field] = state.cloud[state.field];
-          localStorage.setItem(state.cacheKey, JSON.stringify(local));
+          window.localStorage.setItem(state.cacheKey, JSON.stringify(local));
           state.field = null;
         } else {
-          localStorage.setItem(state.cacheKey, JSON.stringify(edit));
+          window.localStorage.setItem(state.cacheKey, JSON.stringify(edit));
         }
       }
     },

package/src/components/tools/FormVerifyView.vue

@@ -31,14 +31,14 @@
   import { computed, reactive, toRefs, watch, onMounted, ref, onUnmounted } from 'vue';
   import { useRoute } from 'vue-router';
   import scrollTo from '@fekit/scrollto';
-  import { deepcopy, isArray, isObject, isFunction } from '@fekit/utils';
+  import { deepcopy, env, isArray, isObject, isFunction } from '@fekit/utils';
 
   const route: any = useRoute();
 
   const props: any = defineProps({
     area: {
-      type: HTMLElement,
-      default: document.body
+      type: Object,
+      default: () => (env.client ? document.body : null)
     },
     data: {
       type: Object,
@@ -128,6 +128,7 @@
   );
 
   const fScrollToField = (path: any) => {
+    if (!env.client || !props.area) return;
     const dom = document.querySelector(path);
     if (dom) {
       scrollTo({

package/src/components/tools/MoreTools.vue

@@ -30,6 +30,7 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { env } from '@fekit/utils';
   const emits = defineEmits(['update:confs', 'update:param']);
   const props = defineProps({
     confs: {
@@ -52,7 +53,7 @@
   });
 
   const init = () => {
-    const _cache = JSON.parse(localStorage.getItem(`${state.name}`) || '{}');
+    const _cache = env.client ? JSON.parse(window.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);
@@ -63,12 +64,12 @@
   const setLinkMode = (linkMode: any) => {
     state.tools.confs.linkMode = linkMode;
     emits('update:confs', state.tools.confs);
-    localStorage.setItem(state.name, JSON.stringify(state.tools));
+    if (env.client) window.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));
+    if (env.client) window.localStorage.setItem(state.name, JSON.stringify(state.tools));
   };
 </script>

package/src/components/tools/Pagination@a.vue

@@ -2,8 +2,8 @@
   <div ui-pagination="@a" class="w-full pading" ui-flex="row rm">
     <div class="ml-sl ar mob-ac" ui-flex="row rm">
       <div class="mx-ss-sub" ui-flex="row">
-        <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ data[defined.total || 'total'] || 0 }} 条</div>
-        <button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] > 1 ? '' : ':disabled'}`" @click="prev">
+        <div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ total }} 条</div>
+        <button :ui-btn="`@a s read :border :square ${currentPage > 1 ? '' : ':disabled'}`" :disabled="currentPage <= 1" @click="prev">
           <svg
             style="width: 1em; height: 1em"
             t="1701228540398"
@@ -23,7 +23,7 @@
         </button>
         <div ui-tips="@a co:well ux:hover">
           <div ui-btn="@a s read :border">
-            <code>{{ data[defined.page || 'page'] || 0 }}/{{ data[defined.totalPages || 'totalPages'] || 0 }}</code>
+            <code>{{ displayPage }}/{{ totalPages }}</code>
             <svg
               style="width: 1em; height: 1em"
               t="1701229420486"
@@ -45,7 +45,7 @@
             <div class="w-mm max-h-ls" ui-scroll=":y s">
               <ul class="n-sl n-ss-sub dib-sub">
                 <li v-for="item in state.lists" :key="item">
-                  <button :ui-btn="`@a s ${item === data[defined.page || 'page'] ? 'main' : 'read :border'}`" @click="page(item)">
+                  <button :ui-btn="`@a s ${item === currentPage ? 'main' : 'read :border'}`" @click="page(item)">
                     <code>{{ item }}</code>
                   </button>
                 </li>
@@ -53,7 +53,11 @@
             </div>
           </div>
         </div>
-        <button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] < data[defined.totalPages || 'totalPages'] ? '' : ':disabled'}`" @click="next">
+        <button
+          :ui-btn="`@a s read :border :square ${currentPage < totalPages ? '' : ':disabled'}`"
+          :disabled="currentPage >= totalPages"
+          @click="next"
+        >
           <svg style="width: 1em; height: 1em" class="icon co-read" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="64" height="64">
             <path
               d="M341.63640988 781.41564784c20.63742578 21.22981847 54.12571728 21.22981847 74.81456101 0l265.95100164-273.75421824c20.62728703-21.26747667 20.62728703-55.75008988 0-76.97556317l-265.95100164-273.74407946c-20.68449855-21.26747667-54.17423844-21.26747667-74.81456101 0-20.67291141 21.23706043-20.67291142 55.71170748 0 76.98497771l228.55639458 235.24869384-228.55567038 235.22117436c-20.67218722 21.26747667-20.67146302 55.74357212 0 77.02263594l0 0z"
@@ -94,10 +98,9 @@
               <li>
                 <h6 class="fs-xs o-mm nowrap">每页显示数量</h6>
                 <ul>
-                  <li @click="size(10)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 10 ? 'co-main' : ''}`">10条/页</code></li>
-                  <li @click="size(20)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 20 ? 'co-main' : ''}`">20条/页</code></li>
-                  <li @click="size(50)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 50 ? 'co-main' : ''}`">50条/页</code></li>
-                  <li @click="size(100)" class="ux-hover r-sm"><code :class="`${modelValue.pageSize === 100 ? 'co-main' : ''}`">100条/页</code></li>
+                  <li v-for="item in pageSizeOptions" :key="item" @click="size(item)" class="ux-hover r-sm">
+                    <code :class="`${pageSize === item ? 'co-main' : ''}`">{{ item }}条/页</code>
+                  </li>
                 </ul>
               </li>
             </ul>
@@ -111,6 +114,7 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { env } from '@fekit/utils';
 
   interface ModelValueProps {
     pageSize?: number;
@@ -141,6 +145,8 @@
     modelValue: ModelValueProps;
     data: DataProps;
     defined?: DefinedProps;
+    pageSizes?: number[];
+    pageSizeOptions?: number[];
   }
 
   const route: any = useRoute();
@@ -149,9 +155,16 @@
     modelValue: () => ({}),
     data: () => ({}),
     defined: () => ({}),
+    pageSizes: () => [],
+    pageSizeOptions: () => [10, 20, 50, 100],
   });
 
   const emits = defineEmits(['update:modelValue', 'page', 'size']);
+  const toNumber = (value: any, fallback = 0) => {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+  };
+
   // Auto-detect common pagination keys when `defined` is omitted.
   const defined = computed<DefinedProps>(() => {
     const result: DefinedProps = { ...(props.defined || {}) };
@@ -175,14 +188,48 @@
 
     return result;
   });
+  const fields = computed(() => ({
+    page: defined.value.page || 'page',
+    totalPages: defined.value.totalPages || 'totalPages',
+    total: defined.value.total || 'total',
+    pageSize: defined.value.pageSize || 'pageSize',
+  }));
+
+  const totalPages = computed(() => Math.max(0, Math.floor(toNumber(props.data[fields.value.totalPages], 0))));
+  const total = computed(() => Math.max(0, Math.floor(toNumber(props.data[fields.value.total], 0))));
+  const currentPage = computed(() => {
+    const page = Math.max(1, Math.floor(toNumber(props.data[fields.value.page] ?? props.modelValue[fields.value.page], 1)));
+    return totalPages.value > 0 ? Math.min(page, totalPages.value) : 1;
+  });
+  const displayPage = computed(() => (totalPages.value > 0 ? currentPage.value : 0));
+  const pageSize = computed(() => Math.max(0, Math.floor(toNumber(props.modelValue[fields.value.pageSize] ?? props.data[fields.value.pageSize], 0))));
+  const pageSizeOptions = computed(() => {
+    const options = Array.isArray(props.pageSizes) && props.pageSizes.length ? props.pageSizes : props.pageSizeOptions;
+    return options.filter((item: any) => Number.isFinite(Number(item)) && Number(item) > 0).map((item: any) => Number(item));
+  });
+
+  const normalizePage = (value: any) => {
+    const page = Math.max(1, Math.floor(toNumber(value, currentPage.value)));
+    return totalPages.value > 0 ? Math.min(page, totalPages.value) : page;
+  };
+
+  const emitPage = (value: any) => {
+    if (totalPages.value <= 0) {
+      return;
+    }
+    const nextPage = normalizePage(value);
+    emits('update:modelValue', { ...props.modelValue, [fields.value.page]: nextPage });
+    emits('page', nextPage);
+  };
 
   const state: any = reactive({
     id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
     showTotal: true,
     list: computed(() => {
-      const pageKey = defined.value.page || 'page';
-      const totalPagesKey = defined.value.totalPages || 'totalPages';
-      const _page = Number(props.data[pageKey] || 1);
+      if (totalPages.value <= 0) {
+        return [];
+      }
+      const _page = currentPage.value;
       const list = [_page];
       if (_page > 1) {
         list.unshift(_page - 1);
@@ -192,7 +239,7 @@
       }
       const _max = 5 - list.length;
       for (let i = 1; i <= _max; i++) {
-        if (_page + i <= props.data[totalPagesKey]) {
+        if (_page + i <= totalPages.value) {
           list.push(_page + i);
         }
       }
@@ -205,9 +252,8 @@
       return list;
     }),
     lists: computed(() => {
-      const totalPagesKey = defined.value.totalPages || 'totalPages';
       const _lists: any = [];
-      for (let i = 1; i <= props.data[totalPagesKey]; i++) {
+      for (let i = 1; i <= totalPages.value; i++) {
         _lists.push(i);
       }
       return _lists;
@@ -215,39 +261,29 @@
   });
 
   const prev = () => {
-    const pageKey = defined.value.page || 'page';
-    const _page = Number(props.data[pageKey]) - 1 < 1 ? 1 : Number(props.data[pageKey]) - 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: _page } });
-    emits('page', _page);
+    emitPage(currentPage.value - 1);
   };
 
   const next = () => {
-    const pageKey = defined.value.page || 'page';
-    const totalPagesKey = defined.value.totalPages || 'totalPages';
-    const _page =
-      Number(props.data[pageKey]) + 1 > props.data[totalPagesKey]
-        ? props.data[totalPagesKey]
-        : Number(props.data[pageKey]) + 1;
-    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: _page } });
-    emits('page', _page);
+    emitPage(currentPage.value + 1);
   };
 
   const page = (idx: any) => {
-    const pageKey = defined.value.page || 'page';
-    emits('update:modelValue', { ...props.modelValue, ...{ [pageKey]: idx } });
-    emits('page', idx);
+    emitPage(idx);
   };
 
-  const size = (size: any) => {
-    const pageSizeKey = defined.value.pageSize || 'pageSize';
-    emits('update:modelValue', { ...props.modelValue, ...{ [pageSizeKey]: size } });
-    emits('size', size);
-    window.localStorage.setItem(state.id, `${size}`);
+  const size = (value: any) => {
+    const nextSize = Math.max(1, Math.floor(toNumber(value, pageSize.value || 10)));
+    emits('update:modelValue', { ...props.modelValue, [fields.value.pageSize]: nextSize });
+    emits('size', nextSize);
+    if (env.client) window.localStorage.setItem(state.id, `${nextSize}`);
   };
 
   // 缓存
-  const cache = window.localStorage.getItem(state.id);
-  if (cache) {
-    size(Number(cache));
+  if (env.client) {
+    const cache = window.localStorage.getItem(state.id);
+    if (cache) {
+      size(Number(cache));
+    }
   }
 </script>

package/src/components/tools/Pagination@b.vue

@@ -127,6 +127,7 @@
 <script setup lang="ts">
   import { reactive, computed } from 'vue';
   import { useRoute } from 'vue-router';
+  import { env } from '@fekit/utils';
 
   const route: any = useRoute();
 
@@ -215,6 +216,6 @@
   const size = (size: any) => {
     emits('update:modelValue', { ...props.modelValue, ...{ pageSize: size } });
     emits('size', size);
-    window.localStorage.setItem(state.id, `${size}`);
+    if (env.client) window.localStorage.setItem(state.id, `${size}`);
   };
 </script>