@melt-js/libs-vben 0.0.0-stage → 2026.11.8-2

package/src/hooks/use-design-tokens.ts

@@ -0,0 +1,421 @@
+import { reactive, watch } from 'vue';
+
+import { preferences, usePreferences } from '@melt-js/libs-vben/preferences';
+import { convertToRgb, updateCSSVariables } from '@melt-js/libs-vben/utils';
+
+/**
+ * 用于适配各个框架的设计系统
+ */
+
+export function useAntdDesignTokens() {
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const tokens = reactive({
+    borderRadius: '' as any,
+    colorBgBase: '',
+    colorBgContainer: '',
+    colorBgElevated: '',
+    colorBgLayout: '',
+    colorBgMask: '',
+    colorBorder: '',
+    colorBorderSecondary: '',
+    colorError: '',
+    colorInfo: '',
+    colorPrimary: '',
+    colorSuccess: '',
+    colorTextBase: '',
+    colorWarning: '',
+    zIndexPopupBase: 2000, // 调整基础弹层层级，避免下拉等组件被弹窗或者最大化状态下的表格遮挡
+  });
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = rootStyles.getPropertyValue(variable);
+    return isColor ? `hsl(${value})` : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      tokens.colorPrimary = getCssVariableValue('--primary');
+
+      tokens.colorInfo = getCssVariableValue('--primary');
+
+      tokens.colorError = getCssVariableValue('--destructive');
+
+      tokens.colorWarning = getCssVariableValue('--warning');
+
+      tokens.colorSuccess = getCssVariableValue('--success');
+
+      tokens.colorTextBase = getCssVariableValue('--foreground');
+
+      getCssVariableValue('--primary-foreground');
+
+      tokens.colorBorderSecondary = tokens.colorBorder =
+        getCssVariableValue('--border');
+
+      tokens.colorBgElevated = getCssVariableValue('--popover');
+
+      tokens.colorBgContainer = getCssVariableValue('--card');
+
+      tokens.colorBgBase = getCssVariableValue('--background');
+
+      const radius = Number.parseFloat(getCssVariableValue('--radius', false));
+      // 1rem = 16px
+      tokens.borderRadius = radius * 16;
+
+      tokens.colorBgLayout = getCssVariableValue('--background-deep');
+      tokens.colorBgMask = getCssVariableValue('--overlay');
+    },
+    { immediate: true },
+  );
+
+  return {
+    tokens,
+  };
+}
+
+export function useNaiveDesignTokens() {
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const commonTokens = reactive({
+    baseColor: '',
+    bodyColor: '',
+    borderColor: '',
+    borderRadius: '',
+    cardColor: '',
+    dividerColor: '',
+    errorColor: '',
+    errorColorHover: '',
+    errorColorPressed: '',
+    errorColorSuppl: '',
+    invertedColor: '',
+    modalColor: '',
+    popoverColor: '',
+    primaryColor: '',
+    primaryColorHover: '',
+    primaryColorPressed: '',
+    primaryColorSuppl: '',
+    successColor: '',
+    successColorHover: '',
+    successColorPressed: '',
+    successColorSuppl: '',
+    tableColor: '',
+    textColorBase: '',
+    warningColor: '',
+    warningColorHover: '',
+    warningColorPressed: '',
+    warningColorSuppl: '',
+  });
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = rootStyles.getPropertyValue(variable);
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      commonTokens.primaryColor = getCssVariableValue('--primary');
+      commonTokens.primaryColorHover = getCssVariableValue('--primary-600');
+      commonTokens.primaryColorPressed = getCssVariableValue('--primary-700');
+      commonTokens.primaryColorSuppl = getCssVariableValue('--primary-800');
+
+      commonTokens.errorColor = getCssVariableValue('--destructive');
+      commonTokens.errorColorHover = getCssVariableValue('--destructive-600');
+      commonTokens.errorColorPressed = getCssVariableValue('--destructive-700');
+      commonTokens.errorColorSuppl = getCssVariableValue('--destructive-800');
+
+      commonTokens.warningColor = getCssVariableValue('--warning');
+      commonTokens.warningColorHover = getCssVariableValue('--warning-600');
+      commonTokens.warningColorPressed = getCssVariableValue('--warning-700');
+      commonTokens.warningColorSuppl = getCssVariableValue('--warning-800');
+
+      commonTokens.successColor = getCssVariableValue('--success');
+      commonTokens.successColorHover = getCssVariableValue('--success-600');
+      commonTokens.successColorPressed = getCssVariableValue('--success-700');
+      commonTokens.successColorSuppl = getCssVariableValue('--success-800');
+
+      commonTokens.textColorBase = getCssVariableValue('--foreground');
+
+      commonTokens.baseColor = getCssVariableValue('--primary-foreground');
+
+      commonTokens.dividerColor = commonTokens.borderColor =
+        getCssVariableValue('--border');
+
+      commonTokens.modalColor = commonTokens.popoverColor =
+        getCssVariableValue('--popover');
+
+      commonTokens.tableColor = commonTokens.cardColor =
+        getCssVariableValue('--card');
+
+      commonTokens.bodyColor = getCssVariableValue('--background');
+      commonTokens.invertedColor = getCssVariableValue('--background-deep');
+
+      commonTokens.borderRadius = getCssVariableValue('--radius', false);
+    },
+    { immediate: true },
+  );
+  return {
+    commonTokens,
+  };
+}
+
+export function useElementPlusDesignTokens() {
+  const { isDark } = usePreferences();
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const getCssVariableValueRaw = (variable: string) => {
+    return rootStyles.getPropertyValue(variable);
+  };
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = getCssVariableValueRaw(variable);
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      const background = getCssVariableValue('--background');
+      const border = getCssVariableValue('--border');
+      const accent = getCssVariableValue('--accent');
+
+      const variables: Record<string, string> = {
+        '--el-bg-color': background,
+        '--el-bg-color-overlay': getCssVariableValue('--popover'),
+        '--el-bg-color-page': getCssVariableValue('--background-deep'),
+        '--el-border-color': border,
+        '--el-border-color-dark': border,
+        '--el-border-color-extra-light': border,
+        '--el-border-color-hover': accent,
+        '--el-border-color-light': border,
+        '--el-border-color-lighter': border,
+
+        '--el-border-radius-base': getCssVariableValue('--radius', false),
+        '--el-color-danger': getCssVariableValue('--destructive-500'),
+        '--el-color-danger-dark-2': isDark.value
+          ? getCssVariableValue('--destructive-400')
+          : getCssVariableValue('--destructive-600'),
+        '--el-color-danger-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-danger-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-danger-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
+        '--el-color-danger-light-8': isDark.value
+          ? getCssVariableValue('--destructive-900')
+          : getCssVariableValue('--destructive-100'),
+        '--el-color-danger-light-9': isDark.value
+          ? getCssVariableValue('--destructive-950')
+          : getCssVariableValue('--destructive-50'),
+
+        '--el-color-error': getCssVariableValue('--destructive-500'),
+        '--el-color-error-dark-2': isDark.value
+          ? getCssVariableValue('--destructive-400')
+          : getCssVariableValue('--destructive-600'),
+        '--el-color-error-light-3': isDark.value
+          ? getCssVariableValue('--destructive-600')
+          : getCssVariableValue('--destructive-400'),
+        '--el-color-error-light-5': isDark.value
+          ? getCssVariableValue('--destructive-700')
+          : getCssVariableValue('--destructive-300'),
+        '--el-color-error-light-7': isDark.value
+          ? getCssVariableValue('--destructive-800')
+          : getCssVariableValue('--destructive-200'),
+        '--el-color-error-light-8': isDark.value
+          ? getCssVariableValue('--destructive-900')
+          : getCssVariableValue('--destructive-100'),
+        '--el-color-error-light-9': isDark.value
+          ? getCssVariableValue('--destructive-950')
+          : getCssVariableValue('--destructive-50'),
+
+        '--el-color-info-light-5': border,
+        '--el-color-info-light-8': border,
+        '--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
+
+        '--el-color-primary': getCssVariableValue('--primary-500'),
+        '--el-color-primary-dark-2': isDark.value
+          ? getCssVariableValue('--primary-400')
+          : getCssVariableValue('--primary-600'),
+        '--el-color-primary-light-3': isDark.value
+          ? getCssVariableValue('--primary-600')
+          : getCssVariableValue('--primary-400'),
+        '--el-color-primary-light-5': isDark.value
+          ? getCssVariableValue('--primary-700')
+          : getCssVariableValue('--primary-300'),
+        '--el-color-primary-light-7': isDark.value
+          ? getCssVariableValue('--primary-800')
+          : getCssVariableValue('--primary-200'),
+        '--el-color-primary-light-8': isDark.value
+          ? getCssVariableValue('--primary-900')
+          : getCssVariableValue('--primary-100'),
+        '--el-color-primary-light-9': isDark.value
+          ? getCssVariableValue('--primary-950')
+          : getCssVariableValue('--primary-50'),
+
+        '--el-color-success': getCssVariableValue('--success-500'),
+        '--el-color-success-dark-2': isDark.value
+          ? getCssVariableValue('--success-400')
+          : getCssVariableValue('--success-600'),
+        '--el-color-success-light-3': isDark.value
+          ? getCssVariableValue('--success-600')
+          : getCssVariableValue('--success-400'),
+        '--el-color-success-light-5': isDark.value
+          ? getCssVariableValue('--success-700')
+          : getCssVariableValue('--success-300'),
+        '--el-color-success-light-7': isDark.value
+          ? getCssVariableValue('--success-800')
+          : getCssVariableValue('--success-200'),
+        '--el-color-success-light-8': isDark.value
+          ? getCssVariableValue('--success-900')
+          : getCssVariableValue('--success-100'),
+        '--el-color-success-light-9': isDark.value
+          ? getCssVariableValue('--success-950')
+          : getCssVariableValue('--success-50'),
+
+        '--el-color-warning': getCssVariableValue('--warning-500'),
+        '--el-color-warning-dark-2': isDark.value
+          ? getCssVariableValue('--warning-400')
+          : getCssVariableValue('--warning-600'),
+        '--el-color-warning-light-3': isDark.value
+          ? getCssVariableValue('--warning-600')
+          : getCssVariableValue('--warning-400'),
+        '--el-color-warning-light-5': isDark.value
+          ? getCssVariableValue('--warning-700')
+          : getCssVariableValue('--warning-300'),
+        '--el-color-warning-light-7': isDark.value
+          ? getCssVariableValue('--warning-800')
+          : getCssVariableValue('--warning-200'),
+        '--el-color-warning-light-8': isDark.value
+          ? getCssVariableValue('--warning-900')
+          : getCssVariableValue('--warning-100'),
+        '--el-color-warning-light-9': isDark.value
+          ? getCssVariableValue('--warning-950')
+          : getCssVariableValue('--warning-50'),
+
+        '--el-fill-color': getCssVariableValue('--accent'),
+        '--el-fill-color-blank': background,
+        '--el-fill-color-light': getCssVariableValue('--accent'),
+        '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),
+
+        '--el-fill-color-dark': getCssVariableValue('--accent-dark'),
+        '--el-fill-color-darker': getCssVariableValue('--accent-darker'),
+
+        // 解决ElLoading背景色问题
+        '--el-mask-color': isDark.value
+          ? 'rgba(0,0,0,.8)'
+          : 'rgba(255,255,255,.9)',
+
+        '--el-text-color-primary': getCssVariableValue('--foreground'),
+
+        '--el-text-color-regular': getCssVariableValue('--foreground'),
+      };
+
+      updateCSSVariables(variables, `__vben_design_styles__`);
+    },
+    { immediate: true },
+  );
+}
+
+export function useTDesignDesignTokens() {
+  const { isDark } = usePreferences();
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const getCssVariableValue = (variable: string, isColor: boolean = true) => {
+    const value = rootStyles.getPropertyValue(variable);
+    return isColor ? convertToRgb(`hsl(${value})`) : value;
+  };
+
+  /**
+   * 生成某个语义色对应的 TDesign 变量（语义变体 + 1~10 色阶）。
+   * TDesign 的色阶在亮色模式下 1 最浅、10 最深，暗色模式下方向相反，
+   * 这里根据当前模式把 Vben 的 50~900 色板映射到对应方向。
+   * @param tdName TDesign 颜色名，如 `brand`、`error`
+   * @param vbenName Vben 颜色名，如 `primary`、`destructive`
+   */
+  const getColorTokens = (tdName: string, vbenName: string) => {
+    const dark = isDark.value;
+    const getColor = (level?: number) =>
+      getCssVariableValue(
+        level === undefined ? `--${vbenName}` : `--${vbenName}-${level}`,
+      );
+
+    // 亮色模式 1 最浅、10 最深；暗色模式相反
+    const lightScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+    const scaleLevels = dark ? [...lightScale].toReversed() : lightScale;
+    const scale: Record<string, string> = {};
+    scaleLevels.forEach((level, index) => {
+      scale[`--td-${tdName}-color-${index + 1}`] = getColor(level);
+    });
+
+    return {
+      [`--td-${tdName}-color`]: getColor(),
+      [`--td-${tdName}-color-active`]: getColor(dark ? 300 : 700),
+      [`--td-${tdName}-color-disabled`]: getColor(dark ? 800 : 200),
+      [`--td-${tdName}-color-focus`]: getColor(dark ? 900 : 100),
+      [`--td-${tdName}-color-hover`]: getColor(dark ? 400 : 600),
+      [`--td-${tdName}-color-light`]: getColor(dark ? 950 : 50),
+      [`--td-${tdName}-color-light-hover`]: getColor(dark ? 900 : 100),
+      ...scale,
+    };
+  };
+
+  watch(
+    () => preferences.theme,
+    () => {
+      const variables: Record<string, string> = {
+        // 品牌色（主题色）、功能色
+        ...getColorTokens('brand', 'primary'),
+        ...getColorTokens('error', 'destructive'),
+        ...getColorTokens('warning', 'warning'),
+        ...getColorTokens('success', 'success'),
+
+        // 文字颜色
+        '--td-text-color-anti': getCssVariableValue('--primary-foreground'),
+        '--td-text-color-brand': getCssVariableValue('--primary'),
+        '--td-text-color-disabled': getCssVariableValue('--muted-foreground'),
+        '--td-text-color-link': getCssVariableValue('--primary'),
+        '--td-text-color-placeholder': getCssVariableValue(
+          '--input-placeholder',
+        ),
+        '--td-text-color-primary': getCssVariableValue('--foreground'),
+        '--td-text-color-secondary': getCssVariableValue('--muted-foreground'),
+
+        // 背景颜色
+        '--td-bg-color-component': getCssVariableValue('--accent'),
+        '--td-bg-color-component-active':
+          getCssVariableValue('--accent-darker'),
+        '--td-bg-color-component-disabled': getCssVariableValue('--muted'),
+        '--td-bg-color-component-hover': getCssVariableValue('--accent-hover'),
+        '--td-bg-color-container': getCssVariableValue('--background'),
+        '--td-bg-color-container-active':
+          getCssVariableValue('--accent-darker'),
+        '--td-bg-color-container-hover': getCssVariableValue('--accent'),
+        '--td-bg-color-container-select': getCssVariableValue('--accent'),
+        '--td-bg-color-page': getCssVariableValue('--background-deep'),
+        '--td-bg-color-secondarycontainer': getCssVariableValue('--card'),
+
+        // 边框颜色
+        '--td-border-level-1-color': getCssVariableValue('--border'),
+        '--td-border-level-2-color': getCssVariableValue('--border'),
+        '--td-component-border': getCssVariableValue('--border'),
+        '--td-component-stroke': getCssVariableValue('--border'),
+
+        // 圆角
+        '--td-radius-default': getCssVariableValue('--radius', false),
+      };
+
+      // TDesign 将亮/暗变量定义在 `:root[theme-mode='light'|'dark']` 下，
+      // 需要写入相同优先级的选择器才能覆盖默认值
+      const selector = isDark.value
+        ? `:root[theme-mode='dark']`
+        : `:root[theme-mode='light']`;
+
+      updateCSSVariables(variables, `__vben_design_tdesign_styles__`, selector);
+    },
+    { immediate: true },
+  );
+}

package/src/hooks/use-hover-toggle.ts

@@ -0,0 +1,163 @@
+import type { Arrayable, MaybeElementRef } from '@vueuse/core';
+
+import type { Ref } from 'vue';
+
+import { computed, effectScope, ref, unref, watch } from 'vue';
+
+import { isFunction } from '@melt-js/libs-vben/utils';
+
+import { tryOnScopeDispose, useElementHover } from '@vueuse/core';
+
+interface HoverDelayOptions {
+  /** 鼠标进入延迟时间 */
+  enterDelay?: (() => number) | number;
+  /** 鼠标离开延迟时间 */
+  leaveDelay?: (() => number) | number;
+}
+
+const DEFAULT_LEAVE_DELAY = 500; // 鼠标离开延迟时间，默认为 500ms
+const DEFAULT_ENTER_DELAY = 0; // 鼠标进入延迟时间，默认为 0（立即响应）
+
+/**
+ * 监测鼠标是否在元素内部，如果在元素内部则返回 true，否则返回 false
+ * @param refElement 所有需要检测的元素。支持单个元素、元素数组或响应式引用的元素数组。如果鼠标在任何一个元素内部都会返回 true
+ * @param delay 延迟更新状态的时间，可以是数字或包含进入/离开延迟的配置对象
+ * @returns 返回一个数组，第一个元素是一个 ref，表示鼠标是否在元素内部，第二个元素是一个控制器，可以通过 enable 和 disable 方法来控制监听器的启用和禁用
+ */
+export function useHoverToggle(
+  refElement: Arrayable<MaybeElementRef> | Ref<HTMLElement[] | null>,
+  delay: (() => number) | HoverDelayOptions | number = DEFAULT_LEAVE_DELAY,
+) {
+  // 兼容旧版本API
+  const normalizedOptions: HoverDelayOptions =
+    typeof delay === 'number' || isFunction(delay)
+      ? { enterDelay: DEFAULT_ENTER_DELAY, leaveDelay: delay }
+      : {
+          enterDelay: DEFAULT_ENTER_DELAY,
+          leaveDelay: DEFAULT_LEAVE_DELAY,
+          ...delay,
+        };
+
+  const value = ref(false);
+  const enterTimer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const leaveTimer = ref<ReturnType<typeof setTimeout> | undefined>();
+  const hoverScopes = ref<ReturnType<typeof effectScope>[]>([]);
+
+  // 使用计算属性包装 refElement，使其响应式变化
+  const refs = computed(() => {
+    const raw = unref(refElement);
+    if (raw === null) return [];
+    return Array.isArray(raw) ? raw : [raw];
+  });
+  // 存储所有 hover 状态
+  const isHovers = ref<Array<Ref<boolean>>>([]);
+
+  // 更新 hover 监听的函数
+  function updateHovers() {
+    // 停止并清理之前的作用域
+    hoverScopes.value.forEach((scope) => scope.stop());
+    hoverScopes.value = [];
+
+    isHovers.value = refs.value.map((refEle) => {
+      if (!refEle) {
+        return ref(false);
+      }
+      const eleRef = computed(() => {
+        const ele = unref(refEle);
+        return ele instanceof Element ? ele : (ele?.$el as Element);
+      });
+
+      // 为每个元素创建独立的作用域
+      const scope = effectScope();
+      const hoverRef = scope.run(() => useElementHover(eleRef)) || ref(false);
+      hoverScopes.value.push(scope);
+
+      return hoverRef;
+    });
+  }
+
+  // 监听元素数量变化，避免过度执行
+  const elementsCount = computed(() => {
+    const raw = unref(refElement);
+    if (raw === null) return 0;
+    return Array.isArray(raw) ? raw.length : 1;
+  });
+
+  // 初始设置
+  updateHovers();
+
+  // 只在元素数量变化时重新设置监听器
+  const stopWatcher = watch(elementsCount, updateHovers, { deep: false });
+
+  const isOutsideAll = computed(() => isHovers.value.every((v) => !v.value));
+
+  function clearTimers() {
+    if (enterTimer.value) {
+      clearTimeout(enterTimer.value);
+      enterTimer.value = undefined;
+    }
+    if (leaveTimer.value) {
+      clearTimeout(leaveTimer.value);
+      leaveTimer.value = undefined;
+    }
+  }
+
+  function setValueDelay(val: boolean) {
+    clearTimers();
+
+    if (val) {
+      // 鼠标进入
+      const enterDelay = normalizedOptions.enterDelay ?? DEFAULT_ENTER_DELAY;
+      const delayTime = isFunction(enterDelay) ? enterDelay() : enterDelay;
+
+      if (delayTime <= 0) {
+        value.value = true;
+      } else {
+        enterTimer.value = setTimeout(() => {
+          value.value = true;
+          enterTimer.value = undefined;
+        }, delayTime);
+      }
+    } else {
+      // 鼠标离开
+      const leaveDelay = normalizedOptions.leaveDelay ?? DEFAULT_LEAVE_DELAY;
+      const delayTime = isFunction(leaveDelay) ? leaveDelay() : leaveDelay;
+
+      if (delayTime <= 0) {
+        value.value = false;
+      } else {
+        leaveTimer.value = setTimeout(() => {
+          value.value = false;
+          leaveTimer.value = undefined;
+        }, delayTime);
+      }
+    }
+  }
+
+  const hoverWatcher = watch(
+    isOutsideAll,
+    (val) => {
+      setValueDelay(!val);
+    },
+    { immediate: true },
+  );
+
+  const controller = {
+    enable() {
+      hoverWatcher.resume();
+    },
+    disable() {
+      hoverWatcher.pause();
+    },
+  };
+
+  tryOnScopeDispose(() => {
+    clearTimers();
+    // 停止监听器
+    stopWatcher();
+    // 停止所有剩余的作用域
+    hoverScopes.value.forEach((scope) => scope.stop());
+  });
+
+  return [value, controller] as [typeof value, typeof controller];
+}

package/src/hooks/use-pagination.ts

@@ -0,0 +1,72 @@
+import type { Ref } from 'vue';
+
+import { computed, ref, unref, watch } from 'vue';
+
+/**
+ * Paginates an array of items
+ * @param list The array to paginate
+ * @param pageNo The current page number (1-based)
+ * @param pageSize Number of items per page
+ * @returns Paginated array slice
+ * @throws {Error} If pageNo or pageSize are invalid
+ */
+function pagination<T = any>(list: T[], pageNo: number, pageSize: number): T[] {
+  if (pageNo < 1) throw new Error('Page number must be positive');
+  if (pageSize < 1) throw new Error('Page size must be positive');
+
+  const offset = (pageNo - 1) * pageSize;
+  const ret =
+    offset + pageSize >= list.length
+      ? list.slice(offset)
+      : list.slice(offset, offset + pageSize);
+  return ret;
+}
+
+export function usePagination<T = any>(
+  list: Ref<T[]>,
+  pageSize: number,
+  totalChangeToFirstPage = true,
+) {
+  const currentPage = ref(1);
+  const pageSizeRef = ref(pageSize);
+
+  const totalPages = computed(() =>
+    Math.ceil(unref(list).length / unref(pageSizeRef)),
+  );
+
+  const paginationList = computed(() => {
+    return pagination(unref(list), unref(currentPage), unref(pageSizeRef));
+  });
+
+  const total = computed(() => {
+    return unref(list).length;
+  });
+
+  if (totalChangeToFirstPage) {
+    watch(total, () => {
+      setCurrentPage(1);
+    });
+  }
+
+  function setCurrentPage(page: number) {
+    if (page === 1 && unref(totalPages) === 0) {
+      currentPage.value = 1;
+    } else {
+      if (page < 1 || page > unref(totalPages)) {
+        throw new Error('Invalid page number');
+      }
+      currentPage.value = page;
+    }
+  }
+
+  function setPageSize(pageSize: number) {
+    if (pageSize < 1) {
+      throw new Error('Page size must be positive');
+    }
+    pageSizeRef.value = pageSize;
+    // Reset to first page to prevent invalid state
+    currentPage.value = 1;
+  }
+
+  return { setCurrentPage, total, setPageSize, paginationList, currentPage };
+}

package/src/hooks/use-refresh.ts

@@ -0,0 +1,16 @@
+import { useRouter } from 'vue-router';
+
+import { useTabbarStore } from '@melt-js/libs-vben/stores';
+
+export function useRefresh() {
+  const router = useRouter();
+  const tabbarStore = useTabbarStore();
+
+  async function refresh() {
+    await tabbarStore.refresh(router);
+  }
+
+  return {
+    refresh,
+  };
+}