refactor(about): 重构技术标签云实现以提升性能和视觉效果

- 减少标签云容器内边距和间距以优化布局
- 移除基于CSS动画的多行滚动实现
- 引入绝对定位和JavaScript驱动的单行滚动逻辑
- 实现带偏移量的双轨道无缝循环滚动效果
- 动态计算并设置每行高度以防止布局错位
- 优化标签去重逻辑以避免重复显示相同标签
- 调整滚动速度参数以改善用户体验

css/about.css

@@ -1165,8 +1165,8 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
         overflow: hidden;
         justify-content: center;
         align-items: center;
-        padding: 20px 0;
+        padding: 8px 0;
-        gap: 15px;
+        gap: 6px;
         min-height: 150px;
     }
 
@@ -1178,41 +1178,21 @@ a:not(.nav-logo):not(.nav-links a):not(.social-link):not(.btn):not(.footer-info
 
     /* 三行滚动容器 */
     .tech-row {
-        display: flex;
+        position: relative;
+        display: block;
         width: 100%;
-        animation: scroll linear infinite;
+        overflow: hidden;
-        animation-play-state: paused;
+        padding: 1px 0;
-        gap: 15px;
+        height: auto;
-        padding: 10px 0;
     }
 
-    .tech-row.scrolling {
+    .tech-track {
-        animation-play-state: running;
+        position: absolute;
-    }
+        left: 0;
-
+        top: 0;
-    /* 第一行滚动速度 - 增快10倍 */
+        display: inline-flex;
-    .tech-row:nth-child(1) {
+        gap: 2px;
-        animation-duration: 3s;
+        will-change: transform;
-    }
-
-    /* 第二行滚动速度 - 增快10倍 */
-    .tech-row:nth-child(2) {
-        animation-duration: 3.5s;
-    }
-
-    /* 第三行滚动速度 - 增快10倍 */
-    .tech-row:nth-child(3) {
-        animation-duration: 4s;
-    }
-
-    /* 滚动动画 */
-    @keyframes scroll {
-        0% {
-            transform: translateX(0);
-        }
-        100% {
-            transform: translateX(-50%);
-        }
     }
 
     .cloud-tag {

js/about.js

@@ -484,67 +484,57 @@ function initHorizontalTechCloud(items) {
     container.innerHTML = '';
     container.classList.remove('sphere');
 
-    // 按权重排序，确保重要的标签优先显示
+    var sortedItems = items.slice().sort(function(a, b) { return b.weight - a.weight; });
-    var sortedItems = items.slice().sort(function(a, b) {
+    var unique = [];
-        return b.weight - a.weight;
+    var seen = new Set();
-    });
+    for (var i = 0; i < sortedItems.length; i++) {
-
+        var key = sortedItems[i].name + '|' + sortedItems[i].category;
-    // 创建三行容器
+        if (!seen.has(key)) { seen.add(key); unique.push(sortedItems[i]); }
-    var row1 = document.createElement('div');
-    var row2 = document.createElement('div');
-    var row3 = document.createElement('div');
-
-    row1.className = 'tech-row';
-    row2.className = 'tech-row';
-    row3.className = 'tech-row';
-
-    // 将标签分配到三行中（先放原始标签，避免相邻重复）
-    sortedItems.forEach(function(item, index) {
-        var el = document.createElement('span');
-        el.className = 'cloud-tag';
-        el.textContent = item.name;
-        el.setAttribute('data-category', item.category);
-        el.setAttribute('data-weight', item.weight);
-
-        // 根据索引分配到不同行
-        if (index % 3 === 0) {
-            row1.appendChild(el);
-        } else if (index % 3 === 1) {
-            row2.appendChild(el);
-        } else {
-            row3.appendChild(el);
-        }
-    });
-
-    // 追加克隆集合（在所有原始标签之后再追加一轮，用于无缝滚动）
-    function appendClones(row) {
-        var originals = Array.from(row.children);
-        originals.forEach(function(node) {
-            var clone = node.cloneNode(true);
-            clone.setAttribute('data-clone', 'true');
-            row.appendChild(clone);
-        });
     }
-    appendClones(row1);
-    appendClones(row2);
-    appendClones(row3);
 
-    container.appendChild(row1);
+    function makeRow(itemsForRow, speed) {
-    container.appendChild(row2);
+        var row = document.createElement('div');
-    container.appendChild(row3);
+        row.className = 'tech-row';
+        var track = document.createElement('div');
+        track.className = 'tech-track';
+        row.appendChild(track);
+        for (var i = 0; i < itemsForRow.length; i++) {
+            var el = document.createElement('span');
+            el.className = 'cloud-tag';
+            el.textContent = itemsForRow[i].name;
+            el.setAttribute('data-category', itemsForRow[i].category);
+            el.setAttribute('data-weight', itemsForRow[i].weight);
+            track.appendChild(el);
+        }
+        var clones = track.cloneNode(true);
+        clones.className = 'tech-track';
+        row.appendChild(clones);
+        // 设置行高为单个轨道的高度，避免双轨叠加增高
+        requestAnimationFrame(function(){
+            row.style.height = track.offsetHeight + 'px';
+        });
+        container.appendChild(row);
+        var offset = 0;
+        var firstWidth = track.scrollWidth;
+        function step() {
+            offset -= speed;
+            if (offset <= -firstWidth) offset += firstWidth;
+            track.style.transform = 'translateX(' + offset + 'px)';
+            clones.style.transform = 'translateX(' + (offset + firstWidth) + 'px)';
+            requestAnimationFrame(step);
+        }
+        requestAnimationFrame(step);
+    }
 
-    // 设置不同的初始延迟时间
+    var rowA = [], rowB = [], rowC = [];
-    setTimeout(function() {
+    for (var j = 0; j < unique.length; j++) {
-        row1.classList.add('scrolling');
+        if (j % 3 === 0) rowA.push(unique[j]);
-    }, 0);
+        else if (j % 3 === 1) rowB.push(unique[j]);
-
+        else rowC.push(unique[j]);
-    setTimeout(function() {
+    }
-        row2.classList.add('scrolling');
+    makeRow(rowA, 0.4);
-    }, 500);
+    makeRow(rowB, 0.5);
-
+    makeRow(rowC, 0.6);
-    setTimeout(function() {
-        row3.classList.add('scrolling');
-    }, 1000);
 }
 
 // PC端3D球状技术云