Upload 103 files

前端页面/components/UI交互提示组件.js

@@ -183,7 +183,7 @@ function _setupDialogAccessibility(box, titleId, descriptionId, initialFocusSele
 
     const getFocusable = () => Array.from(box.querySelectorAll(
         'button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])'
-    )).filter(element => !element.closest('[inert], [hidden], [aria-hidden="true"]')
+    )).filter(element => element.tabIndex >= 0 && !element.closest('[inert], [hidden], [aria-hidden="true"]')
         && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden");
 
     const handleKeydown = event => {
@@ -202,17 +202,19 @@ function _setupDialogAccessibility(box, titleId, descriptionId, initialFocusSele
         }
         const first = focusable[0];
         const last = focusable[focusable.length - 1];
-        if (event.shiftKey && (document.activeElement === first || !box.contains(document.activeElement))) {
+        if (event.shiftKey && (document.activeElement === first || !focusable.includes(document.activeElement))) {
             event.preventDefault();
             last.focus();
-        } else if (!event.shiftKey && (document.activeElement === last || !box.contains(document.activeElement))) {
+        } else if (!event.shiftKey && (document.activeElement === last || !focusable.includes(document.activeElement))) {
             event.preventDefault();
             first.focus();
         }
     };
     dialogStack.push(box);
     document.addEventListener("keydown", handleKeydown);
-    const initialFocus = box.querySelector(initialFocusSelector) || getFocusable()[0] || box;
+    const focusable = getFocusable();
+    const requestedFocus = box.querySelector(initialFocusSelector);
+    const initialFocus = focusable.includes(requestedFocus) ? requestedFocus : focusable[0] || box;
     initialFocus.focus();
 
     return {

前端页面/components/全局设置组件.js

@@ -116,6 +116,10 @@ export function createSettingsView() {
     const styleSheet = document.createElement("style");
     styleSheet.textContent = `
         .setting-switch {
+            color: inherit;
+            appearance: none;
+            border: 0;
+            padding: 0;
             position: relative;
             width: 44px;
             height: 24px;
@@ -125,6 +129,10 @@ export function createSettingsView() {
             transition: 0.3s;
             flex-shrink: 0;
         }
+        .setting-switch:focus-visible {
+            outline: 2px solid currentColor;
+            outline-offset: 3px;
+        }
         .setting-switch.active {
             background: #4CAF50;
         }
@@ -277,10 +285,10 @@ export function createSettingsView() {
             <!-- 设置项：界面语言 -->
             <div class="setting-item">
                 <div style="flex: 1;">
-                    <div style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.language')} / Language</div>
+                    <div id="label-language" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.language')} / Language</div>
                     <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.language_desc')} / Select display language</div>
                 </div>
-                <select id="select-language" class="setting-select">
+                <select aria-labelledby="label-language" id="select-language" class="setting-select">
                     ${LANGUAGE_OPTIONS.map(opt => 
                         `<option value="${opt.value}" ${(settings.language || 'zh-CN') === opt.value ? 'selected' : ''}>${opt.label}</option>`
                     ).join('')}
@@ -295,10 +303,10 @@ export function createSettingsView() {
             <!-- 设置项：创作者卡片背景图 -->
             <div class="setting-item">
                 <div style="flex: 1;">
-                    <div style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.creator_banner')}</div>
-                    <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.creator_banner_desc')}</div>
+                    <div id="label-creator-banner" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.creator_banner')}</div>
+                    <div id="desc-creator-banner" style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.creator_banner_desc')}</div>
                 </div>
-                <div id="switch-creator-banner" class="setting-switch ${settings.showCreatorBanner ? 'active' : ''}"></div>
+                <button type="button" role="switch" id="switch-creator-banner" aria-labelledby="label-creator-banner" aria-describedby="desc-creator-banner" class="setting-switch ${settings.showCreatorBanner ? 'active' : ''}"></button>
             </div>
             
             <!-- 分类：更多功能 -->
@@ -309,19 +317,19 @@ export function createSettingsView() {
             <!-- 设置项：榜单切换动画 -->
             <div class="setting-item">
                 <div style="flex: 1;">
-                    <div style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.animations')}</div>
-                    <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.animations_desc')}</div>
+                    <div id="label-animations" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.animations')}</div>
+                    <div id="desc-animations" style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.animations_desc')}</div>
                 </div>
-                <div id="switch-animations" class="setting-switch ${settings.enableAnimations ? 'active' : ''}"></div>
+                <button type="button" role="switch" id="switch-animations" aria-labelledby="label-animations" aria-describedby="desc-animations" class="setting-switch ${settings.enableAnimations ? 'active' : ''}"></button>
             </div>
             
             <!-- 设置项：动画音效 -->
             <div class="setting-item">
                 <div style="flex: 1;">
-                    <div style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.sound')}</div>
-                    <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.sound_desc')}</div>
+                    <div id="label-sound-effects" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.sound')}</div>
+                    <div id="desc-sound-effects" style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.sound_desc')}</div>
                 </div>
-                <div id="switch-sound-effects" class="setting-switch ${settings.enableSoundEffects ? 'active' : ''}"></div>
+                <button type="button" role="switch" id="switch-sound-effects" aria-labelledby="label-sound-effects" aria-describedby="desc-sound-effects" class="setting-switch ${settings.enableSoundEffects ? 'active' : ''}"></button>
             </div>
             
             <!-- 分类：数据与缓存 -->
@@ -332,16 +340,16 @@ export function createSettingsView() {
             <!-- 设置项：缓存刷新间隔（滑条） -->
             <div class="setting-item" style="flex-direction: column; align-items: flex-start; gap: 12px;">
                 <div style="flex: 1; width: 100%;">
-                    <div style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.cache_expire')}</div>
+                    <div id="label-cache-expire" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.cache_expire')}</div>
                     <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.cache_expire_desc')}</div>
                 </div>
                 <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
                     <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
-                        <input type="range" id="slider-cache-expire" class="setting-range-slider"
+                        <input aria-labelledby="label-cache-expire" type="range" id="slider-cache-expire" class="setting-range-slider"
                             value="${settings.cacheExpireSeconds || 7200}"
                             min="60" max="86400" step="60"
                             style="flex: 1;">
-                        <input type="number" id="input-cache-expire" class="setting-number-input"
+                        <input aria-labelledby="label-cache-expire" type="number" id="input-cache-expire" class="setting-number-input"
                             value="${settings.cacheExpireSeconds || 7200}"
                             min="60" max="86400" step="60">
                         <span id="cache-expire-label" style="color: #4CAF50; font-size: 12px; min-width: 55px; white-space: nowrap;"></span>
@@ -404,9 +412,11 @@ export function createSettingsView() {
      */
     function _bindSwitchHandler(selector, settingKey, labelKey, iconOn = '✅') {
         const switchEl = container.querySelector(selector);
+        switchEl.setAttribute("aria-checked", String(switchEl.classList.contains("active")));
         switchEl.onclick = () => {
             const newValue = !switchEl.classList.contains("active");
             switchEl.classList.toggle("active", newValue);
+            switchEl.setAttribute("aria-checked", String(newValue));
             const currentSettings = getSettings();
             currentSettings[settingKey] = newValue;
             saveSettings(currentSettings);
@@ -421,8 +431,15 @@ export function createSettingsView() {
     
     // 🌐 下拉控制：界面语言
     const selectLanguage = container.querySelector("#select-language");
+    let languageTimer = null;
+    let languageGeneration = 0;
     selectLanguage.onchange = () => {
+        if (cacheViewDisposed || !container.isConnected) return;
         const newLang = selectLanguage.value;
+        if (!LANGUAGE_OPTIONS.some(option => option.value === newLang)) return;
+        const generation = ++languageGeneration;
+        clearTimeout(languageTimer);
+        languageTimer = null;
         
         const currentSettings = getSettings();
         currentSettings.language = newLang;
@@ -430,19 +447,28 @@ export function createSettingsView() {
         
         // 同步到 i18n 模块
         setLanguage(newLang);
+        if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) return;
         
         const langName = LANGUAGE_OPTIONS.find(opt => opt.value === newLang)?.label || newLang;
         showToast(`🌐 ${t('settings.language_changed')} ${langName.split(' / ')[0]}`, "success");
         
-        // 🔄 通过路由系统刷新，保持 activeInlineView 同步
-        setTimeout(() => {
-            // 先返回主页
-            window.dispatchEvent(new CustomEvent("comfy-route-back"));
-            // 再重新打开设置页
-            setTimeout(() => {
-                const newSettingsView = createSettingsView();
-                window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view: newSettingsView } }));
-            }, 50);
+        languageTimer = setTimeout(() => {
+            languageTimer = null;
+            if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) return;
+            const restoreFocus = document.activeElement === selectLanguage;
+            const newSettingsView = createSettingsView();
+            if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) {
+                newSettingsView._cleanup?.();
+                return;
+            }
+            window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view: newSettingsView } }));
+            if (!newSettingsView.isConnected) {
+                newSettingsView._cleanup?.();
+                return;
+            }
+            if (restoreFocus && (document.activeElement === document.body || document.activeElement === selectLanguage)) {
+                newSettingsView.querySelector("#select-language")?.focus({ preventScroll: true });
+            }
         }, 100);
     };
     
@@ -520,6 +546,9 @@ export function createSettingsView() {
     container._cleanup = () => {
         if (cacheViewDisposed) return;
         cacheViewDisposed = true;
+        languageGeneration++;
+        clearTimeout(languageTimer);
+        languageTimer = null;
         statsGeneration++;
         statsController?.abort();
         statsController = null;

前端页面/components/性能优化工具.js

@@ -574,10 +574,23 @@ export function lazyLoadImages(container, selector = "img") {
  */
 export function debounce(fn, delay = 300) {
     let timer = null;
-    return function(...args) {
-        if (timer) clearTimeout(timer);
-        timer = setTimeout(() => fn.apply(this, args), delay);
+    let generation = 0;
+    const debounced = function(...args) {
+        const current = ++generation;
+        if (timer !== null) clearTimeout(timer);
+        timer = setTimeout(() => {
+            if (current !== generation) return;
+            timer = null;
+            fn.apply(this, args);
+        }, delay);
     };
+    debounced.cancel = () => {
+        generation++;
+        const pending = timer;
+        timer = null;
+        if (pending !== null) clearTimeout(pending);
+    };
+    return debounced;
 }
 
 /**
@@ -1012,10 +1025,14 @@ export function createVirtualScroller(options) {
     };
     
     // 窗口尺寸变化
-    const handleResize = debounce(() => {
+    const resizeDebounce = debounce(() => {
+        if (_isDestroyed) return;
         _containerHeight = container.clientHeight;
         render();
     }, 200);
+    const handleResize = () => {
+        if (!_isDestroyed) resizeDebounce();
+    };
     
     // 初始化
     const init = () => {
@@ -1027,6 +1044,7 @@ export function createVirtualScroller(options) {
     // 销毁
     const destroy = () => {
         _isDestroyed = true;
+        resizeDebounce.cancel();
         container.removeEventListener("scroll", handleScroll);
         window.removeEventListener("resize", handleResize);
         if (rafId) cancelAnimationFrame(rafId);

前端页面/core/侧边栏主程序.js

@@ -305,6 +305,15 @@ export function buildSidebarDOM() {
         const generation = listNavigationGeneration;
         return () => !activeInlineView && generation === listNavigationGeneration;
     };
+    container._captureListNavigation = () => {
+        const navigationCurrent = captureListNavigation();
+        const renderToken = getRenderToken();
+        const controls = Array.from(sortContainer.querySelectorAll('input, select'), control => [control, control.value]);
+        const focusedElement = document.activeElement;
+        return () => navigationCurrent() && renderToken === getRenderToken()
+            && document.activeElement === focusedElement
+            && controls.every(([control, value]) => control.value === value);
+    };
     const releaseInlineView = () => {
         if (!activeInlineView) return;
         const view = activeInlineView;
@@ -334,6 +343,7 @@ export function buildSidebarDOM() {
         sortContainer.style.display = "flex"; 
         contentBoxWrapper.style.display = "flex";
         footerContainer.style.display = "block"; // 【核心】：返回列表时恢复底部
+        container._onListReturn?.();
     };
 
     _onSidebarWindow("comfy-route-view", (e) => {
@@ -490,11 +500,17 @@ export function buildSidebarDOM() {
     let currentTab = tabs.some(tab => tab.id === savedTab) ? savedTab : tabs[0].id;
     let currentSort = Store.load("activeSort", "time");
     let currentRenderToken = 0;
+    let sidebarDisposed = false;
+    let searchDebounce = null;
     const getRenderToken = () => currentRenderToken;
     _sidebarListCleanup = () => {
+        sidebarDisposed = true;
         currentRenderToken++;
-        try { disposeSidebarContent(contentArea); }
-        finally { cleanupImageSandbox(contentArea); }
+        try { searchDebounce?.cancel(); }
+        finally {
+            try { disposeSidebarContent(contentArea); }
+            finally { cleanupImageSandbox(contentArea); }
+        }
     };
     const syncTabsA11y = () => {
         const selectedTab = tabs.find(tab => tab.id === currentTab) || tabs[0];
@@ -509,7 +525,8 @@ export function buildSidebarDOM() {
     };
 
     const triggerLoad = (forceRefresh = false) => {
-        currentRenderToken++; 
+        if (sidebarDisposed) return;
+        currentRenderToken++;
         loadSidebarContent({
             tab: currentTab, sort: currentSort,
             keyword: sortContainer.querySelector("#hub-search-input").value.trim().toLowerCase(),
@@ -576,6 +593,8 @@ export function buildSidebarDOM() {
             triggerLoad();
         };
         btn.addEventListener("keydown", (event) => {
+            if (event.defaultPrevented || event.isComposing || event.keyCode === 229 || event.repeat
+                || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) return;
             const currentIndex = tabs.findIndex(item => item.id === tab.id);
             let nextIndex = currentIndex;
             if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
@@ -584,6 +603,7 @@ export function buildSidebarDOM() {
             else if (event.key === "End") nextIndex = tabs.length - 1;
             else return;
             event.preventDefault();
+            event.stopPropagation();
             const nextButton = tabsContainer.querySelector(`[data-tab-id="${tabs[nextIndex].id}"]`);
             nextButton?.focus();
             nextButton?.click();
@@ -658,9 +678,12 @@ export function buildSidebarDOM() {
     sortContainer.querySelector("#hub-sort-select").onchange = (e) => { currentSort = e.target.value; Store.save("activeSort", currentSort); triggerLoad(); };
     
     // 🔍 搜索防抖：300ms 延迟，避免每次按键都发起网络请求
-    sortContainer.querySelector("#hub-search-input").oninput = debounce(() => {
+    searchDebounce = debounce(() => {
         triggerLoad();
     }, 300);
+    sortContainer.querySelector("#hub-search-input").oninput = () => {
+        if (!sidebarDisposed) searchDebounce();
+    };
     
     // 🎯 任务榜筛选控件事件绑定
     sortContainer.querySelector("#task-status-filter").onchange = () => {

前端页面/core/侧边栏入口注册.js

@@ -15,67 +15,137 @@ let pendingLanguageRefresh = false;
 /**
  * 动态加载侧边栏功能模块并构建 DOM
  */
-async function ensureSidebarDOM() {
+async function ensureSidebarDOM(isCurrent = () => true) {
     const { buildSidebarDOM } = await import('./侧边栏主程序.js');
-    return buildSidebarDOM();
+    return isCurrent() ? buildSidebarDOM() : null;
 }
 
 app.registerExtension({
     name: "Comfy.CommunityLeaderboardSidebar",
     async setup(app) {
+        const { t, initI18n } = await import('../components/用户体验_国际化.js');
+        initI18n();
+        let registeredTab = null;
+        let initialSidebarLoad = null;
+        let renderRevision = 0;
+        let renderOwnerCurrent = () => false;
+        let languageRevision = 0;
+        let refreshTimer = null;
+        let refreshInProgress = false;
+        let refreshQueued = null;
+        const queueLanguageRefresh = request => {
+            if (refreshInProgress) {
+                refreshQueued = request;
+                return;
+            }
+            if (refreshTimer !== null) clearTimeout(refreshTimer);
+            const { target, previous, revision, navigationCurrent } = request;
+            refreshTimer = setTimeout(async () => {
+                refreshTimer = null;
+                refreshInProgress = true;
+                refreshQueued = null;
+                const isOwnerCurrent = () => pendingLanguageRefresh && revision === languageRevision
+                    && target === globalSidebarContainer && previous === globalSidebarDOM
+                    && target.isConnected && target.contains(previous);
+                const isCurrent = () => isOwnerCurrent() && navigationCurrent();
+                try {
+                    if (!isCurrent()) return;
+                    const next = await ensureSidebarDOM(isCurrent);
+                    if (!next || !isOwnerCurrent()) return;
+                    globalSidebarDOM = next;
+                    bindLanguageRefresh(next);
+                    target.replaceChildren(next);
+                    pendingLanguageRefresh = false;
+                } catch {
+                    if (isOwnerCurrent()) console.error('Sidebar language refresh failed');
+                } finally {
+                    refreshInProgress = false;
+                    const queued = refreshQueued;
+                    refreshQueued = null;
+                    if (queued && pendingLanguageRefresh) queueLanguageRefresh(queued);
+                }
+            }, 50);
+        };
+        const scheduleLanguageRefresh = () => {
+            if (!pendingLanguageRefresh || !globalSidebarContainer) return;
+            const previous = globalSidebarDOM;
+            queueLanguageRefresh({
+                target: globalSidebarContainer,
+                previous,
+                revision: languageRevision,
+                navigationCurrent: previous?._captureListNavigation?.() ?? (() => true)
+            });
+        };
+        const bindLanguageRefresh = root => {
+            root._onListReturn = () => {
+                if (root === globalSidebarDOM) scheduleLanguageRefresh();
+            };
+        };
         // 语言切换事件 - 标记需要刷新
         document.addEventListener('comfy-language-change', () => {
             pendingLanguageRefresh = true;
+            languageRevision++;
+            if (registeredTab) {
+                const title = t('nav.community');
+                const tabs = app.extensionManager?.getSidebarTabs?.();
+                const currentTab = Array.isArray(tabs)
+                    ? tabs.find(tab => tab.id === registeredTab.id) : null;
+                if (currentTab) currentTab.title = title;
+                registeredTab.title = title;
+            }
         });
         
         // 返回主界面时，如果有语言切换则刷新
-        window.addEventListener('comfy-route-back', async () => {
-            if (pendingLanguageRefresh && globalSidebarContainer) {
-                pendingLanguageRefresh = false;
-                setTimeout(async () => {
-                    try {
-                        globalSidebarDOM = await ensureSidebarDOM();
-                        globalSidebarContainer.innerHTML = '';
-                        globalSidebarContainer.appendChild(globalSidebarDOM);
-                    } catch (e) {
-                        console.error('侧边栏刷新失败:', e);
-                    }
-                }, 50);
-            }
-        });
+        window.addEventListener('comfy-route-back', scheduleLanguageRefresh);
 
         // 注册侧边栏 Tab
         if (app.extensionManager && app.extensionManager.registerSidebarTab) {
-            app.extensionManager.registerSidebarTab({
+            registeredTab = {
                 id: "comfyui-ranking-sidebar",
                 order: 20, // 侧边栏排序规则：数字小的排前面（由 NodeCraft AI 的侧边栏排序器统一排序）
-                title: "社区精选",
+                title: t('nav.community'),
                 icon: "pi pi-trophy",
                 type: "custom",
                 render: async (container) => {
-                    
+                    const revision = ++renderRevision;
+                    const connectedAtStart = container.isConnected;
                     globalSidebarContainer = container;
+                    const isCurrent = () => {
+                        const sidebar = app.extensionManager?.sidebarTab;
+                        const activeId = (sidebar?.value ?? sidebar)?.activeSidebarTabId;
+                        return revision === renderRevision && container === globalSidebarContainer
+                            && (!connectedAtStart || container.isConnected)
+                            && (!activeId || activeId === registeredTab.id);
+                    };
+                    renderOwnerCurrent = isCurrent;
+                    if (!isCurrent()) return;
                     try {
                         if (!globalSidebarDOM) {
-                            globalSidebarDOM = await ensureSidebarDOM();
+                            if (!initialSidebarLoad) {
+                                initialSidebarLoad = ensureSidebarDOM(() => renderOwnerCurrent())
+                                    .then(root => {
+                                        if (root) globalSidebarDOM = root;
+                                    })
+                                    .finally(() => { initialSidebarLoad = null; });
+                            }
+                            await initialSidebarLoad;
                         }
+                        if (!isCurrent() || !globalSidebarDOM) return;
+                        bindLanguageRefresh(globalSidebarDOM);
                         container.innerHTML = '';
                         container.appendChild(globalSidebarDOM);
-                    } catch (e) {
-                        console.error('侧边栏功能加载失败:', e);
+                    } catch {
+                        if (!isCurrent()) return;
+                        console.error('侧边栏功能加载失败');
                         const failure = document.createElement("div");
                         failure.setAttribute("role", "alert");
                         failure.style.cssText = "text-align:center; padding:40px; color:#F44336;";
-                        try {
-                            const { t } = await import("../components/用户体验增强.js");
-                            failure.textContent = `⚠️ ${t('common.sidebar_load_failed')}`;
-                        } catch {
-                            failure.textContent = "⚠️";
-                        }
+                        failure.textContent = `⚠️ ${t('common.sidebar_load_failed')}`;
                         container.replaceChildren(failure);
                     }
                 }
-            });
+            };
+            app.extensionManager.registerSidebarTab(registeredTab);
         }
     }
 });

前端页面/core/侧边栏数据引擎.js

@@ -197,6 +197,7 @@ export async function loadSidebarContent({
 
         // 首次渲染清空容器
         if (!append) {
+            disposeSidebarContent(contentArea);
             contentArea.innerHTML = "";
             state.displayedCount = 0;
         }
@@ -382,7 +383,6 @@ export async function loadSidebarContent({
                         }
 
                         // 完整重新渲染（替代之前只更新数字的方案）
-                        contentArea.innerHTML = "";
                         // 🔧 先过滤再切片：搜索场景下静默刷新同样会触发，
                         // 原实现在 newData 前 20 条里过滤，会漏掉靠后的匹配项
                         const scopedNewData = _applySearchScope(newData);
@@ -478,6 +478,7 @@ export async function loadSidebarContent({
 
     // ========== 显示加载骨架屏（已有本地数据上屏时跳过，避免闪屏）==========
     if (!renderedInstant) {
+        disposeSidebarContent(contentArea);
         contentArea.innerHTML = "";
         const skeleton = createSkeleton(tab === "creators" ? "list" : "card", 3);
         contentArea.appendChild(skeleton);

前端页面/social/私信聊天组件.js

@@ -470,10 +470,12 @@ export async function loadChatUnreadCount(currentUser, chatBtn) {
     if (!currentUser?.account || !chatBtn?.querySelector("#chat-unread-badge")) return 0;
     try {
         const res = await api.getChatList(currentUser.account);
-        const list = Array.isArray(res?.data) ? res.data : [];
+        if (res?.status !== "success" || !Array.isArray(res.data)
+            || res.data.some(chat => !chat || !Number.isSafeInteger(chat.unread_count) || chat.unread_count < 0)) return 0;
+        const list = res.data;
         const total = list.reduce((sum, chat) => Math.min(Number.MAX_SAFE_INTEGER,
             sum + validUnreadCount(chat?.unread_count)), 0);
         if (!update.isCurrent()) return 0;
         update.render(total); return total;
-    } catch (_) { update.render(0); return 0; }
+    } catch (_) { return 0; }
 }

前端页面/social/通知中心组件.js

@@ -1,5 +1,5 @@
 // 前端页面/social/通知中心组件.js
-import { createUnreadBadgeUpdate, validUnreadCount } from "./未读角标工具.js";
+import { createUnreadBadgeUpdate } from "./未读角标工具.js";
 import { api, captureRequestSession, requestCancelManager } from "../core/网络请求API.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { showToast, showConfirm } from "../components/UI交互提示组件.js";
@@ -274,14 +274,7 @@ export async function openNotificationCenter(currentUser, bellBtn) {
             && (msg.created_at >= 1e12 ? msg.created_at : msg.created_at * 1000) > clearTime)
             .map(msg => ({ ...msg })).sort((a, b) => b.created_at - a.created_at);
         renderMsgList(messages);
-        if (validUnreadCount(res.unread_count) > 0 && scope.isCurrent()) {
-            const result = await api.markMessagesRead(currentUser.account);
-            if (scope.isCurrent() && result?.status === 'success') {
-                messages.forEach(msg => { msg.is_read = true; }); renderMsgList(messages);
-                // 独立刷新以避免标记已读的旧响应覆盖另一轮角标读取。
-                void loadUnreadCount(currentUser, bellBtn);
-            }
-        }
+        if (scope.isCurrent()) void loadUnreadCount(currentUser, bellBtn);
     } catch (_) { if (scope.isCurrent() && messages.length === 0) listArea.innerHTML = `<div class="notification-status" role="alert">${t('common.error')}</div>`; }
 
 }
@@ -291,6 +284,8 @@ export async function loadUnreadCount(currentUser, bellBtn) {
     if (!currentUser?.account || !bellBtn?.querySelector("#unread-badge")) return;
     try {
         const res = await api.getUnreadCount(currentUser.account);
-        update.render(validUnreadCount(res?.unread_count));
-    } catch (_) { update.render(0); }
+        if (res?.status === "success" && Number.isSafeInteger(res.unread_count) && res.unread_count >= 0) {
+            update.render(res.unread_count);
+        }
+    } catch (_) {}
 }

前端页面/styles/主题基础.css

@@ -99,6 +99,7 @@
 
 .comfy-ranking-root .hub-tablist {
     display: flex;
+    flex-wrap: wrap;
     flex: 0 0 auto;
     min-width: 0;
     padding: 10px 10px 0;
@@ -447,9 +448,15 @@
 }
 
 .comfy-ranking-root .hub-tab-btn {
-    flex: 1 1 0;
-    padding: 8px;
+    flex: 1 1 auto;
+    min-width: min(64px, 100%);
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: 8px 4px;
+    white-space: normal;
+    overflow-wrap: anywhere;
     border: 0;
+    border-bottom: 2px solid transparent;
     border-radius: var(--rk-radius-sm) var(--rk-radius-sm) 0 0;
     background: rgb(0 0 0 / 15%);
     color: var(--tab-inactive, var(--rk-muted));
@@ -457,7 +464,7 @@
     font-weight: 700;
     text-shadow: 0 1px 2px rgb(0 0 0 / 80%), 0 0 4px rgb(0 0 0 / 60%), 1px 1px 3px rgb(0 0 0 / 50%);
     cursor: pointer;
-    transition: all .2s ease;
+    transition: background-color .2s ease, color .2s ease, text-shadow .2s ease;
 }
 
 .comfy-ranking-root .hub-tab-btn::before {