Upload 95 files

前端页面/auth/用户注册登录组件.js

@@ -2,10 +2,13 @@ import { renderLoginForm } from "./登录表单组件.js";
 import { renderRegisterForm } from "./注册表单组件.js";
 import { renderResetForm } from "./重置密码表单组件.js";
 import { renderRecoverForm } from "./找回账号表单组件.js";
+import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
 
 export function createAuthView(onSuccessCallback) {
     const container = document.createElement("div");
+    let disposed = false, generation = 0, mounted = false, busy = false;
+    let observer;
     // 🔧 自适应高度：flex 填充剩余空间，内容超出时在容器内部滚动（与主界面保持一致）
     Object.assign(container.style, { 
         display: "flex", flexDirection: "column", gap: "15px", color: "#ccc", 
@@ -22,30 +25,59 @@ export function createAuthView(onSuccessCallback) {
     `;
     
     container.querySelector("#btn-back-auth").onclick = () => {
+        container._cleanup();
         window.dispatchEvent(new CustomEvent("comfy-route-back"));
     };
 
     const formContainer = container.querySelector("#auth-form-container");
 
+    const releaseForm = () => {
+        formContainer.querySelectorAll('input, textarea').forEach(input => { input.value = ''; });
+        const cleanup = formContainer._onCleanup; formContainer._onCleanup = null;
+        try { cleanup?.(); } catch (_) {}
+    };
+    container._cleanup = () => {
+        if (disposed) return;
+        disposed = true; generation++; busy = false;
+        observer?.disconnect(); releaseForm();
+    };
     const switchView = (viewState, options = {}) => {
-        // 🔧 定时器清理：切换视图前执行上一个表单注册的清理函数（如验证码倒计时），防止内存泄漏
-        if (typeof formContainer._onCleanup === "function") {
-            formContainer._onCleanup();
-            formContainer._onCleanup = null;
-        }
+        if (disposed) return;
+        releaseForm(); generation++; busy = false;
+        const currentGeneration = generation;
+        const current = () => !disposed && generation === currentGeneration && container.isConnected;
+        const submit = async formData => {
+            if (!current() || busy) return;
+            busy = true;
+            const button = formContainer.querySelector('button[id^="btn-submit"]');
+            if (button) { button.disabled = true; button.setAttribute('aria-busy', 'true'); }
+            try { await onSuccessCallback?.(formData, { isCurrent: current }); }
+            catch (_) { if (current()) showToast(t('common.error'), 'error'); }
+            finally {
+                if (current()) {
+                    busy = false;
+                    if (button) { button.disabled = false; button.setAttribute('aria-busy', 'false'); }
+                }
+            }
+        };
         formContainer.innerHTML = ""; 
         if (viewState === "login") {
-            renderLoginForm(formContainer, switchView, onSuccessCallback);
+            renderLoginForm(formContainer, switchView, submit);
         } else if (viewState === "register") {
-            renderRegisterForm(formContainer, switchView, onSuccessCallback);
+            renderRegisterForm(formContainer, switchView, submit);
         } else if (viewState === "reset") {
-            renderResetForm(formContainer, switchView, onSuccessCallback, options.prefill);
+            renderResetForm(formContainer, switchView, submit, options.prefill);
         } else if (viewState === "recover") {
             renderRecoverForm(formContainer, switchView);
         }
     };
 
-    switchView("login"); 
+    switchView("login");
+    observer = new MutationObserver(() => {
+        if (container.isConnected) mounted = true;
+        else if (mounted) container._cleanup();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
     
     return container;
 }

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

@@ -25,6 +25,14 @@ import { escapeHtml } from "../core/全局配置.js";
 // Toast 队列管理（避免重叠）
 let toastQueue = [];
 let toastOffset = 50;
+let dialogInstanceId = 0;
+const dialogStack = [];
+
+function repositionToasts() {
+    toastQueue.forEach((toast, index) => {
+        toast.style.top = `${toastOffset + index * 60}px`;
+    });
+}
 
 /**
  * 显示 Toast 消息提示
@@ -34,63 +42,35 @@ let toastOffset = 50;
  */
 export function showToast(message, type = "info", duration = 3000) {
     const toast = document.createElement("div");
-    const colors = { 
-        success: "#4CAF50", 
-        error: "#F44336", 
-        info: "#2196F3", 
-        warning: "#FF9800" 
-    };
-    const icons = { 
-        success: "✅", 
-        error: "❌", 
-        info: "ℹ️", 
-        warning: "⚠️" 
-    };
-    
-    // 计算位置（避免重叠）
-    const topPosition = toastOffset + toastQueue.length * 60;
-    
-    Object.assign(toast.style, {
-        position: "fixed", 
-        top: `${topPosition - 30}px`, 
-        left: "50%", 
-        transform: "translateX(-50%)",
-        background: colors[type] || colors.info, 
-        color: "#fff", 
-        padding: "12px 24px",
-        borderRadius: "8px", 
-        fontSize: "14px", 
-        fontWeight: "500", 
-        zIndex: "10000",
-        boxShadow: "0 4px 20px rgba(0,0,0,0.3)", 
-        opacity: "0", 
-        transition: "all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)",
-        pointerEvents: "auto", 
-        display: "flex", 
-        alignItems: "center", 
-        gap: "10px",
-        maxWidth: "400px",
-        wordBreak: "break-word"
-    });
+    const safeType = ["success", "error", "warning", "info"].includes(type) ? type : "info";
+    toast.className = `comfy-ranking-toast comfy-ranking-toast--${safeType}`;
+    toast.setAttribute("role", type === "error" ? "alert" : "status");
+    toast.setAttribute("aria-live", safeType === "error" ? "assertive" : "polite");
+    toast.setAttribute("aria-atomic", "true");
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    if (reduceMotion) toast.classList.add("comfy-ranking-toast--reduced-motion");
+    // 新提示从目标位置上方滑入；关闭后再按当前队列位置重排。
+    toast.style.top = `${toastOffset + toastQueue.length * 60 - 30}px`;
 
     // 提示文本统一转义：message 常携带昵称/标题/后端报错等用户可控内容，
     // 全库无任何调用方故意向 showToast 传 HTML 标签，故无条件转义不会改变现有显示效果。
+    const icons = { success: "✅", error: "❌", info: "ℹ️", warning: "⚠️" };
     toast.innerHTML = `
-        <span style="font-size: 16px;">${icons[type] || icons.info}</span>
-        <span style="flex: 1;">${escapeHtml(message)}</span>
-        <span class="toast-close" style="cursor: pointer; opacity: 0.7; font-size: 18px; margin-left: 8px;">×</span>
+        <span class="comfy-ranking-toast__icon" aria-hidden="true">${icons[safeType]}</span>
+        <span class="comfy-ranking-toast__message">${escapeHtml(message)}</span>
+        <button type="button" class="toast-close comfy-ranking-toast__close" aria-label="${escapeHtml(t('common.close'))}">×</button>
     `;
     
     document.body.appendChild(toast);
     toastQueue.push(toast);
     
     // 点击关闭
-    toast.querySelector(".toast-close").onclick = () => closeToast(toast);
+    toast.querySelector(".toast-close").addEventListener("click", () => closeToast(toast));
     
     // 入场动画
     requestAnimationFrame(() => {
         toast.style.opacity = "1";
-        toast.style.top = `${topPosition}px`;
+        repositionToasts();
     });
 
     // 自动关闭
@@ -99,16 +79,17 @@ export function showToast(message, type = "info", duration = 3000) {
 }
 
 function closeToast(toast) {
+    if (!toast?.isConnected || toast.classList.contains("comfy-ranking-toast--closing")) return;
     if (toast._autoCloseTimer) clearTimeout(toast._autoCloseTimer);
     
-    toast.style.opacity = "0";
-    toast.style.transform = "translateX(-50%) translateY(-20px)";
+    toast.classList.add("comfy-ranking-toast--closing");
     
     setTimeout(() => {
         toast.remove();
         const idx = toastQueue.indexOf(toast);
         if (idx > -1) toastQueue.splice(idx, 1);
-    }, 300);
+        repositionToasts();
+    }, window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 300);
 }
 
 
@@ -124,12 +105,9 @@ function closeToast(toast) {
  */
 function _createDialogOverlay(bgOpacity = 0.6, blurPx = 3) {
     const overlay = document.createElement("div");
-    Object.assign(overlay.style, {
-        position: "fixed", top: "0", left: "0", width: "100vw", height: "100vh",
-        background: `rgba(0,0,0,${bgOpacity})`, zIndex: "10001", display: "flex",
-        alignItems: "center", justifyContent: "center", backdropFilter: `blur(${blurPx}px)`,
-        opacity: "0", transition: "opacity 0.2s"
-    });
+    overlay.className = "comfy-ranking-dialog-overlay";
+    overlay.style.setProperty("--dialog-overlay-opacity", String(bgOpacity));
+    overlay.style.setProperty("--dialog-blur", `${blurPx}px`);
     return overlay;
 }
 
@@ -144,16 +122,16 @@ function _createDialogOverlay(bgOpacity = 0.6, blurPx = 3) {
  * @param {string} [transformOrigin] - 变换基点（影响初始 transform）
  * @returns {HTMLElement}
  */
-function _createDialogBox({ width = "360px", background = "#222", borderRadius = "12px", padding = "24px", boxShadow = "0 10px 40px rgba(0,0,0,0.5)", gap = "16px", hasYTranslate = true } = {}) {
+function _createDialogBox({ width = "360px", background = "var(--comfy-menu-bg, #222)", borderRadius = "12px", padding = "24px", boxShadow = "0 10px 40px rgba(0,0,0,0.5)", gap = "16px", hasYTranslate = true } = {}) {
     const box = document.createElement("div");
-    const initTransform = hasYTranslate ? "scale(0.9) translateY(-20px)" : "scale(0.9)";
-    Object.assign(box.style, {
-        background, border: "1px solid #444", borderRadius,
-        padding, width, maxWidth: "90vw", color: "#fff",
-        boxShadow,
-        display: "flex", flexDirection: "column", gap,
-        transform: initTransform, transition: "transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)"
-    });
+    box.className = "comfy-ranking-dialog";
+    box.dataset.motion = hasYTranslate ? "translate" : "scale";
+    box.style.setProperty("--dialog-width", width);
+    box.style.setProperty("--dialog-background", background);
+    box.style.setProperty("--dialog-radius", borderRadius);
+    box.style.setProperty("--dialog-padding", padding);
+    box.style.setProperty("--dialog-shadow", boxShadow);
+    box.style.setProperty("--dialog-gap", gap);
     return box;
 }
 
@@ -164,6 +142,11 @@ function _createDialogBox({ width = "360px", background = "#222", borderRadius =
  * @param {boolean} hasYTranslate - 是否包含 Y 轴位移
  */
 function _showDialogAnimation(overlay, box, hasYTranslate = true) {
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+        overlay.style.opacity = "1";
+        box.style.transform = hasYTranslate ? "scale(1) translateY(0)" : "scale(1)";
+        return;
+    }
     requestAnimationFrame(() => {
         overlay.style.opacity = "1";
         box.style.transform = hasYTranslate ? "scale(1) translateY(0)" : "scale(1)";
@@ -178,11 +161,75 @@ function _showDialogAnimation(overlay, box, hasYTranslate = true) {
  * @param {Function} [callback] - 关闭完成后的回调
  */
 function _closeDialog(overlay, box, hasYTranslate = true, callback) {
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    if (reduceMotion) {
+        overlay.style.transition = "none";
+        box.style.transition = "none";
+    }
     overlay.style.opacity = "0";
     box.style.transform = hasYTranslate ? "scale(0.9) translateY(-20px)" : "scale(0.9)";
-    setTimeout(() => { overlay.remove(); if (callback) callback(); }, 200);
+    setTimeout(() => { overlay.remove(); if (callback) callback(); }, reduceMotion ? 0 : 200);
+}
+
+/** 为共用弹窗提供模态语义、焦点约束与关闭后的焦点恢复。 */
+function _setupDialogAccessibility(box, titleId, descriptionId, initialFocusSelector, onEscape) {
+    const previousFocus = document.activeElement;
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "true");
+    box.setAttribute("aria-labelledby", titleId);
+    if (descriptionId) box.setAttribute("aria-describedby", descriptionId);
+    else box.removeAttribute("aria-describedby");
+    box.setAttribute("tabindex", "-1");
+
+    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"]')
+        && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden");
+
+    const handleKeydown = event => {
+        if (dialogStack[dialogStack.length - 1] !== box) return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onEscape();
+            return;
+        }
+        if (event.key !== "Tab") return;
+        const focusable = getFocusable();
+        if (!focusable.length) {
+            event.preventDefault();
+            box.focus();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && (document.activeElement === first || !box.contains(document.activeElement))) {
+            event.preventDefault();
+            last.focus();
+        } else if (!event.shiftKey && (document.activeElement === last || !box.contains(document.activeElement))) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    dialogStack.push(box);
+    document.addEventListener("keydown", handleKeydown);
+    const initialFocus = box.querySelector(initialFocusSelector) || getFocusable()[0] || box;
+    initialFocus.focus();
+
+    return {
+        cleanup() {
+            document.removeEventListener("keydown", handleKeydown);
+            const stackIndex = dialogStack.lastIndexOf(box);
+            if (stackIndex >= 0) dialogStack.splice(stackIndex, 1);
+        },
+        restoreFocus() {
+            if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus();
+        }
+    };
 }
 
+// 业务弹窗复用相同的模态栈、焦点循环与恢复行为；调用方负责在关闭时 cleanup。
+export { _setupDialogAccessibility as setupDialogAccessibility };
+
 // ==========================================
 // ⚠️ 确认对话框
 // ==========================================
@@ -196,37 +243,49 @@ function _closeDialog(overlay, box, hasYTranslate = true, callback) {
  * @param {string} options.cancelText - 取消按钮文字
  * @param {string} options.type - 类型: 'warning', 'danger', 'info'
  * @param {boolean} options.html - 是否把 message 当作可信 HTML 渲染（默认 false，即按纯文本转义）
+ * @param {Function} options.onConfirm - 可选异步操作，返回 false 时按未成功关闭；调用方负责业务错误提示
+ * @param {string} options.processingText - 异步操作期间的本地化状态文案
+ * @param {AbortSignal} [options.signal] - 强制释放原范围弹窗，不取消已提交业务操作
  * @returns {Promise<boolean>}
  */
 export function showConfirm(message, options = {}) {
     const {
-        title = "操作确认",
-        confirmText = "确认执行",
-        cancelText = "取消",
+        title = t('common.confirm_action'),
+        confirmText = t('common.confirm_execute'),
+        cancelText = t('common.cancel'),
         type = "warning",
-        html = false
+        html = false,
+        onConfirm,
+        processingText = t('common.processing'),
+        signal
     } = options;
     
     const typeConfig = {
-        warning: { icon: "⚠️", color: "#FF9800", btnColor: "#FF9800" },
-        danger: { icon: "🚨", color: "#F44336", btnColor: "#F44336" },
-        info: { icon: "ℹ️", color: "#2196F3", btnColor: "#2196F3" }
+        warning: { icon: "⚠️" },
+        danger: { icon: "🚨" },
+        info: { icon: "ℹ️" }
     };
-    const config = typeConfig[type] || typeConfig.warning;
+    const safeType = Object.hasOwn(typeConfig, type) ? type : "warning";
+    const config = typeConfig[safeType];
     
+    if (signal?.aborted) return Promise.resolve(false);
     return new Promise((resolve) => {
         const overlay = _createDialogOverlay(0.6, 3);
         const box = _createDialogBox({ width: "360px", hasYTranslate: true });
+        box.dataset.type = safeType;
+        const dialogId = ++dialogInstanceId;
+        const titleId = `ui-dialog-title-${dialogId}`;
+        const descriptionId = `ui-dialog-description-${dialogId}`;
 
         box.innerHTML = `
-            <div style="font-size: 18px; font-weight: bold; color: ${config.color}; display: flex; align-items: center; gap: 10px;">
-                <span style="font-size: 24px;">${config.icon}</span>
+            <div id="${titleId}" class="comfy-ranking-dialog__title" role="heading" aria-level="2">
+                <span class="comfy-ranking-dialog__icon" aria-hidden="true">${config.icon}</span>
                 <span>${escapeHtml(title)}</span>
             </div>
-            <div style="font-size: 14px; color: #ccc; line-height: 1.7; padding: 8px 0;">${html ? message : escapeHtml(message)}</div>
-            <div style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px;">
-                <button id="ui-btn-cancel" style="padding: 10px 20px; background: transparent; border: 1px solid #555; color: #aaa; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 14px;">${escapeHtml(cancelText)}</button>
-                <button id="ui-btn-confirm" style="padding: 10px 20px; background: ${config.btnColor}; border: none; color: #fff; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 8px ${config.btnColor}44; transition: 0.2s; font-size: 14px;">${escapeHtml(confirmText)}</button>
+            <div id="${descriptionId}" class="comfy-ranking-dialog__message${html ? '' : ' comfy-ranking-dialog__message--plain'}">${html ? message : escapeHtml(message)}</div>
+            <div class="comfy-ranking-dialog__actions">
+                <button id="ui-btn-cancel" class="comfy-ranking-dialog__button comfy-ranking-dialog__button--cancel" type="button">${escapeHtml(cancelText)}</button>
+                <button id="ui-btn-confirm" class="comfy-ranking-dialog__button comfy-ranking-dialog__button--confirm" type="button">${escapeHtml(confirmText)}</button>
             </div>
         `;
 
@@ -236,26 +295,65 @@ export function showConfirm(message, options = {}) {
         // 入场动画
         _showDialogAnimation(overlay, box, true);
 
-        const close = (result) => {
-            _closeDialog(overlay, box, true, () => resolve(result));
+        let settled = false, aborted = false;
+        let pending = false;
+        let dialogAccessibility, observer;
+        const abort = () => {
+            if (aborted) return;
+            aborted = true; settled = true; pending = false;
+            observer?.disconnect(); dialogAccessibility?.cleanup(); overlay.remove();
+            signal?.removeEventListener("abort", abort);
+            resolve(false);
         };
-
-        // ESC 键关闭
-        const handleKeydown = (e) => {
-            if (e.key === "Escape") {
-                document.removeEventListener("keydown", handleKeydown);
-                close(false);
-            }
+        const close = result => {
+            if (settled || pending) return;
+            settled = true;
+            observer?.disconnect();
+            dialogAccessibility?.cleanup();
+            _closeDialog(overlay, box, true, () => {
+                signal?.removeEventListener("abort", abort);
+                if (!aborted) dialogAccessibility?.restoreFocus();
+                resolve(aborted ? false : result);
+            });
         };
-        document.addEventListener("keydown", handleKeydown);
+
+        dialogAccessibility = _setupDialogAccessibility(
+            box, titleId, descriptionId, "#ui-btn-cancel", () => close(false)
+        );
+
+        observer = new MutationObserver(() => { if (!overlay.isConnected) abort(); });
+        observer.observe(document.body, { childList: true, subtree: true });
+        signal?.addEventListener("abort", abort, { once: true });
+        if (signal?.aborted) { abort(); return; }
 
         box.querySelector("#ui-btn-cancel").onclick = () => {
-            document.removeEventListener("keydown", handleKeydown);
             close(false);
         };
-        box.querySelector("#ui-btn-confirm").onclick = () => {
-            document.removeEventListener("keydown", handleKeydown);
-            close(true);
+        box.querySelector("#ui-btn-confirm").onclick = async () => {
+            if (settled || pending) return;
+            if (typeof onConfirm !== "function") { close(true); return; }
+            pending = true;
+            box.setAttribute("aria-busy", "true");
+            box.querySelector("#ui-btn-cancel").disabled = true;
+            const confirmButton = box.querySelector("#ui-btn-confirm");
+            confirmButton.disabled = true;
+            confirmButton.textContent = processingText;
+            const progress = document.createElement("p");
+            progress.textContent = processingText;
+            progress.setAttribute("role", "status");
+            progress.setAttribute("aria-live", "polite");
+            box.querySelector(".comfy-ranking-dialog__message").appendChild(progress);
+            box.focus();
+            let succeeded = false;
+            try { succeeded = (await onConfirm()) !== false; }
+            catch {
+                if (!settled) showToast(t('common.operation_failed'), "error");
+            } finally {
+                if (settled) return;
+                pending = false;
+                box.removeAttribute("aria-busy");
+                close(succeeded);
+            }
         };
     });
 }
@@ -275,14 +373,17 @@ export function showConfirm(message, options = {}) {
  */
 export function showRetryDialog(message, retryFn, options = {}) {
     const {
-        title = "操作失败",
-        retryText = "🔄 重试",
-        cancelText = "关闭",
+        title = t('common.error'),
+        retryText = `🔄 ${t('common.retry')}`,
+        cancelText = t('common.close'),
         html = false
     } = options;
     
     return new Promise((resolve) => {
         const overlay = _createDialogOverlay(0.7, 4);
+        const dialogId = ++dialogInstanceId;
+        const titleId = `ui-dialog-title-${dialogId}`;
+        const descriptionId = `ui-dialog-description-${dialogId}`;
         const box = _createDialogBox({
             width: "400px",
             background: "linear-gradient(145deg, #2a2a2a, #1f1f1f)",
@@ -292,20 +393,19 @@ export function showRetryDialog(message, retryFn, options = {}) {
             gap: "20px",
             hasYTranslate: false
         });
-        // RetryDialog 的过渡时间略长
-        box.style.transition = "transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)";
+        box.dataset.type = "retry";
 
         box.innerHTML = `
-            <div style="text-align: center;">
-                <div style="font-size: 48px; margin-bottom: 16px;">😕</div>
-                <div style="font-size: 20px; font-weight: bold; color: #F44336;">${escapeHtml(title)}</div>
+            <div class="comfy-ranking-dialog__header comfy-ranking-dialog__header--center">
+                <div class="comfy-ranking-dialog__illustration" aria-hidden="true">😕</div>
+                <div id="${titleId}" class="comfy-ranking-dialog__title comfy-ranking-dialog__title--center" role="heading" aria-level="2">${escapeHtml(title)}</div>
             </div>
-            <div style="font-size: 14px; color: #bbb; line-height: 1.7; text-align: center; padding: 0 10px; background: #1a1a1a; border-radius: 8px; padding: 16px;">
+            <div id="${descriptionId}" class="comfy-ranking-dialog__message comfy-ranking-dialog__message--center">
                 ${html ? message : escapeHtml(message)}
             </div>
-            <div style="display: flex; gap: 12px; justify-content: center;">
-                <button id="ui-btn-cancel" style="flex: 1; padding: 12px 20px; background: #333; border: 1px solid #555; color: #aaa; border-radius: 8px; cursor: pointer; transition: 0.2s; font-size: 14px;">${escapeHtml(cancelText)}</button>
-                <button id="ui-btn-retry" style="flex: 1; padding: 12px 20px; background: linear-gradient(135deg, #2196F3, #1976D2); border: none; color: #fff; border-radius: 8px; cursor: pointer; font-weight: bold; transition: 0.2s; font-size: 14px;">${escapeHtml(retryText)}</button>
+            <div class="comfy-ranking-dialog__actions comfy-ranking-dialog__actions--center">
+                <button id="ui-btn-cancel" class="comfy-ranking-dialog__button comfy-ranking-dialog__button--cancel" type="button">${escapeHtml(cancelText)}</button>
+                <button id="ui-btn-retry" class="comfy-ranking-dialog__button comfy-ranking-dialog__button--retry" type="button">${escapeHtml(retryText)}</button>
             </div>
         `;
 
@@ -315,35 +415,49 @@ export function showRetryDialog(message, retryFn, options = {}) {
         // 入场动画
         _showDialogAnimation(overlay, box, false);
 
-        const close = () => {
-            _closeDialog(overlay, box, false);
+        let settled = false;
+        let retryInProgress = false;
+        let dialogAccessibility;
+        const settle = result => {
+            if (settled) return;
+            settled = true;
+            dialogAccessibility?.cleanup();
+            _closeDialog(overlay, box, false, () => {
+                dialogAccessibility?.restoreFocus();
+                resolve(result);
+            });
         };
+        dialogAccessibility = _setupDialogAccessibility(
+            box, titleId, descriptionId, "#ui-btn-cancel", () => {
+                if (!retryInProgress) settle(false);
+            }
+        );
 
         box.querySelector("#ui-btn-cancel").onclick = () => {
-            close();
-            resolve(false);
+            settle(false);
         };
         
         box.querySelector("#ui-btn-retry").onclick = async () => {
             const retryBtn = box.querySelector("#ui-btn-retry");
             retryBtn.innerHTML = `<span class="btn-spinner"></span> ${t('common.retrying')}`;
             retryBtn.disabled = true;
+            retryInProgress = true;
             
             try {
                 await retryFn();
-                close();
-                resolve(true);
+                settle(true);
             } catch (error) {
-                // 重试失败，更新错误信息（与初次渲染保持一致：默认纯文本，仅 html=true 时按 HTML 渲染）
+                // 重试错误可能来自远端或扩展，即使初始提示允许富文本也必须作为纯文本处理
                 const errText = error.message || t('common.retry_failed');
-                const errBox = box.querySelector("div[style*='background: #1a1a1a']");
+                const errBox = box.querySelector(".comfy-ranking-dialog__message");
                 if (html) {
-                    errBox.innerHTML = errText;
+                    errBox.innerHTML = escapeHtml(errText);
                 } else {
                     errBox.textContent = errText;
                 }
                 retryBtn.innerHTML = escapeHtml(retryText);
                 retryBtn.disabled = false;
+                retryInProgress = false;
             }
         };
     });
@@ -373,7 +487,7 @@ let loadingCount = 0;
  * 显示全局加载遮罩
  * @param {string} message - 加载提示文字
  */
-export function showLoading(message = "加载中...") {
+export function showLoading(message = t('feedback.processing')) {
     loadingCount++;
     
     if (loadingOverlay) {
@@ -461,7 +575,7 @@ export function hideLoading() {
  * @param {boolean} loading - 是否加载中
  * @param {string} loadingText - 加载时显示的文字
  */
-export function setButtonLoading(button, loading, loadingText = "处理中...") {
+export function setButtonLoading(button, loading, loadingText = t('feedback.processing')) {
     if (!button) return;
     
     if (loading) {
@@ -494,7 +608,7 @@ export function setButtonLoading(button, loading, loadingText = "处理中...")
  * @param {string} text - 要复制的文本
  * @param {string} successMsg - 成功提示
  */
-export async function copyToClipboard(text, successMsg = "已复制到剪贴板") {
+export async function copyToClipboard(text, successMsg = t('feedback.copied')) {
     try {
         if (navigator.clipboard && navigator.clipboard.writeText) {
             await navigator.clipboard.writeText(text);
@@ -510,7 +624,7 @@ export async function copyToClipboard(text, successMsg = "已复制到剪贴板"
         }
         showToast(successMsg, "success");
     } catch (error) {
-        showToast("复制失败", "error");
+        showToast(t('feedback.copy_failed'), "error");
     }
 }
 
@@ -527,9 +641,9 @@ export async function copyToClipboard(text, successMsg = "已复制到剪贴板"
  */
 export async function withFeedback(asyncFn, options = {}) {
     const {
-        loadingMsg = "处理中...",
-        successMsg = "操作成功",
-        errorMsg = "操作失败",
+        loadingMsg = t('feedback.processing'),
+        successMsg = t('feedback.operation_success'),
+        errorMsg = t('feedback.operation_failed'),
         showLoadingOverlay = false,
         button = null
     } = options;
@@ -551,8 +665,7 @@ export async function withFeedback(asyncFn, options = {}) {
         
         return result;
     } catch (error) {
-        const msg = error.message || errorMsg;
-        showToast(msg, "error");
+        showToast(errorMsg, "error");
         throw error;
     } finally {
         if (showLoadingOverlay) {
@@ -572,58 +685,113 @@ export async function withFeedback(asyncFn, options = {}) {
 /**
  * 创建安装进度条
  * @param {HTMLElement} container - 进度条容器元素
- * @returns {{update: Function, complete: Function, error: Function, destroy: Function}}
+ * @returns {{update: Function, complete: Function, error: Function, showDiagnostics: Function, destroy: Function}}
  */
 export function createInstallProgress(container) {
     // 创建进度条DOM
+    const preparingLabel = t('install.preparing');
     const wrapper = document.createElement("div");
     wrapper.className = "install-progress-wrapper";
     wrapper.innerHTML = `
-        <div style="width: 100%; margin: 12px 0;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
-                <span class="progress-stage" style="font-size: 12px; color: #aaa;">准备中...</span>
-                <span class="progress-percent" style="font-size: 12px; color: #2196F3; font-weight: bold;">0%</span>
+        <div class="install-progress">
+            <div class="install-progress__header">
+                <span class="install-progress__stage" role="status" aria-live="polite">${escapeHtml(preparingLabel)}</span>
+                <span class="install-progress__elapsed" role="timer" aria-live="off"></span>
+                <span class="install-progress__percent">0%</span>
             </div>
-            <div style="position: relative; width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;">
-                <div class="progress-fill" style="
-                    width: 0%;
-                    height: 100%;
-                    background: linear-gradient(90deg, #2196F3, #4CAF50);
-                    border-radius: 3px;
-                    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                "></div>
+            <div class="install-progress__track" role="progressbar" aria-label="${escapeHtml(t('install.progress_label'))}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="${escapeHtml(preparingLabel)}">
+                <div class="install-progress__fill"></div>
             </div>
         </div>
     `;
     container.innerHTML = "";
     container.appendChild(wrapper);
 
-    const fill = wrapper.querySelector(".progress-fill");
-    const stage = wrapper.querySelector(".progress-stage");
-    const percent = wrapper.querySelector(".progress-percent");
+    const fill = wrapper.querySelector(".install-progress__fill");
+    const stage = wrapper.querySelector(".install-progress__stage");
+    const elapsed = wrapper.querySelector(".install-progress__elapsed");
+    const percent = wrapper.querySelector(".install-progress__percent");
+    const progressTrack = wrapper.querySelector(".install-progress__track");
+    const startedAt = Date.now();
+    let cancelButton = null;
+    const updateElapsed = () => {
+        const totalSeconds = Math.floor((Date.now() - startedAt) / 1000);
+        const time = `${Math.floor(totalSeconds / 60)}:${String(totalSeconds % 60).padStart(2, "0")}`;
+        const elapsedLabel = t('install.elapsed', { time });
+        elapsed.textContent = elapsedLabel;
+        elapsed.setAttribute("aria-label", elapsedLabel);
+    };
+    const elapsedTimer = setInterval(updateElapsed, 1000);
+    const stopElapsedTimer = () => clearInterval(elapsedTimer);
+    updateElapsed();
 
     return {
         update(progress, message) {
             const p = Math.max(0, Math.min(100, progress));
             fill.style.width = `${p}%`;
             percent.textContent = `${p}%`;
-            if (message) stage.textContent = message;
+            progressTrack.setAttribute("aria-valuenow", String(p));
+            if (message) {
+                stage.textContent = message;
+                progressTrack.setAttribute("aria-valuetext", message);
+            }
         },
         complete(message) {
+            stopElapsedTimer();
+            cancelButton?.remove();
             fill.style.width = "100%";
-            fill.style.background = "linear-gradient(90deg, #4CAF50, #8BC34A)";
             percent.textContent = "100%";
-            percent.style.color = "#4CAF50";
-            stage.textContent = message || "✅ 安装完成！";
-            stage.style.color = "#4CAF50";
+            progressTrack.setAttribute("aria-valuenow", "100");
+            wrapper.classList.add("is-complete");
+            stage.textContent = message || `✅ ${t('install.complete')}`;
+            progressTrack.setAttribute("aria-valuetext", stage.textContent);
         },
         error(message) {
-            fill.style.background = "#F44336";
-            percent.style.color = "#F44336";
-            stage.textContent = message || "❌ 安装失败";
-            stage.style.color = "#F44336";
+            stopElapsedTimer();
+            cancelButton?.remove();
+            wrapper.classList.add("is-error");
+            stage.textContent = message || `❌ ${t('install.failed')}`;
+            progressTrack.setAttribute("aria-valuetext", stage.textContent);
+        },
+        showDiagnostics(entries) {
+            if (!Array.isArray(entries) || entries.length === 0) return;
+            const details = document.createElement("details");
+            details.className = "install-progress__diagnostics";
+            const summary = document.createElement("summary");
+            summary.textContent = t('install.diagnostics');
+            details.appendChild(summary);
+
+            const list = document.createElement("ol");
+            for (const entry of entries.slice(-50)) {
+                const item = document.createElement("li");
+                const stageKey = entry.stageKey;
+                const stageLabel = stageKey ? t(stageKey) : (entry.stage || t('install.stage_unknown'));
+                item.textContent = t('install.diagnostic_entry', {
+                    time: entry.time,
+                    stage: stageLabel,
+                    progress: Number.isFinite(entry.progress) ? `${entry.progress}%` : "—"
+                });
+                list.appendChild(item);
+            }
+            details.appendChild(list);
+            wrapper.appendChild(details);
+        },
+        addCancelButton(label, onCancel) {
+            if (cancelButton || typeof onCancel !== "function") return;
+            cancelButton = document.createElement("button");
+            cancelButton.type = "button";
+            cancelButton.className = "install-progress__cancel";
+            cancelButton.textContent = label;
+            cancelButton.addEventListener("click", () => {
+                if (cancelButton.disabled) return;
+                cancelButton.disabled = true;
+                cancelButton.textContent = t('install.cancelling');
+                onCancel();
+            });
+            wrapper.appendChild(cancelButton);
         },
         destroy() {
+            stopElapsedTimer();
             wrapper.remove();
         }
     };

前端页面/components/互动工具函数.js

@@ -8,6 +8,8 @@
 
 import { showToast } from "./UI交互提示组件.js";
 import { t } from "./用户体验增强.js";
+import { captureRequestSession } from "../core/网络请求_基础设施.js";
+import { getUser } from "../core/状态管理.js";
 // 本模块内部也需要转义（下方 renderInteractionButtonsHTML）；re-export 不会绑定本地标识符，故单独 import
 import { escapeHtml } from "../core/全局配置.js";
 
@@ -23,7 +25,7 @@ const VIEW_DEBOUNCE_MS = 300000;     // 5分钟成功冷却
 const VIEW_ERROR_COOLDOWN_MS = 30000; // 30秒错误冷却
 
 // 防重复提交状态跟踪
-const _pendingActions = new Set();
+const _pendingActions = new WeakMap();
 
 /**
  * 记录内容浏览量（带5分钟防抖）
@@ -131,7 +133,8 @@ export function renderInteractionButtonsHTML(data, currentAccount, options = {})
  * @param {string} options.activeToastKey - 激活时 toast 的 i18n key
  * @param {string} [options.activeTextColor] - 激活时的按钮文字色（可选）
  * @param {string} [options.inactiveTextColor] - 取消激活时的按钮文字色（可选）
- * @param {string} [options.warnLabel] - 日志警告用标签
+ * @param {string} options.inactiveAction - 服务端取消动作值
+ * @param {Function} [options.isCurrent] - 原视图仍有效的检查
  * @returns {Promise<Object|null>}
  */
 async function _handleToggleAction(apiMethod, contentId, buttonEl, countEl, currentUser, options) {
@@ -143,29 +146,37 @@ async function _handleToggleAction(apiMethod, contentId, buttonEl, countEl, curr
         activeToastKey,
         activeTextColor = null,
         inactiveTextColor = null,
-        warnLabel = 'toggle'
+        inactiveAction,
+        isCurrent: viewCurrent = () => true
     } = options;
 
-    if (!currentUser) {
+    const sessionMatches = captureRequestSession();
+    const originalHandler = buttonEl?.onclick;
+    const current = () => sessionMatches() && viewCurrent()
+        && (!buttonEl || (buttonEl.isConnected && buttonEl.onclick === originalHandler))
+        && (!countEl || countEl.isConnected)
+        && (getUser()?.account || null) === (currentUser?.account || null);
+    if (!current()) return null;
+    if (!currentUser?.account) {
         showToast(t('auth.login_required'), "warning");
         return null;
     }
 
-    const actionKey = `${actionPrefix}_${contentId}`;
-    if (_pendingActions.has(actionKey)) return null;
-    _pendingActions.add(actionKey);
+    // 同类内容ID可在不同业务存在；按实际API方法和账号隔离在途动作。
+    const actionKey = JSON.stringify([currentUser.account, actionPrefix, contentId]);
+    let pending = _pendingActions.get(apiMethod);
+    if (!pending) { pending = new Set(); _pendingActions.set(apiMethod, pending); }
+    if (pending.has(actionKey)) return null;
+    pending.add(actionKey);
 
     if (buttonEl) buttonEl.disabled = true;
 
     try {
         const res = await apiMethod(contentId);
-
-        if (!res || res.status !== "success") {
-            console.warn(`${warnLabel}响应异常:`, res);
-            return null;
-        }
-
-        const count = typeof res[countField] === 'number' ? res[countField] : 0;
+        if (!current()) return null;
+        if (res?.status !== "success" || !Number.isSafeInteger(res[countField]) || res[countField] < 0
+            || (res.action !== activeAction && res.action !== inactiveAction)) throw new Error();
+        const count = res[countField];
         if (countEl) countEl.textContent = count;
 
         if (res.action === activeAction) {
@@ -178,14 +189,14 @@ async function _handleToggleAction(apiMethod, contentId, buttonEl, countEl, curr
             if (buttonEl) buttonEl.style.borderColor = "#555";
             if (buttonEl && inactiveTextColor) buttonEl.style.color = inactiveTextColor;
         }
+        if (buttonEl) buttonEl.setAttribute("aria-pressed", String(res.action === activeAction));
         return res;
-    } catch (err) {
-        console.error(`${warnLabel}操作失败:`, err);
-        showToast(t('task.operation_failed'), "error");
+    } catch (_) {
+        if (current()) showToast(t('task.operation_failed'), "error");
         return null;
     } finally {
-        _pendingActions.delete(actionKey);
-        if (buttonEl) buttonEl.disabled = false;
+        pending.delete(actionKey);
+        if (current() && buttonEl) buttonEl.disabled = false;
     }
 }
 
@@ -196,16 +207,18 @@ async function _handleToggleAction(apiMethod, contentId, buttonEl, countEl, curr
  * @param {HTMLElement} buttonEl - 按钮元素
  * @param {HTMLElement} countEl - 计数元素
  * @param {Object} currentUser - 当前用户
+ * @param {Object} [options] - 可选视图检查，原五参数调用保持
  * @returns {Promise<Object|null>}
  */
-export async function handleToggleLike(apiMethod, contentId, buttonEl, countEl, currentUser) {
+export async function handleToggleLike(apiMethod, contentId, buttonEl, countEl, currentUser, options = {}) {
     return _handleToggleAction(apiMethod, contentId, buttonEl, countEl, currentUser, {
         actionPrefix: 'like',
         countField: 'likes',
         activeAction: 'liked',
         activeColor: '#FF5722',
         activeToastKey: 'post.liked',
-        warnLabel: '点赞'
+        inactiveAction: 'unliked',
+        isCurrent: options.isCurrent
     });
 }
 
@@ -216,9 +229,10 @@ export async function handleToggleLike(apiMethod, contentId, buttonEl, countEl,
  * @param {HTMLElement} buttonEl - 按钮元素
  * @param {HTMLElement} countEl - 计数元素
  * @param {Object} currentUser - 当前用户
+ * @param {Object} [options] - 可选视图检查，原五参数调用保持
  * @returns {Promise<Object|null>}
  */
-export async function handleToggleFavorite(apiMethod, contentId, buttonEl, countEl, currentUser) {
+export async function handleToggleFavorite(apiMethod, contentId, buttonEl, countEl, currentUser, options = {}) {
     return _handleToggleAction(apiMethod, contentId, buttonEl, countEl, currentUser, {
         actionPrefix: 'favorite',
         countField: 'favorites',
@@ -227,7 +241,8 @@ export async function handleToggleFavorite(apiMethod, contentId, buttonEl, count
         activeToastKey: 'post.favorited',
         activeTextColor: '#000',
         inactiveTextColor: '#fff',
-        warnLabel: '收藏'
+        inactiveAction: 'unfavorited',
+        isCurrent: options.isCurrent
     });
 }
 

前端页面/components/全局弹窗管理器.js

@@ -1,138 +1,92 @@
-// 前端页面/components/全局弹窗管理器.js
+// 共用业务弹窗：与确认/重试提示复用同一个可访问性栈。
+import { setupDialogAccessibility } from "./UI交互提示组件.js";
+import { t } from "./用户体验增强.js";
+let modalSequence = 0;
 
 export class ModalManager {
     constructor() {
-        this.activeModals = []; // 用于存储当前打开的所有弹窗，实现层级管理
+        this.activeModals = [];
+        this.entries = new Map();
         this.overlay = null;
+        this.observer = null;
         this.initOverlay();
     }
 
-    // 初始化全局半透明遮罩层
     initOverlay() {
-        if (document.getElementById("community-hub-overlay")) return;
-
-        this.overlay = document.createElement("div");
-        this.overlay.id = "community-hub-overlay";
-        Object.assign(this.overlay.style, {
-            position: "fixed",
-            top: "0",
-            left: "0",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0, 0, 0, 0.7)",
-            zIndex: "9998", // 位于 ComfyUI 画布之上，但低于侧边栏和弹窗
-            display: "none",
-            backdropFilter: "blur(3px)" // 添加背景模糊效果
-        });
-
-        // 点击遮罩层时，关闭最顶层的一个弹窗
-        this.overlay.onclick = () => {
-            try { this.closeTopModal(); } catch(e) { console.warn('[ModalManager] closeTopModal error:', e); }
-        };
-
-        document.body.appendChild(this.overlay);
+        if (!document.getElementById('hub-theme-style')) {
+            const link = document.createElement('link');
+            link.id = 'hub-theme-style'; link.rel = 'stylesheet';
+            link.href = new URL('../styles/主题基础.css', import.meta.url).href;
+            document.head.appendChild(link);
+        }
+        this.overlay = document.getElementById('community-hub-overlay');
+        if (!this.overlay) {
+            this.overlay = document.createElement('div');
+            this.overlay.id = 'community-hub-overlay';
+            this.overlay.className = 'ranking-modal-overlay';
+            this.overlay.hidden = true;
+            document.body.appendChild(this.overlay);
+        }
+        this.overlay.onclick = () => this.closeTopModal();
     }
 
-    /**
-     * 打开一个新的弹窗
-     * @param {string} title 弹窗标题
-     * @param {HTMLElement} contentElement 包含实际内容的 DOM 元素
-     * @param {object} options 配置项 (如宽度)
-     */
-    openModal(title, contentElement, options = { width: "500px" }) {
-        const modalContainer = document.createElement("div");
-        Object.assign(modalContainer.style, {
-            position: "fixed",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: options.width,
-            backgroundColor: "var(--comfy-menu-bg)",
-            border: "1px solid #555",
-            borderRadius: "12px",
-            boxShadow: "0 10px 30px rgba(0,0,0,0.8)",
-            zIndex: (9999 + this.activeModals.length).toString(), // 动态计算 z-index，实现层级覆盖
-            display: "flex",
-            flexDirection: "column",
-            overflow: "hidden"
-        });
-
-        // 弹窗头部 (包含标题和关闭按钮)
-        const header = document.createElement("div");
-        Object.assign(header.style, {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            padding: "15px 20px",
-            borderBottom: "1px solid #444",
-            backgroundColor: "var(--comfy-input-bg)",
-        });
-
-        const titleSpan = document.createElement("span");
-        titleSpan.innerText = title;
-        Object.assign(titleSpan.style, {
-            fontWeight: "bold",
-            fontSize: "16px",
-            color: "#fff"
-        });
-
-        const closeBtn = document.createElement("button");
-        closeBtn.innerHTML = "✖";
-        Object.assign(closeBtn.style, {
-            background: "transparent",
-            border: "none",
-            color: "#aaa",
-            cursor: "pointer",
-            fontSize: "14px"
+    syncLayers() {
+        const top = this.activeModals.at(-1);
+        this.activeModals.forEach((modal, index) => {
+            modal.style.zIndex = String(9999 + index);
+            modal.inert = modal !== top;
+            if (modal === top) { modal.removeAttribute('aria-hidden'); modal.setAttribute('aria-modal', 'true'); }
+            else { modal.setAttribute('aria-hidden', 'true'); modal.removeAttribute('aria-modal'); }
         });
-        // 绑定关闭当前弹窗事件，防止事件冒泡触发底层点击
-        closeBtn.onclick = (e) => {
-            e.stopPropagation();
-            this.closeModal(modalContainer);
-        };
-
-        header.appendChild(titleSpan);
-        header.appendChild(closeBtn);
-
-        // 弹窗内容区
-        const contentWrapper = document.createElement("div");
-        Object.assign(contentWrapper.style, {
-            padding: "20px",
-            maxHeight: "70vh", // 防止弹窗过高，限制最大高度
-            overflowY: "auto",
-            color: "#eee"
-        });
-        contentWrapper.appendChild(contentElement);
-
-        modalContainer.appendChild(header);
-        modalContainer.appendChild(contentWrapper);
-        document.body.appendChild(modalContainer);
-
-        // 记录状态并显示遮罩
-        this.activeModals.push(modalContainer);
-        this.overlay.style.display = "block";
+        this.overlay.hidden = !top;
     }
 
-    // 关闭指定的弹窗
-    closeModal(modalElement) {
-        if (!modalElement) return;
-        modalElement.remove();
-        this.activeModals = this.activeModals.filter(m => m !== modalElement);
-        
-        // 如果没有打开的弹窗了，隐藏遮罩层
-        if (this.activeModals.length === 0) {
-            this.overlay.style.display = "none";
+    openModal(title, contentElement, options = { width: '500px' }) {
+        const modal = document.createElement('div');
+        modal.className = 'ranking-modal';
+        modal.style.setProperty('--ranking-modal-width', options.width || '500px');
+        const header = document.createElement('div'); header.className = 'ranking-modal__header';
+        const titleNode = document.createElement('span'); titleNode.className = 'ranking-modal__title';
+        titleNode.id = `ranking-modal-title-${++modalSequence}`; titleNode.textContent = title;
+        const close = document.createElement('button'); close.type = 'button';
+        close.className = 'ranking-modal__close'; close.textContent = '✖';
+        close.setAttribute('aria-label', t('common.close'));
+        close.onclick = event => { event.stopPropagation(); this.closeModal(modal); };
+        header.append(titleNode, close);
+        const body = document.createElement('div'); body.className = 'ranking-modal__body'; body.appendChild(contentElement);
+        modal.append(header, body); document.body.appendChild(modal);
+        this.activeModals.push(modal); this.syncLayers();
+        const accessibility = setupDialogAccessibility(modal, titleNode.id, null, '.ranking-modal__close', () => this.closeModal(modal));
+        this.entries.set(modal, { content: contentElement, accessibility });
+        if (!this.observer) {
+            this.observer = new MutationObserver(() => {
+                for (const current of [...this.activeModals]) if (!current.isConnected) this.closeModal(current);
+            });
+            this.observer.observe(document.body, { childList: true, subtree: true });
         }
+        return modal;
     }
 
-    // 关闭位于最顶层的弹窗 (通常用于点击遮罩层或按 ESC 键时触发)
-    closeTopModal() {
-        if (this.activeModals.length > 0) {
-            const topModal = this.activeModals[this.activeModals.length - 1];
-            this.closeModal(topModal);
+    closeModal(modal) {
+        const entry = this.entries.get(modal);
+        if (!entry) return;
+        const wasTop = this.activeModals.at(-1) === modal;
+        const restore = wasTop && (modal.contains(document.activeElement) || document.activeElement === document.body);
+        this.entries.delete(modal);
+        entry.accessibility.cleanup();
+        try { entry.content._cleanup?.(); } catch (_) {}
+        modal.remove();
+        this.activeModals = this.activeModals.filter(current => current !== modal);
+        this.syncLayers();
+        if (!this.activeModals.length) { this.observer?.disconnect(); this.observer = null; }
+        if (restore) {
+            entry.accessibility.restoreFocus();
+            const top = this.activeModals.at(-1);
+            if (top && !top.contains(document.activeElement)) top.querySelector('.ranking-modal__close').focus();
         }
     }
+
+    closeTopModal() { this.closeModal(this.activeModals.at(-1)); }
 }
 
-// 导出一个全局单例，确保整个应用只实例化一次
-export const globalModal = new ModalManager();
+export const globalModal = new ModalManager();

前端页面/components/关于插件组件.js

@@ -1,352 +1,180 @@
-// 前端页面/components/关于插件组件.js
-import { api, request } from "../core/网络请求API.js";
-import { t } from "./用户体验增强.js";
-
-// 🏷️ 版本配置缓存
-let cachedVersionConfig = null;
-
-// 清除版本配置缓存（管理员修改版本后调用）
-export function clearVersionCache() {
-    cachedVersionConfig = null;
-}
-
-// 🎨 卡片基础样式常量（authorSection 与 createCardSection 共享）
-const CARD_BASE_STYLE = {
-    background: "rgba(255,255,255,0.03)",
-    border: "1px solid rgba(255,255,255,0.06)",
-    borderRadius: "10px",
-    padding: "16px"
-};
-
-// 获取版本配置
-async function getVersionConfig() {
-    if (cachedVersionConfig) return cachedVersionConfig;
-
-    try {
-        const res = await request('/api/public/project-version');
-        if (res?.data) {
-            cachedVersionConfig = res.data;
-            return cachedVersionConfig;
-        }
-    } catch (e) {
-        console.warn('获取版本配置失败:', e);
-    }
-
-    // 默认值
-    return { stage: 'beta', major: 2, minor: 0, patch: 0 };
-}
-
-// 生成版本字符串
-export function formatVersionString(config) {
-    const stageLabels = {
-        'alpha': t('about.stage_alpha'),
-        'beta': t('about.stage_beta'),
-        'rc': t('about.stage_rc'),
-        'stable': t('about.stage_stable')
-    };
-    const version = `V${config.major}.${config.minor}.${config.patch}`;
-    const stageLabel = stageLabels[config.stage] || config.stage;
-    return `${version} ${stageLabel}`;
-}
-
-// 获取阶段本地化名称
-export function getStageLabel(stage) {
-    const stageLabels = {
-        'alpha': t('about.stage_alpha'),
-        'beta': t('about.stage_beta'),
-        'rc': t('about.stage_rc'),
-        'stable': t('about.stage_stable')
-    };
-    return stageLabels[stage] || stage;
-}
-
-// ==========================================
-// 🎨 创建关于页面独立视图
-// ==========================================
-export function createAboutView(versionString, stageLabel) {
-    const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        flex: "1",
-        overflowY: "auto",
-        color: "#ccc",
-        fontSize: "14px",
-        padding: "16px",
-        boxSizing: "border-box",
-        gap: "16px",
-        background: "transparent"
-    });
-
-    // ===== 1. Hero 品牌区 =====
-    const heroSection = document.createElement("div");
-    Object.assign(heroSection.style, {
-        background: "linear-gradient(180deg, rgba(0, 212, 170, 0.15) 0%, transparent 100%)",
-        borderRadius: "10px",
-        padding: "28px 20px",
-        textAlign: "center",
-        border: "1px solid rgba(255,255,255,0.06)"
-    });
-    heroSection.innerHTML = `
-        <div style="font-size: 22px; font-weight: bold; color: #00d4aa; margin-bottom: 6px;">${t('about.title')}</div>
-        <div style="font-size: 14px; color: #888; margin-bottom: 12px; letter-spacing: 2px;">Community Hub</div>
-        <div style="display: inline-block; background: rgba(0, 212, 170, 0.12); color: #00d4aa; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: bold; margin-bottom: 12px; border: 1px solid rgba(0, 212, 170, 0.2);">${versionString}</div>
-        <div style="font-size: 13px; color: #aaa; line-height: 1.6; max-width: 400px; margin: 0 auto;">${t('about.subtitle')}</div>
-    `;
-
-    // ===== 2. 核心优势区 =====
-    const advantageSection = createCardSection("✨ " + t('about.advantages_title'), `
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-            <div class="about-adv-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px;">
-                <div style="font-size: 20px; margin-bottom: 6px;">🔗</div>
-                <div style="font-weight: bold; color: #00d4aa; font-size: 13px; margin-bottom: 4px;">${t('about.adv_native_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.adv_native_desc')}</div>
-            </div>
-            <div class="about-adv-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px;">
-                <div style="font-size: 20px; margin-bottom: 6px;">⚡</div>
-                <div style="font-weight: bold; color: #00d4aa; font-size: 13px; margin-bottom: 4px;">${t('about.adv_speed_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.adv_speed_desc')}</div>
-            </div>
-            <div class="about-adv-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px;">
-                <div style="font-size: 20px; margin-bottom: 6px;">💬</div>
-                <div style="font-weight: bold; color: #00d4aa; font-size: 13px; margin-bottom: 4px;">${t('about.adv_im_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.adv_im_desc')}</div>
-            </div>
-            <div class="about-adv-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px;">
-                <div style="font-size: 20px; margin-bottom: 6px;">🛡️</div>
-                <div style="font-weight: bold; color: #00d4aa; font-size: 13px; margin-bottom: 4px;">${t('about.adv_sandbox_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.adv_sandbox_desc')}</div>
-            </div>
-        </div>
-    `);
-
-    // ===== 3. 主要功能区 =====
-    const featureSection = createCardSection("🎯 " + t('about.features_title'), `
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">1.</span>${t('about.feat_publish_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_publish_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">2.</span>${t('about.feat_social_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_social_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">3.</span>${t('about.feat_install_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_install_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">4.</span>${t('about.feat_download_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_download_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">5.</span>${t('about.feat_chat_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_chat_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">6.</span>${t('about.feat_account_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_account_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">7.</span>${t('about.feat_payment_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_payment_desc')}</div>
-            </div>
-            <div class="about-feat-card" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 12px;">
-                <div style="font-weight: bold; color: #ccc; font-size: 13px; margin-bottom: 4px;"><span style="color: #00d4aa; margin-right: 4px;">8.</span>${t('about.feat_protection_title')}</div>
-                <div style="font-size: 12px; color: #888; line-height: 1.5;">${t('about.feat_protection_desc')}</div>
-            </div>
-        </div>
-    `);
-
-    // ===== 4. 使用指南区 =====
-    const guideSection = createCardSection("📖 " + t('about.guide_title'), `
-        <div style="display: flex; flex-direction: column; gap: 12px; padding-left: 4px;">
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">1.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_install_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_install_desc')}</div>
-                </div>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">2.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_path_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_path_desc')}</div>
-                </div>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">3.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_update_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_update_desc')}</div>
-                </div>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">4.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_publish_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_publish_desc')}</div>
-                </div>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">5.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_buy_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_buy_desc')}</div>
-                </div>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">6.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_refund_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_refund_desc')}</div>
-                </div>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">7.</span>
-                <div>
-                    <div style="font-size: 13px; font-weight: bold; color: #ccc; margin-bottom: 2px;">${t('about.guide_withdraw_title')}</div>
-                    <div style="font-size: 12px; color: #888; line-height: 1.6;">${t('about.guide_withdraw_desc')}</div>
-                </div>
-            </div>
-        </div>
-    `);
-
-    // ===== 5. 用户价值区 =====
-    const userValueSection = createCardSection("👤 " + t('about.benefits_title'), `
-        <div style="display: flex; flex-direction: column; gap: 10px; padding-left: 4px;">
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">1.</span>
-                <span style="font-size: 13px; color: #ccc; line-height: 1.6;">${t('about.benefit_1')}</span>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">2.</span>
-                <span style="font-size: 13px; color: #ccc; line-height: 1.6;">${t('about.benefit_2')}</span>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">3.</span>
-                <span style="font-size: 13px; color: #ccc; line-height: 1.6;">${t('about.benefit_3')}</span>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">4.</span>
-                <span style="font-size: 13px; color: #ccc; line-height: 1.6;">${t('about.benefit_4')}</span>
-            </div>
-            <div style="display: flex; align-items: flex-start; gap: 8px;">
-                <span style="color: #00d4aa; font-weight: bold; font-size: 13px; flex-shrink: 0;">5.</span>
-                <span style="font-size: 13px; color: #ccc; line-height: 1.6;">${t('about.benefit_5')}</span>
-            </div>
-        </div>
-    `);
-
-    // ===== 6. 注意事项区 =====
-    const warningSection = document.createElement("div");
-    Object.assign(warningSection.style, {
-        background: "rgba(240, 160, 48, 0.05)",
-        borderRadius: "10px",
-        padding: "16px",
-        borderTop: "1px solid rgba(240, 160, 48, 0.15)",
-        borderRight: "1px solid rgba(240, 160, 48, 0.15)",
-        borderBottom: "1px solid rgba(240, 160, 48, 0.15)",
-        borderLeft: "3px solid #f0a030"
-    });
-    warningSection.innerHTML = `
-        <div style="font-size: 15px; font-weight: bold; color: #f0a030; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;">
-            <span>⚠️</span> ${t('about.warning_title')}
-        </div>
-        <div style="display: flex; flex-direction: column; gap: 8px;">
-            <div style="font-size: 13px; color: #ccc; line-height: 1.6;">
-                <strong style="color: #f0a030;">${t('about.warning_login_title')}</strong>${t('about.warning_login_desc')}
-            </div>
-            <div style="font-size: 13px; color: #ccc; line-height: 1.6;">
-                <strong style="color: #f0a030;">${t('about.warning_account_title')}</strong>${t('about.warning_account_desc')}
-            </div>
-        </div>
-    `;
-
-    // ===== 7. 关于作者区 =====
-    const authorSection = document.createElement("div");
-    Object.assign(authorSection.style, { ...CARD_BASE_STYLE, textAlign: "center" });
-    authorSection.innerHTML = `
-        <div style="font-size: 15px; font-weight: bold; color: #00d4aa; margin-bottom: 12px;">${t('about.author_title')}</div>
-        <a href="https://space.bilibili.com/2114638644" target="_blank" style="text-decoration: none; display: inline-block;">
-            <img src="https://img.shields.io/badge/bilibili-猪的飞行梦-00A1D6?logo=bilibili&logoColor=white" alt="Bilibili" style="border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-        </a>
-        <div style="margin-top: 12px; font-size: 12px; color: #666;">
-            ${t('about.author_thanks')}
-        </div>
-    `;
-
-    // ===== 返回按钮 =====
-    const backBtn = document.createElement("button");
-    Object.assign(backBtn.style, {
-        background: "rgba(51,51,51,0.8)",
-        border: "1px solid rgba(85,85,85,0.8)",
-        color: "#fff",
-        padding: "6px 14px",
-        borderRadius: "6px",
-        cursor: "pointer",
-        fontSize: "13px",
-        fontWeight: "bold",
-        display: "flex",
-        alignItems: "center",
-        gap: "6px",
-        boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
-        width: "fit-content",
-        transition: "0.2s",
-        marginLeft: "14px",
-        marginTop: "14px",
-        marginBottom: "4px"
-    });
-    backBtn.innerHTML = "⬅ " + t('common.back');
-    backBtn.onmouseover = () => {
-        backBtn.style.background = "#4CAF50";
-        backBtn.style.borderColor = "#4CAF50";
-    };
-    backBtn.onmouseout = () => {
-        backBtn.style.background = "rgba(51,51,51,0.8)";
-        backBtn.style.borderColor = "rgba(85,85,85,0.8)";
-    };
-    backBtn.onclick = () => {
-        window.dispatchEvent(new CustomEvent("comfy-route-back"));
-    };
-
-    // 组装
-    container.appendChild(backBtn);
-    container.appendChild(heroSection);
-    container.appendChild(advantageSection);
-    container.appendChild(featureSection);
-    container.appendChild(guideSection);
-    container.appendChild(userValueSection);
-    container.appendChild(warningSection);
-    container.appendChild(authorSection);
-
-    return container;
-}
-
-// 辅助函数：创建带标题的卡片分区（titleHtml 支持纯文本或 HTML）
-function createCardSection(titleHtml, contentHtml) {
-    const section = document.createElement("div");
-    Object.assign(section.style, CARD_BASE_STYLE);
-    section.innerHTML = `
-        <div style="font-size: 15px; font-weight: bold; color: #00d4aa; margin-bottom: 12px;">${titleHtml}</div>
-        ${contentHtml}
-    `;
-    return section;
-}
-
-// ==========================================
-// 🚀 显示关于信息（通过路由系统）
-// ==========================================
-export async function showAboutInfo(currentUser) {
-    // 动态获取版本配置
-    const versionConfig = await getVersionConfig();
-    const versionString = formatVersionString(versionConfig);
-    const stageLabel = getStageLabel(versionConfig.stage);
-
-    const view = createAboutView(versionString, stageLabel);
-    window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
-}
-
-// 导出版本获取函数供其他组件使用
-export { getVersionConfig };
+// 关于页面：纯文本内容、共享主题与受控的公开版本刷新。
+import { request } from "../core/网络请求API.js";
+import { UI } from "../core/全局配置.js";
+import { removeCacheByPrefix } from "../core/网络请求_缓存管理.js";
+import { t } from "./用户体验增强.js";
+
+let cachedVersionConfig = null;
+let pendingVersionRequest = null;
+let versionGeneration = 0;
+let nextViewId = 0;
+
+function normalizeVersion(config) {
+    if (!config || typeof config !== "object" || Array.isArray(config)) return null;
+    if (!["alpha", "beta", "rc", "stable"].includes(config.stage)) return null;
+    if (![config.major, config.minor, config.patch].every(value => Number.isSafeInteger(value) && value >= 0)) return null;
+    return { stage: config.stage, major: config.major, minor: config.minor, patch: config.patch };
+}
+
+export function clearVersionCache() {
+    versionGeneration++;
+    cachedVersionConfig = null;
+    pendingVersionRequest = null;
+    removeCacheByPrefix('api_/api/public/project-version');
+}
+
+export async function getVersionConfig() {
+    if (cachedVersionConfig) return { ...cachedVersionConfig };
+    if (!pendingVersionRequest) {
+        const generation = versionGeneration;
+        const pending = Promise.resolve().then(() => request('/api/public/project-version',
+            generation > 0 ? { noCache: true } : undefined)).then(res => {
+            const config = res?.status === "success" ? normalizeVersion(res.data) : null;
+            if (!config) throw new Error("Invalid project version");
+            if (generation !== versionGeneration) return cachedVersionConfig || UI.DEFAULT_PROJECT_VERSION;
+            cachedVersionConfig = Object.freeze(config);
+            return config;
+        }).catch(() => {
+            console.warn('公开版本信息无法刷新');
+            return { ...UI.DEFAULT_PROJECT_VERSION };
+        }).finally(() => {
+            if (pendingVersionRequest === pending) pendingVersionRequest = null;
+        });
+        pendingVersionRequest = pending;
+    }
+    return { ...await pendingVersionRequest };
+}
+
+export function getStageLabel(stage) {
+    switch (stage) {
+        case "alpha": return t('about.stage_alpha');
+        case "beta": return t('about.stage_beta');
+        case "rc": return t('about.stage_rc');
+        case "stable": return t('about.stage_stable');
+        default: return t('about.stage_unknown');
+    }
+}
+
+export function formatVersionString(config) {
+    const version = normalizeVersion(config);
+    if (!version) return t('about.version_unknown');
+    return `V${version.major}.${version.minor}.${version.patch} ${getStageLabel(version.stage)}`;
+}
+
+function element(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text !== undefined) node.textContent = text;
+    return node;
+}
+
+function section(title, children) {
+    const node = element('section', 'about-section');
+    const heading = element('h2', 'about-section__title', title);
+    heading.id = `ranking-about-heading-${++nextViewId}`;
+    node.setAttribute('aria-labelledby', heading.id);
+    node.append(heading, ...children);
+    return node;
+}
+
+function grid(entries, ordered = false) {
+    const node = element(ordered ? 'ol' : 'ul', 'about-grid');
+    for (const [title, description, icon] of entries) {
+        const item = element('li', 'about-grid__item');
+        if (icon) {
+            const decoration = element('span', 'about-grid__icon', icon);
+            decoration.setAttribute('aria-hidden', 'true');
+            item.appendChild(decoration);
+        }
+        item.append(element('h3', 'about-item__title', title), element('p', 'about-description', description));
+        node.appendChild(item);
+    }
+    return node;
+}
+
+export function createAboutView(versionString, stageLabel) {
+    const container = element('div', 'about-view');
+    const back = element('button', 'about-back', '⬅ ' + t('common.back'));
+    back.type = 'button';
+    back.addEventListener('click', () => window.dispatchEvent(new CustomEvent('comfy-route-back')));
+    const hero = element('header', 'about-hero');
+    const title = element('h1', 'about-hero__title', t('about.title'));
+    title.id = `ranking-about-title-${++nextViewId}`;
+    container.setAttribute('aria-labelledby', title.id);
+    hero.append(title, element('p', 'about-hero__brand', t('about.brand')),
+        element('p', 'about-version', typeof versionString === 'string' ? versionString : t('about.version_unknown')),
+        element('p', 'about-description', t('about.subtitle')));
+    const advantages = section(t('about.advantages_title'), [grid([
+        [t('about.adv_native_title'), t('about.adv_native_desc'), '🔗'],
+        [t('about.adv_speed_title'), t('about.adv_speed_desc'), '⚡'],
+        [t('about.adv_im_title'), t('about.adv_im_desc'), '💬'],
+        [t('about.adv_sandbox_title'), t('about.adv_sandbox_desc'), '🛡️']
+    ])]);
+    const features = section(t('about.features_title'), [grid([
+        [t('about.feat_publish_title'), t('about.feat_publish_desc')],
+        [t('about.feat_social_title'), t('about.feat_social_desc')],
+        [t('about.feat_install_title'), t('about.feat_install_desc')],
+        [t('about.feat_download_title'), t('about.feat_download_desc')],
+        [t('about.feat_chat_title'), t('about.feat_chat_desc')],
+        [t('about.feat_account_title'), t('about.feat_account_desc')],
+        [t('about.feat_payment_title'), t('about.feat_payment_desc')],
+        [t('about.feat_protection_title'), t('about.feat_protection_desc')]
+    ], true)]);
+    const guideList = element('ol', 'about-list');
+    for (const [heading, description] of [
+        [t('about.guide_install_title'), t('about.guide_install_desc')],
+        [t('about.guide_path_title'), t('about.guide_path_desc')],
+        [t('about.guide_update_title'), t('about.guide_update_desc')],
+        [t('about.guide_publish_title'), t('about.guide_publish_desc')],
+        [t('about.guide_buy_title'), t('about.guide_buy_desc')],
+        [t('about.guide_refund_title'), t('about.guide_refund_desc')],
+        [t('about.guide_withdraw_title'), t('about.guide_withdraw_desc')]
+    ]) {
+        const item = element('li');
+        item.append(element('h3', 'about-item__title', heading), element('p', 'about-description', description));
+        guideList.appendChild(item);
+    }
+    const benefits = element('ol', 'about-list');
+    for (const text of [t('about.benefit_1'), t('about.benefit_2'), t('about.benefit_3'), t('about.benefit_4'), t('about.benefit_5')]) {
+        benefits.appendChild(element('li', 'about-benefit', text));
+    }
+    const warningCopy = [];
+    for (const [heading, description] of [
+        [t('about.warning_login_title'), t('about.warning_login_desc')],
+        [t('about.warning_account_title'), t('about.warning_account_desc')]
+    ]) {
+        const paragraph = element('p', 'about-warning__copy');
+        paragraph.append(element('strong', '', heading), document.createTextNode(description));
+        warningCopy.push(paragraph);
+    }
+    const warning = section(t('about.warning_title'), warningCopy);
+    warning.classList.add('about-section--warning');
+    const authorLink = element('a', 'about-author__link');
+    authorLink.href = UI.ABOUT.AUTHOR_URL;
+    authorLink.target = '_blank';
+    authorLink.rel = 'noopener noreferrer';
+    const badge = element('img', 'about-author__badge');
+    badge.src = UI.ABOUT.AUTHOR_BADGE_URL;
+    badge.alt = '';
+    badge.loading = 'lazy';
+    authorLink.appendChild(badge);
+    // 保留文字入口，即使远端徽章图片无法加载也可操作。
+    authorLink.appendChild(element('span', '', t('about.author_link')));
+    const author = section(t('about.author_title'), [authorLink, element('p', 'about-description', t('about.author_thanks'))]);
+    author.classList.add('about-section--author');
+    container.append(back, hero, advantages, features, section(t('about.guide_title'), [guideList]),
+        section(t('about.benefits_title'), [benefits]), warning, author);
+    return container;
+}
+
+export async function showAboutInfo(currentUser) {
+    const generation = versionGeneration;
+    const view = createAboutView(formatVersionString(cachedVersionConfig || UI.DEFAULT_PROJECT_VERSION));
+    window.dispatchEvent(new CustomEvent('comfy-route-view', { detail: { view } }));
+    // 先显示完整页面，网络只补新原节点；不在请求完成后重新导航。
+    getVersionConfig().then(config => {
+        if (view.isConnected && generation === versionGeneration) {
+            view.querySelector('.about-version').textContent = formatVersionString(config);
+        }
+    });
+}

前端页面/components/动画音效引擎.js

@@ -13,6 +13,16 @@
 
 import { getSettings } from "./全局设置组件.js";
 
+function prefersReducedMotion() {
+    try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true; }
+    catch { return false; }
+}
+
+export function scrollCardIntoView(card) {
+    const instant = !getSettings().enableAnimations || prefersReducedMotion();
+    card.scrollIntoView({ behavior: instant ? 'instant' : 'smooth', block: 'center' });
+}
+
 // ==========================================
 // 🔊 音效管理
 // ==========================================
@@ -360,7 +370,7 @@ function injectAnimationStyles() {
  */
 export function applyCardAnimation(card, animationType, index, totalVisible = 10, silent = false) {
     const settings = getSettings();
-    if (!settings.enableAnimations) return;
+    if (!settings.enableAnimations || prefersReducedMotion()) return;
     
     // 确保样式已注入
     injectAnimationStyles();
@@ -436,6 +446,12 @@ export function applyCardAnimation(card, animationType, index, totalVisible = 10
 // 容器 -> 观察器映射（同一视图的首次渲染与分页追加复用同一观察器）
 const _viewportObservers = new WeakMap();
 
+export function stopViewportAnimations(container) {
+    const observer = _viewportObservers.get(container);
+    _viewportObservers.delete(container);
+    observer?.disconnect();
+}
+
 /**
  * ✨ 视口感知卡片动画：
  * - 已在视口内的卡片立即依次错开播放载入动画
@@ -448,23 +464,23 @@ const _viewportObservers = new WeakMap();
  */
 export function applyViewportAnimations(container, cards, animationType, isFirstBatch = false) {
     const settings = getSettings();
-    if (!settings.enableAnimations) return;
+    if (!settings.enableAnimations || prefersReducedMotion()) {
+        stopViewportAnimations(container);
+        return;
+    }
 
     // 确保样式已注入
     injectAnimationStyles();
 
     // 视图重建：停止上一批残留卡片的补播观察
     if (isFirstBatch) {
-        const oldObserver = _viewportObservers.get(container);
-        if (oldObserver) {
-            oldObserver.disconnect();
-            _viewportObservers.delete(container);
-        }
+        stopViewportAnimations(container);
     }
 
     let observer = _viewportObservers.get(container);
     if (!observer) {
         observer = new IntersectionObserver((entries) => {
+            if (_viewportObservers.get(container) !== observer) return;
             // 本批进入视口的卡片，按文档顺序（从上到下）排列后错开播放
             const entering = entries
                 .filter(e => e.isIntersecting)

前端页面/components/卡片导航生命周期.js

@@ -0,0 +1,32 @@
+// 按视图管理导航代次，不清理榜单数据或滚动位置。
+export function createCardNavigationScope(target, isCurrent, { captureSession = () => () => true, storageKeys = [] } = {}) {
+    let generation = 0;
+    let disposed = false;
+    let identityRevoked = false;
+    const isViewSessionCurrent = captureSession();
+    const events = ['comfy-route-view', 'comfy-route-back'];
+    const identityEvents = ['comfy-user-login', 'comfy-user-logout', 'comfy-ranking-auth-expired'];
+    const invalidate = () => { generation++; };
+    const revokeIdentity = () => { identityRevoked = true; invalidate(); };
+    const onStorage = event => {
+        if (event.key === null || storageKeys.includes(event.key)) revokeIdentity();
+    };
+    for (const event of events) target.addEventListener(event, invalidate);
+    for (const event of identityEvents) target.addEventListener(event, revokeIdentity);
+    target.addEventListener('storage', onStorage);
+    return {
+        capture() {
+            const captured = generation;
+            const isSessionCurrent = captureSession();
+            return () => !disposed && !identityRevoked && captured === generation && isCurrent() && isViewSessionCurrent() && isSessionCurrent();
+        },
+        dispose() {
+            if (disposed) return;
+            disposed = true;
+            generation++;
+            for (const event of events) target.removeEventListener(event, invalidate);
+            for (const event of identityEvents) target.removeEventListener(event, revokeIdentity);
+            target.removeEventListener('storage', onStorage);
+        },
+    };
+}

前端页面/components/图片展示测试.js

@@ -7,6 +7,7 @@
 // ==========================================
 
 import { escapeHtml } from "../core/全局配置.js";
+import { t } from "./用户体验增强.js";
 
 // ==========================================
 // 🎨 CSS样式定义（CSS-in-JS模式）
@@ -176,12 +177,24 @@ const VIEWER_STYLES = `
     opacity: 0;
     transition: opacity 0.3s ease;
     z-index: 15;
+    border: 0;
+    padding: 0;
+    color: inherit;
+    font: inherit;
 }
 
 .cyber-nav-zone:hover {
     opacity: 1;
 }
 
+.cyber-nav-zone:focus-visible,
+.cyber-close-btn:focus-visible,
+.cyber-autoplay-btn:focus-visible {
+    opacity: 1;
+    outline: 3px solid #00ff96;
+    outline-offset: -4px;
+}
+
 .cyber-nav-zone.left {
     left: 0;
     background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
@@ -256,6 +269,9 @@ const VIEWER_STYLES = `
     border-radius: 4px;
     overflow: hidden;
     cursor: pointer;
+    border: 0;
+    padding: 0;
+    background: transparent;
     border: 2px solid transparent;
     transition: all 0.3s ease;
     opacity: 0.5;
@@ -277,6 +293,11 @@ const VIEWER_STYLES = `
     opacity: 1;
 }
 
+.cyber-thumb:focus-visible {
+    outline: 3px solid #00ff96;
+    outline-offset: 2px;
+}
+
 /* 键盘提示 */
 .cyber-keyboard-hint {
     font-size: 12px;
@@ -393,6 +414,7 @@ class CyberImageViewer {
         this._autoPlayTimerId = null;
         this._autoPlayInterval = 1000; // 默认1秒展示时间
         this._autoPlayStateChangeCallbacks = []; // 状态变化回调
+        this._returnFocus = document.activeElement;
     }
 
     /**
@@ -436,11 +458,15 @@ class CyberImageViewer {
         // 创建主容器
         this.container = document.createElement('div');
         this.container.className = 'cyber-image-viewer';
+        this.container.setAttribute('role', 'dialog');
+        this.container.setAttribute('aria-modal', 'true');
+        this.container.setAttribute('aria-label', t('image.viewer.dialog'));
+        this.container.tabIndex = -1;
         this.container.style.background = background;
 
         this.container.innerHTML = `
             <!-- 关闭按钮 -->
-            <button class="cyber-close-btn" title="关闭 (ESC)">×</button>
+            <button type="button" class="cyber-close-btn" title="${escapeHtml(t('image.viewer.close'))}" aria-label="${escapeHtml(t('image.viewer.close'))}">×</button>
 
             <!-- 图片主容器 -->
             <div class="cyber-image-container">
@@ -451,23 +477,23 @@ class CyberImageViewer {
             </div>
 
             <!-- 左右导航区域 -->
-            <div class="cyber-nav-zone left" title="上一张 (←)">
+            <button type="button" class="cyber-nav-zone left" title="${escapeHtml(t('image.viewer.previous'))}" aria-label="${escapeHtml(t('image.viewer.previous'))}">
                 <div class="cyber-nav-arrow">❮</div>
-            </div>
-            <div class="cyber-nav-zone right" title="下一张 (→)">
+            </button>
+            <button type="button" class="cyber-nav-zone right" title="${escapeHtml(t('image.viewer.next'))}" aria-label="${escapeHtml(t('image.viewer.next'))}">
                 <div class="cyber-nav-arrow">❯</div>
-            </div>
+            </button>
 
             <!-- 底部信息栏 -->
             <div class="cyber-info-bar">
-                <div class="cyber-counter">
+                <div class="cyber-counter" role="status" aria-live="polite" aria-atomic="true">
                     <span class="current">1</span>
                     <span class="separator"> / </span>
                     <span class="total">${this.imageUrls.length}</span>
                 </div>
                 <div class="cyber-thumbnails"></div>
                 <div style="display: flex; align-items: center; gap: 15px;">
-                    <button class="cyber-autoplay-btn" title="自动播放 (空格)">
+                    <button type="button" class="cyber-autoplay-btn" title="${escapeHtml(t('image.viewer.autoplay'))}" aria-label="${escapeHtml(t('image.viewer.autoplay'))}">
                         <svg viewBox="0 0 24 24" class="autoplay-icon-play">
                             <path d="M8 5v14l11-7z"/>
                         </svg>
@@ -476,9 +502,9 @@ class CyberImageViewer {
                         </svg>
                     </button>
                     <div class="cyber-keyboard-hint">
-                        <span><span class="cyber-key">←</span> 上一张</span>
-                        <span><span class="cyber-key">→</span> 下一张</span>
-                        <span><span class="cyber-key">ESC</span> 关闭</span>
+                        <span><span class="cyber-key">←</span> ${escapeHtml(t('image.viewer.previous_short'))}</span>
+                        <span><span class="cyber-key">→</span> ${escapeHtml(t('image.viewer.next_short'))}</span>
+                        <span><span class="cyber-key">ESC</span> ${escapeHtml(t('image.viewer.close_short'))}</span>
                     </div>
                 </div>
             </div>
@@ -587,12 +613,12 @@ class CyberImageViewer {
         
         if (this._autoPlayEnabled) {
             btn.classList.add('active');
-            btn.title = '暂停自动播放 (空格)';
+            btn.title = t('image.viewer.pause');
             playIcon.style.display = 'none';
             pauseIcon.style.display = 'block';
         } else {
             btn.classList.remove('active');
-            btn.title = '自动播放 (空格)';
+            btn.title = t('image.viewer.autoplay');
             playIcon.style.display = 'block';
             pauseIcon.style.display = 'none';
         }
@@ -736,6 +762,18 @@ class CyberImageViewer {
     _bindEvents() {
         // 键盘导航
         this._keydownHandler = (e) => {
+            if (e.key === 'Tab') {
+                const controls = [...this.container.querySelectorAll('button:not([disabled]), [tabindex="0"]')];
+                if (!controls.length) { e.preventDefault(); this.container.focus(); return; }
+                const first = controls[0];
+                const last = controls[controls.length - 1];
+                if (e.shiftKey && (document.activeElement === first || !this.container.contains(document.activeElement))) {
+                    e.preventDefault(); last.focus();
+                } else if (!e.shiftKey && (document.activeElement === last || !this.container.contains(document.activeElement))) {
+                    e.preventDefault(); first.focus();
+                }
+                return;
+            }
             if (e.key === 'Escape') {
                 this.close();
             } else if (e.key === 'ArrowLeft') {
@@ -785,8 +823,11 @@ class CyberImageViewer {
         const maxThumbs = Math.min(this.imageUrls.length, 7);
         
         for (let i = 0; i < maxThumbs; i++) {
-            const thumb = document.createElement('div');
+            const thumb = document.createElement('button');
+            thumb.type = 'button';
             thumb.className = 'cyber-thumb' + (i === this.currentIndex ? ' active' : '');
+            thumb.setAttribute('aria-label', t('image.viewer.image_position', { current: i + 1, total: this.imageUrls.length }));
+            thumb.setAttribute('aria-current', i === this.currentIndex ? 'true' : 'false');
             // 🔒 XSS防护：图片 URL 来自其他用户发布的内容，写入 innerHTML 前必须转义
             thumb.innerHTML = `<img src="${escapeHtml(this.imageUrls[i])}" alt="">`;
             thumb.addEventListener('click', (e) => {
@@ -812,6 +853,7 @@ class CyberImageViewer {
         const thumbs = this.elements.thumbnails.querySelectorAll('.cyber-thumb');
         thumbs.forEach((thumb, index) => {
             thumb.classList.toggle('active', index === this.currentIndex);
+            thumb.setAttribute('aria-current', index === this.currentIndex ? 'true' : 'false');
         });
     }
 
@@ -851,6 +893,7 @@ class CyberImageViewer {
 
         // 更新计数器
         this.elements.counterCurrent.textContent = index + 1;
+        this.elements.mainImage.alt = t('image.viewer.image_position', { current: index + 1, total: this.imageUrls.length });
         this._updateThumbnails();
 
         // 预加载相邻图片
@@ -863,13 +906,13 @@ class CyberImageViewer {
     _loadImageAsync(url) {
         return new Promise((resolve, reject) => {
             const img = new Image();
-            console.log('📥 开始加载图片:', url?.substring(0, 100) + '...');
+            console.log('📥 开始加载图片');
             img.onload = () => {
-                console.log('✅ 图片加载成功:', url?.substring(0, 100) + '...');
+                console.log('✅ 图片加载成功');
                 resolve(img);
             };
             img.onerror = (err) => {
-                console.error('❌ 图片加载失败:', url?.substring(0, 100) + '...', err);
+                console.error('❌ 图片加载失败:', err?.name || 'Error');
                 reject(new Error('图片加载失败'));
             };
             img.src = url;
@@ -911,7 +954,7 @@ class CyberImageViewer {
         const imgSrc = img.src;
 
         // 调试日志
-        console.log('🎬 方块聚合动画开始 - 图片URL:', imgSrc?.substring(0, 100) + '...');
+        console.log('🎬 方块聚合动画开始');
 
         // 获取wrapper的实际尺寸
         const rect = wrapper.getBoundingClientRect();
@@ -1530,6 +1573,8 @@ class CyberImageViewer {
      * 关闭查看器
      */
     close() {
+        if (this._isClosing) return;
+        this._isClosing = true;
         // 停止自动播放并清除定时器
         this._stopAutoPlay();
         
@@ -1546,6 +1591,7 @@ class CyberImageViewer {
                 if (this.container.parentNode) {
                     this.container.parentNode.removeChild(this.container);
                 }
+                if (this._returnFocus?.isConnected && typeof this._returnFocus.focus === 'function') this._returnFocus.focus();
             }, 300);
         });
     }
@@ -1571,13 +1617,13 @@ export function openImageViewer(imageUrls, startIndex = 0, options = {}) {
     }
 
     console.log('🎬 openImageViewer 被调用:', 'URL数量:', imageUrls.length, '起始索引:', startIndex);
-    console.log('🖼️ 图片URLs:', imageUrls.map(u => u?.substring(0, 80) + '...'));
 
     const viewer = new CyberImageViewer(imageUrls, startIndex);
     const container = viewer.create(options);
 
     // 添加到body
     document.body.appendChild(container);
+    viewer.elements.closeBtn.focus();
 
     // 添加入场动画
     requestAnimationFrame(() => {

前端页面/components/图片沙盒组件.js

@@ -111,7 +111,7 @@ export function getCoverSandboxHTML(imageSource, lazyLoad = true) {
                 <button class="btn-zoom-out" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold;">-</button>
                 <button class="btn-zoom-reset" style="background: #333; color: #fff; border: 1px solid #555; height: 28px; padding: 0 8px; border-radius: 4px; cursor: pointer; font-size: 12px;">${t('common.reset')}</button>
                 <button class="btn-zoom-in" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold;">+</button>
-                <button class="btn-fullscreen" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-left: 5px;" title="全屏播放">⛶</button>
+                <button class="btn-fullscreen" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-left: 5px;" title="${escapeHtml(t('image.viewer.fullscreen'))}">⛶</button>
             </div>
             <div class="sliders-wrapper" style="opacity: 0.2; transition: 0.3s; position: absolute; width: 100%; height: 100%; top:0; left:0; pointer-events: none;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=0.2">
                 <input type="range" class="slider-x" min="-400" max="400" value="0" style="position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 80%; pointer-events: auto; z-index: 10;">
@@ -262,7 +262,7 @@ export function setupImageSandboxEvents(detailView) {
             const currentIndex = parseInt(viewport.getAttribute('data-current') || '0', 10);
             
             // 🔍 调试日志：输出收集到的图片URL
-            console.log('🖼️ 全屏播放图片:', imageUrls, '当前索引:', currentIndex);
+            console.log('🖼️ 全屏播放图片:', '图片数量:', imageUrls.length, '当前索引:', currentIndex);
             
             if (imageUrls.length > 0) {
                 // 打开全屏图像播放器（使用静态import，避免动态import路径问题）
@@ -272,11 +272,11 @@ export function setupImageSandboxEvents(detailView) {
                     console.error('无法打开图像播放器:', err);
                     // 显示用户可见的错误提示
                     import('./UI交互提示组件.js').then(module => {
-                        module.showToast('图像播放器加载失败，请刷新页面重试', 'error');
+                        module.showToast(t('image.viewer.load_failed'), 'error');
                     }).catch(() => {
                         // 动态import也失败时，创建简单的内联提示
                         const fallback = document.createElement('div');
-                        fallback.textContent = '图像播放器加载失败，请刷新页面重试';
+                        fallback.textContent = t('image.viewer.load_failed');
                         Object.assign(fallback.style, { position: 'fixed', top: '50px', left: '50%', transform: 'translateX(-50%)', background: '#F44336', color: '#fff', padding: '10px 20px', borderRadius: '8px', zIndex: '10000', fontSize: '14px' });
                         document.body.appendChild(fallback);
                         setTimeout(() => fallback.remove(), 3000);

前端页面/components/图片裁剪组件.js

@@ -35,8 +35,10 @@ function _isTouchDevice() {
  * @param {number} maxSizeMB - 最大输出大小（MB）
  * @returns {Promise<File|null>} - 裁剪后的文件或 null（取消）
  */
-export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片", maxSizeMB = 3) {
+export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title'), maxSizeMB = 3) {
     return new Promise((resolve) => {
+        const previousFocus = document.activeElement;
+        const dialogId = `image-crop-dialog-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
         // 创建遮罩层
         const overlay = document.createElement("div");
         Object.assign(overlay.style, {
@@ -47,6 +49,11 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
 
         // 创建弹窗容器
         const modal = document.createElement("div");
+        modal.setAttribute("role", "dialog");
+        modal.setAttribute("aria-modal", "true");
+        modal.setAttribute("aria-labelledby", `${dialogId}-title`);
+        modal.setAttribute("aria-describedby", `${dialogId}-hint`);
+        modal.setAttribute("tabindex", "-1");
         Object.assign(modal.style, {
             background: "var(--comfy-input-bg)", borderRadius: "12px", padding: "20px",
             maxWidth: "90vw", maxHeight: "90vh", display: "flex", flexDirection: "column",
@@ -66,8 +73,8 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
         // 📱 触控设备与鼠标设备的操作提示区分（移动端无滚轮/拖动概念）；文案走词典，随界面语言切换
         const gestureHint = _isTouchDevice() ? t('crop.gesture_hint_touch') : t('crop.gesture_hint_mouse');
         header.innerHTML = `
-            <span style="font-size: 16px; font-weight: bold; color: #fff;">✂️ ${escapeHtml(title)}</span>
-            <span style="font-size: 12px; color: #888;">${escapeHtml(t('crop.ratio_label'))} ${ratioText} | ${escapeHtml(gestureHint)}</span>
+            <span id="${dialogId}-title" role="heading" aria-level="2" style="font-size: 16px; font-weight: bold; color: #fff;">✂️ ${escapeHtml(title)}</span>
+            <span id="${dialogId}-hint" style="font-size: 12px; color: #888;">${escapeHtml(t('crop.ratio_label'))} ${ratioText} | ${escapeHtml(gestureHint)}</span>
         `;
 
         // 裁剪区域容器
@@ -166,8 +173,28 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
         // 🔧 P3优化：ESC 键关闭
         function handleKeyDown(e) {
             if (e.key === 'Escape') {
+                e.preventDefault();
                 cleanup();
                 resolve(null);
+                return;
+            }
+            if (e.key !== 'Tab') return;
+            const focusable = Array.from(modal.querySelectorAll(
+                'button:not(:disabled), input:not(:disabled), [tabindex]:not([tabindex="-1"])'
+            ));
+            if (!focusable.length) {
+                e.preventDefault();
+                modal.focus();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (e.shiftKey && (document.activeElement === first || !modal.contains(document.activeElement))) {
+                e.preventDefault();
+                last.focus();
+            } else if (!e.shiftKey && (document.activeElement === last || !modal.contains(document.activeElement))) {
+                e.preventDefault();
+                first.focus();
             }
         }
         document.addEventListener("keydown", handleKeyDown);
@@ -308,8 +335,8 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
             display: "flex", alignItems: "center", gap: "10px", marginTop: "15px", padding: "0 10px"
         });
         sliderContainer.innerHTML = `
-            <span style="color: #888; font-size: 12px;">🔍 缩放</span>
-            <input type="range" id="crop-scale-slider" min="100" max="500" value="100" 
+            <span style="color: #888; font-size: 12px;">🔍 ${escapeHtml(t('crop.zoom_label'))}</span>
+            <input type="range" id="crop-scale-slider" min="100" max="500" value="100" aria-label="${escapeHtml(t('crop.zoom_label'))}" aria-valuetext="100%"
                    style="flex: 1; accent-color: #4CAF50;">
             <span id="crop-scale-value" style="color: #4CAF50; font-size: 12px; min-width: 40px;">100%</span>
         `;
@@ -320,8 +347,8 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
             display: "flex", gap: "10px", marginTop: "15px", justifyContent: "flex-end"
         });
         buttonContainer.innerHTML = `
-            <button id="btn-crop-cancel" style="padding: 10px 20px; background: transparent; border: 1px solid #555; color: #ccc; border-radius: 6px; cursor: pointer; font-size: 13px;">取消</button>
-            <button id="btn-crop-confirm" style="padding: 10px 30px; background: #4CAF50; border: none; color: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold;">✂️ 确认裁剪并上传</button>
+            <button id="btn-crop-cancel" type="button" style="padding: 10px 20px; background: transparent; border: 1px solid #555; color: #ccc; border-radius: 6px; cursor: pointer; font-size: 13px;">${escapeHtml(t('common.cancel'))}</button>
+            <button id="btn-crop-confirm" type="button" style="padding: 10px 30px; background: #4CAF50; border: none; color: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold;">✂️ ${escapeHtml(t('crop.confirm'))}</button>
         `;
 
         // 组装DOM
@@ -332,6 +359,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
         modal.appendChild(buttonContainer);
         overlay.appendChild(modal);
         document.body.appendChild(overlay);
+        modal.querySelector("#btn-crop-cancel").focus();
 
         // 绑定缩放滑块事件
         setTimeout(() => {
@@ -345,6 +373,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
                 
                 scale = minScale * (parseInt(slider.value) / 100);
                 scaleValue.textContent = `${slider.value}%`;
+                slider.setAttribute("aria-valuetext", `${slider.value}%`);
                 updateImagePosition();
             };
 
@@ -357,7 +386,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
             // 确认裁剪按钮
             modal.querySelector("#btn-crop-confirm").onclick = async () => {
                 const btn = modal.querySelector("#btn-crop-confirm");
-                btn.textContent = "⏳ 处理中...";
+                btn.textContent = `⏳ ${t('crop.processing')}`;
                 btn.disabled = true;
 
                 try {
@@ -365,7 +394,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
                     cleanup();
                     resolve(croppedFile);
                 } catch (err) {
-                    btn.textContent = "❌ 处理失败，重试";
+                    btn.textContent = t('crop.process_failed');
                     btn.disabled = false;
                     console.error("裁剪失败:", err);
                 }
@@ -385,6 +414,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = "裁剪图片
             cropContainer.removeEventListener("touchend", handleTouchEnd);
             cropContainer.removeEventListener("touchcancel", handleTouchEnd);
             overlay.remove();
+            if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus();
         }
 
         // 点击遮罩关闭

前端页面/components/彩蛋动画引擎.js

@@ -8,9 +8,8 @@
 /**
  * 在新标签页打开彩蛋动画页面
  */
-export function openEasterEggPage() {
-    const html = generateFullHTML();
-    const newWindow = window.open('', '_blank');
+export function openEasterEggPage(newWindow, { language, title, hint, speedLabel } = {}) {
+    const html = generateFullHTML({ language, title, hint, speedLabel });
     if (newWindow) {
         newWindow.document.write(html);
         newWindow.document.close();
@@ -20,13 +19,15 @@ export function openEasterEggPage() {
 /**
  * 生成完整的彩蛋动画HTML页面
  */
-function generateFullHTML() {
+function generateFullHTML({ language = 'zh-CN', title = '猪的飞行梦', hint = '鼠标移动改变视角 | PgUp加速 PgDn减速 | ESC关闭', speedLabel = '速度' } = {}) {
+    const safeLanguage = language === 'en-US' ? 'en-US' : 'zh-CN';
+    const speedLabelLiteral = JSON.stringify(speedLabel);
     return `<!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="${safeLanguage}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>🐷 猪的飞行梦</title>
+    <title>🐷 ${title}</title>
     <style>
         * {
             margin: 0;
@@ -70,9 +71,10 @@ function generateFullHTML() {
 </head>
 <body>
     <canvas id="canvas"></canvas>
-    <div id="hint">鼠标移动改变视角 | PgUp加速 PgDn减速 | ESC关闭</div>
-    <div id="speed-indicator">速度: 1.0x</div>
+    <div id="hint">${hint}</div>
+    <div id="speed-indicator">${speedLabel}: 1.0x</div>
     <script>
+        const SPEED_LABEL = ${speedLabelLiteral};
         // ==================== 配置参数 ====================
         // 千字文（用于星空星星）
         const QIANZIWEN = '天地玄黄宇宙洪荒日月盈昃辰宿列张寒来暑往秋收冬藏闰余成岁律吕调阳云腾致雨露结为霜金生丽水玉出昆冈剑号巨阙珠称夜光果珍李柰菜重芥姜海咸河淡鳞潜羽翔龙师火帝鸟官人皇始制文字乃服衣裳推位让国有虞陶唐吊民伐罪周发殷汤坐朝问道垂拱平章爱育黎首臣伏戎羌遐迩一体率宾归王鸣凤在竹白驹食场化被草木赖及万方盖此身发四大五常恭惟鞠养岂敢毁伤女慕贞洁男效才良知过必改得能莫忘罔谈彼短靡恃己长信使可覆器欲难量墨悲丝染诗赞羔羊景行维贤克念作圣德建名立形端表正空谷传声虚堂习听祸因恶积福缘善庆尺璧非宝寸阴是竞资父事君曰严与敬孝当竭力忠则尽命临深履薄夙兴温凊似兰斯馨如松之盛川流不息渊澄取映容止若思言辞安定笃初诚美慎终宜令荣业所基籍甚无竟学优登仕摄职从政存以甘棠去而益咏乐殊贵贱礼别尊卑上和下睦夫唱妇随外受傅训入奉母仪诸姑伯叔犹子比儿孔怀兄弟同气连枝交友投分切磨箴规仁慈隐恻造次弗离节义廉退颠沛匪亏性静情逸心动神疲守真志满逐物意移坚持雅操好爵自縻都邑华夏东西二京背邙面洛浮渭据泾宫殿盘郁楼观飞惊图写禽兽画彩仙灵丙舍旁启甲帐对楹肆筵设席鼓瑟吹笙升阶纳陛弁转疑星右通广内左达承明既集坟典亦聚群英杜稿钟隶漆书壁经府罗将相路侠槐卿户封八县家给千兵高冠陪辇驱毂振缨世禄侈富车驾肥轻策功茂实勒碑刻铭盘溪伊尹佐时阿衡奄宅曲阜微旦孰营桓公匡合济弱扶倾绮回汉惠说感武丁俊乂密勿多士寔宁晋楚更霸赵魏困横假途灭虢践土会盟何遵约法韩弊烦刑起翦颇牧用军最精宣威沙漠驰誉丹青九州禹迹百郡秦并岳宗泰岱禅主云亭雁门紫塞鸡田赤城昆池碣石巨野洞庭旷远绵邈岩岫杳冥治本于农务资稼穑俶载南亩我艺黍稷税熟贡新劝赏黜陟孟轲敦素史鱼秉直庶几中庸劳谦谨敕聆音察理鉴貌辨色贻厥嘉猷勉其祗植省躬讥诫宠增抗极殆辱近耻林皋幸即两疏见机解组谁逼索居闲处沉默寂寥求古寻论散虑逍遥欣奏累遣戚谢欢招渠荷的历园莽抽条枇杷晚翠梧桐早凋陈根委翳落叶飘摇游鹍独运凌摩绛霄耽读玩市寓目囊箱易輶攸畏属耳垣墙具膳餐饭适口充肠饱饫烹宰饥厌糟糠亲戚故旧老少异粮妾御绩纺侍巾帷房纨扇圆洁银烛炜煌昼眠夕寐蓝笋象床弦歌酒宴接杯举觞矫手顿足悦豫且康嫡后嗣续祭祀烝尝稽颡再拜悚惧恐惶笺牒简要顾答审详骸垢想浴执热愿凉驴骡犊特骇跃超骧诛斩贼盗捕获叛亡布射僚丸嵇琴阮啸恬笔伦纸钧巧任钓释纷利俗并皆佳妙毛施淑姿工颦妍笑年矢每催曦晖朗曜璇玑悬斡晦魄环照指薪修祜永绥吉劭矩步引领俯仰廊庙束带矜庄徘徊瞻眺孤陋寡闻愚蒙等诮谓语助者焉哉乎也';
@@ -763,7 +765,7 @@ function generateFullHTML() {
                 cx = lerp(cx, targetCx, ease1);
                 cy = lerp(cy, targetCy, ease1);
                 currentSpeed = lerp(currentSpeed, targetSpeed, 0.05);
-                speedIndicator.textContent = \`速度: \${currentSpeed.toFixed(1)}x\`;
+                speedIndicator.textContent = SPEED_LABEL + ': ' + currentSpeed.toFixed(1) + 'x';
             }
         }
 

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

@@ -18,7 +18,7 @@
 import { PAGINATION } from "../core/全局配置.js";
 // 📦 列表缓存工具需要本地可用的缓存实现；下方「向后兼容重导出」那行是纯转发、
 // 不会生成本地绑定，故此处必须单独 import（勿误删，否则 readListCache 运行时报错）
-import { setCache, getCacheWithMeta } from "../core/网络请求_缓存管理.js";
+import { setCache, getCacheWithMeta, removeCache, getCacheKeysByPrefix } from "../core/网络请求_缓存管理.js";
 
 // ==========================================
 // 🔒 P0安全优化：敏感数据脱敏工具
@@ -216,8 +216,10 @@ export { setCache, getCache, getCacheWithMeta, removeCache, removeCacheByPrefix,
  * @param {Object} options - 配置选项
  * @param {HTMLElement} options.container - 滚动容器
  * @param {Function} options.loadMore - 加载更多数据的函数，返回 Promise
+ * @param {Function} options.t - 本地化函数（分页状态和失败重试文案）
  * @param {number} options.pageSize - 每页数量，默认 20
  * @param {number} options.threshold - 触发阈值（距底部像素），默认 200
+ * @param {Function} [options.autoFill] - 可选；返回 true 时继续搜索分页，无滚动空间时也会填充到可滚动
  * @returns {Object} 分页加载器实例
  */
 export function createPaginationLoader(options) {
@@ -227,42 +229,58 @@ export function createPaginationLoader(options) {
         pageSize = 20,
         threshold = 200
     } = options;
+    const translate = options.t;
+    const autoFill = options.autoFill;
     
     let currentPage = 1;  // 首屏已渲染第1页，loadMore前先递增，从第2页开始加载
     let isLoading = false;
     let hasMore = true;
     let debounceTimer = null;
-    let consecutiveErrors = 0;
-    let retryTimer = null;
     let generation = 0;  // 🔄 轻量级取消令牌，reset 时递增以丢弃飞行中请求
+    let stopped = false;  // 保持创建后可手动加载；stop 后仅 start 能重新启用。
     
     // 加载指示器
     const loadingIndicator = document.createElement("div");
     loadingIndicator.className = "pagination-loading";
-    loadingIndicator.innerHTML = `
-        <div style="text-align: center; padding: 20px; color: #888;">
-            <span class="loading-spinner"></span>
-            <span style="margin-left: 8px;">加载中...</span>
-        </div>
-    `;
+    loadingIndicator.setAttribute("role", "status");
+    loadingIndicator.setAttribute("aria-live", "polite");
+    loadingIndicator.setAttribute("aria-atomic", "true");
+    const loadingSpinner = document.createElement("span");
+    loadingSpinner.className = "pagination-loading__spinner";
+    loadingSpinner.setAttribute("aria-hidden", "true");
+    const loadingText = document.createElement("span");
+    loadingText.textContent = translate("pagination.loading");
+    loadingIndicator.append(loadingSpinner, loadingText);
     loadingIndicator.style.display = "none";
     
     // "没有更多"提示
     const endIndicator = document.createElement("div");
     endIndicator.className = "pagination-end";
-    endIndicator.innerHTML = `
-        <div style="text-align: center; padding: 20px; color: #666; font-size: 13px;">
-            — 已经到底了 —
-        </div>
-    `;
+    endIndicator.setAttribute("role", "status");
+    endIndicator.setAttribute("aria-live", "polite");
+    endIndicator.textContent = translate("pagination.end");
     endIndicator.style.display = "none";
+
+    const retryIndicator = document.createElement("div");
+    retryIndicator.className = "pagination-error";
+    retryIndicator.setAttribute("role", "alert");
+    retryIndicator.setAttribute("aria-live", "assertive");
+    const retryMessage = document.createElement("span");
+    retryMessage.textContent = translate("pagination.failed");
+    const retryButton = document.createElement("button");
+    retryButton.type = "button";
+    retryButton.className = "pagination-error__retry";
+    retryButton.textContent = translate("common.retry");
+    retryIndicator.append(retryMessage, retryButton);
+    retryIndicator.style.display = "none";
     
     // 滚动事件处理（带防抖）
     const handleScroll = () => {
+        if (stopped) return;
         if (debounceTimer) clearTimeout(debounceTimer);
         
         debounceTimer = setTimeout(() => {
-            if (isLoading || !hasMore) return;
+            if (stopped || isLoading || !hasMore) return;
             
             const { scrollTop, scrollHeight, clientHeight } = container;
             const distanceToBottom = scrollHeight - scrollTop - clientHeight;
@@ -275,67 +293,85 @@ export function createPaginationLoader(options) {
     
     // 加载下一页
     const _loadNextPage = async () => {
-        if (isLoading || !hasMore) return;
+        if (stopped || isLoading || !hasMore) return;
         
         isLoading = true;
         loadingIndicator.style.display = "block";
+        const savedGen = generation;
         
         try {
             currentPage++;  // 先递增，再加载（首屏已渲染第1页，从第2页开始）
-            const savedGen = generation;
-            const result = await loadMore(currentPage, pageSize);
+            const result = await loadMore(currentPage, pageSize, {
+                isCurrent: () => savedGen === generation
+            });
             if (savedGen !== generation) return;  // reset 被调用了，丢弃结果
             
             // 加载失败，允许重试
             if (result === null) {
-                consecutiveErrors++;
-                if (consecutiveErrors >= 3) {
-                    hasMore = false;
-                    loadingIndicator.style.display = "none";
-                    if (retryTimer) clearTimeout(retryTimer);
-                    retryTimer = setTimeout(() => {
-                        consecutiveErrors = 0;
-                        hasMore = true;
-                    }, 5000);
-                }
+                currentPage = Math.max(1, currentPage - 1);
+                hasMore = false;
+                loadingIndicator.style.display = "none";
+                retryIndicator.style.display = "flex";
                 return;
             }
             
-            consecutiveErrors = 0;
-            if (retryTimer) {
-                clearTimeout(retryTimer);
-                retryTimer = null;
-            }
-            
             // 判断是否还有更多 - 返回空数组则停止
             if (!result || result.length === 0) {
                 hasMore = false;
                 loadingIndicator.style.display = "none";
+                endIndicator.style.display = "block";
+            } else {
+                endIndicator.style.display = "none";
             }
         } catch (error) {
-            console.error("分页加载失败:", error);
+            if (savedGen === generation) {
+                currentPage = Math.max(1, currentPage - 1);
+                hasMore = false;
+                retryIndicator.style.display = "flex";
+                console.error("分页加载失败");
+            }
         } finally {
-            isLoading = false;
-            if (hasMore) {
+            if (savedGen === generation) {
+                isLoading = false;
                 loadingIndicator.style.display = "none";
+                // Search callers can scan pages with no local matches without
+                // changing pagination behavior for other lists.
+                if (hasMore && typeof autoFill === "function" &&
+                    (autoFill() || container.scrollHeight <= container.clientHeight + threshold)) {
+                    _loadNextPage();
+                }
             }
         }
     };
+
+    retryButton.addEventListener("click", () => {
+        if (stopped || isLoading) return;
+        retryIndicator.style.display = "none";
+        hasMore = true;
+        _loadNextPage();
+    });
     
     // 启动监听
     const start = () => {
+        stopped = false;
         container.addEventListener("scroll", handleScroll);
         // 添加指示器到容器末尾
         const scrollContent = container.querySelector(".scroll-content") || container;
         scrollContent.appendChild(loadingIndicator);
         scrollContent.appendChild(endIndicator);
+        scrollContent.appendChild(retryIndicator);
     };
     
     // 停止监听
     const stop = () => {
+        stopped = true;
+        generation++;
+        if (isLoading) currentPage = Math.max(1, currentPage - 1);
+        isLoading = false;
         container.removeEventListener("scroll", handleScroll);
         if (debounceTimer) clearTimeout(debounceTimer);
-        if (retryTimer) clearTimeout(retryTimer);
+        loadingIndicator.style.display = "none";
+        retryIndicator.style.display = "none";
     };
     
     // 重置状态
@@ -344,13 +380,9 @@ export function createPaginationLoader(options) {
         currentPage = 1;  // 首屏已渲染第1页，分页器从第2页开始
         hasMore = true;
         isLoading = false;
-        consecutiveErrors = 0;
-        if (retryTimer) {
-            clearTimeout(retryTimer);
-            retryTimer = null;
-        }
         loadingIndicator.style.display = "none";
         endIndicator.style.display = "none";
+        retryIndicator.style.display = "none";
     };
     
     // 手动触发加载
@@ -367,6 +399,24 @@ export function createPaginationLoader(options) {
     };
 }
 
+/** Render an accessible, localized search state inside a list grid. */
+export function renderListSearchMessage(container, message) {
+    container.querySelector('.list-search-message')?.remove();
+    const status = document.createElement("div");
+    status.className = "list-search-message";
+    status.setAttribute("role", "status");
+    status.setAttribute("aria-live", "polite");
+    status.textContent = message;
+    Object.assign(status.style, {
+        gridColumn: "1 / -1",
+        textAlign: "center",
+        padding: "24px 16px",
+        color: "var(--descrip-text, #999)"
+    });
+    container.appendChild(status);
+    return status;
+}
+
 
 // ==========================================
 // 🖼️ 图片懒加载
@@ -1259,11 +1309,23 @@ export { eventManager };
  * @returns {Array|null} 命中返回数组，未命中/空列表返回 null
  */
 export function readListCache(cacheKey) {
-    const { value } = getCacheWithMeta(cacheKey, true);  // true = 忽略过期
-    if (!Array.isArray(value) || value.length === 0) return null;
+    const { value, found } = getCacheWithMeta(cacheKey, true);  // true = 忽略过期
+    if (!Array.isArray(value)) {
+        if (found) removeCache(cacheKey);
+        return null;
+    }
+    if (value.length === 0) return null;
+    if (_hasInvalidListItem(value)) {
+        removeCache(cacheKey);
+        return null;
+    }
     return value;
 }
 
+function _hasInvalidListItem(items) {
+    return items.some(item => !item || typeof item !== "object" || Array.isArray(item));
+}
+
 /**
  * 💾 回写列表首屏缓存（持久化到 localStorage，保证重启后离线仍可展示）
  * @param {string} cacheKey - 完整缓存 Key
@@ -1271,10 +1333,63 @@ export function readListCache(cacheKey) {
  * @param {number} ttl - 有效期（毫秒），由调用方传 getCacheTTL()
  */
 export function writeListCache(cacheKey, items, ttl) {
-    if (!Array.isArray(items)) return;
+    if (!Array.isArray(items) || _hasInvalidListItem(items)) return;
     setCache(cacheKey, items, ttl, true);  // true = 持久化 localStorage
 }
 
+/**
+ * Validate a successful list endpoint envelope before data reaches UI state or cache.
+ * @param {Object} response - API response envelope
+ * @returns {Array} validated list data
+ */
+export function requireListResponseData(response) {
+    if (response?.status !== "success" || !Array.isArray(response.data)
+        || _hasInvalidListItem(response.data)) {
+        const error = new Error("Invalid list response");
+        error.name = "InvalidListResponseError";
+        throw error;
+    }
+    return response.data;
+}
+
+/**
+ * 判断后台成功响应的空数组是否会覆盖当前榜单已有内容。
+ * 列表服务在冷启动/数据同步窗口可能暂时返回空数组；已有结果应继续显示，
+ * 直到非空新数据到达。无缓存时的真实空列表仍按正常结果处理。
+ * @param {Array} nextItems 本次请求得到的列表
+ * @param {Array} currentItems 当前榜单已显示的数据
+ * @returns {boolean} 是否应跳过此次缓存回写和列表替换
+ */
+export function isEmptyListRefreshWithExistingData(nextItems, currentItems) {
+    return Array.isArray(nextItems) && nextItems.length === 0
+        && Array.isArray(currentItems) && currentItems.length > 0;
+}
+
+/**
+ * 渲染可访问的列表首屏失败状态，并提供显式重试入口。
+ * 使用 DOM/textContent，避免错误文案进入 HTML sink。
+ */
+export function renderListLoadError(container, message, onRetry, t) {
+    if (!container) return;
+    const status = document.createElement("div");
+    status.className = "comfy-ranking-list-error";
+    status.setAttribute("role", "alert");
+    status.setAttribute("aria-live", "assertive");
+
+    const text = document.createElement("p");
+    text.className = "comfy-ranking-list-error__message";
+    text.textContent = message;
+
+    const retry = document.createElement("button");
+    retry.type = "button";
+    retry.className = "comfy-ranking-list-error__retry";
+    retry.textContent = t("common.retry");
+    retry.addEventListener("click", () => onRetry?.());
+
+    status.append(text, retry);
+    container.replaceChildren(status);
+}
+
 /**
  * 🔍 从列表缓存中查找指定项（详情页离线回退用）
  * @param {string} prefix - 缓存Key前缀（如 "TasksCache_"、"PostsCache_"）
@@ -1283,20 +1398,14 @@ export function writeListCache(cacheKey, items, ttl) {
  */
 export function findInListCache(prefix, id) {
     try {
-        const fullPrefix = "ComfyRanking_" + prefix;
-        for (let i = 0; i < localStorage.length; i++) {
-            const key = localStorage.key(i);
-            if (key && key.startsWith(fullPrefix)) {
-                const raw = JSON.parse(localStorage.getItem(key));
-                const items = raw?.value;
-                if (Array.isArray(items)) {
-                    const found = items.find(item => item.id === id);
-                    if (found) return found;
-                }
-            }
+        for (const cacheKey of getCacheKeysByPrefix(prefix)) {
+            const items = readListCache(cacheKey);
+            if (!items) continue;
+            const item = items.find(entry => entry.id === id);
+            if (item) return item;
         }
     } catch (e) {
-        console.warn("列表缓存查找失败:", e);
+        console.warn("列表缓存查找失败");
     }
     return null;
 }

前端页面/components/打赏等级工具.js

@@ -14,6 +14,8 @@ import { t } from "./用户体验增强.js";
 import { getCachedProfile, getProfileWithSWR, PLACEHOLDERS, escapeHtml } from "../core/全局配置.js";
 import { api } from "../core/网络请求_业务API.js";
 
+let nextTipBoardItemId = 0;
+
 /**
  * 等级规则（参考QQ等级系统）：
  * - 1-100 积分 = 1 颗星星 ⭐，101-200 积分 = 2 颗星星，以此类推
@@ -134,17 +136,17 @@ export function isMaxTipLevel(amount) {
  * @returns {string} - 等级描述
  */
 export function getTipLevelDescription(amount) {
-    if (!amount || amount <= 0) return "新粉丝";
+    if (!amount || amount <= 0) return t('tip.new_fan');
     
     const level = calculateTipLevel(amount);
     
-    if (level.isMaxLevel) return "至尊赞助者 (已满级)";
-    if (level.suns >= 5) return "超级赞助者";
-    if (level.suns >= 1) return "黄金赞助者";
-    if (level.moons >= 3) return "白银赞助者";
-    if (level.moons >= 1) return "青铜赞助者";
-    if (level.stars >= 3) return "热心粉丝";
-    return "支持者";
+    if (level.isMaxLevel) return t('tip.level_max');
+    if (level.suns >= 5) return t('tip.level_super');
+    if (level.suns >= 1) return t('tip.level_gold');
+    if (level.moons >= 3) return t('tip.level_silver');
+    if (level.moons >= 1) return t('tip.level_bronze');
+    if (level.stars >= 3) return t('tip.level_fan');
+    return t('tip.level_supporter');
 }
 
 /**
@@ -155,7 +157,11 @@ export function getTipLevelDescription(amount) {
  * @returns {string} - 榜单项HTML
  */
 export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
-    const { account, amount, is_anon } = tipData;
+    if (!tipData || typeof tipData !== 'object' || Array.isArray(tipData)) return '';
+    const { account, is_anon } = tipData;
+    const amount = Number(tipData.amount);
+    if (!Number.isFinite(amount) || amount < 0) return '';
+    rank = Number.isSafeInteger(rank) && rank >= 0 ? rank : 0;
     
     // 排名徽章颜色
     const badgeColors = ['#FFD700', '#C0C0C0', '#CD7F32']; // 金银铜
@@ -182,7 +188,7 @@ export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
             <div style="display:flex; justify-content:space-between; padding:${cfg.padding}px 0; font-size:${cfg.font}px; align-items:center; border-bottom:1px dashed #333;">
                 <span style="display:flex; align-items:center; gap:6px;">
                     ${badgeHtml}
-                    <span style="color:#888;">🔒 匿名</span>
+                    <span style="color:#888;">🔒 ${t('creator.anonymous')}</span>
                 </span>
                 <span style="display:flex; align-items:center; gap:6px;">
                     ${levelHtml}
@@ -193,18 +199,19 @@ export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
     }
     
     // 🚀 SWR 模式：非匿名用户显示头像+用户名
-    const containerId = `tip-board-item-${account}-${rank}-${Date.now()}`;
+    const containerId = `ranking-tip-board-${++nextTipBoardItemId}`;
     
     // 从缓存获取初始数据（0延迟渲染）
     const cached = getCachedProfile(account);
     const avatarUrl = cached?.avatar || cached?.avatarDataUrl || PLACEHOLDERS.AVATAR_SMALL;
-    const userName = cached?.name || account;
+    const userName = cached?.name || account || t('common.unknown_user');
     
     // 后台静默校对并更新 DOM
     setTimeout(() => {
+        const container = document.getElementById(containerId);
+        if (!container) return;
         getProfileWithSWR(account, api.getUserProfile, (profile) => {
-            const container = document.getElementById(containerId);
-            if (!container) return;
+            if (!container.isConnected || document.getElementById(containerId) !== container) return;
             
             const avatarImg = container.querySelector('.tip-board-avatar');
             const nameSpan = container.querySelector('.tip-board-name');
@@ -225,7 +232,7 @@ export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
             <span style="display:flex; align-items:center; gap:6px;">
                 ${badgeHtml}
                 <span style="display:flex; align-items:center; gap:6px;">
-                    <img class="tip-board-avatar" src="${escapeHtml(avatarUrl)}" style="width:${cfg.avatar}px; height:${cfg.avatar}px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#333;">
+                    <img class="tip-board-avatar" alt="" src="${escapeHtml(avatarUrl)}" style="width:${cfg.avatar}px; height:${cfg.avatar}px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#333;">
                     <span class="tip-board-name" style="color:#ddd;">${escapeHtml(userName)}</span>
                 </span>
             </span>
@@ -245,12 +252,14 @@ export function renderTipBoardItemHTML(tipData, rank, size = 'normal') {
  * @param {string} size - 尺寸
  * @returns {string} - 完整榜单HTML
  */
-export function renderTipBoardHTML(boardData, maxShow = 5, emptyText = "暂无打赏，快来成为首个赞赏人吧！", size = 'normal') {
-    if (!boardData || boardData.length === 0) {
+export function renderTipBoardHTML(boardData, maxShow = 5, emptyText = t('tip.no_tips_yet'), size = 'normal') {
+    const entries = Array.isArray(boardData) ? boardData.filter(entry => entry && typeof entry === 'object'
+        && !Array.isArray(entry) && Number.isFinite(Number(entry.amount)) && Number(entry.amount) >= 0) : [];
+    if (entries.length === 0) {
         return `<div style="color:#666; font-size:12px; text-align:center; padding:12px 0;">${escapeHtml(emptyText)}</div>`;
     }
     
-    return boardData.slice(0, maxShow).map((t, i) => renderTipBoardItemHTML(t, i, size)).join('');
+    return entries.slice(0, maxShow).map((entry, i) => renderTipBoardItemHTML(entry, i, size)).join('');
 }
 
 /**

前端页面/components/用户体验_国际化.js

@@ -14,14 +14,17 @@ const translations = {
     'zh-CN': {
         // 通用
         'common.confirm': '确认',
+        'common.confirm_action': '操作确认',
+        'common.confirm_execute': '确认执行',
         'common.cancel': '取消',
         'common.save': '保存',
         'common.saving': '保存中...',
-        'common.delete': '删除',
         'common.deleting': '删除中...',
         'common.edit': '编辑',
         'common.close': '关闭',
-        'common.reset': '重置',
+        'common.advertisement': '广告',
+        'common.advertisement_details': '广告详情',
+        'common.advertisement_details_image': '广告详情图',
         'common.loading': '加载中...',
         'common.chars': '字符',
         'common.digits': '位数',
@@ -32,11 +35,135 @@ const translations = {
         'common.retrying': '重试中...',
         'common.retry_failed': '重试失败，请稍后再试',
         'common.no_more': '没有更多了',
+        'pagination.loading': '正在加载更多内容',
+        'pagination.end': '已经到底了',
+        'pagination.failed': '加载更多失败，请重试',
+        'pagination.searching': '正在继续查找匹配内容…',
+        'pagination.search_empty': '没有找到匹配的内容',
         'common.parse_error': '响应解析失败',
         'common.network_error_retry': '网络连接失败，请稍后重试',
+        'install.connection_uncertain': '安装连接中断，结果暂时无法确认。请先检查本地插件目录，再决定是否重试，避免重复安装。',
+        'install.cancel_in_progress': '取消安装',
+        'install.cancelling': '正在请求取消…',
+        'install.cancel_outcome_uncertain': '已请求取消安装，但最终结果可能无法确认。请检查本地插件目录后再决定是否重试。',
+        'install.error_missing_params': '安装请求信息不完整，请刷新页面后重试。',
+        'install.error_invalid_repository': '仓库地址无效或不受支持，请检查资源链接。',
+        'install.error_invalid_target': '安装目标目录无效，已阻止写入。',
+        'install.error_git_missing': '未检测到 Git。请安装 Git 并重启 ComfyUI 后重试。',
+        'install.error_timeout': '安装等待超时。请检查网络和仓库大小，再确认目录状态后重试。',
+        'install.error_git_clone': '镜像源和直连均无法克隆仓库。请检查网络、代理或仓库权限。',
+        'install.error_disk_space': '磁盘空间不足。释放空间后再重试。',
+        'install.error_remote_rejected': '云端拒绝或无法获取资源。请检查购买权限、仓库权限和资源地址。',
+        'install.error_package_too_large': '下载包超过本地安全上限，已停止安装。',
+        'install.error_download': '下载多次中断。请检查网络后重试。',
+        'install.error_target_occupied': '旧版本文件仍被占用。关闭 ComfyUI 后再重试更新。',
+        'install.error_invalid_archive': '下载内容不是有效安装包，或压缩包结构不受支持。',
+        'install.error_generic': '安装失败。请检查本地目录和网络后重试。',
+        'install.diagnostics': '查看安装过程记录',
+        'install.diagnostic_entry': '{time} · {stage} · {progress}',
+        'install.stage_unknown': '未知阶段',
+        'install.stage_validate': '校验参数',
+        'install.stage_queued': '等待其它安装任务完成',
+        'install.error_queue_timeout': '安装任务较多，请稍后重试。',
+        'install.error_queue_full': '安装队列已满，请稍后再试。',
+        'install.error_repository_too_large': '仓库体积或文件数量超过安装上限，请查看资源说明并手动安装。',
+        'install.error_process_guard': '无法建立安装进程保护，请检查插件文件和 ComfyUI 运行环境后重试。',
+        'install.stage_auth': '验证权限',
+        'install.stage_cleanup': '准备安装目录',
+        'install.stage_git_mirror': '连接镜像源',
+        'install.stage_git_clone': '克隆仓库',
+        'install.stage_git_fallback': '切换下载源',
+        'install.stage_git_direct': '直连仓库',
+        'install.stage_downloading': '下载资源包',
+        'install.stage_download_done': '下载完成',
+        'install.stage_extracting': '解压文件',
+        'install.stage_installing': '写入安装目录',
+        'install.stage_complete': '安装完成',
+        'install.stage_failed': '安装失败',
+        'acquire.balance_short': '积分余额不足（当前：{balance}，需要：{price}）。',
+        'acquire.balance_recharge_prompt': '是否前往个人中心充值？',
+        'acquire.validation_running': '正在检测云端资源有效性...',
+        'acquire.validation_blocked': '资源校验未通过：{message}',
+        'acquire.purchase_confirmation_html': '该资源标价为 <strong style="color:#FF9800;">{price} 积分</strong>。<br><br>确认获取吗？<br><span style="font-size:12px;color:#aaa;">（一次购买永久免费，已购买的资源不会重复扣款）</span>',
+        'acquire.purchase_running': '正在校验购买状态与扣款安全...',
+        'acquire.invalid_id': '获取失败：资源 ID 无效。',
+        'acquire.already_owned_no_charge': '您已购买过此商品，此次使用不会收费！',
+        'acquire.purchase_success': '支付成功！已扣除 {price} 积分。',
+        'acquire.purchase_balance_short': '获取失败：积分余额不足。',
+        'acquire.purchase_failed': '获取失败：{message}',
+        'acquire.purchase_verification_unavailable': '暂时无法确认安全购买通道，本次未扣款。请稍后重试或联系维护者更新服务。',
+        'acquire.price_changed': '价格已变化或尚未确认，本次未扣款。请刷新资源并重新确认价格。',
+        'acquire.purchase_unknown': '暂未确认购买结果。请先查看钱包和购买记录，重新打开资源确认状态后再操作。',
+        'acquire.pure_link_authorized': '✅ 授权成功，请前往资源原始页面获取：',
+        'install.background_started': '正在后台安装；关闭侧边栏不会影响安装。',
+        'install.open_source': '前往资源原始页面',
+        'install.completed_update': '插件「{title}」的新版本已就绪，重启 ComfyUI 后生效！',
+        'install.completed_restart': '插件「{title}」安装成功！请重启 ComfyUI。',
+        'install.failed_for_item': '插件「{title}」安装失败：{message}',
+        'install.restart_to_apply': '重启 ComfyUI 后即可应用更新。',
+        'install.restart_to_load': '重启 ComfyUI 以加载新节点。',
+        'workflow.loaded_for_item': '工作流「{title}」已成功加载到画布！',
+        'workflow.failed': '工作流加载失败：{message}',
+        'workflow.loaded_warning': '工作流已加载到画布。由于本地节点差异，部分节点可能显示异常；请使用管理器补全节点。',
+        'workflow.local_connection_failed': '无法连接到本地服务：{message}',
+        'netdisk.authorized_with_password': '✅ 授权成功，网盘资源信息如下：',
+        'netdisk.authorized_no_password': '✅ 授权成功，请前往网盘下载：',
+        'netdisk.code_label': '提取码：',
+        'netdisk.open': '打开网盘链接',
+        'netdisk.copy': '复制提取码',
+        'netdisk.download_hint': '复制提取码后前往网盘下载资源。',
+        'netdisk.invalid_link': '资源链接无效或不受支持。',
+        'netdisk.copy_failed': '无法复制提取码，请手动选择并复制。',
+        'workflow.fallback_loading': '授权已通过，正在安全鉴权并加载工作流...',
+        'workflow.http_failed': '工作流加载失败（{status}）：{message}',
+        'workflow.parse_failed': '响应解析失败，请重试。',
+        'common.downloaded': '已下载',
+        'common.acquired': '已获取',
+        'workflow.canvas_load_failed': '工作流已下载，但无法加载到当前画布。请检查 ComfyUI 页面状态后重试。',
+        'workflow.error_missing_params': '下载请求缺少必要信息，请刷新页面后重试。',
+        'workflow.error_invalid_request': '下载请求格式无效，请刷新页面后重试。',
+        'workflow.error_invalid_id': '工作流资源 ID 无效。',
+        'workflow.error_invalid_data': '云端返回的工作流格式无效，请稍后重试或联系资源发布者。',
+        'workflow.error_auth': '云端未授权此次下载。请检查购买状态或重新登录。',
+        'workflow.error_remote': '云端拒绝或无法获取该工作流。请检查资源链接和访问权限。',
+        'workflow.error_network': '连接云端失败。请检查网络后重试。',
+        'workflow.error_cloud_cooldown': '云端暂时无法连接，请稍后重试。',
+        'workflow.error_generic': '工作流下载失败，请检查网络与本地服务后重试。',
+        'workflow.stage_validate': '校验下载请求',
+        'workflow.stage_cache_check': '检查本地缓存',
+        'workflow.stage_cache_hit': '从本地缓存加载',
+        'workflow.stage_downloading': '从云端下载工作流',
+        'workflow.stage_saving': '保存本地缓存',
+        'workflow.stage_download_complete': '下载完成，正在加载画布',
+        'workflow.stage_failed': '工作流下载失败',
+        'install.progress_label': '安装进度',
+        'install.preparing': '准备中...',
+        'install.complete': '安装完成！',
+        'install.failed': '安装失败',
+        'install.elapsed': '已用时 {time}',
+        'install.preview_loading': '正在检查安装目标...',
+        'install.confirm_git': '授权已通过。确认通过 Git 安装到：{folder}？',
+        'install.confirm_zip': '授权已通过。确认下载并更新到：{folder}？',
+        'install.target_unknown': '本地目标目录待核验',
+        'install.target_self_update': '这是当前插件自身的更新；新版本将在重启 ComfyUI 后应用。',
+        'install.target_exists': '目标目录已存在。安装先写入暂存目录，成功后替换；失败时保留旧版本。',
+        'install.target_new': '目标目录当前不存在，将作为首次安装。',
+        'install.current_git_version': '检测到本地 Git 版本：{version}',
+        'install.recorded_local_version': '前端记录的已安装版本：{version}',
+        'install.version_record_unavailable': '安装成功，但浏览器存储不可用，无法保存本地版本标记。',
+        'install.version_unconfirmed': '安装成功，但本次安装版本未能确认，仍可重新安装。',
+        'install.version_status_unavailable': '浏览器本地存储不可用，暂时无法确认此资源的本地安装版本。',
+        'install.preview_unavailable': '暂时无法读取目录状态；本地安装引擎开始安装时仍会再次校验。',
+        'install.confirm_button': '同意并安装',
+        'install.confirmation_region': '安装目标确认',
+        'workflow.connection_uncertain': '工作流连接中断，加载结果暂时无法确认。请检查画布后再决定是否重试。',
         'common.more': '更多',
-        'common.back': '返回',
         'common.search': '搜索',
+        'common.sort_items': '排序榜单内容',
+        'common.filter_task_status': '按任务状态筛选',
+        'common.sort_tasks': '任务排序方式',
+        'common.sort_posts': '帖子排序方式',
+        'common.sort_prompts': '提示词排序方式',
         'common.refresh': '刷新',
         'common.copy': '复制',
         'common.copied': '已复制',
@@ -49,7 +176,6 @@ const translations = {
         'common.yes': '是',
         'common.no': '否',
         'common.ok': '好的',
-        'common.send': '发送',
         'common.reset': '重置',
         'common.install': '安装',
         'common.installed': '已安装',
@@ -58,6 +184,7 @@ const translations = {
         'common.paid': '付费',
         
         // 导航
+        'nav.board_navigation': '榜单导航',
         'nav.tools': '插件榜',
         'nav.skills': 'Skill',
         'nav.apps': '工作流',
@@ -71,6 +198,8 @@ const translations = {
         'nav.logout': '退出登录',
         'nav.notifications': '消息',
         'nav.community': '社区精选',
+        'nav.about_title': '查看关于本插件与作者信息',
+        'footer.community_name': 'ComfyUI精选社区',
         
         // 设置页面
         'settings.title': '界面设置',
@@ -119,7 +248,6 @@ const translations = {
         'auth.token_expired': '登录凭证已失效，请重新登录',
         'auth.email': '邮箱',
         'auth.password': '密码',
-        'auth.confirm_password': '确认密码',
         'auth.username': '用户名',
         'auth.nickname': '昵称',
         'auth.forgot_password': '忘记密码？',
@@ -130,13 +258,11 @@ const translations = {
         'auth.your_account': '您的账号',
         'auth.go_reset_password': '去重置密码',
         'auth.reset_password': '重置密码',
-        'auth.verification_code': '验证码',
         'auth.send_code': '发送验证码',
         'auth.resend_code': '重新发送',
         'auth.login_success': '登录成功',
         'auth.register_success': '注册成功',
         'auth.logout_success': '已退出登录',
-        'auth.password_mismatch': '两次密码不一致',
         'auth.weak_password': '密码强度不足',
         'auth.account_exists': '账号已存在',
         'auth.invalid_credentials': '账号或密码错误',
@@ -211,11 +337,9 @@ const translations = {
         'profile.their_published': 'TA的发布',
         'profile.my_purchased': '我购买的',
         'profile.my_tasks': '我的任务',
-        'profile.transactions': '交易明细',
         'profile.my_posts': '我的帖子',
         'profile.my_collected': '我的收藏',
         'profile.recent_likes': '近期点赞',
-        'profile.following': '关注的人',
         'profile.max_privilege': '最高特权',
         'profile.beta_max_privilege': '内测最高特权',
         'profile.edit_profile': '编辑资料',
@@ -277,11 +401,13 @@ const translations = {
         'tx.task_payment': '📋 任务尾款',
         'tx.task_income': '📋 任务收入',
         'tx.task_freeze': '🔒 任务冻结',
+        'tx.task_price_adjust': '🔒 任务价格调整',
         'tx.task_refund': '↩️ 任务退款',
         'tx.task_cancel_refund': '🔄 任务取消退款',
         'tx.sale': '销售收入',
         'tx.recharge': '💰 充值',
         'tx.refund': '↩️ 退款',
+        'tx.sale_refund': '↩️ 销售退款扣回',
         'tx.withdraw_fee': '💸 手续费',
         'tx.withdraw_pending': '待打款',
         'tx.withdraw_completed': '已完成',
@@ -313,6 +439,9 @@ const translations = {
         'wallet.recharge.max_amount_exceeded': '单次充值金额不得超过10000元',
         'wallet.recharge.processing': '处理中...',
         'wallet.recharge.timeout': '支付查询超时，如已支付请稍后刷新查看余额',
+        'wallet.recharge.confirm_amount': '确认充值 {points} 积分（¥{price}）？',
+        'wallet.recharge.balance_unavailable': '余额暂未更新，请稍后刷新查看',
+        'wallet.recharge.order_uncertain': '订单结果尚未确认，请勿重复创建，如已支付请查询余额',
         
         // 提现相关
         'wallet.withdraw.title': '💳 收益提现中心',
@@ -331,7 +460,8 @@ const translations = {
         'wallet.withdraw.resend_in': '{seconds}s 后重发',
         'wallet.withdraw.confirm': '确认提现 (金额将转入冻结审核)',
         'wallet.withdraw.submitting': '⏳ 提交中...',
-        'wallet.withdraw.timeout': '提现请求超时，请检查网络后重试',
+        'wallet.withdraw.timeout': '提现结果尚未确认，请查看交易记录，勿重复提交',
+        'wallet.withdraw.balance_unavailable': '暂时无法读取最新余额，请稍后再打开提现',
         'wallet.withdraw.no_balance': '您的可提现收益为 0，快去发布优质插件赚取积分吧！',
         'wallet.withdraw.min_amount': '最低提现额度为 1 积分！',
         'wallet.withdraw.fill_account': '请完整填写收款人支付宝账号与真实姓名！',
@@ -357,10 +487,6 @@ const translations = {
         'market.detail': '详情',
         'market.comments': '评论',
         'market.reviews': '评价',
-        'market.like': '点赞',
-        'market.liked': '已赞',
-        'market.favorite': '收藏',
-        'market.favorited': '已收藏',
         'market.views': '🔥 浏览总量',
         'market.daily_views': '🔥 今日热门',
         'market.rating': '★ 评分最高',
@@ -375,7 +501,6 @@ const translations = {
         'social.messages': '消息',
         'social.notifications': '通知',
         'social.comment': '评论',
-        'social.reply': '回复',
         'social.share': '分享',
         'social.mention': '@提及',
         'social.new_message': '新消息',
@@ -400,6 +525,7 @@ const translations = {
         'feedback.success': '操作成功',
         'feedback.error': '操作失败，请重试',
         'feedback.timeout': '请求超时',
+        'feedback.response_format_error': '服务器响应格式错误',
         'feedback.saved': '已保存',
         'feedback.logged_out': '已退出登录',
         'feedback.login_required': '请先登录您的账号！',
@@ -433,9 +559,11 @@ const translations = {
         
         // 反馈补充
         'feedback.send_failed': '发送失败',
+        'feedback.send_failed_retry': '发送失败，请重试',
 
         // 评分
         'rating.stars': '评分',
+        'rating.choose_score': '给出 {score} 星评分',
         'rating.count': '{count}人评分',
         'rating.your_score': '你的评分',
         'rating.login_required': '登录后评分',
@@ -449,6 +577,7 @@ const translations = {
         'notif.title': '消息与通知',
         'notif.clear': '清空记录',
         'notif.no_messages': '暂无任何消息通知',
+        'notif.open_target': '查看通知关联内容',
         'notif.followed_you': '关注了您',
         'notif.liked': '点赞了您的作品',
         'notif.favorited': '收藏了您的作品',
@@ -552,6 +681,10 @@ const translations = {
         'market.delete_permanently': '永久删除',
         'market.delete_confirm': '🚨 警告：确定要彻底删除该发布内容吗？<br><br><span style="color:#aaa;">该操作不可逆，且相关的所有评论数据也将被同步永久清空。</span>',
         'item.refundable': '支持退款',
+        'item.purchase_status_loading': '正在加载购买状态...',
+        'easter.title': '猪的飞行梦',
+        'easter.hint': '鼠标移动改变视角 | PgUp 加速 PgDn 减速 | ESC 关闭',
+        'easter.speed': '速度',
         'item.confirm_refund_title': '确认退款',
         'item.confirm_refund': '确认退款',
         'item.refund_amount': '退款金额：',
@@ -571,6 +704,8 @@ const translations = {
         'item.refund_consequence_2': '已下载的文件将被自动删除',
         'item.refund_consequence_3': '30天内禁止再次购买此商品',
         'item.refund_success': '退款成功',
+        'item.refund_success_toast': '退款成功！积分已退还',
+        'item.refund_amount_returned': '{amount} 积分已退还到您的账户',
         'item.credits_refunded': '积分已退还到您的账户',
         'item.ban_days_notice': '{days}天内禁止再次购买此商品',
         'item.refund_failed_retry': '退款失败，请重试',
@@ -587,6 +722,7 @@ const translations = {
         'item.delete_request_failed': '删除请求失败，请检查网络',
         'item.no_tips_yet': '该资源暂无专属打赏，快来成为首个赞赏人吧！',
         'item.author': '作者',
+        'item.sponsor_thanks': '感谢砚影科技的支持！',
         'item.original_notice': '原创内容，请勿商用',
         'item.tip_encourage': '赞赏鼓励该作品',
         'item.tip_board_title': '该作品赞赏贡献榜 (TOP 10)',
@@ -596,6 +732,20 @@ const translations = {
         'web.install_on_desktop': '请在电脑端进行安装',
         'web.purchase_success_desktop': '购买成功！请在电脑端进行安装',
         'crop.ratio_label': '比例',
+        'crop.title': '裁剪图片',
+        'crop.zoom_label': '缩放',
+        'crop.confirm': '确认裁剪并上传',
+        'crop.processing': '处理中...',
+        'crop.process_failed': '处理失败，重试',
+        'feedback.processing': '处理中...',
+        'feedback.copied': '已复制到剪贴板',
+        'feedback.copy_failed': '复制失败',
+        'feedback.operation_success': '操作成功',
+        'profile.post_detail_load_failed': '加载帖子详情失败',
+        'profile.prompt_detail_load_failed': '加载提示词详情失败',
+        'tip.invalid_amount': '打赏金额必须大于 0',
+        'tip.amount_limit': '单次打赏上限为 {max} 积分',
+        'tip.balance_short_recharge': '您的积分余额不足，是否立刻前往个人中心充值？',
         'crop.gesture_hint_touch': '单指拖动调整位置 | 双指捏合或滑块缩放',
         'crop.gesture_hint_mouse': '拖动调整位置 | 滚轮缩放',
         'item.update_available': '发现新版本 (点击静默热更新)',
@@ -611,7 +761,19 @@ const translations = {
         'feedback.deleted': '已成功删除',
         'feedback.delete_failed': '删除失败',
         'feedback.retry_suffix': '，请重试',
+        'feedback.no_search_results': '🔍 没有搜索到相关内容',
+        'feedback.no_list_data': '📭 暂无数据，快来抢沙发吧！',
+        'feedback.load_posts_failed': '讨论区暂时加载失败',
+        'feedback.load_tasks_failed': '任务榜暂时加载失败',
+        'feedback.load_prompts_failed': '提示词列表暂时加载失败',
+        'auth.session_changed': '登录状态已变化，请重试。',
+        'auth.reopen_list': '登录状态已变化，请重新打开榜单后重试。',
+        'auth.form_data_incomplete': '表单信息不完整，请检查必填项。',
+        'task.session_changed': '登录状态已变化，请返回列表后重新打开任务。',
+        'task.cached_readonly': '正在显示上次保存的公开内容，联网确认后可操作。',
+        'task.cached_refresh_failed': '暂时无法刷新，仍显示公开缓存内容；操作需联网确认。',
         'feedback.cache_fallback': '⚠️ 网络连接失败，展示的是缓存数据',
+        'feedback.refresh_failed_cached': '网络刷新失败，仍显示上次结果',
         // 🔧 新增：以下三条原为散落在各组件里的硬编码中文，现收口到词典以支持多语言
         'feedback.offline_no_cache': '网络已断开，且无本地缓存',
         // ☁️ 云端不可达冷却期内、且本地无缓存可兜底时抛出（详见 网络请求_基础设施.js）。
@@ -682,10 +844,8 @@ const translations = {
         
         // 任务详情
         'task.detail_title': '任务详情',
-        'task.deposit_ratio': '订金',
         'task.published_at': '发布于',
         'task.deadline_label': '截止日期',
-        'task.description_label': '📄 任务描述',
         'task.ref_images': '🖼️ 参考图片',
         'task.ref_link': '🔗 参考链接',
         'task.assignee_label': '👷 接单者',
@@ -699,9 +859,7 @@ const translations = {
         'task.login_to_operate': '请登录后操作',
         'task.cancel_task': '❌ 取消任务',
         'task.edit_task': '编辑任务',
-        'task.title_label': '任务标题',
         'task.description_label': '任务描述',
-        'task.title_required': '请输入任务标题',
         'task.edit_success': '任务修改成功',
         'task.edit_failed': '任务修改失败',
         'task.edit_limited_notice': '任务已有人接单，仅可修改标题、描述和参考链接',
@@ -715,13 +873,11 @@ const translations = {
         'task.accept': '✅ 验收通过',
         'task.reject': '❌ 验收不通过',
         'task.dispute': '⚖️ 发起申诉',
-        'task.view_dispute': '⚖️ 查看申诉详情',
         'task.apply_message': '请输入申请留言（可选）：',
         'task.apply_success': '申请成功！',
         'task.apply_failed': '申请失败',
         'task.cancel_apply_confirm': '确定撤回申请吗？',
         'task.cancel_apply_success': '已撤回申请',
-        'task.cancel_apply_failed': '撤��失败',
         'task.cancel_confirm': '确定取消任务吗？此操作不可撤销。',
         'task.cancel_success': '任务已取消',
         'task.cancel_failed': '取消失败',
@@ -751,7 +907,6 @@ const translations = {
         // 发布任务
         'task.publish_title': '📝 发布任务',
         'task.title_label': '📌 任务标题',
-        'task.title_placeholder': '简洁描述您的需求，50字以内',
         'task.desc_label': '📄 任务描述',
         'task.desc_placeholder': '详细描述任务要求、交付标准、参考说明等...',
         'task.images_label': '🖼️ 参考图片（可选，最多6张）',
@@ -780,6 +935,9 @@ const translations = {
         'task.max_images': '最多上传6张图片',
         
         // 申诉相关
+        'dispute.session_changed': '登录状态已变化，请返回后重新打开申诉。',
+        'dispute.open_evidence': '打开证据图片 {index}',
+        'dispute.remove_evidence': '移除证据图片 {index}',
         'dispute.title': '申诉详情',
         'dispute.status_pending': '等待回应',
         'dispute.status_responded': '等待仲裁',
@@ -960,6 +1118,7 @@ const translations = {
         'prompt.text_label': '提示词正文（付费内容）',
         'prompt.text_placeholder': '输入完整提示词，发布后仅购买者可查看...',
         'prompt.price_label': '定价',
+        'prompt.price_invalid': '请输入 0–{max} 的整数价格。',
         'prompt.video_label': '示例视频',
         'prompt.title_required': '请输入标题',
         'prompt.content_required': '请输入介绍文案',
@@ -988,15 +1147,12 @@ const translations = {
         'post.images_label': '🖼️ 上传图片',
         'post.images_required': '（最多9张，第一张为封面）',
         'post.images_placeholder': '点击或拖拽上传图片',
-        'post.title_label': '📝 标题',
         'post.title_placeholder': '给你的作品起个标题...',
-        'post.content_label': '✍️ 正文',
         'post.content_placeholder': '分享你的创作心得、使用技巧...',
         'post.notice_title': '💡 发布须知：',
         'post.notice_1': '请上传原创作品或标明出处',
         'post.notice_2': '图片将自动压缩优化',
         'post.notice_3': '发布后可在个人中心管理',
-        'post.cover': '封面',
         'post.images_required_error': '请至少上传一张图片',
         'post.title_required': '请输入标题',
         'post.uploading': '⏳ 上传图片中...',
@@ -1007,20 +1163,14 @@ const translations = {
         'post.mode_label': '发布模式',
         'post.mode_image': '图文',
         'post.mode_video': '视频',
-        'post.upload_images': '上传图片',
-        'post.max_9_images': '最多9张',
-        'post.click_upload': '点击上传',
         'post.upload_video': '上传视频',
         'post.click_upload_video': '点击选择视频',
         'post.video_cover': '视频封面',
         'post.capture_frame': '截取当前帧',
         'post.upload_cover': '手动上传封面',
-        'post.publish_notice': '发布须知',
-        'post.notice_original': '请上传原创作品或标明出处',
-        'post.notice_compress': '图片将自动压缩优化',
-        'post.notice_manage': '发布后可在个人中心管理',
         'post.error_video_format': '仅支持 mp4、webm、mov 格式的视频',
         'post.error_video_size': '视频大小不能超过 100MB',
+        'post.video_limits_hint': 'mp4/webm/mov，最多 {megabytes}MB、{minutes} 分钟',
         'post.error_video_duration': '视频时长不能超过 3 分钟',
         'post.error_video_load': '无法读取视频信息',
         'post.existing_video': '已有视频',
@@ -1028,7 +1178,6 @@ const translations = {
         'post.cover_captured': '封面已更新',
         'post.cover_capture_failed': '封面截取失败',
         'post.error_cover_format': '请选择图片文件作为封面',
-        'post.error_no_title': '请输入标题',
         'post.error_no_content': '请输入正文内容',
         'post.error_no_video': '请选择视频文件',
         'post.error_no_cover': '请等待封面生成或手动上传封面',
@@ -1045,24 +1194,42 @@ const translations = {
         'post.error_no_audio': '请选择音频文件',
         'post.uploading_audio': '上传音频中...',
         'post.media_exclusive': '视频与「图片 + 音频」二选一，已自动清空另一组',
-        'post.publishing': '发布中...',
-        'post.edit_success': '保存成功',
-        'post.edit_failed': '保存失败',
-        'post.error_no_image': '请至少上传一张图片',
-        'post.compressing_images': '压缩图片中...',
-        'post.compressing_progress': '压缩图片 ({current}/{total})',
-        'post.uploading_progress': '上传图片 ({current}/{total})',
         
         // 通用补充 - 组件使用
         'common.message': '私信',
         'common.credits': '积分',
         'common.unknown': '未知',
         'common.load_failed': '加载失败',
+        'common.sidebar_load_failed': '侧边栏加载失败，请刷新页面重试',
         
         // 🎰 打赏等级
         'tip.new_fan': '新粉丝',
+        'tip.level_max': '至尊赞助者 (已满级)',
+        'tip.level_super': '超级赞助者',
+        'tip.level_gold': '黄金赞助者',
+        'tip.level_silver': '白银赞助者',
+        'tip.level_bronze': '青铜赞助者',
+        'tip.level_fan': '热心粉丝',
+        'tip.level_supporter': '支持者',
+        'tip.no_tips_yet': '暂无打赏，快来成为首个赞赏人吧！',
         'tip.supreme_sponsor': '至尊赞助者',
+        'tip.supreme_sponsor_success': '恭喜您成为至尊赞助者！已达最高等级。',
+        'tip.success_thanks': '打赏成功！感谢您的慷慨支持。',
+        'tip.confirm': '确认打赏',
+        'tip.amount_label': '输入打赏金额',
+        'tip.level_preview': '打赏后等级预览',
+        'tip.rules_title': '等级规则',
+        'tip.rule_star': '每 {points} 积分为一档星星',
+        'tip.rule_moon': '每 {stars} 颗星星组成一个月亮',
+        'tip.rule_sun': '每 {moons} 个月亮组成一个太阳',
+        'tip.rule_max': '最高 {suns} 个太阳，共 {points} 积分',
+        'tip.anonymous': '匿名打赏（隐藏我的名字）',
+        'tip.dialog_title': '赞赏 {name}',
+        'tip.integer_amount': '打赏金额必须是大于 0 的整数',
+        'tip.unknown_result': '暂未确认打赏结果。请先查看钱包和赞赏记录，再进行下一次操作。',
+        'tip.balance_refresh_failed': '打赏已成功，余额暂未取得，请刷新钱包确认。',
         'tip.points': '积分',
+        'common.seconds': '秒',
         
         // 📊 图表
         'chart.loading': '正在加载图表...',
@@ -1073,6 +1240,18 @@ const translations = {
         'image.load_failed': '图片加载失败',
         'image.load_timeout': '加载超时',
         'image.gallery': '效果展示图',
+        'image.viewer.fullscreen': '全屏播放',
+        'image.viewer.load_failed': '图像播放器加载失败，请刷新页面重试',
+        'image.viewer.close': '关闭 (ESC)',
+        'image.viewer.previous': '上一张 (←)',
+        'image.viewer.next': '下一张 (→)',
+        'image.viewer.autoplay': '自动播放 (空格)',
+        'image.viewer.pause': '暂停自动播放 (空格)',
+        'image.viewer.dialog': '图片查看器',
+        'image.viewer.previous_short': '上一张',
+        'image.viewer.next_short': '下一张',
+        'image.viewer.close_short': '关闭',
+        'image.viewer.image_position': '第 {current} 张，共 {total} 张',
         'common.operation_failed': '操作失败',
         'common.login_required': '请登录后操作',
         'common.publish': '发布',
@@ -1133,6 +1312,8 @@ const translations = {
         'task.reference_link_optional': '参考链接（可选）',
         'task.deposit_ratio': '订金比例',
         'task.min_10_credits': '最低10积分',
+        'task.price_range': '请输入 0–{max} 的整数任务赏金。',
+        'task.deposit_invalid': '请选择有效的订金比例。',
         'task.deposit_deducted_on_assign': '接单时扣除',
         'task.price_description': '价格说明',
         'task.deposit_on_assign': '订金（指派接单时扣除）',
@@ -1143,10 +1324,17 @@ const translations = {
         'task.please_enter_description': '请输入任务描述',
         'task.price_min_10': '任务价格不能低于10积分',
         'task.please_select_deadline': '请选择截止日期',
+        'task.deadline_invalid': '请选择有效的截止日期。',
+        'task.price_locked': '⚠️ 任务进行中，价格不可修改',
+        'task.deposit_locked': '⚠️ 任务进行中，订金比例不可修改',
+        'task.deadline_locked': '⚠️ 任务进行中，截止日期不可修改',
+        'task.remove_reference_image': '删除第 {index} 张参考图片',
         'task.uploading_images': '上传图片中',
         'task.upload_progress': '上传图片 ({current}/{total})',
         'task.publishing': '发布中',
         'task.max_6_images': '最多上传6张图片',
+        'task.images_reading': '参考图片仍在读取，请稍候再提交。',
+        'task.image_size_limit': '请选择非空且不超过 {max} MB 的参考图片。',
         'task.view_total': '🔥 浏览总量',
         'task.view_today': '📅 今日浏览',
         'task.save_changes': '保存修改',
@@ -1175,9 +1363,12 @@ const translations = {
         // 发布帖子补充
         'post.upload_images': '上传图片',
         'post.max_9_images': '最多9张，第一张为封面',
+        'post.image_invalid_file': '图片格式无效或超出处理限制，请重新选择图片',
+        'post.image_preview_failed': '图片预览失败，请移除后重新选择',
+        'post.image_position': '第 {index} 张图片，共 {total} 张',
+        'post.remove_image': '删除第 {index} 张图片',
+        'post.image_move_hint': '按 Alt 加左右方向键，在已有图片或新图片组内调整顺序；第一张为封面。',
         'post.click_upload': '点击或拖拽上传图片',
-        'post.title_label': '标题',
-        'post.content_label': '正文',
         'post.publish_notice': '发布须知',
         'post.notice_original': '请上传原创作品或标明出处',
         'post.notice_compress': '图片将自动压缩优化',
@@ -1287,6 +1478,10 @@ const translations = {
         'publish.uploading_images': '正在上传图片 ({current}/{total})...',
         'publish.syncing': '正在同步全网数据库...',
         'publish.save_success': '修改已保存并同步全网！',
+        'publish.save_unconfirmed': '保存结果尚未确认。请先返回个人作品核对，避免重复发布或修改。',
+        'publish.result_pending': '保存结果待确认',
+        'publish.edit_conflict': '这条作品已被其他页面修改。请返回并重新打开编辑，核对最新内容后再保存。',
+        'publish.edit_reopen': '请重新打开编辑',
         'publish.publish_success': '发布成功！您的作品已全网同步。',
         
         // 🌐 个人中心页面
@@ -1304,6 +1499,32 @@ const translations = {
         'profile.privacy_hidden': '由于作者的隐私设置，该列表不对外公开',
         'profile.no_following': '暂无关注的人',
         'profile.no_followers': '暂无粉丝',
+        'profile.no_purchased_resources': '还没有购买任何资源',
+        'profile.discover_resources': '去榜单页面发现优秀插件吧！',
+        'profile.loading_resources': '正在加载资源...',
+        'profile.loading_tasks': '正在加载任务...',
+        'profile.no_task_records': '还没有任何任务记录',
+        'profile.go_tasks': '去任务榜发布或接受任务吧！',
+        'profile.published_tasks': '我发布的任务',
+        'profile.assigned_tasks': '我接的任务',
+        'profile.load_tasks_failed': '任务加载失败',
+        'profile.loading_transactions': '正在加载交易记录...',
+        'profile.task_earnings_stats': '任务收益统计',
+        'profile.task_income': '任务收入',
+        'profile.task_expense': '任务支出',
+        'profile.net_earnings': '净收益',
+        'profile.no_transactions': '暂无交易记录',
+        'profile.load_transactions_failed': '交易记录加载失败',
+        'profile.loading_posts': '正在加载帖子...',
+        'profile.no_posts': '还没有发布任何帖子',
+        'profile.go_posts': '去讨论区分享你的想法吧！',
+        'profile.load_posts_failed': '帖子加载失败',
+        'profile.loading_prompts': '正在加载提示词...',
+        'profile.no_prompts': '还没有发布任何提示词',
+        'profile.go_prompts': '去提示词广场分享你的创作吧！',
+        'profile.load_prompts_failed': '提示词加载失败',
+        'profile.fetching_data': '正在拉取数据...',
+        'profile.no_records': '暂无记录',
         'profile.load_more': '加载更多 ({count})',
         'profile.no_collected': '还没有收藏任何内容',
         'profile.go_discover': '去榜单页面或讨论区发现精彩内容吧！',
@@ -1380,6 +1601,28 @@ const translations = {
         'settings_form.save_failed': '设置失败',
         'settings_form.avatar_upload_success': '头像上传成功！请点击底部保存设置生效。',
         'settings_form.banner_cleared': '已清除背景图，请点击底部保存设置生效。',
+        'settings_form.file_read_failed': '文件读取失败，请重试。',
+        'settings_form.crop_avatar': '裁剪头像',
+        'settings_form.crop_banner': '裁剪个人资料卡背景',
+        'settings_form.crop_ui_bg': '裁剪界面背景',
+        'settings_form.uploading': '上传中...',
+        'settings_form.avatar_process_failed': '头像处理失败，请重新选择图片后重试。',
+        'settings_form.banner_selected': '背景图已选择，点击底部保存设置后才会上传。',
+        'settings_form.ui_bg_applied': '界面背景设置成功，已立即生效！',
+        'settings_form.ui_bg_cleared': '已清除界面背景，已立即生效。',
+        'settings_form.saving': '保存中...',
+        'settings_form.uploading_banner': '上传背景图...',
+        'settings_form.banner_upload_failed': '背景图上传失败，请检查网络后重试。',
+        'settings_form.saving_settings': '保存设置...',
+        'settings_form.settings_saved': '设置已保存并同步至云端！',
+        'settings_form.settings_save_failed': '设置保存失败，请检查网络后重试。',
+        'settings_form.local_storage_unavailable': '浏览器本地存储操作失败，请检查存储空间或权限。',
+        'settings_form.enabled': '已启用',
+        'settings_form.disabled': '未启用',
+        'settings_form.moderation_quota': '本月已用：阿里云 {aliyun}/3000，腾讯云 {tencent}/10000',
+        'settings_form.moderation_skipped': '上传图片将跳过审核',
+        'settings_form.moderation_enabled': '图像审核已启用',
+        'settings_form.moderation_disabled': '图像审核已关闭',
         // 视频播放器
         'video.play': '播放',
         'video.pause': '暂停',
@@ -1394,6 +1637,10 @@ const translations = {
         'video.volume': '音量',
 
         // 关于插件
+        'about.brand': '社区精选',
+        'about.stage_unknown': '阶段未知',
+        'about.version_unknown': '版本未知',
+        'about.author_link': '访问作者的哔哩哔哩主页',
         'about.title': 'ComfyUI 社区精选',
         'about.subtitle': '专为 ComfyUI 打造的现代化 Web3.0 级别生态引擎',
         'about.stage_alpha': 'Alpha 内测',
@@ -1459,14 +1706,17 @@ const translations = {
     'en-US': {
         // Common
         'common.confirm': 'Confirm',
+        'common.confirm_action': 'Confirm action',
+        'common.confirm_execute': 'Confirm and continue',
         'common.cancel': 'Cancel',
         'common.save': 'Save',
         'common.saving': 'Saving...',
-        'common.delete': 'Delete',
         'common.deleting': 'Deleting...',
         'common.edit': 'Edit',
         'common.close': 'Close',
-        'common.reset': 'Reset',
+        'common.advertisement': 'Advertisement',
+        'common.advertisement_details': 'Advertisement details',
+        'common.advertisement_details_image': 'Advertisement detail image',
         'common.loading': 'Loading...',
         'common.chars': 'chars',
         'common.digits': 'digits',
@@ -1477,11 +1727,135 @@ const translations = {
         'common.retrying': 'Retrying...',
         'common.retry_failed': 'Retry failed, please try again later',
         'common.no_more': 'No more items',
+        'pagination.loading': 'Loading more items',
+        'pagination.end': 'You have reached the end',
+        'pagination.failed': 'Could not load more items. Please retry.',
+        'pagination.searching': 'Searching more items…',
+        'pagination.search_empty': 'No matching items were found',
         'common.parse_error': 'Failed to parse response',
         'common.network_error_retry': 'Network connection failed, please try again later',
+        'install.connection_uncertain': 'The install connection was interrupted, so its result is unknown. Check the local plugin folder before retrying to avoid duplicate installs.',
+        'install.cancel_in_progress': 'Cancel installation',
+        'install.cancelling': 'Requesting cancellation…',
+        'install.cancel_outcome_uncertain': 'Cancellation was requested, but the final result may be unknown. Check the local plugin folder before retrying.',
+        'install.error_missing_params': 'The install request is incomplete. Refresh the page and try again.',
+        'install.error_invalid_repository': 'The repository URL is invalid or unsupported. Check the resource link.',
+        'install.error_invalid_target': 'The install target is invalid. No files were written.',
+        'install.error_git_missing': 'Git was not found. Install Git and restart ComfyUI before retrying.',
+        'install.error_timeout': 'The install timed out. Check the network and repository size, then verify the folder before retrying.',
+        'install.error_git_clone': 'Neither the mirror nor direct Git connection could clone the repository. Check the network, proxy, or repository access.',
+        'install.error_disk_space': 'There is not enough disk space. Free space before retrying.',
+        'install.error_remote_rejected': 'The cloud service rejected or could not fetch the resource. Check purchase access, repository permissions, and the resource URL.',
+        'install.error_package_too_large': 'The download exceeded the local safety limit. Installation was stopped.',
+        'install.error_download': 'The download failed repeatedly. Check the network before retrying.',
+        'install.error_target_occupied': 'Files from the previous version are in use. Close ComfyUI before retrying the update.',
+        'install.error_invalid_archive': 'The download is not a valid package or its archive structure is unsupported.',
+        'install.error_generic': 'Installation failed. Check the local folder and network before retrying.',
+        'install.diagnostics': 'View installation log',
+        'install.diagnostic_entry': '{time} · {stage} · {progress}',
+        'install.stage_unknown': 'Unknown stage',
+        'install.stage_validate': 'Validate request',
+        'install.stage_queued': 'Waiting for other installations',
+        'install.error_queue_timeout': 'There are too many installation tasks. Please try again later.',
+        'install.error_queue_full': 'The installation queue is full. Please try again later.',
+        'install.error_repository_too_large': 'The repository exceeds the installation size or file count limit. Check the resource instructions and install it manually.',
+        'install.error_process_guard': 'Installation process protection could not be set up. Check the plugin files and ComfyUI environment, then retry.',
+        'install.stage_auth': 'Verify access',
+        'install.stage_cleanup': 'Prepare target folder',
+        'install.stage_git_mirror': 'Connect to mirror',
+        'install.stage_git_clone': 'Clone repository',
+        'install.stage_git_fallback': 'Switch download source',
+        'install.stage_git_direct': 'Connect directly to repository',
+        'install.stage_downloading': 'Download package',
+        'install.stage_download_done': 'Download complete',
+        'install.stage_extracting': 'Extract files',
+        'install.stage_installing': 'Write install folder',
+        'install.stage_complete': 'Installation complete',
+        'install.stage_failed': 'Installation failed',
+        'acquire.balance_short': 'Insufficient points (current: {balance}, required: {price}).',
+        'acquire.balance_recharge_prompt': 'Go to your profile to add funds?',
+        'acquire.validation_running': 'Checking resource availability...',
+        'acquire.validation_blocked': 'Resource validation failed: {message}',
+        'acquire.purchase_confirmation_html': 'This resource costs <strong style="color:#FF9800;">{price} points</strong>.<br><br>Continue?<br><span style="font-size:12px;color:#aaa;">(Each purchase is permanent. Previously purchased resources are not charged again.)</span>',
+        'acquire.purchase_running': 'Verifying purchase status and payment...',
+        'acquire.invalid_id': 'Could not continue: the resource ID is invalid.',
+        'acquire.already_owned_no_charge': 'You already own this item. This use will not charge you again.',
+        'acquire.purchase_success': 'Payment successful. {price} points were charged.',
+        'acquire.purchase_balance_short': 'Could not continue: insufficient points.',
+        'acquire.purchase_failed': 'Could not continue: {message}',
+        'acquire.purchase_verification_unavailable': 'A safe purchase cannot be verified. No charge was made. Try later or ask the maintainer to update the service.',
+        'acquire.price_changed': 'The price changed or was not confirmed. No charge was made. Refresh the resource and confirm its price again.',
+        'acquire.purchase_unknown': 'The purchase result is unconfirmed. Check your wallet and purchases, then reopen the resource to confirm its status before continuing.',
+        'acquire.pure_link_authorized': '✅ Access granted. Continue on the resource source page:',
+        'install.background_started': 'Installing in the background. Closing the sidebar will not stop it.',
+        'install.open_source': 'Open the resource source page',
+        'install.completed_update': 'The new version of “{title}” is ready. Restart ComfyUI to apply it.',
+        'install.completed_restart': '“{title}” installed. Restart ComfyUI to load it.',
+        'install.failed_for_item': 'Could not install “{title}”: {message}',
+        'install.restart_to_apply': 'Restart ComfyUI to apply the update.',
+        'install.restart_to_load': 'Restart ComfyUI to load the new nodes.',
+        'workflow.loaded_for_item': 'Workflow “{title}” loaded onto the canvas.',
+        'workflow.failed': 'Could not load workflow: {message}',
+        'workflow.loaded_warning': 'Workflow loaded. Some nodes may be unavailable locally; use the manager to install missing nodes.',
+        'workflow.local_connection_failed': 'Could not connect to the local service: {message}',
+        'netdisk.authorized_with_password': '✅ Access granted. Net disk details:',
+        'netdisk.authorized_no_password': '✅ Access granted. Open the net disk to download:',
+        'netdisk.code_label': 'Access code:',
+        'netdisk.open': 'Open net disk link',
+        'netdisk.copy': 'Copy access code',
+        'netdisk.download_hint': 'Copy the access code, then use it to download from the net disk.',
+        'netdisk.invalid_link': 'The resource link is invalid or unsupported.',
+        'netdisk.copy_failed': 'Could not copy the access code. Select and copy it manually.',
+        'workflow.fallback_loading': 'Authorization passed. Verifying access and loading the workflow...',
+        'workflow.http_failed': 'Could not load workflow ({status}): {message}',
+        'workflow.parse_failed': 'Could not parse the response. Please retry.',
+        'common.downloaded': 'Downloaded',
+        'common.acquired': 'Acquired',
+        'workflow.canvas_load_failed': 'The workflow was downloaded but could not be loaded onto the current canvas. Check the ComfyUI page and try again.',
+        'workflow.error_missing_params': 'The download request is incomplete. Refresh the page and try again.',
+        'workflow.error_invalid_request': 'The download request is invalid. Refresh the page and try again.',
+        'workflow.error_invalid_id': 'The workflow resource ID is invalid.',
+        'workflow.error_invalid_data': 'The cloud service returned an invalid workflow. Try again later or contact the publisher.',
+        'workflow.error_auth': 'The cloud service did not authorize this download. Check the purchase status or sign in again.',
+        'workflow.error_remote': 'The cloud service rejected or could not fetch this workflow. Check the resource URL and access permissions.',
+        'workflow.error_network': 'Could not connect to the cloud service. Check the network and try again.',
+        'workflow.error_cloud_cooldown': 'The cloud service is temporarily unreachable. Try again later.',
+        'workflow.error_generic': 'Workflow download failed. Check the network and local service before retrying.',
+        'workflow.stage_validate': 'Validate download request',
+        'workflow.stage_cache_check': 'Check local cache',
+        'workflow.stage_cache_hit': 'Load from local cache',
+        'workflow.stage_downloading': 'Download workflow from cloud',
+        'workflow.stage_saving': 'Save local cache',
+        'workflow.stage_download_complete': 'Download complete; loading canvas',
+        'workflow.stage_failed': 'Workflow download failed',
+        'install.progress_label': 'Installation progress',
+        'install.preparing': 'Preparing...',
+        'install.complete': 'Installation complete!',
+        'install.failed': 'Installation failed',
+        'install.elapsed': 'Elapsed {time}',
+        'install.preview_loading': 'Checking the install target...',
+        'install.confirm_git': 'Authorization passed. Install with Git to: {folder}?',
+        'install.confirm_zip': 'Authorization passed. Download and update: {folder}?',
+        'install.target_unknown': 'Local target folder needs verification',
+        'install.target_self_update': 'This updates the current plugin. The new version will apply after ComfyUI restarts.',
+        'install.target_exists': 'The folder exists. Installation uses a staging folder, replaces it only after success, and preserves the old version on failure.',
+        'install.target_new': 'The target folder does not exist; this will be a first-time install.',
+        'install.current_git_version': 'Detected local Git version: {version}',
+        'install.recorded_local_version': 'Installed version recorded by the frontend: {version}',
+        'install.version_record_unavailable': 'Installation succeeded, but browser storage is unavailable; the local version marker could not be saved.',
+        'install.version_unconfirmed': 'Installation succeeded, but this installed version could not be confirmed. You can still reinstall.',
+        'install.version_status_unavailable': 'Browser storage is unavailable, so the locally installed version cannot be confirmed.',
+        'install.preview_unavailable': 'Folder status is unavailable. The local installer will validate the target again before installation.',
+        'install.confirm_button': 'Confirm install',
+        'install.confirmation_region': 'Install target confirmation',
+        'workflow.connection_uncertain': 'The workflow connection was interrupted, so its result is unknown. Check the canvas before retrying.',
         'common.more': 'More',
-        'common.back': 'Back',
         'common.search': 'Search',
+        'common.sort_items': 'Sort board items',
+        'common.filter_task_status': 'Filter tasks by status',
+        'common.sort_tasks': 'Task sort order',
+        'common.sort_posts': 'Post sort order',
+        'common.sort_prompts': 'Prompt sort order',
         'common.refresh': 'Refresh',
         'common.copy': 'Copy',
         'common.copied': 'Copied',
@@ -1494,7 +1868,6 @@ const translations = {
         'common.yes': 'Yes',
         'common.no': 'No',
         'common.ok': 'OK',
-        'common.send': 'Send',
         'common.reset': 'Reset',
         'common.install': 'Install',
         'common.installed': 'Installed',
@@ -1503,6 +1876,7 @@ const translations = {
         'common.paid': 'Paid',
         
         // Navigation
+        'nav.board_navigation': 'Board navigation',
         'nav.tools': 'Plugins',
         'nav.skills': 'Skills',
         'nav.apps': 'Workflows',
@@ -1516,6 +1890,8 @@ const translations = {
         'nav.logout': 'Logout',
         'nav.notifications': 'Notifications',
         'nav.community': 'Ranking',
+        'nav.about_title': 'About this plugin and its author',
+        'footer.community_name': 'ComfyUI Community',
         
         // Settings
         'settings.title': 'Settings',
@@ -1717,11 +2093,13 @@ const translations = {
         'tx.task_payment': '📋 Task Payment',
         'tx.task_income': '📋 Task Income',
         'tx.task_freeze': '🔒 Task Frozen',
+        'tx.task_price_adjust': '🔒 Task Price Adjustment',
         'tx.task_refund': '↩️ Task Refund',
         'tx.task_cancel_refund': '🔄 Task Cancel Refund',
         'tx.sale': 'Sales Income',
         'tx.recharge': '💰 Recharge',
         'tx.refund': '↩️ Refund',
+        'tx.sale_refund': '↩️ Sales refund reversal',
         'tx.withdraw_fee': '💸 Withdrawal Fee',
         'tx.withdraw_pending': 'Pending',
         'tx.withdraw_completed': 'Completed',
@@ -1753,6 +2131,9 @@ const translations = {
         'wallet.recharge.max_amount_exceeded': 'Single recharge cannot exceed 10000',
         'wallet.recharge.processing': 'Processing...',
         'wallet.recharge.timeout': 'Payment check timed out. If you have already paid, refresh later to see your balance',
+        'wallet.recharge.confirm_amount': 'Recharge {points} points (¥{price})?',
+        'wallet.recharge.balance_unavailable': 'Balance is not updated yet. Refresh later',
+        'wallet.recharge.order_uncertain': 'Order is not confirmed. Do not create another order; check balance if paid',
         
         // Withdraw
         'wallet.withdraw.title': '💳 Earnings Withdrawal Center',
@@ -1771,7 +2152,8 @@ const translations = {
         'wallet.withdraw.resend_in': 'Resend in {seconds}s',
         'wallet.withdraw.confirm': 'Confirm Withdrawal (Funds Will Be Frozen for Review)',
         'wallet.withdraw.submitting': '⏳ Submitting...',
-        'wallet.withdraw.timeout': 'Withdrawal request timed out. Check your network and try again',
+        'wallet.withdraw.timeout': 'Withdrawal is not confirmed. Check transactions before submitting again',
+        'wallet.withdraw.balance_unavailable': 'Current balance is unavailable. Reopen withdrawal later',
         'wallet.withdraw.no_balance': 'Your withdrawable balance is 0. Publish quality plugins to earn points!',
         'wallet.withdraw.min_amount': 'Minimum withdrawal is 1 point!',
         'wallet.withdraw.fill_account': 'Please fill in both Alipay account and real name!',
@@ -1797,10 +2179,6 @@ const translations = {
         'market.detail': 'Details',
         'market.comments': 'Comments',
         'market.reviews': 'Reviews',
-        'market.like': 'Like',
-        'market.liked': 'Liked',
-        'market.favorite': 'Favorite',
-        'market.favorited': 'Favorited',
         'market.views': '🔥 Most Viewed',
         'market.daily_views': '🔥 Trending Today',
         'market.rating': '★ Highest Rated',
@@ -1840,6 +2218,7 @@ const translations = {
         'feedback.success': 'Success',
         'feedback.error': 'Failed, please retry',
         'feedback.timeout': 'Request timeout',
+        'feedback.response_format_error': 'The server response format is invalid',
         'feedback.saved': 'Saved',
         'feedback.logged_out': 'Logged out',
         'feedback.login_required': 'Please log in first!',
@@ -1870,9 +2249,11 @@ const translations = {
         'common.send': 'Send',
         'common.delete': 'Delete',
         'feedback.send_failed': 'Send failed',
+        'feedback.send_failed_retry': 'Failed to send. Please try again.',
 
         // Rating
         'rating.stars': 'Rating',
+        'rating.choose_score': 'Rate {score} stars',
         'rating.count': '{count} ratings',
         'rating.your_score': 'Your rating',
         'rating.login_required': 'Login to rate',
@@ -1886,6 +2267,7 @@ const translations = {
         'notif.title': 'Messages & Notifications',
         'notif.clear': 'Clear All',
         'notif.no_messages': 'No messages yet',
+        'notif.open_target': 'Open related content',
         'notif.followed_you': 'followed you',
         'notif.liked': 'liked your work',
         'notif.favorited': 'favorited your work',
@@ -1987,6 +2369,10 @@ const translations = {
         'market.delete_permanently': 'Delete',
         'market.delete_confirm': '🚨 Warning: Are you sure you want to permanently delete this content?<br><br><span style="color:#aaa;">This action is irreversible and all related comments will be deleted.</span>',
         'item.refundable': 'Refundable',
+        'item.purchase_status_loading': 'Loading purchase status...',
+        'easter.title': 'Flying Pig Dream',
+        'easter.hint': 'Move the mouse to look | PgUp speeds up, PgDn slows down | ESC closes',
+        'easter.speed': 'Speed',
         'item.confirm_refund_title': 'Confirm Refund',
         'item.confirm_refund': 'Confirm Refund',
         'item.refund_amount': 'Refund Amount: ',
@@ -2006,6 +2392,8 @@ const translations = {
         'item.refund_consequence_2': 'Downloaded files will be automatically deleted',
         'item.refund_consequence_3': 'Re-purchase is prohibited for 30 days',
         'item.refund_success': 'Refund Successful',
+        'item.refund_success_toast': 'Refund successful. Points have been returned.',
+        'item.refund_amount_returned': '{amount} points have been refunded to your account',
         'item.credits_refunded': ' credits have been refunded to your account',
         'item.ban_days_notice': 'Re-purchase prohibited for {days} days',
         'item.refund_failed_retry': 'Refund failed, please retry',
@@ -2022,6 +2410,7 @@ const translations = {
         'item.delete_request_failed': 'Delete request failed, please check network',
         'item.no_tips_yet': 'No tips yet for this resource. Be the first to support!',
         'item.author': 'Author',
+        'item.sponsor_thanks': 'With thanks to Yanying Technology for its support.',
         'item.original_notice': 'Original content, do not use commercially',
         'item.tip_encourage': 'Tip to encourage this work',
         'item.tip_board_title': 'Top Supporters (TOP 10)',
@@ -2031,6 +2420,20 @@ const translations = {
         'web.install_on_desktop': 'Please install it in the desktop version',
         'web.purchase_success_desktop': 'Purchase successful! Please install it in the desktop version',
         'crop.ratio_label': 'Ratio',
+        'crop.title': 'Crop image',
+        'crop.zoom_label': 'Zoom',
+        'crop.confirm': 'Crop and upload',
+        'crop.processing': 'Processing...',
+        'crop.process_failed': 'Processing failed. Try again.',
+        'feedback.processing': 'Processing...',
+        'feedback.copied': 'Copied to clipboard',
+        'feedback.copy_failed': 'Could not copy',
+        'feedback.operation_success': 'Operation completed',
+        'profile.post_detail_load_failed': 'Could not load post details',
+        'profile.prompt_detail_load_failed': 'Could not load prompt details',
+        'tip.invalid_amount': 'Tip amount must be greater than 0',
+        'tip.amount_limit': 'The maximum tip per transaction is {max} points',
+        'tip.balance_short_recharge': 'Your points balance is too low. Go to your profile to recharge now?',
         'crop.gesture_hint_touch': 'Drag with one finger to reposition | Pinch or use the slider to zoom',
         'crop.gesture_hint_mouse': 'Drag to reposition | Scroll to zoom',
         'item.update_available': 'Update available (Click for silent hot update)',
@@ -2042,7 +2445,19 @@ const translations = {
         'feedback.deleted': 'Successfully deleted',
         'feedback.delete_failed': 'Delete failed',
         'feedback.retry_suffix': ', please try again',
+        'feedback.no_search_results': '🔍 No matching results found',
+        'feedback.no_list_data': '📭 No data yet',
+        'feedback.load_posts_failed': 'Could not load the forum right now',
+        'feedback.load_tasks_failed': 'Could not load tasks right now',
+        'feedback.load_prompts_failed': 'Could not load prompts right now',
+        'auth.session_changed': 'Your sign-in status changed. Please try again.',
+        'auth.reopen_list': 'Your sign-in status changed. Reopen the list and try again.',
+        'auth.form_data_incomplete': 'The form is incomplete. Check the required fields.',
+        'task.session_changed': 'Your sign-in status changed. Return to the list and reopen this task.',
+        'task.cached_readonly': 'Showing saved public content. Actions become available after an online check.',
+        'task.cached_refresh_failed': 'Refresh unavailable. Saved public content remains visible; actions require an online check.',
         'feedback.cache_fallback': '⚠️ Network failed, showing cached data',
+        'feedback.refresh_failed_cached': 'Refresh failed. The previous results are still shown.',
         'feedback.offline_no_cache': 'Network disconnected, and no local cache available',
         'feedback.cloud_unreachable_no_cache': 'Cloud service is unreachable, and there is no local content to show',
         'feedback.search_local_result': '⚠️ Network unavailable, showing local search results',
@@ -2235,6 +2650,8 @@ const translations = {
         'task.add_reference_image': 'Add reference image',
         'task.reference_link_optional': 'Reference link (optional)',
         'task.min_10_credits': 'Minimum 10 credits',
+        'task.price_range': 'Enter a whole-number task reward from 0 to {max}.',
+        'task.deposit_invalid': 'Select a valid deposit ratio.',
         'task.deposit_deducted_on_assign': 'Deducted on assignment',
         'task.price_description': 'Price Breakdown',
         'task.deposit_on_assign': 'Deposit (deducted when assigning)',
@@ -2245,15 +2662,25 @@ const translations = {
         'task.please_enter_description': 'Please enter a task description',
         'task.price_min_10': 'Task price cannot be lower than 10 credits',
         'task.please_select_deadline': 'Please select a deadline',
+        'task.deadline_invalid': 'Select a valid deadline date.',
+        'task.price_locked': '⚠️ The task is in progress. Its reward cannot be changed.',
+        'task.deposit_locked': '⚠️ The task is in progress. Its deposit ratio cannot be changed.',
+        'task.deadline_locked': '⚠️ The task is in progress. Its deadline cannot be changed.',
+        'task.remove_reference_image': 'Remove reference image {index}',
         'task.uploading_images': 'Uploading images',
         'task.upload_progress': 'Uploading images ({current}/{total})',
         'task.publishing': 'Publishing',
         'task.max_6_images': 'Max 6 images',
+        'task.images_reading': 'Reference images are still loading. Wait before submitting.',
+        'task.image_size_limit': 'Choose a non-empty reference image no larger than {max} MB.',
         'task.view_total': '🔥 Total Views',
         'task.view_today': '📅 Today Views',
         'task.save_changes': 'Save Changes',
         
         // Dispute
+        'dispute.session_changed': 'Your sign-in status changed. Go back and reopen this dispute.',
+        'dispute.open_evidence': 'Open evidence image {index}',
+        'dispute.remove_evidence': 'Remove evidence image {index}',
         'dispute.title': 'Dispute Details',
         'dispute.status_pending': 'Pending Response',
         'dispute.status_responded': 'Pending Arbitration',
@@ -2460,6 +2887,7 @@ const translations = {
                 'prompt.text_label': 'Prompt Text (Paid Content)',
                 'prompt.text_placeholder': 'Enter the full prompt, only visible to buyers after publishing...',
                 'prompt.price_label': 'Price',
+                'prompt.price_invalid': 'Enter a whole-number price from 0 to {max}.',
                 'prompt.video_label': 'Sample Video',
                 'prompt.title_required': 'Please enter a title',
                 'prompt.content_required': 'Please enter the intro',
@@ -2507,6 +2935,11 @@ const translations = {
         'post.mode_video': 'Video',
         'post.upload_images': 'Upload Images',
         'post.max_9_images': 'Max 9',
+        'post.image_invalid_file': 'Invalid image or image exceeds processing limits. Choose another image.',
+        'post.image_preview_failed': 'Image preview failed. Remove it and choose the image again.',
+        'post.image_position': 'Image {index} of {total}',
+        'post.remove_image': 'Remove image {index}',
+        'post.image_move_hint': 'Press Alt and Left or Right to reorder within existing or new images. The first image is the cover.',
         'post.click_upload': 'Click to upload',
         'post.upload_video': 'Upload Video',
         'post.click_upload_video': 'Click to select video',
@@ -2519,6 +2952,7 @@ const translations = {
         'post.notice_manage': 'Manage in profile after publishing',
         'post.error_video_format': 'Only mp4, webm, mov supported',
         'post.error_video_size': 'Video cannot exceed 100MB',
+        'post.video_limits_hint': 'mp4/webm/mov, up to {megabytes}MB and {minutes} minutes',
         'post.error_video_duration': 'Video cannot exceed 3 minutes',
         'post.error_video_load': 'Cannot read video info',
         'post.existing_video': 'Existing video',
@@ -2556,15 +2990,52 @@ const translations = {
         'common.credits': 'Points',
         'common.unknown': 'Unknown',
         'common.load_failed': 'Load failed',
+        'common.sidebar_load_failed': 'Could not load the sidebar. Refresh the page and try again.',
         'tip.new_fan': 'New Fan',
+        'tip.level_max': 'Supreme Sponsor (Maximum Level)',
+        'tip.level_super': 'Super Sponsor',
+        'tip.level_gold': 'Gold Sponsor',
+        'tip.level_silver': 'Silver Sponsor',
+        'tip.level_bronze': 'Bronze Sponsor',
+        'tip.level_fan': 'Dedicated Fan',
+        'tip.level_supporter': 'Supporter',
+        'tip.no_tips_yet': 'No tips yet. Be the first to support!',
         'tip.supreme_sponsor': 'Supreme Sponsor',
+        'tip.supreme_sponsor_success': 'Congratulations, you reached the highest sponsor level!',
+        'tip.success_thanks': 'Tip sent successfully. Thank you for your generous support!',
+        'tip.confirm': 'Confirm Tip',
+        'tip.amount_label': 'Tip amount',
+        'tip.level_preview': 'Tip level preview',
+        'tip.rules_title': 'Level rules',
+        'tip.rule_star': 'One star per block of {points} points',
+        'tip.rule_moon': 'Every {stars} stars forms one moon',
+        'tip.rule_sun': 'Every {moons} moons forms one sun',
+        'tip.rule_max': 'Maximum {suns} suns at {points} points',
+        'tip.anonymous': 'Tip anonymously (hide my name)',
+        'tip.dialog_title': 'Support {name}',
+        'tip.integer_amount': 'Tip amount must be a positive whole number',
+        'tip.unknown_result': 'The tip result is unconfirmed. Check your wallet and tip history before another action.',
+        'tip.balance_refresh_failed': 'The tip succeeded, but the balance is unavailable. Refresh your wallet to confirm.',
         'tip.points': 'pts',
+        'common.seconds': 'sec',
         'chart.loading': 'Loading chart...',
         'chart.load_failed': 'Chart failed to load',
         'image.loading': 'Loading...',
         'image.load_failed': 'Image load failed',
         'image.load_timeout': 'Load timeout',
         'image.gallery': 'Gallery',
+        'image.viewer.fullscreen': 'Open fullscreen viewer',
+        'image.viewer.load_failed': 'Could not load the image viewer. Refresh and try again.',
+        'image.viewer.close': 'Close (Esc)',
+        'image.viewer.previous': 'Previous image (←)',
+        'image.viewer.next': 'Next image (→)',
+        'image.viewer.autoplay': 'Start slideshow (Space)',
+        'image.viewer.pause': 'Pause slideshow (Space)',
+        'image.viewer.dialog': 'Image viewer',
+        'image.viewer.previous_short': 'Previous',
+        'image.viewer.next_short': 'Next',
+        'image.viewer.close_short': 'Close',
+        'image.viewer.image_position': 'Image {current} of {total}',
         'common.operation_failed': 'Operation failed',
         'common.login_required': 'Please login to continue',
         'common.publish': 'Publish',
@@ -2663,6 +3134,10 @@ const translations = {
         'publish.uploading_images': 'Uploading images ({current}/{total})...',
         'publish.syncing': 'Syncing to global database...',
         'publish.save_success': 'Changes saved and synced!',
+        'publish.save_unconfirmed': 'The save result is unconfirmed. Check your works before publishing or editing again.',
+        'publish.result_pending': 'Save result unconfirmed',
+        'publish.edit_conflict': 'This work was changed in another view. Reopen the editor and check the latest content before saving.',
+        'publish.edit_reopen': 'Reopen the editor',
         'publish.publish_success': 'Published! Your work has been synced globally.',
         
         // Profile page
@@ -2678,6 +3153,32 @@ const translations = {
         'profile.privacy_hidden': 'This list is private due to the author\'s privacy settings',
         'profile.no_following': 'Not following anyone',
         'profile.no_followers': 'No followers yet',
+        'profile.no_purchased_resources': 'You have not purchased any resources yet',
+        'profile.discover_resources': 'Explore the rankings to find useful plugins.',
+        'profile.loading_resources': 'Loading resources...',
+        'profile.loading_tasks': 'Loading tasks...',
+        'profile.no_task_records': 'No task records yet',
+        'profile.go_tasks': 'Publish a task or accept one from the task board.',
+        'profile.published_tasks': 'Tasks I published',
+        'profile.assigned_tasks': 'Tasks I accepted',
+        'profile.load_tasks_failed': 'Failed to load tasks',
+        'profile.loading_transactions': 'Loading transactions...',
+        'profile.task_earnings_stats': 'Task Earnings Statistics',
+        'profile.task_income': 'Task Income',
+        'profile.task_expense': 'Task Expenses',
+        'profile.net_earnings': 'Net Earnings',
+        'profile.no_transactions': 'No transactions yet',
+        'profile.load_transactions_failed': 'Failed to load transactions',
+        'profile.loading_posts': 'Loading posts...',
+        'profile.no_posts': 'You have not published any posts yet',
+        'profile.go_posts': 'Share your thoughts in the forum.',
+        'profile.load_posts_failed': 'Failed to load posts',
+        'profile.loading_prompts': 'Loading prompts...',
+        'profile.no_prompts': 'You have not published any prompts yet',
+        'profile.go_prompts': 'Share your creations in the prompt gallery.',
+        'profile.load_prompts_failed': 'Failed to load prompts',
+        'profile.fetching_data': 'Fetching data...',
+        'profile.no_records': 'No records yet',
         'profile.load_more': 'Load More ({count})',
         'profile.no_collected': 'No favorites yet',
         'profile.go_discover': 'Go discover content in rankings or forum!',
@@ -2754,6 +3255,28 @@ const translations = {
         'settings_form.save_failed': 'Settings failed',
         'settings_form.avatar_upload_success': 'Avatar uploaded! Click Save below to apply.',
         'settings_form.banner_cleared': 'Banner cleared. Click Save below to apply.',
+        'settings_form.file_read_failed': 'Could not read the file. Please try again.',
+        'settings_form.crop_avatar': 'Crop avatar',
+        'settings_form.crop_banner': 'Crop profile banner',
+        'settings_form.crop_ui_bg': 'Crop interface background',
+        'settings_form.uploading': 'Uploading...',
+        'settings_form.avatar_process_failed': 'Could not process the avatar. Choose another image and try again.',
+        'settings_form.banner_selected': 'Banner selected. Save settings below to upload it.',
+        'settings_form.ui_bg_applied': 'Interface background updated.',
+        'settings_form.ui_bg_cleared': 'Interface background cleared.',
+        'settings_form.saving': 'Saving...',
+        'settings_form.uploading_banner': 'Uploading banner...',
+        'settings_form.banner_upload_failed': 'Could not upload the banner. Check the network and try again.',
+        'settings_form.saving_settings': 'Saving settings...',
+        'settings_form.settings_saved': 'Settings saved and synced to the cloud.',
+        'settings_form.settings_save_failed': 'Could not save settings. Check the network and try again.',
+        'settings_form.local_storage_unavailable': 'Browser storage operation failed. Check available storage and permissions.',
+        'settings_form.enabled': 'Enabled',
+        'settings_form.disabled': 'Disabled',
+        'settings_form.moderation_quota': 'Used this month: Aliyun {aliyun}/3000, Tencent Cloud {tencent}/10000',
+        'settings_form.moderation_skipped': 'Uploaded images will skip moderation',
+        'settings_form.moderation_enabled': 'Image moderation enabled',
+        'settings_form.moderation_disabled': 'Image moderation disabled',
         
         // Video player
         'video.play': 'Play',
@@ -2769,6 +3292,10 @@ const translations = {
         'video.volume': 'Volume',
 
         // About plugin
+        'about.brand': 'Community Hub',
+        'about.stage_unknown': 'Unknown stage',
+        'about.version_unknown': 'Unknown version',
+        'about.author_link': 'Visit the author on Bilibili',
         'about.title': 'ComfyUI Community Hub',
         'about.subtitle': 'A modern Web3.0-level ecosystem engine built for ComfyUI',
         'about.stage_alpha': 'Alpha',

前端页面/components/用户体验增强.js

@@ -38,16 +38,27 @@ export function createAutoSaver(formId, formElement, options = {}) {
     } = options;
     
     let debounceTimer = null;
+    let initialized = false;
+    let disposed = false;
+    let saveGeneration = 0;
     const storageKey = DRAFT_PREFIX + formId;
+
+    const canSaveInput = input => {
+        const name = input.name || input.id;
+        return name && name !== '_savedAt' && !excludeFields.includes(name)
+            && !['password', 'file', 'hidden', 'submit', 'button', 'reset'].includes(input.type)
+            && !['current-password', 'new-password', 'one-time-code'].includes(input.autocomplete)
+            && (!fields.length || fields.some(selector => input.matches(selector)));
+    };
     
     // 获取表单数据
     const getFormData = () => {
-        const data = {};
+        const data = Object.create(null);
         const inputs = formElement.querySelectorAll('input, textarea, select');
         
         inputs.forEach(input => {
             const name = input.name || input.id;
-            if (!name || excludeFields.includes(name)) return;
+            if (!canSaveInput(input)) return;
             
             if (input.type === 'checkbox') {
                 data[name] = input.checked;
@@ -63,22 +74,34 @@ export function createAutoSaver(formId, formElement, options = {}) {
     
     // 保存草稿
     const saveDraft = () => {
+        if (disposed) return;
         try {
             const data = getFormData();
             data._savedAt = Date.now();
             localStorage.setItem(storageKey, JSON.stringify(data));
-            console.log(`📝 草稿已自动保存: ${formId}`);
+            console.log('📝 草稿已自动保存');
         } catch (e) {
-            console.warn('草稿保存失败:', e);
+            console.warn('草稿保存失败');
         }
     };
     
     // 加载草稿
     const loadDraft = () => {
+        if (disposed) return null;
         try {
             const saved = localStorage.getItem(storageKey);
             if (!saved) return null;
-            return JSON.parse(saved);
+            const data = JSON.parse(saved);
+            if (!data || typeof data !== 'object' || Array.isArray(data)
+                || !Number.isFinite(data._savedAt) || data._savedAt <= 0) return null;
+            const projected = Object.create(null);
+            projected._savedAt = data._savedAt;
+            formElement.querySelectorAll('input, textarea, select').forEach(input => {
+                const name = input.name || input.id;
+                if (canSaveInput(input) && Object.prototype.hasOwnProperty.call(data, name)
+                    && ['string', 'number', 'boolean'].includes(typeof data[name])) projected[name] = data[name];
+            });
+            return projected;
         } catch (e) {
             return null;
         }
@@ -86,28 +109,37 @@ export function createAutoSaver(formId, formElement, options = {}) {
     
     // 恢复草稿到表单
     const restoreDraft = (data) => {
-        if (!data) return;
+        if (disposed || !data || typeof data !== 'object' || Array.isArray(data)) return;
+        const restored = Object.create(null);
+        if (Number.isFinite(data._savedAt) && data._savedAt > 0) restored._savedAt = data._savedAt;
         
         const inputs = formElement.querySelectorAll('input, textarea, select');
         inputs.forEach(input => {
             const name = input.name || input.id;
-            if (!name || !(name in data)) return;
+            if (!canSaveInput(input) || !Object.prototype.hasOwnProperty.call(data, name)) return;
+            if (!['string', 'number', 'boolean'].includes(typeof data[name])) return;
+            restored[name] = data[name];
             
             if (input.type === 'checkbox') {
                 input.checked = !!data[name];
             } else if (input.type === 'radio') {
                 input.checked = input.value === data[name];
             } else {
-                input.value = data[name] || '';
+                input.value = data[name] ?? '';
             }
         });
         
-        if (onRestore) onRestore(data);
+        if (onRestore) onRestore(restored);
     };
     
     // 清除草稿
     const clearDraft = () => {
-        localStorage.removeItem(storageKey);
+        if (disposed) return;
+        saveGeneration++;
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = null;
+        try { localStorage.removeItem(storageKey); }
+        catch { console.warn('草稿清除失败'); }
     };
     
     // 检查是否有草稿
@@ -118,8 +150,14 @@ export function createAutoSaver(formId, formElement, options = {}) {
     
     // 输入事件监听（防抖保存）
     const handleInput = () => {
+        if (disposed) return;
         if (debounceTimer) clearTimeout(debounceTimer);
-        debounceTimer = setTimeout(saveDraft, DRAFT_DEBOUNCE);
+        const generation = ++saveGeneration;
+        debounceTimer = setTimeout(() => {
+            if (disposed || generation !== saveGeneration) return;
+            debounceTimer = null;
+            saveDraft();
+        }, DRAFT_DEBOUNCE);
     };
     
     // 页面离开前保存
@@ -129,12 +167,16 @@ export function createAutoSaver(formId, formElement, options = {}) {
     
     // 初始化
     const init = () => {
-        // 监听输入事件
-        formElement.addEventListener('input', handleInput);
-        formElement.addEventListener('change', handleInput);
+        if (disposed) return { hasDraft: false };
+        if (!initialized) {
+            initialized = true;
+            // 监听输入事件
+            formElement.addEventListener('input', handleInput);
+            formElement.addEventListener('change', handleInput);
         
-        // 页面离开前保存
-        window.addEventListener('beforeunload', handleBeforeUnload);
+            // 页面离开前保存
+            window.addEventListener('beforeunload', handleBeforeUnload);
+        }
         
         // 检查是否有草稿需要恢复
         const draft = loadDraft();
@@ -151,10 +193,14 @@ export function createAutoSaver(formId, formElement, options = {}) {
     // 防止内存泄漏和已卸载 DOM 上的事件监听器残留。
     // 调用时机：弹窗关闭回调、组件 unmount 钩子、或 beforeunload 兜底。
     const destroy = () => {
+        if (disposed) return;
+        disposed = true;
+        saveGeneration++;
         formElement.removeEventListener('input', handleInput);
         formElement.removeEventListener('change', handleInput);
         window.removeEventListener('beforeunload', handleBeforeUnload);
         if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = null;
     };
     
     return {

前端页面/components/顶部导航组件.js

@@ -2,18 +2,21 @@
 import { createAuthView } from "../auth/用户注册登录组件.js";
 import { openUserProfileModal } from "../profile/个人中心视图.js";
 import { openChatModal, loadChatUnreadCount } from "../social/私信聊天组件.js";
-import { api } from "../core/网络请求API.js"; 
+import { api, captureRequestSession } from "../core/网络请求API.js";
 import { showToast } from "./UI交互提示组件.js";
 import { showAboutInfo } from "./关于插件组件.js";
 import { openNotificationCenter, loadUnreadCount } from "../social/通知中心组件.js";
 import { openSettingsPage } from "./全局设置组件.js";  // ⚙️ 新增
-import { CACHE, escapeHtml } from "../core/全局配置.js";
+import { setUser, updateUser, initUserState } from "../core/状态管理.js";
+import { readUserSession, sessionProfile } from "../core/用户会话存储.js";
+import { API, CACHE, escapeHtml } from "../core/全局配置.js";
 import { t } from "./用户体验增强.js";  // 🌐 多语言支持
 import { createTopBanner } from "./顶部广告组件.js";
 import { uploadFile } from "../market/发布内容_提交引擎.js";  // 🖼️ 带压缩管线的统一上传包装器
 
 // 🚀 新增：消息轮询定时器
 let messagePollingTimer = null;
+let pollingGeneration = 0;
 let isPollingActive = false;  // 🔧 P3优化：防止重复启动轮询
 
 // 🔧 P1修复：window 监听只安装一次并始终指向最新导航实例
@@ -37,89 +40,59 @@ function _registerNavWindowListeners() {
 }
 
 export function createTopNav() {
+    stopMessagePolling();
     const userHeader = document.createElement("div");
-    Object.assign(userHeader.style, {
-        display: "flex", justifyContent: "space-between", alignItems: "center",
-        padding: "15px 10px", backgroundColor: "#1a1a1a", borderBottom: "1px solid var(--border-color, #333)"
-    });
-
-    const titleSpan = document.createElement("div");
-    titleSpan.innerHTML = `<strong style='color:#4CAF50;'>ComfyUI</strong> ${t('nav.community')}`;
-    
-    Object.assign(titleSpan.style, { fontSize: "16px", cursor: "pointer", transition: "opacity 0.2s" });
-    titleSpan.title = "查看关于本插件与作者信息";
-    titleSpan.onmouseover = () => titleSpan.style.opacity = "0.8";
-    titleSpan.onmouseout = () => titleSpan.style.opacity = "1";
+    userHeader.className = "top-nav";
+
+    const titleSpan = document.createElement("button");
+    titleSpan.type = "button";
+    titleSpan.className = "top-nav__brand";
+    titleSpan.innerHTML = `<strong>ComfyUI</strong> ${t('nav.community')}`;
+    titleSpan.title = t('nav.about_title');
+    titleSpan.setAttribute("aria-label", t('nav.about_title'));
     titleSpan.onclick = () => showAboutInfo(currentUser);
 
-    // ⚙️ 设置按钮（放在社区精选旁边）
     const settingsBtn = document.createElement("button");
-    Object.assign(settingsBtn.style, {
-        background: "transparent",
-        border: "none",
-        color: "#888",
-        cursor: "pointer",
-        fontSize: "16px",
-        marginLeft: "8px",
-        padding: "4px",
-        transition: "0.2s",
-        verticalAlign: "middle"
-    });
-    settingsBtn.innerHTML = "⚙️";
+    settingsBtn.type = "button";
+    settingsBtn.className = "top-nav__icon";
+    settingsBtn.textContent = "⚙️";
     settingsBtn.title = t('nav.settings');
-    settingsBtn.onmouseover = () => { settingsBtn.style.color = "#4CAF50"; settingsBtn.style.transform = "rotate(30deg)"; };
-    settingsBtn.onmouseout = () => { settingsBtn.style.color = "#888"; settingsBtn.style.transform = "rotate(0deg)"; };
+    settingsBtn.setAttribute("aria-label", t('nav.settings'));
     settingsBtn.onclick = (e) => { e.stopPropagation(); openSettingsPage(); };
 
-    // 📦 将标题和设置按钮包裹在一起
     const titleWrapper = document.createElement("div");
-    titleWrapper.style.display = "flex";
-    titleWrapper.style.alignItems = "center";
+    titleWrapper.className = "top-nav__heading";
     titleWrapper.appendChild(titleSpan);
     titleWrapper.appendChild(settingsBtn);
 
     const userActionBtn = document.createElement("button");
-    Object.assign(userActionBtn.style, { padding: "6px 12px", backgroundColor: "#333", color: "#fff", border: "1px solid #555", borderRadius: "4px", cursor: "pointer", fontSize: "12px", transition: "background 0.2s" });
+    userActionBtn.type = "button";
+    userActionBtn.className = "top-nav__identity";
 
     const chatEntryBtn = document.createElement("button");
-    Object.assign(chatEntryBtn.style, { background: "transparent", border: "none", color: "#aaa", cursor: "pointer", fontSize: "18px", marginRight: "10px", transition: "0.2s", position: "relative" });
-    // 🔔 私信未读红点：与铃铛 #unread-badge 同款样式，数据源为 chats.json 各会话未读汇总
-    chatEntryBtn.innerHTML = `✉️<span id="chat-unread-badge" style="display:none; position:absolute; top:-4px; right:-8px; background:#F44336; color:white; font-size:10px; font-weight:bold; padding:2px 5px; border-radius:10px; line-height:1;">0</span>`;
+    chatEntryBtn.type = "button";
+    chatEntryBtn.className = "top-nav__icon";
+    chatEntryBtn.innerHTML = `✉️<span id="chat-unread-badge" class="top-nav__badge" style="display:none">0</span>`;
     chatEntryBtn.title = t('social.chat');
+    chatEntryBtn.setAttribute("aria-label", t('social.chat'));
 
     const bellBtn = document.createElement("button");
-    Object.assign(bellBtn.style, { background: "transparent", border: "none", color: "#aaa", cursor: "pointer", fontSize: "18px", position: "relative", marginRight: "15px" });
-    bellBtn.innerHTML = `🔔<span id="unread-badge" style="display:none; position:absolute; top:-4px; right:-8px; background:#F44336; color:white; font-size:10px; font-weight:bold; padding:2px 5px; border-radius:10px; line-height:1;">0</span>`;
-    
-    let currentUser = null; 
-    try {
-        const savedUserStr = localStorage.getItem("ComfyCommunity_User");
-        if (savedUserStr) {
-            const data = JSON.parse(savedUserStr);
-            if (data.expireAt && Date.now() < data.expireAt) { currentUser = data.user; } 
-            else { localStorage.removeItem("ComfyCommunity_User"); localStorage.removeItem("ComfyCommunity_Token"); }
-        } else {
-            const tempUserStr = sessionStorage.getItem("ComfyCommunity_User");
-            if (tempUserStr) { currentUser = JSON.parse(tempUserStr).user; }
-        }
-    } catch (e) {}
+    bellBtn.type = "button";
+    bellBtn.className = "top-nav__icon";
+    bellBtn.innerHTML = `🔔<span id="unread-badge" class="top-nav__badge" style="display:none">0</span>`;
+    bellBtn.title = t('social.notifications');
+    bellBtn.setAttribute("aria-label", t('social.notifications'));
 
-    // 🔧 P1修复：登出/token失效/storage 监听已提升至模块级统一注册（见 _registerNavWindowListeners），
-    // 避免每次 createTopNav 重复 addEventListener 导致闭包累积与轮询失效
-
-    chatEntryBtn.onclick = () => {
-        if (!currentUser) return showToast(t('auth.login_required'), "warning");
-        openChatModal(currentUser);
-    };
-
-    // 【核心瘦身】：直接调用拆分出去的独立组件模块
-    bellBtn.onclick = () => openNotificationCenter(currentUser, bellBtn);
+    let currentUser = null;
+    const sessionStorages = () => ['localStorage', 'sessionStorage'].map(name => { try { return window[name]; } catch (_) { return null; } });
+    const restoredSession = readUserSession(sessionStorages(), CACHE.LEGACY_KEYS);
+    currentUser = restoredSession?.user || null;
 
     const updateUserButtonState = () => {
         if (currentUser) {
             userActionBtn.innerHTML = `👤 ${escapeHtml(currentUser.name || currentUser.account || t('common.unknown_user'))}`;
-            userActionBtn.style.backgroundColor = "#2196F3";
-            userActionBtn.style.borderColor = "#2196F3";
+            userActionBtn.dataset.authenticated = "true";
+            userActionBtn.title = currentUser.name || currentUser.account || t('common.unknown_user');
             userActionBtn.onclick = () => openUserProfileModal(currentUser);
             loadUnreadCount(currentUser, bellBtn);
             loadChatUnreadCount(currentUser, chatEntryBtn);
@@ -131,85 +104,71 @@ export function createTopNav() {
             stopMessagePolling();
             
             userActionBtn.innerHTML = `🔑 ${t('nav.login')}`;
-            userActionBtn.style.backgroundColor = "#333";
-            userActionBtn.style.borderColor = "#555";
+            userActionBtn.dataset.authenticated = "false";
+            userActionBtn.title = t('nav.login');
             bellBtn.querySelector("#unread-badge").style.display = "none";
             chatEntryBtn.querySelector("#chat-unread-badge").style.display = "none";
             
             userActionBtn.onclick = () => {
-                const view = createAuthView(async (formData) => {
+                const view = createAuthView(async (formData, context) => {
+                    const originalSession = captureRequestSession();
+                    const current = () => context.isCurrent() && userHeader.isConnected
+                        && _navInstance?.dom === userHeader && originalSession();
+                    if (!current()) return;
                     try {
-                        userActionBtn.innerHTML = `⏳ ${t('common.loading')}`;
-                        let userData; let token; let isRemember = false;
-                        
-                        if (formData.type === "reset") {
-                            userActionBtn.innerHTML = `⏳ ${t('auth.resetting_password')}`;
-                            
-                            // 🚀 核心修复：停止错误地拆解字段导致 undefined，直接将包含所有数据的 formData 对象完整传给 API 装甲！
-                            await api.resetPassword(formData);
-                            
-                            showToast(t('auth.password_reset_success'), "success");
-                            window.dispatchEvent(new CustomEvent("comfy-route-back")); updateUserButtonState(); return; 
+                        if (formData.type === 'reset') {
+                            const reset = await api.resetPassword(formData);
+                            if (reset?.status !== 'success') throw new Error('Unconfirmed reset');
+                            if (!current()) return;
+                            showToast(t('auth.password_reset_success'), 'success');
+                            window.dispatchEvent(new CustomEvent('comfy-route-back')); updateUserButtonState(); return;
                         }
-                        if (formData.type === "register") {
-                            // 🚀 核心修复：/api/upload 需要登录凭证，注册时尚无 token 必然 401。
-                            // 调整时序为：先注册（不带头像）→ 自动登录拿到 token → 再上传头像并写入资料。
-                            const pendingAvatarFile = formData.avatarFile || null;
-                            delete formData.avatarFile;
-                            delete formData.avatarDataUrl;  // base64 预览值会被后端拒绝，不随注册提交
-
-                            userActionBtn.innerHTML = `⏳ ${t('auth.registering')}`;
-                            await api.register(formData);
-                            showToast(t('auth.register_success') + t('auth.auto_login'), "success");
-                            // 注册后自动登录，默认保持登录
-                            const res = await api.login(formData.account, formData.password, true);
-                            userData = { account: formData.account, name: formData.name, avatar: res.avatar, ...res }; 
-                            token = res.token; isRemember = true; 
-
-                            // 🖼️ 登录成功后再上传头像（此时请求可携带 Authorization）
-                            if (pendingAvatarFile && token) {
-                                userActionBtn.innerHTML = `⏳ ${t('auth.uploading_avatar')}`;
-                                // 提前写入 token，确保上传与资料更新请求能通过认证
-                                localStorage.setItem("ComfyCommunity_Token", token);
-                                try {
-                                    // 统一走带 processAvatar 压缩的包装器，规避后端 2MB 头像限制
-                                    const cloudAvatarUrl = await uploadFile(pendingAvatarFile, "avatar");
-                                    if (cloudAvatarUrl) {
-                                        const updateRes = await api.updateUserProfile(formData.account, { avatarDataUrl: cloudAvatarUrl });
-                                        userData = { ...userData, ...(updateRes.data || {}) };
-                                        if (userData.avatarDataUrl) userData.avatar = userData.avatarDataUrl;
-                                    } else {
-                                        showToast(t('auth.avatar_set_failed'), "warning");
-                                    }
-                                } catch (avatarErr) {
-                                    console.warn("注册后设置头像失败:", avatarErr.message || avatarErr);
-                                    showToast(t('auth.avatar_set_failed'), "warning");
-                                }
-                            }
-                        } else if (formData.type === "login") {
-                            const res = await api.login(formData.account, formData.password, formData.remember);
-                            token = res.token; isRemember = formData.remember;
-                            try {
-                                if (isRemember) localStorage.setItem("ComfyCommunity_Token", token); 
-                                else sessionStorage.setItem("ComfyCommunity_Token", token);
-                                const profileRes = await api.getUserProfile(formData.account);
-                                userData = { account: formData.account, ...profileRes.data };
-                            } catch (e) {
-                                userData = { account: formData.account, name: res.name || res.data?.name || formData.account, avatar: res.avatar || res.data?.avatar };
-                            }
-                            showToast(t('auth.login_success'), "success");
+                        const account = formData.account;
+                        const isRegister = formData.type === 'register';
+                        if (!isRegister && formData.type !== 'login') return;
+                        const pendingAvatarFile = isRegister ? formData.avatarFile : null;
+                        if (isRegister) {
+                            const registration = { ...formData }; delete registration.avatarFile; delete registration.avatarDataUrl;
+                            const registered = await api.register(registration);
+                            if (registered?.status !== 'success') throw new Error('Unconfirmed registration');
+                            if (!current()) return;
                         }
-                        
-                        currentUser = userData;
-                        const sessionData = JSON.stringify({ user: currentUser, expireAt: Date.now() + 30 * 24 * 60 * 60 * 1000 });
-                        if (isRemember) { localStorage.setItem("ComfyCommunity_User", sessionData); localStorage.setItem("ComfyCommunity_Token", token); } 
-                        else { sessionStorage.setItem("ComfyCommunity_User", sessionData); sessionStorage.setItem("ComfyCommunity_Token", token); }
-
-                        window.dispatchEvent(new CustomEvent("comfy-route-back"));
-                        updateUserButtonState();
-                        window.dispatchEvent(new CustomEvent("comfy-user-login")); 
-                    } catch (err) {
-                        showToast(`${t('common.error')}: ` + err.message, "error"); updateUserButtonState(); 
+                        const remember = isRegister || formData.remember === true;
+                        const result = await api.login(account, formData.password, remember);
+                        if (!current()) return;
+                        if (result?.status !== 'success' || typeof result.token !== 'string' || !result.token
+                            || (result.account && result.account !== account)) throw new Error('Invalid login response');
+                        currentUser = setUser({ account, name: result.name || formData.name || account, avatar: result.avatar }, result.token, remember);
+                        const authenticatedSession = captureRequestSession();
+                        const sameLogin = () => authenticatedSession() && userHeader.isConnected
+                            && _navInstance?.dom === userHeader && currentUser?.account === account;
+                        showToast(t(isRegister ? 'auth.register_success' : 'auth.login_success'), 'success');
+                        // 凭证已发布即完成登录，资料补充不阻塞页面返回。
+                        window.dispatchEvent(new CustomEvent('comfy-route-back'));
+                        updateUserButtonState(); window.dispatchEvent(new CustomEvent('comfy-user-login'));
+                        const applyProfile = data => {
+                            if (!sameLogin() || data?.account !== account) return;
+                            currentUser = sessionProfile({ ...currentUser, ...data });
+                            if (currentUser.avatarDataUrl) currentUser.avatar = currentUser.avatarDataUrl;
+                            updateUser(currentUser); updateUserButtonState();
+                        };
+                        try {
+                            const profile = await api.getUserProfile(account, { timeout: API.BACKGROUND_TIMEOUT,
+                                retries: API.BACKGROUND_RETRIES, componentId: `login-profile-${account}` });
+                            if (profile?.status === 'success') applyProfile(profile.data);
+                        } catch (_) {}
+                        if (!sameLogin() || !pendingAvatarFile) return;
+                        try {
+                            const avatar = await uploadFile(pendingAvatarFile, 'avatar', { isCurrent: sameLogin, silent: true });
+                            if (!sameLogin()) return;
+                            if (!avatar) { showToast(t('auth.avatar_set_failed'), 'warning'); return; }
+                            const updated = await api.updateUserProfile(account, { avatarDataUrl: avatar });
+                            if (!sameLogin()) return;
+                            if (updated?.status === 'success') applyProfile(updated.data);
+                            else showToast(t('auth.avatar_set_failed'), 'warning');
+                        } catch (_) { if (sameLogin()) showToast(t('auth.avatar_set_failed'), 'warning'); }
+                    } catch (_) {
+                        if (current()) { showToast(t('common.error'), 'error'); updateUserButtonState(); }
                     }
                 });
                 window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
@@ -219,31 +178,19 @@ export function createTopNav() {
 
     // 🔄 跨标签页登录状态同步：其他标签页修改 localStorage 时触发
     // 🔧 P1修复：改为模块级统一注册的 storage 监听回调（onStorage），不再逐实例 addEventListener
-    const handleCrossTabStorage = (event) => {
-        if (event.key === 'ComfyCommunity_Token' || event.key === 'ComfyCommunity_User') {
-            if (!event.newValue) {
-                // 其他标签页登出 → 本标签页也同步登出
-                if (currentUser) {
-                    currentUser = null;
-                    updateUserButtonState();
-                }
-            } else if (event.key === 'ComfyCommunity_User') {
-                // 其他标签页登入了不同账号 → 刷新本标签页用户状态
-                try {
-                    const data = JSON.parse(event.newValue);
-                    if (data.user && data.user.account !== (currentUser && currentUser.account)) {
-                        currentUser = data.user;
-                        updateUserButtonState();
-                    }
-                } catch (e) {}
-            }
+    const handleCrossTabStorage = event => {
+        if (event.key === null || [CACHE.LEGACY_KEYS.USER, CACHE.LEGACY_KEYS.TOKEN].includes(event.key)) {
+            currentUser = readUserSession(sessionStorages(), CACHE.LEGACY_KEYS)?.user || null;
+            stopMessagePolling();
+            initUserState(); updateUserButtonState();
         }
     };
-    
+
     updateUserButtonState();
 
     // 🔧 P1修复：注册为当前活跃实例，模块级监听将路由到本实例的回调
     _navInstance = {
+        dom: userHeader,
         onLogout: () => { currentUser = null; updateUserButtonState(); },
         onStorage: handleCrossTabStorage,
         onChatUnreadChanged: () => loadChatUnreadCount(currentUser, chatEntryBtn)
@@ -251,16 +198,16 @@ export function createTopNav() {
     _registerNavWindowListeners();
 
     const actionWrapper = document.createElement("div");
-    actionWrapper.style.display = "flex"; actionWrapper.style.alignItems = "center";
+    actionWrapper.className = "top-nav__actions";
     actionWrapper.appendChild(chatEntryBtn); 
     actionWrapper.appendChild(bellBtn);
     actionWrapper.appendChild(userActionBtn);
     
-    userHeader.appendChild(titleWrapper);  // ⚙️ 改为 titleWrapper
-    // 顶部广告横幅
+    userHeader.appendChild(titleWrapper);
+    userHeader.appendChild(actionWrapper);
+    // 广告独占下一行，DOM/键盘顺序与视觉顺序一致。
     const banner = createTopBanner();
     if (banner) userHeader.appendChild(banner);
-    userHeader.appendChild(actionWrapper);
 
     return {
         dom: userHeader,
@@ -270,38 +217,32 @@ export function createTopNav() {
 
 // 🚀 新增：启动消息定时轮询
 function startMessagePolling(currentUser, bellBtn, chatEntryBtn) {
-    if (!CACHE.MESSAGE_POLL.ENABLED) return;
-    if (isPollingActive) return;  // 🔧 P3优化：防止重复启动
-    
-    // 清除旧的定时器
+    if (!CACHE.MESSAGE_POLL.ENABLED || isPollingActive) return;
     stopMessagePolling();
     isPollingActive = true;
-    
-    // 创建新的定时器，每隔一定时间检查新消息
-    messagePollingTimer = setInterval(async () => {
-        // 🔧 P3优化：双重检查，确保用户仍在线
-        if (!currentUser || !isPollingActive) {
-            stopMessagePolling();
+    const generation = pollingGeneration;
+    const sessionMatches = captureRequestSession();
+    const current = () => isPollingActive && generation === pollingGeneration
+        && sessionMatches() && _navInstance?.dom?.contains(bellBtn) && bellBtn.isConnected && chatEntryBtn.isConnected;
+    const poll = async () => {
+        if (!current()) {
+            if (generation === pollingGeneration) stopMessagePolling();
             return;
         }
-        try {
-            // 🔔 铃铛未读（点赞/评论/购买/任务/系统公告等）与 ✉️ 私信未读分别刷新
-            await loadUnreadCount(currentUser, bellBtn);
-            await loadChatUnreadCount(currentUser, chatEntryBtn);
-        } catch (e) {
-            // 静默失败，不影响用户体验
-        }
-    }, CACHE.MESSAGE_POLL.INTERVAL);
-    
-    console.log(`📨 消息轮询已启动，间隔 ${CACHE.MESSAGE_POLL.INTERVAL / 1000} 秒`);
+        await Promise.allSettled([loadUnreadCount(currentUser, bellBtn), loadChatUnreadCount(currentUser, chatEntryBtn)]);
+        if (current()) messagePollingTimer = setTimeout(poll, CACHE.MESSAGE_POLL.INTERVAL);
+        else if (generation === pollingGeneration) stopMessagePolling();
+    };
+    messagePollingTimer = setTimeout(poll, CACHE.MESSAGE_POLL.INTERVAL);
 }
 
 // 🚀 新增：停止消息定时轮询
 function stopMessagePolling() {
+    pollingGeneration++;
     isPollingActive = false;  // 🔧 P3优化：先标记为停止
     if (messagePollingTimer) {
-        clearInterval(messagePollingTimer);
+        clearTimeout(messagePollingTimer);
         messagePollingTimer = null;
         console.log('📨 消息轮询已停止');
     }
-}
+}

前端页面/components/顶部广告组件.js

@@ -1,21 +1,23 @@
 // 前端页面/components/顶部广告组件.js
 
 import { api } from "../core/网络请求API.js";
+import { API, CACHE } from "../core/全局配置.js";
+import { t } from "./用户体验_国际化.js";
 
 // ========== 广告配置数据（默认值 / fallback） ==========
 const BANNER_CONFIG = {
     // 横幅图片URL（支持GIF）
     bannerImage: "",
     // 广告标题
-    title: "创世者计划",
+    title: "",
     // 广告描述
-    description: "100位优质创作者，瓜分平台未来两年收益",
+    description: "",
     // 详情页内容（HTML字符串或纯文本）
-    detailContent: "详细广告内容...",
+    detailContent: "",
     // 详情页大图
     detailImage: "",
     // 是否启用广告
-    enabled: true
+    enabled: false
 };
 
 // 运行时配置（异步加载后更新）
@@ -25,25 +27,82 @@ let activeConfig = { ...BANNER_CONFIG };
 let bannerContainer = null;
 
 // 本地缓存配置
-const BANNER_CACHE_KEY = "ComfyRanking_BannerConfig";
-const BANNER_CACHE_TTL = 60 * 60 * 1000; // 1小时缓存
+const BANNER_CACHE_KEY = CACHE.LOCAL_KEYS.BANNER_CONFIG;
+let bannerSyncGeneration = 0;
+let hasActiveConfig = false;
+// 保留已下载的横幅节点，提交时直接显示，避免重新赋值 src 再次联网。
+let activeBannerImage = null;
+
+/** 缓存与云端共用配置结构检查，异常结果不能覆盖已有横幅。 */
+function validateBannerConfig(data) {
+    if (!data || typeof data !== "object" || Array.isArray(data)) {
+        throw new Error("Invalid banner configuration");
+    }
+    if (typeof data.enabled !== "boolean") throw new Error("Invalid banner enabled state");
+    for (const field of ["bannerImage", "title", "description", "detailContent", "detailImage"]) {
+        if (data[field] !== undefined && typeof data[field] !== "string") {
+            throw new Error("Invalid banner field type");
+        }
+    }
+    const config = { ...BANNER_CONFIG, ...data };
+    if (config.enabled && !config.bannerImage.trim()) throw new Error("Missing banner image");
+    return config;
+}
 
 /**
  * 读取本地广告配置缓存（非破坏性，不删除过期数据）
- * @returns {{ data: Object|null, fresh: boolean }} data 为缓存内容（无缓存为 null），fresh 表示是否仍在 TTL 内
+ * @returns {Object|null} data 为缓存内容，无缓存时为 null
  */
 function readBannerCache() {
     try {
         const cached = localStorage.getItem(BANNER_CACHE_KEY);
         if (cached) {
-            const { data, timestamp } = JSON.parse(cached);
-            return { data: data || null, fresh: Date.now() - timestamp < BANNER_CACHE_TTL };
+            const { data } = JSON.parse(cached);
+            return validateBannerConfig(data);
         }
     } catch (parseErr) {
         // 缓存数据损坏，清除
-        localStorage.removeItem(BANNER_CACHE_KEY);
+        try {
+            localStorage.removeItem(BANNER_CACHE_KEY);
+        } catch (storageErr) {
+            console.warn("广告缓存不可清理，继续使用默认显示流程");
+        }
     }
-    return { data: null, fresh: false };
+    return null;
+}
+
+/** 确认新配置引用的图片均可下载后，再允许替换当前横幅。 */
+function preloadImage(url) {
+    if (!url) return Promise.resolve();
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        const finish = (error) => {
+            clearTimeout(timer);
+            image.onload = null;
+            image.onerror = null;
+            if (error) reject(error);
+            else resolve(image);
+        };
+        const timer = setTimeout(() => {
+            finish(new Error("Banner image loading timed out"));
+            image.removeAttribute("src");
+        }, API.BACKGROUND_TIMEOUT);
+        image.onload = () => finish();
+        image.onerror = () => finish(new Error("Banner image download failed"));
+        image.src = url;
+    });
+}
+
+async function prepareBannerConfig(data) {
+    // 只有明确的 null 表示服务端关闭广告；缺失或异常数据视为更新失败。
+    if (data === null) return { config: { ...BANNER_CONFIG }, image: null };
+    const config = validateBannerConfig(data);
+    if (!config.enabled) return { config, image: null };
+    const [image] = await Promise.all([
+        preloadImage(config.bannerImage),
+        preloadImage(config.detailImage)
+    ]);
+    return { config, image };
 }
 
 /**
@@ -51,26 +110,43 @@ function readBannerCache() {
  * 成功后更新缓存并刷新 DOM；失败时保留当前已展示的内容
  */
 async function syncBannerInBackground() {
+    const generation = ++bannerSyncGeneration;
     try {
-        const res = await api.getPublicBannerConfig();
+        // 绕过请求层缓存，确保拿到的确实是后台新配置。
+        const res = await api.getPublicBannerConfig({
+            noCache: true, timeout: API.BACKGROUND_TIMEOUT, retries: API.BACKGROUND_RETRIES
+        });
         if (res && res.status === "success") {
+            if (generation !== bannerSyncGeneration) return;
+            const prepared = await prepareBannerConfig(res.data);
+            const nextConfig = prepared.config;
+            // 图片加载期间可能又发起了一次刷新，只让最新请求提交结果。
+            if (generation !== bannerSyncGeneration) return;
             if (res.data) {
-                // 只缓存有效配置，不缓存 null（禁用后再启用可立即生效）
-                localStorage.setItem(BANNER_CACHE_KEY, JSON.stringify({
-                    data: res.data,
-                    timestamp: Date.now()
-                }));
-                activeConfig = { ...BANNER_CONFIG, ...res.data };
+                try {
+                    localStorage.setItem(BANNER_CACHE_KEY, JSON.stringify({
+                        data: nextConfig,
+                        timestamp: Date.now()
+                    }));
+                } catch (storageError) {
+                    console.warn("新广告配置无法写入本地缓存，仍显示已下载的新内容");
+                }
             } else {
-                // 广告已禁用，清除旧缓存避免显示过期内容
-                localStorage.removeItem(BANNER_CACHE_KEY);
-                activeConfig = { ...BANNER_CONFIG };
+                // 服务端明确返回无配置，作为成功的新结果清除旧配置。
+                try {
+                    localStorage.removeItem(BANNER_CACHE_KEY);
+                } catch (storageError) {
+                    console.warn("无法清除本地广告缓存，仍应用服务端的无广告状态");
+                }
             }
+            activeConfig = nextConfig;
+            activeBannerImage = prepared.image;
+            hasActiveConfig = true;
             updateBannerDOM();
         }
     } catch (e) {
-        // 网络失败：保留当前展示内容（首屏已由缓存或默认值渲染）
-        console.warn("后台更新广告配置失败（保留当前内容）:", e);
+        // 网络失败或图片下载失败：不写缓存、不替换当前已显示的缓存横幅。
+        console.warn("后台更新广告配置失败（保留当前内容）");
     }
 }
 
@@ -80,19 +156,10 @@ async function syncBannerInBackground() {
  */
 export function createTopBanner() {
     // 创建广告容器（初始隐藏，异步加载后决定是否显示）
-    const container = document.createElement("div");
-    Object.assign(container.style, {
-        flex: "1",
-        display: "none",
-        justifyContent: "center",
-        alignItems: "center",
-        margin: "0 15px",
-        maxHeight: "42px",
-        overflow: "hidden",
-        borderRadius: "6px",
-        cursor: "pointer",
-        transition: "opacity 0.2s"
-    });
+    const container = document.createElement("button");
+    container.type = "button";
+    container.className = "top-banner";
+    container.style.display = "none";
 
     // 保存模块级引用
     bannerContainer = container;
@@ -100,15 +167,16 @@ export function createTopBanner() {
     // ⚡ 完全不阻塞首屏：先读本地缓存（过期也立即使用）并立即渲染，
     // 网络请求一律退到后台静默同步，保证断网/云端不通时横幅不受影响
     // （与插件榜/提示词等榜单的缓存优先策略一致）
-    const { data: cachedData, fresh } = readBannerCache();
-    if (cachedData) {
-        activeConfig = { ...BANNER_CONFIG, ...cachedData };
-        updateBannerDOM();
-    }
-    // 缓存新鲜则无需请求；过期或无缓存时后台静默同步
-    if (!fresh) {
-        syncBannerInBackground();
+    if (!hasActiveConfig) {
+        const cachedData = readBannerCache();
+        if (cachedData) {
+            activeConfig = cachedData;
+            hasActiveConfig = true;
+        }
     }
+    updateBannerDOM();
+    // 始终在后台尝试获取新配置；当前缓存先显示，成功且图片下载完成后再整体替换。
+    syncBannerInBackground();
 
     return container;
 }
@@ -129,52 +197,82 @@ function updateBannerDOM() {
     }
 
     // 创建横幅图片
-    const img = document.createElement("img");
-    img.src = activeConfig.bannerImage;
-    img.alt = activeConfig.title || "广告";
-    Object.assign(img.style, {
-        maxWidth: "100%",
-        maxHeight: "100%",
-        objectFit: "contain"
-    });
+    const img = activeBannerImage || document.createElement("img");
+    if (!activeBannerImage) img.src = activeConfig.bannerImage;
+    img.alt = activeConfig.title || t("common.advertisement");
+    bannerContainer.setAttribute("aria-label", activeConfig.title || t("common.advertisement"));
+    img.className = "top-banner__image";
 
     bannerContainer.appendChild(img);
     bannerContainer.style.display = "flex";
 
-    // 鼠标悬停效��
-    bannerContainer.onmouseover = () => { bannerContainer.style.opacity = "0.85"; };
-    bannerContainer.onmouseout = () => { bannerContainer.style.opacity = "1"; };
-
     // 点击打开广告详情页
-    bannerContainer.onclick = () => {
+    const openBannerDetail = () => {
         const view = createBannerDetailView();
         window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
     };
+    bannerContainer.onclick = openBannerDetail;
+}
+
+const BANNER_ALLOWED_TAGS = new Set([
+    "a", "b", "blockquote", "br", "code", "em", "h2", "h3", "h4",
+    "hr", "i", "li", "ol", "p", "pre", "s", "strong", "u", "ul"
+]);
+const BANNER_BLOCKED_TAGS = new Set([
+    "audio", "button", "embed", "form", "iframe", "img", "input", "math",
+    "object", "script", "style", "svg", "textarea", "video"
+]);
+
+/** Copy only simple formatting and safe HTTP(S) links from administrator-provided content. */
+function sanitizeBannerDetailContent(value) {
+    const source = new DOMParser().parseFromString(String(value ?? ""), "text/html");
+    const fragment = document.createDocumentFragment();
+
+    const copyNodes = (sourceNode, targetNode) => {
+        for (const node of sourceNode.childNodes) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                targetNode.appendChild(document.createTextNode(node.nodeValue || ""));
+                continue;
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) continue;
+
+            const tag = node.tagName.toLowerCase();
+            if (BANNER_BLOCKED_TAGS.has(tag)) continue;
+            if (!BANNER_ALLOWED_TAGS.has(tag)) {
+                copyNodes(node, targetNode);
+                continue;
+            }
+
+            const cleanElement = document.createElement(tag);
+            if (tag === "a") {
+                const rawHref = node.getAttribute("href");
+                try {
+                    if (!rawHref?.trim()) throw new Error("Missing link target");
+                    const url = new URL(rawHref.trim(), document.baseURI);
+                    if (["http:", "https:"].includes(url.protocol) && !url.username && !url.password) {
+                        cleanElement.href = url.href;
+                        cleanElement.target = "_blank";
+                        cleanElement.rel = "noopener noreferrer";
+                    }
+                } catch (_) {
+                    // Invalid links keep their label but receive no navigable href.
+                }
+            }
+            targetNode.appendChild(cleanElement);
+            copyNodes(node, cleanElement);
+        }
+    };
+
+    copyNodes(source.body, fragment);
+    return fragment;
 }
 
 /**
  * 刷新顶部广告横幅（重新加载配置并更新DOM）
  */
 export async function refreshBanner() {
-    // 清除自定义缓存
-    localStorage.removeItem(BANNER_CACHE_KEY);
-    try {
-        // 绕过请求级缓存，强制从服务器获取最新配置
-        const res = await api.getPublicBannerConfig({ noCache: true });
-        if (res && res.status === "success" && res.data) {
-            activeConfig = { ...BANNER_CONFIG, ...res.data };
-            // 更新本地缓存
-            localStorage.setItem(BANNER_CACHE_KEY, JSON.stringify({
-                data: res.data,
-                timestamp: Date.now()
-            }));
-        } else {
-            activeConfig = { ...BANNER_CONFIG };
-        }
-    } catch (e) {
-        console.warn("刷新广告配置失败", e);
-    }
-    updateBannerDOM();
+    // 手动刷新也保留当前缓存横幅，直到新配置和图片都准备好。
+    await syncBannerInBackground();
 }
 
 /**
@@ -220,7 +318,7 @@ function createBannerDetailView() {
         boxShadow: "0 2px 4px rgba(0,0,0,0.3)",
         transition: "0.2s"
     });
-    backBtn.textContent = "⬅ 返回";
+    backBtn.textContent = `⬅ ${t("common.back")}`;
     backBtn.onmouseover = () => {
         backBtn.style.background = "#4CAF50";
         backBtn.style.borderColor = "#4CAF50";
@@ -234,7 +332,7 @@ function createBannerDetailView() {
     };
 
     const pageTitle = document.createElement("span");
-    pageTitle.textContent = activeConfig.title || "广告详情";
+    pageTitle.textContent = activeConfig.title || t("common.advertisement_details");
     Object.assign(pageTitle.style, {
         marginLeft: "12px",
         fontSize: "16px",
@@ -287,7 +385,7 @@ function createBannerDetailView() {
     if (activeConfig.detailImage) {
         const detailImg = document.createElement("img");
         detailImg.src = activeConfig.detailImage;
-        detailImg.alt = activeConfig.title || "广告详情图";
+        detailImg.alt = activeConfig.title || t("common.advertisement_details_image");
         Object.assign(detailImg.style, {
             maxWidth: "100%",
             borderRadius: "8px"
@@ -311,7 +409,7 @@ function createBannerDetailView() {
             wordWrap: "break-word"
         });
         // 支持HTML内容
-        detailEl.innerHTML = activeConfig.detailContent;
+        detailEl.replaceChildren(sanitizeBannerDetailContent(activeConfig.detailContent));
         content.appendChild(detailEl);
     }
 

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

@@ -11,16 +11,17 @@ import { createPublishTaskView } from "../task/发布任务组件.js";  // 🎯
 import { createPublishPostView } from "../post/发布帖子组件.js";  // 🎯 新增：帖子发布
 import { createPublishPromptView } from "../prompt/发布提示词组件.js";  // 🎯 新增：提示词发布
 import { createTopNav } from "../components/顶部导航组件.js";
-import { loadSidebarContent } from "./侧边栏数据引擎.js";
+import { loadSidebarContent, disposeSidebarContent } from "./侧边栏数据引擎.js";
 import { createItemDetailView } from "../market/资源详情页面组件.js";
 import { showToast } from "../components/UI交互提示组件.js";
-import { api } from "./网络请求API.js";  // 🔴 编辑模式需调用详情API获取完整数据
-import { CACHE, getBackgroundKey, IS_WEB_MODE } from "./全局配置.js";
+import { api, captureRequestSession } from "./网络请求API.js";  // 🔴 编辑模式需调用详情API获取完整数据
+import { CACHE, UI, getBackgroundKey, IS_WEB_MODE } from "./全局配置.js";
 import { debounce } from "../components/性能优化工具.js";
+import { scrollCardIntoView } from "../components/动画音效引擎.js";
 import { cleanupImageSandbox } from "../components/图片沙盒组件.js";  // 🔧 P3优化：导入清理函数
 import { getVersionConfig, formatVersionString } from "../components/关于插件组件.js";  // 🏷️ 动态版本号
 // 🎯 P2 用户体验增强
-import { initUXEnhancements, t } from "../components/用户体验增强.js";
+import { initUXEnhancements, t, getLanguage } from "../components/用户体验增强.js";
 
 // 初始化 UX 增强
 try {
@@ -29,16 +30,14 @@ try {
     console.warn('🎯 UX 增强初始化失败:', e);
 }
 
-// 🚫 注入 Tab 文案样式（模块加载时执行一次）
-// Tab 文案用伪元素 content 渲染而非文本节点，使其不存在于 DOM 树中，
-// 从而既避开 ComfyUI 翻译插件（只改写文本节点 / innerText / title / option.text），
-// 也避开浏览器翻译扩展；否则英文界面下 Tools 会被译成“工具”
-(function _injectTabLabelStyle() {
-    if (document.getElementById('hub-tab-label-style')) return;
-    const style = document.createElement('style');
-    style.id = 'hub-tab-label-style';
-    style.textContent = '.hub-tab-btn::before { content: var(--tab-label); }';
-    document.head.appendChild(style);
+// 统一设计 tokens 与键盘焦点样式；样式表只挂载一次，保持 ComfyUI 主题变量适配。
+(function _injectSharedThemeStyles() {
+    if (document.getElementById('hub-theme-style')) return;
+    const link = document.createElement('link');
+    link.id = 'hub-theme-style';
+    link.rel = 'stylesheet';
+    link.href = new URL('../styles/主题基础.css', import.meta.url).href;
+    document.head.appendChild(link);
 })();
 
 // 🚫 筛选框选项防翻译：原生 <option> 不支持伪元素，无法用上面那套方案，
@@ -72,7 +71,18 @@ const BackgroundStore = {
 
 // 🔧 P1修复：window 监听注册表（语言切换会重建 buildSidebarDOM，需先移除旧监听防止累积泄漏）
 let _sidebarWindowListeners = [];
+let _sidebarInstanceSequence = 0;
+let _sidebarInlineViewCleanup = null;
+let _sidebarListCleanup = null;
 function _cleanupSidebarWindowListeners() {
+    const cleanupList = _sidebarListCleanup;
+    const cleanupInline = _sidebarInlineViewCleanup;
+    _sidebarListCleanup = null;
+    _sidebarInlineViewCleanup = null;
+    for (const cleanup of [cleanupList, cleanupInline]) {
+        try { cleanup?.(); }
+        catch { console.warn('Sidebar cleanup failed'); }
+    }
     for (const { event, handler } of _sidebarWindowListeners) {
         window.removeEventListener(event, handler);
     }
@@ -88,6 +98,7 @@ export function buildSidebarDOM() {
     _cleanupSidebarWindowListeners();
 
     const container = document.createElement("div");
+    container.className = "comfy-ranking-root";
     
     // 加载本地背景图
     const savedBg = BackgroundStore.load();
@@ -95,16 +106,17 @@ export function buildSidebarDOM() {
         ? `background-image: url(${savedBg}); background-size: cover; background-position: center;`
         : `background-color: var(--comfy-menu-bg);`;
     
-    Object.assign(container.style, {
-        display: "flex", flexDirection: "column", height: "100%", width: "100%",
-        color: "var(--fg-color, #fff)", fontFamily: "sans-serif"
-    });
     container.style.cssText += bgStyle;
 
     const topNav = createTopNav();
+    const sidebarInstanceId = `comfy-ranking-${++_sidebarInstanceSequence}`;
 
     const tabsContainer = document.createElement("div");
-    Object.assign(tabsContainer.style, { display: "flex", borderBottom: "1px solid #444", padding: "10px 10px 0 10px" });
+    tabsContainer.id = `${sidebarInstanceId}-tablist`;
+    tabsContainer.className = "hub-tablist";
+    tabsContainer.setAttribute("role", "tablist");
+    tabsContainer.setAttribute("aria-label", t("nav.board_navigation"));
+    tabsContainer.setAttribute("aria-orientation", "horizontal");
     // 🌐 多语言支持：Tab 名称使用翻译函数
     const tabs = [
         { id: "tools", label: t('nav.tools') },
@@ -118,10 +130,10 @@ export function buildSidebarDOM() {
     ];
 
     const sortContainer = document.createElement("div");
-    Object.assign(sortContainer.style, { padding: "10px", display: "flex", gap: "8px", alignItems: "center", width: "100%", boxSizing: "border-box" });
+    sortContainer.className = "hub-controls";
     sortContainer.innerHTML = `
         <!-- 通用排序选择框（工具/应用/推荐/创作者） -->
-        <select id="hub-sort-select" style="background: var(--comfy-input-bg); color: white; border: 1px solid #555; border-radius: 4px; outline: none; padding: 6px; width: 140px; flex-shrink: 0;">
+        <select id="hub-sort-select" class="hub-control-select hub-control-select--wide">
             <option value="time">${noTr(t('market.latest'))}</option>
             <option value="downloads">${noTr(t('market.downloads'))}</option>
             <option value="likes">${noTr(t('market.like'))}</option>
@@ -132,7 +144,7 @@ export function buildSidebarDOM() {
             <option value="rating">${noTr(t('market.rating'))}</option>
         </select>
         <!-- 任务榜筛选控件（状态+排序） -->
-        <select id="task-status-filter" style="display: none; background: var(--comfy-input-bg); color: white; border: 1px solid #555; border-radius: 4px; outline: none; padding: 6px; width: 100px; flex-shrink: 0;">
+        <select id="task-status-filter" class="hub-control-select hub-control-select--compact" style="display: none;">
             <option value="">${noTr(t('task.filter_all'))}</option>
             <option value="open">${noTr(t('task.filter_open'))}</option>
             <option value="in_progress">${noTr(t('task.filter_in_progress'))}</option>
@@ -140,7 +152,7 @@ export function buildSidebarDOM() {
             <option value="completed">${noTr(t('task.filter_completed'))}</option>
             <option value="disputed">${noTr(t('task.filter_disputed'))}</option>
         </select>
-        <select id="task-sort-select" style="display: none; background: var(--comfy-input-bg); color: white; border: 1px solid #555; border-radius: 4px; outline: none; padding: 6px; width: 100px; flex-shrink: 0;">
+        <select id="task-sort-select" class="hub-control-select hub-control-select--compact" style="display: none;">
             <option value="latest">${noTr(t('task.sort_latest'))}</option>
             <option value="price">${noTr(t('task.sort_price'))}</option>
             <option value="deadline">${noTr(t('task.sort_deadline'))}</option>
@@ -150,7 +162,7 @@ export function buildSidebarDOM() {
             <option value="favorites">${noTr(t('task.sort_favorites'))}</option>
         </select>
         <!-- 🎯 讨论区排序控件（专用） -->
-        <select id="posts-sort-select" style="display: none; background: var(--comfy-input-bg); color: white; border: 1px solid #555; border-radius: 4px; outline: none; padding: 6px; width: 140px; flex-shrink: 0;">
+        <select id="posts-sort-select" class="hub-control-select hub-control-select--wide" style="display: none;">
             <option value="latest">${noTr(t('post.sort_latest'))}</option>
             <option value="likes">${noTr(t('post.sort_likes'))}</option>
             <option value="favorites">${noTr(t('post.sort_favorites'))}</option>
@@ -160,17 +172,29 @@ export function buildSidebarDOM() {
             <option value="rating">${noTr(t('post.sort_rating'))}</option>
         </select>
         <!-- 🧩 提示词排序控件（专用） -->
-        <select id="prompts-sort-select" style="display: none; background: var(--comfy-input-bg); color: white; border: 1px solid #555; border-radius: 4px; outline: none; padding: 6px; width: 140px; flex-shrink: 0;">
+        <select id="prompts-sort-select" class="hub-control-select hub-control-select--wide" style="display: none;">
             <option value="latest">${noTr(t('prompt.sort_latest'))}</option>
             <option value="likes">${noTr(t('prompt.sort_likes'))}</option>
             <option value="favorites">${noTr(t('prompt.sort_favorites'))}</option>
             <option value="views">${noTr(t('prompt.sort_views'))}</option>
             <option value="daily_views">${noTr(t('prompt.sort_daily_views'))}</option>
         </select>
-        <input type="text" id="hub-search-input" autocomplete="off" placeholder="🔍 ${t('common.search')}..." style="flex: 1; padding: 6px 10px; border-radius: 4px; border: 1px solid #555; background: #222; color: white; outline: none;">
-        <button id="btn-open-publish" style="background: #4CAF50; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.3);">➕ ${t('market.publish')}</button>
+        <input type="search" id="hub-search-input" class="hub-search-input" autocomplete="off" placeholder="🔍 ${t('common.search')}...">
+        <button id="btn-open-publish" class="hub-publish-button" type="button">➕ ${t('market.publish')}</button>
     `;
 
+    const filterLabels = {
+        "hub-sort-select": "common.sort_items",
+        "task-status-filter": "common.filter_task_status",
+        "task-sort-select": "common.sort_tasks",
+        "posts-sort-select": "common.sort_posts",
+        "prompts-sort-select": "common.sort_prompts",
+        "hub-search-input": "common.search"
+    };
+    for (const [id, labelKey] of Object.entries(filterLabels)) {
+        sortContainer.querySelector(`#${id}`)?.setAttribute("aria-label", t(labelKey));
+    }
+
     // 📱 Web 模式：隐藏发布入口（网页版不支持发布族功能，编辑路由监听处另有中央兜底）
     if (IS_WEB_MODE) {
         const publishBtn = sortContainer.querySelector("#btn-open-publish");
@@ -178,43 +202,34 @@ export function buildSidebarDOM() {
     }
 
     const contentBoxWrapper = document.createElement("div");
-    Object.assign(contentBoxWrapper.style, { flex: "1", minHeight: "0", padding: "0 10px 10px 10px", display: "flex", flexDirection: "column" });
+    contentBoxWrapper.className = "sidebar-content-wrapper";
 
     const contentArea = document.createElement("div");
     contentArea.className = "sidebar-scroll-container";
+    contentArea.id = `${sidebarInstanceId}-tabpanel`;
+    contentArea.setAttribute("role", "tabpanel");
+    contentArea.setAttribute("tabindex", "0");
     // 🔧 自适应高度：flex 填充剩余空间，内容少时随内容收缩，避免容器框与底部页脚间出现空白
-    Object.assign(contentArea.style, {
-        flex: "1 1 auto", minHeight: "0", overflowY: "auto", padding: "10px",
-        backgroundColor: "#1c1c1c", border: "1px solid #444", borderRadius: "8px",
-        boxShadow: "inset 0 4px 10px rgba(0,0,0,0.3)"
-    });
     contentBoxWrapper.appendChild(contentArea);
 
     // =========================================================================
     // 【新增】底部专业版权与合作伙伴信息区域 (Footer)
     // =========================================================================
     const footerContainer = document.createElement("div");
-    Object.assign(footerContainer.style, {
-        padding: "15px 10px 20px",
-        textAlign: "center",
-        fontSize: "12px",
-        color: "#666",
-        flexShrink: "0",
-        background: "transparent"
-    });
+    footerContainer.className = "sidebar-footer";
 
     footerContainer.innerHTML = `
-        <div style="display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap;">
-            <a href="https://github.com/a63976659/ComfyUI-Ranking" target="_blank" style="color: #888; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#4CAF50'" onmouseout="this.style.color='#888'">🌍 ComfyUI精选社区</a>
-            <a href="https://github.com/a63976659" target="_blank" style="color: #888; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='#888'">🐙 GitHub</a>
-            <a href="https://huggingface.co/ZHIWEI666" target="_blank" style="color: #888; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#FFD21E'" onmouseout="this.style.color='#888'">🤗 Hugging Face</a>
-            <a href="#" target="_blank" style="color: #888; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#2196F3'" onmouseout="this.style.color='#888'">🏢 砚影科技</a>
-            <a href="https://www.bilibili.com/video/BV1x4XzBXEk9" target="_blank" style="color: #888; text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#00A1D6'" onmouseout="this.style.color='#888'">📺 Bilibili</a>
+        <div class="sidebar-footer__links">
+            <a href="https://github.com/a63976659/ComfyUI-Ranking" target="_blank" rel="noopener noreferrer" class="sidebar-footer__link sidebar-footer__link--community">🌍 ${t('footer.community_name')}</a>
+            <a href="https://github.com/a63976659" target="_blank" rel="noopener noreferrer" class="sidebar-footer__link sidebar-footer__link--github">🐙 GitHub</a>
+            <a href="https://huggingface.co/ZHIWEI666" target="_blank" rel="noopener noreferrer" class="sidebar-footer__link sidebar-footer__link--huggingface">🤗 Hugging Face</a>
+            <a href="#" target="_blank" rel="noopener noreferrer" class="sidebar-footer__link sidebar-footer__link--company">🏢 砚影科技</a>
+            <a href="https://www.bilibili.com/video/BV1x4XzBXEk9" target="_blank" rel="noopener noreferrer" class="sidebar-footer__link sidebar-footer__link--bilibili">📺 Bilibili</a>
         </div>
-        <div style="display: flex; justify-content: center; align-items: center; gap: 10px; color: #555;">
-            <span>MIT License Copyright (c) 2026 <a href="#" id="easter-egg-trigger" style="color: #888; text-decoration: none; cursor: pointer; transition: color 0.2s;" onmouseover="this.style.color='#ffb0c0'" onmouseout="this.style.color='#888'">猪的飞行梦</a></span>
-            <span style="color: #444;">|</span>
-            <span class="footer-version-label">加载中...</span>
+        <div class="sidebar-footer__meta">
+            <span>MIT License Copyright (c) 2026 <a href="#" id="easter-egg-trigger" class="sidebar-footer__link sidebar-footer__link--easter-egg">猪的飞行梦</a></span>
+            <span class="sidebar-footer__separator" aria-hidden="true">|</span>
+            <span class="footer-version-label">${t('common.loading')}</span>
         </div>
     `;
     
@@ -223,7 +238,14 @@ export function buildSidebarDOM() {
     if (easterEggLink) {
         easterEggLink.addEventListener('click', (e) => {
             e.preventDefault();
-            import('../components/彩蛋动画引擎.js').then(mod => mod.openEasterEggPage());
+            const popup = window.open('', '_blank');
+            if (!popup) return;
+            import('../components/彩蛋动画引擎.js').then(mod => mod.openEasterEggPage(popup, {
+                language: getLanguage(),
+                title: t('easter.title'),
+                hint: t('easter.hint'),
+                speedLabel: t('easter.speed')
+            })).catch(() => popup.close());
         });
     }
 
@@ -235,7 +257,7 @@ export function buildSidebarDOM() {
         }
     }).catch(() => {
         const versionLabel = footerContainer.querySelector('.footer-version-label');
-        if (versionLabel) versionLabel.textContent = 'V2.0.0 Beta';
+        if (versionLabel) versionLabel.textContent = formatVersionString(UI.DEFAULT_PROJECT_VERSION);
     });
     
     // 监听从设置页面触发的背景更新事件
@@ -253,13 +275,26 @@ export function buildSidebarDOM() {
     });
     // =========================================================================
 
-    let activeInlineView = null; 
+    let activeInlineView = null;
+    let listNavigationGeneration = 0;
+    const captureListNavigation = () => {
+        const generation = listNavigationGeneration;
+        return () => !activeInlineView && generation === listNavigationGeneration;
+    };
+    const releaseInlineView = () => {
+        if (!activeInlineView) return;
+        const view = activeInlineView;
+        activeInlineView = null;
+        try { view._cleanup?.(); }
+        catch { console.warn('Sidebar inline view cleanup failed'); }
+        try { cleanupImageSandbox(view); }
+        finally { view.remove(); }
+    };
+    _sidebarInlineViewCleanup = releaseInlineView;
 
     const showInlineView = (viewDOM) => {
-        if (activeInlineView) {
-            if (activeInlineView._cleanup) activeInlineView._cleanup();
-            activeInlineView.remove();
-        }
+        listNavigationGeneration++;
+        releaseInlineView();
         tabsContainer.style.display = "none";
         sortContainer.style.display = "none";
         contentBoxWrapper.style.display = "none";
@@ -269,14 +304,8 @@ export function buildSidebarDOM() {
     };
 
     const hideInlineView = () => {
-        if (activeInlineView) {
-            // 🔧 P3优化：在移除视图前清理事件监听器
-            if (activeInlineView._cleanup) activeInlineView._cleanup();
-            cleanupImageSandbox(activeInlineView);
-
-            activeInlineView.remove();
-            activeInlineView = null;
-        }
+        listNavigationGeneration++;
+        releaseInlineView();
         tabsContainer.style.display = "flex"; 
         sortContainer.style.display = "flex"; 
         contentBoxWrapper.style.display = "flex";
@@ -303,6 +332,8 @@ export function buildSidebarDOM() {
         // 📱 Web 模式中央兜底：发布族功能仅本地 ComfyUI 可用
         if (IS_WEB_MODE) return showToast(t('web.publish_not_supported'), "warning");
         const { itemData, currentUser } = e.detail;
+        const matchesSession = captureRequestSession();
+        if (!currentUser?.account || topNav.getCurrentUser()?.account !== currentUser.account) return;
 
         // 先展示加载状态，避免用户感知延迟
         const loadingView = document.createElement("div");
@@ -310,17 +341,23 @@ export function buildSidebarDOM() {
         loadingView.innerHTML = `<div style=\"font-size:24px;margin-bottom:10px;\">⏳</div><div>${t('common.loading')}</div>`;
         showInlineView(loadingView);
 
-        // 从详情API获取完整数据（确保 has_private_token、netdisk_password 等字段不缺失）
-        let enrichedItemData = itemData;
+        const isCurrent = () => matchesSession() && topNav.getCurrentUser()?.account === currentUser.account
+            && activeInlineView === loadingView && loadingView.isConnected;
+        let enrichedItemData;
         try {
-            const detailRes = await api.getItemById(itemData.id);
-            if (detailRes?.status === "success" && detailRes?.data) {
-                // 合并详情数据，保留列表中的图片URL等已有字段
-                enrichedItemData = { ...itemData, ...detailRes.data };
-            }
-        } catch (err) {
-            console.warn("获取编辑详情失败，使用列表数据:", err);
+            const detailRes = await api.getItemById(itemData.id, { noStore: true });
+            if (!isCurrent()) return;
+            const data = detailRes?.data, revision = data?.edit_revision === undefined ? 0 : data.edit_revision;
+            if (detailRes?.status !== 'success' || data?.id !== itemData.id || data?.author !== currentUser.account
+                || !Number.isSafeInteger(revision) || revision < 0) throw new Error('Invalid edit detail');
+            enrichedItemData = { ...data, edit_revision: revision };
+        } catch (_) {
+            if (!isCurrent()) return;
+            loadingView.textContent = t('common.operation_failed');
+            loadingView.setAttribute('role', 'alert');
+            return;
         }
+        if (!isCurrent()) return;
 
         const publishView = createPublishView(currentUser, 
             () => hideInlineView(), 
@@ -360,27 +397,31 @@ export function buildSidebarDOM() {
 
     // 🔔 通知跳转：切换到对应Tab并展开指定卡片
     _onSidebarWindow("comfy-route-to-item", async (e) => {
-        const { itemId, itemType } = e.detail;
-        if (!itemId) return;
+        const detail = e.detail;
+        if (!detail || typeof detail !== 'object' || Array.isArray(detail)) return;
+        const { itemId, itemType } = detail;
+        if (!(typeof itemId === 'string' && itemId.trim()) &&
+            !(Number.isSafeInteger(itemId) && itemId > 0)) return;
         
         // 1. 根据 itemType 确定 Tab
         let targetTab;
         if (itemType === "tool") targetTab = "tools";
         else if (itemType === "skill") targetTab = "skills";
         else if (itemType === "app") targetTab = "apps";
-        else if (itemType.startsWith("recommend")) targetTab = "recommends";
+        else if (typeof itemType === 'string' && itemType.startsWith("recommend")) targetTab = "recommends";
         else targetTab = "tools"; // 兜底
         
         // 【问题2修复】如果已经在目标 Tab，先尝试在当前 DOM 中查找卡片
         if (currentTab === targetTab) {
-            const existingCard = contentArea.querySelector(`[data-item-id="${itemId}"]`);
+            const existingCard = Array.from(contentArea.querySelectorAll('[data-item-id]'))
+                .find(card => card.getAttribute('data-item-id') === String(itemId));
             if (existingCard) {
                 // 关闭可能存在的通知中心等全屏视图
                 if (activeInlineView) hideInlineView();
                 
                 const summary = existingCard.querySelector('.item-summary') || existingCard.firstElementChild;
                 // 先确保卡片是折叠状态再展开（避免点击已展开的卡片把它收起来）
-                existingCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                scrollCardIntoView(existingCard);
                 // 检查详情区域是否已展开
                 const detailView = existingCard.children[1]; // detailView 是第二个子元素
                 if (detailView && detailView.style.display === 'none' && summary) {
@@ -395,23 +436,8 @@ export function buildSidebarDOM() {
             currentTab = targetTab;
             Store.save("activeTab", currentTab);
             
-            // 3. 更新 Tab 按钮的选中状态
-            const tabBtns = tabsContainer.querySelectorAll('button');
-            tabBtns.forEach((btn, index) => {
-                const tabId = tabs[index].id;
-                const tabColor = tabColors[tabId];
-                if (tabId === currentTab) {
-                    btn.style.background = "rgba(0,0,0,0.3)";
-                    btn.style.color = tabColor.active;
-                    btn.style.borderBottom = `2px solid ${tabColor.active}`;
-                    btn.style.textShadow = getTextShadow(tabColor.active, true);
-                } else {
-                    btn.style.background = "rgba(0,0,0,0.15)";
-                    btn.style.color = tabColor.inactive;
-                    btn.style.borderBottom = "none";
-                    btn.style.textShadow = getTextShadow(tabColor.active, false);
-                }
-            });
+            // 3. 同步选中态；视觉状态由共享主题 CSS 根据 aria-selected 绘制
+            syncTabsA11y();
             
             // 4. 更新筛选控件可见性
             updateFilterVisibility(currentTab);
@@ -430,15 +456,33 @@ export function buildSidebarDOM() {
             currentUser: topNav.getCurrentUser(),
             renderToken: currentRenderToken,
             getRenderToken: getRenderToken,
+            isNavigationCurrent: captureListNavigation(),
             force: false,
             expandItemId: itemId  // 新增：要展开的卡片ID
         });
     });
 
-    let currentTab = Store.load("activeTab", "tools");
+    const savedTab = Store.load("activeTab", "tools");
+    let currentTab = tabs.some(tab => tab.id === savedTab) ? savedTab : tabs[0].id;
     let currentSort = Store.load("activeSort", "time");
     let currentRenderToken = 0;
     const getRenderToken = () => currentRenderToken;
+    _sidebarListCleanup = () => {
+        currentRenderToken++;
+        try { disposeSidebarContent(contentArea); }
+        finally { cleanupImageSandbox(contentArea); }
+    };
+    const syncTabsA11y = () => {
+        const selectedTab = tabs.find(tab => tab.id === currentTab) || tabs[0];
+        for (const tab of tabs) {
+            const button = tabsContainer.querySelector(`[data-tab-id="${tab.id}"]`);
+            if (!button) continue;
+            const selected = tab.id === selectedTab.id;
+            button.setAttribute("aria-selected", String(selected));
+            button.tabIndex = selected ? 0 : -1;
+        }
+        contentArea.setAttribute("aria-labelledby", `${sidebarInstanceId}-tab-${selectedTab.id}`);
+    };
 
     const triggerLoad = (forceRefresh = false) => {
         currentRenderToken++; 
@@ -447,6 +491,7 @@ export function buildSidebarDOM() {
             keyword: sortContainer.querySelector("#hub-search-input").value.trim().toLowerCase(),
             contentArea: contentArea, currentUser: topNav.getCurrentUser(),
             renderToken: currentRenderToken, getRenderToken: getRenderToken,
+            isNavigationCurrent: captureListNavigation(),
             force: forceRefresh
         });
     };
@@ -461,7 +506,7 @@ export function buildSidebarDOM() {
 
     sortContainer.querySelector("#btn-open-publish").onclick = () => {
         const currentUser = topNav.getCurrentUser();
-        if (!currentUser) return showToast("⚠️ 请先登录您的社区账号后再进行发布！", "warning");
+        if (!currentUser) return showToast(t('auth.login_required'), "warning");
         
         // 🎯 根据当前Tab打开对应的发布界面
         if (currentTab === "tasks") {
@@ -488,69 +533,40 @@ export function buildSidebarDOM() {
         }
     };
 
-    // Tab 颜色配置：按色环渐变顺序排列（绿→青→蓝→紫→粉→红→橙→黄），相邻 Tab 色相平滑过渡
-    const tabColors = {
-        tools: { active: "#4CAF50", inactive: "#81C784" },      // 插件榜 - 绿（渐变起点）
-        skills: { active: "#00BCD4", inactive: "#4DD0E1" },     // Skill - 青
-        apps: { active: "#2196F3", inactive: "#64B5F6" },       // 工作流 - 蓝
-        recommends: { active: "#7C4DFF", inactive: "#B388FF" }, // 推荐榜 - 紫
-        creators: { active: "#E91E63", inactive: "#F06292" },   // 创作者 - 粉
-        tasks: { active: "#F44336", inactive: "#E57373" },      // 任务榜 - 红
-        posts: { active: "#FF9800", inactive: "#FFB74D" },      // 讨论区 - 橙
-        prompts: { active: "#FFC107", inactive: "#FFD54F" }     // 提示词 - 黄（渐变终点）
-    };
-
-    // 文字阴影效果：多层阴影确保任何背景下都清晰可见
-    const getTextShadow = (color, isActive) => {
-        const baseShadow = "0 1px 2px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.6), 1px 1px 3px rgba(0,0,0,0.5)";
-        return isActive 
-            ? `${baseShadow}, 0 0 10px ${color}, 0 0 20px ${color}` 
-            : baseShadow;
-    };
-
     tabs.forEach(tab => {
         const btn = document.createElement("button");
-        // 文案交由 ::before 渲染（见文件顶部 _injectTabLabelStyle），不产生文本节点；
-        // 伪元素内容不参与可访问名计算，用 aria-label 补回无障碍名称
+        // 共享主题 CSS 从 aria-label 绘制伪元素文案，避免翻译插件改写标签。
         btn.className = "hub-tab-btn";
-        btn.style.setProperty("--tab-label", JSON.stringify(tab.label));
+        btn.type = "button";
+        btn.id = `${sidebarInstanceId}-tab-${tab.id}`;
+        btn.dataset.tabId = tab.id;
+        btn.setAttribute("role", "tab");
+        btn.setAttribute("aria-controls", contentArea.id);
         btn.setAttribute("aria-label", tab.label);
-        const isActive = currentTab === tab.id;
-        const color = tabColors[tab.id];
-        Object.assign(btn.style, { 
-            flex: "1", 
-            padding: "8px", 
-            cursor: "pointer", 
-            background: isActive ? "rgba(0,0,0,0.3)" : "rgba(0,0,0,0.15)", 
-            color: isActive ? color.active : color.inactive, 
-            border: "none", 
-            borderBottom: isActive ? `2px solid ${color.active}` : "none",
-            fontWeight: "bold",
-            textShadow: getTextShadow(color.active, isActive),
-            transition: "all 0.2s ease",
-            fontSize: "13px"
-        });
         btn.onclick = () => {
             currentTab = tab.id; Store.save("activeTab", currentTab);
-            Array.from(tabsContainer.children).forEach((c, i) => { 
-                const tabId = tabs[i].id;
-                const tabColor = tabColors[tabId];
-                c.style.background = "rgba(0,0,0,0.15)"; 
-                c.style.color = tabColor.inactive; 
-                c.style.borderBottom = "none"; 
-                c.style.textShadow = getTextShadow(tabColor.active, false);
-            });
-            btn.style.background = "rgba(0,0,0,0.3)"; 
-            btn.style.color = color.active; 
-            btn.style.borderBottom = `2px solid ${color.active}`;
-            btn.style.textShadow = getTextShadow(color.active, true);
             sortContainer.querySelector("#hub-search-input").value = "";
             // 🎯 根据 Tab 切换筛选控件显示
             updateFilterVisibility(currentTab);
+            syncTabsA11y();
             triggerLoad();
         };
+        btn.addEventListener("keydown", (event) => {
+            const currentIndex = tabs.findIndex(item => item.id === tab.id);
+            let nextIndex = currentIndex;
+            if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
+            else if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            else if (event.key === "Home") nextIndex = 0;
+            else if (event.key === "End") nextIndex = tabs.length - 1;
+            else return;
+            event.preventDefault();
+            const nextButton = tabsContainer.querySelector(`[data-tab-id="${tabs[nextIndex].id}"]`);
+            nextButton?.focus();
+            nextButton?.click();
+        });
         tabsContainer.appendChild(btn);
     });
+    syncTabsA11y();
 
     // 🎯 筛选控件显示切换函数
     const updateFilterVisibility = (tabId) => {

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

@@ -63,7 +63,16 @@ app.registerExtension({
                         container.appendChild(globalSidebarDOM);
                     } catch (e) {
                         console.error('侧边栏功能加载失败:', e);
-                        container.innerHTML = '<div style="text-align:center; padding:40px; color:#F44336;">⚠️ 加载失败，请刷新重试</div>';
+                        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 = "⚠️";
+                        }
+                        container.replaceChildren(failure);
                     }
                 }
             });

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

@@ -16,21 +16,24 @@
 //   - 增强缓存策略
 // ==========================================
 
+import { fetchSidebarList, readSidebarListCache, readCreatorsSessionCache as getCreatorsFromSessionStorage,
+    writeCreatorsSessionCache as saveCreatorsToSessionStorage } from "./榜单数据来源.js";
+import { mountSidebarDomainView } from "./榜单视图切换.js";
+import { setupSidebarPagination as _setupPaginationLoader } from "./榜单分页控制.js";
+import { createSidebarPaginationStore } from "./榜单分页状态.js";
+import { sortDataLocally, filterItemsByKeyword, searchCreatorsLocally } from "./榜单本地查询.js";
+
 import { api } from "./网络请求API.js";
 import { proxyImages } from "./网络请求API.js";
-// 🔍 搜索时撤销上一次在途请求所需的取消管理器与分组 ID
-import { requestCancelManager } from "./网络请求API.js";
-import { API } from "./全局配置.js";
 import { createItemCard } from "../market/列表卡片组件.js";
 import { createCreatorCard } from "../market/创作者卡片组件.js";
-import { 
-    createPaginationLoader, 
-    createSkeleton, 
-    setCache, 
-    getCacheWithMeta,
-    lazyLoadImages 
+import {
+    createSkeleton,
+    setCache,
+    lazyLoadImages,
+    renderListLoadError
 } from "../components/性能优化工具.js";
-import { applyViewportAnimations, getAnimationTypeForTab } from "../components/动画音效引擎.js";
+import { applyViewportAnimations, getAnimationTypeForTab, scrollCardIntoView, stopViewportAnimations } from "../components/动画音效引擎.js";
 import { t } from "../components/用户体验增强.js";
 import { showToast } from "../components/UI交互提示组件.js";  // 🔧 降级提示改走统一组件（原为手写 div）
 
@@ -88,276 +91,90 @@ function getCacheExpireTime() {
 }
 
 // ==========================================
-// 🔄 本地排序函数
+// 🔄 同榜单数据与创作者会话缓存
 // ==========================================
-let _lastSortInput = null;
-let _lastSortKey = '';
-let _lastSortResult = null;
-
-function sortDataLocally(data, tab, sort) {
-    const sortKey = `${tab}_${sort}`;
-    // 如果源数据引用相同且排序参数相同，返回缓存结果（避免重复创建数组拷贝）
-    if (data === _lastSortInput && sortKey === _lastSortKey && _lastSortResult) {
-        return _lastSortResult;
-    }
-    
-    const sorted = [...data]; // 不修改原数组
-    
-    if (tab === "creators") {
-        // 创作者排序（与后端 get_creators 一致）
-        switch (sort) {
-            case "likes": sorted.sort((a, b) => (b.likes || 0) - (a.likes || 0)); break;
-            case "favorites": sorted.sort((a, b) => (b.favorites || 0) - (a.favorites || 0)); break;
-            case "downloads": sorted.sort((a, b) => (b.downloads || 0) - (a.downloads || 0)); break;
-            case "tips": sorted.sort((a, b) => (b.recent_tips || 0) - (a.recent_tips || 0)); break;
-            case "views": sorted.sort((a, b) => (b.views || 0) - (a.views || 0)); break;
-            case "daily_views": sorted.sort((a, b) => (b.daily_views || 0) - (a.daily_views || 0)); break;
-            default: sorted.sort((a, b) => (b.created_at || 0) - (a.created_at || 0)); break; // time
-        }
-    } else {
-        // 工具/Skill/应用/推荐排序（与后端 get_items 一致）
-        switch (sort) {
-            case "downloads": sorted.sort((a, b) => (b.uses || 0) - (a.uses || 0)); break;
-            case "likes": sorted.sort((a, b) => (b.likes || 0) - (a.likes || 0)); break;
-            case "favorites": sorted.sort((a, b) => (b.favorites || 0) - (a.favorites || 0)); break;
-            case "tips": 
-                // 后端使用 tip_history 的当月数据排序
-                sorted.sort((a, b) => {
-                    const now = new Date();
-                    const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
-                    const tipA = (a.tip_history || {})[currentMonth] || 0;
-                    const tipB = (b.tip_history || {})[currentMonth] || 0;
-                    return tipB - tipA;
-                });
-                break;
-            case "views": sorted.sort((a, b) => (b.views || 0) - (a.views || 0)); break;
-            case "daily_views": sorted.sort((a, b) => (b.daily_views || 0) - (a.daily_views || 0)); break;
-            case "rating":
-                sorted.sort((a, b) => {
-                    const ratingA = a.rating_avg || 0;
-                    const ratingB = b.rating_avg || 0;
-                    if (ratingA === ratingB) {
-                        return (b.rating_count || 0) - (a.rating_count || 0);
-                    }
-                    return ratingB - ratingA;
-                });
-                break;
-            default: sorted.sort((a, b) => (b.created_at || 0) - (a.created_at || 0)); break; // time
-        }
-    }
-    
-    // 缓存本次排序结果
-    _lastSortInput = data;
-    _lastSortKey = sortKey;
-    _lastSortResult = sorted;
-    return sorted;
-}
-
 /**
  * 从同 tab 的任意排序状态中获取已有数据
  */
-function findExistingTabData(tab) {
-    for (const [key, state] of paginationStates) {
-        if (key.startsWith(tab + "_") && state.allData.length > 0 && state.isFullyLoaded) {
-            return state.allData;
-        }
-    }
-    return null;
-}
-
-/**
- * 从 sessionStorage 读取创作者缓存
- */
-function getCreatorsFromSessionStorage() {
-    try {
-        const data = sessionStorage.getItem('ComfyRanking_CreatorsCache');
-        if (data) {
-            return JSON.parse(data);
-        }
-    } catch (e) {
-        console.warn('读取创作者 sessionStorage 缓存失败:', e);
-    }
-    return null;
-}
-
-/**
- * 将创作者数据保存到 sessionStorage
- */
-function saveCreatorsToSessionStorage(data) {
-    try {
-        sessionStorage.setItem('ComfyRanking_CreatorsCache', JSON.stringify(data));
-    } catch (e) {
-        console.warn('创作者数据写入 sessionStorage 失败:', e);
-    }
-}
-
-/**
- * 本地搜索创作者数据
- * @param {string} keyword - 搜索关键词
- * @param {Array} data - 创作者数据数组
- * @returns {Array} 匹配的数据
- */
-/**
- * 按关键词过滤列表数据（工具/应用/推荐Tab本地搜索）
- * @param {Array} items - 数据数组
- * @param {string} keyword - 搜索关键词
- * @returns {Array} 过滤后的数据
- */
-function _filterBySearch(items, keyword) {
-    const lowerKeyword = keyword.toLowerCase();
-    return items.filter(item => {
-        const textStr = `${item.title||''} ${item.shortDesc||''} ${item.name||''} ${item.account||''}`.toLowerCase();
-        return textStr.includes(lowerKeyword);
-    });
-}
-
-/**
- * 本地搜索创作者数据
- * @param {string} keyword - 搜索关键词
- * @param {Array} data - 创作者数据数组
- * @returns {Array} 匹配的数据
- */
-function searchCreatorsLocally(keyword, data) {
-    const lowerKeyword = keyword.toLowerCase();
-    return data.filter(item => {
-        const name = (item.name || '').toLowerCase();
-        const account = (item.account || '').toLowerCase();
-        const shortDesc = (item.shortDesc || '').toLowerCase();
-        return name.includes(lowerKeyword) || 
-               account.includes(lowerKeyword) || 
-               shortDesc.includes(lowerKeyword);
-    });
-}
-
+const findExistingTabData = tab => paginationStore.findCompleteData(tab);
 
 // ==========================================
 // 📦 分页状态管理
 // ==========================================
 // 每个标签页独立的分页状态
-const paginationStates = new Map();
+const paginationStore = createSidebarPaginationStore();
+const getPaginationState = (tab, sort) => paginationStore.get(tab, sort);
 
-/**
- * 获取或创建分页状态
- */
-function getPaginationState(tab, sort) {
-    const key = `${tab}_${sort}`;
-    if (!paginationStates.has(key)) {
-        paginationStates.set(key, {
-            allData: [],        // 全量数据（从缓存或网络加载）
-            displayedCount: 0,  // 已渲染数量
-            loader: null,       // 分页加载器实例
-            isFullyLoaded: false, // 是否已加载完所有数据
-            isSearchResult: false // 标记是否为搜索结果（用于区分正常数据和搜索结果）
-        });
+export function disposeSidebarContent(contentArea) {
+    stopViewportAnimations(contentArea);
+    try { paginationStore.stopLoaders(); }
+    catch { console.warn('Sidebar pagination cleanup failed'); }
+    for (const child of Array.from(contentArea.children)) {
+        const cleanup = child._cleanup;
+        child._cleanup = null;
+        try { cleanup?.call(child); }
+        catch { console.warn('Sidebar list view cleanup failed'); }
     }
-    return paginationStates.get(key);
 }
 
 
 // ==========================================
 // 🚀 主加载函数
 // ==========================================
-export async function loadSidebarContent({ 
-    tab, 
-    sort, 
-    keyword, 
-    contentArea, 
-    currentUser, 
-    renderToken, 
+export async function loadSidebarContent({
+    tab,
+    sort,
+    keyword,
+    contentArea,
+    currentUser,
+    renderToken,
     getRenderToken,
     force = false,
-    expandItemId = null  // 新增：要自动展开的卡片ID
+    expandItemId = null,  // 新增：要自动展开的卡片ID
+    isNavigationCurrent = () => true
 }) {
-    // ========== 💬 讨论区特殊处理 ==========
-    if (tab === "posts") {
-        try {
-            const postsModule = await getPostsView();
-            const postsView = postsModule.createPostsView(currentUser, keyword);
-            // 🔧 清理旧视图事件监听器
-            Array.from(contentArea.children).forEach(child => {
-                if (child._cleanup) child._cleanup();
-            });
-            contentArea.innerHTML = "";
-            contentArea.appendChild(postsView);
-            // 触发帖子列表加载
-            if (postsModule.loadPosts) {
-                postsModule.loadPosts();
-            }
-        } catch (error) {
-            console.error("讨论区加载失败:", error);
-            // 使用安全的DOM操作替代innerHTML，防止XSS
-            contentArea.innerHTML = '';
-            const errorDiv = document.createElement('div');
-            errorDiv.style.cssText = 'text-align:center; padding: 40px 20px; color:#F44336;';
-            errorDiv.textContent = `❌ 讨论区加载失败: ${error.message}`;
-            contentArea.appendChild(errorDiv);
-        }
-        return;
-    }
-    
-    // ========== 📝 任务榜特殊处理 ==========
-    if (tab === "tasks") {
-        try {
-            const tasksModule = await getTasksView();
-            const tasksView = tasksModule.createTasksView(currentUser, keyword);
-            // 🔧 清理旧视图事件监听器
-            Array.from(contentArea.children).forEach(child => {
-                if (child._cleanup) child._cleanup();
-            });
-            contentArea.innerHTML = "";
-            contentArea.appendChild(tasksView);
-        } catch (error) {
-            console.error("任务榜加载失败:", error);
-            // 使用安全的DOM操作替代innerHTML，防止XSS
-            contentArea.innerHTML = '';
-            const errorDiv = document.createElement('div');
-            errorDiv.style.cssText = 'text-align:center; padding: 40px 20px; color:#F44336;';
-            errorDiv.textContent = `❌ 任务榜加载失败: ${error.message}`;
-            contentArea.appendChild(errorDiv);
-        }
-        return;
-    }
-    
-    // ========== 🧩 提示词特殊处理 ==========
-    if (tab === "prompts") {
-        try {
-            const promptsModule = await getPromptsView();
-            const promptsView = promptsModule.createPromptsView(currentUser, keyword);
-            // 🔧 清理旧视图事件监听器
-            Array.from(contentArea.children).forEach(child => {
-                if (child._cleanup) child._cleanup();
-            });
-            contentArea.innerHTML = "";
-            contentArea.appendChild(promptsView);
-        } catch (error) {
-            console.error("提示词加载失败:", error);
-            // 使用安全的DOM操作替代innerHTML，防止XSS
-            contentArea.innerHTML = '';
-            const errorDiv = document.createElement('div');
-            errorDiv.style.cssText = 'text-align:center; padding: 40px 20px; color:#F44336;';
-            errorDiv.textContent = `❌ 提示词加载失败: ${error.message}`;
-            contentArea.appendChild(errorDiv);
-        }
+    if (renderToken !== getRenderToken()) return;
+    const canNavigate = () => renderToken === getRenderToken() && isNavigationCurrent();
+    // 新榜单取得视图所有权时停止所有旧分页器，保留各榜单已加载数据。
+    paginationStore.stopLoaders();
+
+    const domainViews = {
+        posts: { loadModule: getPostsView, factory: 'createPostsView', errorKey: 'feedback.load_posts_failed',
+            afterMount: module => { if (module.loadPosts) module.loadPosts(); } },
+        tasks: { loadModule: getTasksView, factory: 'createTasksView', errorKey: 'feedback.load_tasks_failed' },
+        prompts: { loadModule: getPromptsView, factory: 'createPromptsView', errorKey: 'feedback.load_prompts_failed' },
+    };
+    if (Object.hasOwn(domainViews, tab)) {
+        await mountSidebarDomainView({ contentArea, currentUser, keyword, renderToken, getRenderToken,
+            ...domainViews[tab] });
         return;
     }
-    
+
     const cacheKey = `ListCache_${tab}_${sort}`;
     const state = getPaginationState(tab, sort);
     const pageSize = tab === "creators" ? CREATORS_PAGE_SIZE : PAGE_SIZE;
-    
+    const sameCreatorSearchData = tab === "creators" && keyword && state.isSearchResult &&
+        state.searchKeyword === keyword && Array.isArray(state.allData) && state.allData.length > 0
+        ? state.allData
+        : null;
+
     // ========== 🔄 强制刷新：清除当前 tab/sort 的内存缓存 ==========
     if (force) {
         state.allData = [];
         state.displayedCount = 0;
         state.isFullyLoaded = false;
+        if (!sameCreatorSearchData) {
+            state.isSearchResult = false;
+            state.searchKeyword = "";
+        }
     }
-    
+
     // 停止之前的分页加载器
     if (state.loader) {
         state.loader.stop();
         state.loader = null;  // 清除引用，防止旧分页器状态残留
     }
-    
+
     // ========== 🔍 搜索过滤统一入口 ==========
     // 🔧 修复：过滤职责原先分裂在三处且口径不一致 —— loadMoreData 与分页器的
     // getTotalDataCount 都是「先过滤再切片」（正确），而各首屏分支���「先切 20 条再过滤」，
@@ -368,38 +185,38 @@ export async function loadSidebarContent({
     // 创作者Tab的 keyword 由后端搜索接口过滤，此处不做本地过滤（与原口径一致）。
     const _applySearchScope = (dataArray) => {
         if (!keyword || tab === "creators") return dataArray;
-        return _filterBySearch(dataArray, keyword);
+        return filterItemsByKeyword(dataArray, keyword);
     };
-    
+
     // ========== 渲染函数：渲染一批数据（只渲染，过滤由 _applySearchScope 统一负责）==========
     const renderBatch = (dataArray, append = false) => {
         if (renderToken !== getRenderToken()) return;
-        
+
         // 🔧 数据已由调用方经 _applySearchScope 过滤，本函数只负责渲染（不再二次过滤）
         const displayData = dataArray;
-        
+
         // 首次渲染清空容器
         if (!append) {
             contentArea.innerHTML = "";
             state.displayedCount = 0;
         }
-        
+
         // 空数据处理
         if (displayData.length === 0 && state.displayedCount === 0) {
-            contentArea.innerHTML = `
-                <div style='text-align:center; padding: 40px 20px; color:#888;'>
-                    ${keyword ? '🔍 没有搜索到相关内容' : '📭 暂无数据，快来抢沙发吧！'}
-                </div>
-            `;
+            const emptyState = document.createElement('div');
+            emptyState.style.cssText = 'text-align:center; padding:40px 20px; color:#888;';
+            emptyState.textContent = t(keyword ? 'feedback.no_search_results' : 'feedback.no_list_data');
+            emptyState.setAttribute('role', 'status');
+            contentArea.replaceChildren(emptyState);
             return 0;
         }
-        
+
         // 渲染卡片
         const fragment = document.createDocumentFragment();
         const animationType = getAnimationTypeForTab(tab);
         const cards = [];
         let targetCard = null;  // 用于保存需要展开的目标卡片
-        
+
         if (tab === "tools" || tab === "skills" || tab === "apps" || tab === "recommends") {
             displayData.forEach(data => {
                 const card = createItemCard(data, currentUser);
@@ -417,64 +234,73 @@ export async function loadSidebarContent({
                 fragment.appendChild(card);
             });
         }
-        
+
         contentArea.appendChild(fragment);
-        
+
         // ✨ 应用视口感知动画：可见卡片依次错开载入，滚动/分页进入视口的卡片自动补播动画
         applyViewportAnimations(contentArea, cards, animationType, !append);
-        
+
         // 对新渲染的图片启用懒加载
         lazyLoadImages(contentArea, "img:not(.lazy-loaded):not(.lazy-loading)");
-        
+
         // 🔔 自动展开目标卡片（如果有）
         if (targetCard && !append) {
             requestAnimationFrame(() => {
+                if (!canNavigate()) return;
                 // 滚动到卡片位置
-                targetCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                scrollCardIntoView(targetCard);
                 // 模拟点击摘要区域展开卡片
                 const summary = targetCard.querySelector('.item-summary') || targetCard.firstElementChild;
                 if (summary) summary.click();
             });
         }
-        
+
         // 【问题1修复】首屏未找到目标卡片，fallback到独立详情页
-        if (expandItemId && !targetCard && !append) {
+        if (expandItemId && !targetCard && !append && canNavigate()) {
             (async () => {
                 try {
                     const res = await api.getItemById(expandItemId);
+                    if (!canNavigate()) return;
                     if (res.status === "success" && res.data) {
                         const module = await import("../market/资源详情页面组件.js");
+                        if (!canNavigate()) return;
                         const view = module.createItemDetailView(res.data, currentUser);
+                        if (!canNavigate()) {
+                            view._cleanup?.();
+                            return;
+                        }
                         window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
                     }
                 } catch (e) {
-                    console.error("展开卡片 fallback 失败:", e);
+                    if (!canNavigate()) return;
+                    console.warn("展开卡片详情失败");
                 }
             })();
         }
-        
+
         state.displayedCount += displayData.length;
         return displayData.length;
     };
-    
+
     // ========== 分页加载更多函数 ==========
-    const loadMoreData = async (page, size) => {
+    const loadMoreData = async (page, size, { isCurrent = () => true } = {}) => {
+        if (!isCurrent()) return [];
         // 计算要显示的数据范围
         const start = (page - 1) * size;
         const end = start + size;
-        
+
         // 从全量数据中截取（统一走 _applySearchScope，与首屏处于同一数据空间）
         const dataSlice = _applySearchScope(state.allData);
-        
+
         const batch = dataSlice.slice(start, end);
-        
+
         if (batch.length > 0) {
             renderBatch(batch, true);
         }
-        
+
         return batch;
     };
-    
+
     // ========== 尝试从缓存加载 ==========
     // 📌 本处的缓存口径与 任务榜/讨论区/提示词（统一走 性能优化工具.js 的
     // readListCache，命中后一律调 silentRefresh 后台补新）**刻意不同**，不是历史遗留，勿顺手归一：
@@ -483,8 +309,9 @@ export async function loadSidebarContent({
     //   - 那三个列表只缓存第一页，命中后数据必然不完整，故一律后台 silentRefresh 补新。
     // 若强行统一成「总是后台刷新」，插件榜会在每次 Tab 切换时多发一次 200 条的全量请求。
     // 获取完整缓存信息（包含过期状态）
-    const { value: cachedData, expired: isCacheExpired, found: hasCacheData } = getCacheWithMeta(cacheKey, true);
-    
+    const { value: cachedData, expired: isCacheExpired, found: hasCacheData } =
+        readSidebarListCache(cacheKey, { creators: tab === 'creators' });
+
     // 有缓存时直接渲染缓存（搜索时也使用缓存，renderBatch 会处理 keyword 过滤）
     // 🔍 创作者Tab有keyword时不使用缓存，每次都从后端搜索
     // 🔧 修复：原实现还把「刚清空搜索框」也列为跳过缓存的理由，但 cacheKey 不含 keyword、
@@ -497,46 +324,41 @@ export async function loadSidebarContent({
         state.allData = proxiedData;
         state.isFullyLoaded = true;
         // 缓存是全量列表而非搜索结果，清除搜索标记，避免下次加载仍被当作搜索结果处理
-        if (tab === "creators" && !keyword) state.isSearchResult = false;
-        
+        if (tab === "creators" && !keyword) {
+            state.isSearchResult = false;
+            state.searchKeyword = "";
+        }
+
         // 首屏渲染（仅第一页）—— 先过滤再切片，与 loadMoreData 同一数据空间
         const scopedData = _applySearchScope(proxiedData);
         renderBatch(scopedData.slice(0, pageSize), false);
-        
+
         // 如果有更多数据，启动分页加载器
         if (scopedData.length > pageSize) {
-            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab);
+            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab, renderToken, getRenderToken);
         }
-        
+
         // 【新增】Tab 切换后台静默刷新 —— 仅缓存过期时触发
         if (isCacheExpired) {
             console.log(`🔄 缓存已过期，${tab}_${sort} 启动后台静默刷新...`);
-            
+
             setTimeout(async () => {
                 // 保存当前上下文快照，防止网络延迟期间用户切换Tab导致竞态
                 const savedToken = renderToken;
                 const savedTab = tab;
                 const savedSort = sort;
-                
+
                 // 防竞态检查1：回调开始执行时验证
                 if (savedToken !== getRenderToken()) return;
-                
+
                 try {
-                    let newData;
-                    if (savedTab === "tools" || savedTab === "skills" || savedTab === "apps" || savedTab === "recommends") {
-                        const itemType = savedTab === "tools" ? "tool" : (savedTab === "skills" ? "skill" : (savedTab === "apps" ? "app" : "recommend"));
-                        const response = await api.getItems(itemType, savedSort, 200);
-                        newData = proxyImages(response.data || []);
-                    } else if (savedTab === "creators") {
-                        const response = await api.getCreators(savedSort, 500);
-                        newData = proxyImages(response.data || []);
-                    } else {
-                        return; // posts/tasks 不走这个路径
-                    }
-                    
+                    const rawData = await fetchSidebarList({ tab: savedTab, sort: savedSort, background: true });
+                    if (savedToken !== getRenderToken()) return;
+                    const newData = proxyImages(rawData);
+
                     // 防竞态检查2：网络请求完成后再次验证
                     if (savedToken !== getRenderToken()) return;
-                    
+
                     // 🛡️ 空响应防护：云端返回空列表时不回写缓存、也不清屏重渲染。
                     // 本分支由「缓存过期」触发，是切 Tab 时最常走到的路径，若不��，
                     // 下方 state.allData = newData + contentArea.innerHTML = "" 会把
@@ -545,7 +367,7 @@ export async function loadSidebarContent({
                         console.warn(`🛡️ ${savedTab}_${savedSort} 云端返回空列表，保留本地数据，跳过缓存回写`);
                         return;
                     }
-                    
+
                     // 只有token匹配时才同时更新state.allData和setCache
                     if (_shouldUpdateData(state.allData, newData)) {
                         console.log(`✅ ${savedTab}_${savedSort} 检测到新数据，执行静默更新`);
@@ -553,21 +375,21 @@ export async function loadSidebarContent({
                         state.displayedCount = 0; // 重置分页计数
                         // 📴 持久化到 localStorage，保证重启后离线仍可展示
                         setCache(cacheKey, newData, getCacheExpireTime(), true);
-                        
+
                         // 更新创作者 sessionStorage 缓存
                         if (savedTab === "creators") {
                             saveCreatorsToSessionStorage(newData);
                         }
-                        
+
                         // 完整重新渲染（替代之前只更新数字的方案）
                         contentArea.innerHTML = "";
                         // 🔧 先过滤再切片：搜索场景下静默刷新同样会触发，
                         // 原实现在 newData 前 20 条里过滤，会漏掉靠后的匹配项
                         const scopedNewData = _applySearchScope(newData);
                         renderBatch(scopedNewData.slice(0, pageSize), false);
-                        
+
                         if (scopedNewData.length > pageSize) {
-                            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, savedTab);
+                            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, savedTab, savedToken, getRenderToken);
                         }
                     } else {
                         // 关键字段无变化 → 无需重渲染。但 newData 才是刚从云端取回的权威数据，
@@ -579,14 +401,15 @@ export async function loadSidebarContent({
                         setCache(cacheKey, newData, getCacheExpireTime(), true);
                     }
                 } catch (err) {
-                    console.warn(`⚠️ ${savedTab}_${savedSort} 后台刷新失败:`, err);
+                    if (savedToken !== getRenderToken()) return;
+                    console.warn(`⚠️ ${savedTab}_${savedSort} 后台刷新失败`);
                 }
             }, 0);
         }
-        
+
         return;
     }
-    
+
     // ========== 🔄 本地排序优先：同 tab 已有数据时直接排序渲染（强制刷新时跳过）==========
     // 🔍 创作者Tab有keyword时不走本地排序优先，必须调用后端搜索API
     // 🔍 创作者Tab清空搜索框后也不走本地排序优先，避免使用搜索时的部分结果
@@ -601,32 +424,34 @@ export async function loadSidebarContent({
         state.allData = locallySorted;
         state.isFullyLoaded = true;
         state.displayedCount = 0;  // 重置已显示计数，因为数据重新排序了
-        
+
         // 首屏渲染（先过滤再切片）
         const scopedSorted = _applySearchScope(locallySorted);
         renderBatch(scopedSorted.slice(0, pageSize), false);
-        
+
         // 启动分页加载器
         if (scopedSorted.length > pageSize) {
-            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab);
+            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab, renderToken, getRenderToken);
         }
-        
+
         // 存入当前排序的缓存（📴 创作者数据同样持久化到 localStorage，保证重启后离线可展示）
         setCache(cacheKey, locallySorted, getCacheExpireTime(), true);
-        
+
         return; // 本地排序后直接返回，不需要后台刷新（数据是同一批）
     }
-    
+
     // ========== 🚀 缓存先行：阻塞前先用本地已有数据上屏 ==========
     // 走到这里说明上面两条快路径都没命中：要么是 force 强制刷新（刻意跳过缓存），
     // 要么是本次会话还没有该 tab 的完整数据。弱网下一次列表请求最长要烧满整个重试预算，
     // 期间用户只能盯骨架屏；此刻若本地已有可用数据，就先渲染首屏，网络请求照常往下走，
     // 回来后按 renderToken + _shouldUpdateData 决定是否重渲染（与上方静默刷新同口径）。
-    // 🔍 创作者搜索场景不参与：renderBatch 对创作者不做本地过滤，先上屏全量列表会混入非搜索结果
+    // 🔍 新关键词的创作者搜索不参与缓存先行，避免显示其它查询结果；只��强制刷新当前同一关键词时，
+    // 才临时复用精确匹配的上一批搜索结果（state.searchKeyword），失败时继续保留它。
     let renderedInstant = false;
-    if (!isCreatorSearching) {
+    if (!isCreatorSearching || sameCreatorSearchData) {
         // 可立即上屏的数据：当前排序的列表缓存（force 时被跳过）→ 创作者 sessionStorage 降级副本
-        let instantData = (hasCacheData && Array.isArray(cachedData) && cachedData.length > 0) ? cachedData : null;
+        let instantData = sameCreatorSearchData ||
+            ((hasCacheData && Array.isArray(cachedData) && cachedData.length > 0) ? cachedData : null);
         if (!instantData && tab === "creators") {
             const sessionData = getCreatorsFromSessionStorage();
             if (Array.isArray(sessionData) && sessionData.length > 0) instantData = sessionData;
@@ -639,55 +464,36 @@ export async function loadSidebarContent({
             const sortedData = sortDataLocally(proxyImages(instantData), tab, sort);
             state.allData = sortedData;
             state.isFullyLoaded = true;
-            state.isSearchResult = false;
+            state.isSearchResult = !!sameCreatorSearchData;
+            state.searchKeyword = sameCreatorSearchData ? keyword : "";
             // 🔧 先过滤再切片（tools/skills/apps/recommends 带 keyword 时同样会进入本分支）
             const scopedInstant = _applySearchScope(sortedData);
             renderBatch(scopedInstant.slice(0, pageSize), false);
             if (scopedInstant.length > pageSize) {
-                _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab);
+                _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab, renderToken, getRenderToken);
             }
             renderedInstant = true;
         }
     }
-    
+
     // ========== 显示加载骨架屏（已有本地数据上屏时跳过，避免闪屏）==========
     if (!renderedInstant) {
         contentArea.innerHTML = "";
         const skeleton = createSkeleton(tab === "creators" ? "list" : "card", 3);
         contentArea.appendChild(skeleton);
     }
-    
+
     // ========== 从网络加载数据 ==========
     try {
-        let response, realData;
-        
-        if (tab === "tools" || tab === "skills" || tab === "apps" || tab === "recommends") {
-            const itemType = tab === "tools" ? "tool" : (tab === "skills" ? "skill" : (tab === "apps" ? "app" : "recommend"));
-            response = await api.getItems(itemType, sort, 200);  // 获取较多数据
-            realData = response.data || [];
-            realData = proxyImages(realData);  // 确保图片走本地缓存代理
-        } else if (tab === "creators") {
-            // 🔍 创作者搜索：有 keyword 时调用后端搜索API，否则获取列表
-            if (keyword) {
-                // 🔍 先撤销上一次仍在途的搜索请求：用户继续输入后，上一次的关键词已经作废，
-                // 但它的请求还会继续占用并发额度（全局最多 6 个）与最长 10 秒的超时预算，
-                // 把最新这次搜索挤到后面排队，弱网下表现为「一直在转圈」。
-                // 只撤销搜索分组，不影响列表、详情、点赞等任何其它请求
-                requestCancelManager.cancelAll(API.SEARCH_COMPONENT_ID);
-                response = await api.searchCreators(keyword, sort);
-                realData = response.data || [];
-                realData = proxyImages(realData);  // 确保图片走本地缓存代理
-                // 标记为搜索结果，不存入缓存，避免污染正常数据
-                state.isSearchResult = true;
-            } else {
-                response = await api.getCreators(sort, 500);
-                realData = response.data || [];
-                realData = proxyImages(realData);  // 确保图片走本地缓存代理
-                // 正常数据，清除搜索标记
-                state.isSearchResult = false;
-            }
+        const rawData = await fetchSidebarList({ tab, sort, keyword, force });
+        if (renderToken !== getRenderToken()) return;
+        const realData = proxyImages(rawData);
+        if (renderToken !== getRenderToken()) return;
+        if (tab === 'creators') {
+            state.isSearchResult = !!keyword;
+            state.searchKeyword = keyword || '';
         }
-        
+
         // 存入缓存（📴 创作者数据同样持久化到 localStorage，保证重启后离线仍可展示；搜索结果不存入缓存）
         const isCreatorSearch = tab === "creators" && keyword;
         // 🛡️ 空响应防护：创作者搜索命中 0 条是有效答案（下方要渲染「没有搜索到相关内容」），
@@ -698,39 +504,39 @@ export async function loadSidebarContent({
         } else if (!isCreatorSearch) {
             setCache(cacheKey, realData, getCacheExpireTime(), true);
         }
-        
+
         // 创作者非搜索数据存入 sessionStorage（用于离线降级）
         if (tab === "creators" && !isCreatorSearch && !isEmptyOverwrite) {
             saveCreatorsToSessionStorage(realData);
         }
-        
+
         state.isFullyLoaded = true;
-        
+
         // 🛡️ 空响应且本地数据已上屏：保持当前画面，不用空列表清屏（与缓存同口径不回写）
         if (isEmptyOverwrite && renderedInstant) {
             return;
         }
-        
+
         // 🚀 缓存先行场景：网络数据与已上屏的本地数据无实质差异时不重渲染，避免清屏重画
         // 打断用户已经滚动的阅读位置（与上方后台静默刷新同口径）。缓存已在上面回写权威新数据，
         // 此处刻意不更新 state.allData，保持与已渲染卡片一致，防止分页加载错位
         if (renderedInstant && !_shouldUpdateData(state.allData, realData)) {
             return;
         }
-        
+
         // 更新状态
         state.allData = realData;
-        
+
         // 渲染首屏（先过滤再切片：tools/skills/apps/recommends 的 keyword 是本地搜索，
         // realData 是未过滤的全量数据，原实现在前 20 条里过滤会漏掉靠后的匹配项）
         const scopedReal = _applySearchScope(realData);
         renderBatch(scopedReal.slice(0, pageSize), false);
-        
+
         // 启动分页加载器
         if (scopedReal.length > pageSize) {
-            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab);
+            _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab, renderToken, getRenderToken);
         }
-        
+
     } catch (error) {
         // 🔍 防竞态：本次加载已被更新的加载取代（切Tab、换排序、继续输入关键词）时直接退出。
         // renderBatch 内部本来就有这道守卫，但它之外的降级分支会直接写 contentArea.innerHTML
@@ -745,16 +551,17 @@ export async function loadSidebarContent({
             console.log(`⏹️ ${tab}_${sort} 搜索请求已被新关键词取代`);
             return;
         }
-        console.error("数据加载失败:", error);
-        
+        console.error("数据加载失败");
+
         // 🚀 缓存先行场景：首屏已经用本地数据上屏，网络失败时保持当前画面即可，不再走下面的
         // 降级分支（否则会把同一批数据重渲染一遍、重播卡片动画）。与上方后台静默刷新失败一致：
         // 只记录日志，不额外打扰用户
         if (renderedInstant) {
             console.warn(`📴 ${tab}_${sort} 网络刷新失败，保持已渲染的本地数据`);
+            if (force) showToast(t('feedback.refresh_failed_cached'), 'warning');
             return;
         }
-        
+
         // 🚀 回退到任何可用缓存（包括过期的）
         // 🔍 创作者Tab搜索场景跳过此分支：renderBatch 对创作者不做本地过滤，
         // 直接渲染全量缓存会导致搜索结果未过滤，改由下方本地搜索降级分支处理
@@ -765,7 +572,7 @@ export async function loadSidebarContent({
             // 带 keyword 时会进来；renderBatch 不再自行过滤，此处必须显式过滤
             const scopedCached = _applySearchScope(cachedData);
             renderBatch(scopedCached.slice(0, pageSize), false);
-            
+
             // 如果是过期缓存，显示提示
             // 🔧 改用统一提示组件 + 词典（原为手写 div、无动画不排队，且文案硬编码中文）
             if (isCacheExpired) {
@@ -773,13 +580,14 @@ export async function loadSidebarContent({
             }
             return;
         }
-        
+
         // 🚀 创作者Tab：尝试从 sessionStorage 或内存中降级
         if (tab === "creators") {
             let fallbackData = null;
-            
+
             // 1. 优先从当前内存状态获取
-            if (state.allData && state.allData.length > 0) {
+            if (state.allData && state.allData.length > 0 &&
+                (!state.isSearchResult || state.searchKeyword === keyword)) {
                 fallbackData = state.allData;
             }
             // 2. 从本地列表缓存获取（含过期缓存，搜索结果不入库故不会污染）
@@ -794,26 +602,26 @@ export async function loadSidebarContent({
             if (!fallbackData) {
                 fallbackData = findExistingTabData("creators");
             }
-            
+
             if (fallbackData && fallbackData.length > 0) {
                 let displayData = fallbackData;
-                
+
                 // 搜索场景：执行本地搜索
                 if (keyword) {
                     displayData = searchCreatorsLocally(keyword, fallbackData);
                     if (displayData.length === 0) {
-                        contentArea.innerHTML = `
-                            <div style='text-align:center; padding: 40px 20px; color:#888;'>
-                                🔍 没有搜索到相关内容
-                            </div>
-                        `;
-                        
+                        const emptyState = document.createElement('div');
+                        emptyState.style.cssText = 'text-align:center; padding:40px 20px; color:#888;';
+                        emptyState.textContent = t('feedback.no_search_results');
+                        emptyState.setAttribute('role', 'status');
+                        contentArea.replaceChildren(emptyState);
+
                         // 🔧 改用统一提示组件 + 词典（原为手写 div 且文案硬编码中文）
                         showToast(t('feedback.search_local_result'), 'warning');
                         return;
                     }
                 }
-                
+
                 // 按当前排序排序
                 displayData = sortDataLocally(displayData, tab, sort);
                 state.allData = displayData;
@@ -821,143 +629,30 @@ export async function loadSidebarContent({
                 // searchCreatorsLocally 过滤），保证各渲染入口口径完全一致
                 const scopedFallback = _applySearchScope(displayData);
                 renderBatch(scopedFallback.slice(0, pageSize), false);
-                
+
                 // 启动分页加载器
                 if (scopedFallback.length > pageSize) {
-                    _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab);
+                    _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab, renderToken, getRenderToken);
                 }
-                
+
                 // 🔧 改用统一提示组件 + 词典（原为手写 div 且两条文案均硬编码中文）
                 showToast(keyword ? t('feedback.search_local_result') : t('feedback.cache_fallback'), 'warning');
                 return;
             } else if (keyword) {
-                contentArea.innerHTML = '';
-                const emptyDiv = document.createElement('div');
-                emptyDiv.style.cssText = 'text-align:center; padding: 40px 20px; color:#888;';
-                emptyDiv.textContent = `🔌 ${t('common.network_error_retry')}`;
-                contentArea.appendChild(emptyDiv);
+                renderListLoadError(contentArea, t('common.network_error_retry'), () => loadSidebarContent({
+                    tab, sort, keyword, contentArea, currentUser, renderToken, getRenderToken,
+                    force: true, expandItemId, isNavigationCurrent
+                }), t);
                 return;
             }
         }
-        
-        // 无任何缓存，显示原有的错误信息
-        // 使用安全的DOM操作替代innerHTML，防止XSS
-        contentArea.innerHTML = '';
-        const errorDiv = document.createElement('div');
-        errorDiv.style.cssText = 'text-align:center; padding: 40px 20px; color:#F44336;';
-        const errorText = document.createElement('div');
-        errorText.textContent = `❌ 数据加载失败: ${error.message}`;
-        errorDiv.appendChild(errorText);
-        const br = document.createElement('br');
-        errorDiv.appendChild(br);
-        const retryBtn = document.createElement('button');
-        retryBtn.style.cssText = 'padding:8px 16px; background:#2196F3; color:white; border:none; border-radius:4px; cursor:pointer; margin-top:16px;';
-        retryBtn.textContent = '🔄 点击重试';
-        retryBtn.onclick = () => location.reload();
-        errorDiv.appendChild(retryBtn);
-        contentArea.appendChild(errorDiv);
-    }
-}
 
-
-// ==========================================
-// 📜 设置分页加载器
-// ==========================================
-function _setupPaginationLoader(contentArea, state, pageSize, loadMoreData, keyword, tab) {
-    // 安全清理旧分页器，防止状态残留和重复事件监听
-    if (state.loader) {
-        state.loader.stop();
+        // 无本地数据时提供原位重试，保留当前 ComfyUI 页面与榜单上下文。
+        renderListLoadError(contentArea, t('common.network_error_retry'), () => loadSidebarContent({
+            tab, sort, keyword, contentArea, currentUser, renderToken, getRenderToken,
+            force: true, expandItemId, isNavigationCurrent
+        }), t);
     }
-    state.loader = null;
-    
-    // 获取滚动容器（侧边栏主容器）
-    const scrollContainer = contentArea.closest(".sidebar-scroll-container") || contentArea.parentElement;
-    
-    if (!scrollContainer) {
-        console.warn("⚠️ 未找到滚动容器，分页加载无法启动");
-        
-        // 添加手动加载按钮作为 fallback
-        let nextPage = 2;
-        const loadMoreBtn = document.createElement('button');
-        loadMoreBtn.textContent = t('task.load_more');
-        loadMoreBtn.style.cssText = 'width:100%;padding:10px;margin-top:10px;cursor:pointer;border:1px solid #555;border-radius:6px;background:transparent;color:inherit;';
-        loadMoreBtn.onclick = async () => {
-            loadMoreBtn.disabled = true;
-            loadMoreBtn.textContent = t('common.loading');
-            try {
-                const result = await loadMoreData(nextPage, pageSize);
-                if (result && result.length > 0) {
-                    nextPage++;
-                    loadMoreBtn.textContent = t('task.load_more');
-                } else {
-                    loadMoreBtn.textContent = t('common.no_more');
-                    loadMoreBtn.style.cursor = 'default';
-                    loadMoreBtn.onclick = null;
-                }
-            } catch (err) {
-                console.error("手动加载更多失败:", err);
-                loadMoreBtn.textContent = t('task.load_failed');
-            }
-            loadMoreBtn.disabled = false;
-        };
-        contentArea.appendChild(loadMoreBtn);
-        return;
-    }
-    
-    // 计算数据总量（考虑搜索过滤，创作者Tab有keyword时不进行本地过滤，因为后端已过滤）
-    // 📌 口径必须与 loadSidebarContent 内的 _applySearchScope 一致（先过滤再计数）；
-    // 本函数是模块级、拿不到那个闭包，故保留等价实现，改动其一务必同步另一处
-    const getTotalDataCount = () => {
-        if (!keyword) return state.allData.length;
-        // 创作者Tab后端搜索已过滤，直接返回全部数据
-        if (tab === "creators") return state.allData.length;
-        return _filterBySearch(state.allData, keyword).length;
-    };
-    
-    // 创建分页加载器
-    const loader = createPaginationLoader({
-        container: scrollContainer,
-        pageSize: pageSize,
-        threshold: 300,
-        loadMore: async (page, size) => {
-            const totalCount = getTotalDataCount();
-            
-            // 如果已显示完所有数据，返回空数组停止加载
-            if (state.displayedCount >= totalCount) {
-                return [];
-            }
-            
-            return loadMoreData(page, size);
-        },
-        onEnd: () => {
-            // 显示"已经到底了"提示
-            const totalCount = getTotalDataCount();
-            // 只有在有数据且显示数量 >= 总数量时才显示
-            if (totalCount > 0 && state.displayedCount >= totalCount) {
-                _showEndIndicator(contentArea);
-            }
-        }
-    });
-    
-    state.loader = loader;
-    loader.start();
-}
-
-// ==========================================
-// 🏁 显示"已经到底了"提示
-// ==========================================
-function _showEndIndicator(contentArea) {
-    // 检查是否已存在
-    if (contentArea.querySelector('.end-indicator')) return;
-    
-    const endIndicator = document.createElement('div');
-    endIndicator.className = 'end-indicator';
-    endIndicator.innerHTML = `
-        <div style="text-align: center; padding: 20px; color: #666; font-size: 13px;">
-            — 已经到底了 —
-        </div>
-    `;
-    contentArea.appendChild(endIndicator);
 }
 
 
@@ -985,7 +680,7 @@ function _isEmptyOverwrite(newData, ...localData) {
 function _shouldUpdateData(oldData, newData) {
     if (!oldData || !newData) return true;
     if (oldData.length !== newData.length) return true;
-    
+
     // 检查ID顺序是否一致（检测排序变化、新增/删除）
     // 比对条数覆盖首屏渲染量（PAGE_SIZE），避免首屏可见卡片（第 11~20 条）的版本/数字更新被漏检
     const checkCount = Math.min(PAGE_SIZE, oldData.length);
@@ -993,7 +688,7 @@ function _shouldUpdateData(oldData, newData) {
         const oldId = oldData[i].id || oldData[i].account;
         const newId = newData[i].id || newData[i].account;
         if (oldId !== newId) return true;
-        
+
         // 检查关键数字字段
         const keyFields = ['likes', 'downloads', 'uses', 'views', 'daily_views', 'recent_tips', 'favorites', 'rating_avg', 'rating_count'];
         for (const field of keyFields) {

前端页面/core/全局配置.js

@@ -18,22 +18,28 @@
 // 🌐 API 配置
 // ==========================================
 
-/** @type {{ BASE_URL: string, TIMEOUT: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, BACKGROUND_TIMEOUT: number, BACKGROUND_RETRIES: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string }} */
+/** @type {{ BASE_URL: string, TIMEOUT: number, VIDEO_UPLOAD_TIMEOUT: number, VIDEO_UPLOAD_RESPONSE_MAX_CHARS: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, PROFILE_RESOURCE_TIMEOUT: number, BACKGROUND_TIMEOUT: number, BACKGROUND_RETRIES: number, WORKFLOW_DOWNLOAD_TIMEOUT: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string, IMAGE_PROXY_PATH: string, PRIVATE_GET_PATTERNS: RegExp[], PUBLIC_CONDITIONAL_GET_PATHS: string[], CONDITIONAL_ETAG_PATTERN: RegExp }} */
 export const API = {
+    // 仅公开榜单使用由正文派生的条件验证器，私有响应仍禁止留存。
+    PUBLIC_CONDITIONAL_GET_PATHS: ['/api/items', '/api/creators', '/api/creators/search', '/api/posts', '/api/prompts', '/api/tasks'],
+    CONDITIONAL_ETAG_PATTERN: /^W\/"rk-[a-f0-9]{64}"$/,
+
     // 云端 API 基础地址
     BASE_URL: "https://zhiwei666-comfyui-ranking-api.hf.space",
     
     // 请求超时时间（毫秒）
     TIMEOUT: 30000,
-    
+    VIDEO_UPLOAD_TIMEOUT: 300000,
+    VIDEO_UPLOAD_RESPONSE_MAX_CHARS: 65536,
+
     // GET 请求重试次数（实际尝试 MAX_RETRIES + 1 次）
     // 🔧 修复：此前本值为 3 且全库无人读取，真正的重试次数硬编码在 网络请求_基础设施.js 中为 2，
     // 现改为由基础设施读取本配置；取值 2 以保持既有的「共 3 次尝试」行为不变
     MAX_RETRIES: 2,
-    
+
     // 重试间隔（毫秒，指数退避基数：1s、2s、4s…）
     RETRY_DELAY: 1000,
-    
+
     // 🐢 弱网预算分级（仅作用于 GET，由 网络请求_基础设施.js 按 endpoint 路径精确匹配）
     // 默认预算下弱网一次列表请求最长要烧 3×30s + 1s + 2s = 93s，期间用户只能盯骨架屏。
     // 列表类：首屏已可由本地缓存先行上屏（见 侧边栏数据引擎.js），且列表往往是会话的第一个请求、
@@ -43,6 +49,7 @@ export const API = {
     // 搜索类：必然发生在列表已加载之后（空间已被唤醒），可放心收紧，93s → 10s×2 + 1s = 21s
     SEARCH_TIMEOUT: 10000,
     SEARCH_RETRIES: 1,
+    PROFILE_RESOURCE_TIMEOUT: 5000,
 
     // 🐢 后台补新预算（仅作用于 GET，由 网络请求_基础设施.js 按「本地是否已有可兜底数据」判定）
     // 七大列表视图都是「本地数据先上屏 → 再发请求补新」，此时界面上已经有内容，
@@ -50,6 +57,7 @@ export const API = {
     // 云端不通时会把前台请求（详情页、点赞、轮询）全部挤到排队，表现为「切哪个界面都要等」。
     // 故一旦本地已有该请求的缓存（含过期），单次超时压到 10s 且不再重试，最坏耗时 10s
     BACKGROUND_TIMEOUT: 10000,
+    WORKFLOW_DOWNLOAD_TIMEOUT: 120000,  // 工作流流式下载预算（2 分钟）
     BACKGROUND_RETRIES: 0,
 
     // ☁️ 云端不可达冷却（消费方见 状态管理.js 的「云端可达性」段落）
@@ -59,15 +67,48 @@ export const API = {
     // 并发额度全部让给前台。被动探测——冷却一过，下一个真实请求充当探针；
     // 期间任意一次成功响应（含 POST/PUT/DELETE）立即清零，不需等到冷却结束
     CLOUD_DOWN_COOLDOWN: 60 * 1000,
-    
+
     // 🔍 创作者搜索请求的取消分组 ID
     // 用户在搜索框继续输入时，侧边栏数据引擎.js 据此撤销上一次仍在途的搜索请求。
     // 不撤销的话，作废请求会持续占用并发额度（最多 6 个）与超时预算，
     // 把最新那次搜索挤到后面排队。仅搜索请求归入本分组，不影响其它任何请求
-    SEARCH_COMPONENT_ID: "sidebar-search"
+    SEARCH_COMPONENT_ID: "sidebar-search",
+    // 上传相对路径的云端图片读取入口。
+    IMAGE_PROXY_PATH: "/api/image_proxy",
+    // 身份相关或私有 GET 禁止通用响应缓存；公开列表仍使用原缓存策略。
+    PRIVATE_GET_PATTERNS: [
+        /^\/api\/(wallet|messages|chats|admin|disputes|users)(?:\/|$)/,
+        /^\/api\/my-(posts|prompts|tasks)(?:\/|$)/,
+        /^\/api\/(tasks|prompts)\/[^/]+$/
+    ]
 };
 
 
+// 发布视频的本地读取预算，不改变云端上传额度。
+export const PUBLISH_MEDIA_LIMITS = Object.freeze({
+    MAX_IMAGES: 9,
+    IMAGE_MAX_EDGE: 1920,
+    IMAGE_QUALITY: 0.85,
+    VIDEO_MAX_BYTES: 100 * 1024 * 1024,
+    VIDEO_MAX_SECONDS: 180,
+    VIDEO_METADATA_TIMEOUT: 15000
+});
+
+// 上传前处理预算；浏览器解码本身仍由宿主管理。
+export const IMAGE_PROCESS = {
+    HEADER_BYTES: 256 * 1024,
+    MAX_INPUT_BYTES: 50 * 1024 * 1024,
+    MAX_PIXELS: 40 * 1024 * 1024,
+    MAX_SOURCE_EDGE: 16384,
+    MAX_OUTPUT_EDGE: 4096,
+    MAX_OUTPUT_BYTES: 5 * 1024 * 1024,
+    TIMEOUT: 15000,
+    MIN_QUALITY: 0.3,
+    QUALITY_STEP: 0.1,
+    AVATAR_MAX_BYTES: 2 * 1024 * 1024,
+    AVATAR_SIZE: 512
+};
+
 // ==========================================
 // 🔐 管理员配置 (P0安全修复：管理员账号配置化)
 // ==========================================
@@ -88,6 +129,9 @@ export function isAdmin(account) {
 // ==========================================
 // 💾 缓存配置
 // ==========================================
+const RESOURCE_LIST_PREFIXES = [
+    "ListCache_tools_", "ListCache_skills_", "ListCache_apps_", "ListCache_recommends_"
+];
 export const CACHE = {
     // 缓存键前缀
     PREFIX: "ComfyRanking_",
@@ -107,8 +151,14 @@ export const CACHE = {
     
     // 内存缓存最大条目数
     MAX_MEMORY_ITEMS: 100,
+
+    // 本插件 localStorage 持久缓存的估算容量上限（不影响用户/会话等其它键）
+    MAX_STORAGE_BYTES: 2 * 1024 * 1024,
     
     // localStorage 键名（旧版兼容）
+    SESSION_REMEMBER_TTL: 30 * 24 * 60 * 60 * 1000,
+    INSTALLED_VERSION_UNCONFIRMED: "__installed_unconfirmed__", // 安装成功但没有实际版本证明
+    SESSION_TEMP_TTL: 24 * 60 * 60 * 1000,
     LEGACY_KEYS: {
         USER: "ComfyCommunity_User",
         TOKEN: "ComfyCommunity_Token",
@@ -119,9 +169,14 @@ export const CACHE = {
     
     // 本地背景存储键（不上传云端）
     LOCAL_KEYS: {
+        BANNER_CONFIG: "ComfyRanking_BannerConfig",                // 广告配置持久缓存
+        CREATORS_SESSION: "ComfyRanking_CreatorsCache",             // 沿用创作者临时缓存键
         SIDEBAR_BACKGROUND: "ComfyRanking_SidebarBackground",      // 工具背景图 Base64
         PROFILE_BANNER_CACHE: "ComfyRanking_ProfileBannerCache",   // 个人资料背景图本地缓存
         ACQUIRED_ITEMS: "ComfyRanking_AcquiredItems",              // 已获取的资源记录
+        PROFILE_LIST_PREFIX: "ProfileList_",                     // 兼容旧个人列表业务键
+        INSTALLED_VERSION_PREFIX: "ComfyCommunity_LocalVer_",      // 沿用既有安装版本键
+        ITEM_OWNERSHIP_PREFIX: "ItemOwnership_",                  // 缓存管理器业务键前缀
         // 🚀 新增：私信和通知本地缓存
         NOTIFICATIONS: "ComfyRanking_Notifications",               // 通知消息缓存
         CHAT_LIST: "ComfyRanking_ChatList",                        // 对话列表缓存
@@ -130,6 +185,12 @@ export const CACHE = {
         CHAT_CLEAR_PREFIX: "ComfyRanking_ChatCleared_"             // 聊天清空时间戳前缀
     },
     
+    REFUND_CACHE_PREFIXES: [
+        "api_/api/items", "api_/api/creators", "api_/api/wallet",
+        ...RESOURCE_LIST_PREFIXES
+    ],
+    RESOURCE_LIST_PREFIXES,
+
     // 🚀 新增：消息轮询配置
     MESSAGE_POLL: {
         INTERVAL: 30 * 1000,     // 轮询间隔：30秒
@@ -147,12 +208,18 @@ export const PAGINATION = {
     
     // 创作者每页数量
     CREATORS_PAGE_SIZE: 12,
+    SIDEBAR_ITEM_FETCH_LIMIT: 200,
+    SIDEBAR_CREATOR_FETCH_LIMIT: 500,
+    SIDEBAR_CREATOR_SEARCH_LIMIT: 50,
+    PROFILE_USERS_PAGE_SIZE: 20,
+    PROFILE_RESOURCE_FETCH_LIMIT: 200,
     
     // 评论每页数量
     COMMENTS_PAGE_SIZE: 10,
     
     // 消息每页数量
     MESSAGES_PAGE_SIZE: 20,
+    CHAT_MESSAGES_PAGE_SIZE: 50,
     
     // 滚动加载触发阈值（距底部像素）
     SCROLL_THRESHOLD: 300,
@@ -206,6 +273,19 @@ export const TIP_LEVELS = {
 // 🎨 UI 配置
 // ==========================================
 export const UI = {
+    CHAT_MAX_MSG_LENGTH: 1000,
+    CHAT_TIME_GAP_SECONDS: 5 * 60,
+    MAX_DISPUTE_EVIDENCE: 6,
+    RECHARGE_POLL_INTERVAL: 3000,
+    RECHARGE_POLL_LIMIT: 100,
+    RECHARGE_QR_MAX_BYTES: 2048,
+    PROFILE_BANNER_CACHE_BYTES: 512 * 1024,
+    // 与云端公开版本接口的缺省值一致；用于网络不可用时的本地展示。
+    DEFAULT_PROJECT_VERSION: Object.freeze({ stage: "beta", major: 2, minor: 0, patch: 0 }),
+    ABOUT: {
+        AUTHOR_URL: "https://space.bilibili.com/2114638644",
+        AUTHOR_BADGE_URL: "https://img.shields.io/badge/bilibili-猪的飞行梦-00A1D6?logo=bilibili&logoColor=white"
+    },
     // Toast 消息配置
     TOAST: {
         DURATION: 3000,           // 显示时长（毫秒）
@@ -390,7 +470,7 @@ export function getCurrentAccount() {
             return userData?.user?.account || null;
         }
     } catch (e) {
-        console.warn("获取当前账号失败:", e);
+        console.warn("获取当前账号失败。");
     }
     return null;
 }
@@ -456,8 +536,9 @@ export function getTipLevelConfig() {
 // 缓存键：ComfyCommunity_ProfileCache_{account}
 
 const PROFILE_CACHE_PREFIX = "ComfyCommunity_ProfileCache_";
-const _pendingProfileRequests = new Map();  // 防止 N+1 并发请求
+const _pendingProfileRequests = new Map();  // 每账号共享请求与全部订阅者
 const PENDING_TIMEOUT = 30000;  // 挂起请求超时清理时间（毫秒）
+let nextAvatarRenderId = 0;
 
 // ==========================================
 // 🔒 HTML 转义（底层公共工具）
@@ -488,6 +569,19 @@ function _mapAvatarField(profile) {
     }
 }
 
+const PUBLIC_PROFILE_FIELDS = ["account", "name", "avatar", "avatarDataUrl", "intro", "gender", "age",
+    "country", "region", "created_at", "followers", "following", "privacy", "is_admin", "bannerUrl",
+    "receivedLikes", "receivedFavorites", "receivedUses"];
+function _publicProfile(profile) {
+    return Object.fromEntries(PUBLIC_PROFILE_FIELDS.filter(key => Object.prototype.hasOwnProperty.call(profile, key))
+        .map(key => [key, profile[key]]));
+}
+
+function _validProfile(profile) {
+    return !!profile && typeof profile === 'object' && !Array.isArray(profile)
+        && ['name', 'avatar', 'avatarDataUrl'].every(field => profile[field] == null || typeof profile[field] === 'string');
+}
+
 /**
  * 🚀 获取缓存的用户资料（同步）
  * @param {string} account - 用户账号
@@ -499,8 +593,14 @@ export function getCachedProfile(account) {
         const cached = localStorage.getItem(PROFILE_CACHE_PREFIX + account);
         if (!cached) return null;
         const profile = JSON.parse(cached);
-        _mapAvatarField(profile);
-        return profile;
+        if (!_validProfile(profile)) return null;
+        const publicProfile = _publicProfile(profile);
+        _mapAvatarField(publicProfile);
+        // 旧资料缓存可能含联系方式；读取返回过滤副本并尝试迁移，不因迁移失败隐藏公开内容。
+        if (JSON.stringify(publicProfile) !== cached) {
+            try { localStorage.setItem(PROFILE_CACHE_PREFIX + account, JSON.stringify(publicProfile)); } catch (_) {}
+        }
+        return publicProfile;
     } catch {
         return null;
     }
@@ -512,9 +612,9 @@ export function getCachedProfile(account) {
  * @param {Object} profile - 用户资料
  */
 export function setCachedProfile(account, profile) {
-    if (!account || !profile) return;
+    if (!account || !_validProfile(profile)) return;
     try {
-        localStorage.setItem(PROFILE_CACHE_PREFIX + account, JSON.stringify(profile));
+        localStorage.setItem(PROFILE_CACHE_PREFIX + account, JSON.stringify(_publicProfile(profile)));
     } catch {}
 }
 
@@ -531,27 +631,32 @@ export function getProfileWithSWR(account, apiFn, onUpdate) {
     // 第一轨：同步返回缓存
     const cached = getCachedProfile(account);
     
-    // 第二轨：异步静默校对（防止 N+1 并发）
-    if (!_pendingProfileRequests.has(account)) {
-        const promise = apiFn(account).then(res => {
-            const profile = res.data || res;
+    // 第二轨：同账号只取一次，但每个视图都订阅结果。
+    let entry = _pendingProfileRequests.get(account);
+    if (!entry && typeof apiFn === 'function') {
+        entry = { listeners: new Set(), timer: null };
+        _pendingProfileRequests.set(account, entry);
+        const release = () => {
+            if (_pendingProfileRequests.get(account) === entry) _pendingProfileRequests.delete(account);
+            clearTimeout(entry.timer);
+            entry.listeners.clear();
+        };
+        entry.timer = setTimeout(release, PENDING_TIMEOUT);
+        Promise.resolve().then(() => apiFn(account)).then(res => {
+            // 超时后的旧结果不能覆盖新请求，也不能重新写入旧资料。
+            if (_pendingProfileRequests.get(account) !== entry) return;
+            if (res?.status && res.status !== 'success') return;
+            const data = res && Object.hasOwn(res, 'data') ? res.data : res;
+            if (!_validProfile(data)) return;
+            const profile = _publicProfile(data);
             _mapAvatarField(profile);
             setCachedProfile(account, profile);
-            if (onUpdate && typeof onUpdate === 'function') {
-                onUpdate(profile);
-            }
-            return profile;
-        }).catch(() => null).finally(() => {
-            _pendingProfileRequests.delete(account);
-        });
-        _pendingProfileRequests.set(account, promise);
-        // ⏱️ 超时自动清理：防止请求永不完成导致内存泄漏
-        setTimeout(() => {
-            if (_pendingProfileRequests.has(account)) {
-                _pendingProfileRequests.delete(account);
+            for (const listener of Array.from(entry.listeners)) {
+                try { listener(profile); } catch { /* 单个视图异常不阻断其它订阅者 */ }
             }
-        }, PENDING_TIMEOUT);
+        }).catch(() => {}).finally(release);
     }
+    if (entry && typeof onUpdate === 'function') entry.listeners.add(onUpdate);
     
     return cached;
 }
@@ -569,6 +674,9 @@ export function getProfileWithSWR(account, apiFn, onUpdate) {
  */
 export function renderAvatarWithSWR(options) {
     const { account, fallbackAvatar, fallbackName, avatarSize = 24, apiFn, containerId } = options;
+    const renderId = String(++nextAvatarRenderId);
+    const size = typeof avatarSize === 'number' || typeof avatarSize === 'string' ? Number(avatarSize) : NaN;
+    const safeSize = Number.isFinite(size) && size > 0 ? size : 24;
     
     // 从缓存获取
     const cached = getCachedProfile(account);
@@ -578,15 +686,28 @@ export function renderAvatarWithSWR(options) {
     // 后台静默校对并更新 DOM
     if (apiFn && containerId) {
         setTimeout(() => {
+            const container = document.getElementById(containerId);
+            if (!container || container.dataset.profileRender !== renderId) return;
             getProfileWithSWR(account, apiFn, (profile) => {
-                const container = document.getElementById(containerId);
-                if (!container) return;
+                if (!container.isConnected || document.getElementById(containerId) !== container
+                    || container.dataset.profileRender !== renderId) return;
                 
                 const avatarImg = container.querySelector('.swr-avatar');
                 const nameSpan = container.querySelector('.swr-name');
                 
                 if (avatarImg && profile.avatar) {
-                    avatarImg.src = profile.avatar;
+                    if (avatarImg.tagName === 'IMG') avatarImg.src = profile.avatar;
+                    else {
+                        const image = document.createElement('img');
+                        image.className = 'swr-avatar';
+                        image.alt = '';
+                        image.style.cssText = avatarImg.style.cssText;
+                        image.style.objectFit = 'cover';
+                        image.src = profile.avatar;
+                        avatarImg.replaceWith(image);
+                    }
+                } else if (avatarImg && avatarImg.tagName !== 'IMG' && profile.name) {
+                    avatarImg.textContent = Array.from(profile.name)[0]?.toUpperCase() || 'U';
                 }
                 if (nameSpan && profile.name) {
                     nameSpan.textContent = profile.name;
@@ -598,12 +719,12 @@ export function renderAvatarWithSWR(options) {
     // 生成初始 HTML（无头像时显示首字母背景）
     // 🔒 XSS防护：avatar/name/initial 均来自用户可修改的资料（昵称首字母可能是 < ），
     // 写入 HTML 前必须转义；上方 SWR 刷新路径用的是 .src / .textContent，本身就是安全的。
-    const initial = (name || account || 'U')[0].toUpperCase();
+    const initial = Array.from(String(name || account || 'U'))[0].toUpperCase();
     const avatarHtml = avatar 
-        ? `<img class="swr-avatar" src="${escapeHtml(avatar)}" style="width: ${avatarSize}px; height: ${avatarSize}px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #333;">` 
-        : `<div class="swr-avatar" style="width: ${avatarSize}px; height: ${avatarSize}px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: ${Math.floor(avatarSize * 0.5)}px; font-weight: bold; flex-shrink: 0;">${escapeHtml(initial)}</div>`;
+        ? `<img class="swr-avatar" alt="" src="${escapeHtml(avatar)}" style="width: ${safeSize}px; height: ${safeSize}px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #333;">`
+        : `<div class="swr-avatar" aria-hidden="true" style="width: ${safeSize}px; height: ${safeSize}px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: ${Math.floor(safeSize * 0.5)}px; font-weight: bold; flex-shrink: 0;">${escapeHtml(initial)}</div>`;
     
-    return `<span id="${escapeHtml(containerId)}" style="display: inline-flex; align-items: center; gap: 6px;">${avatarHtml}<span class="swr-name">${escapeHtml(name)}</span></span>`;
+    return `<span id="${escapeHtml(containerId)}" data-profile-render="${renderId}" style="display: inline-flex; align-items: center; gap: 6px;">${avatarHtml}<span class="swr-name">${escapeHtml(name)}</span></span>`;
 }
 
 
@@ -611,6 +732,7 @@ export function renderAvatarWithSWR(options) {
 // 📦 导出默认配置对象
 // ==========================================
 export default {
+    IMAGE_PROCESS,
     API,
     CACHE,
     PAGINATION,
@@ -632,3 +754,10 @@ export default {
     getProfileWithSWR,
     renderAvatarWithSWR
 };
+
+
+// 提示词定价输入边界，与云端 PromptCreate/PromptUpdate 对应。
+export const PROMPT_LIMITS = Object.freeze({ MAX_PRICE: 10000 });
+
+// 任务定价边界，与云端 task_publication/task_terms 对应。
+export const TASK_LIMITS = Object.freeze({ MAX_PRICE: 2147483647, MAX_REFERENCE_IMAGES: 6, DEPOSIT_RATIOS: Object.freeze([10, 20, 30, 50]) });

前端页面/core/榜单分页控制.js

@@ -0,0 +1,95 @@
+// 侧边栏分页控制：滚动加载与无滚动容器时的手动降级。
+import { createPaginationLoader } from "../components/性能优化工具.js";
+import { filterItemsByKeyword } from "./榜单本地查询.js";
+import { t } from "../components/用户体验增强.js";
+
+// ==========================================
+// 📜 设置分页加载器
+// ==========================================
+export function setupSidebarPagination(contentArea, state, pageSize, loadMoreData, keyword, tab, renderToken, getRenderToken) {
+    if (renderToken !== getRenderToken()) return;
+    // 安全清理旧分页器，防止状态残留和重复事件监听
+    if (state.loader) {
+        state.loader.stop();
+    }
+    state.loader = null;
+
+    // 获取滚动容器（侧边栏主容器）
+    const scrollContainer = contentArea.closest(".sidebar-scroll-container") || contentArea.parentElement;
+
+    if (!scrollContainer) {
+        console.warn("⚠️ 未找到滚动容器，分页加载无法启动");
+
+        // 添加手动加载按钮作为 fallback
+        let nextPage = 2;
+        let stopped = false;
+        const isCurrent = () => !stopped && renderToken === getRenderToken();
+        const loadMoreBtn = document.createElement('button');
+        loadMoreBtn.textContent = t('task.load_more');
+        loadMoreBtn.style.cssText = 'width:100%;padding:10px;margin-top:10px;cursor:pointer;border:1px solid #555;border-radius:6px;background:transparent;color:inherit;';
+        state.loader = { stop() {
+            stopped = true;
+            loadMoreBtn.onclick = null;
+            loadMoreBtn.disabled = true;
+        } };
+        loadMoreBtn.onclick = async () => {
+            if (!isCurrent()) return;
+            loadMoreBtn.disabled = true;
+            loadMoreBtn.textContent = t('common.loading');
+            try {
+                const result = await loadMoreData(nextPage, pageSize, { isCurrent });
+                if (!isCurrent()) return;
+                if (result && result.length > 0) {
+                    nextPage++;
+                    loadMoreBtn.textContent = t('task.load_more');
+                } else {
+                    loadMoreBtn.textContent = t('common.no_more');
+                    loadMoreBtn.style.cursor = 'default';
+                    loadMoreBtn.onclick = null;
+                }
+            } catch (err) {
+                if (!isCurrent()) return;
+                console.error("手动加载更多失败");
+                loadMoreBtn.textContent = t('task.load_failed');
+            }
+            loadMoreBtn.disabled = false;
+        };
+        contentArea.appendChild(loadMoreBtn);
+        return;
+    }
+
+    // 计算数据总量（考虑搜索过滤，创作者Tab有keyword时不进行本地过滤，因为后端已过滤）
+    // 📌 口径必须与 loadSidebarContent 内的 _applySearchScope 一致（先过滤再计数）；
+    // 本函数是模块级、拿不到那个闭包，故保留等价实现，改动其一务必同步另一处
+    const getTotalDataCount = () => {
+        if (!keyword) return state.allData.length;
+        // 创作者Tab后端搜索已过滤，直接返回全部数据
+        if (tab === "creators") return state.allData.length;
+        return filterItemsByKeyword(state.allData, keyword).length;
+    };
+
+    // 创建分页加载器
+    const loader = createPaginationLoader({
+        container: scrollContainer,
+        pageSize: pageSize,
+        threshold: 300,
+        t,
+        loadMore: async (page, size, { isCurrent: isLoaderCurrent = () => true } = {}) => {
+            const isCurrent = () => renderToken === getRenderToken() &&
+                state.loader === loader && isLoaderCurrent();
+            if (!isCurrent()) return [];
+            const totalCount = getTotalDataCount();
+
+            // 如果已显示完所有数据，返回空数组停止加载
+            if (state.displayedCount >= totalCount) {
+                return [];
+            }
+
+            return loadMoreData(page, size, { isCurrent });
+        },
+    });
+
+    state.loader = loader;
+    loader.start();
+}
+

前端页面/core/榜单分页状态.js

@@ -0,0 +1,39 @@
+// 仅管理榜单内存状态与分页器所有权，不读取存储或访问宿主。
+export function createSidebarPaginationStore() {
+    const states = new Map();
+    return {
+        get(tab, sort) {
+            const key = `${tab}_${sort}`;
+            if (!states.has(key)) {
+                states.set(key, {
+                    allData: [],
+                    displayedCount: 0,
+                    loader: null,
+                    isFullyLoaded: false,
+                    isSearchResult: false,
+                    searchKeyword: '',
+                });
+            }
+            return states.get(key);
+        },
+        findCompleteData(tab) {
+            for (const [key, state] of states) {
+                if (key.startsWith(`${tab}_`) && state.allData.length > 0 && state.isFullyLoaded) {
+                    return state.allData;
+                }
+            }
+            return null;
+        },
+        stopLoaders() {
+            let failure;
+            for (const state of states.values()) {
+                const loader = state.loader;
+                state.loader = null;
+                try { loader?.stop(); }
+                catch (error) { failure ??= error; }
+            }
+            // 单个停止失败也必须继续清理其它分页器，随后交回调用方处理。
+            if (failure) throw failure;
+        },
+    };
+}

前端页面/core/榜单数据来源.js

@@ -0,0 +1,71 @@
+import { api, requestCancelManager } from './网络请求API.js';
+import { API, CACHE, PAGINATION } from './全局配置.js';
+import { requireListResponseData, getCacheWithMeta, removeCache } from '../components/性能优化工具.js';
+
+const itemTypes = Object.freeze({ tools: 'tool', skills: 'skill', apps: 'app', recommends: 'recommend' });
+
+// 只读取与校验，不提交视图状态或缓存；提交时由调用方核查界面代次。
+export async function fetchSidebarList({ tab, sort, keyword = '', force = false, background = false }) {
+    const options = background
+        ? { noCache: true, timeout: API.BACKGROUND_TIMEOUT, retries: API.BACKGROUND_RETRIES }
+        : (force ? { noCache: true } : {});
+    let response;
+    if (Object.hasOwn(itemTypes, tab)) {
+        response = await api.getItems(itemTypes[tab], sort, PAGINATION.SIDEBAR_ITEM_FETCH_LIMIT, options);
+    } else if (tab === 'creators') {
+        if (keyword) {
+            requestCancelManager.cancelAll(API.SEARCH_COMPONENT_ID);
+            response = await api.searchCreators(keyword, sort, PAGINATION.SIDEBAR_CREATOR_SEARCH_LIMIT, options);
+        } else {
+            response = await api.getCreators(sort, PAGINATION.SIDEBAR_CREATOR_FETCH_LIMIT, options);
+        }
+    } else {
+        throw new TypeError('Unsupported sidebar list');
+    }
+    return requireListResponseData(response);
+}
+
+function validCreatorList(data) {
+    try { requireListResponseData({ status: 'success', data }); }
+    catch { return false; }
+    return data.every(item => ['name', 'account', 'shortDesc'].every(key =>
+        item[key] == null || typeof item[key] === 'string'));
+}
+
+export function readSidebarListCache(key, { creators = false } = {}) {
+    const miss = { found: false, expired: true, value: null };
+    let metadata;
+    try {
+        metadata = getCacheWithMeta(key, true); // 过期副本仍可显示。
+        if (!metadata.found) return metadata;
+    } catch { return miss; } // 读取失败不代表数据损坏，不删除未知副本。
+    try {
+        requireListResponseData({ status: 'success', data: metadata.value });
+        if (!creators || validCreatorList(metadata.value)) return metadata;
+    } catch { /* 确定无效的列表不进入代理、排序或视图状态。 */ }
+    try { removeCache(key); }
+    catch { /* 删除失败仍按未命中处理，避免损坏内容阻断界面。 */ }
+    return miss;
+}
+
+export function readCreatorsSessionCache() {
+    let raw;
+    try { raw = sessionStorage.getItem(CACHE.LOCAL_KEYS.CREATORS_SESSION); }
+    catch { return null; } // 无法读取不等于损坏，保留未知内容。
+    if (raw === null) return null;
+    try {
+        const data = JSON.parse(raw);
+        if (validCreatorList(data)) return data;
+    } catch { /* 仅已读到的损坏记录可尝试删除。 */ }
+    try { sessionStorage.removeItem(CACHE.LOCAL_KEYS.CREATORS_SESSION); }
+    catch { /* 无法删除不阻断界面。 */ }
+    return null;
+}
+
+export function writeCreatorsSessionCache(data) {
+    if (!validCreatorList(data)) return false;
+    try {
+        sessionStorage.setItem(CACHE.LOCAL_KEYS.CREATORS_SESSION, JSON.stringify(data));
+        return true;
+    } catch { return false; }
+}

前端页面/core/榜单本地查询.js

@@ -0,0 +1,99 @@
+// 本地榜单查询：不依赖 DOM、存储、网络或图片代理。
+// 保留数据引擎原有排序/搜索规则；仅缓存最近一次排序的数组引用。
+
+let _lastSortInput = null;
+let _lastSortKey = '';
+let _lastSortResult = null;
+
+export function sortDataLocally(data, tab, sort) {
+    const sortKey = `${tab}_${sort}`;
+    // 如果源数据引用相同且排序参数相同，返回缓存结果（避免重复创建数组拷贝）
+    if (data === _lastSortInput && sortKey === _lastSortKey && _lastSortResult) {
+        return _lastSortResult;
+    }
+
+    const sorted = [...data]; // 不修改原数组
+
+    if (tab === "creators") {
+        // 创作者排序（与后端 get_creators 一致）
+        switch (sort) {
+            case "likes": sorted.sort((a, b) => (b.likes || 0) - (a.likes || 0)); break;
+            case "favorites": sorted.sort((a, b) => (b.favorites || 0) - (a.favorites || 0)); break;
+            case "downloads": sorted.sort((a, b) => (b.downloads || 0) - (a.downloads || 0)); break;
+            case "tips": sorted.sort((a, b) => (b.recent_tips || 0) - (a.recent_tips || 0)); break;
+            case "views": sorted.sort((a, b) => (b.views || 0) - (a.views || 0)); break;
+            case "daily_views": sorted.sort((a, b) => (b.daily_views || 0) - (a.daily_views || 0)); break;
+            default: sorted.sort((a, b) => (b.created_at || 0) - (a.created_at || 0)); break; // time
+        }
+    } else {
+        // 工具/Skill/应用/推荐排序（与后端 get_items 一致）
+        switch (sort) {
+            case "downloads": sorted.sort((a, b) => (b.uses || 0) - (a.uses || 0)); break;
+            case "likes": sorted.sort((a, b) => (b.likes || 0) - (a.likes || 0)); break;
+            case "favorites": sorted.sort((a, b) => (b.favorites || 0) - (a.favorites || 0)); break;
+            case "tips":
+                // 后端使用 tip_history 的当月数据排序
+                sorted.sort((a, b) => {
+                    const now = new Date();
+                    const currentMonth = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+                    const tipA = (a.tip_history || {})[currentMonth] || 0;
+                    const tipB = (b.tip_history || {})[currentMonth] || 0;
+                    return tipB - tipA;
+                });
+                break;
+            case "views": sorted.sort((a, b) => (b.views || 0) - (a.views || 0)); break;
+            case "daily_views": sorted.sort((a, b) => (b.daily_views || 0) - (a.daily_views || 0)); break;
+            case "rating":
+                sorted.sort((a, b) => {
+                    const ratingA = a.rating_avg || 0;
+                    const ratingB = b.rating_avg || 0;
+                    if (ratingA === ratingB) {
+                        return (b.rating_count || 0) - (a.rating_count || 0);
+                    }
+                    return ratingB - ratingA;
+                });
+                break;
+            default: sorted.sort((a, b) => (b.created_at || 0) - (a.created_at || 0)); break; // time
+        }
+    }
+
+    // 缓存本次排序结果
+    _lastSortInput = data;
+    _lastSortKey = sortKey;
+    _lastSortResult = sorted;
+    return sorted;
+}
+
+/**
+ * 按关键词过滤列表数据（工具/应用/推荐Tab本地搜索）
+ * @param {Array} items - 数据数组
+ * @param {string} keyword - 搜索关键词
+ * @returns {Array} 过滤后的数据
+ */
+export function filterItemsByKeyword(items, keyword) {
+    const lowerKeyword = keyword.toLowerCase();
+    return items.filter(item => {
+        const textStr = `${item.title||''} ${item.shortDesc||''} ${item.name||''} ${item.account||''}`.toLowerCase();
+        return textStr.includes(lowerKeyword);
+    });
+}
+
+/**
+ * 本地搜索创作者数据
+ * @param {string} keyword - 搜索关键词
+ * @param {Array} data - 创作者数据数组
+ * @returns {Array} 匹配的数据
+ */
+export function searchCreatorsLocally(keyword, data) {
+    const lowerKeyword = keyword.toLowerCase();
+    return data.filter(item => {
+        const name = (item.name || '').toLowerCase();
+        const account = (item.account || '').toLowerCase();
+        const shortDesc = (item.shortDesc || '').toLowerCase();
+        return name.includes(lowerKeyword) ||
+               account.includes(lowerKeyword) ||
+               shortDesc.includes(lowerKeyword);
+    });
+}
+
+

前端页面/core/榜单视图切换.js

@@ -0,0 +1,49 @@
+import { t } from '../components/用户体验增强.js';
+
+function cleanupView(view) {
+    try { view._cleanup?.(); }
+    catch { console.warn('Sidebar view cleanup failed'); }
+}
+
+// 业务视图仍负责自己的请求/事件；此边界负责原容器的挂载与代次。
+export async function mountSidebarDomainView({
+    contentArea, currentUser, keyword, renderToken, getRenderToken,
+    loadModule, factory, errorKey, afterMount,
+}) {
+    const isCurrent = () => renderToken === getRenderToken();
+    if (!isCurrent()) return;
+    let cleaned = false;
+    let view;
+    const cleanupOld = () => {
+        if (cleaned) return;
+        cleaned = true;
+        Array.from(contentArea.children).forEach(cleanupView);
+    };
+    try {
+        const module = await loadModule();
+        if (!isCurrent()) return;
+        cleanupOld();
+        if (!isCurrent()) return;
+        view = module[factory](currentUser, keyword);
+        if (!isCurrent()) {
+            cleanupView(view);
+            return;
+        }
+        contentArea.innerHTML = '';
+        contentArea.appendChild(view);
+        afterMount?.(module);
+    } catch {
+        if (!isCurrent()) return;
+        cleanupOld();
+        if (view) cleanupView(view);
+        if (!isCurrent()) return;
+        // 不输出异常原文，可能包含远端正文、路径或凭据。
+        console.error('Sidebar view load failed');
+        contentArea.innerHTML = '';
+        const error = document.createElement('div');
+        error.setAttribute('role', 'alert');
+        error.style.cssText = 'text-align:center; padding: 40px 20px; color:#F44336;';
+        error.textContent = `❌ ${t(errorKey)}`;
+        contentArea.appendChild(error);
+    }
+}

前端页面/core/状态管理.js

@@ -21,9 +21,20 @@
  * @typedef {import('./类型定义.js').WalletData} WalletData
  */
 
+import { readUserSession, writeUserSession, sessionProfile } from "./用户会话存储.js";
 import { API, CACHE } from "./全局配置.js";
 import { clearSensitiveCache, clearAllCache } from "../components/性能优化工具.js";
 
+function safeRemoveStorageItem(storageKind, key) {
+    try {
+        const storage = storageKind === 'session' ? window.sessionStorage : window.localStorage;
+        storage.removeItem(key);
+        return true;
+    } catch (_) {
+        return false;
+    }
+}
+
 
 // ==========================================
 // 📦 状态存储
@@ -124,7 +135,7 @@ const eventBus = {
                 try {
                     callback(data);
                 } catch (error) {
-                    console.error(`事件处理错误 [${event}]:`, error);
+                    console.error('事件处理错误，继续通知其它订阅者。');
                 }
             });
         }
@@ -203,28 +214,14 @@ function _createUserState(userData, token) {
 /**
  * 初始化用户状态（从本地存储恢复）
  */
+function sessionStorages() {
+    return ['localStorage', 'sessionStorage'].map(name => { try { return window[name]; } catch (_) { return null; } });
+}
+
 export function initUserState() {
-    try {
-        // 尝试从 localStorage 恢复
-        const userStr = localStorage.getItem(CACHE.LEGACY_KEYS.USER);
-        const token = localStorage.getItem(CACHE.LEGACY_KEYS.TOKEN);
-        
-        if (userStr && token) {
-            const userData = JSON.parse(userStr);
-            state.user = _createUserState(userData, token);
-        } else {
-            // 尝试从 sessionStorage 恢复
-            const sessionUserStr = sessionStorage.getItem(CACHE.LEGACY_KEYS.USER);
-            const sessionToken = sessionStorage.getItem(CACHE.LEGACY_KEYS.TOKEN);
-            
-            if (sessionUserStr && sessionToken) {
-                const userData = JSON.parse(sessionUserStr);
-                state.user = _createUserState(userData, sessionToken);
-            }
-        }
-    } catch (error) {
-        console.warn("用户状态恢复失败:", error);
-    }
+    const session = readUserSession(sessionStorages(), CACHE.LEGACY_KEYS);
+    state.user = session ? _createUserState(session.user, session.token)
+        : { isLoggedIn: false, account: null, name: null, avatar: null, token: null, wallet: null };
 }
 
 /**
@@ -234,15 +231,14 @@ export function initUserState() {
  * @param {boolean} remember - 是否记住登录
  */
 export function setUser(userData, token, remember = true) {
-    state.user = _createUserState(userData, token);
-    
-    // 持久化存储
-    const storage = remember ? localStorage : sessionStorage;
-    storage.setItem(CACHE.LEGACY_KEYS.USER, JSON.stringify(userData));
-    storage.setItem(CACHE.LEGACY_KEYS.TOKEN, token);
-    
-    // 触发事件
+    let profile;
+    try {
+        profile = writeUserSession(sessionStorages(), CACHE.LEGACY_KEYS, userData, token, remember,
+            Date.now() + (remember ? CACHE.SESSION_REMEMBER_TTL : CACHE.SESSION_TEMP_TTL));
+    } catch (error) { logout(); throw error; }
+    state.user = _createUserState(profile, token);
     eventBus.emit(EVENTS.USER_LOGIN, state.user);
+    return profile;
 }
 
 /**
@@ -274,20 +270,19 @@ export function getToken() {
  * @param {Object} updates - 更新的字段
  */
 export function updateUser(updates) {
-    Object.assign(state.user, updates);
-    
-    // 更新持久化存储
-    const userStr = localStorage.getItem(CACHE.LEGACY_KEYS.USER) || 
-                    sessionStorage.getItem(CACHE.LEGACY_KEYS.USER);
-    if (userStr) {
+    if (!state.user.isLoggedIn) return;
+    const storages = sessionStorages();
+    const session = readUserSession(storages, CACHE.LEGACY_KEYS);
+    if (!session || session.user.account !== state.user.account || session.token !== state.user.token) return;
+    const profile = sessionProfile({ ...session.user, ...updates, account: session.user.account });
+    state.user = _createUserState(profile, session.token);
+    for (const storage of storages) {
         try {
-            const userData = JSON.parse(userStr);
-            Object.assign(userData, updates);
-            const storage = localStorage.getItem(CACHE.LEGACY_KEYS.USER) ? localStorage : sessionStorage;
-            storage.setItem(CACHE.LEGACY_KEYS.USER, JSON.stringify(userData));
-        } catch {}
+            if (storage?.getItem(CACHE.LEGACY_KEYS.TOKEN) === session.token) {
+                storage.setItem(CACHE.LEGACY_KEYS.USER, JSON.stringify({ user: profile, expireAt: session.expireAt }));
+            }
+        } catch (_) {}
     }
-    
     eventBus.emit(EVENTS.USER_UPDATE, state.user);
 }
 
@@ -310,11 +305,16 @@ export function logout() {
     // 清除敏感数据内存缓存
     clearSensitiveCache();
 
-    // 清除存储
-    localStorage.removeItem(CACHE.LEGACY_KEYS.USER);
-    localStorage.removeItem(CACHE.LEGACY_KEYS.TOKEN);
-    sessionStorage.removeItem(CACHE.LEGACY_KEYS.USER);
-    sessionStorage.removeItem(CACHE.LEGACY_KEYS.TOKEN);
+    // 清除存储；即使浏览器禁用了 Storage，也必须完成内存登出与事件广播。
+    let storageCleanupFailed = false;
+    for (const [storageKind, key] of [
+        ['local', CACHE.LEGACY_KEYS.USER],
+        ['local', CACHE.LEGACY_KEYS.TOKEN],
+        ['session', CACHE.LEGACY_KEYS.USER],
+        ['session', CACHE.LEGACY_KEYS.TOKEN]
+    ]) {
+        if (!safeRemoveStorageItem(storageKind, key)) storageCleanupFailed = true;
+    }
 
     // 清除资源安装版本戳（ComfyCommunity_LocalVer_*）
     // 避免切换账号后残留的版本戳导致详情页按钮状态错误
@@ -327,10 +327,12 @@ export function logout() {
             }
         }
         keysToRemove.forEach(key => localStorage.removeItem(key));
-    } catch (e) {
-        console.warn('清除版本戳缓存失败:', e);
+    } catch (_) {
+        storageCleanupFailed = true;
     }
 
+    if (storageCleanupFailed) console.warn('浏览器存储不可用，部分登出缓存无法清理；内存会话已清除。');
+
     eventBus.emit(EVENTS.USER_LOGOUT);
 }
 
@@ -343,17 +345,21 @@ export function logout() {
 export function logoutAndClearUserData(account = null) {
     // 清除当前账号的 Profile 级缓存
     if (account) {
-        localStorage.removeItem(`ComfyCommunity_ProfileCache_${account}`);
-        localStorage.removeItem(`ComfyRanking_SidebarBackground_${account}`);
-        localStorage.removeItem(`ComfyRanking_ProfileBannerCache_${account}`);
+        safeRemoveStorageItem('local', `ComfyCommunity_ProfileCache_${account}`);
+        safeRemoveStorageItem('local', `ComfyRanking_SidebarBackground_${account}`);
+        safeRemoveStorageItem('local', `ComfyRanking_ProfileBannerCache_${account}`);
     }
     // 清除通用用户数据缓存（列表/聊天记录/通知）
-    localStorage.removeItem("ComfyCommunity_ListCache");
-    localStorage.removeItem("ComfyCommunity_ChatHistory");
-    localStorage.removeItem("ComfyRanking_Notifications");
-    localStorage.removeItem("ComfyRanking_ChatList");
+    safeRemoveStorageItem('local', "ComfyCommunity_ListCache");
+    safeRemoveStorageItem('local', "ComfyCommunity_ChatHistory");
+    safeRemoveStorageItem('local', "ComfyRanking_Notifications");
+    safeRemoveStorageItem('local', "ComfyRanking_ChatList");
     // 清除所有 ComfyRanking_ 前缀的数据缓存与内存敏感数据
-    clearAllCache();
+    try {
+        clearAllCache();
+    } catch (error) {
+        console.warn('清除持久化缓存失败，继续完成内存登出。');
+    }
     // logout() 内部已含 clearSensitiveCache 与 Token/User/版本戳清理
     logout();
 }
@@ -465,7 +471,7 @@ export function setNetworkStatus(online) {
 
 /**
  * 检查是否在线
- * 
+ *
  * 注意：navigator.onLine 仅反映本机网络接口状态，不代表云端服务可达；
  * 云端可达性请一律改问 isCloudReachable()（见下方段落）。
  * @returns {boolean}
@@ -505,14 +511,14 @@ export function isCloudReachable() {
 
 /**
  * 标记云端不可达，进入冷却
- * @param {string} [reason] - 仅用于日志定位（如失败的 endpoint）
+ * @param {string} [reason] - 保留调用兼容；不输出可能含私有信息的失败原因
  */
 export function markCloudDown(reason = '') {
     const wasReachable = isCloudReachable();
     state.network.cloudDownUntil = Date.now() + API.CLOUD_DOWN_COOLDOWN;
     // 只在「可达 → 不可达」的跃迁时打一条日志：冷却期内的重复失败不再刷屏
     if (wasReachable) {
-        console.warn(`☁️ 云端不可达，${API.CLOUD_DOWN_COOLDOWN / 1000} 秒内不再联网${reason ? `（${reason}）` : ''}`);
+        console.warn(`☁️ 云端不可达，${API.CLOUD_DOWN_COOLDOWN / 1000} 秒内不再联网`);
     }
 }
 

前端页面/core/用户会话存储.js

@@ -0,0 +1,45 @@
+import { normalizeProfileData } from '../profile/个人资料工具.js';
+
+/** 持久化只保留资料字段；钱包、凭证和未知字段不能混入用户记录。 */
+export function sessionProfile(value) {
+    if (!value || typeof value.account !== 'string' || !value.account.trim()) throw new Error('Invalid user session');
+    const profile = normalizeProfileData(value, value.account, true);
+    for (const key of ['balance', 'earn_balance', 'tip_balance', 'task_balance', 'frozen_balance', 'total_withdrawn']) delete profile[key];
+    return profile;
+}
+
+export function readUserSession(storages, keys, now = Date.now()) {
+    for (const storage of storages) {
+        try {
+            const raw = storage?.getItem(keys.USER), token = storage?.getItem(keys.TOKEN);
+            if (!raw || typeof token !== 'string' || !token.trim()) continue;
+            const saved = JSON.parse(raw);
+            if (saved.expireAt !== undefined && (!Number.isFinite(saved.expireAt) || saved.expireAt <= now)) {
+                storage.removeItem(keys.USER); storage.removeItem(keys.TOKEN); continue;
+            }
+            return { user: sessionProfile(saved.user || saved), token, expireAt: saved.expireAt };
+        } catch (_) {}
+    }
+    return null;
+}
+
+export function writeUserSession(storages, keys, user, token, remember, expireAt) {
+    const profile = sessionProfile(user);
+    if (typeof token !== 'string' || !token.trim() || !Number.isFinite(expireAt)) throw new Error('Invalid user session');
+    const selected = storages[remember ? 0 : 1];
+    // 清除另一个登录方式的旧凭证，再发布完整的新记录。失败不能继续创建混合身份。
+    try {
+        for (const storage of storages) {
+            if (!storage) throw new Error('Unavailable storage');
+            storage.removeItem(keys.USER); storage.removeItem(keys.TOKEN);
+        }
+        selected.setItem(keys.USER, JSON.stringify({ user: profile, expireAt }));
+        selected.setItem(keys.TOKEN, token);
+    } catch (_) {
+        for (const storage of storages) {
+            try { storage?.removeItem(keys.USER); storage?.removeItem(keys.TOKEN); } catch (_) {}
+        }
+        throw new Error('Session storage unavailable');
+    }
+    return profile;
+}

前端页面/core/网络请求API.js

@@ -13,6 +13,6 @@
 //    readListCache / writeListCache）不在这里，统一从 components/性能优化工具.js 导入。
 // ==========================================
 
-export { request, requestCancelManager, invalidateRelatedCache, requestSSE } from './网络请求_基础设施.js';
+export { request, captureRequestSession, requestCancelManager, invalidateRelatedCache, requestSSE } from './网络请求_基础设施.js';
 export { proxyImages, unproxyImages } from './网络请求_图片代理.js';
 export { api } from './网络请求_业务API.js';

前端页面/core/网络请求_业务API.js

@@ -9,6 +9,14 @@
 
 import { request } from "./网络请求_基础设施.js";
 import { API } from "./全局配置.js";
+import { t } from "../components/用户体验_国际化.js";
+import { removeCache } from "./网络请求_缓存管理.js";
+
+function publicationHeaders(options) {
+    if (options?.publicationId === undefined) return undefined;
+    if (typeof options.publicationId !== 'string' || !/^[0-9a-f]{32}$/.test(options.publicationId)) throw new Error('Invalid publication identity');
+    return { 'Idempotency-Key': options.publicationId };
+}
 
 // ============== 业务 API 导出 ==============
 const api = {
@@ -42,35 +50,34 @@ const api = {
 
         // 4. 🚨 终极拦截门：如果到了这一步数据还是没找齐，直接弹窗指认"内鬼"！
         if (!payload.account || !payload.new_password || !payload.verifyContact || !payload.code) {
-            const errorStr = JSON.stringify(payload, null, 2);
-            console.warn(`🚨 发现前端传参严重丢失！系统拼命搜刮后只拿到了这些数据: ${errorStr} 请立即检查【顶部导航组件.js】的第 82 行！必须把完整的表单数据传给 API，例如: api.resetPassword({account, password, email, code})`);
-            throw new Error("被前端参数拦截装甲阻断：数据不完整");
+            console.warn("密码重置请求缺少必要字段");
+            throw new Error(t('auth.form_data_incomplete'));
         }
 
         return request("/api/users/reset_password", { method: "POST", body: payload }); 
     },
 
-    async getUserProfile(account) { return request(`/api/users/${account}`); },
+    async getUserProfile(account, options = {}) { return request(`/api/users/${account}`, options); },
     async updateUserProfile(account, data) { return request(`/api/users/${account}`, { method: "PUT", body: data }); },
     async updatePrivacy(account, privacy) { return request(`/api/users/${account}/privacy`, { method: "PUT", body: privacy }); },
     async toggleFollow(userId, targetAccount, isActive) { return request("/api/users/follow", { method: "POST", body: { user_id: userId, target_account: targetAccount, is_active: isActive } }); },
-    async getCreators(sort, limit) { return request(`/api/creators?sort=${sort}&limit=${limit}`); },
+    async getCreators(sort, limit, options = {}) { return request(`/api/creators?sort=${sort}&limit=${limit}`, options); },
     // 🔍 带上取消分组 ID：用户继续输入时，上一次仍在途的搜索请求可被 requestCancelManager 撤销，
     // 不再占用并发额度与超时预算（调用时机见 侧边栏数据引擎.js 的创作者搜索分支）
-    async searchCreators(keyword, sort, limit = 50) { return request(`/api/creators/search?keyword=${encodeURIComponent(keyword)}&sort=${sort}&limit=${limit}`, { componentId: API.SEARCH_COMPONENT_ID }); },
+    async searchCreators(keyword, sort, limit = 50, options = {}) { return request(`/api/creators/search?keyword=${encodeURIComponent(keyword)}&sort=${sort}&limit=${limit}`, { componentId: API.SEARCH_COMPONENT_ID, ...options }); },
     async getCreatorDetails(account) { return request(`/api/creators/${account}/details`); },
     async uploadFile(file, fileType, timeout = 120000) {
         const formData = new FormData();
         formData.append("file", file);
         formData.append("file_type", fileType);
-        return request("/api/upload", { method: "POST", body: formData, timeout, retries: 2 });
+        return request("/api/upload", { method: "POST", body: formData, timeout, retries: 0 });
     },
     async publishItem(data) { return request("/api/items", { method: "POST", body: data }); },
     // NOTE: author 未 encodeURIComponent，与 assignee/account 等编码不一致；
     // 但 account 通常为纯字母数字，不影响功能，暂不改动以避免破坏线上缓存匹配
     async updateItem(itemId, author, data) { return request(`/api/items/${itemId}?author=${author}`, { method: "PUT", body: data }); },
-    async getItems(type, sort, limit) { return request(`/api/items?type=${type}&sort=${sort}&limit=${limit}`); },
-    async getItemById(itemId) { return request(`/api/items/${itemId}`); },
+    async getItems(type, sort, limit, options = {}) { return request(`/api/items?type=${type}&sort=${sort}&limit=${limit}`, options); },
+    async getItemById(itemId, options = {}) { return request(`/api/items/${itemId}`, options); },
     async deleteItem(itemId) { return request(`/api/items/${itemId}`, { method: "DELETE" }); },
     async recordItemUse(itemId) { return request(`/api/items/${itemId}/use`, { method: "POST" }); },
     async recordItemView(itemId) { return request(`/api/items/${itemId}/view`, { method: "POST" }); },
@@ -93,13 +100,13 @@ const api = {
     async toggleInteraction(itemId, userId, actionType, isActive) { return request("/api/interactions/toggle", { method: "POST", body: { item_id: itemId, user_id: userId, action_type: actionType, is_active: isActive } }); },
     async postComment(itemId, author, content, replyTo = null, parentId = null) { return request("/api/comments", { method: "POST", body: { item_id: itemId, author, content, reply_to_user: replyTo, parent_id: parentId } }); },
     async deleteComment(itemId, commentId) { return request(`/api/comments/${itemId}/${commentId}`, { method: "DELETE" }); },
-    async getMessages(account) { return request(`/api/messages/${account}`); },
+    async getMessages(account, options = {}) { return request(`/api/messages/${account}`, options); },
     // 🔥 新增：轻量级获取未读消息数量（不标记已读，用于轮询红点）
     async getUnreadCount(account) { return request(`/api/messages/${account}?count_only=true`); },
     async markMessagesRead(account) { return request(`/api/messages/${account}/read`, { method: "POST" }); },
     async sendPrivateMessage(sender, receiver, content) { return request("/api/messages/private", { method: "POST", body: { sender, receiver, content } }); },
-    async getChatList(account) { return request(`/api/chats/${account}`); },
-    async getChatHistory(account, targetAccount) { return request(`/api/chats/${account}/${targetAccount}`); },
+    async getChatList(account, options = {}) { return request(`/api/chats/${account}`, options); },
+    async getChatHistory(account, targetAccount, options = {}) { return request(`/api/chats/${account}/${targetAccount}`, options); },
     async getWallet(account, options = {}) { return request(`/api/wallet/${account}`, options); },
 
     // 🛒 获取用户购买记录（从云端 ownerships 表）
@@ -139,33 +146,35 @@ const api = {
             body: { sender_account: senderAccount, target_account: targetAccount, amount: amount, is_anonymous: isAnonymous, item_id: itemId } 
         }); 
     }, 
-    async purchaseItem(account, itemId) {
+    async purchaseItem(account, itemId, expectedPrice) {
         // 🐛 Bug修复：防御性校验，防止 itemId 为空导致请求 /purchase/undefined
         if (!itemId) {
             console.warn('⚠️ purchaseItem: itemId 为空，已拦截无效请求');
             return { success: false, error: 'itemId 不能为空' };
         }
-        return request("/api/wallet/purchase", { method: "POST", body: { account: account, item_id: itemId } });
+        const body = { account, item_id: itemId };
+        if (expectedPrice !== undefined) body.expected_price = expectedPrice;
+        return request("/api/wallet/purchase", { method: "POST", body });
     },
     async submitWithdraw(data) { return request("/api/wallet/withdraw", { method: "POST", body: data }); },
 
     // ==========================================
     // 💬 讨论区 API
     // ==========================================
-    async getPosts(page = 1, limit = 20, sort = "latest") {
-        return request(`/api/posts?page=${page}&limit=${limit}&sort=${sort}`);
+    async getPosts(page = 1, limit = 20, sort = "latest", options = {}) {
+        return request(`/api/posts?page=${page}&limit=${limit}&sort=${sort}`, options);
     },
-    async getPostDetail(postId) { 
-        return request(`/api/posts/${postId}`); 
+    async getPostDetail(postId, options = {}) {
+        return request(`/api/posts/${postId}`, options);
     },
-    async createPost(data) { 
-        return request("/api/posts", { method: "POST", body: data }); 
+    async createPost(data, options = {}) {
+        return request("/api/posts", { method: "POST", body: data, headers: publicationHeaders(options) });
     },
     async updatePost(postId, data) { 
-        return request(`/api/posts/${postId}`, { method: "PUT", body: data }); 
+        return request(`/api/posts/${postId}`, { method: "PUT", body: data });
     },
     async deletePost(postId) { 
-        return request(`/api/posts/${postId}`, { method: "DELETE" }); 
+        return request(`/api/posts/${postId}`, { method: "DELETE" });
     },
     async togglePostLike(postId) { 
         return request(`/api/posts/${postId}/like`, { method: "POST" }); 
@@ -176,8 +185,8 @@ const api = {
     async tipPost(postId, amount, isAnon = false) { 
         return request(`/api/posts/${postId}/tip?amount=${amount}&is_anon=${isAnon}`, { method: "POST" }); 
     },
-    async getPostComments(postId) { 
-        return request(`/api/posts/${postId}/comments`); 
+    async getPostComments(postId, options = {}) {
+        return request(`/api/posts/${postId}/comments`, options);
     },
     async addPostComment(postId, content) { 
         return request(`/api/posts/${postId}/comments?content=${encodeURIComponent(content)}`, { method: "POST" }); 
@@ -189,17 +198,17 @@ const api = {
     // ==========================================
     // ✨ 提示词市场 API
     // ==========================================
-    async getPrompts(promptType = null, category = null, page = 1, limit = 20, sort = "latest") {
+    async getPrompts(promptType = null, category = null, page = 1, limit = 20, sort = "latest", options = {}) {
         let url = `/api/prompts?page=${page}&limit=${limit}&sort=${sort}`;
         if (promptType) url += `&prompt_type=${promptType}`;
         if (category) url += `&category=${encodeURIComponent(category)}`;
-        return request(url);
+        return request(url, options);
     },
-    async getPromptDetail(promptId) {
-        return request(`/api/prompts/${promptId}`);
+    async getPromptDetail(promptId, options = {}) {
+        return request(`/api/prompts/${promptId}`, options);
     },
-    async createPrompt(data) {
-        return request("/api/prompts", { method: "POST", body: data });
+    async createPrompt(data, options = {}) {
+        return request("/api/prompts", { method: "POST", body: data, headers: publicationHeaders(options) });
     },
     async updatePrompt(promptId, data) {
         return request(`/api/prompts/${promptId}`, { method: "PUT", body: data });
@@ -216,8 +225,8 @@ const api = {
     async tipPrompt(promptId, amount, isAnon = false) {
         return request(`/api/prompts/${promptId}/tip?amount=${amount}&is_anon=${isAnon}`, { method: "POST" });
     },
-    async getPromptComments(promptId) {
-        return request(`/api/prompts/${promptId}/comments`);
+    async getPromptComments(promptId, options = {}) {
+        return request(`/api/prompts/${promptId}/comments`, options);
     },
     async addPromptComment(promptId, content) {
         return request(`/api/prompts/${promptId}/comments?content=${encodeURIComponent(content)}`, { method: "POST" });
@@ -225,13 +234,15 @@ const api = {
     async recordPromptView(promptId) {
         return request(`/api/prompts/${promptId}/view`, { method: "POST" });
     },
-    async purchasePrompt(promptId) {
+    async purchasePrompt(promptId, expectedPrice) {
         // 🐛 防御性校验，防止 promptId 为空导致请求 /purchase/undefined
         if (!promptId) {
             console.warn('⚠️ purchasePrompt: promptId 为空，已拦截无效请求');
             return { success: false, error: 'promptId 不能为空' };
         }
-        return request(`/api/prompts/${promptId}/purchase`, { method: "POST" });
+        const options = { method: "POST" };
+        if (expectedPrice !== undefined) options.body = { expected_price: expectedPrice };
+        return request(`/api/prompts/${promptId}/purchase`, options);
     },
     async getMyPrompts() {
         return request("/api/my-prompts");
@@ -248,13 +259,14 @@ const api = {
     // ==========================================
     // 📝 任务榜 API
     // ==========================================
-    async getTasks(page = 1, limit = 20, status = null, sort = "latest") {
+    async getTasks(page = 1, limit = 20, status = null, sort = "latest", options = {}) {
         let url = `/api/tasks?page=${page}&limit=${limit}&sort=${sort}`;
         if (status) url += `&status=${status}`;
-        return request(url);
+        return request(url, options);
     },
-    async getTaskDetail(taskId) {
-        return request(`/api/tasks/${taskId}`);
+    async getTaskDetail(taskId, options = {}) {
+        removeCache(`api_/api/tasks/${taskId}`);
+        return request(`/api/tasks/${taskId}`, { ...options, noStore: true });
     },
     async createTask(data) {
         return request("/api/tasks", { method: "POST", body: data });
@@ -307,8 +319,8 @@ const api = {
     async tipTask(taskId, amount, isAnon = false) {
         return request(`/api/tasks/${taskId}/tip?amount=${amount}&is_anon=${isAnon}`, { method: "POST" });
     },
-    async getTaskComments(taskId) {
-        return request(`/api/tasks/${taskId}/comments`);
+    async getTaskComments(taskId, options = {}) {
+        return request(`/api/tasks/${taskId}/comments`, options);
     },
     async addTaskComment(taskId, content) {
         return request(`/api/tasks/${taskId}/comments?content=${encodeURIComponent(content)}`, { method: "POST" });
@@ -317,8 +329,8 @@ const api = {
     // ==========================================
     // ⚖️ 申诉仲裁 API
     // ==========================================
-    async getDisputeDetail(disputeId) {
-        return request(`/api/disputes/${disputeId}`);
+    async getDisputeDetail(disputeId, options = {}) {
+        return request(`/api/disputes/${disputeId}`, options);
     },
     async respondDispute(disputeId, response, evidence = null) {
         return request(`/api/disputes/${disputeId}/respond`, {
@@ -330,8 +342,8 @@ const api = {
     // ==========================================
     // 🔄 P7后悔模式：退款API
     // ==========================================
-    async getPurchaseStatus(account, itemId) {
-        return request(`/api/wallet/${account}/purchase/${itemId}`);
+    async getPurchaseStatus(account, itemId, options = {}) {
+        return request(`/api/wallet/${account}/purchase/${itemId}`, options);
     },
     async requestRefund(account, itemId) {
         return request(`/api/wallet/refund?account=${encodeURIComponent(account)}&item_id=${encodeURIComponent(itemId)}`, {

前端页面/core/网络请求_基础设施.js

@@ -11,8 +11,8 @@
 
 import { removeCache, getCacheWithMeta } from "../components/性能优化工具.js";
 import { API, CACHE } from "./全局配置.js";
-import { logoutAndClearUserData, isOnline, isCloudReachable, markCloudDown, markCloudUp } from "./状态管理.js";
-import { CACHE_CONFIG, CACHE_INVALIDATION_MAP, invalidateRelatedCache, _getCacheTTL, getCache, setCache } from "./网络请求_缓存管理.js";
+import { eventBus, EVENTS, logoutAndClearUserData, isOnline, isCloudReachable, markCloudDown, markCloudUp } from "./状态管理.js";
+import { CACHE_CONFIG, CACHE_INVALIDATION_MAP, invalidateRelatedCache, _getCacheTTL, getCache, setCache, isPrivateApiGet } from "./网络请求_缓存管理.js";
 import { unproxyImages } from "./网络请求_图片代理.js";
 // 🔧 直接引入 i18n 叶子模块（而非 用户体验增强.js）：本文件处于依赖链最上游，
 // 引入带 DOM 初始化副作用的增强层可能造成启动时序问题；国际化模块无副作用、零循环依赖
@@ -42,11 +42,64 @@ const pendingRequests = new Map();
 // 本地凭证会导致所有登录态操作反复报「Token 签名无效」。去重窗口：并发请求
 // 同时收到 401 时只提示一次。
 let _authExpiredAt = 0;
-function notifyTokenExpired(serverMsg) {
+function _safeStorageGet(storageName, key) {
+    try {
+        const storage = window[storageName];
+        return storage ? storage.getItem(key) : null;
+    } catch (_) {
+        return null;
+    }
+}
+
+function _safeGetAuthToken() {
+    return _safeStorageGet('localStorage', 'ComfyCommunity_Token')
+        || _safeStorageGet('sessionStorage', 'ComfyCommunity_Token')
+        || '';
+}
+
+/** 与实际 Authorization 使用同一存储读取；仅返回比较函数，不暴露凭证。 */
+export function captureRequestSession() {
+    const originalToken = _safeGetAuthToken();
+    return () => originalToken === _safeGetAuthToken();
+}
+
+// 仅跟踪私有 GET；会话撤销不取消或重放已提交的业务写操作。
+const activePrivateReads = new Set();
+function revokePrivateReads(force = false) {
+    for (const entry of activePrivateReads) {
+        if (force || !entry.matches()) {
+            entry.revoked = true;
+            entry.controller?.abort();
+        }
+    }
+}
+for (const event of ['comfy-user-login', 'comfy-user-logout', 'comfy-ranking-auth-expired']) {
+    window.addEventListener(event, () => revokePrivateReads(true));
+}
+window.addEventListener('storage', event => {
+    if (event.key === null || event.key === CACHE.LEGACY_KEYS.USER) revokePrivateReads(true);
+    else if (event.key === CACHE.LEGACY_KEYS.TOKEN) revokePrivateReads();
+});
+eventBus.on(EVENTS.USER_LOGIN, () => revokePrivateReads(true));
+eventBus.on(EVENTS.USER_LOGOUT, () => revokePrivateReads(true));
+
+function _safeClearAuthStorage() {
+    for (const storageName of ['localStorage', 'sessionStorage']) {
+        try {
+            const storage = window[storageName];
+            storage?.removeItem('ComfyCommunity_Token');
+            storage?.removeItem('ComfyCommunity_User');
+        } catch (_) {
+            // 浏览器禁用 Storage 时仍继续完成内存登出和事件通知。
+        }
+    }
+}
+
+function notifyTokenExpired() {
     const now = Date.now();
     if (now - _authExpiredAt < 5000) return;
     _authExpiredAt = now;
-    console.warn(`⚠️ 登录凭证已失效（${serverMsg}），本地 Token 已清除，请重新登录`);
+    console.warn("⚠️ 登录凭证已失效，本地凭证已清除，请重新登录");
     // 动态 import UI 组件，与 proxyImages 同样避免模块初始化时序问题
     import("../components/UI交互提示组件.js").then(async ({ showToast }) => {
         const { t } = await import("../components/用户体验_国际化.js");
@@ -54,21 +107,22 @@ function notifyTokenExpired(serverMsg) {
     }).catch(() => {});
 }
 
-function handleAuthExpired(serverMsg, failedToken) {
+function handleAuthExpired(failedToken) {
     // 竞态防护：若用户在 401 返回前已重新登录（存储中的 Token 已更换），
     // 不清理新凭证；失败请求未携带 Token 时 401 与登录态无关，同样不打扰
     if (!failedToken) return false;
-    const currentToken = localStorage.getItem("ComfyCommunity_Token") || sessionStorage.getItem("ComfyCommunity_Token");
+    const currentToken = _safeGetAuthToken();
     if (currentToken !== failedToken) return false;
     // 清除前取出账号，用于清理账号级 Profile 缓存
     let account = null;
     try {
-        const userStr = localStorage.getItem("ComfyCommunity_User") || sessionStorage.getItem("ComfyCommunity_User");
+        const userStr = _safeStorageGet('localStorage', "ComfyCommunity_User")
+            || _safeStorageGet('sessionStorage', "ComfyCommunity_User");
         if (userStr) account = JSON.parse(userStr)?.user?.account || null;
     } catch (e) {}
     // 与手动登出同深度的完整清理：Token/User、私有数据缓存、内存缓存与安装版本戳
     logoutAndClearUserData(account);
-    notifyTokenExpired(serverMsg);
+    notifyTokenExpired();
     return true;
 }
 
@@ -151,7 +205,8 @@ const requestQueue = {
     running: 0,
     pending: [],
     
-    async add(fn) {
+    async add(fn, signal) {
+        signal.throwIfAborted();
         // 如果还有槽位，直接执行
         if (this.running < this.maxConcurrent) {
             this.running++;
@@ -165,13 +220,22 @@ const requestQueue = {
         
         // 否则加入队列等待
         return new Promise((resolve, reject) => {
-            this.pending.push(async () => {
+            const onAbort = () => {
+                const index = this.pending.indexOf(run);
+                if (index !== -1) this.pending.splice(index, 1);
+                reject(signal.reason);
+            };
+            const run = async () => {
+                signal.removeEventListener('abort', onAbort);
                 try {
+                    signal.throwIfAborted();
                     resolve(await fn());
                 } catch (e) {
                     reject(e);
                 }
-            });
+            };
+            this.pending.push(run);
+            signal.addEventListener('abort', onAbort, { once: true });
         });
     },
     
@@ -192,11 +256,27 @@ const requestQueue = {
 };
 
 async function request(endpoint, options = {}) {
+    const privateRead = (options.method || "GET").toUpperCase() === "GET" && isPrivateApiGet(endpoint);
+    if (privateRead) {
+        removeCache(`api_${endpoint}`);
+        options = { ...options, noStore: true };
+    }
+    // 私有详情显式不留存：同时绕过响应命中/回退/去重、插件写缓存和浏览器缓存。
+    if (options.noStore) options = { ...options, noCache: true, cache: "no-store" };
     const url = `${BASE_URL}${endpoint}`;
     const method = (options.method || "GET").toUpperCase();
     const headers = { ...options.headers };
     if (!(options.body instanceof FormData)) { headers["Content-Type"] = "application/json"; }
-    const token = localStorage.getItem("ComfyCommunity_Token") || sessionStorage.getItem("ComfyCommunity_Token");
+    const token = _safeGetAuthToken();
+    const privateEntry = privateRead ? { revoked: false, controller: null, matches: () => token === _safeGetAuthToken() } : null;
+    const assertReadSession = () => {
+        if (privateRead && (privateEntry.revoked || !privateEntry.matches())) {
+            const error = new Error(t('auth.session_changed'));
+            error.name = 'SessionChangedError';
+            error.isCancelled = true;
+            throw error;
+        }
+    };
     if (token) {
         const tokenParts = token.split(".");
         if (tokenParts.length === 3) {
@@ -208,12 +288,9 @@ async function request(endpoint, options = {}) {
             // 🔧 修复：凭证既已清除，同步广播登出事件重置导航登录态/停止轮询，
             // 并给用户明确提示（原实现仅 console.warn 静默清理）
             console.warn("⚠️ 检测到无效/已过期的旧版 Token，已自动清除，请重新登录");
-            localStorage.removeItem("ComfyCommunity_Token");
-            localStorage.removeItem("ComfyCommunity_User");
-            sessionStorage.removeItem("ComfyCommunity_Token");
-            sessionStorage.removeItem("ComfyCommunity_User");
+            _safeClearAuthStorage();
             window.dispatchEvent(new CustomEvent('comfy-ranking-auth-expired'));
-            notifyTokenExpired("无效/已过期的旧版 Token");
+            notifyTokenExpired();
         }
     }
     
@@ -224,6 +301,7 @@ async function request(endpoint, options = {}) {
     // 🔑 P0修复：cacheKey 必须包含完整 endpoint（含查询参数），不能截断 '?' 之后的部分
     // 例：'/api/items?type=tool&sort=time' 和 '/api/items?type=tool&sort=views' 必须产生不同的缓存 Key
     const cacheKey = `api_${endpoint}`;
+    const trackPendingRequest = method === "GET" && !options.noCache;
     if (method === "GET" && !options.noCache) {
         const cached = getCache(cacheKey);
         if (cached) {
@@ -235,19 +313,29 @@ async function request(endpoint, options = {}) {
     // 📴 本地兜底数据（含过期缓存）——一次读取，供下面三处复用：
     //   ① 离线/云端不可达时直接返回它；② 判定本次 GET 是否属于「后台补新」（走短预算）；
     //   ③ 重试耗尽后的最终回退仍按原口径自行重读一次（期间可能有并发请求写入更新的数据）
-    const fallbackMeta = (method === "GET")
+    const fallbackMeta = (method === "GET" && !options.noCache)
         ? getCacheWithMeta(cacheKey, true)  // 忽略过期
         : { value: null, expired: false, found: false };
-    
+    const conditionalRead = method === "GET" && !options.noStore && options.credentials !== "include"
+        && !Object.keys(headers).some(name => name.toLowerCase() === "authorization")
+        && API.PUBLIC_CONDITIONAL_GET_PATHS.includes(endpoint.split(/[?#]/)[0]);
+    const conditionalMeta = conditionalRead ? getCacheWithMeta(cacheKey, true) : null;
+    if (conditionalRead) {
+        for (const name of Object.keys(headers)) if (name.toLowerCase() === "if-none-match") delete headers[name];
+        if (conditionalMeta?.found && conditionalMeta.etag) headers["If-None-Match"] = conditionalMeta.etag;
+    }
+
     // 🚀 P3优化：离线模式支持（网络状态取自 状态管理.js 的 isOnline()）
     // ☁️ 云端不可达冷却与本机断网同等对待：两者的结论都是「这次联网注定拿不到东西」，
     // 区别只在判据——前者看 navigator.onLine（本机网卡通不通），后者看上一次请求的
     // 失败结论是否还在冷却期内。没有这层的话，HF Space 单独连不上时 isOnline() 恒为 true，
     // 本分支永远不触发，于是每个界面、每轮 30 秒的消息轮询都要各自烧满 61~93 秒重试预算，
     // 而全局并发额度只有 6 个，挂死的后台请求会把前台请求全部挤到排队
+    // noCache 只代表绕过该 endpoint 的响应缓存，不得绕过共享网络熔断；榜单强制刷新
+    // 仍由列表层先显示自己的缓存，冷却期内直接失败返回，避免切换榜单逐个重试 HF。
     if (method === "GET" && (!isOnline() || !isCloudReachable())) {
         if (fallbackMeta.found) {
-            console.log(`📴 ${isOnline() ? '☁️ 云端不可达' : '离线模式'}：返回${fallbackMeta.expired ? '过期' : ''}缓存 (${endpoint})`);
+            console.log(`📴 ${isOnline() ? '☁️ 云端不可达' : '离线模式'}：返回${fallbackMeta.expired ? '过期' : ''}缓存`);
             const proxyFn2 = await getProxyImages();
             return proxyFn2(fallbackMeta.value);
         }
@@ -258,13 +346,13 @@ async function request(endpoint, options = {}) {
     }
     
     // ⚡ P1性能优化：请求去重（相同GET请求只发一次）
-    if (method === "GET") {
+    if (trackPendingRequest) {
         if (pendingRequests.has(cacheKey)) {
             return pendingRequests.get(cacheKey);
         }
     }
     
-    const fetchOptions = { method, headers, ...options };
+    const fetchOptions = { ...options, method, headers };
     
     // 🚀 核心修改：在将 body 转为 JSON 字符串发送前，执行无情剥离！
     if (options.body && !(options.body instanceof FormData) && typeof options.body !== "string") {
@@ -296,7 +384,8 @@ async function request(endpoint, options = {}) {
     // 不会把搜索类已经收紧过的 10s 预算又放宽回去。
     // noCache 请求不参与：调用方明确要权威新数据（余额、安装前的资源详情、广告配置），
     // 把它的超时砍短会把「慢但能成功」变成「快速失败」，违背调用方意图
-    if (method === "GET" && !options.noCache && fallbackMeta.found) {
+    const useCacheBudget = method === "GET" && !options.noCache && fallbackMeta.found;
+    if (useCacheBudget) {
         defaultTimeout = Math.min(defaultTimeout, API.BACKGROUND_TIMEOUT);
         defaultRetries = Math.min(defaultRetries, API.BACKGROUND_RETRIES);
     }
@@ -305,6 +394,7 @@ async function request(endpoint, options = {}) {
     const retryDelay = options.retryDelay ?? API.RETRY_DELAY;  // 指数退避基数
     
     // ⚡ P1性能优化：封装请求 Promise（支持去重 + 重试）
+    if (privateEntry) activePrivateReads.add(privateEntry);
     const requestPromise = (async () => {
         let lastError = null;
         // ☁️ 本次失败是否属于「网络层不可达」（超时 / 连不上），用于循环结束后决定是否打冷却。
@@ -312,6 +402,7 @@ async function request(endpoint, options = {}) {
         let networkLevelFailure = false;
         
         for (let attempt = 0; attempt <= maxRetries; attempt++) {
+            assertReadSession();
             // 🚀 P1优化：指数退避延迟
             if (attempt > 0) {
                 // ☁️ 冷却已生效就停止重试：另一个并发请求可能刚刚确证云端不可达，
@@ -324,25 +415,75 @@ async function request(endpoint, options = {}) {
                     
             // 🚀 P4优化：使用请求取消管理器（支持超时 + 组件级取消）
             const controller = requestCancelManager.create(componentId);
+            if (privateEntry) privateEntry.controller = controller;
             const currentFetchOptions = { ...fetchOptions, signal: controller.signal };
-            // 🔧 修复：超时计时器改到真正发出 fetch 时才启动。原实现在入队前就 setTimeout，
-            // 并发满 6 个时排队等待会白烧超时预算，排队时长超过超时值会导致 fetch 尚未发出就被 abort
             let timeoutId = null;
-            // 🔍 区分「超时中止」与「调用方主动撤销」：两者抛出的都是 AbortError，
-            // 但前者应该重试、后者绝不能重试（详见下方 catch 的主动取消分支）
             let timedOut = false;
+            let fetchStarted = false;
+            let transportFailed = false;
+            const onTimeout = () => { timedOut = true; controller.abort(); };
+            // 已有缓存时排队也计入预算，避免被无缓存的慢请求无限拖住。
+            if (useCacheBudget) timeoutId = setTimeout(onTimeout, requestTimeout);
                     
             try {
-                // 🚀 P3优化：使用请求队列限制并发
-                const response = await requestQueue.add(() => {
-                    timeoutId = setTimeout(() => { timedOut = true; controller.abort(); }, requestTimeout);
-                    return fetch(url, currentFetchOptions);
-                });
-                clearTimeout(timeoutId);  // 清除超时计时器
-                requestCancelManager.remove(componentId, controller);  // 🚀 P4: 移除已完成的 controller
-                let responseData = await response.json().catch(() => ({}));
+                const result = await requestQueue.add(async () => {
+                    if (!useCacheBudget) timeoutId = setTimeout(onTimeout, requestTimeout);
+                    // 请求可能在云端故障被另一个并发请求确认前进入队列；出队发出 fetch
+                    // 前复查共享状态，避免队列继续逐个访问已知不可达的 HF endpoint。
+                    if (method === "GET" && (!isOnline() || !isCloudReachable())) {
+                        const unavailableError = new Error(
+                            isOnline() ? t('feedback.cloud_unreachable_no_cache') : t('feedback.offline_no_cache')
+                        );
+                        unavailableError.name = 'CloudUnavailableError';
+                        throw unavailableError;
+                    }
+                    assertReadSession();
+                    fetchStarted = true;
+                    try {
+                        let response = await fetch(url, currentFetchOptions);
+                        let validatedData;
+                        if (response.status === 304 && conditionalRead) {
+                            const currentMeta = getCacheWithMeta(cacheKey, true);
+                            if (conditionalMeta?.found && conditionalMeta.etag
+                                && response.headers?.get?.('ETag') === conditionalMeta.etag
+                                && currentMeta.found && currentMeta.etag === conditionalMeta.etag
+                                && currentMeta.value === conditionalMeta.value) {
+                                validatedData = currentMeta.value;
+                            } else {
+                                // 缓存可能在等待期间被清理/写操作失效；同一预算内补取完整响应。
+                                const fullHeaders = { ...currentFetchOptions.headers };
+                                for (const name of Object.keys(fullHeaders)) if (name.toLowerCase() === "if-none-match") delete fullHeaders[name];
+                                if (controller.signal.aborted) throw new DOMException('Aborted', 'AbortError');
+                                response = await fetch(url, { ...currentFetchOptions, headers: fullHeaders, cache: "no-store" });
+                                if (response.status === 304) throw new SyntaxError('Unexpected not-modified response');
+                            }
+                        }
+                        let data;
+                        try {
+                            data = validatedData !== undefined ? validatedData
+                                : response.status === 204 ? {} : await response.json();
+                        } catch (error) {
+                            // 错误响应的正文不可读时仍按 HTTP 状态处理，不能用缓存掩盖 401/403。
+                            if (!response.ok && (error instanceof SyntaxError || error instanceof TypeError || (timedOut && error.name === 'AbortError'))) {
+                                data = {};
+                            } else {
+                                throw error;
+                            }
+                        }
+                        return { response, data, validated: validatedData !== undefined };
+                    } catch (error) {
+                        transportFailed = error instanceof TypeError;
+                        throw error;
+                    }
+                }, controller.signal);
+                clearTimeout(timeoutId);
+                requestCancelManager.remove(componentId, controller);
+                const { response } = result;
+                let responseData = result.data;
+                assertReadSession();
 
-                if (!response.ok) {
+                if (!response.ok && !result.validated) {
+                    if (!responseData || typeof responseData !== "object" || Array.isArray(responseData)) responseData = {};
                     let errorMsg = `请求失败 (${response.status})`;
                     
                     // 🚀 核心修改：增加对 FastAPI 422 报错数组的解析
@@ -365,11 +506,25 @@ async function request(endpoint, options = {}) {
                             // 迟到的旧 401 或匿名请求的 401 不再误触发登录态重置。
                             // 登录接口的 401 语义是「密码错误」而非凭证失效，不走全局清理，
                             // 避免与登录表单自身的错误提示重复叠加
-                            if (endpoint !== "/api/users/login" && handleAuthExpired(errorMsg, token)) {
+                            if (endpoint !== "/api/users/login" && handleAuthExpired(token)) {
                                 window.dispatchEvent(new CustomEvent('comfy-ranking-auth-expired'));
                             }
                         }
-                        throw new Error(errorMsg);
+                        const error = new Error(errorMsg);
+                        error.status = response.status;
+                        if (typeof responseData.detail === "string" && /^[a-z][a-z0-9_]{0,79}$/.test(responseData.detail)) error.code = responseData.detail;
+                        throw error;
+                    }
+
+                    // Hugging Face Space / 网关不可用通常以 502、503 或 504 响应，
+                    // 这类响应证明请求到达了代理层，但云端当前无法提供服务。
+                    // 与超时/连接失败一样共享冷却，避免切换榜单时每个 endpoint
+                    // 都重复访问一次；普通 500 仍只视为单接口服务端错误。
+                    if ([502, 503, 504].includes(response.status)) {
+                        lastError = new Error(errorMsg);
+                        networkLevelFailure = true;
+                        markCloudDown(endpoint);
+                        break;
                     }
                     
                     lastError = new Error(errorMsg);
@@ -386,17 +541,19 @@ async function request(endpoint, options = {}) {
                 }
 
                 // ⚡ P1性能优化：GET 请求结果缓存
-                if (method === "GET") {
+                if (method === "GET" && !options.noStore) {
                     const ttl = _getCacheTTL(endpoint);
                     if (ttl > 0) {
                         // 创作者列表不持久化到 localStorage，避免空间不足
                         const persist = !endpoint.includes('/api/creators');
-                        setCache(cacheKey, responseData, ttl, persist);
+                        setCache(cacheKey, responseData, ttl, persist,
+                            conditionalRead ? { etag: response.headers?.get?.('ETag') } : {});
                     }
                 }
 
                 // 入口数据挂载代理
                 const proxyFn3 = await getProxyImages();
+                assertReadSession();
                 responseData = proxyFn3(responseData);
                 return responseData;
             } catch (error) {
@@ -404,7 +561,8 @@ async function request(endpoint, options = {}) {
                 // 🔍 失败/超时同样摘除 controller：成功路径在上方已 remove，这里不补的话，
                 // 取消分组里会堆积已失效的 controller，使 cancelAll 的在途计数虚高
                 requestCancelManager.remove(componentId, controller);
-                
+                assertReadSession();
+
                 // 🔍 主动撤销（组件级取消）与超时都表现为 AbortError，但语义完全相反：
                 // 超时该重试；主动撤销是调用方明确表示「这次结果我不要了」，绝不能重试，
                 // 否则会白烧一轮超时预算（搜索场景下用户每敲一次键都可能触发一次撤销）。
@@ -415,11 +573,18 @@ async function request(endpoint, options = {}) {
                     cancelErr.isCancelled = true;
                     throw cancelErr;
                 }
+
+                // 队列等待期间已有并发请求确证网络不可达：该请求尚未发出 fetch，
+                // 直接交给统一缓存兜底，不重试、不延长冷却，也不把队列错误当作网络探测。
+                if (error.name === 'CloudUnavailableError') {
+                    lastError = error;
+                    break;
+                }
                 
                 // 🔧 P1优化：可重试的错误类型
                 const isRetryable = (
-                    error.name === 'AbortError' ||  // 超时
-                    (error instanceof TypeError && error.message.includes('fetch'))  // 网络错误
+                    error.name === 'AbortError' ||
+                    transportFailed
                 );
                 
                 if (isRetryable) {
@@ -430,7 +595,7 @@ async function request(endpoint, options = {}) {
                     lastError = isTimeout
                         ? new Error('网络请求超时，请检查网络连接')
                         : new Error('网络连接失败，请检查网络');
-                    networkLevelFailure = true;
+                    if (fetchStarted) networkLevelFailure = true;
                     // ☁️ 连接层失败（被墙 / DNS 污染 / 拒绝连接 / 证书错误）几乎不会是偶发抖动，
                     // 打上冷却后其它界面与轮询就不用再各自烧一遍预算。但单次失败不足以定论，
                     // 故分两种口径：已配重试时要求第二次尝试仍失败才定论（连接层失败是毫秒级的，
@@ -444,7 +609,7 @@ async function request(endpoint, options = {}) {
                 
                 // 🔧 P3优化：错误分类处理，提供更清晰的错误信息（不可重试错误直接抛出）
                 if (error instanceof SyntaxError) {
-                    throw new Error('服务器响应格式错误');
+                    throw new Error(t('feedback.response_format_error'));
                 }
                 throw error;
             }
@@ -453,12 +618,12 @@ async function request(endpoint, options = {}) {
         // ☁️ 所有尝试都因网络层原因失败（超时耗尽重试也走这里）→ 打上冷却，
         // 接下来 API.CLOUD_DOWN_COOLDOWN 内的 GET 全部就地走缓存，不再重复等待
         if (networkLevelFailure) markCloudDown(endpoint);
-        
+
         // 所有重试都失败，尝试回退到过期缓存
-        if (method === "GET") {
+        if (method === "GET" && !options.noCache) {
             const fallback = getCacheWithMeta(cacheKey, true);  // true = 允许过期
             if (fallback.found) {
-                console.warn(`📴 网络请求失败，回退到本地缓存: ${endpoint}`);
+                console.warn('📴 网络请求失败，回退到本地缓存');
                 const proxyFn4 = await getProxyImages();
                 return proxyFn4(fallback.value);  // 返回过期缓存数据
             }
@@ -467,8 +632,10 @@ async function request(endpoint, options = {}) {
         throw lastError || new Error('请求失败');
     })();
     
+    if (privateEntry) requestPromise.finally(() => activePrivateReads.delete(privateEntry)).catch(() => {});
+
     // 记录进行中的请求
-    if (method === "GET") {
+    if (trackPendingRequest) {
         pendingRequests.set(cacheKey, requestPromise);
     }
     
@@ -476,9 +643,11 @@ async function request(endpoint, options = {}) {
     // 🔧 补 .catch 空处理：finally 会派生出一个新的 Promise，而它从未被返回也无人接收，
     // 一旦请求失败（含主动撤销）就会在控制台抛 Uncaught (in promise)。
     // 原始 requestPromise 仍在下方正常返回给调用方处理，此处只是吞掉这份重复的拒绝
-    requestPromise.finally(() => {
-        pendingRequests.delete(cacheKey);
-    }).catch(() => {});
+    if (trackPendingRequest) {
+        requestPromise.finally(() => {
+            pendingRequests.delete(cacheKey);
+        }).catch(() => {});
+    }
     
     return requestPromise;
 }
@@ -499,12 +668,17 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
     const timeout = options.timeout || 1200000; // 20分钟全局超时（大型工具克隆需要较长时间）
     const controller = new AbortController();
     const globalTimer = setTimeout(() => controller.abort(), timeout);
+    const externalSignal = options.signal;
+    const abortFromCaller = () => controller.abort();
+    if (externalSignal?.aborted) controller.abort();
+    else externalSignal?.addEventListener("abort", abortFromCaller, { once: true });
 
     // 📡 空闲超时检测：长时间无数据视为连接已断
     const IDLE_TIMEOUT_DEFAULT = 30000;  // 30 秒无数据视为空闲
     const IDLE_TIMEOUT_GRACE = 5000;     // 收到 finalResult 后的宽限期 5 秒
     let currentIdleTimeout = options.idleTimeout || IDLE_TIMEOUT_DEFAULT;
     let idleTimer = null;
+    let finalResult = null;
 
     const clearIdleTimer = () => {
         if (idleTimer !== null) {
@@ -522,14 +696,41 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
         });
 
         if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            const error = new Error(`HTTP ${response.status}: ${response.statusText}`);
+            error.status = response.status;
+            // 仅当流式路由明确不存在/不接受该方法时，调用方可安全回退到旧端点。
+            // 网络错误、超时和服务端错误都可能发生在操作已开始后，不可自动重发。
+            error.fallbackSafe = response.status === 404 || response.status === 405;
+            throw error;
         }
 
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
         let buffer = "";
-        let finalResult = null;
-
+        const processSSELine = (line) => {
+            if (!line.startsWith("data: ")) return;
+            let data;
+            try {
+                data = JSON.parse(line.slice(6));
+            } catch (parseError) {
+                console.warn("[SSE] 解析事件失败:", parseError?.name || 'SyntaxError');
+                return;
+            }
+            if (!data || typeof data !== "object" || Array.isArray(data)) {
+                console.warn("[SSE] 忽略非对象事件");
+                return;
+            }
+            if (data.status === "success" || data.status === "error") {
+                // 先保存最终结果，UI 更新回调即使异常也不能丢失服务端结果。
+                finalResult = data;
+                currentIdleTimeout = IDLE_TIMEOUT_GRACE;
+            }
+            try {
+                onProgress?.(data);
+            } catch (callbackError) {
+                console.warn("[SSE] 进度回调失败");
+            }
+        };
         while (true) {
             // 使用 Promise.race 实现空闲超时：reader.read() 与空闲定时器竞争
             const idlePromise = new Promise((_, reject) => {
@@ -549,48 +750,43 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
                     // 如果已收到 finalResult，优先返回它（服务器只是没正确关闭连接）
                     if (finalResult) return finalResult;
                     // 否则返回空闲超时错误
-                    return { status: "error", message: "连接超时：30秒未收到数据" };
+                    return { status: "error", outcomeUnknown: true, message: "连接超时：30秒未收到数据" };
                 }
                 throw e;
             }
             clearIdleTimer();
 
             const { done, value } = readResult;
-            if (done) break;
+            if (done) {
+                buffer += decoder.decode();
+                for (const line of buffer.split("\n")) processSSELine(line);
+                buffer = "";
+                break;
+            }
 
             buffer += decoder.decode(value, { stream: true });
             const lines = buffer.split("\n");
             buffer = lines.pop() || ""; // 保留不完整行
-
-            for (const line of lines) {
-                if (line.startsWith("data: ")) {
-                    try {
-                        const data = JSON.parse(line.slice(6));
-                        onProgress?.(data);
-
-                        if (data.status === "success" || data.status === "error") {
-                            finalResult = data;
-                            // 收到最终结果后，缩短空闲超时为宽限期，避免无谓等待连接关闭
-                            currentIdleTimeout = IDLE_TIMEOUT_GRACE;
-                        }
-                    } catch (e) {
-                        console.warn("[SSE] 解析事件失败:", line);
-                    }
-                }
-            }
+            for (const line of lines) processSSELine(line);
         }
 
-        return finalResult || { status: "error", message: "未收到最终结果" };
+        return finalResult || { status: "error", outcomeUnknown: true, message: "未收到最终结果" };
     } catch (err) {
+        // 已收到最终事件时，后续连接关闭错误不应覆盖操作结果或触发重复提交。
+        if (finalResult) return finalResult;
         if (err.name === "AbortError") {
-            // 全局超时时，如果已收到 finalResult 仍返回它
-            if (finalResult) return finalResult;
-            return { status: "error", message: "安装超时，请检查网络后重试" };
+            return {
+                status: "error",
+                outcomeUnknown: true,
+                cancelRequested: !!externalSignal?.aborted,
+                message: externalSignal?.aborted ? t('feedback.request_cancelled') : "连接超时，操作结果暂时无法确认"
+            };
         }
         throw err;
     } finally {
         clearTimeout(globalTimer);
         clearIdleTimer();
+        externalSignal?.removeEventListener("abort", abortFromCaller);
     }
 }
 

前端页面/core/网络请求_缓存管理.js

@@ -9,7 +9,7 @@
 //   - 性能优化工具.js (重导出缓存函数，保持向后兼容)
 // ==========================================
 
-import { CACHE } from "./全局配置.js";
+import { API, CACHE } from "./全局配置.js";
 
 // ==========================================
 // 📦 缓存底层实现
@@ -23,6 +23,10 @@ import { CACHE } from "./全局配置.js";
 const CACHE_PREFIX = CACHE.PREFIX;
 const DEFAULT_TTL = CACHE.DEFAULT_TTL;
 const MAX_MEMORY_ITEMS = CACHE.MAX_MEMORY_ITEMS;
+const CACHE_SCHEMA_VERSION = 2;
+const MAX_STORAGE_BYTES = CACHE.MAX_STORAGE_BYTES;
+let storageUsageBytes = null;
+let lastStorageBudgetSweepAt = 0;
 
 // 内存缓存（最快）
 const memoryCache = new Map();
@@ -46,6 +50,21 @@ function _isExpired(cached) {
     return Date.now() >= cached.expireAt;
 }
 
+function _isValidCacheEntry(cached) {
+    return !!cached && typeof cached === "object"
+        && Object.prototype.hasOwnProperty.call(cached, "value")
+        && Number.isFinite(cached.expireAt)
+        && (cached.schemaVersion == null || (Number.isInteger(cached.schemaVersion)
+            && cached.schemaVersion >= 1 && cached.schemaVersion <= CACHE_SCHEMA_VERSION));
+}
+
+// 同前缀的本地记录/配置使用独立格式；自动缓存清理不能处理它们。
+function _isManagedStorageKey(key) {
+    if (!key || !key.startsWith(CACHE_PREFIX)) return false;
+    return !Object.values(CACHE.LOCAL_KEYS).some(localKey => key === localKey
+        || key.startsWith(localKey.endsWith('_') ? localKey : localKey + '_'));
+}
+
 /**
  * 安全写入 localStorage，配额不足时先清理过期项再重试，仍失败则 LRU 淘汰后重试
  * @param {string} fullKey - 完整缓存键
@@ -54,12 +73,15 @@ function _isExpired(cached) {
 function _safeStorageWrite(fullKey, jsonStr) {
     try {
         localStorage.setItem(fullKey, jsonStr);
+        return true;
     } catch (e) {
         if (e.name === 'QuotaExceededError' || e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
+            storageUsageBytes = null;
             console.warn('⚠️ localStorage 已满，尝试清理过期缓存...');
             _cleanExpiredStorage();
             try {
                 localStorage.setItem(fullKey, jsonStr);
+                return true;
             } catch {
                 let stored = false;
                 for (let attempt = 0; attempt < 5 && !stored; attempt++) {
@@ -73,11 +95,13 @@ function _safeStorageWrite(fullKey, jsonStr) {
                     }
                 }
                 if (!stored) {
-                    console.warn(`⚠️ localStorage 持久化失败，降级到仅内存缓存: ${fullKey}`);
+                    console.warn('localStorage 持久化失败，保留内存缓存');
                 }
+                return stored;
             }
         } else {
-            console.warn('⚠️ localStorage 存储失败:', fullKey, e.message);
+            console.warn('localStorage 存储不可用，保留内存缓存');
+            return false;
         }
     }
 }
@@ -88,11 +112,13 @@ function _safeStorageWrite(fullKey, jsonStr) {
  * @param {any} value - 缓存值
  * @param {number} ttl - 过期时间（毫秒），默认2小时
  * @param {boolean} persist - 是否持久化到 localStorage
+ * @param {{etag?: string}} metadata - 可选的正文验证器，与value一同失效
  */
-export function setCache(key, value, ttl = DEFAULT_TTL, persist = true) {
+export function setCache(key, value, ttl = DEFAULT_TTL, persist = true, metadata = {}) {
     const fk = _fullKey(key);
     const expireAt = Date.now() + ttl;
-    const cacheData = { value, expireAt };
+    const cacheData = { schemaVersion: CACHE_SCHEMA_VERSION, value, expireAt, lastAccessAt: Date.now() };
+    if (typeof metadata?.etag === "string" && API.CONDITIONAL_ETAG_PATTERN.test(metadata.etag)) cacheData.etag = metadata.etag;
     
     // 内存缓存
     memoryCache.set(fk, cacheData);
@@ -101,7 +127,22 @@ export function setCache(key, value, ttl = DEFAULT_TTL, persist = true) {
     
     // 持久化缓存
     if (persist) {
-        _safeStorageWrite(fk, JSON.stringify(cacheData));
+        const jsonStr = JSON.stringify(cacheData);
+        let previousBytes = 0;
+        let previousLengthKnown = false;
+        try {
+            const previous = localStorage.getItem(fk);
+            previousBytes = previous === null ? 0 : (fk.length + previous.length) * 2;
+            previousLengthKnown = true;
+        } catch {}
+        if (_safeStorageWrite(fk, jsonStr)) {
+            if (storageUsageBytes !== null && previousLengthKnown) {
+                storageUsageBytes += (fk.length + jsonStr.length) * 2 - previousBytes;
+            } else {
+                storageUsageBytes = null;
+            }
+            _enforceStorageBudget(fk);
+        }
     }
 }
 
@@ -116,12 +157,15 @@ export function getCache(key) {
     // 优先从内存获取
     if (memoryCache.has(fk)) {
         const cached = memoryCache.get(fk);
-        if (!_isExpired(cached)) {
-            _updateLRU(fk);
-            return cached.value;
+        if (!_isValidCacheEntry(cached)) _deleteMemoryEntry(fk);
+        else {
+            if (!_isExpired(cached)) {
+                _updateLRU(fk);
+                _touchStorageEntry(fk, cached);
+                return cached.value;
+            }
+            // 仅内存缓存也需要保留过期副本，供弱网回退使用。
         }
-        // 过期，清除（走 _deleteMemoryEntry 同步摘除 LRU 顺序数组，避免幽灵键挤占名额）
-        _deleteMemoryEntry(fk);
     }
     
     // 降级到 localStorage
@@ -129,10 +173,15 @@ export function getCache(key) {
         const stored = localStorage.getItem(fk);
         if (stored) {
             const cached = JSON.parse(stored);
+            if (!_isValidCacheEntry(cached)) {
+                localStorage.removeItem(fk);
+                return null;
+            }
             if (!_isExpired(cached)) {
                 // 回填内存缓存
                 memoryCache.set(fk, cached);
                 _updateLRU(fk);
+                _touchStorageEntry(fk, cached);
                 return cached.value;
             }
             // 🔧 修复：过期条目不再物理删除，保留给断网时的过期缓存兜底使用；
@@ -140,7 +189,7 @@ export function getCache(key) {
             // （原实现此处删除会导致 request() 新鲜检查先删、离线兜底后读而落空）
         }
     } catch (e) {
-        console.warn("⚠️ 缓存读取失败:", key);
+        console.warn("⚠️ 缓存读取失败。");
     }
     
     return null;
@@ -158,14 +207,17 @@ export function getCacheWithMeta(key, ignoreExpiry = false) {
     // 优先从内存获取
     if (memoryCache.has(fk)) {
         const cached = memoryCache.get(fk);
-        const expired = _isExpired(cached);
-        
-        if (!expired || ignoreExpiry) {
-            _updateLRU(fk);
-            return { value: cached.value, expired, found: true };
+        if (!_isValidCacheEntry(cached)) _deleteMemoryEntry(fk);
+        else {
+            const expired = _isExpired(cached);
+
+            if (!expired || ignoreExpiry) {
+                _updateLRU(fk);
+                _touchStorageEntry(fk, cached);
+                return { value: cached.value, expired, found: true, ...(typeof cached.etag === "string" && API.CONDITIONAL_ETAG_PATTERN.test(cached.etag) ? { etag: cached.etag } : {}) };
+            }
+            // 新鲜度检查不删除数据；淘汰仍由 LRU 和显式失效负责。
         }
-        // 过期且不忽略，清除（同上：必须同步维护 memoryCacheOrder）
-        _deleteMemoryEntry(fk);
     }
     
     // 降级到 localStorage
@@ -173,19 +225,23 @@ export function getCacheWithMeta(key, ignoreExpiry = false) {
         const stored = localStorage.getItem(fk);
         if (stored) {
             const cached = JSON.parse(stored);
+            if (!_isValidCacheEntry(cached)) {
+                localStorage.removeItem(fk);
+                return { value: null, expired: false, found: false };
+            }
             const expired = _isExpired(cached);
             
             if (!expired || ignoreExpiry) {
                 // 回填内存缓存
                 memoryCache.set(fk, cached);
                 _updateLRU(fk);
-                return { value: cached.value, expired, found: true };
+                _touchStorageEntry(fk, cached);
+                return { value: cached.value, expired, found: true, ...(typeof cached.etag === "string" && API.CONDITIONAL_ETAG_PATTERN.test(cached.etag) ? { etag: cached.etag } : {}) };
             }
-            // 🔧 修复：与 getCache 一致，过期条目保留不删（供离线兜底），仅返回未命中；
-            // 内存中的过期副本已在上方删除，下次可重新从 storage 回填
+            // 与内存层一致，保留过期条目供离线兜底。
         }
     } catch (e) {
-        console.warn("⚠️ 缓存读取失败:", key);
+        console.warn("⚠️ 缓存读取失败。");
     }
     
     return { value: null, expired: false, found: false };
@@ -203,6 +259,99 @@ function _deleteMemoryEntry(fk) {
     if (idx > -1) memoryCacheOrder.splice(idx, 1);
 }
 
+/**
+ * 按业务前缀取得两级缓存键快照，返回不含 CACHE.PREFIX 的键。
+ * 内存键排在前面并去重；存储访问失败不影响仅内存缓存的离线查找。
+ * 此处只枚举键，条目结构与 TTL 仍由 getCacheWithMeta 校验。
+ */
+export function getCacheKeysByPrefix(prefix) {
+    if (typeof prefix !== "string" || !prefix) return [];
+    const fullPrefix = _fullKey(prefix);
+    const keys = new Set();
+    for (const key of memoryCache.keys()) {
+        if (key.startsWith(fullPrefix)) keys.add(key.slice(CACHE_PREFIX.length));
+    }
+    try {
+        for (let index = 0; index < localStorage.length; index++) {
+            const key = localStorage.key(index);
+            if (key && key.startsWith(fullPrefix)) keys.add(key.slice(CACHE_PREFIX.length));
+        }
+    } catch {
+        // 禁用存储或浏览器隐私策略下，继续使用上面已取得的内存键。
+    }
+    return [...keys];
+}
+
+function _touchStorageEntry(key, cached) {
+    try {
+        if (localStorage.getItem(key) === null) return;
+        const now = Date.now();
+        if (Number.isFinite(cached.lastAccessAt) && now - cached.lastAccessAt < 60_000) return;
+        cached.lastAccessAt = now;
+        localStorage.setItem(key, JSON.stringify(cached));
+    } catch {}
+}
+
+/** Keep this plugin's persistent cache within its estimated UTF-16 storage budget. */
+function _enforceStorageBudget(protectedKey = null) {
+    const now = Date.now();
+    if (storageUsageBytes !== null && storageUsageBytes <= MAX_STORAGE_BYTES
+        && now - lastStorageBudgetSweepAt < 60_000) return;
+
+    try {
+        const entries = [];
+        const invalidKeys = [];
+        let totalBytes = 0;
+        for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (!_isManagedStorageKey(key)) continue;
+            const raw = localStorage.getItem(key);
+            if (raw === null) continue;
+            let cached;
+            try {
+                cached = JSON.parse(raw);
+            } catch {
+                invalidKeys.push(key);
+                continue;
+            }
+            if (!_isValidCacheEntry(cached)) {
+                invalidKeys.push(key);
+                continue;
+            }
+            const sizeBytes = (key.length + raw.length) * 2;
+            const writtenAt = Number.isFinite(cached.expireAt) ? cached.expireAt - DEFAULT_TTL : 0;
+            entries.push({ key, sizeBytes, lastAccessAt: Number.isFinite(cached.lastAccessAt) ? cached.lastAccessAt : writtenAt });
+            totalBytes += sizeBytes;
+        }
+        invalidKeys.forEach(key => localStorage.removeItem(key));
+
+        let evicted = 0;
+        for (const entry of [...entries]) {
+            if (entry.key === protectedKey && entry.sizeBytes > MAX_STORAGE_BYTES) {
+                localStorage.removeItem(entry.key);
+                totalBytes -= entry.sizeBytes;
+                entries.splice(entries.indexOf(entry), 1);
+                evicted++;
+            }
+        }
+        entries.sort((a, b) => a.lastAccessAt - b.lastAccessAt);
+        while (totalBytes > MAX_STORAGE_BYTES && entries.length > 0) {
+            const oldest = entries.shift();
+            localStorage.removeItem(oldest.key);
+            totalBytes -= oldest.sizeBytes;
+            evicted++;
+        }
+        storageUsageBytes = totalBytes;
+        lastStorageBudgetSweepAt = now;
+        if (evicted > 0) {
+            console.warn(`⚠️ 本地缓存超过约 ${Math.round(MAX_STORAGE_BYTES / 1024)} KiB 预算，按最近访问时间淘汰 ${evicted} 项`);
+        }
+    } catch {
+        // 存储不可用时保留内存缓存；下一次持久化再重试预算扫描。
+        storageUsageBytes = null;
+    }
+}
+
 /**
  * 删除缓存（精确键，内存 + localStorage 两级）
  * @param {string} key - 缓存键
@@ -213,6 +362,7 @@ export function removeCache(key) {
     try {
         localStorage.removeItem(fk);
     } catch {}
+    storageUsageBytes = null;
 }
 
 /**
@@ -231,7 +381,7 @@ export function removeCacheByPrefix(prefix) {
     const candidates = prefix.startsWith(CACHE_PREFIX) ? [prefix] : [_fullKey(prefix), prefix];
     const isMatch = (key) => candidates.some(p => key.startsWith(p));
     const removed = new Set();
-    
+
     // 🔧 内存层必须先清：getCache / getCacheWithMeta 都优先读 memoryCache，
     // 只清 localStorage 的话旧数据仍会命中内存并被直接返回（请求根本不会发出）
     for (const fk of Array.from(memoryCache.keys())) {
@@ -240,7 +390,7 @@ export function removeCacheByPrefix(prefix) {
             removed.add(fk);
         }
     }
-    
+
     try {
         const keysToRemove = [];
         for (let i = 0; i < localStorage.length; i++) {
@@ -252,7 +402,8 @@ export function removeCacheByPrefix(prefix) {
             removed.add(k);
         });
     } catch {}
-    
+
+    if (removed.size > 0) storageUsageBytes = null;
     return removed.size;
 }
 
@@ -262,6 +413,7 @@ export function removeCacheByPrefix(prefix) {
 export function clearAllCache() {
     memoryCache.clear();
     memoryCacheOrder.length = 0;
+    storageUsageBytes = null;
     
     try {
         const keysToRemove = [];
@@ -298,7 +450,7 @@ function _cleanExpiredStorage(aggressive = false) {
         const keysToRemove = [];
         for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
-            if (key && key.startsWith(CACHE_PREFIX)) {
+            if (_isManagedStorageKey(key)) {
                 if (aggressive) {
                     // 激进模式：清除所有缓存项
                     keysToRemove.push(key);
@@ -327,10 +479,15 @@ function _evictOldestStorage() {
         const entries = [];
         for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
-            if (key && key.startsWith(CACHE_PREFIX)) {
+            if (_isManagedStorageKey(key)) {
                 try {
                     const cached = JSON.parse(localStorage.getItem(key));
-                    entries.push({ key, expireAt: cached.expireAt || 0 });
+                    if (!_isValidCacheEntry(cached)) {
+                        localStorage.removeItem(key);
+                        continue;
+                    }
+                    const writtenAt = Number.isFinite(cached.expireAt) ? cached.expireAt - DEFAULT_TTL : 0;
+                    entries.push({ key, lastAccessAt: Number.isFinite(cached.lastAccessAt) ? cached.lastAccessAt : writtenAt });
                 } catch {
                     localStorage.removeItem(key);
                 }
@@ -339,7 +496,7 @@ function _evictOldestStorage() {
         
         if (entries.length === 0) return false;
         
-        entries.sort((a, b) => a.expireAt - b.expireAt);
+        entries.sort((a, b) => a.lastAccessAt - b.lastAccessAt);
         
         // 🧹 批量淘汰策略：每次淘汰最旧的 30%（温和策略，减少频繁全量扫描）
         const evictCount = Math.max(1, Math.ceil(entries.length * 0.3));
@@ -436,10 +593,10 @@ const CACHE_INVALIDATION_MAP = {
     },
     // 帖子相关
     "/api/posts": {
-        "POST": ["api_/api/posts", "ComfyRanking_ListCache_posts"],      // 创建帖子，清除列表缓存
-        "PUT": ["api_/api/posts"],                                        // 更新帖子，清除列表缓存
-        "DELETE": ["api_/api/posts", "ComfyRanking_ListCache_posts"],    // 删除帖子，清除列表缓存
-        "INTERACTION": ["api_/api/posts", "ComfyRanking_ListCache_posts"] // 👍 互动操作（view/like/favorite/tip）
+        "POST": ["api_/api/posts", "ComfyRanking_ListCache_posts", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],      // 创建帖子，清除列表缓存
+        "PUT": ["api_/api/posts", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],                                        // 更新帖子，清除列表缓存
+        "DELETE": ["api_/api/posts", "ComfyRanking_ListCache_posts", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],    // 删除帖子，清除列表缓存
+        "INTERACTION": ["api_/api/posts", "ComfyRanking_ListCache_posts", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX] // 👍 互动操作（view/like/favorite/tip）
     },
     // 评论相关
     "/api/comments": {
@@ -448,11 +605,18 @@ const CACHE_INVALIDATION_MAP = {
     },
     // 商品相关
     "/api/items": {
-        "POST": ["api_/api/items", "api_/api/creators"],                 // 创建商品，清除商品列表和创作者列表
-        "PUT": ["api_/api/items"],                                        // 更新商品，仅清除商品列表（不碰创作者）
-        "DELETE": ["api_/api/items", "api_/api/creators"],               // 删除商品，清除商品列表和创作者列表
-        "INTERACTION": ["api_/api/items", "api_/api/creators"]           // 👍 互动操作（view/like）
+        "POST": ["api_/api/items", "api_/api/creators", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],                 // 创建商品，清除商品列表和创作者列表
+        "PUT": ["api_/api/items", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],                                        // 更新商品，仅清除商品列表（不碰创作者）
+        "DELETE": ["api_/api/items", "api_/api/creators", ...CACHE.RESOURCE_LIST_PREFIXES, CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX], // 删除商品也清除四类排序缓存
+        "INTERACTION": ["api_/api/items", "api_/api/creators", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX]           // 👍 互动操作（view/like）
     },
+    "/api/prompts": {
+        "POST": ["api_/api/prompts", "PromptsCache_", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],
+        "PUT": ["api_/api/prompts", "PromptsCache_", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],
+        "DELETE": ["api_/api/prompts", "PromptsCache_", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX],
+        "INTERACTION": ["api_/api/prompts", "PromptsCache_", CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX]
+    },
+    "/api/interactions": { "POST": ["api_/api/items", "api_/api/creators", ...CACHE.RESOURCE_LIST_PREFIXES, CACHE.LOCAL_KEYS.PROFILE_LIST_PREFIX] },
     // 用户相关
     "/api/users": {
         "PUT": [
@@ -526,7 +690,7 @@ export function invalidateRelatedCache(endpoint, method = null) {
     }
     
     if (cleared > 0) {
-        console.log(`🗑️ 精确清除缓存: ${cleared} 个项 (${endpoint}${method ? ` ${method}` : ''})`);
+        console.log(`🗑️ 精确清除缓存: ${cleared} 个项`);
     }
 } 
 
@@ -544,3 +708,24 @@ export function _getCacheTTL(endpoint) {
 
 // 导出配置和映射
 export { CACHE_CONFIG, CACHE_INVALIDATION_MAP };
+
+/** 私有 GET 策略只匹配路径，不受分页/筛选查询串影响。 */
+export function isPrivateApiGet(endpoint) {
+    const path = endpoint.split(/[?#]/)[0];
+    return API.PRIVATE_GET_PATTERNS.some(pattern => pattern.test(path));
+}
+
+/** 一次性移除旧通用私有响应；不处理独立本地记录或公开榜单缓存。 */
+export function purgePrivateApiCache() {
+    const keys = new Set(memoryCache.keys());
+    try {
+        for (let index = 0; index < localStorage.length; index++) keys.add(localStorage.key(index));
+    } catch (_) {}
+    const prefix = CACHE_PREFIX + "api_";
+    for (const fullKey of keys) {
+        if (fullKey?.startsWith(prefix) && isPrivateApiGet(fullKey.slice(prefix.length))) {
+            removeCache(fullKey.slice(CACHE_PREFIX.length));
+        }
+    }
+}
+purgePrivateApiCache();

前端页面/market/列表卡片组件.js

@@ -1,23 +1,29 @@
 // 前端页面/market/列表卡片组件.js
-import { createCommentSection, setupToggleButton, createRatingStars } from "../social/评论与互动组件.js";
-import { api } from "../core/网络请求API.js";
+import { createCommentSection, setupToggleButton, createRatingStars, isValidRatingResponse } from "../social/评论与互动组件.js";
+import { api, captureRequestSession } from "../core/网络请求API.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { recordView, escapeHtml } from "../components/互动工具函数.js";  // 🧹 P2归一：escapeHtml 局部副本已移除
 import { renderItemTrendChart } from "../components/图表渲染组件.js";
 import { getCoverSandboxHTML, setupImageSandboxEvents } from "../components/图片沙盒组件.js";
 import { setupResourceInstall, checkItemStatus } from "./资源安装引擎.js";
-import { showToast, showConfirm } from "../components/UI交互提示组件.js";
+import { showToast } from "../components/UI交互提示组件.js";
 import { openTipModal } from "../profile/个人中心_赞赏组件.js";
 import { renderTipBoardHTML, isMaxTipLevel } from "../components/打赏等级工具.js";
 import { lazyLoadImages } from "../components/性能优化工具.js";
 import { t } from "../components/用户体验增强.js";
-import { getCachedProfile, getProfileWithSWR, CACHE, IS_WEB_MODE } from "../core/全局配置.js";
+import { getCachedProfile, getProfileWithSWR, IS_WEB_MODE } from "../core/全局配置.js";
+import { getUser } from "../core/状态管理.js";
+import { createPurchaseStatusScope, isValidPurchaseStatus } from "./购买状态生命周期.js";
+import { showResourceDeleteDialog } from "./资源删除组件.js";
+import { showResourceRefundDialog } from "./资源退款组件.js";
+
+let nextCardId = 0;
 
 /**
  * 生成价格显示HTML（含待生效价格提示）
  */
 function _generatePriceHTML(itemData, t) {
-    const formatPrice = (price) => price > 0 ? `${price} ${t('market.points')}` : t('market.free');
+    const formatPrice = (price) => price > 0 ? `${escapeHtml(price)} ${t('market.points')}` : t('market.free');
 
     if (itemData.pending_price !== null && itemData.pending_price !== undefined && itemData.pending_price_effective_at) {
         const effectiveTime = new Date(itemData.pending_price_effective_at);
@@ -25,18 +31,18 @@ function _generatePriceHTML(itemData, t) {
         if (effectiveTime > now) {
             const hoursLeft = Math.ceil((effectiveTime - now) / (1000 * 60 * 60));
             return `
-                <span style="float: right;">
-                    <span style="color: #FF9800;">💰 ${formatPrice(itemData.price)}</span>
-                    <span style="margin-left: 5px; font-size: 10px; color: #F44336; background: rgba(244,67,54,0.15); padding: 1px 4px; border-radius: 3px;" title="${hoursLeft}${t('time.hours_later')}">
-                        → ${itemData.pending_price}${t('market.points')}
+                <span class="resource-detail__price">
+                    <span>💰 ${formatPrice(itemData.price)}</span>
+                    <span class="resource-detail__pending-price" title="${hoursLeft}${t('time.hours_later')}">
+                        → ${escapeHtml(itemData.pending_price)}${t('market.points')}
                     </span>
                 </span>
             `;
         } else {
-            return `<span style="float: right; color: #FF9800;">💰 ${formatPrice(itemData.pending_price)}</span>`;
+            return `<span class="resource-detail__price">💰 ${formatPrice(itemData.pending_price)}</span>`;
         }
     } else {
-        return `<span style="float: right; color: #FF9800;">💰 ${formatPrice(itemData.price)}</span>`;
+        return `<span class="resource-detail__price">💰 ${formatPrice(itemData.price)}</span>`;
     }
 }
 
@@ -46,6 +52,10 @@ function _generatePriceHTML(itemData, t) {
  * @param {Object} callbacks - 回调集合 { onName, onAvatar, fallbackName }
  */
 function _loadAuthorProfile(account, { onName, onAvatar, fallbackName } = {}) {
+    if (!account) {
+        onName?.(t('common.unknown_user'));
+        return;
+    }
     const cached = getCachedProfile(account);
     if (cached) {
         if (cached.name && onName) onName(cached.name);
@@ -55,6 +65,7 @@ function _loadAuthorProfile(account, { onName, onAvatar, fallbackName } = {}) {
     }
 
     getProfileWithSWR(account, api.getUserProfile, (profile) => {
+        if (!profile || typeof profile !== "object") return;
         if (profile.name && onName) onName(profile.name);
         if (profile.avatar && onAvatar) onAvatar(profile.avatar);
     });
@@ -62,18 +73,22 @@ function _loadAuthorProfile(account, { onName, onAvatar, fallbackName } = {}) {
 
 export function createItemCard(itemData, currentUser = null, contextType = null) {
     const card = document.createElement("div");
+    const ratingMatches = captureRequestSession();
+    const ratingAccount = currentUser?.account || null;
+    const ratingCurrent = () => card.isConnected && ratingMatches() && (getUser()?.account || null) === ratingAccount;
+    const cardId = `ranking-resource-${++nextCardId}`;
+    card.className = "ranking-item-card";
     card.setAttribute("data-item-id", itemData.id);
-    Object.assign(card.style, {
-        backgroundColor: "var(--comfy-input-bg, #2b2b2b)", borderRadius: "8px", padding: "10px", 
-        marginBottom: "12px", border: "1px solid #444", color: "#fff", fontFamily: "sans-serif"
-    });
 
     // 🚀 核心新增：初始渲染时，动态计算真实的有效评论数（过滤软删除的废弃数据）
     const calcActiveComments = (data) => {
         if (!data || !Array.isArray(data)) return 0;
         return data.reduce((acc, c) => {
+            if (!c || typeof c !== "object" || Array.isArray(c)) return acc;
             const parentCnt = c.isDeleted ? 0 : 1;
-            const repliesCnt = (c.replies || []).filter(r => !r.isDeleted).length;
+            const repliesCnt = Array.isArray(c.replies)
+                ? c.replies.filter(r => r && typeof r === "object" && !Array.isArray(r) && !r.isDeleted).length
+                : 0;
             return acc + parentCnt + repliesCnt;
         }, 0);
     };
@@ -84,34 +99,33 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     // 避免标题容器的 overflow: hidden + ellipsis 在长标题时把徽章一并裁掉
     const installStatus = checkItemStatus(itemData.id, itemData.latest_version);
     const updateBadgeHtml = installStatus.hasUpdate 
-        ? `<span style="flex: none; white-space: nowrap; background: linear-gradient(135deg, #FF9800, #F44336); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; animation: pulse 2s infinite;">🔄 ${t('market.update_available')}</span>` 
+        ? `<span class="card-update-badge">🔄 ${t('market.update_available')}</span>`
         : '';
 
     const summaryView = document.createElement("div");
     summaryView.className = "item-summary";
-    summaryView.style.cursor = "pointer";
     
     // 🚀 核心修改：为评论计数的 span 加上专属的 class，并填入过滤后的真实数量
     // 🚀 布局重构：第1行标题+使用次数，第2行描述，第3行互动数据+发布者信息
     summaryView.innerHTML = `
         <!-- 第1行: 标题 + 更新徽章 + 使用次数 -->
-        <div style="display: flex; align-items: center; margin-bottom: 4px; gap: 6px;">
-            <div style="font-weight: bold; font-size: 14px; color: #4CAF50; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(itemData.title)}</div>
+        <div class="card-summary__title-row">
+            <button type="button" id="${cardId}-toggle" class="card-summary__title card-summary__toggle" aria-expanded="false" aria-controls="${cardId}-details">${escapeHtml(itemData.title || t('item.untitled'))}</button>
             ${updateBadgeHtml}
-            <span style="margin-left: auto; flex: none; font-size: 11px; color: #888; display: flex; align-items: center; gap: 6px;">
-                <span data-stat="uses" style="display: flex; align-items: center; gap: 2px;">📥 ${itemData.uses || 0}</span>
-                <span data-stat="views" style="display: flex; align-items: center; gap: 2px;">🔥 ${itemData.views || 0}</span>
+            <span class="card-summary__top-stats">
+                <span data-stat="uses" class="card-summary__stat">📥 ${escapeHtml(itemData.uses || 0)}</span>
+                <span data-stat="views" class="card-summary__stat">🔥 ${escapeHtml(itemData.views || 0)}</span>
             </span>
         </div>
         <!-- 第2行: 描述 -->
-        <div style="font-size: 12px; color: #aaa; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px;">${escapeHtml(itemData.shortDesc)}</div>
+        <div class="card-summary__description">${escapeHtml(itemData.shortDesc)}</div>
         <!-- 第3行: 互动数据 + 发布者信息 -->
-        <div style="display: flex; align-items: center; gap: 10px; font-size: 11px; color: #888;">
-            <span data-stat="likes">👍 ${itemData.likes || 0}</span> <span data-stat="favorites">🔖 ${itemData.favorites || 0}</span> <span class="card-comment-count">💬 ${initialCommentCount}</span>
-            <span style="margin-left: auto; display: flex; align-items: center; gap: 4px; cursor: pointer;" class="card-author-info">
-                <img class="card-author-avatar" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect fill='%23333' width='40' height='40' rx='20'/%3E%3Ctext x='20' y='25' text-anchor='middle' fill='%23666' font-size='16'%3E%3F%3C/text%3E%3C/svg%3E" style="width: 18px; height: 18px; border-radius: 50%; object-fit: cover;">
-                <span class="card-author-name" style="font-size: 12px; color: #aaa; transition: color 0.2s;">${escapeHtml(itemData.author || '未知')}</span>
-            </span>
+        <div class="card-summary__footer">
+            <span data-stat="likes">👍 ${escapeHtml(itemData.likes || 0)}</span> <span data-stat="favorites">🔖 ${escapeHtml(itemData.favorites || 0)}</span> <span class="card-comment-count">💬 ${escapeHtml(initialCommentCount)}</span>
+            <button type="button" class="card-author-info card-summary__author" ${itemData.author ? '' : 'disabled'}>
+                <img class="card-author-avatar card-summary__avatar" alt="" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect fill='%23333' width='40' height='40' rx='20'/%3E%3Ctext x='20' y='25' text-anchor='middle' fill='%23666' font-size='16'%3E%3F%3C/text%3E%3C/svg%3E">
+                <span class="card-author-name card-summary__author-name">${escapeHtml(itemData.author || t('common.unknown_user'))}</span>
+            </button>
         </div>
     `;
 
@@ -125,7 +139,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
         },
         compact: true
     });
-    ratingCompact.className = "card-rating-compact";
+    ratingCompact.classList.add("card-rating-compact");
     const authorInfoInSummary = summaryView.querySelector(".card-author-info");
     if (authorInfoInSummary && authorInfoInSummary.parentNode) {
         authorInfoInSummary.parentNode.insertBefore(ratingCompact, authorInfoInSummary);
@@ -143,14 +157,6 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
             openOtherUserProfileModal(itemData.author, currentUser);
         };
         
-        // hover效果：发布者名称颜色变亮
-        authorInfoEl.onmouseenter = () => {
-            if (authorNameEl) authorNameEl.style.color = '#4CAF50';
-        };
-        authorInfoEl.onmouseleave = () => {
-            if (authorNameEl) authorNameEl.style.color = '#aaa';
-        };
-        
         // 使用统一辅助函数加载作者资料
         _loadAuthorProfile(itemData.author, {
             onName: (name) => { authorNameEl.textContent = name; },
@@ -160,15 +166,20 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     }
 
     const detailView = document.createElement("div");
-    Object.assign(detailView.style, { display: "none", marginTop: "12px", paddingTop: "12px", borderTop: "1px dashed #555" });
+    detailView.id = `${cardId}-details`;
+    detailView.hidden = true;
+    detailView.setAttribute("role", "region");
+    detailView.setAttribute("aria-labelledby", `${cardId}-toggle`);
+    detailView.className = "resource-detail";
+    detailView.style.display = "none";
 
     const authorInfo = document.createElement("div");
-    Object.assign(authorInfo.style, { fontSize: "12px", color: "#ccc", marginBottom: "10px" });
+    authorInfo.className = "resource-detail__author";
     
     // 🔄 P7后悔模式：检查是否有待生效价格
     const priceHtml = _generatePriceHTML(itemData, t);
     
-    authorInfo.innerHTML = `${t('market.author')}: <span class="author-name-link" style="color: #2196F3; cursor: pointer; text-decoration: underline;">${t('common.loading')}...</span> ${priceHtml}`;
+    authorInfo.innerHTML = `${t('market.author')}: <button type="button" class="author-name-link card-author-link" ${itemData.author ? '' : 'disabled'}>${t('common.loading')}...</button> ${priceHtml}`;
     detailView.appendChild(authorInfo);
 
     const nameDOM = authorInfo.querySelector('.author-name-link');
@@ -183,12 +194,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     // 原创内容标识
     if (itemData.is_original) {
         const originalBadge = document.createElement("div");
-        Object.assign(originalBadge.style, {
-            display: "inline-flex", alignItems: "center", gap: "6px",
-            padding: "4px 12px", background: "linear-gradient(135deg, #FF6B35, #FF8F00)",
-            borderRadius: "12px", fontSize: "11px", color: "#fff", fontWeight: "500",
-            marginBottom: "10px"
-        });
+        originalBadge.className = "resource-detail__badge resource-detail__badge--original";
         originalBadge.textContent = "🎨 " + t('publish.mark_original');
         detailView.appendChild(originalBadge);
     }
@@ -196,38 +202,35 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     // 支持退款标识（仅工具、Skill和应用类型显示，且允许退款时）
     if (itemData.allow_refund !== false && (itemData.type === 'tool' || itemData.type === 'skill' || itemData.type === 'app')) {
         const refundBadge = document.createElement("div");
-        Object.assign(refundBadge.style, {
-            display: "inline-flex", alignItems: "center", gap: "6px",
-            padding: "4px 12px", background: "linear-gradient(135deg, #4CAF50, #2E7D32)",
-            borderRadius: "12px", fontSize: "11px", color: "#fff", fontWeight: "500",
-            marginBottom: "10px", marginLeft: "8px"
-        });
+        refundBadge.className = "resource-detail__badge resource-detail__badge--refundable";
         refundBadge.textContent = `🛡️ ${t('item.refundable')}`;
         detailView.appendChild(refundBadge);
     }
 
     const actionArea = document.createElement("div");
-    Object.assign(actionArea.style, { display: "flex", gap: "8px", marginBottom: "12px" });
+    actionArea.className = "resource-detail__actions";
     const btnLike = document.createElement("button");
-    Object.assign(btnLike.style, { flex: "1", padding: "6px", background: "transparent", border: "1px solid #555", borderRadius: "4px", cursor: "pointer", color: "#aaa" });
+    btnLike.type = "button";
     const btnFav = document.createElement("button");
-    Object.assign(btnFav.style, { flex: "1", padding: "6px", background: "transparent", border: "1px solid #555", borderRadius: "4px", cursor: "pointer", color: "#aaa" });
+    btnFav.type = "button";
     
     // 🚀 根据安装状态显示不同的按钮样式（installStatus 已在上方声明）
     const btnUse = document.createElement("button");
+    btnUse.type = "button";
+    btnUse.className = "resource-detail__button resource-detail__use";
     
     if (installStatus.hasUpdate) {
         // 有更新可用
-        Object.assign(btnUse.style, { flex: "1", padding: "6px", background: "#FF9800", border: "none", borderRadius: "4px", cursor: "pointer", color: "white", fontWeight: "bold" });
+        btnUse.classList.add("resource-detail__button--warning");
         btnUse.innerHTML = `♻️ ${t('market.update_available')}`;
     } else if (installStatus.installed) {
         // 已安装
-        Object.assign(btnUse.style, { flex: "1", padding: "6px", background: "#4CAF50", border: "none", borderRadius: "4px", cursor: "pointer", color: "white", fontWeight: "bold" });
+        btnUse.classList.add("resource-detail__button--success");
         btnUse.innerHTML = `✅ ${t('market.installed')}`;
     } else {
         // 未安装
-        Object.assign(btnUse.style, { flex: "1", padding: "6px", background: "#2196F3", border: "none", borderRadius: "4px", cursor: "pointer", color: "white", fontWeight: "bold" });
-        btnUse.innerHTML = `🚀 ${t('market.get_now')} ${itemData.uses ? '(' + itemData.uses + ')' : ''}`;
+        btnUse.classList.add("resource-detail__button--primary");
+        btnUse.textContent = `🚀 ${t('market.get_now')} ${itemData.uses ? '(' + itemData.uses + ')' : ''}`;
     }
 
     actionArea.appendChild(btnLike); actionArea.appendChild(btnFav); actionArea.appendChild(btnUse);
@@ -243,9 +246,13 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
         },
         currentUser: currentUser,
         authorAccount: itemData.author,
-        onRate: async (score) => {
+        isCurrent: ratingCurrent,
+        onRate: async (score, requestContext) => {
+            const current = () => ratingCurrent() && (!requestContext || requestContext.isCurrent());
+            if (!current()) return null;
             const res = await api.rateItem(itemData.id, score);
-            if (res && res.status === "success") {
+            if (!current()) return null;
+            if (isValidRatingResponse(res, score)) {
                 itemData.rating_avg = res.rating_avg;
                 itemData.rating_count = res.rating_count;
                 itemData.rating_dist = res.rating_dist;
@@ -264,7 +271,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
                         },
                         compact: true
                     });
-                    newCompact.className = "card-rating-compact";
+                    newCompact.classList.add("card-rating-compact");
                     oldCompact.parentNode.replaceChild(newCompact, oldCompact);
                 }
             }
@@ -278,49 +285,67 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     const isFav = currentUser && Array.isArray(itemData.favorited_by) && itemData.favorited_by.includes(currentUser.account);
 
     const handleInteraction = async (type, isActive) => {
-        if (!currentUser) { showToast(`⚠️ ${t('feedback.login_required')}`, "warning"); throw new Error("User not logged in"); }
-        await api.toggleInteraction(itemData.id, currentUser.account, type, isActive);
+        if (!currentUser?.account) {
+            showToast(t('feedback.login_required'), "warning");
+            return { status: "cancelled" };
+        }
+        const response = await api.toggleInteraction(itemData.id, currentUser.account, type, isActive);
+        if (response?.status === "success" && Number.isSafeInteger(response.new_count) && response.new_count >= 0) {
+            const membershipKey = type === "like" ? "liked_by" : "favorited_by";
+            const countKey = type === "like" ? "likes" : "favorites";
+            const previousMembers = Array.isArray(itemData[membershipKey]) ? itemData[membershipKey] : [];
+            const members = previousMembers.filter(account => account !== currentUser.account);
+            if (isActive) members.push(currentUser.account);
+            itemData[membershipKey] = members;
+            itemData[countKey] = response.new_count;
+            const summaryCount = summaryView.querySelector(type === "like" ? '[data-stat="likes"]' : '[data-stat="favorites"]');
+            if (summaryCount) summaryCount.textContent = `${type === "like" ? "👍" : "🔖"} ${response.new_count}`;
+        }
+        return response ?? { status: "error" };
     };
 
     setupToggleButton(btnLike, isLiked, itemData.likes || 0, `👍 ${t('market.liked')}`, `👍 ${t('market.like')}`, "#FF5722", (isActive) => handleInteraction("like", isActive));
     setupToggleButton(btnFav, isFav, itemData.favorites || 0, `🔖 ${t('market.favorited')}`, `🔖 ${t('market.favorite')}`, "#FFC107", (isActive) => handleInteraction("favorite", isActive));
 
     const inlineStatusBox = document.createElement("div");
-    Object.assign(inlineStatusBox.style, { display: "none", margin: "0 0 15px 0", padding: "12px", background: "#222", border: "1px solid #444", borderRadius: "6px", fontSize: "12px", lineHeight: "1.5" });
+    inlineStatusBox.className = "resource-detail__status";
+    inlineStatusBox.style.display = "none";
     detailView.appendChild(inlineStatusBox);
     setupResourceInstall(btnUse, itemData, currentUser, inlineStatusBox);
 
     const mediaArea = document.createElement("div");
     const chartContainerId = `chart-${Math.random().toString(36).substr(2, 9)}`;
-    const chartHtml = `<div style="font-size: 12px; font-weight: bold; margin-bottom: 6px; color: #aaa;">📈 ${t('market.usage_trend')}</div><div id="${chartContainerId}" style="width: 100%; height: 160px; background: var(--comfy-menu-bg); border: 1px solid var(--border-color, #333); border-radius: 4px; margin-bottom: 12px;"></div>`;
+    const chartHtml = `<div class="resource-detail__heading">📈 ${t('market.usage_trend')}</div><div id="${chartContainerId}" class="resource-detail__chart"></div>`;
     
     mediaArea.innerHTML = `
         ${chartHtml}
         ${getCoverSandboxHTML(itemData.imageUrls?.length > 0 ? itemData.imageUrls : itemData.coverUrl)}
-        <div style="font-size: 12px; font-weight: bold; margin-bottom: 6px; color: #aaa;">📝 ${t('market.full_description')}</div>
-        <div style="background: var(--comfy-menu-bg); padding: 10px; border-radius: 4px; font-size: 12px; color: #bbb; margin-bottom: 12px; max-height: 200px; overflow-y: auto; line-height: 1.6; border: 1px solid var(--border-color, #333); word-wrap: break-word; white-space: pre-wrap;">${escapeHtml(itemData.fullDesc)}</div>
+        <div class="resource-detail__heading">📝 ${t('market.full_description')}</div>
+        <div class="resource-detail__description">${escapeHtml(itemData.fullDesc)}</div>
     `;
     detailView.appendChild(mediaArea);
 
     // 🚀 新增：赞赏贡献榜单与打赏按钮（带等级显示）
     const tipArea = document.createElement("div");
-    Object.assign(tipArea.style, { marginBottom: "12px", padding: "12px", background: "var(--comfy-menu-bg)", border: "1px solid var(--border-color, #333)", borderRadius: "6px" });
+    tipArea.className = "resource-detail__tips";
     
     // 使用统一的打赏榜单渲染工具（带星星/月亮/太阳等级）
-    const boardData = itemData.tip_board || [];
+    const boardData = Array.isArray(itemData.tip_board)
+        ? itemData.tip_board.filter(entry => entry && typeof entry === "object" && !Array.isArray(entry))
+        : [];
     const boardHtml = renderTipBoardHTML(boardData, 5, t('market.no_tips_yet'), "small");
     
     tipArea.innerHTML = `
-        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
-            <div style="font-size:12px; font-weight:bold; color:#E91E63;">💖 ${t('market.tip_board')} (TOP 5)</div>
-            <button id="btn-tip-item-${itemData.id}" style="background:#E91E63; color:white; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:11px; font-weight:bold;">💰 ${t('market.tip')}</button>
+        <div class="resource-detail__tip-header">
+            <div class="resource-detail__heading resource-detail__tip-heading">💖 ${t('market.tip_board')} (TOP 5)</div>
+            <button type="button" class="btn-tip-item resource-detail__button resource-detail__button--tip">💰 ${t('market.tip')}</button>
         </div>
         ${boardHtml}
     `;
     detailView.appendChild(tipArea);
     
     // 🚀 绑定打赏按钮事件
-    tipArea.querySelector(`#btn-tip-item-${itemData.id}`).onclick = (e) => {
+    tipArea.querySelector('.btn-tip-item').onclick = (e) => {
         e.stopPropagation();
         if (!currentUser) return showToast(t('feedback.login_required'), "warning");
         // 🐛 Bug修复：防御性校验，防止 itemId 为空
@@ -328,32 +353,31 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
             console.warn('⚠️ 列表卡片: itemData.id 为空，已拦截无效打赏请求');
             return showToast(t('item.invalid_id_tip'), "error");
         }
-        openTipModal(currentUser, { account: itemData.author }, async (newBalance) => {
-            // 🐛 Bug修复：确保打赏后余额即时同步
-            if (newBalance !== undefined && newBalance !== null) {
-                currentUser.balance = newBalance;
-            } else {
-                // 后备：如果回调未传余额，主动调用getWallet刷新
-                try {
-                    const walletRes = await api.getWallet(currentUser.account, { noCache: true });
-                    if (walletRes && walletRes.status === "success") {
-                        currentUser.balance = walletRes.balance;
-                    }
-                } catch (e) { /* 静默失败 */ }
-            }
-        }, itemData.id);
+        openTipModal(currentUser, { account: itemData.author }, undefined, itemData.id,
+            { isCurrent: () => card.isConnected });
     };
 
     // 🔄 P7后悔模式：退款区域（仅在"我购买的"列表中显示）
     const refundArea = document.createElement("div");
     refundArea.id = `refund-area-${itemData.id}`;
-    Object.assign(refundArea.style, { display: "none", marginBottom: "12px" });
+    refundArea.className = "resource-detail__refund";
+    refundArea.style.display = "none";
     detailView.appendChild(refundArea);
 
     let isRendered = false;
-    summaryView.onclick = async () => {
-        const isHidden = detailView.style.display === "none";
-        detailView.style.display = isHidden ? "block" : "none";
+    const toggleButton = summaryView.querySelector('.card-summary__toggle');
+    const setExpanded = (expanded) => {
+        if (!expanded && detailView.contains(document.activeElement)) toggleButton.focus();
+        detailView.hidden = !expanded;
+        detailView.style.display = expanded ? "block" : "none";
+        toggleButton.setAttribute("aria-expanded", String(expanded));
+    };
+    summaryView.onclick = (event) => {
+        // 摘要中的作者、评分等独立控件不触发折叠；标题按钮使用浏览器原生键盘行为。
+        const control = event.target.closest('button, a, input, select, textarea, [role="button"]');
+        if (control && control !== toggleButton) return;
+        const isHidden = detailView.hidden;
+        setExpanded(isHidden);
 
         if (isHidden && !isRendered) {
             renderItemTrendChart(detailView.querySelector(`#${chartContainerId}`), itemData);
@@ -367,7 +391,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
             recordView(api.recordItemView, itemData.id, 'item', (result) => {
                 if (result?.views !== undefined) {
                     const viewsEl = summaryView.querySelector('[data-stat="views"]');
-                    if (viewsEl) viewsEl.innerHTML = `🔥 ${result.views}`;
+                    if (viewsEl) viewsEl.textContent = `🔥 ${result.views}`;
                 }
             });
             
@@ -377,9 +401,16 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
             }
         }
     };
+    detailView.addEventListener("keydown", (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        event.preventDefault();
+        event.stopPropagation();
+        setExpanded(false);
+        toggleButton.focus();
+    });
 
     const commentsContainer = document.createElement("div");
-    commentsContainer.style.height = "250px"; 
+    commentsContainer.className = "resource-detail__comments";
     
     // 🚀 核心修改：传入一个回调函数，当组件内部发送/删除留言时，外部的数字能实时响应刷新！
     // 🚀 P0安全修复：传递 itemData.author 作为 contentAuthor，使内容作者可以删除其内容下的评论
@@ -393,12 +424,12 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
 
     if (currentUser && currentUser.account === itemData.author) {
         const authorActionArea = document.createElement("div");
-        Object.assign(authorActionArea.style, { display: "flex", gap: "10px", marginTop: "15px", paddingTop: "15px", borderTop: "1px dashed #555" });
+        authorActionArea.className = "resource-detail__manage";
         
         authorActionArea.innerHTML = `
-            <div style="flex: 1; font-size: 12px; color: #FF9800; display: flex; align-items: center; font-weight: bold;">👑 ${t('market.creator_manage')}</div>
-            ${IS_WEB_MODE ? '' : `<button id="btn-edit-item" style="padding: 6px 12px; background: #2196F3; border: none; border-radius: 4px; color: white; cursor: pointer; font-weight: bold; font-size: 12px; transition: 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">✏️ ${t('market.edit_content')}</button>`}
-            <button id="btn-del-item" style="padding: 6px 12px; background: #F44336; border: none; border-radius: 4px; color: white; cursor: pointer; font-weight: bold; font-size: 12px; transition: 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">🗑️ ${t('market.delete_permanently')}</button>
+            <div class="resource-detail__manage-title">👑 ${t('market.creator_manage')}</div>
+            ${IS_WEB_MODE ? '' : `<button type="button" id="btn-edit-item" class="resource-detail__button resource-detail__button--primary">✏️ ${t('market.edit_content')}</button>`}
+            <button type="button" id="btn-del-item" class="resource-detail__button resource-detail__button--danger">🗑️ ${t('market.delete_permanently')}</button>
         `;
         
         // 📱 Web 模式不渲染编辑按钮，此处需空值保护
@@ -410,15 +441,8 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
         
         authorActionArea.querySelector("#btn-del-item").onclick = async (e) => {
             e.stopPropagation();
-            if (await showConfirm(t('market.delete_confirm'))) {
-                try {
-                    await api.deleteItem(itemData.id, currentUser.account);
-                    showToast(t('feedback.deleted'), "success");
-                    window.dispatchEvent(new CustomEvent("comfy-trigger-sidebar-reload")); 
-                } catch (err) {
-                    showToast(`${t('feedback.delete_failed')}: ${err.message}`, "error");
-                }
-            }
+            await showResourceDeleteDialog({ itemData, currentUser, isCurrent: () => card.isConnected,
+                onDeleted: () => window.dispatchEvent(new CustomEvent("comfy-trigger-sidebar-reload")) });
         };
         detailView.appendChild(authorActionArea);
     }
@@ -440,12 +464,16 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
  */
 async function loadRefundStatus(refundArea, itemData, currentUser, card) {
     if (!refundArea || !currentUser) return;
+    const scope = createPurchaseStatusScope(refundArea, currentUser.account);
+    if (!scope.isCurrent()) return;
     
     refundArea.style.display = "block";
-    refundArea.innerHTML = `<div style="padding: 10px; color: #888; font-size: 12px;">⏳ 加载购买状态...</div>`;
+    refundArea.innerHTML = `<div class="resource-detail__refund-loading">⏳ ${t('item.purchase_status_loading')}</div>`;
     
     try {
-        const statusRes = await api.getPurchaseStatus(currentUser.account, itemData.id);
+        const statusRes = await api.getPurchaseStatus(currentUser.account, itemData.id, scope.readOptions);
+        if (!scope.isCurrent()) return;
+        if (!isValidPurchaseStatus(statusRes)) throw new Error();
         
         if (!statusRes.owned) {
             refundArea.innerHTML = '';
@@ -453,40 +481,42 @@ async function loadRefundStatus(refundArea, itemData, currentUser, card) {
             return;
         }
         
-        if (statusRes.can_refund) {
-            const hoursLeft = statusRes.refund_hours_left;
+        if (statusRes.can_refund && statusRes.allow_refund) {
+            const hoursLeft = Number(statusRes.refund_hours_left);
+            if (!Number.isFinite(hoursLeft) || hoursLeft < 0) throw new Error("Invalid refund hours");
             refundArea.innerHTML = `
-                <div style="padding: 12px; background: rgba(255,152,0,0.1); border: 1px dashed #FF9800; border-radius: 6px;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
-                        <div style="font-size: 12px; color: #FF9800;">
-                            🔄 后悔模式：还剩 <strong>${hoursLeft.toFixed(1)}</strong> 小时可申请退款
+                <div class="resource-detail__refund-panel">
+                    <div class="resource-detail__refund-header">
+                        <div class="resource-detail__refund-copy">
+                            🔄 ${t('item.regret_mode')}${t('item.hours_left', { hours: hoursLeft.toFixed(1) })}
                         </div>
-                        <button id="btn-refund-${itemData.id}" style="background: #FF5722; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; transition: 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
-                            💸 申请退款
+                        <button type="button" class="btn-refund-item resource-detail__button resource-detail__button--warning">
+                            💸 ${t('item.apply_refund')}
                         </button>
                     </div>
-                    <div style="font-size: 11px; color: #888; margin-top: 8px;">
-                        ⚠️ 退款后权限将被收回，已下载的文件将被删���，且 <strong>30天内禁止再次购买</strong> 此商品
+                    <div class="resource-detail__refund-warning">
+                        ⚠️ ${t('item.refund_warning')}
                     </div>
                 </div>
             `;
             
-            const refundBtn = refundArea.querySelector(`#btn-refund-${itemData.id}`);
+            const refundBtn = refundArea.querySelector('.btn-refund-item');
             if (refundBtn) {
                 refundBtn.onclick = (e) => {
                     e.stopPropagation();
+                    if (!scope.isCurrent()) return;
                     showRefundConfirm(itemData, currentUser, statusRes.price_paid, card);
                 };
             }
         } else {
             refundArea.innerHTML = `
-                <div style="padding: 10px; background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.3); border-radius: 6px; font-size: 12px; color: #4CAF50;">
-                    ✅ 已购买此资源，退款窗口已过期
+                <div class="resource-detail__refund-expired">
+                    ✅ ${t('item.refund_expired')}
                 </div>
             `;
         }
     } catch (e) {
-        console.warn("获取购买状态失败:", e);
+        if (!scope.isCurrent()) return;
         refundArea.innerHTML = '';
         refundArea.style.display = "none";
     }
@@ -496,93 +526,16 @@ async function loadRefundStatus(refundArea, itemData, currentUser, card) {
  * 显示退款确认弹窗
  */
 function showRefundConfirm(itemData, currentUser, pricePaid, card) {
-    const overlay = document.createElement("div");
-    overlay.id = "refund-confirm-overlay";
-    Object.assign(overlay.style, {
-        position: "fixed", top: "0", left: "0", right: "0", bottom: "0",
-        background: "rgba(0,0,0,0.7)", display: "flex", alignItems: "center", justifyContent: "center",
-        zIndex: "10000"
-    });
-    
-    overlay.innerHTML = `
-        <div style="background: #1e2233; border-radius: 12px; padding: 25px; max-width: 420px; width: 90%; color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.5);">
-            <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px; color: #FF5722; display: flex; align-items: center; gap: 10px;">
-                ⚠️ 确认退款
-            </div>
-            
-            <div style="background: #2a2d3e; border-radius: 8px; padding: 15px; margin-bottom: 15px;">
-                <div style="font-size: 14px; margin-bottom: 10px;">商品：<strong>${escapeHtml(itemData.title || '未命名资源')}</strong></div>
-                <div style="font-size: 14px; color: #4CAF50;">退款金额：<strong>${pricePaid}</strong> 积分</div>
-            </div>
-            
-            <div style="background: rgba(255,87,34,0.1); border: 1px solid rgba(255,87,34,0.3); border-radius: 8px; padding: 15px; margin-bottom: 20px;">
-                <div style="font-size: 13px; color: #FF9800; line-height: 1.8;">
-                    <div>🚨 <strong>退款后果：</strong></div>
-                    <div style="margin-left: 20px; margin-top: 5px;">
-                        • 您将失去此资源的访问权限<br>
-                        • 已下载的文件将被自动删除<br>
-                        • <strong style="color: #F44336;">30天内禁止再次购买此商品</strong>
-                    </div>
-                </div>
-            </div>
-            
-            <div style="display: flex; gap: 12px; justify-content: flex-end;">
-                <button id="btn-cancel-refund" style="background: #555; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: 0.2s;" onmouseover="this.style.background='#666'" onmouseout="this.style.background='#555'">
-                    取消
-                </button>
-                <button id="btn-confirm-refund" style="background: #FF5722; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; transition: 0.2s;" onmouseover="this.style.background='#E64A19'" onmouseout="this.style.background='#FF5722'">
-                    确认退款
-                </button>
-            </div>
-        </div>
-    `;
-    
-    document.body.appendChild(overlay);
-    
-    overlay.querySelector("#btn-cancel-refund").onclick = () => overlay.remove();
-    
-    overlay.querySelector("#btn-confirm-refund").onclick = async () => {
-        const confirmBtn = overlay.querySelector("#btn-confirm-refund");
-        confirmBtn.disabled = true;
-        confirmBtn.innerText = "处理中...";
-        
-        try {
-            const res = await api.requestRefund(currentUser.account, itemData.id);
-            if (res.status === "success") {
-                // 清除本地购买记录
-                const key = CACHE.LOCAL_KEYS.ACQUIRED_ITEMS;
-                const acquiredItems = JSON.parse(localStorage.getItem(key) || '[]');
-                const updated = acquiredItems.filter(i => i.id !== itemData.id);
-                localStorage.setItem(key, JSON.stringify(updated));
-                
-                // 从DOM中移除卡片
-                if (card && card.parentNode) {
-                    card.remove();
-                }
-                
-                overlay.innerHTML = `
-                    <div style="background: #1e2233; border-radius: 12px; padding: 25px; max-width: 380px; width: 90%; color: #fff; text-align: center;">
-                        <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
-                        <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #4CAF50;">退款成功</div>
-                        <div style="font-size: 14px; color: #aaa; margin-bottom: 20px;">
-                            ${res.refund_amount} 积分已退还到您的账户<br>
-                            <span style="color: #FF9800;">${res.ban_days}天内禁止再次购买此商品</span>
-                        </div>
-                        <button id="btn-close-refund" style="background: #4CAF50; color: #fff; border: none; padding: 10px 30px; border-radius: 6px; cursor: pointer; font-size: 14px;">
-                            知道了
-                        </button>
-                    </div>
-                `;
-                overlay.querySelector("#btn-close-refund").onclick = () => overlay.remove();
-                
-                showToast("退款成功！积分已退还", "success");
-            } else {
-                showToast("退款失败：" + (res.detail || "未知错误"), "error");
-                overlay.remove();
-            }
-        } catch (e) {
-            showToast("退款请求失败：" + (e.message || "网络错误"), "error");
-            overlay.remove();
+    let nextFocus;
+    return showResourceRefundDialog({
+        itemData, currentUser, pricePaid, isCurrent: () => !!card?.isConnected,
+        onRefunded: () => {
+            nextFocus = (card?.nextElementSibling || card?.previousElementSibling)?.querySelector('.card-summary__toggle');
+            card?.remove();
+        },
+        onClosed: () => {
+            const target = nextFocus?.isConnected ? nextFocus : document.querySelector('.comfy-ranking-root .card-summary__toggle');
+            target?.focus();
         }
-    };
-}
+    });
+}

前端页面/market/创作者卡片组件.js

@@ -48,7 +48,7 @@ let currentExpandedCard = null;
  * @param {object} currentUser - 当前登录用户
  * @param {Function} onTipSuccess - 打赏成功回调
  */
-async function handleTipCreator(creatorData, currentUser, onTipSuccess) {
+async function handleTipCreator(creatorData, currentUser, onTipSuccess, parentCurrent) {
     // 检查用户是否登录
     if (!currentUser) {
         showToast(t('creator.tip_login_required'), "warning");
@@ -66,15 +66,9 @@ async function handleTipCreator(creatorData, currentUser, onTipSuccess) {
         account: creatorData.account,
         name: creatorData.name
     }, (newBalance) => {
-        // 🐛 Bug修复：打赏成功后同步余额并通知其他组件
-        if (newBalance !== undefined && newBalance !== null) {
-            currentUser.balance = newBalance;
-        }
-        // 派发全局余额更新事件
-        window.dispatchEvent(new CustomEvent('comfy-wallet-update', { detail: { balance: currentUser.balance } }));
         // 执行原有成功回调
         if (onTipSuccess) onTipSuccess();
-    });
+    }, null, { isCurrent: parentCurrent });
 }
 
 function loadECharts() {
@@ -138,7 +132,7 @@ export function createTipBoardSection(tipBoard = [], title = "🎁 赞赏贡献
         if (creatorData) {
             const tipBtn = container.querySelector('#btn-tip-creator-empty');
             if (tipBtn) {
-                tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess);
+                tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess, () => container.isConnected);
             }
         }
         
@@ -210,7 +204,7 @@ export function createTipBoardSection(tipBoard = [], title = "🎁 赞赏贡献
     if (creatorData) {
         const tipBtn = container.querySelector('#btn-tip-creator');
         if (tipBtn) {
-            tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess);
+            tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess, () => container.isConnected);
         }
     }
 

前端页面/market/发布内容_UI模板.js

@@ -3,141 +3,127 @@ import { escapeHtml } from "../core/全局配置.js";
 
 export function generatePublishHTML(isEditMode, viewTitle, submitBtnText, hasExistingToken, editItemData, t) {
     const safeData = editItemData || {};
-    
+
     return `
-        <style>.form-input{width:100%;padding:8px;background:var(--comfy-input-bg);border:1px solid #555;color:#fff;border-radius:4px;box-sizing:border-box;}</style>
-        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 5px; border-bottom: 1px solid #444; padding-bottom: 15px;">
-            <!-- 🚀 返回按钮位置可调整参数：margin-left 控制右移，margin-top 控制下移 -->
-            <button id="btn-back" style="margin-left: 15px; margin-top: 15px; background: rgba(51,51,51,0.8); border: 1px solid rgba(85,85,85,0.8); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: 0.2s;" onmouseover="this.style.background='#4CAF50'; this.style.borderColor='#4CAF50'" onmouseout="this.style.background='rgba(51,51,51,0.8)'; this.style.borderColor='rgba(85,85,85,0.8)'">
-                ⬅ ${t('common.back')}
-            </button>
-            <span style="font-size: 16px; font-weight: bold; color: #fff;">${escapeHtml(viewTitle)}</span>
-        </div>
+        <section class="ranking-publish" aria-labelledby="publish-view-title">
+        <header class="ranking-publish__header">
+            <button type="button" id="btn-back" class="ranking-publish__back">⬅ ${escapeHtml(t('common.back'))}</button>
+            <h2 id="publish-view-title" class="ranking-publish__title">${escapeHtml(viewTitle)}</h2>
+        </header>
 
-        <div style="display: flex; gap: 10px; margin-bottom: 5px;">
-            <div style="flex: 1;">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.main_category')} <span style="color: #F44336;">*</span></label>
-                <select id="pub-type" class="form-input">
-                    <option value="tool">🧰 ${t('publish.type_tool')}</option>
-                    <option value="skill">⚡ ${t('publish.type_skill')}</option>
-                    <option value="app">📦 ${t('publish.type_app')}</option>
-                    <option value="recommend">🌟 ${t('publish.type_recommend')}</option>
+        <div class="ranking-publish__row">
+            <div class="ranking-publish__field">
+                <label for="pub-type">${escapeHtml(t('publish.main_category'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <select id="pub-type" class="form-input" aria-required="true">
+                    <option value="tool">🧰 ${escapeHtml(t('publish.type_tool'))}</option>
+                    <option value="skill">⚡ ${escapeHtml(t('publish.type_skill'))}</option>
+                    <option value="app">📦 ${escapeHtml(t('publish.type_app'))}</option>
+                    <option value="recommend">🌟 ${escapeHtml(t('publish.type_recommend'))}</option>
                 </select>
             </div>
-            <div id="box-recommend-type" style="display: none; flex: 1;">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.recommend_form')} <span style="color: #F44336;">*</span></label>
-                <select id="pub-recommend-type" class="form-input">
-                    <option value="recommend_tool">🧰 ${t('publish.recommend_as_tool')}</option>
-                    <option value="recommend_skill">⚡ ${t('publish.recommend_as_skill')}</option>
-                    <option value="recommend_app">📦 ${t('publish.recommend_as_app')}</option>
-                    <option value="recommend_link">🔗 ${t('publish.recommend_as_link')}</option>
+            <div id="box-recommend-type" class="ranking-publish__field" style="display: none;">
+                <label for="pub-recommend-type">${escapeHtml(t('publish.recommend_form'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <select id="pub-recommend-type" class="form-input" aria-required="true">
+                    <option value="recommend_tool">🧰 ${escapeHtml(t('publish.recommend_as_tool'))}</option>
+                    <option value="recommend_skill">⚡ ${escapeHtml(t('publish.recommend_as_skill'))}</option>
+                    <option value="recommend_app">📦 ${escapeHtml(t('publish.recommend_as_app'))}</option>
+                    <option value="recommend_link">🔗 ${escapeHtml(t('publish.recommend_as_link'))}</option>
                 </select>
             </div>
-            <div style="flex: 2;">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.name')} <span style="color: #F44336;">*</span></label>
-                <input type="text" id="pub-title" placeholder="${t('publish.name_placeholder')}" required class="form-input">
+            <div class="ranking-publish__field ranking-publish__field--wide">
+                <label for="pub-title">${escapeHtml(t('publish.name'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <input type="text" id="pub-title" placeholder="${escapeHtml(t('publish.name_placeholder'))}" required class="form-input">
             </div>
         </div>
 
-        <div style="margin-bottom: 5px;">
-            <label style="display: block; margin-bottom: 5px;">${t('publish.short_desc')} <span style="color: #F44336;">*</span></label>
-            <input type="text" id="pub-short" placeholder="${t('publish.short_desc_placeholder')}" maxlength="50" required class="form-input">
+        <div class="ranking-publish__field">
+            <label for="pub-short">${escapeHtml(t('publish.short_desc'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+            <input type="text" id="pub-short" placeholder="${escapeHtml(t('publish.short_desc_placeholder'))}" maxlength="50" required class="form-input">
         </div>
 
-        <div style="display: flex; gap: 10px; margin-bottom: 5px; background: var(--comfy-input-bg); padding: 10px; border-radius: 4px; border: 1px dashed #555;">
-            <div style="flex: 1;" id="box-resource-select">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.resource_type')} <span style="color: #F44336;">*</span></label>
-                <select id="pub-resource-type" class="form-input">
-                    <option value="link">🔗 ${t('publish.resource_link')}</option>
-                    <option value="json">📄 ${t('publish.resource_json')}</option>
-                    <option value="netdisk">☁️ ${t('publish.resource_netdisk')}</option>
+        <div class="ranking-publish__row ranking-publish__panel">
+            <div class="ranking-publish__field" id="box-resource-select">
+                <label for="pub-resource-type">${escapeHtml(t('publish.resource_type'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <select id="pub-resource-type" class="form-input" aria-required="true">
+                    <option value="link">🔗 ${escapeHtml(t('publish.resource_link'))}</option>
+                    <option value="json">📄 ${escapeHtml(t('publish.resource_json'))}</option>
+                    <option value="netdisk">☁️ ${escapeHtml(t('publish.resource_netdisk'))}</option>
                 </select>
             </div>
-            <div style="flex: 2;" id="box-link">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.source_url')} <span style="color: #F44336;">*</span></label>
-                <input type="text" id="pub-link" placeholder="${t('publish.source_url_placeholder')}" class="form-input">
+            <div class="ranking-publish__field ranking-publish__field--wide" id="box-link">
+                <label for="pub-link">${escapeHtml(t('publish.source_url'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <input type="text" id="pub-link" placeholder="${escapeHtml(t('publish.source_url_placeholder'))}" class="form-input" aria-required="true">
             </div>
-            <div style="flex: 2; display: none;" id="box-json">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.select_json')} <span style="color: #F44336;">*</span> <span id="json-file-hint" style="color:#4CAF50; font-size:12px; font-weight:normal; display:none;">(${t('publish.has_cloud_file')})</span></label>
-                <input type="file" id="pub-json" accept=".json" style="width: 100%; padding: 6px; color: #aaa; font-size: 12px;">
+            <div class="ranking-publish__field ranking-publish__field--wide" id="box-json" style="display: none;">
+                <label for="pub-json">${escapeHtml(t('publish.select_json'))} <span class="ranking-publish__required" aria-hidden="true">*</span> <span id="json-file-hint" class="ranking-publish__file-hint" style="display: none;">(${escapeHtml(t('publish.has_cloud_file'))})</span></label>
+                <input type="file" id="pub-json" accept=".json" aria-describedby="json-file-hint" class="ranking-publish__file">
             </div>
-            <div style="flex: 2; display: none;" id="box-netdisk">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.netdisk_link')} <span style="color: #F44336;">*</span></label>
-                <input type="text" id="pub-netdisk-link" placeholder="${t('publish.netdisk_placeholder')}" class="form-input">
+            <div class="ranking-publish__field ranking-publish__field--wide" id="box-netdisk" style="display: none;">
+                <label for="pub-netdisk-link">${escapeHtml(t('publish.netdisk_link'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <input type="text" id="pub-netdisk-link" placeholder="${escapeHtml(t('publish.netdisk_placeholder'))}" class="form-input" aria-required="true">
             </div>
         </div>
 
-        <div id="netdisk-password-settings" style="margin-bottom: 5px; background: var(--comfy-input-bg); padding: 10px; border-radius: 4px; border: 1px dashed #555; display: none;">
-            <div style="display: flex; gap: 10px; align-items: flex-start;">
-                <div style="flex: 1;">
-                    <label style="display: block; margin-bottom: 6px; color: #FF9800; font-weight: bold;">🔐 ${t('publish.netdisk_password')}</label>
-                    <input type="text" id="pub-netdisk-password" placeholder="${t('publish.netdisk_password_placeholder')}" maxlength="20" class="form-input" style="background: #222;">
-                </div>
-                <div style="flex: 2; padding-top: 28px;">
-                    <div style="font-size: 11px; color: #888; line-height: 1.4;">🔒 <span style="color: #4CAF50; font-weight: bold;">${t('publish.security_guarantee')}</span>：${t('publish.password_encrypted_hint')}</div>
+        <div id="netdisk-password-settings" class="ranking-publish__panel" style="display: none;">
+            <div class="ranking-publish__row">
+                <div class="ranking-publish__field">
+                    <label for="pub-netdisk-password" class="ranking-publish__security-label">🔐 ${escapeHtml(t('publish.netdisk_password'))}</label>
+                    <input type="text" id="pub-netdisk-password" placeholder="${escapeHtml(t('publish.netdisk_password_placeholder'))}" maxlength="20" class="form-input" aria-describedby="publish-password-hint">
                 </div>
+                <div id="publish-password-hint" class="ranking-publish__hint ranking-publish__field--wide ranking-publish__aligned-hint">🔒 <strong>${escapeHtml(t('publish.security_guarantee'))}</strong>：${escapeHtml(t('publish.password_encrypted_hint'))}</div>
             </div>
         </div>
 
-        <div id="private-repo-settings" style="margin-bottom: 5px; background: var(--comfy-input-bg); padding: 10px; border-radius: 4px; border: 1px dashed #555; display: none;">
-            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; color: #aaa; font-size: 13px;">
-                <input type="checkbox" id="pub-is-private" ${hasExistingToken ? 'checked' : ''} style="cursor: pointer;">
-                ${t('publish.private_repo_hint')}
+        <div id="private-repo-settings" class="ranking-publish__panel" style="display: none;">
+            <label class="ranking-publish__checkbox">
+                <input type="checkbox" id="pub-is-private" ${hasExistingToken ? 'checked' : ''}>
+                <span>${escapeHtml(t('publish.private_repo_hint'))}</span>
             </label>
-            <div id="github-token-container" style="display: ${hasExistingToken ? 'block' : 'none'}; margin-top: 10px; padding: 12px; background: rgba(33, 150, 243, 0.1); border: 1px dashed #2196F3; border-radius: 6px;">
-                <label style="display: block; margin-bottom: 6px; color: #2196F3; font-weight: bold;">🔒 ${t('publish.pat_label')} <span style="color: #F44336;">*</span></label>
-                <div style="font-size: 12px; color: #aaa; margin-bottom: 8px; line-height: 1.4;">${t('publish.pat_hint')}</div>
-                <input type="password" id="pub-github-token" value="${isEditMode ? (safeData.github_token || '') : ''}" placeholder="${hasExistingToken && !safeData.github_token ? t('publish.token_keep_hint') : t('publish.token_placeholder')}" class="form-input" style="background: #222;">
+            <div id="github-token-container" class="ranking-publish__token" style="display: ${hasExistingToken ? 'block' : 'none'};">
+                <label for="pub-github-token" class="ranking-publish__security-label">🔒 ${escapeHtml(t('publish.pat_label'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <div id="publish-pat-hint" class="ranking-publish__hint">${escapeHtml(t('publish.pat_hint'))}</div>
+                <input type="password" id="pub-github-token" value="${escapeHtml(isEditMode ? (safeData.github_token || '') : '')}" placeholder="${hasExistingToken && !safeData.github_token ? escapeHtml(t('publish.token_keep_hint')) : escapeHtml(t('publish.token_placeholder'))}" class="form-input" aria-describedby="publish-pat-hint">
             </div>
         </div>
 
-        <div id="box-cover" style="margin-bottom: 5px; background: var(--comfy-input-bg); padding: 10px; border-radius: 4px; border: 1px dashed #555;">
-            <label style="display: block; margin-bottom: 5px;">🖼️ ${t('publish.effect_images')} <span id="cover-file-hint" style="color:#4CAF50; font-size:12px; font-weight:normal; display:none;">(${t('publish.reselect_override')})</span></label>
-            <input type="file" id="pub-images" accept="image/*" multiple style="width: 100%; padding: 4px; color: #aaa; font-size: 12px;">
-            <div style="font-size: 11px; color: #888; margin-top: 4px;">${t('publish.drag_select_hint')}</div>
-            <div id="pub-images-preview" style="margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px;"></div>
+        <div id="box-cover" class="ranking-publish__panel ranking-publish__field">
+            <label for="pub-images">🖼️ ${escapeHtml(t('publish.effect_images'))} <span id="cover-file-hint" class="ranking-publish__file-hint" style="display: none;">(${escapeHtml(t('publish.reselect_override'))})</span></label>
+            <input type="file" id="pub-images" accept="image/*" multiple class="ranking-publish__file" aria-describedby="publish-images-hint cover-file-hint">
+            <div id="publish-images-hint" class="ranking-publish__hint">${escapeHtml(t('publish.drag_select_hint'))}</div>
+            <div id="pub-images-preview" class="ranking-publish__preview"></div>
         </div>
 
-        <div id="box-price" style="display: flex; gap: 10px; margin-bottom: 5px;">
-            <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
-                <label style="display: block; margin-bottom: 5px;">${t('publish.price')} <span style="color: #F44336;">*</span></label>
-                <input type="number" id="pub-price" value="0" min="0" class="form-input" style="color: #FF9800; font-weight: bold;">
-                <!-- 🔄 P7后悔模式：价格延迟生效提示 -->
-                <div id="price-pending-hint" style="display: none; margin-top: 6px; padding: 6px 8px; background: rgba(255,152,0,0.15); border: 1px dashed #FF9800; border-radius: 4px; font-size: 11px; color: #FF9800;">
-                </div>
-            </div>
-            <div style="flex: 2;">
-                <div style="font-size: 11px; color: #888; margin-top: 25px; line-height: 1.4;">${t('publish.price_hint')}<br>⚠️ <strong>${t('publish.price_delay_hint')}</strong></div>
+        <div id="box-price" class="ranking-publish__row">
+            <div class="ranking-publish__field">
+                <label for="pub-price">${escapeHtml(t('publish.price'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
+                <input type="number" id="pub-price" value="0" min="0" class="form-input ranking-publish__price" aria-required="true" aria-describedby="publish-price-hint price-pending-hint">
+                <div id="price-pending-hint" class="ranking-publish__pending" role="status" style="display: none;"></div>
             </div>
+            <div id="publish-price-hint" class="ranking-publish__hint ranking-publish__field--wide ranking-publish__aligned-hint">${escapeHtml(t('publish.price_hint'))}<br>⚠️ <strong>${escapeHtml(t('publish.price_delay_hint'))}</strong></div>
         </div>
 
-        <div style="margin-bottom: 10px;">
-            <label style="display: block; margin-bottom: 5px;">${t('publish.full_desc')}</label>
-            <textarea id="pub-full" rows="36" placeholder="${t('publish.full_desc_placeholder')}" class="form-input" style="resize: vertical;"></textarea>
+        <div class="ranking-publish__field">
+            <label for="pub-full">${escapeHtml(t('publish.full_desc'))}</label>
+            <textarea id="pub-full" rows="36" placeholder="${escapeHtml(t('publish.full_desc_placeholder'))}" class="form-input ranking-publish__description"></textarea>
         </div>
 
-        <!-- 原创作品勾选框 -->
-        <div style="margin-bottom: 15px; padding: 12px; background: #1a1a1a; border: 1px solid #444; border-radius: 6px;">
-            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
-                <input type="checkbox" id="is-original-checkbox" ${safeData.is_original ? 'checked' : ''} style="width: 16px; height: 16px; cursor: pointer; accent-color: #4CAF50;" />
-                <span style="font-size: 13px; color: #ccc;">🎨 ${t('publish.mark_as_original')}</span>
+        <div class="ranking-publish__panel">
+            <label class="ranking-publish__checkbox">
+                <input type="checkbox" id="is-original-checkbox" ${safeData.is_original ? 'checked' : ''} aria-describedby="original-hint-text" />
+                <span>🎨 ${escapeHtml(t('publish.mark_as_original'))}</span>
             </label>
-            <div id="original-hint-text" style="font-size: 11px; color: #888; margin-top: 6px; padding-left: 24px;">
-                ${t('publish.original_default_hint')}
-            </div>
+            <div id="original-hint-text" class="ranking-publish__hint ranking-publish__checkbox-hint">${escapeHtml(t('publish.original_default_hint'))}</div>
         </div>
 
-        <!-- 💸 是否支持退款勾选框 (仅 tool/app 类型显示) -->
-        <div id="box-allow-refund" style="margin-bottom: 15px; padding: 12px; background: #1a1a1a; border: 1px solid #444; border-radius: 6px;">
-            <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
-                <input type="checkbox" id="allow-refund-checkbox" ${safeData.allow_refund !== false ? 'checked' : ''} style="width: 16px; height: 16px; cursor: pointer; accent-color: #2196F3;" />
-                <span style="font-size: 13px; color: #ccc;">💸 ${t('publish.allow_refund')}</span>
+        <div id="box-allow-refund" class="ranking-publish__panel">
+            <label class="ranking-publish__checkbox">
+                <input type="checkbox" id="allow-refund-checkbox" ${safeData.allow_refund !== false ? 'checked' : ''} aria-describedby="publish-refund-hint" />
+                <span>💸 ${escapeHtml(t('publish.allow_refund'))}</span>
             </label>
-            <div style="font-size: 11px; color: #888; margin-top: 6px; padding-left: 24px;">
-                ${t('publish.refund_hint')}
-            </div>
+            <div id="publish-refund-hint" class="ranking-publish__hint ranking-publish__checkbox-hint">${escapeHtml(t('publish.refund_hint'))}</div>
         </div>
 
-        <button id="btn-submit-publish" style="width: 100%; padding: 12px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 15px; transition: 0.3s; margin-bottom: 20px;">${escapeHtml(submitBtnText)}</button>
+        <button type="button" id="btn-submit-publish" class="ranking-publish__submit">${escapeHtml(submitBtnText)}</button>
+        </section>
     `;
-}
+}

前端页面/market/发布内容_提交引擎.js

@@ -1,4 +1,8 @@
+import { processImageCore as _processImageCore } from "./有界图片处理.js";
+import { validateImageFile } from "./图片文件检查.js";
+import { IMAGE_PROCESS } from "../core/全局配置.js";
 // 前端页面/market/发布内容_提交引擎.js
+import { createPublishSubmissionScope } from "./发布提交生命周期.js";
 import { api } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
@@ -46,112 +50,6 @@ function clearItemCacheByType(type) {
     console.log(`🗑️ 已清除 [${tab}] 类型的列表缓存`);
 }
 
-/**
- * 通用图片处理核心函数：加载图片 → Canvas绘制 → 转换为JPG文件
- * @param {File} file - 原始图片文件
- * @param {Object} options - 配置选项
- * @param {boolean} options.cropToSquare - 是否中心裁剪为正方形
- * @param {number|null} options.targetSize - 目标尺寸（正方形边长），null则保持原始尺寸
- * @param {number} options.quality - 初始JPG质量 (0-1)
- * @param {string|null} options.fillBackground - 背景填充颜色，null则不填充
- * @param {number|null} options.maxFileSize - 最大文件大小（字节），超限则迭代降低质量
- * @param {boolean} options.skipIfSmallJpeg - 是否跳过已是小体积JPEG的文件
- * @param {string} options.suffix - 输出文件名后缀
- * @returns {Promise<File>} 处理后的文件
- */
-function _processImageCore(file, options = {}) {
-    const {
-        cropToSquare = false,
-        targetSize = null,
-        quality = 0.85,
-        fillBackground = null,
-        maxFileSize = null,
-        skipIfSmallJpeg = false,
-        suffix = '.jpg'
-    } = options;
-
-    return new Promise((resolve, reject) => {
-        const img = new Image();
-        const url = URL.createObjectURL(file);
-
-        img.onload = () => {
-            URL.revokeObjectURL(url);
-
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-
-            let sourceX = 0, sourceY = 0;
-            let sourceW = img.naturalWidth, sourceH = img.naturalHeight;
-            let destW = img.naturalWidth, destH = img.naturalHeight;
-
-            // 中心裁剪为正方形
-            if (cropToSquare) {
-                const sourceMin = Math.min(sourceW, sourceH);
-                sourceX = (sourceW - sourceMin) / 2;
-                sourceY = (sourceH - sourceMin) / 2;
-                sourceW = sourceMin;
-                sourceH = sourceMin;
-                destW = sourceMin;
-                destH = sourceMin;
-            }
-
-            // 指定目标尺寸时缩放
-            if (targetSize) {
-                destW = targetSize;
-                destH = targetSize;
-            }
-
-            canvas.width = destW;
-            canvas.height = destH;
-
-            // 填充背景色
-            if (fillBackground) {
-                ctx.fillStyle = fillBackground;
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-            }
-
-            ctx.drawImage(img, sourceX, sourceY, sourceW, sourceH, 0, 0, destW, destH);
-
-            // 跳过已是小体积JPEG的文件
-            if (skipIfSmallJpeg && maxFileSize &&
-                (file.type === 'image/jpeg' || file.type === 'image/jpg') &&
-                file.size <= maxFileSize) {
-                resolve(file);
-                return;
-            }
-
-            // 转换为JPG Blob，超限时迭代降低质量
-            let currentQuality = quality;
-            const tryCompress = () => {
-                canvas.toBlob((blob) => {
-                    if (!blob) {
-                        reject(new Error('Canvas 转换 Blob 失败'));
-                        return;
-                    }
-
-                    if (maxFileSize && blob.size > maxFileSize && currentQuality > 0.3) {
-                        currentQuality -= 0.1;
-                        tryCompress();
-                        return;
-                    }
-
-                    const newFileName = file.name.replace(/\.[^/.]+$/, '') + suffix;
-                    resolve(new File([blob], newFileName, { type: 'image/jpeg' }));
-                }, 'image/jpeg', currentQuality);
-            };
-
-            tryCompress();
-        };
-
-        img.onerror = () => {
-            URL.revokeObjectURL(url);
-            reject(new Error('图片加载失败'));
-        };
-
-        img.src = url;
-    });
-}
-
 /**
  * 🟢 利用 HTML5 Canvas 纯前端裁剪并压缩头像
  * 功能：强制 1:1 比例中心裁剪，缩放到 512x512，转换为 JPG 格式。
@@ -159,7 +57,8 @@ function _processImageCore(file, options = {}) {
 function processAvatar(file) {
     return _processImageCore(file, {
         cropToSquare: true,
-        targetSize: 512,
+        maxFileSize: IMAGE_PROCESS.AVATAR_MAX_BYTES,
+        targetSize: IMAGE_PROCESS.AVATAR_SIZE,
         quality: 0.85,
         suffix: '_cropped.jpg'
     }).then(processedFile => {
@@ -171,7 +70,7 @@ function processAvatar(file) {
 /**
  * 上传前图片压缩处理
  * - 转为 JPG 格式
- * - 超过 5MB 时进行质量压缩，不改变宽高比例
+ * - 最长边至多4096并保持比例；质量压缩后仍超过5MB则拒绝
  * @param {File} file - 原始图片文件
  * @returns {Promise<File>} - 处理后的文件
  */
@@ -181,65 +80,54 @@ export async function compressImageForUpload(file) {
         return file;
     }
 
-    // GIF 动图保留原始格式，不转换为 JPG
-    if (file.type === 'image/gif') {
-        const GIF_MAX_SIZE = 50 * 1024 * 1024; // 50MB
-        if (file.size > GIF_MAX_SIZE) {
-            throw new Error(`GIF文件过大（${(file.size/1024/1024).toFixed(1)}MB），最大允许50MB`);
-        }
-        console.log(`🎞️ GIF动图保留原始格式: ${(file.size/1024/1024).toFixed(2)}MB`);
-        return file;
-    }
-
-    try {
-        const processedFile = await _processImageCore(file, {
-            quality: 0.92,
-            fillBackground: '#FFFFFF',
-            maxFileSize: 5 * 1024 * 1024,
-            skipIfSmallJpeg: true,
-            suffix: '.jpg'
-        });
-        console.log(`📦 图片压缩: ${(file.size/1024/1024).toFixed(2)}MB → ${(processedFile.size/1024/1024).toFixed(2)}MB`);
-        return processedFile;
-    } catch (e) {
-        // 加载失败，返回原文件
-        return file;
+    if (!Number.isFinite(file.size) || file.size < 0 || file.size > IMAGE_PROCESS.MAX_INPUT_BYTES) {
+        throw new Error('Image exceeds upload budget');
     }
+    // 动图保持原格式；不由Canvas变为静态图片。
+    if (file.type === 'image/gif') { await validateImageFile(file); return file; }
+    return _processImageCore(file, {
+        quality: 0.92, fillBackground: '#FFFFFF', maxFileSize: IMAGE_PROCESS.MAX_OUTPUT_BYTES,
+        skipIfSmallJpeg: true, suffix: '.jpg'
+    });
 }
 
 /**
  * 🟢 新增：全局统一的文件上传包装器（供个人设置等其它组件调用）
  * 会在上传前自动拦截并处理头像图片
  */
-export async function uploadFile(file, file_type) {
+export async function uploadFile(file, file_type, options = {}) {
+    const current = options.isCurrent || (() => true);
+    const feedback = (message, level) => { if (!options.silent && current()) showToast(message, level); };
+    if (!current()) return null;
     try {
         let fileToUpload = file;
         
         // 拦截点：如果是头像，就在纯内存中先进行裁剪、缩放、压缩
         if (file_type === "avatar" && file.type && file.type.startsWith("image/")) {
-            showToast(`🖼️ ${t('publish.processing_avatar')}`);
+            feedback(`🖼️ ${t('publish.processing_avatar')}`);
             fileToUpload = await processAvatar(file);
         }
 
-        showToast(`🌐 ${t('publish.uploading_file', { size: (fileToUpload.size/1024).toFixed(1) })}`);
+        feedback(`🌐 ${t('publish.uploading_file', { size: (fileToUpload.size/1024).toFixed(1) })}`);
+        if (!current()) return null;
         const res = await api.uploadFile(fileToUpload, file_type);
         
+        if (!current()) return null;
         if (res.status === "success") {
-            showToast(`✅ ${t('publish.upload_success')}`);
+            feedback(`✅ ${t('publish.upload_success')}`);
             return res.url; 
         } else {
-            showToast(`❌ ${t('publish.upload_failed')}: ${res.error || res.message}`, "error");
+            feedback(t('publish.upload_failed'), 'error');
             return null;
         }
     } catch (error) {
-        console.error("Upload Error:", error);
-        showToast(`❌ ${t('publish.upload_error')}: ${error.message}`, "error");
+        feedback(t('publish.upload_error'), 'error');
         return null;
     }
 }
 
 // ==========================================
-// 原有的发布表单提交逻辑 (完美保留，无任何删减)
+// 发布表单提交：原会话范围与保存结果核实
 // ==========================================
 export async function handlePublishSubmit(params) {
     const {
@@ -247,6 +135,13 @@ export async function handlePublishSubmit(params) {
         imageFiles, jsonFile, onSuccessCallback, submitBtn, submitBtnText  // 🖼️ imageFiles 替换 coverFile
     } = params;
 
+    const scope = params.submissionScope || createPublishSubmissionScope(container, submitBtn, currentUser?.account);
+    if (!scope.isCurrent()) return;
+    const expectedRevision = isEditMode ? (editItemData?.edit_revision === undefined ? 0 : editItemData.edit_revision) : null;
+    if (isEditMode && (!Number.isSafeInteger(expectedRevision) || expectedRevision < 0)) {
+        showToast(t('common.operation_failed'), 'error'); return;
+    }
+    const selectedImages = Array.from(imageFiles || []);
     const typeSelect = container.querySelector("#pub-type");
     const recommendTypeSelect = container.querySelector("#pub-recommend-type");
     const resTypeSelect = container.querySelector("#pub-resource-type");
@@ -264,7 +159,8 @@ export async function handlePublishSubmit(params) {
     const title = container.querySelector("#pub-title").value.trim();
     const shortDesc = container.querySelector("#pub-short").value.trim();
     const fullDesc = container.querySelector("#pub-full").value.trim();
-    const price = rules.price ? (parseFloat(container.querySelector("#pub-price").value) || 0) : 0;
+    const price = rules.price ? Number(container.querySelector("#pub-price").value) : 0;
+    if (!Number.isSafeInteger(price) || price < 0) return showToast(t('common.operation_failed'), "warning");
     
     let finalLink = inputLink.value.trim();
     let isJsonUpload = (resTypeSelect.value === "json") || (type === "recommend_app");
@@ -315,15 +211,18 @@ export async function handlePublishSubmit(params) {
     const allowRefundCheckbox = container.querySelector("#allow-refund-checkbox");
     const allowRefund = rules.refund ? (allowRefundCheckbox?.checked ?? true) : null;
 
+    if (!scope.begin()) return;
+    let committed = false, saveAttempted = false, outcomeUnknown = false;
     submitBtn.innerHTML = `⏳ ${t('publish.connecting')}`;
     submitBtn.disabled = true; 
-    submitBtn.style.background = "#555";
 
     try {
         if (isJsonUpload && jsonFile) {
             submitBtn.innerHTML = `⏳ ${t('publish.uploading_secure')}`;
             const uploadType = type.includes("app") ? "app" : (type.includes("tool") || type === "skill" ? "tool" : "recommend");
             const jsonUploadRes = await api.uploadFile(jsonFile, uploadType);
+            if (!scope.isCurrent()) return;
+            if (jsonUploadRes?.status !== "success" || typeof jsonUploadRes.url !== "string" || !jsonUploadRes.url.trim()) throw new Error("Invalid upload result");
             finalLink = jsonUploadRes.url; 
         }
 
@@ -331,19 +230,21 @@ export async function handlePublishSubmit(params) {
         let coverUrl = isEditMode ? editItemData.coverUrl : null;
         let imageUrls = isEditMode ? (editItemData.imageUrls || []) : [];
         
-        if (imageFiles && imageFiles.length > 0) {
-            submitBtn.innerHTML = `⏳ ${t('publish.uploading_images', { current: 0, total: imageFiles.length })}`;
+        if (selectedImages.length > 0) {
+            submitBtn.innerHTML = `⏳ ${t('publish.uploading_images', { current: 0, total: selectedImages.length })}`;
             const uploadedUrls = [];
             
-            for (let i = 0; i < imageFiles.length; i++) {
-                submitBtn.innerHTML = `⏳ ${t('publish.uploading_images', { current: i + 1, total: imageFiles.length })}`;
+            for (let i = 0; i < selectedImages.length; i++) {
+                submitBtn.innerHTML = `⏳ ${t('publish.uploading_images', { current: i + 1, total: selectedImages.length })}`;
                 // 上传前压缩：转JPG，超5MB压缩
-                const processedFile = await compressImageForUpload(imageFiles[i]);
+                const processedFile = await compressImageForUpload(selectedImages[i]);
+                if (!scope.isCurrent()) return;
                 const uploadRes = await api.uploadFile(processedFile, "cover");
-                if (uploadRes && uploadRes.url) {
+                if (!scope.isCurrent()) return;
+                if (uploadRes?.status === "success" && typeof uploadRes.url === "string" && uploadRes.url.trim()) {
                     uploadedUrls.push(uploadRes.url);
                 } else {
-                    throw new Error(`图片上传失败: ${uploadRes?.error || '未知错误'}`);
+                    throw new Error("Invalid image upload result");
                 }
             }
             
@@ -351,12 +252,15 @@ export async function handlePublishSubmit(params) {
             imageUrls = uploadedUrls;     // 全部图片URL
         }
 
+        if (!scope.isCurrent()) return;
         submitBtn.innerHTML = `⏳ ${t('publish.syncing')}`;
         // 🖼️ 统一封面逻辑：第一张图片始终作为封面（兑容拖拽排序后的顺序变化）
         if (imageUrls && imageUrls.length > 0) {
             coverUrl = imageUrls[0];
         }
         const submitData = {
+            ...(!isEditMode && scope.publicationId ? { request_id: scope.publicationId } : {}),
+            ...(isEditMode ? { expected_revision: expectedRevision } : {}),
             type, title, shortDesc, fullDesc, price, link: finalLink, coverUrl, imageUrls,  // 🖼️ 添加 imageUrls
             author: currentUser.account, github_token,
             netdisk_password,  // ☁️ 网盘密码（后端加密存储）
@@ -369,22 +273,40 @@ export async function handlePublishSubmit(params) {
             submitData.allow_refund = allowRefund;
         }
 
-        if (isEditMode) {
-            await api.updateItem(editItemData.id, currentUser.account, submitData);
-            showToast(`✅ ${t('publish.save_success')}`, "success");
-        } else {
-            await api.publishItem(submitData);
-            showToast(`🎉 ${t('publish.publish_success')}`, "success");
+        saveAttempted = true;
+        const result = isEditMode
+            ? await api.updateItem(editItemData.id, currentUser.account, submitData)
+            : await api.publishItem(submitData);
+        if (!scope.isCurrent()) return;
+        if (result?.status !== "success") throw new Error("Invalid save result");
+        committed = true;
+        showToast(isEditMode ? `✅ ${t('publish.save_success')}` : `🎉 ${t('publish.publish_success')}`, "success");
+        // 主保存已确认；派生缓存或界面回调异常不重新开放提交。
+        try { clearItemCacheByType(type); } catch (_) {}
+        if (scope.isCurrent() && onSuccessCallback) {
+            try { await onSuccessCallback(); } catch (_) {}
         }
-        
-        // 🚀 精确清除：只清除当前发布类型的缓存
-        clearItemCacheByType(type);
-        
-        if (onSuccessCallback) onSuccessCallback();
     } catch (err) {
-        showToast(`${t('common.operation_failed')}: ` + err.message, "error");
+        if (!scope.isCurrent() || committed) return;
+        if (isEditMode && err?.status === 409 && err?.code === 'resource_revision_conflict') {
+            outcomeUnknown = true; // 保持入口锁，要求重开取得新版本；不自动覆盖。
+            showToast(t('publish.edit_conflict'), 'warning');
+            submitBtn.disabled = true; submitBtn.innerHTML = t('publish.edit_reopen');
+            return;
+        }
+        // 已发出的保存可能在服务端提交；仅已知前置拒绝允许原表单重试。
+        const rejected = [400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+        outcomeUnknown = saveAttempted && !rejected;
+        if (outcomeUnknown) {
+            showToast(t('publish.save_unconfirmed'), "warning");
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = t('publish.result_pending');
+            return;
+        }
+        showToast(t('common.operation_failed'), "error");
         submitBtn.disabled = false;
         submitBtn.innerHTML = submitBtnText;
-        submitBtn.style.background = "#2196F3";
+    } finally {
+        scope.finish(committed, outcomeUnknown);
     }
-}
+}

前端页面/market/发布内容组件.js

@@ -1,5 +1,7 @@
+import { validateImageFile } from "./图片文件检查.js";
 // 前端页面/market/发布内容组件.js
 import { generatePublishHTML } from "./发布内容_UI模板.js";
+import { createPublishSubmissionScope } from "./发布提交生命周期.js";
 import { handlePublishSubmit } from "./发布内容_提交引擎.js";
 import { t } from "../components/用户体验增强.js";
 import { showConfirm, showToast } from "../components/UI交互提示组件.js";
@@ -206,7 +208,9 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
     // 1. 渲染分离出去的视图模板
     container.innerHTML = generatePublishHTML(isEditMode, viewTitle, submitBtnText, hasExistingToken, editItemData, t);
 
+    let submissionScope;
     container.querySelector("#btn-back").onclick = async () => {
+        if (!submissionScope?.isCurrent()) return;
         // 检查是否有已编辑内容
         const hasChanges = !!(
             container.querySelector("#pub-title")?.value?.trim() ||
@@ -222,12 +226,13 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
                     title: isEditMode ? t('publish.unsaved_changes_title') : t('publish.leave_confirm_title'),
                     confirmText: t('common.leave'),
                     cancelText: t('common.stay'),
-                    type: 'warning'
+                    type: 'warning', signal: submissionScope.confirmationSignal
                 }
             );
-            if (!confirmed) return;
+            if (!confirmed || !submissionScope.isCurrent()) return;
         }
 
+        submissionScope.dispose();
         if (onBackCallback) onBackCallback();
     };
 
@@ -449,36 +454,49 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
     
     updateFormView();
 
-    // 🖼️ 多图上传处理
-    imagesInput.onchange = (e) => {
-        const rawFiles = Array.from(e.target.files).slice(0, 6);  // 最多6张
-        if (rawFiles.length === 0) return;
-
-        // GIF 文件大小校验：超过 50MB 的 GIF 立即排除
-        const GIF_MAX_SIZE = 50 * 1024 * 1024;
-        const files = rawFiles.filter(file => {
-            if (file.type === 'image/gif' && file.size > GIF_MAX_SIZE) {
-                const sizeMB = (file.size / (1024 * 1024)).toFixed(1);
-                const msg = `"${file.name}" 文件过大（${sizeMB}MB），GIF最大允许50MB，已自动跳过`;
-                console.warn('[发布内容组件]', msg);
-                showToast(msg, "warning");
-                return false;
+    // 文件头确认后才创建预览，迟到选择不覆盖后一次选择。
+    let previewGeneration = 0, previewPending = false, resumeDisabled = false;
+    const previewUrls = new Set();
+    const releasePreviews = () => {
+        for (const url of previewUrls) URL.revokeObjectURL(url);
+        previewUrls.clear();
+    };
+    imagesInput.onchange = async (e) => {
+        if (!submissionScope?.isCurrent()) return;
+        const rawFiles = Array.from(e.target.files).slice(0, 6);
+        if (!rawFiles.length) return;
+        const generation = ++previewGeneration;
+        if (!previewPending) resumeDisabled = submitBtn.disabled;
+        previewPending = true; submitBtn.disabled = true;
+        try {
+            const files = [];
+            for (const file of rawFiles) {
+                try { await validateImageFile(file); files.push(file); }
+                catch (_) {
+                    if (generation === previewGeneration && submissionScope.isCurrent()) showToast(t('common.operation_failed'), 'warning');
+                }
+                if (generation !== previewGeneration || !submissionScope.isCurrent()) return;
+            }
+            if (!files.length) return;
+            releasePreviews(); imageFiles = files; imagesPreview.replaceChildren();
+            for (const [index, file] of files.entries()) {
+                const url = URL.createObjectURL(file); previewUrls.add(url);
+                imagesPreview.appendChild(_createImagePreviewWrapper(url, index));
+            }
+            updateCoverMark(imagesPreview); setupImageDragSort(imagesPreview, imageFiles);
+        } catch (_) {
+            if (generation === previewGeneration && submissionScope.isCurrent()) {
+                releasePreviews(); imageFiles = []; imagesPreview.replaceChildren();
+                showToast(t('common.operation_failed'), 'warning');
             }
-            return true;
-        });
-        if (files.length === 0) return;
-
-        imageFiles = files;
-        imagesPreview.innerHTML = '';
-
-        files.forEach((file, idx) => {
-            const objectUrl = URL.createObjectURL(file);
-            imagesPreview.appendChild(_createImagePreviewWrapper(objectUrl, idx));
-        });
-        updateCoverMark(imagesPreview);
-        setupImageDragSort(imagesPreview, imageFiles);
+        } finally {
+            if (generation === previewGeneration) {
+                previewPending = false;
+                if (submissionScope.isCurrent()) submitBtn.disabled = resumeDisabled;
+            }
+        }
     };
-    
+
     inputJson.onchange = (e) => { jsonFile = e.target.files[0]; };
 
     // 🎨 原创勾选框逻辑：工具/应用类型强制确认弹窗
@@ -490,15 +508,18 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
         const rules = TYPE_RULES[typeSelect.value];
         if (originalHintText) {
             if (rules?.originalRequired) {
-                originalHintText.innerHTML = `<span style="color: #FF9800;">⚠️ ${t('publish.original_required_hint')}</span>`;
+                originalHintText.textContent = `⚠️ ${t('publish.original_required_hint')}`;
+                originalHintText.classList.add('ranking-publish__original-required');
             } else {
                 originalHintText.textContent = t('publish.original_default_hint');
+                originalHintText.classList.remove('ranking-publish__original-required');
             }
         }
     };
     
     // 显示原创确认弹窗
     const showOriginalConfirmModal = (onConfirm, onCancel) => {
+        if (!submissionScope?.isCurrent()) return;
         const contentDiv = document.createElement("div");
         contentDiv.innerHTML = `
             <div style="line-height: 1.6; color: #ccc;">
@@ -519,20 +540,25 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
             </div>
         `;
         
-        globalModal.openModal(t('publish.original_confirm_title'), contentDiv, { width: "450px" });
+        const modal = globalModal.openModal(t('publish.original_confirm_title'), contentDiv, { width: "450px" });
+        const release = submissionScope.addCleanup(() => globalModal.closeModal(modal));
+        contentDiv._cleanup = release;
         
         contentDiv.querySelector("#btn-original-confirm").onclick = () => {
-            globalModal.closeTopModal();
+            if (!submissionScope.isCurrent()) return;
+            globalModal.closeModal(modal);
             onConfirm();
         };
         contentDiv.querySelector("#btn-original-cancel").onclick = () => {
-            globalModal.closeTopModal();
+            if (!submissionScope.isCurrent()) return;
+            globalModal.closeModal(modal);
             onCancel();
         };
     };
     
     // 监听原创勾选框变化
     isOriginalCheckbox.onchange = (e) => {
+        if (!submissionScope?.isCurrent()) return;
         const rules = TYPE_RULES[typeSelect.value];
         // 只有规则要求原创强制的类型才需要确认弹窗
         if (rules?.originalRequired && e.target.checked) {
@@ -552,7 +578,10 @@ export function createPublishView(currentUser, onBackCallback, onSuccessCallback
 
     // 4. 将提取的参数交接给分离出去的提交引擎
     const submitBtn = container.querySelector("#btn-submit-publish");
-    submitBtn.onclick = () => handlePublishSubmit({
+    submissionScope = createPublishSubmissionScope(container, submitBtn, currentUser?.account);
+    submissionScope.addCleanup(() => { ++previewGeneration; releasePreviews(); imageFiles = []; jsonFile = null; imagesPreview.replaceChildren(); });
+    submitBtn.onclick = () => previewPending ? undefined : handlePublishSubmit({
+        submissionScope,
         container, currentUser, isEditMode, editItemData, 
         imageFiles, jsonFile, onSuccessCallback, submitBtn, submitBtnText  // 🖼️ imageFiles 替换 coverFile
     });

前端页面/market/发布字段错误.js

@@ -0,0 +1,41 @@
+/** 发布表单本地校验提示；不保存草稿，也不展示远端异常正文。 */
+export function createPublishFieldErrors(inputs, signal) {
+    const entries = new Map(); let disposed = false;
+    const clear = input => {
+        const entry = entries.get(input); if (!entry) return;
+        entry.error.hidden = true; entry.error.textContent = '';
+        const tokens = (input.getAttribute('aria-describedby') || '').split(/\s+/).filter(token => token && token !== entry.error.id);
+        if (tokens.length) input.setAttribute('aria-describedby', tokens.join(' ')); else input.removeAttribute('aria-describedby');
+        if (entry.active && input.getAttribute('aria-invalid') === 'true') {
+            if (entry.previousInvalid === null) input.removeAttribute('aria-invalid');
+            else input.setAttribute('aria-invalid', entry.previousInvalid);
+        }
+        entry.active = false;
+    };
+    const clearAll = () => { for (const input of entries.keys()) clear(input); };
+    const dispose = () => {
+        if (disposed) return; disposed = true;
+        clearAll();
+        for (const [input, entry] of entries) {
+            input.removeEventListener('input', entry.onChange); input.removeEventListener('change', entry.onChange); entry.error.remove();
+        }
+        entries.clear(); signal?.removeEventListener('abort', dispose);
+    };
+    const show = (input, message) => {
+        if (disposed || signal?.aborted) return;
+        const entry = entries.get(input); if (!entry) return;
+        if (!entry.active) entry.previousInvalid = input.getAttribute('aria-invalid');
+        entry.active = true; entry.error.textContent = message; entry.error.hidden = false;
+        const tokens = new Set((input.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean)); tokens.add(entry.error.id);
+        input.setAttribute('aria-describedby', [...tokens].join(' ')); input.setAttribute('aria-invalid', 'true'); input.focus();
+    };
+    if (signal?.aborted) { disposed = true; return { show, clearAll, dispose }; }
+    for (const input of inputs) {
+        const error = document.createElement('div'); error.id = `${input.id}-error`; error.className = 'ranking-publish-field-error';
+        error.hidden = true; error.setAttribute('role', 'alert'); input.insertAdjacentElement('afterend', error);
+        const entry = { error, active: false, previousInvalid: null, onChange: () => clear(input) };
+        entries.set(input, entry); input.addEventListener('input', entry.onChange); input.addEventListener('change', entry.onChange);
+    }
+    signal?.addEventListener('abort', dispose, { once: true });
+    return { show, clearAll, dispose };
+}

前端页面/market/发布提交生命周期.js

@@ -0,0 +1,55 @@
+/** 发布表单绑定原账号与凭证，已经发送的写操作不取消或重放。 */
+import { captureRequestSession } from "../core/网络请求API.js";
+import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
+import { CACHE } from "../core/全局配置.js";
+import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
+
+const bindings = new WeakMap();
+
+export function createPublishSubmissionScope(container, button, account) {
+    const previous = bindings.get(container);
+    if (previous?.button === button && previous.account === account) return previous.binding;
+    previous?.binding.dispose();
+    const matches = captureRequestSession(), confirmation = new AbortController();
+    let phase = 'idle', observer;
+    const scope = createTaskViewScope({
+        sessionMatches: () => !!account && matches() && getUser()?.account === account,
+        connected: () => container.isConnected && button.isConnected,
+        subscribe: notify => subscribeTaskSessionChanges(notify, { target: window, eventBus, events: EVENTS,
+            userKey: CACHE.LEGACY_KEYS.USER, tokenKey: CACHE.LEGACY_KEYS.TOKEN }),
+        cancelReads: () => {},
+        invalidate: () => {}
+    });
+    scope.addCleanup(() => {
+        phase = 'disposed'; observer?.disconnect(); confirmation.abort();
+        button.disabled = true; button.removeAttribute('aria-busy');
+        for (const selector of ['#pub-github-token', '#pub-netdisk-password']) {
+            const input = container.querySelector(selector); if (input) input.value = '';
+        }
+    });
+    let wasConnected = container.isConnected;
+    observer = new MutationObserver(() => {
+        if (container.isConnected) wasConnected = true;
+        if (wasConnected) scope.isCurrent();
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    container._cleanup = () => scope.dispose();
+    const publicationId = Array.from(crypto.getRandomValues(new Uint8Array(16)), byte => byte.toString(16).padStart(2, '0')).join('');
+    const binding = {
+        publicationId,
+        confirmationSignal: confirmation.signal,
+        addCleanup: cleanup => scope.addCleanup(cleanup),
+        isCurrent: () => scope.isCurrent(),
+        dispose: () => scope.dispose(),
+        begin() {
+            if (phase !== 'idle' || !scope.isCurrent()) return false;
+            phase = 'submitting'; button.setAttribute('aria-busy', 'true'); return true;
+        },
+        finish(committed, outcomeUnknown = false) {
+            if (!scope.isCurrent()) return;
+            phase = committed ? 'committed' : (outcomeUnknown ? 'unconfirmed' : 'idle'); button.removeAttribute('aria-busy');
+        }
+    };
+    bindings.set(container, { button, account, binding });
+    return binding;
+}

前端页面/market/发布文件选择可访问性.js

@@ -0,0 +1,44 @@
+const bindings = new WeakMap();
+
+/** onclick属性变化不触发MutationObserver，渲染时显式同步空态语义。 */
+export function setPublishFilePickerAction(area, action) {
+    area.onclick = action;
+    bindings.get(area)?.();
+}
+
+/** 上传区域只在空态作为一个按钮；已有媒体中的原生控件保留独立语义。 */
+export function bindPublishFilePicker(area, input, label, signal) {
+    let disposed = false;
+    input.setAttribute('aria-label', label);
+    const sync = () => {
+        if (disposed) return;
+        const active = typeof area.onclick === 'function';
+        if (active) {
+            area.setAttribute('role', 'button'); area.tabIndex = 0;
+            area.setAttribute('aria-label', label);
+            area.setAttribute('aria-disabled', String(input.disabled));
+            if (input.getAttribute('aria-busy') === 'true') area.setAttribute('aria-busy', 'true');
+            else area.removeAttribute('aria-busy');
+        } else {
+            for (const name of ['role', 'tabindex', 'aria-label', 'aria-disabled', 'aria-busy']) area.removeAttribute(name);
+        }
+        for (const button of area.querySelectorAll('[data-file-picker-button]')) button.disabled = input.disabled;
+    };
+    const onKey = event => {
+        if (disposed || signal?.aborted || input.disabled || event.target !== area || typeof area.onclick !== 'function'
+            || event.isComposing || event.repeat || !['Enter', ' '].includes(event.key)) return;
+        event.preventDefault(); event.stopPropagation(); area.click();
+    };
+    const observer = new MutationObserver(sync);
+    const dispose = () => {
+        if (disposed) return;
+        disposed = true; observer.disconnect();
+        if (bindings.get(area) === sync) bindings.delete(area); area.removeEventListener('keydown', onKey);
+        signal?.removeEventListener('abort', dispose);
+    };
+    if (signal?.aborted) { dispose(); return dispose; }
+    observer.observe(area, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
+    observer.observe(input, { attributes: true, attributeFilter: ['disabled', 'aria-busy'] });
+    area.addEventListener('keydown', onKey); signal?.addEventListener('abort', dispose, { once: true });
+    bindings.set(area, sync); sync(); return dispose;
+}

前端页面/market/发布编辑锁.js

@@ -0,0 +1,43 @@
+/** 锁住本次发布的编辑入口；返回、提交按钮由原生命周期管理。 */
+export function createPublishEditingLock(container, excluded = []) {
+    let locked = false, disposed = false;
+    const controls = new Map();
+    const except = target => excluded.some(node => node === target || node?.contains(target));
+    const captureControls = () => {
+        if (!locked || disposed) return;
+        for (const control of container.querySelectorAll('input, textarea, select, button')) {
+            if (except(control)) continue;
+            if (!controls.has(control)) controls.set(control, control.disabled);
+            control.disabled = true;
+        }
+    };
+    const preventEditing = event => {
+        if (!locked || disposed || except(event.target)) return;
+        // 媒体播放不改变待发布内容，仍可预览；其它点击/键盘/拖拽入口锁定。
+        if (event.target?.closest?.('video, audio')) return;
+        event.preventDefault(); event.stopImmediatePropagation();
+    };
+    const events = ['click', 'keydown', 'dragstart', 'drop', 'input', 'change'];
+    for (const name of events) container.addEventListener(name, preventEditing, true);
+    const observer = new MutationObserver(captureControls);
+    return {
+        lock() {
+            if (disposed || locked) return;
+            locked = true; captureControls();
+            observer.observe(container, { childList: true, subtree: true });
+        },
+        unlock() {
+            if (disposed || !locked) return;
+            locked = false; observer.disconnect();
+            for (const [control, disabled] of controls) {
+                if (container.contains(control)) control.disabled = disabled;
+            }
+            controls.clear();
+        },
+        dispose() {
+            if (disposed) return;
+            disposed = true; observer.disconnect(); controls.clear();
+            for (const name of events) container.removeEventListener(name, preventEditing, true);
+        }
+    };
+}

前端页面/market/图片文件检查.js

@@ -0,0 +1,77 @@
+/** 有界文件头检查；仅确认格式/尺寸，不代替浏览器解码和服务端审核。 */
+import { IMAGE_PROCESS } from "../core/全局配置.js";
+
+export function readImageDimensions(buffer) {
+    const b = new Uint8Array(buffer), v = new DataView(buffer);
+    const text = (offset, count) => String.fromCharCode(...b.subarray(offset, offset + count));
+    const requireBytes = end => { if (end > b.length) throw new Error('Truncated image header'); };
+    let width, height, type;
+    if (b.length >= 8 && b[0] === 137 && text(1, 3) === 'PNG' && text(4, 4) === '\r\n\x1a\n') {
+        requireBytes(33);
+        if (v.getUint32(8) !== 13 || text(12, 4) !== 'IHDR') throw new Error('Invalid PNG header');
+        width = v.getUint32(16); height = v.getUint32(20); type = 'image/png';
+    } else if (text(0, 6) === 'GIF87a' || text(0, 6) === 'GIF89a') {
+        requireBytes(13); width = v.getUint16(6, true); height = v.getUint16(8, true); type = 'image/gif';
+    } else if (text(0, 4) === 'RIFF' && text(8, 4) === 'WEBP') {
+        requireBytes(20); const chunk = text(12, 4), size = v.getUint32(16, true);
+        if (v.getUint32(4, true) < size + 12) throw new Error('Invalid WebP container');
+        if (chunk === 'VP8X' && size === 10) {
+            requireBytes(30); width = 1 + b[24] + (b[25] << 8) + (b[26] << 16);
+            height = 1 + b[27] + (b[28] << 8) + (b[29] << 16);
+        } else if (chunk === 'VP8L' && size >= 5) {
+            requireBytes(25); if (b[20] !== 47 || (b[24] >> 5) !== 0) throw new Error('Invalid lossless header');
+            const bits = v.getUint32(21, true); width = 1 + (bits & 16383); height = 1 + ((bits >>> 14) & 16383);
+        } else if (chunk === 'VP8 ' && size >= 10) {
+            requireBytes(30);
+            if ((b[20] & 1) || b[23] !== 157 || b[24] !== 1 || b[25] !== 42) throw new Error('Invalid VP8 frame');
+            width = v.getUint16(26, true) & 16383; height = v.getUint16(28, true) & 16383;
+        } else throw new Error('Unsupported WebP header');
+        type = 'image/webp';
+    } else if (b[0] === 255 && b[1] === 216) {
+        let offset = 2;
+        while (offset < b.length) {
+            if (b[offset++] !== 255) throw new Error('Invalid JPEG marker');
+            while (b[offset] === 255) offset++;
+            requireBytes(offset + 1); const marker = b[offset++];
+            if (marker === 1) continue;
+            if (marker === 0 || marker === 216 || marker === 217 || marker === 218 || (marker >= 208 && marker <= 215)) break;
+            requireBytes(offset + 2); const length = v.getUint16(offset);
+            if (length < 2) throw new Error('Invalid JPEG segment');
+            requireBytes(offset + length);
+            if (marker >= 192 && marker <= 207 && ![196, 200, 204].includes(marker)) {
+                if (length < 8 || b[offset + 7] === 0 || length !== 8 + 3 * b[offset + 7]) throw new Error('Invalid JPEG frame');
+                height = v.getUint16(offset + 3); width = v.getUint16(offset + 5); type = 'image/jpeg'; break;
+            }
+            offset += length;
+        }
+    }
+    if (!type || !Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width <= 0 || height <= 0
+        || Math.max(width, height) > IMAGE_PROCESS.MAX_SOURCE_EDGE || width * height > IMAGE_PROCESS.MAX_PIXELS) {
+        throw new Error('Unsupported image or dimensions exceed budget');
+    }
+    return { width, height, type };
+}
+
+export async function validateImageFile(file, { signal } = {}) {
+    if (!Number.isSafeInteger(file?.size) || file.size <= 0 || file.size > IMAGE_PROCESS.MAX_INPUT_BYTES
+        || typeof file.slice !== 'function') throw new Error('Invalid image file');
+    let timer, abort;
+    const aborted = () => Object.assign(new Error('Image header read aborted'), { name: 'AbortError' });
+    if (signal?.aborted) throw aborted();
+    try {
+        const cancellation = new Promise((_, reject) => {
+            abort = () => reject(aborted());
+            signal?.addEventListener('abort', abort, { once: true });
+        });
+        const buffer = await Promise.race([
+            cancellation,
+            file.slice(0, IMAGE_PROCESS.HEADER_BYTES).arrayBuffer(),
+            new Promise((_, reject) => { timer = setTimeout(() => reject(new Error('Image header read timed out')), IMAGE_PROCESS.TIMEOUT); })
+        ]);
+        const dimensions = readImageDimensions(buffer);
+        if (file.type && file.type !== dimensions.type && !(file.type === 'image/jpg' && dimensions.type === 'image/jpeg')) {
+            throw new Error('Image MIME does not match header');
+        }
+        return dimensions;
+    } finally { clearTimeout(timer); signal?.removeEventListener('abort', abort); }
+}

前端页面/market/支付二维码工具.js

@@ -0,0 +1,22 @@
+import { QrCode } from '../vendor/qrcodegen.js';
+
+/** 支付链接仅用于本地二维码编码，SVG 中不插入链接或文本。 */
+export function createPaymentQRCode(value, maxBytes) {
+    if (typeof value !== 'string' || !Number.isSafeInteger(maxBytes) || maxBytes < 1
+        || new TextEncoder().encode(value).length > maxBytes) throw new Error('invalid payment data');
+    const url = new URL(value);
+    if (url.protocol !== 'https:' || url.username || url.password || url.port
+        || !(url.hostname === 'alipay.com' || url.hostname.endsWith('.alipay.com'))) {
+        throw new Error('invalid payment address');
+    }
+    const qr = QrCode.encodeText(value, QrCode.Ecc.MEDIUM);
+    const border = 4, size = qr.size + border * 2;
+    const paths = [];
+    for (let y = 0; y < qr.size; y++) {
+        for (let x = 0; x < qr.size; x++) {
+            if (qr.getModule(x, y)) paths.push(`M${x + border},${y + border}h1v1h-1z`);
+        }
+    }
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" shape-rendering="crispEdges"><rect width="100%" height="100%" fill="white"/><path d="${paths.join('')}" fill="black"/></svg>`;
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}

前端页面/market/有界图片处理.js

@@ -0,0 +1,152 @@
+import { validateImageFile } from "./图片文件检查.js";
+import { IMAGE_PROCESS, PUBLISH_MEDIA_LIMITS } from "../core/全局配置.js";
+
+/**
+ * 通用图片处理核心函数：加载图片 → Canvas绘制 → 转换为JPG文件
+ * @param {File} file - 原始图片文件
+ * @param {Object} options - 配置选项
+ * @param {boolean} options.cropToSquare - 是否中心裁剪为正方形
+ * @param {number|null} options.targetSize - 目标尺寸（正方形边长），null则按输出边长预算等比缩小
+ * @param {number} options.quality - 初始JPG质量 (0-1)
+ * @param {string|null} options.fillBackground - 背景填充颜色，null则不填充
+ * @param {number|null} options.maxFileSize - 最大文件大小（字节），超限则迭代降低质量
+ * @param {boolean} options.skipIfSmallJpeg - 是否跳过已是小体积JPEG的文件
+ * @param {number} options.maxEdge - 可选输出最长边（不超过全局输出预算）
+ * @param {AbortSignal} options.signal - 所属会话的取消信号
+ * @param {string} options.suffix - 输出文件名后缀
+ * @returns {Promise<File>} 处理后的文件
+ */
+export function processImageCore(file, options = {}) {
+    if (!Number.isFinite(file?.size) || file.size < 0 || file.size > IMAGE_PROCESS.MAX_INPUT_BYTES) {
+        return Promise.reject(new Error('Invalid image size'));
+    }
+    return validateImageFile(file, { signal: options.signal }).then(() => new Promise((resolve, reject) => {
+        let img, url, canvas, timer, settled = false;
+        const signal = options.signal;
+        const abort = () => finish(Object.assign(new Error('Image processing aborted'), { name: 'AbortError' }));
+        const finish = (error, result) => {
+            if (settled) return;
+            settled = true; clearTimeout(timer); signal?.removeEventListener('abort', abort);
+            if (img) { img.onload = null; img.onerror = null; img.src = ''; }
+            if (url) URL.revokeObjectURL(url);
+            if (canvas) { canvas.width = 0; canvas.height = 0; }
+            if (error) reject(error); else resolve(result);
+        };
+        if (signal?.aborted) { abort(); return; }
+        signal?.addEventListener('abort', abort, { once: true });
+        timer = setTimeout(() => finish(new Error('Image processing timed out')), IMAGE_PROCESS.TIMEOUT);
+        try {
+            img = new Image(); url = URL.createObjectURL(file);
+            img.onerror = () => finish(new Error('Image decode failed'));
+            img.onload = () => {
+                if (settled) return;
+                try {
+                    const width = img.naturalWidth, height = img.naturalHeight;
+                    if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width <= 0 || height <= 0
+                        || Math.max(width, height) > IMAGE_PROCESS.MAX_SOURCE_EDGE || width * height > IMAGE_PROCESS.MAX_PIXELS) {
+                        throw new Error('Image dimensions exceed budget');
+                    }
+                    const cap = options.maxFileSize || IMAGE_PROCESS.MAX_OUTPUT_BYTES;
+                    if (options.skipIfSmallJpeg && file.type === 'image/jpeg' && file.size <= cap
+                        && Math.max(width, height) <= IMAGE_PROCESS.MAX_OUTPUT_EDGE) { finish(null, file); return; }
+                    let sourceX = 0, sourceY = 0, sourceW = width, sourceH = height;
+                    if (options.cropToSquare) {
+                        sourceW = sourceH = Math.min(width, height);
+                        sourceX = (width - sourceW) / 2; sourceY = (height - sourceH) / 2;
+                    }
+                    const outputEdge = Math.min(options.maxEdge || IMAGE_PROCESS.MAX_OUTPUT_EDGE, IMAGE_PROCESS.MAX_OUTPUT_EDGE);
+                    const scale = Math.min(1, outputEdge / Math.max(sourceW, sourceH));
+                    const destW = options.targetSize || Math.max(1, Math.round(sourceW * scale));
+                    const destH = options.targetSize || Math.max(1, Math.round(sourceH * scale));
+                    canvas = document.createElement('canvas'); canvas.width = destW; canvas.height = destH;
+                    const ctx = canvas.getContext('2d'); if (!ctx) throw new Error('Canvas unavailable');
+                    if (options.fillBackground) { ctx.fillStyle = options.fillBackground; ctx.fillRect(0, 0, destW, destH); }
+                    ctx.drawImage(img, sourceX, sourceY, sourceW, sourceH, 0, 0, destW, destH);
+                    let quality = options.quality || 0.85;
+                    const encode = () => {
+                        if (settled) return;
+                        try {
+                            canvas.toBlob(blob => {
+                                if (settled) return;
+                                try {
+                                    if (!blob || !Number.isSafeInteger(blob.size) || blob.size <= 0) throw new Error('Image encoding failed');
+                                    if (blob.size > cap) {
+                                        if (quality <= IMAGE_PROCESS.MIN_QUALITY) throw new Error('Compressed image exceeds budget');
+                                        quality = Math.max(IMAGE_PROCESS.MIN_QUALITY, quality - IMAGE_PROCESS.QUALITY_STEP);
+                                        encode(); return;
+                                    }
+                                    finish(null, new File([blob], file.name.replace(/\.[^/.]+$/, '') + (options.suffix || '.jpg'), { type: 'image/jpeg' }));
+                                } catch (error) { finish(error); }
+                            }, 'image/jpeg', quality);
+                        } catch (error) { finish(error); }
+                    };
+                    encode();
+                } catch (error) { finish(error); }
+            };
+            img.src = url;
+        } catch (error) { finish(error); }
+    }));
+}
+
+// 只记住本模块成功生成的不可变File；弱引用不会延长表单文件生命周期。
+const preparedPublishImages = new WeakSet();
+
+/** 帖子/提示词保持原1920最长边与JPEG转换策略，不保留动画。 */
+export function compressPublishImage(file, { signal } = {}) {
+    if (signal?.aborted) return Promise.reject(Object.assign(new Error('Image processing aborted'), { name: 'AbortError' }));
+    if (preparedPublishImages.has(file)) return Promise.resolve(file);
+    return processImageCore(file, {
+        maxEdge: PUBLISH_MEDIA_LIMITS.IMAGE_MAX_EDGE,
+        quality: PUBLISH_MEDIA_LIMITS.IMAGE_QUALITY,
+        maxFileSize: IMAGE_PROCESS.MAX_OUTPUT_BYTES,
+        suffix: '.jpg', signal
+    }).then(result => { preparedPublishImages.add(result); return result; });
+}
+
+/** 按发布输出预算截取当前视频帧，终态释放画布。 */
+export function capturePublishVideoFrame(video, { signal } = {}) {
+    return new Promise((resolve, reject) => {
+        let canvas, timer, settled = false;
+        const abort = () => finish(Object.assign(new Error('Video frame capture aborted'), { name: 'AbortError' }));
+        const finish = (error, result) => {
+            if (settled) return;
+            settled = true; clearTimeout(timer); signal?.removeEventListener('abort', abort);
+            if (canvas) { canvas.width = 0; canvas.height = 0; }
+            if (error) reject(error); else resolve(result);
+        };
+        if (signal?.aborted) { abort(); return; }
+        signal?.addEventListener('abort', abort, { once: true });
+        timer = setTimeout(() => finish(new Error('Video frame capture timed out')), IMAGE_PROCESS.TIMEOUT);
+        try {
+            const width = video.videoWidth, height = video.videoHeight;
+            if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width <= 0 || height <= 0 ||
+                Math.max(width, height) > IMAGE_PROCESS.MAX_SOURCE_EDGE || width * height > IMAGE_PROCESS.MAX_PIXELS) {
+                throw new Error('Video frame dimensions exceed budget');
+            }
+            const scale = Math.min(1, PUBLISH_MEDIA_LIMITS.IMAGE_MAX_EDGE / Math.max(width, height));
+            canvas = document.createElement('canvas');
+            canvas.width = Math.max(1, Math.round(width * scale)); canvas.height = Math.max(1, Math.round(height * scale));
+            const ctx = canvas.getContext('2d'); if (!ctx) throw new Error('Canvas unavailable');
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            let quality = PUBLISH_MEDIA_LIMITS.IMAGE_QUALITY;
+            const encode = () => {
+                if (settled) return;
+                try {
+                    canvas.toBlob(blob => {
+                        if (settled) return;
+                        try {
+                            if (!blob || !Number.isSafeInteger(blob.size) || blob.size <= 0) throw new Error('Invalid video frame output');
+                            if (blob.size > IMAGE_PROCESS.MAX_OUTPUT_BYTES) {
+                                if (quality <= IMAGE_PROCESS.MIN_QUALITY) throw new Error('Video frame output exceeds budget');
+                                quality = Math.max(IMAGE_PROCESS.MIN_QUALITY, quality - IMAGE_PROCESS.QUALITY_STEP);
+                                encode(); return;
+                            }
+                            finish(null, new File([blob], 'cover.jpg', { type: 'image/jpeg' }));
+                        } catch (error) { finish(error); }
+                    }, 'image/jpeg', quality);
+                } catch (error) { finish(error); }
+            };
+            encode();
+        } catch (error) { finish(error); }
+    });
+}

前端页面/market/购买状态生命周期.js

@@ -0,0 +1,37 @@
+// 购买/退款状态DOM属于原账号；两种资源入口共用取消和身份释放。
+import { captureRequestSession, requestCancelManager } from "../core/网络请求API.js";
+import { API, CACHE } from "../core/全局配置.js";
+import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
+import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
+
+const scopes = new WeakMap();
+let sequence = 0;
+export function createPurchaseStatusScope(node, account) {
+    scopes.get(node)?.dispose();
+    const matches = captureRequestSession(), componentId = `purchase-status-${++sequence}`;
+    let constructing = true, observer;
+    const scope = createTaskViewScope({
+        sessionMatches: () => matches() && getUser()?.account === account,
+        connected: () => constructing || node.isConnected,
+        subscribe: notify => subscribeTaskSessionChanges(notify, { target: window, eventBus, events: EVENTS,
+            userKey: CACHE.LEGACY_KEYS.USER, tokenKey: CACHE.LEGACY_KEYS.TOKEN }),
+        cancelReads: () => requestCancelManager.cancelAll(componentId), invalidate: () => {}
+    });
+    scope.readOptions = { noCache: true, componentId, timeout: API.BACKGROUND_TIMEOUT, retries: API.BACKGROUND_RETRIES };
+    scope.addCleanup(() => { observer?.disconnect(); node.replaceChildren(); node.style.display = "none"; });
+    node._cleanup = () => scope.dispose(); scopes.set(node, scope);
+    queueMicrotask(() => {
+        constructing = false;
+        if (!scope.isCurrent()) return;
+        observer = new MutationObserver(() => { scope.isCurrent(); });
+        observer.observe(document.body, { childList: true, subtree: true });
+    });
+    return scope;
+}
+
+export function isValidPurchaseStatus(response) {
+    if (response?.status !== "success" || typeof response.owned !== "boolean") return false;
+    if (!response.owned) return true;
+    return typeof response.allow_refund === "boolean" && typeof response.can_refund === "boolean" && Number.isSafeInteger(response.price_paid) && response.price_paid >= 0
+        && typeof response.refund_hours_left === "number" && Number.isFinite(response.refund_hours_left) && response.refund_hours_left >= 0;
+}

前端页面/market/资源删除组件.js

@@ -0,0 +1,59 @@
+// 资源卡片与详情共用删除确认；取消页面不取消或重放已经提交的DELETE。
+import { api, captureRequestSession, invalidateRelatedCache } from "../core/网络请求API.js";
+import { CACHE } from "../core/全局配置.js";
+import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
+import { showConfirm, showToast } from "../components/UI交互提示组件.js";
+import { t } from "../components/用户体验增强.js";
+import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
+
+const active = new Set();
+export async function showResourceDeleteDialog({ itemData, currentUser, isCurrent = () => true, onDeleted }) {
+    const account = currentUser?.account, itemId = itemData?.id;
+    const matches = captureRequestSession();
+    const sessionMatches = () => matches() && getUser()?.account === account;
+    if (!account || !itemId || !sessionMatches() || !isCurrent()
+        || (itemData.author !== account && currentUser.is_admin !== true)) return false;
+    const key = JSON.stringify([account, itemId]);
+    if (active.has(key)) return false;
+    active.add(key);
+    const controller = new AbortController();
+    let observer;
+    const scope = createTaskViewScope({
+        sessionMatches, connected: isCurrent,
+        subscribe: notify => subscribeTaskSessionChanges(notify, { target: window, eventBus, events: EVENTS,
+            userKey: CACHE.LEGACY_KEYS.USER, tokenKey: CACHE.LEGACY_KEYS.TOKEN }),
+        cancelReads: () => {}, invalidate: () => {}
+    });
+    scope.addCleanup(() => { observer?.disconnect(); controller.abort(); active.delete(key); });
+    observer = new MutationObserver(() => { scope.isCurrent(); });
+    observer.observe(document.body, { childList: true, subtree: true });
+    const message = [t('item.content_label') + (itemData.title || t('item.untitled')),
+        t('item.type_label') + (itemData.type || t('item.type_unknown')), '', t('item.delete_consequence'),
+        t('item.delete_consequence_1'), t('item.delete_consequence_2'), t('item.delete_consequence_3')].join('\n');
+    try {
+        const succeeded = await showConfirm(message, {
+            title: t('item.confirm_delete_title'), type: 'danger', confirmText: t('item.confirm_delete'),
+            processingText: t('item.deleting'), signal: controller.signal,
+            onConfirm: async () => {
+                if (!scope.isCurrent()) return false;
+                try {
+                    const result = await api.deleteItem(itemId);
+                    if (!scope.isCurrent()) return false;
+                    if (result?.status !== 'success') {
+                        showToast(t('item.delete_failed_retry'), 'error'); return false;
+                    }
+                    return true;
+                } catch (_) {
+                    if (scope.isCurrent()) showToast(t('item.delete_request_failed'), 'error');
+                    return false;
+                }
+            }
+        });
+        if (!succeeded || !scope.isCurrent()) return false;
+        try { invalidateRelatedCache(`/api/items/${itemId}`, 'DELETE'); }
+        catch (_) { console.warn('删除成功，部分本地缓存无法清理'); }
+        showToast(t('item.delete_success'), 'success');
+        try { onDeleted?.(); } catch (_) { console.warn('删除成功，视图更新失败'); }
+        return true;
+    } finally { scope.dispose(); }
+}

前端页面/market/资源安装引擎.js

@@ -5,16 +5,22 @@ import { requestSSE, request } from "../core/网络请求_基础设施.js";
 import { openUserProfileModal } from "../profile/个人中心视图.js";
 import { API, CACHE, IS_WEB_MODE, escapeHtml } from "../core/全局配置.js";
 import { t } from "../components/用户体验增强.js";
+import { createResourceOperationScope } from "./资源操作生命周期.js";
+import { isValidPurchaseStatus } from "./购买状态生命周期.js";
+import { saveAcquiredItem } from "./资源获取记录.js";
+export { getAcquiredItems } from "./资源获取记录.js";
 
 // 📱 Web 模式兼容：ComfyUI 的 app 对象仅存在于本地环境，改为受保护动态导入
 // （Web 模式不暴露安装/下载入口，不会走到此路径；万一走到也不抛错）
-async function _loadGraphToCanvas(graphData) {
+async function _loadGraphToCanvas(graphData, isCurrent) {
+    if (!isCurrent() || !graphData || typeof graphData !== "object" || Array.isArray(graphData) || Object.hasOwn(graphData, "error")) return false;
     try {
         const { app } = await import("../../../scripts/app.js");
-        app.loadGraphData(graphData);
+        if (!isCurrent()) return false;
+        await app.loadGraphData(graphData);
         return true;
     } catch (e) {
-        console.warn("当前环境不支持加载工作流到画布:", e);
+        console.warn("当前环境无法加载工作流到画布");
         return false;
     }
 }
@@ -47,7 +53,87 @@ function clearUsesCache() {
  * @returns {string} JWT Token（未登录时为空字符串）
  */
 function _getAuthToken() {
-    return localStorage.getItem("ComfyCommunity_Token") || sessionStorage.getItem("ComfyCommunity_Token") || "";
+    try {
+        const localToken = localStorage.getItem("ComfyCommunity_Token");
+        if (localToken) return localToken;
+    } catch (error) {
+        console.warn('无法读取本地登录凭证存储');
+    }
+    try {
+        return sessionStorage.getItem("ComfyCommunity_Token") || "";
+    } catch (error) {
+        console.warn('无法读取会话登录凭证存储');
+        return "";
+    }
+}
+
+function _getInstallErrorMessage(result) {
+    if (result?.outcomeUnknown) return t('install.connection_uncertain');
+    const errorKeys = {
+        missing_params: 'install.error_missing_params',
+        invalid_repository: 'install.error_invalid_repository',
+        invalid_target: 'install.error_invalid_target',
+        git_missing: 'install.error_git_missing',
+        install_timeout: 'install.error_timeout',
+        install_queue_timeout: 'install.error_queue_timeout',
+        install_queue_full: 'install.error_queue_full',
+        git_clone_failed: 'install.error_git_clone',
+        insufficient_disk_space: 'install.error_disk_space',
+        remote_rejected: 'install.error_remote_rejected',
+        package_too_large: 'install.error_package_too_large',
+        repository_too_large: 'install.error_repository_too_large',
+        process_guard_unavailable: 'install.error_process_guard',
+        download_failed: 'install.error_download',
+        target_occupied: 'install.error_target_occupied',
+        invalid_archive: 'install.error_invalid_archive',
+        install_failed: 'install.error_generic'
+    };
+    const errorKey = Object.hasOwn(errorKeys, result?.error_code) ? errorKeys[result.error_code] : "";
+    return errorKey ? t(errorKey) : t('install.error_generic');
+}
+
+const INSTALL_STAGE_KEYS = {
+    queued: 'install.stage_queued',
+    validate: 'install.stage_validate',
+    auth: 'install.stage_auth',
+    cleanup: 'install.stage_cleanup',
+    git_mirror: 'install.stage_git_mirror',
+    git_cloning: 'install.stage_git_clone',
+    git_fallback: 'install.stage_git_fallback',
+    git_direct: 'install.stage_git_direct',
+    downloading: 'install.stage_downloading',
+    download_done: 'install.stage_download_done',
+    extracting: 'install.stage_extracting',
+    installing: 'install.stage_installing',
+    complete: 'install.stage_complete',
+    error: 'install.stage_failed'
+};
+
+const WORKFLOW_STAGE_KEYS = {
+    validate: 'workflow.stage_validate',
+    cache_check: 'workflow.stage_cache_check',
+    cache_hit: 'workflow.stage_cache_hit',
+    downloading: 'workflow.stage_downloading',
+    saving: 'workflow.stage_saving',
+    complete: 'workflow.stage_download_complete',
+    error: 'workflow.stage_failed'
+};
+
+function _getWorkflowErrorMessage(result) {
+    if (result?.outcomeUnknown) return t('workflow.connection_uncertain');
+    const errorKeys = {
+        invalid_request: 'workflow.error_invalid_request',
+        missing_params: 'workflow.error_missing_params',
+        invalid_app_id: 'workflow.error_invalid_id',
+        invalid_workflow_data: 'workflow.error_invalid_data',
+        auth_failed: 'workflow.error_auth',
+        remote_rejected: 'workflow.error_remote',
+        network_failed: 'workflow.error_network',
+        cloud_cooldown: 'workflow.error_cloud_cooldown',
+        download_failed: 'workflow.error_generic'
+    };
+    const errorKey = Object.hasOwn(errorKeys, result?.error_code) ? errorKeys[result.error_code] : "";
+    return errorKey ? t(errorKey) : t('workflow.error_generic');
 }
 
 /**
@@ -56,563 +142,761 @@ function _getAuthToken() {
  * @param {Object} itemData - 资源数据
  * @param {string} netdiskPassword - 网盘密码（为空则显示无密码版本）
  */
-function _renderNetdiskUI(inlineStatusBox, itemData, netdiskPassword) {
-    inlineStatusBox.innerHTML = '';
+function _getSafeExternalUrl(link) {
+    let parsedUrl;
+    try {
+        if (typeof link !== 'string' || !link.trim()) throw new Error('Missing resource link');
+        parsedUrl = new URL(link.trim());
+    } catch (_) {
+        showToast(t('netdisk.invalid_link'), 'error');
+        return null;
+    }
+    if (!['http:', 'https:'].includes(parsedUrl.protocol) || parsedUrl.username || parsedUrl.password) {
+        showToast(t('netdisk.invalid_link'), 'error');
+        return null;
+    }
+    return parsedUrl.href;
+}
+
+function _openExternalResource(link, itemId, isCurrent) {
+    if (!isCurrent()) return;
+    const safeUrl = _getSafeExternalUrl(link);
+    if (!safeUrl) return;
+    window.open(safeUrl, '_blank', 'noopener,noreferrer');
+    api.recordItemUse(itemId).then(() => {
+        if (!isCurrent()) return;
+        clearUsesCache();
+        window.dispatchEvent(new CustomEvent('comfy-trigger-sidebar-reload', { detail: { force: true } }));
+    }).catch(() => {});
+}
+
+function _renderNetdiskUI(inlineStatusBox, itemData, netdiskPassword, isCurrent) {
+    if (!isCurrent()) return;
+    inlineStatusBox.replaceChildren();
     inlineStatusBox.style.display = 'block';
 
+    const container = document.createElement('div');
+    container.className = 'netdisk-card';
+    const summary = document.createElement('div');
+    summary.className = 'netdisk-card__summary';
+    summary.textContent = t(netdiskPassword ? 'netdisk.authorized_with_password' : 'netdisk.authorized_no_password');
+    container.appendChild(summary);
+
+    const panel = document.createElement('div');
+    panel.className = 'netdisk-card__panel';
+    const openButton = document.createElement('button');
+    openButton.type = 'button';
+    openButton.className = 'netdisk-card__open';
+    openButton.textContent = t('netdisk.open');
+    openButton.addEventListener('click', () => _openExternalResource(itemData.link, itemData.id, isCurrent));
+
+    let hint = null;
     if (netdiskPassword) {
-        // 🔒 XSS防护：使用DOM API安全构建网盘密码显示区域
-        const container = document.createElement('div');
-        container.innerHTML = `
-            <div style="color: #4CAF50; font-weight: bold; margin-bottom: 10px;">✅ 授权通过，网盘资源信息如下：</div>
-            <div style="background: #1a1d2e; padding: 12px; border-radius: 6px; border: 1px solid #2d334a;">
-                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
-                    <span style="color: #2196F3;">🔗 网盘链接：</span>
-                    <button id="btn-netdisk-open-pwd-${itemData.id}" style="padding: 6px 16px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px;">📂 打开网盘</button>
-                </div>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                    <span style="color: #FF9800;">🔐 提取码：</span>
-                    <code id="netdisk-pwd-code-${itemData.id}" style="background: var(--comfy-input-bg); padding: 4px 10px; border-radius: 4px; color: #FFD700; font-weight: bold; letter-spacing: 2px;"></code>
-                    <button id="btn-copy-pwd-${itemData.id}" style="padding: 4px 8px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">📋 复制</button>
-                </div>
-            </div>
-            <div style="margin-top: 8px; font-size: 11px; color: #888;">💡 提示：请复制提取码后前往网盘下载资源</div>
-        `;
-        inlineStatusBox.appendChild(container);
-
-        // 安全设置密码文本（防止XSS）
-        const pwdCodeEl = container.querySelector(`#netdisk-pwd-code-${itemData.id}`);
-        if (pwdCodeEl) pwdCodeEl.textContent = netdiskPassword;
-
-        // 绑定复制按钮事件
-        const copyBtn = container.querySelector(`#btn-copy-pwd-${itemData.id}`);
-        if (copyBtn) {
-            copyBtn.onclick = () => {
-                navigator.clipboard.writeText(netdiskPassword);
-                copyBtn.textContent = '✅ 已复制';
-            };
-        }
+        const row = document.createElement('div');
+        row.className = 'netdisk-card__row';
+        const codeLabel = document.createElement('span');
+        codeLabel.className = 'netdisk-card__label';
+        codeLabel.textContent = t('netdisk.code_label');
+        const code = document.createElement('code');
+        code.className = 'netdisk-card__code';
+        code.textContent = netdiskPassword;
+        const copyButton = document.createElement('button');
+        copyButton.type = 'button';
+        copyButton.className = 'netdisk-card__copy';
+        copyButton.textContent = t('netdisk.copy');
+        copyButton.addEventListener('click', async () => {
+            if (!isCurrent()) return;
+            try {
+                await navigator.clipboard.writeText(netdiskPassword);
+                if (isCurrent()) copyButton.textContent = t('common.copied');
+            } catch (error) {
+                if (isCurrent()) showToast(t('netdisk.copy_failed'), 'error');
+            }
+        });
+        row.append(codeLabel, code, copyButton);
+        panel.append(row);
 
-        // 绑定打开网盘按钮事件
-        const btnOpen = inlineStatusBox.querySelector(`#btn-netdisk-open-pwd-${itemData.id}`);
-        if (btnOpen) {
-            btnOpen.onclick = () => {
-                window.open(itemData.link, '_blank');
-                api.recordItemUse(itemData.id).then(() => {
-                    clearUsesCache();
-                    window.dispatchEvent(new CustomEvent("comfy-trigger-sidebar-reload", { detail: { force: true } }));
-                }).catch(err => console.warn('📊 使用量记录失败:', err));
-            };
-        }
-    } else {
-        // 无密码网盘资源
-        inlineStatusBox.innerHTML = `
-            <div style="color: #4CAF50; font-weight: bold; margin-bottom: 10px;">✅ 授权通过，请前往网盘下载：</div>
-            <button id="btn-netdisk-open-${itemData.id}" style="padding: 6px 16px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px;">🔗 打开网盘链接</button>
-        `;
-        // 绑定打开网盘按钮事件
-        const btnOpen = inlineStatusBox.querySelector(`#btn-netdisk-open-${itemData.id}`);
-        if (btnOpen) {
-            btnOpen.onclick = () => {
-                window.open(itemData.link, '_blank');
-                api.recordItemUse(itemData.id).then(() => {
-                    clearUsesCache();
-                    window.dispatchEvent(new CustomEvent("comfy-trigger-sidebar-reload", { detail: { force: true } }));
-                }).catch(err => console.warn('📊 使用量记录失败:', err));
-            };
-        }
+        hint = document.createElement('div');
+        hint.className = 'netdisk-card__hint';
+        hint.textContent = t('netdisk.download_hint');
     }
+
+    panel.prepend(openButton);
+    container.appendChild(panel);
+    if (hint) container.appendChild(hint);
+    inlineStatusBox.appendChild(container);
 }
 
 /**
- * 保存已获取的资源记录到本地
- * @param {Object} itemData - 资源数据
+ * 检查资源是否已安装
+ * @param {string} itemId - 资源ID
+ * @returns {{installed: boolean, hasUpdate: boolean, localVersion: string|null, storageAvailable: boolean}}
  */
-function saveAcquiredItem(itemData) {
+export function checkItemStatus(itemId, cloudVersion) {
+    const versionStatus = getInstalledVersionStatus(itemId);
+    const localVersion = versionStatus.version;
+    if (!localVersion) {
+        return { installed: versionStatus.installed === true, hasUpdate: false, localVersion: null, storageAvailable: versionStatus.available };
+    }
+    const hasUpdate = cloudVersion && localVersion !== cloudVersion;
+    return { installed: true, hasUpdate, localVersion, storageAvailable: versionStatus.available };
+}
+
+const failedInstalledVersionWrites = new Map();
+
+export function getInstalledVersionStatus(itemId) {
     try {
-        const key = CACHE.LOCAL_KEYS.ACQUIRED_ITEMS;
-        const existing = JSON.parse(localStorage.getItem(key) || "[]");
-        
-        // 检查是否已存在，如果存在则更新
-        const index = existing.findIndex(item => item.id === itemData.id);
-        const record = {
-            id: itemData.id,
-            title: itemData.title,
-            type: itemData.type,
-            author: itemData.author,
-            shortDesc: itemData.shortDesc || itemData.short_desc || '',
-            coverUrl: itemData.coverUrl || itemData.cover_url || '',  // 新增
-            coverBase64: itemData.coverBase64,
-            imageUrls: itemData.imageUrls || itemData.image_urls || [],  // 新增
-            link: itemData.link || itemData.github_url || '',
-            price: itemData.price || 0,
-            likes: itemData.likes || 0,  // 新增
-            uses: itemData.uses || 0,  // 新增
-            local_version: itemData.latest_version || itemData.local_version || itemData.version || '',
-            acquired_at: Date.now()
-        };
-        
-        if (index >= 0) {
-            existing[index] = record;
-        } else {
-            existing.unshift(record); // 新记���放在最前面
-        }
-        
-        localStorage.setItem(key, JSON.stringify(existing));
-    } catch (e) {
-        console.warn("保存已获取资源记录失败:", e);
+        const failedWrite = failedInstalledVersionWrites.has(itemId);
+        const recorded = failedWrite ? failedInstalledVersionWrites.get(itemId)
+            : localStorage.getItem(CACHE.LOCAL_KEYS.INSTALLED_VERSION_PREFIX + itemId);
+        const unconfirmed = recorded === CACHE.INSTALLED_VERSION_UNCONFIRMED;
+        return { version: unconfirmed ? null : recorded, installed: !!recorded, versionConfirmed: !!recorded && !unconfirmed, available: !failedWrite };
+    } catch (error) {
+        console.warn('无法读取本地安装版本标记');
+        return { version: null, installed: false, versionConfirmed: false, available: false };
     }
 }
 
-/**
- * 获取所有已获取的资源记录
- * @returns {Array}
- */
-export function getAcquiredItems() {
+export function saveInstalledVersion(itemId, version) {
+    if (!version) return true;
     try {
-        const key = CACHE.LOCAL_KEYS.ACQUIRED_ITEMS;
-        return JSON.parse(localStorage.getItem(key) || "[]");
-    } catch (e) {
-        return [];
+        localStorage.setItem(CACHE.LOCAL_KEYS.INSTALLED_VERSION_PREFIX + itemId, version);
+        failedInstalledVersionWrites.delete(itemId);
+        return true;
+    } catch (error) {
+        failedInstalledVersionWrites.set(itemId, version);
+        console.warn('无法保存本地安装版本标记');
+        return false;
     }
 }
 
-/**
- * 检查资源是否已安装
- * @param {string} itemId - 资源ID
- * @returns {Object|null} { installed: boolean, hasUpdate: boolean, localVersion: string|null }
- */
-export function checkItemStatus(itemId, cloudVersion) {
-    const localVersion = localStorage.getItem(`ComfyCommunity_LocalVer_${itemId}`);
-    if (!localVersion) {
-        return { installed: false, hasUpdate: false, localVersion: null };
+function _recordToolInstalledVersion(itemId, result) {
+    const value = result?.installed_version;
+    const confirmed = typeof value === "string" && /^(?:[a-f0-9]{7}|[a-f0-9]{40})$/i.test(value.trim());
+    const version = confirmed ? value.trim().slice(0, 7).toLowerCase() : CACHE.INSTALLED_VERSION_UNCONFIRMED;
+    if (!saveInstalledVersion(itemId, version)) {
+        showToast(t('install.version_record_unavailable'), 'warning');
     }
-    const hasUpdate = cloudVersion && localVersion !== cloudVersion;
-    return { installed: true, hasUpdate, localVersion };
+    if (!confirmed) showToast(t('install.version_unconfirmed'), 'warning');
 }
 
-export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatusBox) {
+function _guessInstallTargetName(itemUrl) {
+    try {
+        const lastSegment = String(itemUrl).replace(/\/+$/, '').split('/').pop() || '';
+        const name = lastSegment.replace(/\.git$/i, '');
+        return /^[A-Za-z0-9_.-]+$/.test(name) && name !== '.' && name !== '..' && !name.includes('..')
+            ? name
+            : null;
+    } catch (error) {
+        return null;
+    }
+}
+
+const activeOperations = new Map();
+let latestWalletRefresh = 0;
+
+export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatusBox, options = {}) {
+    btnUse.type = "button";
+    btnUse.classList.add("resource-install__button");
+    for (const property of ["background", "color", "border", "border-color"]) btnUse.style.removeProperty(property);
+    inlineStatusBox.classList.add("resource-install__status");
+    const account = currentUser?.account, token = _getAuthToken();
+    const scope = createResourceOperationScope(btnUse, inlineStatusBox, account, options);
+    const isCurrent = () => scope.isCurrent();
+    const confirm = (message, options = {}) => showConfirm(message, { ...options, signal: scope.confirmationSignal });
+    let phase = "idle", previousProgress, removeProgressCleanup = () => {};
+    const operationKey = JSON.stringify([account, String(itemData.id)]);
+    scope.addCleanup(() => { if (activeOperations.get(operationKey) === scope) activeOperations.delete(operationKey); });
+    const trackProgress = () => {
+        removeProgressCleanup(); previousProgress?.destroy();
+        previousProgress = createInstallProgress(inlineStatusBox);
+        const progress = previousProgress;
+        removeProgressCleanup = scope.addCleanup(() => progress.destroy());
+        return progress;
+    };
+    const releaseButton = () => {
+        if (phase !== "idle") return;
+        if (activeOperations.get(operationKey) === scope) activeOperations.delete(operationKey);
+        if (isCurrent()) { btnUse.disabled = false; btnUse.removeAttribute("aria-busy"); }
+    };
     btnUse.onclick = async (e) => {
         e.stopPropagation();
-        if (!currentUser) return showToast("⚠️ 请先登录您的社区账号后再获取！", "warning");
-
-        const isFree = !itemData.price || itemData.price <= 0 || currentUser.account === itemData.author;
-        const isTool = itemData.type === 'tool' || itemData.type === 'recommend_tool' || itemData.type === 'skill' || itemData.type === 'recommend_skill';
-        const isApp = itemData.type === 'app' || itemData.type === 'recommend_app';
-
-        // 📱 Web 模式：不支持下载/安装。免费（含作者本人）或已购买 → 仅提醒电脑端安装；未购买 → 放行到下方纯购买流程
-        if (IS_WEB_MODE) {
-            if (isFree) return showToast(t('web.install_on_desktop'), "warning");
-            let webOwned = false;
-            try {
-                const st = await api.getPurchaseStatus(currentUser.account, itemData.id);
-                webOwned = !!(st && st.owned);
-            } catch (e) {
-                console.warn('购买状态查询失败，继续购买流程', e);
+        if (!isCurrent() || phase !== "idle" || activeOperations.has(operationKey)) return;
+        if (!account) return showToast(t('auth.login_required'), "warning");
+        activeOperations.set(operationKey, scope);
+        ++latestWalletRefresh;  // 新操作使先前余额补新失效。
+        phase = "preflight"; btnUse.disabled = true; btnUse.setAttribute("aria-busy", "true");
+        try {
+            const price = itemData.price ?? 0;
+            if (!Number.isSafeInteger(price) || price < 0 || !itemData.id) {
+                showToast(t('acquire.invalid_id'), "error"); return;
             }
-            if (webOwned) return showToast(t('item.owned_purchased'), "warning");
-        }
-
-        // 记录是否已经拥有，决定是否涨销量
-        let alreadyOwned = false;
+            const isFree = price === 0 || account === itemData.author;
+            const isTool = itemData.type === 'tool' || itemData.type === 'recommend_tool' || itemData.type === 'skill' || itemData.type === 'recommend_skill';
+            const isApp = itemData.type === 'app' || itemData.type === 'recommend_app';
+            if (IS_WEB_MODE && isFree) return showToast(t('web.install_on_desktop'), "warning");
 
-        // 已购买用户跳过余额检查
-        if (!isFree && currentUser && currentUser.account) {
+            // 同一次新读取决定是否拥有；查询失败不能继续到付款。
+            let alreadyOwned = false;
             try {
-                const purchaseStatus = await api.getPurchaseStatus(currentUser.account, itemData.id);
-                if (purchaseStatus && purchaseStatus.owned) {
-                    alreadyOwned = true;
+                const status = await api.getPurchaseStatus(account, itemData.id, scope.readOptions);
+                if (!isCurrent()) return;
+                if (!isValidPurchaseStatus(status)) throw new Error();
+                if (status.price_confirmation_supported !== true) {
+                    showToast(t('acquire.purchase_verification_unavailable'), "warning");
+                    return;
                 }
-            } catch (e) {
-                console.warn('购买状态查询失败，继续正常流程', e);
+                alreadyOwned = status.owned;
+            } catch (_) {
+                if (isCurrent()) showToast(t('common.network_error_retry'), "error");
+                return;
             }
-        }
+            if (IS_WEB_MODE && alreadyOwned) return showToast(t('item.owned_purchased'), "warning");
 
-        // 【新增】：本地前置余额校验（购买前动态获取最新余额）
-        if (!isFree && !alreadyOwned) {
-            try {
-                const walletRes = await api.getWallet(currentUser.account);
-                if (walletRes && walletRes.status === "success") {
-                    currentUser.balance = walletRes.balance || 0;
+            if (!isFree && !alreadyOwned) {
+                let balance;
+                try {
+                    const wallet = await api.getWallet(account, scope.readOptions);
+                    if (!isCurrent()) return;
+                    if (wallet?.status !== "success" || !Number.isSafeInteger(wallet.balance) || wallet.balance < 0) throw new Error();
+                    balance = wallet.balance;
+                } catch (_) {
+                    if (isCurrent()) showToast(t('common.network_error_retry'), "error");
+                    return;
                 }
-            } catch (e) {
-                console.warn("获取钱包余额失败:", e);
-            }
-            
-            if ((currentUser.balance || 0) < itemData.price) {
-                if (await showConfirm(`您的积分余额不足（当前：${currentUser.balance || 0}，需要：${itemData.price}）。是否前往个人中心充值？`)) {
-                    if (typeof globalModal !== 'undefined') globalModal.closeTopModal();
-                    // 【修复点】：直接调用函数唤起个人中心，解决白屏 Bug
-                    openUserProfileModal(currentUser);
+                if (balance < price) {
+                    const recharge = await confirm(`${t('acquire.balance_short', { balance, price })} ${t('acquire.balance_recharge_prompt')}`);
+                    if (recharge && isCurrent()) await openUserProfileModal(currentUser);
+                    return;
+                }
+                if (itemData.is_netdisk === true) {
+                    if (!_getSafeExternalUrl(itemData.link)) return;
+                } else {
+                    inlineStatusBox.style.display = "block";
+                    inlineStatusBox.textContent = t('acquire.validation_running');
+                    const validationController = new AbortController();
+                    const removeValidationCleanup = scope.addCleanup(() => validationController.abort());
+                    const timeout = setTimeout(() => validationController.abort(), API.BACKGROUND_TIMEOUT);
+                    try {
+                        const response = await fetch(`${API.BASE_URL}/api/validate_resource`, {
+                            method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` },
+                            body: JSON.stringify({ url: itemData.link, item_id: itemData.id, account }),
+                            signal: validationController.signal
+                        });
+                        if (!isCurrent()) return;
+                        const data = await response.json();
+                        if (!isCurrent()) return;
+                        if (!response.ok || data?.status !== "success" || data.error) throw new Error();
+                    } catch (_) {
+                        if (isCurrent()) inlineStatusBox.textContent = t('acquire.validation_blocked', { message: t('common.network_error_retry') });
+                        return;
+                    } finally { clearTimeout(timeout); removeValidationCleanup(); }
                 }
-                return; // 余额不足，直接终止后续所有云端请求
+                const confirmPay = await confirm(t('acquire.purchase_confirmation_html', { price }), { html: true });
+                if (!isCurrent()) return;
+                if (!confirmPay) { inlineStatusBox.style.display = "none"; return; }
             }
-        }
-
-        // 防线 1：扣费前进行死链探测 (解决问题 1)
-        if (!isFree) {
+            if (!isCurrent()) return;
             inlineStatusBox.style.display = "block";
-            inlineStatusBox.innerHTML = `<span style="color: #2196F3;">⏳ 正在检测云端资源有效性...</span>`;
-            
+            inlineStatusBox.textContent = t('acquire.purchase_running');
+            let purchaseRes;
             try {
-                // 直接向云端发起验证（含10秒超时控制）
-                const valController = new AbortController();
-                const valTimeout = setTimeout(() => valController.abort(), 10000);
-                const valRes = await fetch(`${API.BASE_URL}/api/validate_resource`, {
-                    method: "POST", headers: {"Content-Type": "application/json"},
-                    body: JSON.stringify({
-                        url: itemData.link,
-                        item_id: itemData.id,
-                        account: currentUser.account
-                    }),
-                    signal: valController.signal
-                });
-                clearTimeout(valTimeout);
-                const valData = await valRes.json();
-                if (!valRes.ok || valData.error) {
-                    inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 拦截提示: ${escapeHtml(valData.error || '无法访问源地址')}</span>`;
-                    return; // 发现死链，强行阻断用户付款
-                }
-            } catch(e) {
-                if (e.name === 'AbortError') {
-                    console.warn("[资源验证] 超时，跳过验证");
+                purchaseRes = await api.purchaseItem(account, itemData.id, isFree ? 0 : price);
+                if (!isCurrent()) return;
+                if (purchaseRes?.status !== "success" || typeof purchaseRes.already_owned !== "boolean"
+                    || typeof purchaseRes.is_netdisk !== "boolean"
+                    || (purchaseRes.netdisk_password != null && typeof purchaseRes.netdisk_password !== "string")) throw new Error();
+            } catch (error) {
+                if (!isCurrent()) return;
+                inlineStatusBox.setAttribute("role", "alert");
+                if (["purchase_price_changed", "purchase_price_confirmation_required"].includes(error?.code)) {
+                    phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                    inlineStatusBox.textContent = t('acquire.price_changed');
+                } else if (error?.status >= 400 && error.status < 500) {
+                    inlineStatusBox.textContent = t(error.status === 402 ? 'acquire.purchase_balance_short' : 'common.error');
                 } else {
-                    console.warn("[���源验证] 网络异常，跳过验证:", e.message || e);
+                    phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                    inlineStatusBox.textContent = t('acquire.purchase_unknown');
                 }
+                return;
             }
-
-            // 已购买用户跳过购买确认弹窗，直接进入后续流程
-            if (!alreadyOwned) {
-                const confirmPay = await showConfirm(`该资源标价为 <strong style="color:#FF9800;">${itemData.price} 积分</strong>。<br><br>确认获取吗？<br><span style="font-size:12px;color:#aaa;">(注：一次购买永久免费，如果已购买过系统将直接放行，不会重复扣款)</span>`, { html: true });
-                if (!confirmPay) {
-                    inlineStatusBox.style.display = "none";
-                    return;
-                }
+            alreadyOwned = purchaseRes.already_owned;
+            if (!isFree) showToast(t(alreadyOwned ? 'acquire.already_owned_no_charge' : 'acquire.purchase_success', { price }), alreadyOwned ? "info" : "success");
+            // 权威余额来自 SQL 钱包；补新不阻塞已经确认的资源交付。
+            if (!isFree) {
+                const walletVersion = ++latestWalletRefresh;
+                api.getWallet(account, scope.readOptions).then(wallet => {
+                    if (walletVersion !== latestWalletRefresh || !isCurrent() || wallet?.status !== "success" || !Number.isSafeInteger(wallet.balance) || wallet.balance < 0) return;
+                    currentUser.balance = wallet.balance;
+                    window.dispatchEvent(new CustomEvent("comfy-wallet-update", { detail: { account, balance: wallet.balance } }));
+                }).catch(() => {});
             }
-        } else {
-            inlineStatusBox.style.display = "block";
-        }
-
-        inlineStatusBox.innerHTML = `<span style="color: #2196F3;">⏳ 正在校验购买状态与扣款安全...</span>`; 
-
-        // 防线 2：事务级扣费 (天然解决问题 3，意外中断不重扣)
-        let purchaseRes = null;  // ☁️ 保存购买响应（包含网盘密码）
-        // 🐛 Bug修复：防御性校验，防止 itemId 为空
-        if (!itemData.id) {
-            console.warn('⚠️ 资源安装: itemData.id 为空，已拦截无效请求');
-            inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 获取失败：资源ID无效</span>`;
-            return;
-        }
-        try {
-            purchaseRes = await api.purchaseItem(currentUser.account, itemData.id);
-            
-            // 【需求2修改核心】：如果返回 already_owned，改变提示
-            if (purchaseRes && purchaseRes.already_owned) {
-                alreadyOwned = true;
-                if (!isFree) showToast("您已购买过此商品，此次使用不会收费！", "info");
-            } else if (!isFree) {
-                showToast(`支付成功！已扣除 ${itemData.price} 积分。`, "success");
-            }
-
-            // 更新用户本地显示的余额缓存
-            try {
-                const profileRes = await api.getUserProfile(currentUser.account);
-                if (profileRes.data && profileRes.data.balance !== undefined) {
-                    currentUser.balance = profileRes.data.balance;
-                }
-            } catch(e) {}
-
-        } catch (err) {
-            // 【需求3修改核心】：捕获余额不足异常，阻断流程并引导充值
-            if (err.message && err.message.includes("余额不足")) {
-                inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 获取失败：积分余额不足。</span>`;
-                if (await showConfirm("您的积分余额不足，是否立刻前往个人中心充值？")) {
-                    // 【修复点】：直接调用函数唤起个人中心，解决白屏 Bug
-                    openUserProfileModal(currentUser);
-                }
-                return; // 直接退出函数，不会走到下方的安装流程
-            } else {
-                inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 获取失败: ${escapeHtml(err.message)}</span>`;
-                showToast("获取失败：" + err.message, "error");
+            if (!isCurrent()) return;
+
+            // 📱 Web 模式：购买完成即止，不进入任何下载/安装/网盘交付分支
+            if (IS_WEB_MODE) {
+                inlineStatusBox.style.display = "block";
+                inlineStatusBox.innerHTML = alreadyOwned
+                    ? `<span class="resource-install__message resource-install__message--success">✅ ${escapeHtml(t('item.owned_purchased'))}</span>`
+                    : `<span class="resource-install__message resource-install__message--success">✅ ${escapeHtml(t('web.purchase_success_desktop'))}</span>`;
+                showToast(t('web.install_on_desktop'), "info");
                 return;
             }
-        }
 
-        // 📱 Web 模式：购买完成即止，不进入任何下载/安装/网盘交付分支
-        if (IS_WEB_MODE) {
-            inlineStatusBox.style.display = "block";
-            inlineStatusBox.innerHTML = alreadyOwned
-                ? `<span style="color: #4CAF50;">✅ ${escapeHtml(t('item.owned_purchased'))}</span>`
-                : `<span style="color: #4CAF50;">✅ ${escapeHtml(t('web.purchase_success_desktop'))}</span>`;
-            showToast(t('web.install_on_desktop'), "info");
-            return;
-        }
+            // ☁️ 优先处理网盘资源（不论是工具还是应用）
+            const isNetdisk = purchaseRes.is_netdisk;
+            const netdiskPassword = purchaseRes.netdisk_password;
 
-        // ☁️ 优先处理网盘资源（不论是工具还是应用）
-        const isNetdisk = purchaseRes?.is_netdisk || itemData.is_netdisk;
-        const netdiskPassword = purchaseRes?.netdisk_password || itemData.netdisk_password;
-        
-        if (isNetdisk) {
-            // 网盘资源：显示链接和密码（recordItemUse 延迟到用户点击按钮后）
-            saveAcquiredItem(itemData);
-            _renderNetdiskUI(inlineStatusBox, itemData, netdiskPassword);
-            btnUse.innerHTML = `✅ 已获取`;
-            btnUse.style.background = "#4CAF50";
-            return;  // ← 提前返回，不进入 Git 安装流程
-        }
+            if (isNetdisk) {
+                // 网盘资源：显示链接和密码（recordItemUse 延迟到用户点击按钮后）
+                saveAcquiredItem(itemData);
+                _renderNetdiskUI(inlineStatusBox, itemData, netdiskPassword, isCurrent);
+                btnUse.innerHTML = `✅ ${escapeHtml(t('common.acquired'))}`;
+                btnUse.setAttribute("data-install-state", "success");
+                return;  // ← 提前返回，不进入 Git 安装流程
+            }
 
-        if (isTool) {
-            const installPromptText = isFree 
-                ? "✅ 授权通过！是否通过 Git 自动将此工具克隆安装到本地 <b>custom_nodes</b> 文件夹？" 
-                : "✅ 授权通过！是否开始静默下载并热覆盖到本地 <b>custom_nodes</b> 文件夹？";
-                
-            inlineStatusBox.innerHTML = `
-                <div style="color: #ccc; margin-bottom: 10px; font-size: 13px;">${installPromptText}</div>
-                <div style="display: flex; gap: 10px;">
-                    <button id="btn-confirm-install" style="padding: 6px 15px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">✔️ 同意并安装</button>
-                    <button id="btn-cancel-install" style="padding: 6px 15px; background: transparent; color: #aaa; border: 1px solid #555; border-radius: 4px; cursor: pointer;">✖ 取消</button>
-                </div>
-            `;
-            inlineStatusBox.querySelector('#btn-cancel-install').onclick = () => inlineStatusBox.style.display = "none";
-            inlineStatusBox.querySelector('#btn-confirm-install').onclick = async () => {
-                // 获取最新的 item 数据以确保路由决策准确
-                // noCache: true 绕过前端 GET 请求缓存（5min TTL），确保读取服务器最新 has_private_token 值
-                let freshHasPrivateToken = !!itemData.has_private_token;
-                let apiFetchFailed = false;
+            if (isTool) {
+                inlineStatusBox.style.display = "block";
+                inlineStatusBox.textContent = t('install.preview_loading');
+                let installPreview = null;
+                const previewController = new AbortController();
+                const removePreviewCleanup = scope.addCleanup(() => previewController.abort());
+                const previewTimeout = setTimeout(() => previewController.abort(), API.BACKGROUND_TIMEOUT);
                 try {
-                    const freshRes = await request(`/api/items/${itemData.id}`, { noCache: true });
-                    if (freshRes.status === "success" && freshRes.data) {
-                        freshHasPrivateToken = !!freshRes.data.has_private_token;
+                    const previewResponse = await fetch("/community_hub/install_preview", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ url: itemData.link }), signal: previewController.signal
+                    });
+                    if (!isCurrent()) return;
+                    if (previewResponse.ok) {
+                        const previewData = await previewResponse.json();
+                        if (!isCurrent()) return;
+                        if (previewData.status === "success") installPreview = previewData;
+                    }
+                } catch (error) {
+                    if (!isCurrent()) return;
+                } finally { clearTimeout(previewTimeout); removePreviewCleanup(); }
+                if (!isCurrent()) return;
+                const guessedTargetName = _guessInstallTargetName(itemData.link);
+                const targetDisplay = installPreview?.target_display
+                    || (guessedTargetName ? `custom_nodes/${guessedTargetName}` : null);
+                const installPromptText = t(
+                    isFree ? 'install.confirm_git' : 'install.confirm_zip',
+                    { folder: targetDisplay || t('install.target_unknown') }
+                );
+                const targetStateText = installPreview
+                    ? (installPreview.self_update
+                        ? t('install.target_self_update')
+                        : (installPreview.already_exists
+                            ? t('install.target_exists')
+                            : t('install.target_new')))
+                    : t('install.preview_unavailable');
+                let localVersionText = '';
+                if (installPreview?.already_exists) {
+                    if (installPreview.current_git_version) {
+                        localVersionText = t('install.current_git_version', {
+                            version: installPreview.current_git_version
+                        });
+                    } else if (!isFree) {
+                        try {
+                            const recordedVersion = getInstalledVersionStatus(itemData.id).version;
+                            if (recordedVersion) {
+                                localVersionText = t('install.recorded_local_version', { version: recordedVersion });
+                            }
+                        } catch (error) {
+                            console.warn('无法读取本地已安装版本记录');
+                        }
                     }
-                } catch (e) {
-                    apiFetchFailed = true;
-                    console.warn("获取最新 item 数据失败，使用缓存值:", e);
                 }
-                const hasPrivateToken = freshHasPrivateToken;
-                // 路由决策：仅当确认是免费+无私有Token时才走 git clone
-                // 如果 API 获取失败且缓存中无 has_private_token 信息，保守地走 ZIP 代理路径
-                const useGitClone = isFree && !hasPrivateToken && !apiFetchFailed;
-                const localApiEndpoint = useGitClone
-                    ? "/community_hub/install_tool"
-                    : "/community_hub/install_private_tool";
 
-                const progress = createInstallProgress(inlineStatusBox);
+                phase = "confirm";
+                inlineStatusBox.innerHTML = `
+                    <div class="resource-install__confirmation" role="group" aria-label="${escapeHtml(t('install.confirmation_region'))}">
+                        <div role="heading" aria-level="3" class="resource-install__heading">${escapeHtml(installPromptText)}</div>
+                        <div role="status" aria-live="polite" class="resource-install__preview">${escapeHtml(targetStateText)}</div>
+                        ${localVersionText ? `<div role="status" aria-live="polite" class="resource-install__preview">${escapeHtml(localVersionText)}</div>` : ''}
+                        <div class="resource-install__actions">
+                            <button id="btn-confirm-install" type="button" class="resource-install__button resource-install__button--confirm">${escapeHtml(t('install.confirm_button'))}</button>
+                            <button id="btn-cancel-install" type="button" class="resource-install__button">${escapeHtml(t('common.cancel'))}</button>
+                        </div>
+                    </div>
+                `;
+                const confirmInstallButton = inlineStatusBox.querySelector('#btn-confirm-install');
+                const cancelInstallButton = inlineStatusBox.querySelector('#btn-cancel-install');
+                let removeEscapeCleanup = () => {};
+                const removeInstallEscapeHandler = () => {
+                    inlineStatusBox.removeEventListener("keydown", handleInstallEscape); removeEscapeCleanup();
+                };
+                const cancelInstallPrompt = () => {
+                    if (!isCurrent() || phase !== "confirm") return;
+                    phase = "idle"; releaseButton();
+                    removeInstallEscapeHandler();
+                    inlineStatusBox.style.display = "none";
+                    btnUse.focus();
+                };
+                const handleInstallEscape = (event) => {
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        cancelInstallPrompt();
+                    }
+                };
+                cancelInstallButton.onclick = cancelInstallPrompt;
+                inlineStatusBox.addEventListener("keydown", handleInstallEscape);
+                removeEscapeCleanup = scope.addCleanup(removeInstallEscapeHandler);
+                confirmInstallButton.focus();
+                confirmInstallButton.onclick = async () => {
+                    if (!isCurrent() || phase !== "confirm") return;
+                    phase = "install";
+                    try {
+                        removeInstallEscapeHandler();
+                        confirmInstallButton.disabled = true;
+                        cancelInstallButton.disabled = true;
+                        // 获取最新的 item 数据以确保路由决策准确
+                        // noCache: true 绕过前端 GET 请求缓存（5min TTL），确保读取服务器最新 has_private_token 值
+                        let freshHasPrivateToken = !!itemData.has_private_token;
+                        let apiFetchFailed = false;
+                        try {
+                            const freshRes = await request(`/api/items/${itemData.id}`, scope.readOptions);
+                            if (!isCurrent()) return;
+                            if (freshRes.status === "success" && freshRes.data) {
+                                freshHasPrivateToken = !!freshRes.data.has_private_token;
+                            }
+                        } catch (e) {
+                            apiFetchFailed = true;
+                            if (!isCurrent()) return;
+                        }
+                        if (!isCurrent()) return;
+                        const hasPrivateToken = freshHasPrivateToken;
+                        // 路由决策：仅当确认是免费+无私有Token时才走 git clone
+                        // 如果 API 获取失败且缓存中无 has_private_token 信息，保守地走 ZIP 代理路径
+                        const useGitClone = isFree && !hasPrivateToken && !apiFetchFailed;
+                        const localApiEndpoint = useGitClone
+                            ? "/community_hub/install_tool"
+                            : "/community_hub/install_private_tool";
+
+                        const progress = trackProgress();
+                        const cancelController = new AbortController();
+                        progress.addCancelButton(t('install.cancel_in_progress'), () => cancelController.abort());
+                        const diagnosticEvents = [];
+                        const installStartedAt = Date.now();
 
+                        try {
+                            // 发起 SSE 流式安装请求
+                            const result = await requestSSE(
+                                `${localApiEndpoint}_stream`,
+                                { url: itemData.link, id: itemData.id, account, token },
+                                (event) => {
+                                    if (!isCurrent()) return;
+                                    const elapsedSeconds = Math.floor((Date.now() - installStartedAt) / 1000);
+                                    const rawStage = typeof event.stage === "string" ? event.stage : "";
+                                    diagnosticEvents.push({
+                                        stageKey: Object.hasOwn(INSTALL_STAGE_KEYS, rawStage) ? INSTALL_STAGE_KEYS[rawStage] : "",
+                                        stage: /^[a-z0-9_]{1,40}$/i.test(rawStage) ? rawStage : "",
+                                        progress: Number.isFinite(event.progress) ? Math.max(0, Math.min(100, event.progress)) : null,
+                                        time: `${Math.floor(elapsedSeconds / 60)}:${String(elapsedSeconds % 60).padStart(2, "0")}`
+                                    });
+                                    if (diagnosticEvents.length > 50) diagnosticEvents.shift();
+                                    const stageKey = Object.hasOwn(INSTALL_STAGE_KEYS, rawStage) ? INSTALL_STAGE_KEYS[rawStage] : "";
+                                    progress.update(event.progress, event.status === "error"
+                                        ? _getInstallErrorMessage(event)
+                                        : t(stageKey || 'install.stage_installing'));
+                                },
+                                { signal: cancelController.signal }
+                            );
+
+                            if (!isCurrent()) return;
+                            if (result.cancelRequested) {
+                                phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                                const message = t('install.cancel_outcome_uncertain');
+                                progress.error(message);
+                                showToast(message, "warning");
+                                return;
+                            }
+
+                            if (result.status === "success") {
+                                progress.complete(t('install.complete'));
+                                // 根据后端返回的 message 判断是否为自更新场景
+                                const isSelfUpdate = result.message && result.message.includes("重启") && result.message.includes("生效");
+                                if (isSelfUpdate) {
+                                    showToast(t('install.completed_update', { title: itemData.title }), "success");
+                                } else {
+                                    showToast(t('install.completed_restart', { title: itemData.title }), "success");
+                                }
+
+                                // 仅记录本次引擎证明的commit；榜单版本不能证明已经安装。
+                                if (!isSelfUpdate) _recordToolInstalledVersion(itemData.id, result);
+
+                                // 记录使用量（后端自动去重）
+                                try {
+                                    await api.recordItemUse(itemData.id);
+                                    if (!isCurrent()) return;
+                                    clearUsesCache();
+                                } catch (_) {}
+                                if (!isCurrent()) return;
+
+                                // 🚀 保存到已获取记录
+                                saveAcquiredItem(itemData);
+
+                                // 🚀 更新按钮状态
+                                btnUse.innerHTML = `✅ ${escapeHtml(t('common.installed'))}`;
+                                btnUse.setAttribute("data-install-state", "success");
+                            } else {
+                                if (result?.outcomeUnknown) { phase = "unknown"; btnUse.removeAttribute("aria-busy"); }
+                                const message = _getInstallErrorMessage(result);
+                                progress.error(message);
+                                progress.showDiagnostics(diagnosticEvents);
+                                showToast(t('install.failed_for_item', { title: itemData.title, message }), "error");
+                            }
+                        } catch(err) {
+                            if (!isCurrent()) return;
+                            if (!err?.fallbackSafe) {
+                                phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                                const message = t('install.connection_uncertain');
+                                progress.error(message);
+                                progress.showDiagnostics(diagnosticEvents);
+                                showToast(message, "error");
+                                return;
+                            }
+                            // 降级到原接口
+                            progress.destroy();
+                            inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--info">⏳ ${escapeHtml(t('install.background_started'))}</span>`;
+
+                            try {
+                                const res = await fetch(localApiEndpoint, {
+                                    method: "POST", headers: { "Content-Type": "application/json" },
+                                    body: JSON.stringify({ url: itemData.link, id: itemData.id, account, token })
+                                });
+                                if (!isCurrent()) return;
+                                const data = await res.json();
+                                if (!isCurrent()) return;
+                                if (!res.ok || data?.status !== "success") {
+                                    const isLinkError = typeof data?.error === "string" && data.error.includes('不是有效的 Git');
+                                    const safeMessage = isLinkError ? t('install.error_invalid_repository') : t('install.error_generic');
+                                    inlineStatusBox.innerHTML = isLinkError
+                                        ? `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(safeMessage)}</span><br><button id="btn-open-source-link" type="button" class="resource-install__button resource-install__source">🔗 ${escapeHtml(t('install.open_source'))}</button>`
+                                        : `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(t('install.failed_for_item', { title: itemData.title, message: safeMessage }))}</span>`;
+                                    // 🔒 XSS防护：链接改为 DOM 事件绑定（内联 onclick 里的引号即使转义，
+                                    // 也会被浏览器先还原再交给 JS 解析，依然能被注入；本文件其他分支均用此写法）
+                                    if (isLinkError) {
+                                        const btnOpenSource = inlineStatusBox.querySelector('#btn-open-source-link');
+                                        if (btnOpenSource) {
+                                            btnOpenSource.onclick = () => {
+                                                if (!isCurrent()) return;
+                                                const safeUrl = _getSafeExternalUrl(itemData.link);
+                                                if (safeUrl) window.open(safeUrl, '_blank', 'noopener,noreferrer');
+                                            };
+                                        }
+                                    }
+                                    showToast(t('install.failed_for_item', { title: itemData.title, message: safeMessage }), "error");
+                                } else {
+                                    // 根据后端返回的 message 判断是否为自更新场景
+                                    const isSelfUpdate = data.message && data.message.includes("重启") && data.message.includes("生效");
+                                    if (isSelfUpdate) {
+                                        inlineStatusBox.innerHTML = `<div class="resource-install__message resource-install__message--success resource-install__complete">🔄 ${escapeHtml(t('install.stage_complete'))}</div><div class="resource-install__note">${escapeHtml(t('install.restart_to_apply'))}</div>`;
+                                        showToast(t('install.completed_update', { title: itemData.title }), "success");
+                                    } else {
+                                        inlineStatusBox.innerHTML = `<div class="resource-install__message resource-install__message--success resource-install__complete">🎉 ${escapeHtml(t('install.complete'))}</div><div class="resource-install__note">${escapeHtml(t('install.restart_to_load'))}</div>`;
+                                        showToast(t('install.completed_restart', { title: itemData.title }), "success");
+                                    }
+
+                                    if (!isSelfUpdate) _recordToolInstalledVersion(itemData.id, data);
+
+                                    try {
+                                        await api.recordItemUse(itemData.id);
+                                        if (!isCurrent()) return;
+                                        clearUsesCache();
+                                    } catch (_) {}
+                                    if (!isCurrent()) return;
+
+                                    saveAcquiredItem(itemData);
+
+                                    btnUse.innerHTML = `✅ ${escapeHtml(t('common.installed'))}`;
+                                    btnUse.setAttribute("data-install-state", "success");
+                                }
+                            } catch(err2) {
+                                if (!isCurrent()) return;
+                                phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                                inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(t('workflow.local_connection_failed', { message: t('common.network_error_retry') }))}</span>`;
+                            }
+                        }
+                    } catch (_) {
+                        if (isCurrent()) { phase = "unknown"; btnUse.removeAttribute("aria-busy"); inlineStatusBox.textContent = t('install.connection_uncertain'); }
+                    } finally { if (phase === "install") phase = "idle"; releaseButton(); }
+                };
+            } else if (isApp) {
+                const progress = trackProgress();
+
+                // 附带 account 凭证，解决问题 2 (一键鉴权加载)
                 try {
-                    // 发起 SSE 流式安装请求
                     const result = await requestSSE(
-                        `${localApiEndpoint}_stream`,
-                        { url: itemData.link, id: itemData.id, account: currentUser.account, token: _getAuthToken() },
-                        (event) => progress.update(event.progress, event.message)
+                        "/community_hub/download_app_stream",
+                        { url: itemData.link, id: itemData.id, account, token },
+                        (event) => {
+                            if (!isCurrent()) return;
+                            const stageKey = typeof event.stage === "string" && Object.hasOwn(WORKFLOW_STAGE_KEYS, event.stage)
+                                ? WORKFLOW_STAGE_KEYS[event.stage]
+                                : "";
+                            const message = event.status === "error"
+                                ? _getWorkflowErrorMessage(event)
+                                : t(stageKey || 'workflow.stage_downloading');
+                            progress.update(event.progress, message);
+                        },
+                        { timeout: API.WORKFLOW_DOWNLOAD_TIMEOUT }
                     );
 
+                    if (!isCurrent()) return;
                     if (result.status === "success") {
-                        progress.complete(result.message);
-                        // 根据后端返回的 message 判断是否为自更新场景
-                        const isSelfUpdate = result.message && result.message.includes("重启") && result.message.includes("生效");
-                        if (isSelfUpdate) {
-                            showToast(`🔄 插件 [${itemData.title}] 新版本已就绪，重启 ComfyUI 即可生效！`, "success");
-                        } else {
-                            showToast(`🎉 插件 [${itemData.title}] 安装成功！请重启 ComfyUI。`, "success");
+                        const graphLoaded = await _loadGraphToCanvas(result.data, isCurrent);
+                        if (!isCurrent()) return;
+                        if (!graphLoaded) {
+                            const message = t('workflow.canvas_load_failed');
+                            progress.error(message);
+                            showToast(message, "error");
+                            return;
                         }
+                        progress.complete(t('workflow.loaded_for_item', { title: itemData.title }));
+                        showToast(t('workflow.loaded_for_item', { title: itemData.title }), "success");
 
                         // 🚀 安装成功后，盖上本地版本戳
-                        // 优先用本地引擎回传的真实安装 commit（installed_version），兜底云端 latest_version；
-                        // 二者皆空才跳过——避免版本戳缺失导致卡片更新徽章永不触发
-                        const _installedVer = result.installed_version || itemData.latest_version;
-                        if (_installedVer) {
-                            localStorage.setItem(`ComfyCommunity_LocalVer_${itemData.id}`, _installedVer);
+                        if (itemData.latest_version) {
+                            if (!saveInstalledVersion(itemData.id, itemData.latest_version)) {
+                                showToast(t('install.version_record_unavailable'), 'warning');
+                            }
                         }
 
                         // 记录使用量（后端自动去重）
-                        try {
-                            await api.recordItemUse(itemData.id);
+                        api.recordItemUse(itemData.id).then(() => {
+                            if (!isCurrent()) return;
                             clearUsesCache();
-                        } catch(err) { console.warn('📊 使用量记录失败:', err); }
+                        }).catch(() => {});
 
                         // 🚀 保存到已获取记录
                         saveAcquiredItem(itemData);
 
                         // 🚀 更新按钮状态
-                        btnUse.innerHTML = `✅ 已安装`;
-                        btnUse.style.background = "#4CAF50";
+                        btnUse.innerHTML = `✅ ${escapeHtml(t('common.downloaded'))}`;
+                        btnUse.setAttribute("data-install-state", "success");
                     } else {
-                        progress.error(result.message);
-                        showToast(`插件 [${itemData.title}] 安装失败: ${result.message}`, "error");
+                        if (result?.outcomeUnknown) { phase = "unknown"; btnUse.removeAttribute("aria-busy"); }
+                        const message = _getWorkflowErrorMessage(result);
+                        const localizedMessage = result.error_code
+                            ? message
+                            : t('workflow.failed', { message });
+                        progress.error(message);
+                        inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(localizedMessage)}</span>`;
+                        showToast(localizedMessage, "error");
                     }
                 } catch(err) {
+                    if (!isCurrent()) return;
+                    if (!err?.fallbackSafe) {
+                        phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                        const message = t('workflow.connection_uncertain');
+                        progress.error(message);
+                        showToast(message, "error");
+                        return;
+                    }
                     // 降级到原接口
                     progress.destroy();
-                    inlineStatusBox.innerHTML = `<span style="color: #2196F3;">⏳ 正在后台静默安装 (关闭侧边栏不影响进度)...</span>`;
+                    inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--info">⏳ ${escapeHtml(t('workflow.fallback_loading'))}</span>`;
 
                     try {
-                        const res = await fetch(localApiEndpoint, {
-                            method: "POST", headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify({ url: itemData.link, id: itemData.id, account: currentUser.account, token: _getAuthToken() })
+                        const res = await fetch("/community_hub/download_app", {
+                            method: "POST",
+                            headers: { "Content-Type": "application/json" },
+                            body: JSON.stringify({ url: itemData.link, id: itemData.id, account, token })
                         });
-                        const data = await res.json();
-
-                        if (data.error) {
-                            const isLinkError = data.error.includes('不是有效的 Git');
-                            inlineStatusBox.innerHTML = isLinkError
-                                ? `<span style="color: #F44336;">❌ ${escapeHtml(data.error)}</span><br><button id="btn-open-source-link" style="margin-top:8px;padding:6px 14px;background:#2563eb;color:white;border:none;border-radius:4px;cursor:pointer;font-weight:bold;">🔗 前往资源原始页面</button>`
-                                : `<span style="color: #F44336;">❌ 安装失败: ${escapeHtml(data.error)}</span>`;
-                            // 🔒 XSS防护：链接改为 DOM 事件绑定（内联 onclick 里的引号即使转义，
-                            // 也会被浏览器先还原再交给 JS 解析，依然能被注入；本文件其他分支均用此写法）
-                            if (isLinkError) {
-                                const btnOpenSource = inlineStatusBox.querySelector('#btn-open-source-link');
-                                if (btnOpenSource) {
-                                    btnOpenSource.onclick = () => window.open(itemData.link, '_blank');
-                                }
-                            }
-                            showToast(`插件 [${itemData.title}] 安装失败: ${data.error}`, "error");
+                        if (!isCurrent()) return;
+                        if (!res.ok) {
+                            const messageKey = [401, 403].includes(res.status)
+                                ? 'workflow.error_auth'
+                                : ([502, 503, 504].includes(res.status) ? 'workflow.error_network' : 'workflow.error_generic');
+                            inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(t('workflow.http_failed', { status: res.status, message: t(messageKey) }))}</span>`;
+                            return;
+                        }
+                        let data;
+                        try {
+                            data = await res.json();
+                            if (!isCurrent()) return;
+                        } catch (parseErr) {
+                            if (!isCurrent()) return;
+                            inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(t('workflow.parse_failed'))}</span>`;
+                            showToast(t('common.parse_error'), "error");
+                            return;
+                        }
+                        if (data?.status !== "success") {
+                            // 旧式响应的服务端原文可能未本地化，也可能包含上游诊断/链接信息；
+                            // 使用稳定双语类别提示，不把远端正文直接展示或写入诊断日志。
+                            const message = t('workflow.error_remote');
+                            inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(message)}</span>`;
+                            showToast(message, "error");
                         } else {
-                            // 根据后端返回的 message 判断是否为自更新场景
-                            const isSelfUpdate = data.message && data.message.includes("重启") && data.message.includes("生效");
-                            if (isSelfUpdate) {
-                                inlineStatusBox.innerHTML = `<div style="color: #4CAF50; font-size: 14px; font-weight: bold;">🔄 新版本已就绪！</div><div style="color: #aaa; margin-top: 5px;">重启 ComfyUI 即可生效。</div>`;
-                                showToast(`🔄 插件 [${itemData.title}] 新版本已就绪，重启 ComfyUI 即可生效！`, "success");
-                            } else {
-                                inlineStatusBox.innerHTML = `<div style="color: #4CAF50; font-size: 14px; font-weight: bold;">🎉 插件安装成功！</div><div style="color: #aaa; margin-top: 5px;">请重启 ComfyUI 以加载新节点。</div>`;
-                                showToast(`🎉 插件 [${itemData.title}] 安装成功！请重启 ComfyUI。`, "success");
+                            const graphLoaded = await _loadGraphToCanvas(data.data, isCurrent);
+                            if (!isCurrent()) return;
+                            if (!graphLoaded) {
+                                const message = t('workflow.canvas_load_failed');
+                                inlineStatusBox.textContent = message;
+                                showToast(message, "error");
+                                return;
                             }
+                            inlineStatusBox.innerHTML = `<div class="resource-install__message resource-install__message--success resource-install__complete">✅ ${escapeHtml(t('workflow.loaded_for_item', { title: itemData.title }))}</div><div class="resource-install__note">${escapeHtml(t('workflow.loaded_warning'))}</div>`;
+                            showToast(t('workflow.loaded_for_item', { title: itemData.title }), "success");
 
-                            const _installedVer = data.installed_version || itemData.latest_version;
-                            if (_installedVer) {
-                                localStorage.setItem(`ComfyCommunity_LocalVer_${itemData.id}`, _installedVer);
+                            if (itemData.latest_version) {
+                                if (!saveInstalledVersion(itemData.id, itemData.latest_version)) {
+                                    showToast(t('install.version_record_unavailable'), 'warning');
+                                }
                             }
 
-                            try {
-                                await api.recordItemUse(itemData.id);
+                            api.recordItemUse(itemData.id).then(() => {
+                                if (!isCurrent()) return;
                                 clearUsesCache();
-                            } catch(err2) { console.warn('📊 使用量记录失败:', err2); }
+                            }).catch(() => {});
 
                             saveAcquiredItem(itemData);
 
-                            btnUse.innerHTML = `✅ 已安装`;
-                            btnUse.style.background = "#4CAF50";
+                            btnUse.innerHTML = `✅ ${escapeHtml(t('common.downloaded'))}`;
+                            btnUse.setAttribute("data-install-state", "success");
                         }
                     } catch(err2) {
-                        inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 无法连接到本地服务。</span>`;
+                        if (!isCurrent()) return;
+                        phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                        inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(t('workflow.local_connection_failed', { message: t('common.network_error_retry') }))}</span>`;
                     }
                 }
-            };
-        } else if (isApp) {
-            const progress = createInstallProgress(inlineStatusBox);
-
-            // 附带 account 凭证，解决问题 2 (一键鉴权加载)
-            try {
-                const result = await requestSSE(
-                    "/community_hub/download_app_stream",
-                    { url: itemData.link, id: itemData.id, account: currentUser.account, token: _getAuthToken() },
-                    (event) => progress.update(event.progress, event.message),
-                    { timeout: 120000 }  // 应用JSON下载2分钟足够
-                );
-
-                if (result.status === "success") {
-                    progress.complete(result.message);
-                    await _loadGraphToCanvas(result.data);
-                    showToast(`✅ 工作流 [${itemData.title}] 已成功加载到画布！`, "success");
-
-                    // 🚀 安装成功后，盖上本地版本戳
-                    if (itemData.latest_version) {
-                        localStorage.setItem(`ComfyCommunity_LocalVer_${itemData.id}`, itemData.latest_version);
-                    }
-
-                    // 记录使用量（后端自动去重）
-                    api.recordItemUse(itemData.id).then(() => {
-                        clearUsesCache();
-                    }).catch(err => console.warn('📊 使用量记录失败:', err));
+            } else {
+                // ☁️ 网盘链接或纯链接模式（recordItemUse 延迟到用户点击按钮后）
 
-                    // 🚀 保存到已获取记录
-                    saveAcquiredItem(itemData);
+                // ☁️ 从购买响应中获取网盘信息（安全：只有购买成功后才返回）
+                const isNetdisk = purchaseRes.is_netdisk;
+                const netdiskPassword = purchaseRes.netdisk_password;
 
-                    // 🚀 更新按钮状态
-                    btnUse.innerHTML = `✅ 已下载`;
-                    btnUse.style.background = "#4CAF50";
+                // ☁️ 网盘资源：购买后显示密码
+                if (isNetdisk) {
+                    _renderNetdiskUI(inlineStatusBox, itemData, netdiskPassword, isCurrent);
                 } else {
-                    progress.error(result.message);
-                    inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 加载失败：${escapeHtml(result.message)}</span>`;
-                    showToast(`工作流加载失败：${result.message}`, "error");
-                }
-            } catch(err) {
-                // 降级到原接口
-                progress.destroy();
-                inlineStatusBox.innerHTML = `<span style="color: #2196F3;">⏳ 授权通过，正在安全鉴权并热加载入工作区...</span>`;
-
-                try {
-                    const res = await fetch("/community_hub/download_app", {
-                        method: "POST",
-                        headers: { "Content-Type": "application/json" },
-                        body: JSON.stringify({ url: itemData.link, id: itemData.id, account: currentUser.account, token: _getAuthToken() })
-                    });
-                    if (!res.ok) {
-                        const errText = await res.text().catch(() => '未知服务端错误');
-                        inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 加载失败 (${res.status})：${escapeHtml(errText)}</span>`;
-                        return;
-                    }
-                    let data;
-                    try {
-                        data = await res.json();
-                    } catch (parseErr) {
-                        inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 响应解析失败，请重试</span>`;
-                        showToast(t('common.parse_error'), "error");
-                        return;
-                    }
-                    if (data.error) {
-                        inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 加载失败：${escapeHtml(data.error)}</span>`;
-                        showToast(`工作流加载失败：${data.error}`, "error");
-                    } else {
-                        await _loadGraphToCanvas(data.data);
-                        inlineStatusBox.innerHTML = `<div style="color: #4CAF50; font-weight: bold;">✅ 工作流已加载到画布！</div><div style="color: #888; margin-top: 4px;">由于本地节点差异可能出现飘红，请使用管理器补全节点。</div>`;
-                        showToast(`✅ 工作流 [${itemData.title}] 已成功加载到画布！`, "success");
-
-                        if (itemData.latest_version) {
-                            localStorage.setItem(`ComfyCommunity_LocalVer_${itemData.id}`, itemData.latest_version);
-                        }
-
-                        api.recordItemUse(itemData.id).then(() => {
-                            clearUsesCache();
-                        }).catch(err => console.warn('📊 使用量记录失败:', err));
-
-                        saveAcquiredItem(itemData);
-
-                        btnUse.innerHTML = `✅ 已下载`;
-                        btnUse.style.background = "#4CAF50";
-                    }
-                } catch(err2) {
-                    console.error('❌ 应用下载失败:', err2);
-                    inlineStatusBox.innerHTML = `<span style="color: #F44336;">❌ 无法连接到本地服务：${escapeHtml(err2.message || '网络错误')}</span>`;
+                    inlineStatusBox.replaceChildren();
+                    const card = document.createElement('div');
+                    card.className = 'netdisk-card';
+                    const summary = document.createElement('div');
+                    summary.className = 'netdisk-card__summary';
+                    summary.textContent = t('acquire.pure_link_authorized');
+                    const openButton = document.createElement('button');
+                    openButton.type = 'button';
+                    openButton.className = 'netdisk-card__open';
+                    openButton.textContent = t('netdisk.open');
+                    openButton.addEventListener('click', () => _openExternalResource(itemData.link, itemData.id, isCurrent));
+                    const panel = document.createElement('div');
+                    panel.className = 'netdisk-card__panel';
+                    panel.appendChild(openButton);
+                    card.append(summary, panel);
+                    inlineStatusBox.appendChild(card);
                 }
             }
-        } else {
-            // ☁️ 网盘链接或纯链接模式（recordItemUse 延迟到用户点击按钮后）
-            
-            // ☁️ 从购买响应中获取网盘信息（安全：只有购买成功后才返回）
-            const isNetdisk = purchaseRes?.is_netdisk || itemData.is_netdisk;
-            const netdiskPassword = purchaseRes?.netdisk_password || itemData.netdisk_password;
-            
-            // ☁️ 网盘资源：购买后显示密码
-            if (isNetdisk) {
-                _renderNetdiskUI(inlineStatusBox, itemData, netdiskPassword);
-            } else {
-                // 纯链接模式
-                inlineStatusBox.innerHTML = `
-                    <div style="color: #4CAF50; font-weight: bold; margin-bottom: 10px;">✅ 授权通过，该资源需手动访问源地址获取��</div>
-                    <button id="btn-pure-link-${itemData.id}" style="padding: 6px 16px; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 13px;">🔗 前往获取</button>
-                `;
-                // 绑定按钮点击事件
-                const btnOpen = inlineStatusBox.querySelector(`#btn-pure-link-${itemData.id}`);
-                if (btnOpen) {
-                    btnOpen.onclick = () => {
-                        window.open(itemData.link, '_blank');
-                        api.recordItemUse(itemData.id).then(() => {
-                            clearUsesCache();
-                            window.dispatchEvent(new CustomEvent("comfy-trigger-sidebar-reload", { detail: { force: true } }));
-                        }).catch(err => console.warn('📊 使用量记录失败:', err));
-                    };
-                }
-            }
-        }
+        } catch (_) {
+            if (isCurrent()) { inlineStatusBox.style.display = "block"; inlineStatusBox.textContent = t('common.error'); }
+        } finally { if (phase === "preflight") phase = "idle"; releaseButton(); }
     };
-}
+    return scope;
+}

前端页面/market/资源操作生命周期.js

@@ -0,0 +1,52 @@
+// 安装与交付入口共用原账号/节点范围；已经提交的购买和安装不自动重放。
+import { captureRequestSession, requestCancelManager } from "../core/网络请求API.js";
+import { API, CACHE } from "../core/全局配置.js";
+import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
+import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
+
+const scopes = new WeakMap();
+let sequence = 0;
+export function createResourceOperationScope(button, statusBox, account, options = {}) {
+    scopes.get(button)?.dispose();
+    const matches = captureRequestSession(), componentId = `resource-operation-${++sequence}`;
+    const confirmation = new AbortController(), cleanups = new Set();
+    let inner, observer, disposed = false;
+    const cleanup = () => {
+        if (disposed) return;
+        disposed = true;
+        observer?.disconnect(); confirmation.abort();
+        button.disabled = true; button.removeAttribute("aria-busy");
+        statusBox.replaceChildren(); statusBox.style.display = "none";
+        for (const callback of cleanups) { try { callback(); } catch (_) {} }
+        cleanups.clear();
+    };
+    const scope = {
+        readOptions: { noCache: true, componentId, timeout: API.BACKGROUND_TIMEOUT, retries: API.BACKGROUND_RETRIES },
+        confirmationSignal: confirmation.signal,
+        dispose() { if (inner) inner.dispose(); else cleanup(); },
+        addCleanup(callback) {
+            if (disposed) { callback(); return () => {}; }
+            cleanups.add(callback); return () => cleanups.delete(callback);
+        },
+        isCurrent() {
+            if (disposed) return false;
+            // 只有实际操作过的卡片订阅身份/DOM变化，避免整个榜单逐卡安装全局监听。
+            if (!inner) {
+                inner = createTaskViewScope({
+                    sessionMatches: () => matches() && getUser()?.account === account,
+                    connected: () => button.isConnected && statusBox.isConnected
+                        && (!options.isCurrent || options.isCurrent()),
+                    subscribe: notify => subscribeTaskSessionChanges(notify, { target: window, eventBus, events: EVENTS,
+                        userKey: CACHE.LEGACY_KEYS.USER, tokenKey: CACHE.LEGACY_KEYS.TOKEN }),
+                    cancelReads: () => requestCancelManager.cancelAll(componentId), invalidate: () => {}
+                });
+                inner.addCleanup(cleanup);
+                observer = new MutationObserver(() => { scope.isCurrent(); });
+                observer.observe(document.body, { childList: true, subtree: true });
+            }
+            return inner.isCurrent();
+        }
+    };
+    button._cleanup = () => scope.dispose(); scopes.set(button, scope);
+    return scope;
+}

前端页面/market/资源获取记录.js

@@ -0,0 +1,67 @@
+// 本地交付记录仅用于离线展示，不作为购买权限或安装结果的依据。
+import { CACHE } from "../core/全局配置.js";
+
+function validId(id) {
+    return (typeof id === "string" && id.trim().length > 0) ||
+        (typeof id === "number" && Number.isFinite(id));
+}
+
+function readRecords() {
+    let raw;
+    try { raw = localStorage.getItem(CACHE.LOCAL_KEYS.ACQUIRED_ITEMS); }
+    catch { return { available: false, records: [] }; }
+    let entries;
+    try { entries = JSON.parse(raw || "[]"); }
+    catch { entries = []; }
+    if (!Array.isArray(entries)) entries = [];
+    return { available: true, records: entries.filter(entry =>
+        entry && typeof entry === "object" && !Array.isArray(entry) && validId(entry.id)) };
+}
+
+function writeRecords(records) {
+    try {
+        localStorage.setItem(CACHE.LOCAL_KEYS.ACQUIRED_ITEMS, JSON.stringify(records));
+        return true;
+    } catch {
+        console.warn("本地资源记录无法持久化");
+        return false;
+    }
+}
+
+export function getAcquiredItems() {
+    return readRecords().records;
+}
+
+export function saveAcquiredItem(itemData) {
+    if (!itemData || typeof itemData !== "object" || Array.isArray(itemData) || !validId(itemData.id)) return false;
+    const snapshot = readRecords();
+    // 无法读取时不能用空数组覆盖可能仍存在的历史记录。
+    if (!snapshot.available) return false;
+    const record = {
+        id: itemData.id,
+        title: itemData.title,
+        type: itemData.type,
+        author: itemData.author,
+        shortDesc: itemData.shortDesc || itemData.short_desc || '',
+        coverUrl: itemData.coverUrl || itemData.cover_url || '',
+        coverBase64: itemData.coverBase64,
+        imageUrls: itemData.imageUrls || itemData.image_urls || [],
+        link: itemData.link || itemData.github_url || '',
+        price: itemData.price || 0,
+        likes: itemData.likes || 0,
+        uses: itemData.uses || 0,
+        local_version: itemData.latest_version || itemData.local_version || itemData.version || '',
+        acquired_at: Date.now()
+    };
+    const index = snapshot.records.findIndex(entry => String(entry.id) === String(itemData.id));
+    if (index >= 0) snapshot.records[index] = record;
+    else snapshot.records.unshift(record);
+    return writeRecords(snapshot.records);
+}
+
+export function removeAcquiredItem(itemId) {
+    if (!validId(itemId)) return false;
+    const snapshot = readRecords();
+    if (!snapshot.available) return false;
+    return writeRecords(snapshot.records.filter(entry => String(entry.id) !== String(itemId)));
+}

前端页面/market/资源详情页面组件.js

@@ -10,23 +10,26 @@
 // ==========================================
 
 import { api, proxyImages } from "../core/网络请求API.js";
-import { IS_WEB_MODE } from "../core/全局配置.js";
+import { IS_WEB_MODE, getCachedProfile, setCachedProfile } from "../core/全局配置.js";
+import { normalizeProfileData } from "../profile/个人资料工具.js";
 import { openTipModal } from "../profile/个人中心_赞赏组件.js";
-import { setupResourceInstall } from "./资源安装引擎.js";
+import { getInstalledVersionStatus, setupResourceInstall } from "./资源安装引擎.js";
 import { renderTipBoardHTML } from "../components/打赏等级工具.js";
 import { t } from "../components/用户体验增强.js";
-import { removeCache, removeCacheByPrefix } from "../components/性能优化工具.js";
-import { invalidateRelatedCache } from "../core/网络请求API.js";
+import { createPurchaseStatusScope, isValidPurchaseStatus } from "./购买状态生命周期.js";
+import { showResourceDeleteDialog } from "./资源删除组件.js";
+import { showResourceRefundDialog } from "./资源退款组件.js";
 import { showToast } from "../components/UI交互提示组件.js";
 // 🧹 P2归一：escapeHtml 局部副本已移除，改用统一版（转义更严格，防XSS语义不变）
 import { escapeHtml } from "../components/互动工具函数.js";
 
 // 🔄 P7后悔模式：渲染退款按钮
-async function renderRefundButton(container, itemData, currentUser) {
+async function renderRefundButton(container, itemData, currentUser, scope, purchaseStatus) {
     if (!currentUser) return;
     
     const refundArea = container.querySelector("#refund-area");
     if (!refundArea) return;
+    if (!scope.isCurrent()) return;
 
     // 💸 检查商品是否支持退款
     if (!itemData.allow_refund && itemData.allow_refund !== undefined) {
@@ -34,15 +37,19 @@ async function renderRefundButton(container, itemData, currentUser) {
         return;
     }
     
+    refundArea.style.display = "block";
     try {
-        const statusRes = await api.getPurchaseStatus(currentUser.account, itemData.id);
+        const statusRes = await purchaseStatus;
+        if (!scope.isCurrent()) return;
+        if (!isValidPurchaseStatus(statusRes)) throw new Error();
         if (!statusRes.owned) {
             refundArea.innerHTML = '';
             return;
         }
         
-        if (statusRes.can_refund) {
-            const hoursLeft = statusRes.refund_hours_left;
+        if (statusRes.can_refund && statusRes.allow_refund) {
+            const hoursLeft = Number(statusRes.refund_hours_left);
+            if (!Number.isFinite(hoursLeft) || hoursLeft < 0) throw new Error("Invalid refund hours");
             refundArea.innerHTML = `
                 <div style="margin-top: 12px; padding: 12px; background: rgba(255,152,0,0.1); border: 1px dashed #FF9800; border-radius: 6px;">
                     <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
@@ -59,7 +66,9 @@ async function renderRefundButton(container, itemData, currentUser) {
                 </div>
             `;
             
-            refundArea.querySelector("#btn-refund").onclick = () => showRefundConfirm(itemData, currentUser, statusRes.price_paid);
+            refundArea.querySelector("#btn-refund").onclick = () => {
+                if (scope.isCurrent()) showRefundConfirm(itemData, currentUser, statusRes.price_paid, () => scope.isCurrent());
+            };
         } else {
             refundArea.innerHTML = `
                 <div style="margin-top: 12px; padding: 10px; background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.3); border-radius: 6px; font-size: 12px; color: #4CAF50;">
@@ -68,169 +77,19 @@ async function renderRefundButton(container, itemData, currentUser) {
             `;
         }
     } catch (e) {
-        console.warn("获取购买状态失败:", e);
+        if (!scope.isCurrent()) return;
+        refundArea.replaceChildren();
     }
 }
 
-/**
- * 通用确认弹窗
- * @param {Object} config - 弹窗配置
- * @param {string} config.title - 弹窗标题
- * @param {string} config.titleColor - 标题颜色
- * @param {string} config.infoHtml - 商品信息区域HTML
- * @param {string} config.warningHtml - 警告区域HTML
- * @param {string} config.warningBgColor - 警告区域背景色
- * @param {string} config.warningBorderColor - 警告区域边框色
- * @param {string} config.confirmText - 确认按钮文本
- * @param {string} config.confirmColor - 确认按钮颜色
- * @param {string} config.confirmHoverColor - 确认按钮悬停颜色
- * @param {string} config.processingText - 处理中文本
- * @param {Function} config.onConfirm - 确认回调 (overlay: HTMLElement) => Promise<void>
- */
-function _showConfirmOverlay({ title, titleColor, infoHtml, warningHtml, warningBgColor, warningBorderColor, confirmText, confirmColor, confirmHoverColor, processingText, onConfirm }) {
-    // 两个按钮的公共基础样式
-    const _btnBaseStyle = "color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: 0.2s;";
-
-    const overlay = document.createElement("div");
-    Object.assign(overlay.style, {
-        position: "fixed", top: "0", left: "0", right: "0", bottom: "0",
-        background: "rgba(0,0,0,0.7)", display: "flex", alignItems: "center", justifyContent: "center",
-        zIndex: "10000"
-    });
-
-    overlay.innerHTML = `
-        <div style="background: #1e2233; border-radius: 12px; padding: 25px; max-width: 420px; width: 90%; color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,0.5);">
-            <div style="font-size: 18px; font-weight: bold; margin-bottom: 20px; color: ${titleColor}; display: flex; align-items: center; gap: 10px;">
-                ⚠️ ${escapeHtml(title)}
-            </div>
-
-            <div style="background: #2a2d3e; border-radius: 8px; padding: 15px; margin-bottom: 15px;">
-                ${infoHtml}
-            </div>
-
-            <div style="background: ${warningBgColor}; border: 1px solid ${warningBorderColor}; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
-                <div style="font-size: 13px; color: #FF9800; line-height: 1.8;">
-                    ${warningHtml}
-                </div>
-            </div>
-
-            <div style="display: flex; gap: 12px; justify-content: flex-end;">
-                <button id="btn-cancel-confirm" style="background: #555; ${_btnBaseStyle}">
-                    ${t('common.cancel')}
-                </button>
-                <button id="btn-confirm-action" style="background: ${confirmColor}; font-weight: bold; ${_btnBaseStyle}">
-                    ${escapeHtml(confirmText)}
-                </button>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    const cancelBtn = overlay.querySelector("#btn-cancel-confirm");
-    cancelBtn.onmouseover = () => { cancelBtn.style.background = "#666"; };
-    cancelBtn.onmouseout  = () => { cancelBtn.style.background = "#555"; };
-    cancelBtn.onclick = () => overlay.remove();
-
-    const confirmBtn = overlay.querySelector("#btn-confirm-action");
-    confirmBtn.onmouseover = () => { confirmBtn.style.background = confirmHoverColor; };
-    confirmBtn.onmouseout  = () => { confirmBtn.style.background = confirmColor; };
-    confirmBtn.onclick = async () => {
-        confirmBtn.disabled = true;
-        confirmBtn.innerText = processingText;
-        await onConfirm(overlay);
-    };
-
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-}
-
-// 🔄 P7后悔模式：退款确认弹窗
-function showRefundConfirm(itemData, currentUser, pricePaid) {
-    _showConfirmOverlay({
-        title: t('item.confirm_refund_title'),
-        titleColor: "#FF5722",
-        infoHtml: `
-            <div style="font-size: 14px; margin-bottom: 10px;">${t('item.product')}${escapeHtml(itemData.title || t('item.untitled'))}</div>
-            <div style="font-size: 14px; color: #4CAF50;">${t('item.refund_amount')}<strong>${pricePaid}</strong> ${t('common.credits')}</div>
-        `,
-        warningHtml: `
-            <div>🚨 <strong>${t('item.refund_consequence')}：</strong></div>
-            <div style="margin-left: 20px; margin-top: 5px;">
-                • ${t('item.refund_consequence_1')}<br>
-                • ${t('item.refund_consequence_2')}<br>
-                • <strong style="color: #F44336;">${t('item.refund_consequence_3')}</strong>
-            </div>
-        `,
-        warningBgColor: "rgba(255,87,34,0.1)",
-        warningBorderColor: "rgba(255,87,34,0.3)",
-        confirmText: t('item.confirm_refund'),
-        confirmColor: "#FF5722",
-        confirmHoverColor: "#E64A19",
-        processingText: t('common.processing'),
-        onConfirm: async (overlay) => {
-            try {
-                const res = await api.requestRefund(currentUser.account, itemData.id);
-                if (res.status === "success") {
-                    // 🔄 P7后悔模式：清除本地缓存和文件
-                    burnLocalFiles(itemData.id);
-
-                    overlay.innerHTML = `
-                        <div style="background: #1e2233; border-radius: 12px; padding: 25px; max-width: 380px; width: 90%; color: #fff; text-align: center;">
-                            <div style="font-size: 48px; margin-bottom: 15px;">✅</div>
-                            <div style="font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #4CAF50;">${t('item.refund_success')}</div>
-                            <div style="font-size: 14px; color: #aaa; margin-bottom: 20px;">
-                                ${res.refund_amount} ${t('item.credits_refunded')}<br>
-                                <span style="color: #FF9800;">${t('item.ban_days_notice', { days: res.ban_days })}</span>
-                            </div>
-                            <button id="btn-close-refund" style="background: #4CAF50; color: #fff; border: none; padding: 10px 30px; border-radius: 6px; cursor: pointer; font-size: 14px;">
-                                ${t('common.got_it')}
-                            </button>
-                        </div>
-                    `;
-                    overlay.querySelector("#btn-close-refund").onclick = () => {
-                        overlay.remove();
-                        window.dispatchEvent(new CustomEvent("comfy-route-back"));
-                    };
-                } else {
-                    showToast(t('item.refund_failed_retry'), "error");
-                    overlay.remove();
-                }
-            } catch (e) {
-                showToast(t('item.refund_request_failed'), "error");
-                overlay.remove();
-            }
-        }
+// 卡片与详情页共用退款流程，成功关闭后返回列表。
+function showRefundConfirm(itemData, currentUser, pricePaid, isCurrent) {
+    return showResourceRefundDialog({
+        itemData, currentUser, pricePaid, isCurrent,
+        onClosed: () => window.dispatchEvent(new CustomEvent("comfy-route-back"))
     });
 }
 
-// 🔄 P7后悔模式：焚毁本地文件和缓存
-function burnLocalFiles(itemId) {
-    // 清除本地版本标记
-    localStorage.removeItem(`ComfyCommunity_LocalVer_${itemId}`);
-    
-    // 清除购买缓存
-    removeCache(`ItemOwnership_${itemId}`);
-    
-    // 清除列表缓存（强制下次刷新）
-    // 🔧 修复：API 层缓存键带完整查询串，removeCache 精确删除命中不到（no-op），
-    // 购买/下载后返回列表仍会看到旧数据，改用前缀删除
-    removeCacheByPrefix('api_/api/items');
-    removeCacheByPrefix('api_/api/creators');
-    
-    // 清除工具/Skill/应用/推荐列表缓存（使用标准 ListCache 格式）
-    const tabs = ['tools', 'skills', 'apps', 'recommends'];
-    const sorts = ['time', 'downloads', 'likes', 'favorites', 'tips', 'views', 'daily_views', 'rating'];
-    for (const tab of tabs) {
-        for (const sort of sorts) {
-            removeCache(`ListCache_${tab}_${sort}`);
-        }
-    }
-    
-    console.log(`🔥 已焚毁资源 ${itemId} 的本地数据`);
-}
-
-
-
 // ==========================================
 // 🗑️ 删除内容功能
 // ==========================================
@@ -243,61 +102,18 @@ function canDeleteItem(itemData, currentUser) {
     // 作者本人可以删除
     if (itemData.author === currentUser.account) return true;
     // 管理员可以删除
-    if (currentUser.is_admin) return true;
+    if (currentUser.is_admin === true) return true;
     return false;
 }
 
 /**
  * 显示删除确认弹窗
  */
-function showDeleteConfirm(itemData, currentUser, onSuccess) {
-    _showConfirmOverlay({
-        title: t('item.confirm_delete_title'),
-        titleColor: "#F44336",
-        infoHtml: `
-            <div style="font-size: 14px; margin-bottom: 10px;">${t('item.content_label')}${escapeHtml(itemData.title || t('item.untitled'))}</div>
-            <div style="font-size: 13px; color: #888;">${t('item.type_label')}${escapeHtml(itemData.type || t('item.type_unknown'))}</div>
-        `,
-        warningHtml: `
-            <div>🚨 <strong>${t('item.delete_consequence')}：</strong></div>
-            <div style="margin-left: 20px; margin-top: 5px;">
-                • ${t('item.delete_consequence_1')}<br>
-                • ${t('item.delete_consequence_2')}<br>
-                • ${t('item.delete_consequence_3')}
-            </div>
-        `,
-        warningBgColor: "rgba(244,67,54,0.1)",
-        warningBorderColor: "rgba(244,67,54,0.3)",
-        confirmText: t('item.confirm_delete'),
-        confirmColor: "#F44336",
-        confirmHoverColor: "#D32F2F",
-        processingText: t('item.deleting'),
-        onConfirm: async (overlay) => {
-            try {
-                const res = await api.deleteItem(itemData.id);
-                if (res.status === "success") {
-                    // 清除相关缓存
-                    invalidateRelatedCache(`/api/items/${itemData.id}`, "DELETE");
-
-                    overlay.remove();
-                    showToast(t('item.delete_success'), "success");
-
-                    // 返回列表页
-                    window.dispatchEvent(new CustomEvent("comfy-route-view", {
-                        detail: { view: "market", type: itemData.type || "tool" }
-                    }));
-
-                    if (onSuccess) onSuccess();
-                } else {
-                    showToast(t('item.delete_failed_retry'), "error");
-                    overlay.remove();
-                }
-            } catch (e) {
-                showToast(t('item.delete_request_failed'), "error");
-                overlay.remove();
-            }
-        }
-    });
+function showDeleteConfirm(itemData, currentUser, isCurrent) {
+    return showResourceDeleteDialog({ itemData, currentUser, isCurrent,
+        onDeleted: () => window.dispatchEvent(new CustomEvent('comfy-route-view', {
+            detail: { view: 'market', type: itemData.type || 'tool' }
+        })) });
 }
 
 export function createItemDetailView(itemData, currentUser) {
@@ -312,13 +128,11 @@ export function createItemDetailView(itemData, currentUser) {
         backgroundColor: "#13151c" 
     });
 
-    const authorCacheKey = `ComfyCommunity_ProfileCache_${itemData.author}`;
-    const cachedAuthorStr = localStorage.getItem(authorCacheKey);
-    let authorName = itemData.author;
-    if (cachedAuthorStr) { try { authorName = JSON.parse(cachedAuthorStr).name || itemData.author; } catch(e) {} }
+    const cachedAuthor = getCachedProfile(itemData.author);
+    const authorName = cachedAuthor?.name || itemData.author || t('common.unknown_user');
 
     // 🚀 使用统一工具渲染单品赞赏榜单（带星星/月亮/太阳等级）
-    const boardData = itemData.tip_board || [];
+    const boardData = Array.isArray(itemData.tip_board) ? itemData.tip_board.filter(entry => entry && typeof entry === "object" && !Array.isArray(entry)) : [];
     const boardHtml = renderTipBoardHTML(boardData, 10, t('item.no_tips_yet'), "normal");
 
     // 🗑️ 判断是否有权限删除
@@ -345,7 +159,7 @@ export function createItemDetailView(itemData, currentUser) {
                 ${deleteBtnHtml}
             </div>
         </div>
-        <div style="margin-top: 10px; color: #888;">感谢 砚影科技 的支持！</div>
+        <div style="margin-top: 10px; color: #888;">${escapeHtml(t('item.sponsor_thanks'))}</div>
             
         <!-- 🔄 P7后悔模式：退款区域 -->
         <div id="refund-area"></div>
@@ -357,7 +171,8 @@ export function createItemDetailView(itemData, currentUser) {
     `;
 
     // 🚀 核心逻辑：比对云端探测版本与本地安装版本
-    const localVersionHash = localStorage.getItem(`ComfyCommunity_LocalVer_${itemData.id}`);
+    const localVersionStatus = getInstalledVersionStatus(itemData.id);
+    const localVersionHash = localVersionStatus.version;
     const cloudVersionHash = itemData.latest_version;
     const isFree = !itemData.price || itemData.price <= 0 || (currentUser && currentUser.account === itemData.author);
     
@@ -369,13 +184,13 @@ export function createItemDetailView(itemData, currentUser) {
     let actionBtnHtml = '';
     if (IS_WEB_MODE) {
         // 📱 Web 模式：保留「立即获取」按钮但行为受限（未购买仅触发购买、已购买提示电脑端安装，见资源安装引擎）；不渲染重装/更新按钮
-        actionBtnHtml = `<button id="btn-use-item" style="flex: 1; padding: 12px; border-radius: 6px; border: none; background: #2196F3; color: #fff; font-weight: bold; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">⬇️ ${t('item.get_now')} <span style="font-size: 12px; font-weight: normal; background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 4px;">${isFree ? t('item.free') : itemData.price + ' ' + t('common.credits')}</span></button>`;
-    } else if (!isUpdateAvailable && localVersionHash) {
-        actionBtnHtml = `<button id="btn-use-item" style="flex: 1; padding: 12px; border-radius: 6px; border: none; background: #4CAF50; color: #fff; font-weight: bold; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">✅ ${t('item.owned_reinstall')}</button>`;
+        actionBtnHtml = `<button type="button" id="btn-use-item" class="resource-install__button resource-install__entry" data-install-state="ready">⬇️ ${t('item.get_now')} <span class="resource-install__price">${isFree ? t('item.free') : escapeHtml(itemData.price) + ' ' + t('common.credits')}</span></button>`;
+    } else if (!isUpdateAvailable && localVersionStatus.installed) {
+        actionBtnHtml = `<button type="button" id="btn-use-item" class="resource-install__button resource-install__entry" data-install-state="success">✅ ${t('item.owned_reinstall')}</button>`;
     } else if (isUpdateAvailable) {
-        actionBtnHtml = `<button id="btn-use-item" style="flex: 1; padding: 12px; border-radius: 6px; border: 1px solid #FF9800; background: rgba(255, 152, 0, 0.2); color: #FF9800; font-weight: bold; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.3);" onmouseover="this.style.background='#FF9800'; this.style.color='#fff'" onmouseout="this.style.background='rgba(255, 152, 0, 0.2)'; this.style.color='#FF9800'">♻️ ${t('item.update_available')}</button>`;
+        actionBtnHtml = `<button type="button" id="btn-use-item" class="resource-install__button resource-install__entry" data-install-state="update">♻️ ${t('item.update_available')}</button>`;
     } else {
-        actionBtnHtml = `<button id="btn-use-item" style="flex: 1; padding: 12px; border-radius: 6px; border: none; background: #2196F3; color: #fff; font-weight: bold; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.1s; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">⬇️ ${t('item.get_now')} <span style="font-size: 12px; font-weight: normal; background: rgba(0,0,0,0.2); padding: 2px 6px; border-radius: 4px;">${isFree ? t('item.free') : itemData.price + ' ' + t('common.credits')}</span></button>`;
+        actionBtnHtml = `<button type="button" id="btn-use-item" class="resource-install__button resource-install__entry" data-install-state="ready">⬇️ ${t('item.get_now')} <span class="resource-install__price">${isFree ? t('item.free') : escapeHtml(itemData.price) + ' ' + t('common.credits')}</span></button>`;
     }
 
     // 🚀 返回按钮位置可调整参数：margin-left 控制右移，margin-top 控制下移
@@ -401,27 +216,48 @@ export function createItemDetailView(itemData, currentUser) {
         </div>
     `;
 
+    // 按既有状态生成的安装入口必须实际挂载到详情页面。
+    container.insertAdjacentHTML("beforeend", actionBtnHtml);
+    const scope = createPurchaseStatusScope(container.querySelector("#refund-area"), currentUser?.account);
+    container._cleanup = () => scope.dispose();
+    scope.addCleanup(() => {
+        for (const id of ["btn-use-item", "btn-tip-item", "btn-delete-item"]) {
+            const button = container.querySelector(`#${id}`);
+            if (button) { button.onclick = null; button.remove(); }
+        }
+        container.querySelector("#inline-status-box")?.replaceChildren();
+    });
+
     // 🚀 创建安装状态容器
     const inlineStatusBox = document.createElement("div");
     inlineStatusBox.id = "inline-status-box";
     Object.assign(inlineStatusBox.style, { display: "none", marginTop: "15px", padding: "12px", background: "var(--comfy-menu-bg)", borderRadius: "6px", border: "1px solid var(--border-color, #333)", fontSize: "13px" });
     container.appendChild(inlineStatusBox);
+    if (!localVersionStatus.available) {
+        inlineStatusBox.style.display = "block";
+        inlineStatusBox.setAttribute("role", "status");
+        inlineStatusBox.textContent = t('install.version_status_unavailable');
+    }
 
-    container.querySelector("#btn-back-detail").onclick = () => window.dispatchEvent(new CustomEvent("comfy-route-back"));
+    container.querySelector("#btn-back-detail").onclick = () => {
+        scope.dispose();
+        window.dispatchEvent(new CustomEvent("comfy-route-back"));
+    };
     
     // 🚀 绑定安装/更新按钮事件
     const btnUseItem = container.querySelector("#btn-use-item");
     if (btnUseItem) {
-        setupResourceInstall(btnUseItem, itemData, currentUser, inlineStatusBox);
+        const installation = setupResourceInstall(btnUseItem, itemData, currentUser, inlineStatusBox,
+            { isCurrent: () => scope.isCurrent() });
+        scope.addCleanup(() => installation?.dispose());
     }
     
     // 🚀 绑定作品打赏按钮事件
     container.querySelector("#btn-tip-item").onclick = async () => {
+        if (!scope.isCurrent()) return;
         if (!currentUser) return showToast(t('feedback.login_required'), "warning");
-        await openTipModal(currentUser, { account: itemData.author }, (newBalance) => {
-            currentUser.balance = newBalance;
-            // 打赏成功后刷新局部或整体详情 (由框架重新渲染)
-        }, itemData.id);
+        await openTipModal(currentUser, { account: itemData.author }, undefined, itemData.id,
+            { isCurrent: () => scope.isCurrent() });
     };
 
     // 🗑️ 绑定删除按钮事件
@@ -429,42 +265,41 @@ export function createItemDetailView(itemData, currentUser) {
     if (btnDeleteItem) {
         btnDeleteItem.onclick = () => {
             if (!currentUser) return showToast(t('feedback.login_required'), "warning");
-            showDeleteConfirm(itemData, currentUser);
+            if (scope.isCurrent()) showDeleteConfirm(itemData, currentUser, () => scope.isCurrent());
         };
     }
 
     // 🐛 Bug修复：跳过系统页面的作者信息查询（如关于页面）
-    if (!itemData.isSystemPage) {
-        api.getUserProfile(itemData.author).then(res => {
-            const freshName = res.data.name || itemData.author;
-            const nameEl = container.querySelector("#detail-author-name");
-            if (nameEl) nameEl.innerText = freshName;
-            localStorage.setItem(authorCacheKey, JSON.stringify(res.data));
+    if (!itemData.isSystemPage && itemData.author && scope.isCurrent()) {
+        const originalNameEl = container.querySelector("#detail-author-name");
+        api.getUserProfile(itemData.author, scope.readOptions).then(res => {
+            if (!scope.isCurrent() || !originalNameEl?.isConnected || container.querySelector("#detail-author-name") !== originalNameEl) return;
+            if (res?.status !== 'success') return;
+            const profile = normalizeProfileData(res.data, itemData.author);
+            setCachedProfile(itemData.author, profile);
+            if (originalNameEl?.isConnected && container.querySelector("#detail-author-name") === originalNameEl) {
+                originalNameEl.textContent = profile.name || itemData.author;
+            }
         }).catch(() => {});
     }
 
-    // 🔄 P7后悔模式：异步加载退款按钮状态
-    renderRefundButton(container, itemData, currentUser);
-
-    // 🔄 云端购买状态兜底：本地无版本戳时，查询云端是否已购买
-    if (!localVersionHash && !isFree && currentUser) {
-        api.getPurchaseStatus(currentUser.account, itemData.id).then(res => {
-            const btnUseItem = container.querySelector("#btn-use-item");
-            if (!btnUseItem) return;
-            if (res.owned) {
-                // 📱 Web 模式无本地重装概念，文案改为「已购买」
-                btnUseItem.innerHTML = `✅ ${t(IS_WEB_MODE ? 'item.owned_purchased' : 'item.owned_reinstall')}`;
-                Object.assign(btnUseItem.style, {
-                    background: "#4CAF50",
-                    color: "#fff",
-                    border: "none"
-                });
-            }
-            // 未购买时保持默认的「立即获取使用」按钮
-        }).catch(err => {
-            console.warn("云端购买状态查询失败，fallback到本地逻辑:", err);
+    // 拥有文案和退款入口使用同一次、同账号的购买快照。
+    const needsOwnership = !localVersionHash && !isFree;
+    const needsRefund = itemData.allow_refund !== false;
+    if (currentUser && scope.isCurrent() && (needsOwnership || needsRefund)) {
+        const purchaseStatus = api.getPurchaseStatus(currentUser.account, itemData.id, scope.readOptions)
+            .then(response => {
+                if (!scope.isCurrent() || !isValidPurchaseStatus(response)) return null;
+                return response;
+            }).catch(() => null);
+        if (needsRefund) renderRefundButton(container, itemData, currentUser, scope, purchaseStatus);
+        if (needsOwnership) purchaseStatus.then(response => {
+            if (!scope.isCurrent() || !response?.owned || !btnUseItem?.isConnected
+                || container.querySelector("#btn-use-item") !== btnUseItem) return;
+            btnUseItem.textContent = `✅ ${t(IS_WEB_MODE ? 'item.owned_purchased' : 'item.owned_reinstall')}`;
+            btnUseItem.setAttribute("data-install-state", "success");
         });
     }
 
     return container;
-}
+}