refactor: Integrate the @vben-core/shared package

packages/@core/base/shared/build.config.ts

@@ -0,0 +1,13 @@
+import { defineBuildConfig } from 'unbuild';
+
+export default defineBuildConfig({
+  clean: true,
+  declaration: true,
+  entries: [
+    'src/index',
+    'src/constants/index',
+    'src/utils/index',
+    'src/colorful/index',
+    'src/cache/index',
+  ],
+});

packages/@core/base/shared/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@vben-core/shared",
+  "version": "5.0.0",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/base/shared"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm unbuild"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./constants": {
+      "types": "./src/constants/index.ts",
+      "development": "./src/constants/index.ts",
+      "default": "./dist/constants/index.mjs"
+    },
+    "./utils": {
+      "types": "./src/utils/index.ts",
+      "development": "./src/utils/index.ts",
+      "default": "./dist/utils/index.mjs"
+    },
+    "./colorful": {
+      "types": "./src/colorful/index.ts",
+      "development": "./src/colorful/index.ts",
+      "default": "./dist/colorful/index.mjs"
+    },
+    "./cache": {
+      "types": "./src/cache/index.ts",
+      "development": "./src/cache/index.ts",
+      "default": "./dist/cache/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.1.0",
+    "@vue/shared": "^3.4.34",
+    "clsx": "^2.1.1",
+    "defu": "^6.1.4",
+    "lodash.clonedeep": "^4.5.0",
+    "nprogress": "^0.2.0",
+    "tailwind-merge": "^2.4.0",
+    "theme-colors": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/nprogress": "^0.2.3"
+  }
+}

packages/@core/base/shared/src/cache/index.ts

@@ -0,0 +1 @@
+export * from './storage-manager';

packages/@core/base/shared/src/cache/storage-manager.test.ts

@@ -0,0 +1,130 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { StorageManager } from './storage-manager';
+
+describe('storageManager', () => {
+  let storageManager: StorageManager;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    localStorage.clear();
+    storageManager = new StorageManager({
+      prefix: 'test_',
+    });
+  });
+
+  it('should set and get an item', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should return default value if item does not exist', () => {
+    const user = storageManager.getItem('nonexistent', {
+      age: 0,
+      name: 'Default User',
+    });
+    expect(user).toEqual({ age: 0, name: 'Default User' });
+  });
+
+  it('should remove an item', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    storageManager.removeItem('user');
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should clear all items with the prefix', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' });
+    storageManager.clear();
+    expect(storageManager.getItem('user1')).toBeNull();
+    expect(storageManager.getItem('user2')).toBeNull();
+  });
+
+  it('should clear expired items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    vi.advanceTimersByTime(1001); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should not clear non-expired items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 10_000); // 10秒过期
+    vi.advanceTimersByTime(5000); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should handle JSON parse errors gracefully', () => {
+    localStorage.setItem('test_user', '{ invalid JSON }');
+    const user = storageManager.getItem('user', {
+      age: 0,
+      name: 'Default User',
+    });
+    expect(user).toEqual({ age: 0, name: 'Default User' });
+  });
+  it('should return null for non-existent items without default value', () => {
+    const user = storageManager.getItem('nonexistent');
+    expect(user).toBeNull();
+  });
+
+  it('should overwrite existing items', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user', { age: 25, name: 'Jane Doe' });
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 25, name: 'Jane Doe' });
+  });
+
+  it('should handle items without expiry correctly', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    vi.advanceTimersByTime(5000);
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should remove expired items when accessed', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    vi.advanceTimersByTime(1001); // 快进时间
+    const user = storageManager.getItem('user');
+    expect(user).toBeNull();
+  });
+
+  it('should not remove non-expired items when accessed', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' }, 10_000); // 10秒过期
+    vi.advanceTimersByTime(5000); // 快进时间
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should handle multiple items with different expiry times', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' }, 1000); // 1秒过期
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' }, 2000); // 2秒过期
+    vi.advanceTimersByTime(1500); // 快进时间
+    storageManager.clearExpiredItems();
+    const user1 = storageManager.getItem('user1');
+    const user2 = storageManager.getItem('user2');
+    expect(user1).toBeNull();
+    expect(user2).toEqual({ age: 25, name: 'Jane Doe' });
+  });
+
+  it('should handle items with no expiry', () => {
+    storageManager.setItem('user', { age: 30, name: 'John Doe' });
+    vi.advanceTimersByTime(10_000); // 快进时间
+    storageManager.clearExpiredItems();
+    const user = storageManager.getItem('user');
+    expect(user).toEqual({ age: 30, name: 'John Doe' });
+  });
+
+  it('should clear all items correctly', () => {
+    storageManager.setItem('user1', { age: 30, name: 'John Doe' });
+    storageManager.setItem('user2', { age: 25, name: 'Jane Doe' });
+    storageManager.clear();
+    const user1 = storageManager.getItem('user1');
+    const user2 = storageManager.getItem('user2');
+    expect(user1).toBeNull();
+    expect(user2).toBeNull();
+  });
+});

packages/@core/base/shared/src/cache/storage-manager.ts

@@ -0,0 +1,118 @@
+type StorageType = 'localStorage' | 'sessionStorage';
+
+interface StorageManagerOptions {
+  prefix?: string;
+  storageType?: StorageType;
+}
+
+interface StorageItem<T> {
+  expiry?: number;
+  value: T;
+}
+
+class StorageManager {
+  private prefix: string;
+  private storage: Storage;
+
+  constructor({
+    prefix = '',
+    storageType = 'localStorage',
+  }: StorageManagerOptions = {}) {
+    this.prefix = prefix;
+    this.storage =
+      storageType === 'localStorage'
+        ? window.localStorage
+        : window.sessionStorage;
+  }
+
+  /**
+   * 获取完整的存储键
+   * @param key 原始键
+   * @returns 带前缀的完整键
+   */
+  private getFullKey(key: string): string {
+    return `${this.prefix}-${key}`;
+  }
+
+  /**
+   * 清除所有带前缀的存储项
+   */
+  clear(): void {
+    const keysToRemove: string[] = [];
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        keysToRemove.push(key);
+      }
+    }
+    keysToRemove.forEach((key) => this.storage.removeItem(key));
+  }
+
+  /**
+   * 清除所有过期的存储项
+   */
+  clearExpiredItems(): void {
+    for (let i = 0; i < this.storage.length; i++) {
+      const key = this.storage.key(i);
+      if (key && key.startsWith(this.prefix)) {
+        const shortKey = key.replace(this.prefix, '');
+        this.getItem(shortKey); // 调用 getItem 方法检查并移除过期项
+      }
+    }
+  }
+
+  /**
+   * 获取存储项
+   * @param key 键
+   * @param defaultValue 当项不存在或已过期时返回的默认值
+   * @returns 值，如果项已过期或解析错误则返回默认值
+   */
+  getItem<T>(key: string, defaultValue: null | T = null): null | T {
+    const fullKey = this.getFullKey(key);
+    const itemStr = this.storage.getItem(fullKey);
+    if (!itemStr) {
+      return defaultValue;
+    }
+
+    try {
+      const item: StorageItem<T> = JSON.parse(itemStr);
+      if (item.expiry && Date.now() > item.expiry) {
+        this.storage.removeItem(fullKey);
+        return defaultValue;
+      }
+      return item.value;
+    } catch (error) {
+      console.error(`Error parsing item with key "${fullKey}":`, error);
+      this.storage.removeItem(fullKey); // 如果解析失败，删除该项
+      return defaultValue;
+    }
+  }
+
+  /**
+   * 移除存储项
+   * @param key 键
+   */
+  removeItem(key: string): void {
+    const fullKey = this.getFullKey(key);
+    this.storage.removeItem(fullKey);
+  }
+
+  /**
+   * 设置存储项
+   * @param key 键
+   * @param value 值
+   * @param ttl 存活时间（毫秒）
+   */
+  setItem<T>(key: string, value: T, ttl?: number): void {
+    const fullKey = this.getFullKey(key);
+    const expiry = ttl ? Date.now() + ttl : undefined;
+    const item: StorageItem<T> = { expiry, value };
+    try {
+      this.storage.setItem(fullKey, JSON.stringify(item));
+    } catch (error) {
+      console.error(`Error setting item with key "${fullKey}":`, error);
+    }
+  }
+}
+
+export { StorageManager };

packages/@core/base/shared/src/cache/types.ts

@@ -0,0 +1,17 @@
+type StorageType = 'localStorage' | 'sessionStorage';
+
+interface StorageValue<T> {
+  data: T;
+  expiry: null | number;
+}
+
+interface IStorageCache {
+  clear(): void;
+  getItem<T>(key: string): null | T;
+  key(index: number): null | string;
+  length(): number;
+  removeItem(key: string): void;
+  setItem<T>(key: string, value: T, expiryInMinutes?: number): void;
+}
+
+export type { IStorageCache, StorageType, StorageValue };

packages/@core/base/shared/src/colorful/convert.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+
+import { convertToHsl, convertToHslCssVar, isValidColor } from './convert';
+
+describe('color conversion functions', () => {
+  it('should correctly convert color to HSL format', () => {
+    const color = '#ff0000';
+    const expectedHsl = 'hsl(0 100% 50%)';
+    expect(convertToHsl(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color with alpha to HSL format', () => {
+    const color = 'rgba(255, 0, 0, 0.5)';
+    const expectedHsl = 'hsl(0 100% 50%) 0.5';
+    expect(convertToHsl(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color to HSL CSS variable format', () => {
+    const color = '#ff0000';
+    const expectedHsl = '0 100% 50%';
+    expect(convertToHslCssVar(color)).toEqual(expectedHsl);
+  });
+
+  it('should correctly convert color with alpha to HSL CSS variable format', () => {
+    const color = 'rgba(255, 0, 0, 0.5)';
+    const expectedHsl = '0 100% 50% / 0.5';
+    expect(convertToHslCssVar(color)).toEqual(expectedHsl);
+  });
+});
+
+describe('isValidColor', () => {
+  it('isValidColor function', () => {
+    // 测试有效颜色
+    expect(isValidColor('blue')).toBe(true);
+    expect(isValidColor('#000000')).toBe(true);
+
+    // 测试无效颜色
+    expect(isValidColor('invalid color')).toBe(false);
+    expect(isValidColor()).toBe(false);
+  });
+});

packages/@core/base/shared/src/colorful/convert.ts

@@ -0,0 +1,44 @@
+import { TinyColor } from '@ctrl/tinycolor';
+/**
+ * 将颜色转换为HSL格式。
+ *
+ * HSL是一种颜色模型，包括色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个部分。
+ * 这个函数使用TinyColor库将输入的颜色转换为HSL格式，并返回一个字符串。
+ *
+ * @param {string} color 输入的颜色，可以是任何TinyColor支持的颜色格式。
+ * @returns {string} HSL格式的颜色字符串。
+ */
+function convertToHsl(color: string): string {
+  const { a, h, l, s } = new TinyColor(color).toHsl();
+  const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
+  return a < 1 ? `${hsl} ${a}` : hsl;
+}
+
+/**
+ * 将颜色转换为HSL CSS变量。
+ *
+ * 这个函数与convertToHsl函数类似，但是返回的字符串格式稍有不同，
+ * 以便可以作为CSS变量使用。
+ *
+ * @param {string} color 输入的颜色，可以是任何TinyColor支持的颜色格式。
+ * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
+ */
+function convertToHslCssVar(color: string): string {
+  const { a, h, l, s } = new TinyColor(color).toHsl();
+  const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  return a < 1 ? `${hsl} / ${a}` : hsl;
+}
+
+/**
+ * 检查颜色是否有效
+ * @param {string} color - 待检查的颜色
+ * 如果颜色有效返回true，否则返回false
+ */
+function isValidColor(color?: string) {
+  if (!color) {
+    return false;
+  }
+  return new TinyColor(color).isValid;
+}
+
+export { convertToHsl, convertToHslCssVar, isValidColor, TinyColor };

packages/@core/base/shared/src/colorful/generator.ts

@@ -0,0 +1,43 @@
+import { TinyColor } from '@ctrl/tinycolor';
+import { getColors } from 'theme-colors';
+
+import { convertToHslCssVar } from './convert';
+
+interface ColorItem {
+  alias?: string;
+  color: string;
+  name: string;
+}
+
+function generatorColorVariables(colorItems: ColorItem[]) {
+  const colorVariables: Record<string, string> = {};
+
+  colorItems.forEach(({ alias, color, name }) => {
+    if (color) {
+      const colorsMap = getColors(new TinyColor(color).toHexString());
+      let mainColor = colorsMap['500'];
+
+      const colorKeys = Object.keys(colorsMap);
+
+      colorKeys.forEach((key) => {
+        const colorValue = colorsMap[key];
+
+        const hslColor = convertToHslCssVar(colorValue);
+        colorVariables[`--${name}-${key}`] = hslColor;
+        if (alias) {
+          colorVariables[`--${alias}-${key}`] = hslColor;
+        }
+
+        if (key === '500') {
+          mainColor = hslColor;
+        }
+      });
+      if (alias) {
+        colorVariables[`--${alias}`] = mainColor;
+      }
+    }
+  });
+  return colorVariables;
+}
+
+export { generatorColorVariables };

packages/@core/base/shared/src/colorful/index.ts

@@ -0,0 +1,2 @@
+export * from './convert';
+export * from './generator';

packages/@core/base/shared/src/constants/globals.ts

@@ -0,0 +1,10 @@
+/**
+ * @zh_CN 布局内容高度 css变量
+ * @en_US Layout content height
+ */
+export const CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT = `--vben-content-height`;
+
+/**
+ * @zh_CN 默认命名空间
+ */
+export const DEFAULT_NAMESPACE = 'vben';

packages/@core/base/shared/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './globals';
+export * from './vben';

packages/@core/base/shared/src/constants/vben.ts

@@ -0,0 +1,22 @@
+/**
+ * @zh_CN GITHUB 仓库地址
+ */
+const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
+
+/**
+ * @zh_CN 文档地址
+ */
+const VBEN_DOC_URL = 'https://doc.vben.pro';
+
+/**
+ * @zh_CN Vben Logo
+ */
+const VBEN_LOGO_URL =
+  'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp';
+
+/**
+ * @zh_CN Vben Admin 首页地址
+ */
+const VBEN_PREVIEW_URL = 'https://vben.pro';
+
+export { VBEN_DOC_URL, VBEN_GITHUB_URL, VBEN_LOGO_URL, VBEN_PREVIEW_URL };

packages/@core/base/shared/src/index.ts

@@ -0,0 +1,4 @@
+export * from './cache';
+export * from './colorful';
+export * from './constants';
+export * from './utils';

packages/@core/base/shared/src/utils/cn.ts

@@ -0,0 +1,8 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };

packages/@core/base/shared/src/utils/diff.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+
+import { diff } from './diff';
+
+describe('diff function', () => {
+  it('should correctly find differences in flat objects', () => {
+    const oldObj = { a: 1, b: 2, c: 3 };
+    const newObj = { a: 1, b: 3, c: 3 };
+    expect(diff(oldObj, newObj)).toEqual({ b: 3 });
+  });
+
+  it('should correctly handle nested objects', () => {
+    const oldObj = { a: { b: 1, c: 2 }, d: 3 };
+    const newObj = { a: { b: 1, c: 3 }, d: 3 };
+    expect(diff(oldObj, newObj)).toEqual({ a: { b: 1, c: 3 } });
+  });
+
+  it('should correctly handle arrays`', () => {
+    const oldObj = { a: [1, 2, 3] };
+    const newObj = { a: [1, 2, 4] };
+    expect(diff(oldObj, newObj)).toEqual({ a: [1, 2, 4] });
+  });
+
+  it('should correctly handle nested arrays', () => {
+    const oldObj = {
+      a: [
+        [1, 2],
+        [3, 4],
+      ],
+    };
+    const newObj = {
+      a: [
+        [1, 2],
+        [3, 5],
+      ],
+    };
+    expect(diff(oldObj, newObj)).toEqual({
+      a: [
+        [1, 2],
+        [3, 5],
+      ],
+    });
+  });
+
+  it('should return null if objects are identical', () => {
+    const oldObj = { a: 1, b: 2, c: 3 };
+    const newObj = { a: 1, b: 2, c: 3 };
+    expect(diff(oldObj, newObj)).toBeNull();
+  });
+
+  it('should return differences between two objects excluding ignored fields', () => {
+    const oldObj = { a: 1, b: 2, c: 3, d: 6 };
+    const newObj = { a: 2, b: 2, c: 4, d: 5 };
+    const ignoreFields: (keyof typeof newObj)[] = ['a', 'd'];
+
+    const result = diff(oldObj, newObj, ignoreFields);
+
+    expect(result).toEqual({ c: 4 });
+  });
+});

packages/@core/base/shared/src/utils/diff.ts

@@ -0,0 +1,58 @@
+type Diff<T = any> = T;
+
+// 比较两个数组是否相等
+
+function arraysEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) return false;
+  const counter = new Map<T, number>();
+  for (const value of a) {
+    counter.set(value, (counter.get(value) || 0) + 1);
+  }
+  for (const value of b) {
+    const count = counter.get(value);
+    if (count === undefined || count === 0) {
+      return false;
+    }
+    counter.set(value, count - 1);
+  }
+  return true;
+}
+
+// 深度对比两个值
+function deepEqual<T>(oldVal: T, newVal: T): boolean {
+  if (
+    typeof oldVal === 'object' &&
+    oldVal !== null &&
+    typeof newVal === 'object' &&
+    newVal !== null
+  ) {
+    return Array.isArray(oldVal) && Array.isArray(newVal)
+      ? arraysEqual(oldVal, newVal)
+      : diff(oldVal as any, newVal as any) === null;
+  } else {
+    return oldVal === newVal;
+  }
+}
+
+// 主要的 diff 函数
+function diff<T extends object>(
+  oldObj: T,
+  newObj: T,
+  ignoreFields: (keyof T)[] = [],
+): { [K in keyof T]?: Diff<T[K]> } | null {
+  const difference: { [K in keyof T]?: Diff<T[K]> } = {};
+
+  for (const key in oldObj) {
+    if (ignoreFields.includes(key)) continue;
+    const oldValue = oldObj[key];
+    const newValue = newObj[key];
+
+    if (!deepEqual(oldValue, newValue)) {
+      difference[key] = newValue;
+    }
+  }
+
+  return Object.keys(difference).length === 0 ? null : difference;
+}
+
+export { arraysEqual, diff };

packages/@core/base/shared/src/utils/dom.test.ts

@@ -0,0 +1,140 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+
+import { getElementVisibleHeight } from './dom'; // 假设函数位于 utils.ts 中
+
+describe('getElementVisibleHeight', () => {
+  // Mocking the getBoundingClientRect method
+  const mockGetBoundingClientRect = vi.fn();
+  const originalGetBoundingClientRect = Element.prototype.getBoundingClientRect;
+
+  beforeAll(() => {
+    // Mock getBoundingClientRect method
+    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+  });
+
+  afterAll(() => {
+    // Restore original getBoundingClientRect method
+    Element.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+  });
+
+  it('should return 0 if the element is null or undefined', () => {
+    expect(getElementVisibleHeight(null)).toBe(0);
+    expect(getElementVisibleHeight()).toBe(0);
+  });
+
+  it('should return the visible height of the element', () => {
+    // Mock the getBoundingClientRect return value
+    mockGetBoundingClientRect.mockReturnValue({
+      bottom: 500,
+      height: 400,
+      left: 0,
+      right: 0,
+      toJSON: () => ({}),
+      top: 100,
+      width: 0,
+      x: 0,
+      y: 0,
+    });
+
+    const mockElement = document.createElement('div');
+    document.body.append(mockElement);
+
+    // Mocking window.innerHeight and document.documentElement.clientHeight
+    const originalInnerHeight = window.innerHeight;
+    const originalClientHeight = document.documentElement.clientHeight;
+
+    Object.defineProperty(window, 'innerHeight', {
+      value: 600,
+      writable: true,
+    });
+
+    Object.defineProperty(document.documentElement, 'clientHeight', {
+      value: 600,
+      writable: true,
+    });
+
+    expect(getElementVisibleHeight(mockElement)).toBe(400);
+
+    // Restore original values
+    Object.defineProperty(window, 'innerHeight', {
+      value: originalInnerHeight,
+      writable: true,
+    });
+
+    Object.defineProperty(document.documentElement, 'clientHeight', {
+      value: originalClientHeight,
+      writable: true,
+    });
+
+    mockElement.remove();
+  });
+
+  it('should return the visible height when element is partially out of viewport', () => {
+    // Mock the getBoundingClientRect return value
+    mockGetBoundingClientRect.mockReturnValue({
+      bottom: 300,
+      height: 400,
+      left: 0,
+      right: 0,
+      toJSON: () => ({}),
+      top: -100,
+      width: 0,
+      x: 0,
+      y: 0,
+    });
+
+    const mockElement = document.createElement('div');
+    document.body.append(mockElement);
+
+    // Mocking window.innerHeight and document.documentElement.clientHeight
+    const originalInnerHeight = window.innerHeight;
+    const originalClientHeight = document.documentElement.clientHeight;
+
+    Object.defineProperty(window, 'innerHeight', {
+      value: 600,
+      writable: true,
+    });
+
+    Object.defineProperty(document.documentElement, 'clientHeight', {
+      value: 600,
+      writable: true,
+    });
+
+    expect(getElementVisibleHeight(mockElement)).toBe(300);
+
+    // Restore original values
+    Object.defineProperty(window, 'innerHeight', {
+      value: originalInnerHeight,
+      writable: true,
+    });
+
+    Object.defineProperty(document.documentElement, 'clientHeight', {
+      value: originalClientHeight,
+      writable: true,
+    });
+
+    mockElement.remove();
+  });
+
+  it('should return 0 if the element is completely out of viewport', () => {
+    // Mock the getBoundingClientRect return value
+    mockGetBoundingClientRect.mockReturnValue({
+      bottom: -100,
+      height: 400,
+      left: 0,
+      right: 0,
+      toJSON: () => ({}),
+      top: -500,
+      width: 0,
+      x: 0,
+      y: 0,
+    });
+
+    const mockElement = document.createElement('div');
+    document.body.append(mockElement);
+
+    expect(getElementVisibleHeight(mockElement)).toBe(0);
+
+    mockElement.remove();
+  });
+});

packages/@core/base/shared/src/utils/dom.ts

@@ -0,0 +1,23 @@
+/**
+ * 获取元素可见高度
+ * @param element
+ */
+function getElementVisibleHeight(
+  element?: HTMLElement | null | undefined,
+): number {
+  if (!element) {
+    return 0;
+  }
+  const rect = element.getBoundingClientRect();
+  const viewHeight = Math.max(
+    document.documentElement.clientHeight,
+    window.innerHeight,
+  );
+
+  const top = Math.max(rect.top, 0);
+  const bottom = Math.min(rect.bottom, viewHeight);
+
+  return Math.max(0, bottom - top);
+}
+
+export { getElementVisibleHeight };

packages/@core/base/shared/src/utils/index.ts

@@ -0,0 +1,12 @@
+export * from './cn';
+export * from './diff';
+export * from './dom';
+export * from './inference';
+export * from './letter';
+export * from './merge';
+export * from './nprogress';
+export * from './tree';
+export * from './unique';
+export * from './update-css-variables';
+export * from './window';
+export { default as cloneDepp } from 'lodash.clonedeep';

packages/@core/base/shared/src/utils/inference.test.ts

@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  isEmpty,
+  isHttpUrl,
+  isObject,
+  isUndefined,
+  isWindow,
+} from './inference';
+
+describe('isHttpUrl', () => {
+  it("should return true when given 'http://example.com'", () => {
+    expect(isHttpUrl('http://example.com')).toBe(true);
+  });
+
+  it("should return true when given 'https://example.com'", () => {
+    expect(isHttpUrl('https://example.com')).toBe(true);
+  });
+
+  it("should return false when given 'ftp://example.com'", () => {
+    expect(isHttpUrl('ftp://example.com')).toBe(false);
+  });
+
+  it("should return false when given 'example.com'", () => {
+    expect(isHttpUrl('example.com')).toBe(false);
+  });
+});
+
+describe('isUndefined', () => {
+  it('isUndefined should return true for undefined values', () => {
+    expect(isUndefined()).toBe(true);
+  });
+
+  it('isUndefined should return false for null values', () => {
+    expect(isUndefined(null)).toBe(false);
+  });
+
+  it('isUndefined should return false for defined values', () => {
+    expect(isUndefined(0)).toBe(false);
+    expect(isUndefined('')).toBe(false);
+    expect(isUndefined(false)).toBe(false);
+  });
+
+  it('isUndefined should return false for objects and arrays', () => {
+    expect(isUndefined({})).toBe(false);
+    expect(isUndefined([])).toBe(false);
+  });
+});
+
+describe('isEmpty', () => {
+  it('should return true for empty string', () => {
+    expect(isEmpty('')).toBe(true);
+  });
+
+  it('should return true for empty array', () => {
+    expect(isEmpty([])).toBe(true);
+  });
+
+  it('should return true for empty object', () => {
+    expect(isEmpty({})).toBe(true);
+  });
+
+  it('should return false for non-empty string', () => {
+    expect(isEmpty('hello')).toBe(false);
+  });
+
+  it('should return false for non-empty array', () => {
+    expect(isEmpty([1, 2, 3])).toBe(false);
+  });
+
+  it('should return false for non-empty object', () => {
+    expect(isEmpty({ a: 1 })).toBe(false);
+  });
+
+  it('should return true for null or undefined', () => {
+    expect(isEmpty(null)).toBe(true);
+    expect(isEmpty()).toBe(true);
+  });
+
+  it('should return false for number or boolean', () => {
+    expect(isEmpty(0)).toBe(false);
+    expect(isEmpty(true)).toBe(false);
+  });
+});
+
+describe('isWindow', () => {
+  it('should return true for the window object', () => {
+    expect(isWindow(window)).toBe(true);
+  });
+
+  it('should return false for other objects', () => {
+    expect(isWindow({})).toBe(false);
+    expect(isWindow([])).toBe(false);
+    expect(isWindow(null)).toBe(false);
+  });
+});
+
+describe('isObject', () => {
+  it('should return true for objects', () => {
+    expect(isObject({})).toBe(true);
+    expect(isObject({ a: 1 })).toBe(true);
+  });
+
+  it('should return false for non-objects', () => {
+    expect(isObject(null)).toBe(false);
+    expect(isObject()).toBe(false);
+    expect(isObject(42)).toBe(false);
+    expect(isObject('string')).toBe(false);
+    expect(isObject(true)).toBe(false);
+    expect(isObject([1, 2, 3])).toBe(true);
+    expect(isObject(new Date())).toBe(true);
+    expect(isObject(/regex/)).toBe(true);
+  });
+});

packages/@core/base/shared/src/utils/inference.ts

@@ -0,0 +1,119 @@
+import { isFunction, isObject, isString } from '@vue/shared';
+
+/**
+ * 检查传入的值是否为undefined。
+ *
+ * @param {unknown} value 要检查的值。
+ * @returns {boolean} 如果值是undefined，返回true，否则返回false。
+ */
+function isUndefined(value?: unknown): value is undefined {
+  return value === undefined;
+}
+
+/**
+ * 检查传入的值是否为空。
+ *
+ * 以下情况将被认为是空：
+ * - 值为null。
+ * - 值为undefined。
+ * - 值为一个空字符串。
+ * - 值为一个长度为0的数组。
+ * - 值为一个没有元素的Map或Set。
+ * - 值为一个没有属性的对象。
+ *
+ * @param {T} value 要检查的值。
+ * @returns {boolean} 如果值为空，返回true，否则返回false。
+ */
+function isEmpty<T = unknown>(value: T): value is T {
+  if (value === null || value === undefined) {
+    return true;
+  }
+
+  if (Array.isArray(value) || isString(value)) {
+    return value.length === 0;
+  }
+
+  if (value instanceof Map || value instanceof Set) {
+    return value.size === 0;
+  }
+
+  if (isObject(value)) {
+    return Object.keys(value).length === 0;
+  }
+
+  return false;
+}
+
+/**
+ * 检查传入的字符串是否为有效的HTTP或HTTPS URL。
+ *
+ * @param {string} url 要检查的字符串。
+ * @return {boolean} 如果字符串是有效的HTTP或HTTPS URL，返回true，否则返回false。
+ */
+function isHttpUrl(url?: string): boolean {
+  if (!url) {
+    return false;
+  }
+  // 使用正则表达式测试URL是否以http:// 或 https:// 开头
+  const httpRegex = /^https?:\/\/.*$/;
+  return httpRegex.test(url);
+}
+
+/**
+ * 检查传入的值是否为window对象。
+ *
+ * @param {any} value 要检查的值。
+ * @returns {boolean} 如果值是window对象，返回true，否则返回false。
+ */
+function isWindow(value: any): value is Window {
+  return (
+    typeof window !== 'undefined' && value !== null && value === value.window
+  );
+}
+
+/**
+ * 检查当前运行环境是否为Mac OS。
+ *
+ * 这个函数通过检查navigator.userAgent字符串来判断当前运行环境。
+ * 如果userAgent字符串中包含"macintosh"或"mac os x"（不区分大小写），则认为当前环境是Mac OS。
+ *
+ * @returns {boolean} 如果当前环境是Mac OS，返回true，否则返回false。
+ */
+function isMacOs(): boolean {
+  const macRegex = /macintosh|mac os x/i;
+  return macRegex.test(navigator.userAgent);
+}
+
+/**
+ * 检查当前运行环境是否为Windows OS。
+ *
+ * 这个函数通过检查navigator.userAgent字符串来判断当前运行环境。
+ * 如果userAgent字符串中包含"windows"或"win32"（不区分大小写），则认为当前环境是Windows OS。
+ *
+ * @returns {boolean} 如果当前环境是Windows OS，返回true，否则返回false。
+ */
+function isWindowsOs(): boolean {
+  const windowsRegex = /windows|win32/i;
+  return windowsRegex.test(navigator.userAgent);
+}
+
+/**
+ * 检查传入的值是否为数字
+ * @param value
+ */
+function isNumber(value: any): value is number {
+  return typeof value === 'number' && Number.isFinite(value);
+}
+
+export {
+  isEmpty,
+  isFunction,
+  isHttpUrl,
+  isMacOs,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined,
+  isWindow,
+  isWindowsOs,
+};

packages/@core/base/shared/src/utils/letter.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  capitalizeFirstLetter,
+  toCamelCase,
+  toLowerCaseFirstLetter,
+} from './letter';
+
+// 编写测试用例
+describe('capitalizeFirstLetter', () => {
+  it('should capitalize the first letter of a string', () => {
+    expect(capitalizeFirstLetter('hello')).toBe('Hello');
+    expect(capitalizeFirstLetter('world')).toBe('World');
+  });
+
+  it('should handle empty strings', () => {
+    expect(capitalizeFirstLetter('')).toBe('');
+  });
+
+  it('should handle single character strings', () => {
+    expect(capitalizeFirstLetter('a')).toBe('A');
+    expect(capitalizeFirstLetter('b')).toBe('B');
+  });
+
+  it('should not change the case of other characters', () => {
+    expect(capitalizeFirstLetter('hElLo')).toBe('HElLo');
+  });
+});
+
+describe('toLowerCaseFirstLetter', () => {
+  it('should convert the first letter to lowercase', () => {
+    expect(toLowerCaseFirstLetter('CommonAppName')).toBe('commonAppName');
+    expect(toLowerCaseFirstLetter('AnotherKeyExample')).toBe(
+      'anotherKeyExample',
+    );
+  });
+
+  it('should return the same string if the first letter is already lowercase', () => {
+    expect(toLowerCaseFirstLetter('alreadyLowerCase')).toBe('alreadyLowerCase');
+  });
+
+  it('should handle empty strings', () => {
+    expect(toLowerCaseFirstLetter('')).toBe('');
+  });
+
+  it('should handle single character strings', () => {
+    expect(toLowerCaseFirstLetter('A')).toBe('a');
+    expect(toLowerCaseFirstLetter('a')).toBe('a');
+  });
+
+  it('should handle strings with only one uppercase letter', () => {
+    expect(toLowerCaseFirstLetter('A')).toBe('a');
+  });
+
+  it('should handle strings with special characters', () => {
+    expect(toLowerCaseFirstLetter('!Special')).toBe('!Special');
+    expect(toLowerCaseFirstLetter('123Number')).toBe('123Number');
+  });
+});
+
+describe('toCamelCase', () => {
+  it('should return the key if parentKey is empty', () => {
+    expect(toCamelCase('child', '')).toBe('child');
+  });
+
+  it('should combine parentKey and key in camel case', () => {
+    expect(toCamelCase('child', 'parent')).toBe('parentChild');
+  });
+
+  it('should handle empty key and parentKey', () => {
+    expect(toCamelCase('', '')).toBe('');
+  });
+
+  it('should handle key with capital letters', () => {
+    expect(toCamelCase('Child', 'parent')).toBe('parentChild');
+    expect(toCamelCase('Child', 'Parent')).toBe('ParentChild');
+  });
+});

packages/@core/base/shared/src/utils/letter.ts

@@ -0,0 +1,32 @@
+/**
+ * 将字符串的首字母大写
+ * @param string
+ */
+function capitalizeFirstLetter(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+/**
+ * 将字符串的首字母转换为小写。
+ *
+ * @param str 要转换的字符串
+ * @returns 首字母小写的字符串
+ */
+function toLowerCaseFirstLetter(str: string): string {
+  if (!str) return str; // 如果字符串为空，直接返回
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}
+
+/**
+ *  生成驼峰命名法的键名
+ * @param key
+ * @param parentKey
+ */
+function toCamelCase(key: string, parentKey: string): string {
+  if (!parentKey) {
+    return key;
+  }
+  return parentKey + key.charAt(0).toUpperCase() + key.slice(1);
+}
+
+export { capitalizeFirstLetter, toCamelCase, toLowerCaseFirstLetter };

packages/@core/base/shared/src/utils/merge.ts

@@ -0,0 +1 @@
+export { defu as merge } from 'defu';

packages/@core/base/shared/src/utils/nprogress.ts

@@ -0,0 +1,43 @@
+import type NProgress from 'nprogress';
+
+// 创建一个NProgress实例的变量，初始值为null
+let nProgressInstance: null | typeof NProgress = null;
+
+/**
+ * 动态加载NProgress库，并进行配置。
+ * 此函数首先检查是否已经加载过NProgress库，如果已经加载过，则直接返回NProgress实例。
+ * 否则，动态导入NProgress库，进行配置，然后返回NProgress实例。
+ *
+ * @returns  NProgress实例的Promise对象。
+ */
+async function loadNprogress() {
+  if (nProgressInstance) {
+    return nProgressInstance;
+  }
+  nProgressInstance = await import('nprogress');
+  nProgressInstance.configure({
+    showSpinner: true,
+    speed: 300,
+  });
+  return nProgressInstance;
+}
+
+/**
+ * 开始显示进度条。
+ * 此函数首先加载NProgress库，然后调用NProgress的start方法开始显示进度条。
+ */
+async function startProgress() {
+  const nprogress = await loadNprogress();
+  nprogress?.start();
+}
+
+/**
+ * 停止显示进度条，并隐藏进度条。
+ * 此函数首先加载NProgress库，然后调用NProgress的done方法停止并隐藏进度条。
+ */
+async function stopProgress() {
+  const nprogress = await loadNprogress();
+  nprogress?.done();
+}
+
+export { startProgress, stopProgress };

packages/@core/base/shared/src/utils/tree.test.ts

@@ -0,0 +1,196 @@
+import { describe, expect, it } from 'vitest';
+
+import { filterTree, mapTree, traverseTreeValues } from './tree';
+
+describe('traverseTreeValues', () => {
+  interface Node {
+    children?: Node[];
+    name: string;
+  }
+
+  type NodeValue = string;
+
+  const sampleTree: Node[] = [
+    {
+      name: 'A',
+      children: [
+        { name: 'B' },
+        {
+          name: 'C',
+          children: [{ name: 'D' }, { name: 'E' }],
+        },
+      ],
+    },
+    {
+      name: 'F',
+      children: [
+        { name: 'G' },
+        {
+          name: 'H',
+          children: [{ name: 'I' }],
+        },
+      ],
+    },
+  ];
+
+  it('traverses tree and returns all node values', () => {
+    const values = traverseTreeValues<Node, NodeValue>(
+      sampleTree,
+      (node) => node.name,
+      {
+        childProps: 'children',
+      },
+    );
+    expect(values).toEqual(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']);
+  });
+
+  it('handles empty tree', () => {
+    const values = traverseTreeValues<Node, NodeValue>([], (node) => node.name);
+    expect(values).toEqual([]);
+  });
+
+  it('handles tree with only root node', () => {
+    const rootNode = { name: 'A' };
+    const values = traverseTreeValues<Node, NodeValue>(
+      [rootNode],
+      (node) => node.name,
+    );
+    expect(values).toEqual(['A']);
+  });
+
+  it('handles tree with only leaf nodes', () => {
+    const leafNodes = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];
+    const values = traverseTreeValues<Node, NodeValue>(
+      leafNodes,
+      (node) => node.name,
+    );
+    expect(values).toEqual(['A', 'B', 'C']);
+  });
+});
+
+describe('filterTree', () => {
+  const tree = [
+    {
+      id: 1,
+      children: [
+        { id: 2 },
+        { id: 3, children: [{ id: 4 }, { id: 5 }, { id: 6 }] },
+        { id: 7 },
+      ],
+    },
+    { id: 8, children: [{ id: 9 }, { id: 10 }] },
+    { id: 11 },
+  ];
+
+  it('should return all nodes when condition is always true', () => {
+    const result = filterTree(tree, () => true, { childProps: 'children' });
+    expect(result).toEqual(tree);
+  });
+
+  it('should return only root nodes when condition is always false', () => {
+    const result = filterTree(tree, () => false);
+    expect(result).toEqual([]);
+  });
+
+  it('should return nodes with even id values', () => {
+    const result = filterTree(tree, (node) => node.id % 2 === 0);
+    expect(result).toEqual([{ id: 8, children: [{ id: 10 }] }]);
+  });
+
+  it('should return nodes with odd id values and their ancestors', () => {
+    const result = filterTree(tree, (node) => node.id % 2 === 1);
+    expect(result).toEqual([
+      {
+        id: 1,
+        children: [{ id: 3, children: [{ id: 5 }] }, { id: 7 }],
+      },
+      { id: 11 },
+    ]);
+  });
+
+  it('should return nodes with "leaf" in their name', () => {
+    const tree = [
+      {
+        name: 'root',
+        children: [
+          { name: 'leaf 1' },
+          {
+            name: 'branch',
+            children: [{ name: 'leaf 2' }, { name: 'leaf 3' }],
+          },
+          { name: 'leaf 4' },
+        ],
+      },
+    ];
+    const result = filterTree(
+      tree,
+      (node) => node.name.includes('leaf') || node.name === 'root',
+    );
+    expect(result).toEqual([
+      {
+        name: 'root',
+        children: [{ name: 'leaf 1' }, { name: 'leaf 4' }],
+      },
+    ]);
+  });
+});
+
+describe('mapTree', () => {
+  it('map infinite depth tree using mapTree', () => {
+    const tree = [
+      {
+        id: 1,
+        name: 'node1',
+        children: [
+          { id: 2, name: 'node2' },
+          { id: 3, name: 'node3' },
+          {
+            id: 4,
+            name: 'node4',
+            children: [
+              {
+                id: 5,
+                name: 'node5',
+                children: [
+                  { id: 6, name: 'node6' },
+                  { id: 7, name: 'node7' },
+                ],
+              },
+              { id: 8, name: 'node8' },
+            ],
+          },
+        ],
+      },
+    ];
+    const newTree = mapTree(tree, (node) => ({
+      ...node,
+      name: `${node.name}-new`,
+    }));
+
+    expect(newTree).toEqual([
+      {
+        id: 1,
+        name: 'node1-new',
+        children: [
+          { id: 2, name: 'node2-new' },
+          { id: 3, name: 'node3-new' },
+          {
+            id: 4,
+            name: 'node4-new',
+            children: [
+              {
+                id: 5,
+                name: 'node5-new',
+                children: [
+                  { id: 6, name: 'node6-new' },
+                  { id: 7, name: 'node7-new' },
+                ],
+              },
+              { id: 8, name: 'node8-new' },
+            ],
+          },
+        ],
+      },
+    ]);
+  });
+});

packages/@core/base/shared/src/utils/tree.ts

@@ -0,0 +1,97 @@
+interface TreeConfigOptions {
+  // 子属性的名称，默认为'children'
+  childProps: string;
+}
+
+/**
+ * @zh_CN 遍历树形结构，并返回所有节点中指定的值。
+ * @param tree 树形结构数组
+ * @param getValue 获取节点值的函数
+ * @param options 作为子节点数组的可选属性名称。
+ * @returns 所有节点中指定的值的数组
+ */
+function traverseTreeValues<T, V>(
+  tree: T[],
+  getValue: (node: T) => V,
+  options?: TreeConfigOptions,
+): V[] {
+  const result: V[] = [];
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+
+  const dfs = (treeNode: T) => {
+    const value = getValue(treeNode);
+    result.push(value);
+    const children = (treeNode as Record<string, any>)?.[childProps];
+    if (!children) {
+      return;
+    }
+    if (children.length > 0) {
+      for (const child of children) {
+        dfs(child);
+      }
+    }
+  };
+
+  for (const treeNode of tree) {
+    dfs(treeNode);
+  }
+  return result.filter(Boolean);
+}
+
+/**
+ * 根据条件过滤给定树结构的节点，并以原有顺序返回所有匹配节点的数组。
+ * @param tree 要过滤的树结构的根节点数组。
+ * @param filter 用于匹配每个节点的条件。
+ * @param options 作为子节点数组的可选属性名称。
+ * @returns 包含所有匹配节点的数组。
+ */
+function filterTree<T extends Record<string, any>>(
+  tree: T[],
+  filter: (node: T) => boolean,
+  options?: TreeConfigOptions,
+): T[] {
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+
+  const _filterTree = (nodes: T[]): T[] => {
+    return nodes.filter((node: Record<string, any>) => {
+      if (filter(node as T)) {
+        if (node[childProps]) {
+          node[childProps] = _filterTree(node[childProps]);
+        }
+        return true;
+      }
+      return false;
+    });
+  };
+
+  return _filterTree(tree);
+}
+
+/**
+ * 根据条件重新映射给定树结构的节
+ * @param tree 要过滤的树结构的根节点数组。
+ * @param mapper 用于map每个节点的条件。
+ * @param options 作为子节点数组的可选属性名称。
+ */
+function mapTree<T, V extends Record<string, any>>(
+  tree: T[],
+  mapper: (node: T) => V,
+  options?: TreeConfigOptions,
+): V[] {
+  const { childProps } = options || {
+    childProps: 'children',
+  };
+  return tree.map((node) => {
+    const mapperNode: Record<string, any> = mapper(node);
+    if (mapperNode[childProps]) {
+      mapperNode[childProps] = mapTree(mapperNode[childProps], mapper, options);
+    }
+    return mapperNode as V;
+  });
+}
+
+export { filterTree, mapTree, traverseTreeValues };

packages/@core/base/shared/src/utils/unique.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from 'vitest';
+
+import { uniqueByField } from './unique';
+
+describe('uniqueByField', () => {
+  it('should return an array with unique items based on id field', () => {
+    const items = [
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+      { id: 1, name: 'Duplicate Item' },
+    ];
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results
+    expect(uniqueItems).toHaveLength(3); // After deduplication, there should be three objects left
+    expect(uniqueItems).toEqual([
+      { id: 1, name: 'Item 1' },
+      { id: 2, name: 'Item 2' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+
+  it('should return an empty array when input array is empty', () => {
+    const items: any[] = []; // Empty array
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results
+    expect(uniqueItems).toEqual([]);
+  });
+
+  it('should handle arrays with only one item correctly', () => {
+    const items = [{ id: 1, name: 'Item 1' }];
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results
+    expect(uniqueItems).toHaveLength(1);
+    expect(uniqueItems).toEqual([{ id: 1, name: 'Item 1' }]);
+  });
+
+  it('should preserve the order of the first occurrence of each item', () => {
+    const items = [
+      { id: 2, name: 'Item 2' },
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+      { id: 1, name: 'Duplicate Item' },
+    ];
+
+    const uniqueItems = uniqueByField(items, 'id');
+
+    // Assert expected results (order of first occurrences preserved)
+    expect(uniqueItems).toEqual([
+      { id: 2, name: 'Item 2' },
+      { id: 1, name: 'Item 1' },
+      { id: 3, name: 'Item 3' },
+    ]);
+  });
+});

packages/@core/base/shared/src/utils/unique.ts

@@ -0,0 +1,15 @@
+/**
+ * 根据指定字段对对象数组进行去重
+ * @param arr 要去重的对象数组
+ * @param key 去重依据的字段名
+ * @returns 去重后的对象数组
+ */
+function uniqueByField<T>(arr: T[], key: keyof T): T[] {
+  const seen = new Map<any, T>();
+  return arr.filter((item) => {
+    const value = item[key];
+    return seen.has(value) ? false : (seen.set(value, item), true);
+  });
+}
+
+export { uniqueByField };

packages/@core/base/shared/src/utils/update-css-variables.test.ts

@@ -0,0 +1,30 @@
+import { expect, it } from 'vitest';
+
+import { updateCSSVariables } from './update-css-variables';
+
+it('updateCSSVariables should update CSS variables in :root selector', () => {
+  // 模拟初始的内联样式表内容
+  const initialStyleContent = ':root { --primaryColor: red; }';
+  document.head.innerHTML = `<style id="custom-styles">${initialStyleContent}</style>`;
+
+  // 要更新的CSS变量和它们的新值
+  const updatedVariables = {
+    fontSize: '16px',
+    primaryColor: 'blue',
+    secondaryColor: 'green',
+  };
+
+  // 调用函数来更新CSS变量
+  updateCSSVariables(updatedVariables, 'custom-styles');
+
+  // 获取更新后的样式内容
+  const styleElement = document.querySelector('#custom-styles');
+  const updatedStyleContent = styleElement ? styleElement.textContent : '';
+
+  // 检查更新后的样式内容是否包含正确的更新值
+  expect(
+    updatedStyleContent?.includes('primaryColor: blue;') &&
+      updatedStyleContent?.includes('secondaryColor: green;') &&
+      updatedStyleContent?.includes('fontSize: 16px;'),
+  ).toBe(true);
+});

packages/@core/base/shared/src/utils/update-css-variables.ts

@@ -0,0 +1,35 @@
+/**
+ * 更新 CSS 变量的函数
+ * @param variables 要更新的 CSS 变量与其新值的映射
+ */
+function updateCSSVariables(
+  variables: { [key: string]: string },
+  id = '__vben-styles__',
+): void {
+  // 获取或创建内联样式表元素
+  const styleElement =
+    document.querySelector(`#${id}`) || document.createElement('style');
+
+  styleElement.id = id;
+
+  // 构建要更新的 CSS 变量的样式文本
+  let cssText = ':root {';
+  for (const key in variables) {
+    if (Object.prototype.hasOwnProperty.call(variables, key)) {
+      cssText += `${key}: ${variables[key]};`;
+    }
+  }
+  cssText += '}';
+
+  // 将样式文本赋值给内联样式表
+  styleElement.textContent = cssText;
+
+  // 将内联样式表添加到文档头部
+  if (!document.querySelector(`#${id}`)) {
+    setTimeout(() => {
+      document.head.append(styleElement);
+    });
+  }
+}
+
+export { updateCSSVariables };

packages/@core/base/shared/src/utils/window.test.ts

@@ -0,0 +1,33 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { openWindow } from './window'; // 假设你的函数在 'openWindow' 文件中
+
+describe('openWindow', () => {
+  // 保存原始的 window.open 函数
+  let originalOpen: typeof window.open;
+
+  beforeEach(() => {
+    originalOpen = window.open;
+  });
+
+  afterEach(() => {
+    window.open = originalOpen;
+  });
+
+  it('should call window.open with correct arguments', () => {
+    const url = 'https://example.com';
+    const options = { noopener: true, noreferrer: true, target: '_blank' };
+
+    window.open = vi.fn();
+
+    // 调用函数
+    openWindow(url, options);
+
+    // 验证 window.open 是否被正确地调用
+    expect(window.open).toHaveBeenCalledWith(
+      url,
+      options.target,
+      'noopener=yes,noreferrer=yes',
+    );
+  });
+});

packages/@core/base/shared/src/utils/window.ts

@@ -0,0 +1,26 @@
+interface OpenWindowOptions {
+  noopener?: boolean;
+  noreferrer?: boolean;
+  target?: '_blank' | '_parent' | '_self' | '_top' | string;
+}
+
+/**
+ * 新窗口打开URL。
+ *
+ * @param url - 需要打开的网址。
+ * @param options - 打开窗口的选项。
+ */
+function openWindow(url: string, options: OpenWindowOptions = {}): void {
+  // 解构并设置默认值
+  const { noopener = true, noreferrer = true, target = '_blank' } = options;
+
+  // 基于选项创建特性字符串
+  const features = [noopener && 'noopener=yes', noreferrer && 'noreferrer=yes']
+    .filter(Boolean)
+    .join(',');
+
+  // 打开窗口
+  window.open(url, target, features);
+}
+
+export { openWindow };

packages/@core/base/shared/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/library.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}