Add files via upload

Author: Mr-xn

frontend/js/favorites.js

@@ -420,14 +420,15 @@ export function renderFavoritesList(filterText) {
     const builtin = _getBuiltinTags();
 
     listEl.innerHTML = favorites.map((f, i) => {
-        // 仅前 12 项应用 staggered 渐入，避免长列表动画开销
+        // 仅前 12 项应用 staggered 渐入，后续项禁用动画，避免长列表合成层开销
         const delay = i < 12 ? ` style="animation-delay:${(i * 24).toFixed(0)}ms"` : '';
+        const animClass = i < 12 ? '' : ' fav-item-no-anim';
         if (f.system) {
             const sysTags = Array.isArray(f.tags) && f.tags.length
                 ? `<div class="fav-sys-tags">${f.tags.slice(0, 4).map(t => `<span class="fav-tag-ro">#${escapeHtml(t)}</span>`).join('')}</div>`
                 : '';
             return `
-            <div class="fav-item fav-system" data-index="${i}"${delay}>
+            <div class="fav-item fav-system${animClass}" data-index="${i}"${delay}>
                 <div class="fav-item-main">
                     <div class="fav-sys-head">
                         <span class="fav-sys-name">${escapeHtml(f.name || '未命名规则')}</span>
@@ -442,7 +443,7 @@ export function renderFavoritesList(filterText) {
             </div>`;
         }
         return `
-        <div class="fav-item" data-index="${i}"${delay}>
+        <div class="fav-item${animClass}" data-index="${i}"${delay}>
             <div class="fav-item-main">
                 <div class="fav-name-row">
                     <span class="fav-name" data-name-index="${i}" title="点击编辑别名">${escapeHtml(f.name || f.baseQuery)}</span>

frontend/js/main.js

@@ -1005,29 +1005,53 @@ document.addEventListener('DOMContentLoaded', async () => {
     const tableWrapper = document.getElementById('tableWrapper');
     const scrollShadow = document.getElementById('tableScrollShadow');
     if (tableContainer && scrollShadow) {
+        let tableScrollWidth = 0;
+        let tableClientWidth = 0;
+        let scrollShadowFrame = null;
+
+        const refreshScrollShadowMetrics = () => {
+            tableScrollWidth = tableContainer.scrollWidth;
+            tableClientWidth = tableContainer.clientWidth;
+        };
+
         const updateScrollShadow = () => {
             // 仅在表格可见时检测
             if (tableWrapper && tableWrapper.style.display === 'none') {
                 scrollShadow.classList.remove('visible');
                 return;
             }
-            // 检测是否有横向溢出且未滚动到最右侧
-            const hasOverflow = tableContainer.scrollWidth > tableContainer.clientWidth + 1;
-            const isAtEnd = tableContainer.scrollLeft + tableContainer.clientWidth >= tableContainer.scrollWidth - 4;
+            // scroll 期间只读 scrollLeft，宽度指标由内容变化/窗口变化时刷新，避免强制同步布局
+            const hasOverflow = tableScrollWidth > tableClientWidth + 1;
+            const isAtEnd = tableContainer.scrollLeft + tableClientWidth >= tableScrollWidth - 4;
             if (hasOverflow && !isAtEnd) {
                 scrollShadow.classList.add('visible');
             } else {
                 scrollShadow.classList.remove('visible');
             }
         };
-        tableContainer.addEventListener('scroll', updateScrollShadow, { passive: true });
+
+        const scheduleScrollShadowUpdate = () => {
+            if (scrollShadowFrame !== null) return;
+            scrollShadowFrame = requestAnimationFrame(() => {
+                scrollShadowFrame = null;
+                updateScrollShadow();
+            });
+        };
+
+        const refreshAndScheduleScrollShadowUpdate = () => {
+            refreshScrollShadowMetrics();
+            scheduleScrollShadowUpdate();
+        };
+
+        refreshAndScheduleScrollShadowUpdate();
+        tableContainer.addEventListener('scroll', scheduleScrollShadowUpdate, { passive: true });
         // 使用 MutationObserver 监听表格内容变化
         const observer = new MutationObserver(() => {
-            setTimeout(updateScrollShadow, 150);
+            setTimeout(refreshAndScheduleScrollShadowUpdate, 150);
         });
         observer.observe(tableContainer, { childList: true, subtree: true, characterData: true });
         // 窗口大小变化时重新检测
-        window.addEventListener('resize', updateScrollShadow, { passive: true });
+        window.addEventListener('resize', refreshAndScheduleScrollShadowUpdate, { passive: true });
     }
 
     // 点击外部关闭建议

frontend/js/results.js

@@ -17,59 +17,56 @@ export function setFetchResults(fn) {
 let resizing = null;
 let startX = 0;
 let startWidth = 0;
+let resizeCells = [];
 
 function initColumnResize() {
-    const table = document.querySelector('table');
-    if (!table) return;
-
-    // 移除旧的事件监听器
-    document.removeEventListener('mousemove', handleResize);
-    document.removeEventListener('mouseup', stopResize);
-
-    // 添加新的事件监听器
-    document.addEventListener('mousemove', handleResize);
-    document.addEventListener('mouseup', stopResize);
+    // 列宽拖动由 inline onmousedown 触发，mousemove/mouseup 仅在拖动期间绑定。
 }
 
 function startResize(e, th) {
     e.preventDefault();
     e.stopPropagation();
-    
+
     resizing = th;
     startX = e.clientX;
     startWidth = th.offsetWidth;
-    
+
+    const thIndex = Array.from(th.parentElement.children).indexOf(th);
+    const table = th.closest('table');
+    resizeCells = table ? Array.from(table.querySelectorAll(`tbody tr td:nth-child(${thIndex + 1})`)) : [];
+
     th.querySelector('.resize-handle')?.classList.add('active');
     document.body.style.cursor = 'col-resize';
     document.body.style.userSelect = 'none';
+
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', stopResize);
 }
 
 function handleResize(e) {
     if (!resizing) return;
-    
+
     const diff = e.clientX - startX;
     const newWidth = Math.max(80, startWidth + diff);
     resizing.style.width = `${newWidth}px`;
     resizing.style.minWidth = `${newWidth}px`;
     resizing.style.maxWidth = `${newWidth}px`;
-    
-    // 同步调整对应列的 td 宽度
-    const thIndex = Array.from(resizing.parentElement.children).indexOf(resizing);
-    const table = resizing.closest('table');
-    if (table) {
-        table.querySelectorAll(`tbody tr td:nth-child(${thIndex + 1})`).forEach(td => {
-            td.style.maxWidth = `${newWidth}px`;
-        });
-    }
+
+    resizeCells.forEach(td => {
+        td.style.maxWidth = `${newWidth}px`;
+    });
 }
 
 function stopResize() {
     if (resizing) {
         resizing.querySelector('.resize-handle')?.classList.remove('active');
         resizing = null;
     }
+    resizeCells = [];
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
+    document.removeEventListener('mousemove', handleResize);
+    document.removeEventListener('mouseup', stopResize);
 }
 
 // ==================== IPv6 地址检测 ====================