feat: And surface switching loading optimization

packages/@core/forward/preferences/src/config.ts

@@ -76,6 +76,7 @@ const defaultPreferences: Preferences = {
   },
   transition: {
     enable: true,
+    loading: true,
     name: 'fade-slide',
     progress: true,
   },

packages/@core/forward/preferences/src/preferences.ts

@@ -341,9 +341,9 @@ class PreferenceManager {
     // 保存重置后的偏好设置
     this.savePreferences(this.state);
     // 从存储中移除偏好设置项
-    this.cache?.removeItem(STORAGE_KEY);
-    this.cache?.removeItem(STORAGE_KEY_THEME);
-    this.cache?.removeItem(STORAGE_KEY_LOCALE);
+    [STORAGE_KEY, STORAGE_KEY_THEME, STORAGE_KEY_LOCALE].forEach((key) => {
+      this.cache?.removeItem(key);
+    });
   }
 
   /**

packages/@core/forward/preferences/src/types.ts

@@ -150,6 +150,8 @@ interface ThemePreferences {
 interface TransitionPreferences {
   /** 页面切换动画是否启用 */
   enable: boolean;
+  // /** 是否开启页面加载loading */
+  loading: boolean;
   /** 页面切换动画 */
   name: PageTransitionType | string;
   /** 是否开启页面加载进度动画 */

packages/@core/shared/const/src/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<{ age: number; name: string }>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    localStorage.clear();
+    storageManager = new StorageManager<{ age: number; name: string }>({
+      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/shared/const/src/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: T | null = null): T | null {
+    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/shared/const/src/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): T | null;
+  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/uikit/layout-ui/src/components/layout-content.vue

@@ -2,7 +2,9 @@
 import type { ContentCompactType } from '@vben-core/typings';
 
 import type { CSSProperties } from 'vue';
-import { computed } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
 
 interface Props {
   /**
@@ -52,6 +54,14 @@ const props = withDefaults(defineProps<Props>(), {
   paddingTop: 16,
 });
 
+const domElement = ref<HTMLDivElement | null>();
+
+const { height, width } = useWindowSize();
+const contentClientHeight = useCssVar('--vben-content-client-height');
+const debouncedCalcHeight = useDebounceFn(() => {
+  contentClientHeight.value = `${domElement.value?.clientHeight ?? window.innerHeight}px`;
+}, 200);
+
 const style = computed((): CSSProperties => {
   const {
     contentCompact,
@@ -76,10 +86,18 @@ const style = computed((): CSSProperties => {
     paddingTop: `${paddingTop}px`,
   };
 });
+
+watch([height, width], () => {
+  debouncedCalcHeight();
+});
+
+onMounted(() => {
+  debouncedCalcHeight();
+});
 </script>
 
 <template>
-  <main :style="style">
+  <main ref="domElement" :style="style">
     <slot></slot>
   </main>
 </template>

packages/@core/uikit/shadcn-ui/src/components/spinner/spinner.vue

@@ -20,7 +20,7 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
   minLoadingTime: 50,
 });
-const startTime = ref(0);
+// const startTime = ref(0);
 const showSpinner = ref(false);
 const renderSpinner = ref(true);
 const timer = ref<ReturnType<typeof setTimeout>>();
@@ -33,11 +33,12 @@ watch(
       clearTimeout(timer.value);
       return;
     }
-    startTime.value = performance.now();
-    timer.value = setTimeout(() => {
-      const loadingTime = performance.now() - startTime.value;
 
-      showSpinner.value = loadingTime > props.minLoadingTime;
+    // startTime.value = performance.now();
+    timer.value = setTimeout(() => {
+      // const loadingTime = performance.now() - startTime.value;
+
+      showSpinner.value = true;
       if (showSpinner.value) {
         renderSpinner.value = true;
       }
@@ -49,13 +50,14 @@ watch(
 );
 
 function onTransitionEnd() {
-  renderSpinner.value = false;
+  if (!showSpinner.value) {
+    renderSpinner.value = false;
+  }
 }
 </script>
 
 <template>
   <div
-    v-if="renderSpinner"
     :class="{
       'invisible opacity-0': !showSpinner,
     }"