feat(about): 优化技术标签云渲染与状态管理

- 引入 sessionStorage 缓存技术标签云状态，提升页面切换性能
- 区分移动端与桌面端渲染逻辑，实现响应式适配
- 抽离 3D 球体动画初始化方法，增强代码可维护性
- 添加窗口大小变化监听器，动态调整渲染内容
- 实现标签云生成与状态保存功能，避免重复计算
- 优化动画性能，使用 requestAnimationFrame 处理鼠标交互

js/about.js

@@ -839,10 +839,50 @@ class UIManager {
             return {...item, gradientId: gid};
         });
 
-        const isMobile = window.matchMedia('(max-width: 768px)').matches;
-        container.innerHTML = '';
+        const currentState = window.matchMedia('(max-width: 768px)').matches ? 'mobile' : 'desktop';
+        // 检查是否已保存状态到 sessionStorage
+        const savedState = sessionStorage.getItem('techCloudState_' + currentState);
 
-        if (isMobile) {
+
+        if (savedState) {
+            const parsedState = JSON.parse(savedState);
+            // 如果当前状态与保存的状态一致，直接使用保存的内容
+            if (parsedState.type === currentState) {
+                container.innerHTML = parsedState.html;
+                if (currentState === 'mobile') {
+                    container.classList.add('mobile-scroll');
+                }
+                if (currentState === 'desktop') {
+                    container.classList.remove('mobile-scroll');
+                    // 重新初始化3D球体动画
+                    this.init3DSphereAnimation(container, techStack);
+                }
+                // 监听窗口大小变化
+                this.setupResizeListener(container, techStack, currentState);
+                return;
+            }
+        }
+
+        // 清空容器并重新生成
+        this.generateTechCloud(container, techStack, currentState);
+
+        // 监听窗口大小变化
+        this.setupResizeListener(container, techStack, currentState);
+    }
+
+    // 保存技术标签云状态到 sessionStorage
+    saveTechCloudState(container, type) {
+        const state = {
+            type: type,
+            html: container.innerHTML
+        };
+        sessionStorage.setItem('techCloudState_' + type, JSON.stringify(state));
+    }
+
+    // 生成技术标签云
+    generateTechCloud(container, techStack, type) {
+        container.innerHTML = '';
+        if (type === 'mobile') {
             // Mobile: 3-row seamless marquee
             container.classList.add('mobile-scroll');
             const rows = 3;
@@ -872,20 +912,15 @@ class UIManager {
         } else {
             // PC: 3D Sphere
             container.classList.remove('mobile-scroll');
-
-            // 使用防抖优化尺寸计算
-            let resizeTimeout;
-            const updateContainerSize = () => {
-                if (resizeTimeout) {
-                    clearTimeout(resizeTimeout);
+            this.init3DSphereAnimation(container, techStack);
         }
-                resizeTimeout = setTimeout(() => {
-                    init3DSphere();
-                }, 100);
-            };
 
-            // 初始化3D球体
-            const init3DSphere = () => {
+        // 保存当前状态
+        this.saveTechCloudState(container, type);
+    }
+
+    // 初始化3D球体动画
+    init3DSphereAnimation(container, techStack) {
         // 清除之前的动画
         if (container.__animToken) {
             cancelAnimationFrame(container.__animToken);
@@ -985,16 +1020,50 @@ class UIManager {
         };
 
         container.__animToken = requestAnimationFrame(update);
+    }
+
+    // 设置窗口大小变化监听器
+    setupResizeListener(container, techStack, currentType) {
+        // 使用防抖优化尺寸计算
+        let resizeTimeout;
+        let windowRef = currentType;
+        const handleResize = () => {
+            if (resizeTimeout) {
+                clearTimeout(resizeTimeout);
+            }
+            resizeTimeout = setTimeout(() => {
+                const isMobile = window.matchMedia('(max-width: 768px)').matches;
+                const currentState = isMobile ? 'mobile' : 'desktop';
+                if (windowRef === currentState) {
+                    console.log('Tech Cloud: Skipping resize, same state:', windowRef, currentState);
+                    return
+                }
+                windowRef = currentState;
+
+                // 检查 sessionStorage 中是否有对应状态的内容
+                const savedState = sessionStorage.getItem('techCloudState_' + currentState);
+                if (savedState) {
+                    // 直接使用保存的内容
+                    const parsedState = JSON.parse(savedState);
+                    container.innerHTML = parsedState.html;
+                    if (currentState === 'mobile') {
+                        container.classList.add('mobile-scroll');
+                    }
+                    if (currentState === 'desktop') {
+                        container.classList.remove('mobile-scroll');
+                        this.init3DSphereAnimation(container, techStack);
+                    }
+                } else {
+                    // 重新生成
+                    container.innerHTML = '';
+                    this.generateTechCloud(container, techStack, currentState);
+                }
+            }, 100);
         };
 
-            // 初始化3D球体
-            init3DSphere();
-
         // 监听窗口大小变化
-            window.addEventListener('resize', updateContainerSize);
+        window.addEventListener('resize', handleResize);
     }
-    }
-
 
     initFab() {
         const main = document.getElementById('fab-main');