refactor: 升级框架

2025-07-09 11:28:52 +08:00
parent bbe6d7e76e
commit 258c0e2934
310 changed files with 11060 additions and 8152 deletions
--- a/packages/@core/base/design/package.json
+++ b/packages/@core/base/design/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/design",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/icons",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -68,6 +68,7 @@ export {
  Sun,
  SunMoon,
  SwatchBook,
+  Trash2,
  Upload,
  UserRoundPen,
  X,
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/shared",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/shared/src/utils/download.ts
+++ b/packages/@core/base/shared/src/utils/download.ts
@@ -40,6 +40,44 @@ export async function downloadFileFromUrl({
  openWindow(source, { target });
 }

+/**
+ * 下载图片（允许跨域）
+ * @param url - 图片 URL
+ * @param canvasWidth - 画布宽度
+ * @param canvasHeight - 画布高度
+ * @param drawWithImageSize - 将图片绘制在画布上时带上图片的宽高值, 默认是要带上的
+ * @returns
+ */
+export function downloadImageByCanvas({
+  url,
+  canvasWidth,
+  canvasHeight,
+  drawWithImageSize = true,
+}: {
+  canvasHeight?: number;
+  canvasWidth?: number;
+  drawWithImageSize?: boolean;
+  url: string;
+}) {
+  const image = new Image();
+  // image.setAttribute('crossOrigin', 'anonymous')
+  image.src = url;
+  image.addEventListener('load', () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = canvasWidth || image.width;
+    canvas.height = canvasHeight || image.height;
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    ctx?.clearRect(0, 0, canvas.width, canvas.height);
+    if (drawWithImageSize) {
+      ctx.drawImage(image, 0, 0, image.width, image.height);
+    } else {
+      ctx.drawImage(image, 0, 0);
+    }
+    const url = canvas.toDataURL('image/png');
+    downloadFileFromImageUrl({ source: url, fileName: 'image.png' });
+  });
+}
+
 /**
 * 通过 Base64 下载文件
 */
@@ -140,6 +178,63 @@ export function urlToBase64(url: string, mineType?: string): Promise<string> {
  });
 }

+/**
+ * 将 Base64 字符串转换为文件对象
+ * @param base64 - Base64 字符串
+ * @param fileName - 文件名
+ * @returns File 对象
+ */
+export function base64ToFile(base64: string, fileName: string): File {
+  // 输入验证
+  if (!base64 || typeof base64 !== 'string') {
+    throw new Error('base64 参数必须是非空字符串');
+  }
+
+  // 将 base64 按照逗号进行分割，将前缀与后续内容分隔开
+  const data = base64.split(',');
+  if (data.length !== 2 || !data[0] || !data[1]) {
+    throw new Error('无效的 base64 格式');
+  }
+
+  // 利用正则表达式从前缀中获取类型信息（image/png、image/jpeg、image/webp等）
+  const typeMatch = data[0].match(/:(.*?);/);
+  if (!typeMatch || !typeMatch[1]) {
+    throw new Error('无法解析 base64 类型信息');
+  }
+  const type = typeMatch[1];
+
+  // 从类型信息中获取具体的文件格式后缀（png、jpeg、webp）
+  const typeParts = type.split('/');
+  if (typeParts.length !== 2 || !typeParts[1]) {
+    throw new Error('无效的 MIME 类型格式');
+  }
+  const suffix = typeParts[1];
+
+  try {
+    // 使用 atob() 对 base64 数据进行解码，结果是一个文件数据流以字符串的格式输出
+    const bstr = window.atob(data[1]);
+
+    // 获取解码结果字符串的长度
+    const n = bstr.length;
+    // 根据解码结果字符串的长度创建一个等长的整型数字数组
+    const u8arr = new Uint8Array(n);
+
+    // 优化的 Uint8Array 填充逻辑
+    for (let i = 0; i < n; i++) {
+      // 使用 charCodeAt() 获取字符对应的字节值（Base64 解码后的字符串是字节级别的）
+      // eslint-disable-next-line unicorn/prefer-code-point
+      u8arr[i] = bstr.charCodeAt(i);
+    }
+
+    // 返回 File 文件对象
+    return new File([u8arr], `${fileName}.${suffix}`, { type });
+  } catch (error) {
+    throw new Error(
+      `Base64 解码失败: ${error instanceof Error ? error.message : '未知错误'}`,
+    );
+  }
+}
+
 /**
 * 通用下载触发函数
 * @param href - 文件下载的 URL
--- a/packages/@core/base/shared/src/utils/index.ts
+++ b/packages/@core/base/shared/src/utils/index.ts
@@ -3,6 +3,7 @@ export * from './date';
 export * from './diff';
 export * from './dom';
 export * from './download';
+export * from './formatNumber';
 export * from './inference';
 export * from './letter';
 export * from './merge';
@@ -13,6 +14,7 @@ export * from './to';
 export * from './tree';
 export * from './unique';
 export * from './update-css-variables';
+export * from './upload';
 export * from './util';
 export * from './uuid'; // add by 芋艿：从 vben2.0 复制
 export * from './window';
--- a/packages/@core/base/shared/src/utils/time.ts
+++ b/packages/@core/base/shared/src/utils/time.ts
@@ -1,43 +1,299 @@
 import dayjs from 'dayjs';

-/** 时间段选择器拓展  */
-export function rangePickerExtend() {
-  return {
-    // 显示格式
-    format: 'YYYY-MM-DD HH:mm:ss',
-    placeholder: ['开始时间', '结束时间'],
-    ranges: {
-      今天: [dayjs().startOf('day'), dayjs().endOf('day')],
-      最近7天: [
-        dayjs().subtract(7, 'day').startOf('day'),
-        dayjs().endOf('day'),
-      ],
-      最近30天: [
-        dayjs().subtract(30, 'day').startOf('day'),
-        dayjs().endOf('day'),
-      ],
-      昨天: [
-        dayjs().subtract(1, 'day').startOf('day'),
-        dayjs().subtract(1, 'day').endOf('day'),
-      ],
-      本周: [dayjs().startOf('week'), dayjs().endOf('day')],
-      本月: [dayjs().startOf('month'), dayjs().endOf('day')],
-    },
-    showTime: {
-      defaultValue: [
-        dayjs('00:00:00', 'HH:mm:ss'),
-        dayjs('23:59:59', 'HH:mm:ss'),
-      ],
-      format: 'HH:mm:ss',
-    },
-    transformDateFunc: (dates: any) => {
-      if (dates && dates.length === 2) {
-        // 格式化为后台支持的时间格式
-        return [dates.createTime[0], dates.createTime[1]].join(',');
+import { formatDate } from './date';
+
+/**
+ * @param {Date | number | string} time 需要转换的时间
+ * @param {string} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+export function formatTime(time: Date | number | string, fmt: string) {
+  if (time) {
+    const date = new Date(time);
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds(),
+    };
+    const yearMatch = fmt.match(/y+/);
+    if (yearMatch) {
+      fmt = fmt.replace(
+        yearMatch[0],
+        `${date.getFullYear()}`.slice(4 - yearMatch[0].length),
+      );
+    }
+    for (const k in o) {
+      const match = fmt.match(new RegExp(`(${k})`));
+      if (match) {
+        fmt = fmt.replace(
+          match[0],
+          match[0].length === 1
+            ? (o[k as keyof typeof o] as any)
+            : `00${o[k as keyof typeof o]}`.slice(
+                `${o[k as keyof typeof o]}`.length,
+              ),
+        );
      }
-      return {};
-    },
-    // 如果需要10位时间戳（秒级）可以使用 valueFormat: 'X'
-    valueFormat: 'YYYY-MM-DD HH:mm:ss',
-  };
+    }
+    return fmt;
+  } else {
+    return '';
+  }
+}
+
+/**
+ * 获取当前日期是第几周
+ * @param dateTime 当前传入的日期值
+ * @returns 返回第几周数字值
+ */
+export function getWeek(dateTime: Date): number {
+  const temptTime = new Date(dateTime);
+  // 周几
+  const weekday = temptTime.getDay() || 7;
+  // 周1+5天=周六
+  temptTime.setDate(temptTime.getDate() - weekday + 1 + 5);
+  let firstDay = new Date(temptTime.getFullYear(), 0, 1);
+  const dayOfWeek = firstDay.getDay();
+  let spendDay = 1;
+  if (dayOfWeek !== 0) spendDay = 7 - dayOfWeek + 1;
+  firstDay = new Date(temptTime.getFullYear(), 0, 1 + spendDay);
+  const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86_400_000);
+  return Math.ceil(d / 7);
+}
+
+/**
+ * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
+ * @param param 当前时间，new Date() 格式或者字符串时间格式
+ * @param format 需要转换的时间格式字符串
+ * @description param 10秒：  10 * 1000
+ * @description param 1分：   60 * 1000
+ * @description param 1小时： 60 * 60 * 1000
+ * @description param 24小时：60 * 60 * 24 * 1000
+ * @description param 3天：   60 * 60* 24 * 1000 * 3
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatPast(
+  param: Date | string,
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string {
+  // 传入格式处理、存储转换值
+  let s: number, t: any;
+  // 获取js 时间戳
+  let time: number = Date.now();
+  // 是否是对象
+  typeof param === 'string' || typeof param === 'object'
+    ? (t = new Date(param).getTime())
+    : (t = param);
+  // 当前时间戳 - 传入时间戳
+  time = Number.parseInt(`${time - t}`);
+  if (time < 10_000) {
+    // 10秒内
+    return '刚刚';
+  } else if (time < 60_000 && time >= 10_000) {
+    // 超过10秒少于1分钟内
+    s = Math.floor(time / 1000);
+    return `${s}秒前`;
+  } else if (time < 3_600_000 && time >= 60_000) {
+    // 超过1分钟少于1小时
+    s = Math.floor(time / 60_000);
+    return `${s}分钟前`;
+  } else if (time < 86_400_000 && time >= 3_600_000) {
+    // 超过1小时少于24小时
+    s = Math.floor(time / 3_600_000);
+    return `${s}小时前`;
+  } else if (time < 259_200_000 && time >= 86_400_000) {
+    // 超过1天少于3天内
+    s = Math.floor(time / 86_400_000);
+    return `${s}天前`;
+  } else {
+    // 超过3天
+    const date =
+      typeof param === 'string' || typeof param === 'object'
+        ? new Date(param)
+        : param;
+    return formatDate(date, format) as string;
+  }
+}
+
+/**
+ * 时间问候语
+ * @param param 当前时间，new Date() 格式
+ * @description param 调用 `formatAxis(new Date())` 输出 `上午好`
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatAxis(param: Date): string {
+  const hour: number = new Date(param).getHours();
+  if (hour < 6) return '凌晨好';
+  else if (hour < 9) return '早上好';
+  else if (hour < 12) return '上午好';
+  else if (hour < 14) return '中午好';
+  else if (hour < 17) return '下午好';
+  else if (hour < 19) return '傍晚好';
+  else if (hour < 22) return '晚上好';
+  else return '夜里好';
+}
+
+/**
+ * 将毫秒，转换成时间字符串。例如说，xx 分钟
+ *
+ * @param ms 毫秒
+ * @returns {string} 字符串
+ */
+export function formatPast2(ms: number): string {
+  const day = Math.floor(ms / (24 * 60 * 60 * 1000));
+  const hour = Math.floor(ms / (60 * 60 * 1000) - day * 24);
+  const minute = Math.floor(ms / (60 * 1000) - day * 24 * 60 - hour * 60);
+  const second = Math.floor(
+    ms / 1000 - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60,
+  );
+  if (day > 0) {
+    return `${day} 天${hour} 小时 ${minute} 分钟`;
+  }
+  if (hour > 0) {
+    return `${hour} 小时 ${minute} 分钟`;
+  }
+  if (minute > 0) {
+    return `${minute} 分钟`;
+  }
+  return second > 0 ? `${second} 秒` : `${0} 秒`;
+}
+
+/**
+ * 设置起始日期，时间为00:00:00
+ * @param param 传入日期
+ * @returns 带时间00:00:00的日期
+ */
+export function beginOfDay(param: Date): Date {
+  return new Date(
+    param.getFullYear(),
+    param.getMonth(),
+    param.getDate(),
+    0,
+    0,
+    0,
+  );
+}
+
+/**
+ * 设置结束日期，时间为23:59:59
+ * @param param 传入日期
+ * @returns 带时间23:59:59的日期
+ */
+export function endOfDay(param: Date): Date {
+  return new Date(
+    param.getFullYear(),
+    param.getMonth(),
+    param.getDate(),
+    23,
+    59,
+    59,
+  );
+}
+
+/**
+ * 计算两个日期间隔天数
+ * @param param1 日期1
+ * @param param2 日期2
+ */
+export function betweenDay(param1: Date, param2: Date): number {
+  param1 = convertDate(param1);
+  param2 = convertDate(param2);
+  // 计算差值
+  return Math.floor((param2.getTime() - param1.getTime()) / (24 * 3600 * 1000));
+}
+
+/**
+ * 日期计算
+ * @param param1 日期
+ * @param param2 添加的时间
+ */
+export function addTime(param1: Date, param2: number): Date {
+  param1 = convertDate(param1);
+  return new Date(param1.getTime() + param2);
+}
+
+/**
+ * 日期转换
+ * @param param 日期
+ */
+export function convertDate(param: Date | string): Date {
+  if (typeof param === 'string') {
+    return new Date(param);
+  }
+  return param;
+}
+
+/**
+ * 指定的两个日期, 是否为同一天
+ * @param a 日期 A
+ * @param b 日期 B
+ */
+export function isSameDay(a: dayjs.ConfigType, b: dayjs.ConfigType): boolean {
+  if (!a || !b) return false;
+
+  const aa = dayjs(a);
+  const bb = dayjs(b);
+  return (
+    aa.year() === bb.year() &&
+    aa.month() === bb.month() &&
+    aa.day() === bb.day()
+  );
+}
+
+/**
+ * 获取一天的开始时间、截止时间
+ * @param date 日期
+ * @param days 天数
+ */
+export function getDayRange(
+  date: dayjs.ConfigType,
+  days: number,
+): [dayjs.ConfigType, dayjs.ConfigType] {
+  const day = dayjs(date).add(days, 'd');
+  return getDateRange(day, day);
+}
+
+/**
+ * 获取最近7天的开始时间、截止时间
+ */
+export function getLast7Days(): [dayjs.ConfigType, dayjs.ConfigType] {
+  const lastWeekDay = dayjs().subtract(7, 'd');
+  const yesterday = dayjs().subtract(1, 'd');
+  return getDateRange(lastWeekDay, yesterday);
+}
+
+/**
+ * 获取最近30天的开始时间、截止时间
+ */
+export function getLast30Days(): [dayjs.ConfigType, dayjs.ConfigType] {
+  const lastMonthDay = dayjs().subtract(30, 'd');
+  const yesterday = dayjs().subtract(1, 'd');
+  return getDateRange(lastMonthDay, yesterday);
+}
+
+/**
+ * 获取最近1年的开始时间、截止时间
+ */
+export function getLast1Year(): [dayjs.ConfigType, dayjs.ConfigType] {
+  const lastYearDay = dayjs().subtract(1, 'y');
+  const yesterday = dayjs().subtract(1, 'd');
+  return getDateRange(lastYearDay, yesterday);
+}
+
+/**
+ * 获取指定日期的开始时间、截止时间
+ * @param beginDate 开始日期
+ * @param endDate 截止日期
+ */
+export function getDateRange(
+  beginDate: dayjs.ConfigType,
+  endDate: dayjs.ConfigType,
+): [string, string] {
+  return [
+    dayjs(beginDate).startOf('d').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs(endDate).endOf('d').format('YYYY-MM-DD HH:mm:ss'),
+  ];
 }
--- a/packages/@core/base/shared/src/utils/tree.ts
+++ b/packages/@core/base/shared/src/utils/tree.ts
@@ -164,4 +164,48 @@ function handleTree(
  return tree;
 }

-export { filterTree, handleTree, mapTree, traverseTreeValues };
+/**
+ * 获取节点的完整结构
+ * @param tree 树数据
+ * @param nodeId 节点 id
+ */
+function treeToString(tree: any[], nodeId: number | string) {
+  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array');
+    return '';
+  }
+  // 校验是否是一级节点
+  const node = tree.find((item) => item.id === nodeId);
+  if (node !== undefined) {
+    return node.name;
+  }
+  let str = '';
+
+  function performAThoroughValidation(arr: any[]) {
+    if (arr === undefined || !Array.isArray(arr) || arr.length === 0) {
+      return false;
+    }
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        str += ` / ${item.name}`;
+        return true;
+      } else if (item.children !== undefined && item.children.length > 0) {
+        str += ` / ${item.name}`;
+        if (performAThoroughValidation(item.children)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  for (const item of tree) {
+    str = `${item.name}`;
+    if (performAThoroughValidation(item.children)) {
+      break;
+    }
+  }
+  return str;
+}
+
+export { filterTree, handleTree, mapTree, traverseTreeValues, treeToString };
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/typings",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -60,8 +60,9 @@ type BreadcrumbStyleType = 'background' | 'normal';
 * 权限模式
 * backend 后端权限模式
 * frontend 前端权限模式
+ * mixed 混合权限模式
 */
-type AccessModeType = 'backend' | 'frontend';
+type AccessModeType = 'backend' | 'frontend' | 'mixed';

 /**
 * 导航风格
--- a/packages/@core/base/typings/src/tabs.ts
+++ b/packages/@core/base/typings/src/tabs.ts
@@ -1,3 +1,8 @@
 import type { RouteLocationNormalized } from 'vue-router';

-export type TabDefinition = RouteLocationNormalized;
+export interface TabDefinition extends RouteLocationNormalized {
+  /**
+   * 标签页的key
+   */
+  key?: string;
+}
--- a/packages/@core/base/typings/src/vue-router.d.ts
+++ b/packages/@core/base/typings/src/vue-router.d.ts
@@ -43,6 +43,10 @@ interface RouteMeta {
    | 'success'
    | 'warning'
    | string;
+  /**
+   * 路由的完整路径作为key（默认true）
+   */
+  fullPathKey?: boolean;
  /**
   * 当前路由的子级在菜单中不展现
   * @default false
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/composables",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/preferences/tests/snapshots/config.test.ts.snap
+++ b/packages/@core/preferences/tests/snapshots/config.test.ts.snap
@@ -10,6 +10,12 @@ exports[`defaultPreferences immutability test > should not modify the config obj
    "colorWeakMode": false,
    "compact": false,
    "contentCompact": "wide",
+    "contentCompactWidth": 1200,
+    "contentPadding": 0,
+    "contentPaddingBottom": 0,
+    "contentPaddingLeft": 0,
+    "contentPaddingRight": 0,
+    "contentPaddingTop": 0,
    "defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
    "defaultHomePath": "/analytics",
    "dynamicTitle": true,
@@ -23,6 +29,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
    "name": "Vben Admin",
    "preferencesButtonPosition": "auto",
    "watermark": false,
+    "zIndex": 200,
  },
  "breadcrumb": {
    "enable": true,
@@ -43,15 +50,18 @@ exports[`defaultPreferences immutability test > should not modify the config obj
  "footer": {
    "enable": false,
    "fixed": false,
+    "height": 32,
  },
  "header": {
    "enable": true,
+    "height": 50,
    "hidden": false,
    "menuAlign": "start",
    "mode": "fixed",
  },
  "logo": {
    "enable": true,
+    "fit": "contain",
    "source": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp",
  },
  "navigation": {
@@ -68,14 +78,17 @@ exports[`defaultPreferences immutability test > should not modify the config obj
  },
  "sidebar": {
    "autoActivateChild": false,
+    "collapseWidth": 60,
    "collapsed": false,
    "collapsedButton": true,
    "collapsedShowTitle": false,
    "enable": true,
    "expandOnHover": true,
    "extraCollapse": false,
+    "extraCollapsedWidth": 60,
    "fixedButton": true,
    "hidden": false,
+    "mixedWidth": 80,
    "width": 224,
  },
  "tabbar": {
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/preferences",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -9,6 +9,12 @@ const defaultPreferences: Preferences = {
    colorWeakMode: false,
    compact: false,
    contentCompact: 'wide',
+    contentCompactWidth: 1200,
+    contentPadding: 0,
+    contentPaddingBottom: 0,
+    contentPaddingLeft: 0,
+    contentPaddingRight: 0,
+    contentPaddingTop: 0,
    defaultAvatar:
      'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
    defaultHomePath: '/analytics',
@@ -23,6 +29,7 @@ const defaultPreferences: Preferences = {
    name: 'Vben Admin',
    preferencesButtonPosition: 'auto',
    watermark: false,
+    zIndex: 200,
  },
  breadcrumb: {
    enable: true,
@@ -43,15 +50,19 @@ const defaultPreferences: Preferences = {
  footer: {
    enable: false,
    fixed: false,
+    height: 32,
  },
  header: {
    enable: true,
+    height: 50,
    hidden: false,
    menuAlign: 'start',
    mode: 'fixed',
  },
+
  logo: {
    enable: true,
+    fit: 'contain',
    source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
  },
  navigation: {
@@ -71,11 +82,14 @@ const defaultPreferences: Preferences = {
    collapsed: false,
    collapsedButton: true,
    collapsedShowTitle: false,
+    collapseWidth: 60,
    enable: true,
    expandOnHover: true,
    extraCollapse: false,
+    extraCollapsedWidth: 60,
    fixedButton: true,
    hidden: false,
+    mixedWidth: 80,
    width: 224,
  },
  tabbar: {
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -33,6 +33,18 @@ interface AppPreferences {
  compact: boolean;
  /** 是否开启内容紧凑模式 */
  contentCompact: ContentCompactType;
+  /** 内容紧凑宽度 */
+  contentCompactWidth: number;
+  /** 内容内边距 */
+  contentPadding: number;
+  /** 内容底部内边距 */
+  contentPaddingBottom: number;
+  /** 内容左侧内边距 */
+  contentPaddingLeft: number;
+  /** 内容右侧内边距 */
+  contentPaddingRight: number;
+  /** 内容顶部内边距 */
+  contentPaddingTop: number;
  // /** 应用默认头像 */
  defaultAvatar: string;
  /** 默认首页地址 */
@@ -63,6 +75,8 @@ interface AppPreferences {
   * @zh_CN 是否开启水印
   */
  watermark: boolean;
+  /** z-index */
+  zIndex: number;
 }

 interface BreadcrumbPreferences {
@@ -100,11 +114,15 @@ interface FooterPreferences {
  enable: boolean;
  /** 底栏是否固定 */
  fixed: boolean;
+  /** 底栏高度 */
+  height: number;
 }

 interface HeaderPreferences {
  /** 顶栏是否启用 */
  enable: boolean;
+  /** 顶栏高度 */
+  height: number;
  /** 顶栏是否隐藏,css-隐藏 */
  hidden: boolean;
  /** 顶栏菜单位置 */
@@ -116,6 +134,8 @@ interface HeaderPreferences {
 interface LogoPreferences {
  /** logo是否可见 */
  enable: boolean;
+  /** logo图片适应方式 */
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  /** logo地址 */
  source: string;
 }
@@ -138,16 +158,22 @@ interface SidebarPreferences {
  collapsedButton: boolean;
  /** 侧边栏折叠时，是否显示title */
  collapsedShowTitle: boolean;
+  /** 侧边栏折叠宽度 */
+  collapseWidth: number;
  /** 侧边栏是否可见 */
  enable: boolean;
  /** 菜单自动展开状态 */
  expandOnHover: boolean;
  /** 侧边栏扩展区域是否折叠 */
  extraCollapse: boolean;
+  /** 侧边栏扩展区域折叠宽度 */
+  extraCollapsedWidth: number;
  /** 侧边栏固定按钮是否可见 */
  fixedButton: boolean;
  /** 侧边栏是否隐藏 - css */
  hidden: boolean;
+  /** 混合侧边栏宽度 */
+  mixedWidth: number;
  /** 侧边栏宽度 */
  width: number;
 }
--- a/packages/@core/ui-kit/form-ui/package.json
+++ b/packages/@core/ui-kit/form-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/form-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@@ -11,7 +11,7 @@ import type { Recordable } from '@vben-core/typings';

 import type { FormActions, FormSchema, VbenFormProps } from './types';

-import { toRaw } from 'vue';
+import { isRef, toRaw } from 'vue';

 import { Store } from '@vben-core/shared/store';
 import {
@@ -100,9 +100,26 @@ export class FormApi {
  getFieldComponentRef<T = ComponentPublicInstance>(
    fieldName: string,
  ): T | undefined {
-    return this.componentRefMap.has(fieldName)
-      ? (this.componentRefMap.get(fieldName) as T)
+    let target = this.componentRefMap.has(fieldName)
+      ? (this.componentRefMap.get(fieldName) as ComponentPublicInstance)
      : undefined;
+    if (
+      target &&
+      target.$.type.name === 'AsyncComponentWrapper' &&
+      target.$.subTree.ref
+    ) {
+      if (Array.isArray(target.$.subTree.ref)) {
+        if (
+          target.$.subTree.ref.length > 0 &&
+          isRef(target.$.subTree.ref[0]?.r)
+        ) {
+          target = target.$.subTree.ref[0]?.r.value as ComponentPublicInstance;
+        }
+      } else if (isRef(target.$.subTree.ref.r)) {
+        target = target.$.subTree.ref.r.value as ComponentPublicInstance;
+      }
+    }
+    return target as T;
  }

  /**
@@ -247,7 +264,7 @@ export class FormApi {

  /**
   * 设置表单提交按钮的加载状态：用于非 Modal 中使用 Form 时，需要 Form 自己控制 loading 状态
-   * @author 千通源码
+   * @author 芋道源码
   * @param loading 是否加载中
   */
  setLoading(loading: boolean) {
--- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@@ -10,7 +10,7 @@ import { createContext } from '@vben-core/shadcn-ui';
 import { isString, mergeWithArrayOverride, set } from '@vben-core/shared/utils';

 import { useForm } from 'vee-validate';
-import { object } from 'zod';
+import { object, ZodIntersection, ZodNumber, ZodObject, ZodString } from 'zod';
 import { getDefaultsForSchema } from 'zod-defaults';

 type ExtendFormProps = VbenFormProps & { formApi: ExtendedFormApi };
@@ -52,7 +52,12 @@ export function useFormInitial(
      if (Reflect.has(item, 'defaultValue')) {
        set(initialValues, item.fieldName, item.defaultValue);
      } else if (item.rules && !isString(item.rules)) {
+        // 检查规则是否适合提取默认值
+        const customDefaultValue = getCustomDefaultValue(item.rules);
        zodObject[item.fieldName] = item.rules;
+        if (customDefaultValue !== undefined) {
+          initialValues[item.fieldName] = customDefaultValue;
+        }
      }
    });

@@ -64,6 +69,38 @@ export function useFormInitial(
    }
    return mergeWithArrayOverride(initialValues, zodDefaults);
  }
+  // 自定义默认值提取逻辑
+  function getCustomDefaultValue(rule: any): any {
+    if (rule instanceof ZodString) {
+      return ''; // 默认为空字符串
+    } else if (rule instanceof ZodNumber) {
+      return null; // 默认为 null（避免显示 0）
+    } else if (rule instanceof ZodObject) {
+      // 递归提取嵌套对象的默认值
+      const defaultValues: Record<string, any> = {};
+      for (const [key, valueSchema] of Object.entries(rule.shape)) {
+        defaultValues[key] = getCustomDefaultValue(valueSchema);
+      }
+      return defaultValues;
+    } else if (rule instanceof ZodIntersection) {
+      // 对于交集类型，从schema 提取默认值
+      const leftDefaultValue = getCustomDefaultValue(rule._def.left);
+      const rightDefaultValue = getCustomDefaultValue(rule._def.right);
+
+      // 如果左右两边都能提取默认值，合并它们
+      if (
+        typeof leftDefaultValue === 'object' &&
+        typeof rightDefaultValue === 'object'
+      ) {
+        return { ...leftDefaultValue, ...rightDefaultValue };
+      }
+
+      // 否则优先使用左边的默认值
+      return leftDefaultValue ?? rightDefaultValue;
+    } else {
+      return undefined; // 其他类型不提供默认值
+    }
+  }

  return {
    delegatedSlots,
--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/layout-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/menu-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -34,7 +34,6 @@ const props = withDefaults(defineProps<AlertProps>(), {
  bordered: true,
  buttonAlign: 'end',
  centered: true,
-  containerClass: 'w-[520px]',
 });
 const emits = defineEmits(['closed', 'confirm', 'opened']);
 const open = defineModel<boolean>('open', { default: false });
@@ -148,7 +147,7 @@ async function handleOpenChange(val: boolean) {
      :class="
        cn(
          containerClass,
-          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
+          'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:w-[520px] sm:max-w-[80%] sm:rounded-[var(--radius)]',
          {
            'border-border border': bordered,
            'shadow-3xl': !bordered,
--- a/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -1,7 +1,15 @@
 <script lang="ts" setup>
 import type { DrawerProps, ExtendedDrawerApi } from './drawer';

-import { computed, provide, ref, unref, useId, watch } from 'vue';
+import {
+  computed,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';

 import {
  useIsMobile,
@@ -94,6 +102,16 @@ const {
 //   },
 // );

+/**
+ * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
+ */
+onDeactivated(() => {
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.drawerApi?.close();
+  }
+});
+
 function interactOutside(e: Event) {
  if (!closeOnClickModal.value || submitting.value) {
    e.preventDefault();
--- a/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
+++ b/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -9,7 +9,6 @@ import {
  h,
  inject,
  nextTick,
-  onDeactivated,
  provide,
  reactive,
  ref,
@@ -72,13 +71,6 @@ export function useVbenDrawer<
      },
    );

-    /**
-     * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
-     */
-    onDeactivated(() => {
-      (extendedApi as ExtendedDrawerApi)?.close?.();
-    });
-
    return [Drawer, extendedApi as ExtendedDrawerApi] as const;
  }

--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -1,7 +1,16 @@
 <script lang="ts" setup>
 import type { ExtendedModalApi, ModalProps } from './modal';

-import { computed, nextTick, provide, ref, unref, useId, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onDeactivated,
+  provide,
+  ref,
+  unref,
+  useId,
+  watch,
+} from 'vue';

 import {
  useIsMobile,
@@ -135,6 +144,16 @@ watch(
 //   },
 // );

+/**
+ * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
+ */
+onDeactivated(() => {
+  // 如果弹窗没有被挂载到内容区域，则关闭弹窗
+  if (!appendToMain.value) {
+    props.modalApi?.close();
+  }
+});
+
 function handleFullscreen() {
  props.modalApi?.setState((prev) => {
    // if (prev.fullscreen) {
--- a/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -5,7 +5,6 @@ import {
  h,
  inject,
  nextTick,
-  onDeactivated,
  provide,
  reactive,
  ref,
@@ -71,13 +70,6 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
      },
    );

-    /**
-     * 在开启keepAlive情况下 直接通过浏览器按钮/手势等返回 不会关闭弹窗
-     */
-    onDeactivated(() => {
-      (extendedApi as ExtendedModalApi)?.close?.();
-    });
-
    return [Modal, extendedApi as ExtendedModalApi] as const;
  }

@@ -94,8 +86,9 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
    injectData.options?.onOpenChange?.(isOpen);
  };

+  const onClosed = mergedOptions.onClosed;
  mergedOptions.onClosed = () => {
-    options.onClosed?.();
+    onClosed?.();
    if (mergedOptions.destroyOnClose) {
      injectData.reCreateModal?.();
    }
@@ -129,6 +122,7 @@ export function useVbenModal<TParentModalProps extends ModalProps = ModalProps>(
    },
  );
  injectData.extendApi?.(extendedApi);
+
  return [Modal, extendedApi] as const;
 }

--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/shadcn-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "#main": "./dist/index.mjs",
  "#module": "./dist/index.mjs",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -5,6 +5,8 @@ import type {
  AvatarRootProps,
 } from 'radix-vue';

+import type { CSSProperties } from 'vue';
+
 import type { ClassType } from '@vben-core/typings';

 import { computed } from 'vue';
@@ -16,6 +18,7 @@ interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
  class?: ClassType;
  dot?: boolean;
  dotClass?: ClassType;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  size?: number;
 }

@@ -28,6 +31,15 @@ const props = withDefaults(defineProps<Props>(), {
  as: 'button',
  dot: false,
  dotClass: 'bg-green-500',
+  fit: 'cover',
+});
+
+const imageStyle = computed<CSSProperties>(() => {
+  const { fit } = props;
+  if (fit) {
+    return { objectFit: fit };
+  }
+  return {};
 });

 const text = computed(() => {
@@ -51,7 +63,7 @@ const rootStyle = computed(() => {
    class="relative flex flex-shrink-0 items-center"
  >
    <Avatar :class="props.class" class="size-full">
-      <AvatarImage :alt="alt" :src="src" />
+      <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
      <AvatarFallback>{{ text }}</AvatarFallback>
    </Avatar>
    <span
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -29,14 +29,25 @@ export type ValueType = boolean | number | string;

 export interface VbenButtonGroupProps
  extends Pick<VbenButtonProps, 'disabled'> {
+  /** 单选模式下允许清除选中 */
+  allowClear?: boolean;
+  /** 值改变前的回调 */
  beforeChange?: (
    value: ValueType,
    isChecked: boolean,
  ) => boolean | PromiseLike<boolean | undefined> | undefined;
+  /** 按钮样式 */
  btnClass?: any;
+  /** 按钮间隔距离 */
  gap?: number;
+  /** 多选模式下限制最多选择的数量。0表示不限制 */
+  maxCount?: number;
+  /** 是否允许多选 */
  multiple?: boolean;
-  options?: { label: CustomRenderType; value: ValueType }[];
+  /** 选项 */
+  options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
+  /** 显示图标 */
  showIcon?: boolean;
+  /** 尺寸 */
  size?: 'large' | 'middle' | 'small';
 }
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
@@ -19,6 +19,8 @@ const props = withDefaults(defineProps<VbenButtonGroupProps>(), {
  multiple: false,
  showIcon: true,
  size: 'middle',
+  allowClear: false,
+  maxCount: 0,
 });
 const emit = defineEmits(['btnClick']);
 const btnDefaultProps = computed(() => {
@@ -82,12 +84,22 @@ async function onBtnClick(value: ValueType) {
    if (innerValue.value.includes(value)) {
      innerValue.value = innerValue.value.filter((item) => item !== value);
    } else {
+      if (props.maxCount > 0 && innerValue.value.length >= props.maxCount) {
+        innerValue.value = innerValue.value.slice(0, props.maxCount - 1);
+      }
      innerValue.value.push(value);
    }
    modelValue.value = innerValue.value;
  } else {
-    innerValue.value = [value];
-    modelValue.value = value;
+    if (props.allowClear && innerValue.value.includes(value)) {
+      innerValue.value = [];
+      modelValue.value = undefined;
+      emit('btnClick', undefined);
+      return;
+    } else {
+      innerValue.value = [value];
+      modelValue.value = value;
+    }
  }
  emit('btnClick', value);
 }
@@ -110,16 +122,23 @@ async function onBtnClick(value: ValueType) {
      v-bind="btnDefaultProps"
      :variant="innerValue.includes(btn.value) ? 'default' : 'outline'"
      @click="onBtnClick(btn.value)"
+      type="button"
    >
      <div class="icon-wrapper" v-if="props.showIcon">
-        <LoaderCircle
-          class="animate-spin"
-          v-if="loadingValues.includes(btn.value)"
-        />
-        <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
-        <Circle v-else />
+        <slot
+          name="icon"
+          :loading="loadingValues.includes(btn.value)"
+          :checked="innerValue.includes(btn.value)"
+        >
+          <LoaderCircle
+            class="animate-spin"
+            v-if="loadingValues.includes(btn.value)"
+          />
+          <CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
+          <Circle v-else />
+        </slot>
      </div>
-      <slot name="option" :label="btn.label" :value="btn.value">
+      <slot name="option" :label="btn.label" :value="btn.value" :data="btn">
        <VbenRenderContent :content="btn.label" />
      </slot>
    </Button>
@@ -127,6 +146,9 @@ async function onBtnClick(value: ValueType) {
 </template>
 <style lang="scss" scoped>
 .vben-check-button-group {
+  display: flex;
+  flex-wrap: wrap;
+
  &:deep(.size-large) button {
    .icon-wrapper {
      margin-right: 0.3rem;
@@ -159,5 +181,16 @@ async function onBtnClick(value: ValueType) {
      }
    }
  }
+
+  &.no-gap > :deep(button):nth-of-type(1) {
+    border-right-width: 0;
+  }
+
+  &.no-gap {
+    :deep(button + button) {
+      margin-right: -1px;
+      border-left-width: 1px;
+    }
+  }
 }
 </style>
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -6,6 +6,10 @@ interface Props {
   * @zh_CN 是否收起文本
   */
  collapsed?: boolean;
+  /**
+   * @zh_CN Logo 图片适应方式
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  /**
   * @zh_CN Logo 跳转地址
   */
@@ -38,6 +42,7 @@ withDefaults(defineProps<Props>(), {
  logoSize: 32,
  src: '',
  theme: 'light',
+  fit: 'cover',
 });
 </script>

@@ -53,6 +58,7 @@ withDefaults(defineProps<Props>(), {
        :alt="text"
        :src="src"
        :size="logoSize"
+        :fit="fit"
        class="relative rounded-none bg-transparent"
      />
      <template v-if="!collapsed">
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -80,7 +80,7 @@ defineExpose({
      v-bind="forwarded"
      :class="
        cn(
-          'z-popup bg-background w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'z-popup bg-background p-6 shadow-lg outline-none sm:rounded-xl',
          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
          {
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -224,15 +224,20 @@ defineExpose({
        :class="
          cn('cursor-pointer', getNodeClass?.(item), {
            'data-[selected]:bg-accent': !multiple,
+            'cursor-not-allowed': disabled,
+          })
+        "
+        v-bind="
+          Object.assign(item.bind, {
+            onfocus: disabled ? 'this.blur()' : undefined,
          })
        "
-        v-bind="item.bind"
        @select="
          (event) => {
            if (event.detail.originalEvent.type === 'click') {
              event.preventDefault();
            }
-            onSelect(item, event.detail.isSelected);
+            !disabled && onSelect(item, event.detail.isSelected);
          }
        "
        @toggle="
@@ -240,7 +245,7 @@ defineExpose({
            if (event.detail.originalEvent.type === 'click') {
              event.preventDefault();
            }
-            onToggle(item);
+            !disabled && onToggle(item);
          }
        "
        class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
@@ -262,10 +267,11 @@ defineExpose({
        <Checkbox
          v-if="multiple"
          :checked="isSelected"
+          :disabled="disabled"
          :indeterminate="isIndeterminate"
          @click="
            () => {
-              handleSelect();
+              !disabled && handleSelect();
              // onSelect(item, !isSelected);
            }
          "
@@ -276,7 +282,7 @@ defineExpose({
            (_event) => {
              // $event.stopPropagation();
              // $event.preventDefault();
-              handleSelect();
+              !disabled && handleSelect();
              // onSelect(item, !isSelected);
            }
          "
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben-core/tabs-ui",
-  "version": "5.5.6",
+  "version": "5.5.7",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
@@ -40,14 +40,14 @@ const style = computed(() => {

 const tabsView = computed(() => {
  return props.tabs.map((tab) => {
-    const { fullPath, meta, name, path } = tab || {};
+    const { fullPath, meta, name, path, key } = tab || {};
    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
    return {
      affixTab: !!affixTab,
      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
      fullPath,
      icon: icon as string,
-      key: fullPath || path,
+      key,
      meta,
      name,
      path,
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
@@ -47,14 +47,14 @@ const typeWithClass = computed(() => {

 const tabsView = computed(() => {
  return props.tabs.map((tab) => {
-    const { fullPath, meta, name, path } = tab || {};
+    const { fullPath, meta, name, path, key } = tab || {};
    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
    return {
      affixTab: !!affixTab,
      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
      fullPath,
      icon: icon as string,
-      key: fullPath || path,
+      key,
      meta,
      name,
      path,