Upload 98 files

前端页面/auth/找回账号表单组件.js

@@ -1,3 +1,4 @@
+import { createAuthFormScope } from "./认证表单生命周期.js";
 // 前端页面/auth/找回账号表单组件.js
 // ==========================================
 // 🔎 找回账号表单组件
@@ -31,6 +32,7 @@ export function renderRecoverForm(container, switchView) {
         <button id="btn-submit-recover" style="width: 100%; padding: 10px; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.recover_account')}</button>
         <div style="text-align: center; font-size: 12px;"><a href="#" id="recover-to-login" style="color: #2196F3; text-decoration: none;">${t('auth.back_to_login')}</a></div>
     `;
+    const formScope = createAuthFormScope(container);
 
     container.querySelector("#recover-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
 
@@ -56,10 +58,11 @@ export function renderRecoverForm(container, switchView) {
     let countdownTimer = null;
 
     // 🔧 注册清理函数：视图切换时清除倒计时定时器，防止内存泄漏
-    container._onCleanup = () => { if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; } };
+    formScope.addCleanup(() => { clearInterval(countdownTimer); countdownTimer = null; });
 
     btnSendCode.onclick = async (e) => {
         e.preventDefault();
+        if (!formScope.current() || btnSendCode.disabled) return;
 
         const emailInput = container.querySelector("#recover-email").value.trim();
         const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput);
@@ -70,14 +73,17 @@ export function renderRecoverForm(container, switchView) {
         btnSendCode.innerText = t('auth.sending');
 
         try {
-            await api.sendVerifyCode(emailInput, "email", "recover");
+            const response = await api.sendVerifyCode(emailInput, "email", "recover");
+            if (!formScope.current()) return;
+            if (response?.status !== 'success') throw new Error('Invalid verification response');
 
             showToast(t('auth.code_sent'), "success");
 
             countdownTimer = startCountdown(btnSendCode, 60, "#2196F3");
 
         } catch (err) {
-            showToast(err.message || t('feedback.error'), "error");
+            if (!formScope.current()) return;
+            showToast(t('feedback.error'), "error");
             btnSendCode.disabled = false;
             btnSendCode.style.background = "#2196F3";
             btnSendCode.innerText = t('auth.get_code');
@@ -87,6 +93,7 @@ export function renderRecoverForm(container, switchView) {
     // 提交找回：验证码核验成功后展示账号
     const btnSubmit = container.querySelector("#btn-submit-recover");
     btnSubmit.onclick = async () => {
+        if (!formScope.current() || btnSubmit.disabled) return;
         const email = container.querySelector("#recover-email").value.trim();
         const code = container.querySelector("#recover-code").value.trim();
 
@@ -98,7 +105,10 @@ export function renderRecoverForm(container, switchView) {
 
         try {
             const res = await api.recoverAccount(email, code);
+            if (!formScope.current()) return;
 
+            if (res?.status !== 'success' || typeof res.account !== 'string' || !res.account.trim()
+                || (res.name != null && typeof res.name !== 'string')) throw new Error('Invalid recovery response');
             showToast(t('auth.recover_success'), "success");
 
             // 🔧 展示结果前清除倒计时，避免定时器继续作用于已替换的 DOM
@@ -117,13 +127,17 @@ export function renderRecoverForm(container, switchView) {
             `;
 
             // 跳转重置密码表单，自动回填账号与邮箱
-            container.querySelector("#btn-go-reset").onclick = () => {
+            const resultButton = container.querySelector("#btn-go-reset");
+            const resultCurrent = () => formScope.alive() && container.contains(resultButton);
+            resultButton.onclick = () => {
+                if (!resultCurrent()) return;
                 switchView("reset", { prefill: { account: res.account, email: email } });
             };
-            container.querySelector("#btn-back-login").onclick = () => switchView("login");
+            container.querySelector("#btn-back-login").onclick = () => { if (resultCurrent()) switchView("login"); };
 
         } catch (err) {
-            showToast(err.message || t('feedback.error'), "error");
+            if (!formScope.current()) return;
+            showToast(t('feedback.error'), "error");
             btnSubmit.disabled = false;
             btnSubmit.innerText = t('auth.recover_account');
         }

前端页面/auth/注册表单组件.js

@@ -1,3 +1,4 @@
+import { createAuthFormScope } from "./认证表单生命周期.js";
 import { api } from "../core/网络请求API.js";
 import { regionData, getSortedCountries } from "./国家地区数据.js";
 import { showToast } from "../components/UI交互提示组件.js";
@@ -76,6 +77,7 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
         <button id="btn-submit-register" style="width: 100%; padding: 10px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.register_submit')}</button>
         <div style="text-align: center; font-size: 12px;">${t('auth.has_account')} <a href="#" id="toggle-to-login" style="color: #2196F3; text-decoration: none;">${t('auth.back_to_login')}</a></div>
     `;
+    const formScope = createAuthFormScope(container);
 
     const genderSelect = container.querySelector("#reg-gender");
     const avatarPreview = container.querySelector("#avatar-preview");
@@ -104,36 +106,69 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
     countrySelect.onchange = updateRegionOptions;
     updateRegionOptions();
     
-    let selectedAvatarFile = null;
+    let selectedAvatarFile = null, avatarGeneration = 0, avatarReader = null, avatarCropController = null;
+    const stopAvatarReader = () => {
+        const reader = avatarReader; avatarReader = null;
+        if (!reader) return;
+        reader.onload = reader.onerror = null;
+        if (reader.readyState === FileReader.LOADING) reader.abort();
+    };
+    formScope.addCleanup(() => { avatarGeneration++; avatarCropController?.abort(); avatarCropController = null; stopAvatarReader(); selectedAvatarFile = null; });
     genderSelect.onchange = (e) => { if (!selectedAvatarFile) avatarPreview.src = DEFAULT_AVATAR; };
 
     avatarInput.onchange = async (e) => {
+        if (!formScope.current()) return;
         const file = e.target.files[0];
         if (!file) return;
+        const token = ++avatarGeneration;
+        const currentAvatar = () => formScope.current() && token === avatarGeneration;
+        stopAvatarReader();
+        avatarCropController?.abort();
+        const cropController = new AbortController(); avatarCropController = cropController;
         // 📱 移动端适配：手机拍照原图普遍超过 3MB，不再用原始大小拦截，
         // 统一先走 1:1 裁剪压缩管线（输出 ≤512×512 JPG），与个人设置头像链路一致；
         // 用户取消裁剪时静默还原默认头像预览。
         avatarInput.value = "";
         let croppedFile;
         try {
-            croppedFile = await openImageCropper(file, 1, t('auth.avatar'), 1);
+            croppedFile = await openImageCropper(file, 1, t('auth.avatar'), 1, { signal: cropController.signal });
         } catch (err) {
+            if (avatarCropController === cropController) avatarCropController = null;
+            if (!currentAvatar()) return;
             showToast(t('auth.file_too_large'), "warning");
             selectedAvatarFile = null;
             avatarPreview.src = DEFAULT_AVATAR;
             return;
         }
+        if (avatarCropController === cropController) avatarCropController = null;
+        if (!currentAvatar()) return;
         if (!croppedFile) {
             selectedAvatarFile = null;
             avatarPreview.src = DEFAULT_AVATAR;
             return;
         }
-        avatarError.style.display = "none"; 
-        selectedAvatarFile = croppedFile; 
-        const reader = new FileReader(); 
-        reader.onload = (event) => avatarPreview.src = event.target.result; 
-        reader.onerror = () => showToast(t('auth.file_too_large'), "warning");
-        reader.readAsDataURL(croppedFile);
+        const reader = new FileReader(); avatarReader = reader;
+        const releaseReader = () => {
+            reader.onload = reader.onerror = null;
+            if (avatarReader === reader) avatarReader = null;
+        };
+        reader.onload = (event) => {
+            const result = event.target.result;
+            if (currentAvatar() && typeof result === 'string' && result) {
+                avatarError.style.display = "none";
+                selectedAvatarFile = croppedFile; avatarPreview.src = result;
+            }
+            releaseReader();
+        };
+        reader.onerror = () => {
+            if (currentAvatar()) showToast(t('auth.file_too_large'), "warning");
+            releaseReader();
+        };
+        try { reader.readAsDataURL(croppedFile); }
+        catch (_) {
+            releaseReader();
+            if (currentAvatar()) showToast(t('auth.file_too_large'), "warning");
+        }
     };
 
     container.querySelector("#toggle-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
@@ -158,9 +193,11 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
     // 发送注册验证码逻辑
     const btnRegSendCode = container.querySelector("#btn-reg-send-code");
     let regCountdownTimer = null;
+    formScope.addCleanup(() => { clearInterval(regCountdownTimer); regCountdownTimer = null; });
     
     btnRegSendCode.onclick = async (e) => {
         e.preventDefault();
+        if (!formScope.current() || btnRegSendCode.disabled) return;
         const emailInput = container.querySelector("#reg-email").value.trim();
         const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput);
         
@@ -171,13 +208,16 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
         btnRegSendCode.innerText = t('auth.sending');
         
         try {
-            await api.sendVerifyCode(emailInput, "email", "register");
+            const response = await api.sendVerifyCode(emailInput, "email", "register");
+            if (!formScope.current()) return;
+            if (response?.status !== 'success') throw new Error('Invalid verification response');
             showToast(t('auth.code_sent'), "success");
             
             regCountdownTimer = startCountdown(btnRegSendCode, 60, "#4CAF50");
             
         } catch (err) {
-            showToast(err.message || t('feedback.error'), "error");
+            if (!formScope.current()) return;
+            showToast(t('feedback.error'), "error");
             btnRegSendCode.disabled = false;
             btnRegSendCode.style.background = "#4CAF50";
             btnRegSendCode.innerText = t('auth.get_code');
@@ -217,4 +257,4 @@ export function renderRegisterForm(container, switchView, onSuccessCallback) {
 
         if (onSuccessCallback) onSuccessCallback(formData);
     };
-}
+}

前端页面/auth/认证表单生命周期.js

@@ -0,0 +1,21 @@
+/** 表单的所属DOM与清理范围；只丢弃迟到结果，不重放验证码等写请求。 */
+export function createAuthFormScope(container) {
+    const anchor = container.firstElementChild;
+    let disposed = false;
+    const cleanups = new Set();
+    const alive = () => !disposed && container.isConnected;
+    container._onCleanup = () => {
+        if (disposed) return;
+        disposed = true;
+        for (const cleanup of cleanups) { try { cleanup(); } catch (_) {} }
+        cleanups.clear();
+    };
+    return {
+        alive,
+        current: () => alive() && anchor?.parentElement === container,
+        addCleanup(cleanup) {
+            if (disposed) { try { cleanup(); } catch (_) {} return; }
+            cleanups.add(cleanup);
+        }
+    };
+}

前端页面/auth/重置密码表单组件.js

@@ -1,3 +1,4 @@
+import { createAuthFormScope } from "./认证表单生命周期.js";
 import { api } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
@@ -24,6 +25,7 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         <button id="btn-submit-reset" style="width: 100%; padding: 10px; background: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-bottom: 10px;">${t('auth.change_password')}</button>
         <div style="text-align: center; font-size: 12px;"><a href="#" id="toggle-to-login" style="color: #2196F3; text-decoration: none;">${t('auth.back_to_login')}</a></div>
     `;
+    const formScope = createAuthFormScope(container);
 
     container.querySelector("#toggle-to-login").onclick = (e) => { e.preventDefault(); switchView("login"); };
 
@@ -55,10 +57,11 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
     let countdownTimer = null;
 
     // 🔧 注册清理函数：视图切换时清除倒计时定时器，防止内存泄漏
-    container._onCleanup = () => { if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; } };
+    formScope.addCleanup(() => { clearInterval(countdownTimer); countdownTimer = null; });
     
     btnSendCode.onclick = async (e) => {
         e.preventDefault();
+        if (!formScope.current() || btnSendCode.disabled) return;
         
         // 先抓取上方输入的账号，没填就不让发验证码
         const accountInput = container.querySelector("#reset-account").value.trim();
@@ -76,14 +79,17 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         btnSendCode.innerText = t('auth.sending');
         
         try {
-            await api.sendVerifyCode(verifyInput, contactType, "reset", accountInput);
+            const response = await api.sendVerifyCode(verifyInput, contactType, "reset", accountInput);
+            if (!formScope.current()) return;
+            if (response?.status !== 'success') throw new Error('Invalid verification response');
             
             showToast(t('auth.code_sent'), "success");
             
             countdownTimer = startCountdown(btnSendCode, 60, "#2196F3");
             
         } catch (err) {
-            showToast(err.message || t('feedback.error'), "error");
+            if (!formScope.current()) return;
+            showToast(t('feedback.error'), "error");
             btnSendCode.disabled = false;
             btnSendCode.style.background = "#2196F3";
             btnSendCode.innerText = t('auth.get_code');
@@ -116,4 +122,4 @@ export function renderResetForm(container, switchView, onSuccessCallback, prefil
         };
         if (onSuccessCallback) onSuccessCallback(formData);
     };
-}
+}

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

@@ -12,6 +12,7 @@ import { showToast } from "./UI交互提示组件.js";
 import { setLanguage, getLanguage, t } from "./用户体验增强.js";
 import { clearAllCache } from "./性能优化工具.js";
 import { IS_WEB_MODE } from "../core/全局配置.js";
+import { getDiskCacheStats, clearDiskCache } from './缓存管理请求.js';
 
 // 🔧 设置项 localStorage Key
 const SETTINGS_KEY = "ComfyCommunity_Settings";
@@ -76,6 +77,7 @@ function formatSize(bytes) {
 function getBrowserCacheStats() {
     let totalSize = 0;
     let count = 0;
+    let available = true;
     try {
         for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
@@ -87,8 +89,8 @@ function getBrowserCacheStats() {
                 }
             }
         }
-    } catch (e) {}
-    return { count, totalSize };
+    } catch (e) { available = false; }
+    return { count, totalSize, available };
 }
 
 /**
@@ -509,28 +511,54 @@ export function createSettingsView() {
     
     // 📊 缓存统计面板
     const cacheStatsPanel = container.querySelector("#cache-stats-panel");
+    cacheStatsPanel.setAttribute('role', 'status');
+    cacheStatsPanel.setAttribute('aria-live', 'polite');
+    let statsGeneration = 0;
+    let statsController = null;
+    let lastStatsHTML = null;
+    let cacheViewDisposed = false;
+    container._cleanup = () => {
+        if (cacheViewDisposed) return;
+        cacheViewDisposed = true;
+        statsGeneration++;
+        statsController?.abort();
+        statsController = null;
+    };
     
     async function loadCacheStats() {
+        const generation = ++statsGeneration;
+        statsController?.abort();
+        const controller = new AbortController();
+        statsController = controller;
         // 📱 Web 模式：无本地磁盘缓存，仅统计浏览器缓存
         if (IS_WEB_MODE) {
+            statsController = null;
             const browserStats = getBrowserCacheStats();
+            if (!browserStats.available) {
+                const status = lastStatsHTML === null ? t('settings.cache_stats_unavailable') : t('settings.cache_stats_stale');
+                cacheStatsPanel.innerHTML = `<div>${status}</div>` + (lastStatsHTML || '');
+                return;
+            }
             cacheStatsPanel.innerHTML = `
                 <div style="padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 4px; border-left: 3px solid #9C27B0; color: #aaa; font-size: 13px;">
                     <span style="color: #ccc;">${t('settings.cache_browser')}：</span>${browserStats.count} ${t('settings.files')} · ${formatSize(browserStats.totalSize)}
                 </div>
             `;
+            lastStatsHTML = cacheStatsPanel.innerHTML;
             return;
         }
         try {
             const [diskRes, browserStats] = await Promise.all([
-                fetch("/community_hub/cache/stats").then(r => r.ok ? r.json() : null).catch(() => null),
+                getDiskCacheStats({ signal: controller.signal }),
                 Promise.resolve(getBrowserCacheStats())
             ]);
+            if (generation !== statsGeneration || cacheViewDisposed || !container.isConnected) return;
+            if (!browserStats.available) throw new Error('cache_stats_unavailable');
             
-            const imageCount = diskRes?.image_count || 0;
-            const imageSize = diskRes?.image_size || 0;
-            const videoCount = diskRes?.video_count || 0;
-            const videoSize = diskRes?.video_size || 0;
+            const imageCount = diskRes.image_count;
+            const imageSize = diskRes.image_size;
+            const videoCount = diskRes.video_count;
+            const videoSize = diskRes.video_size;
             const browserCount = browserStats.count;
             const browserSize = browserStats.totalSize;
             
@@ -542,6 +570,7 @@ export function createSettingsView() {
                         ${t('settings.no_cache')}
                     </div>
                 `;
+                lastStatsHTML = cacheStatsPanel.innerHTML;
                 return;
             }
             
@@ -556,12 +585,16 @@ export function createSettingsView() {
                     <span style="color: #ccc;">${t('settings.cache_browser')}：</span>${browserCount} ${t('settings.files')} · ${formatSize(browserSize)}
                 </div>
             `;
+            lastStatsHTML = cacheStatsPanel.innerHTML;
         } catch (e) {
+            if (generation !== statsGeneration || cacheViewDisposed || !container.isConnected) return;
             cacheStatsPanel.innerHTML = `
                 <div style="padding: 10px 12px; background: rgba(0,0,0,0.2); border-radius: 4px; border-left: 3px solid #9C27B0; color: #888; font-size: 13px;">
-                    ${t('settings.no_cache')}
+                    ${lastStatsHTML === null ? t('settings.cache_stats_unavailable') : t('settings.cache_stats_stale')}
                 </div>
-            `;
+            ` + (lastStatsHTML || '');
+        } finally {
+            if (statsController === controller) statsController = null;
         }
     }
     
@@ -569,31 +602,34 @@ export function createSettingsView() {
     const btnClearBrowser = container.querySelector("#btn-clear-browser-cache");
     const btnClearDisk = container.querySelector("#btn-clear-disk-cache");
     const btnClearAll = container.querySelector("#btn-clear-all-cache");
+    const clearButtons = [btnClearBrowser, btnClearDisk, btnClearAll].filter(Boolean);
+    let clearingCache = false;
     
     async function handleClearCache(btn, action) {
+        if (clearingCache || cacheViewDisposed || !container.isConnected) return;
+        clearingCache = true;
         const originalText = btn.textContent;
         btn.textContent = t('settings.cache_clearing');
-        btn.disabled = true;
+        clearButtons.forEach(button => { button.disabled = true; button.setAttribute('aria-busy', 'true'); });
         
         try {
             if (action === 'browser' || action === 'all') {
-                clearAllCache();
+                if (!clearAllCache()) throw new Error('cache_operation_unconfirmed');
             }
             if (action === 'disk' || action === 'all') {
-                await fetch("/community_hub/cache/clear", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ target: "all" })
-                });
+                await clearDiskCache();
             }
+            if (cacheViewDisposed || !container.isConnected) return;
             await loadCacheStats();
-            showToast(t('settings.cache_cleared'), "success");
+            if (!cacheViewDisposed && container.isConnected) showToast(t('settings.cache_cleared'), "success");
         } catch (e) {
-            showToast(t('settings.cache_cleared'), "success");
+            if (cacheViewDisposed || !container.isConnected) return;
+            showToast(t('settings.cache_clear_unconfirmed'), "error");
             await loadCacheStats();
         } finally {
             btn.textContent = originalText;
-            btn.disabled = false;
+            clearingCache = false;
+            clearButtons.forEach(button => { button.disabled = false; button.removeAttribute('aria-busy'); });
         }
     }
     

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

@@ -9,7 +9,8 @@
 // 🔧 P3优化：事件监听器生命周期管理，防止内存泄漏
 // ==========================================
 
-import { escapeHtml } from "../core/全局配置.js";
+import { validateImageFile } from "../market/图片文件检查.js";
+import { IMAGE_PROCESS, escapeHtml } from "../core/全局配置.js";
 // 🔧 i18n：头部操作提示走词典（用户体验_国际化.js 是零依赖叶子模块，引入不成环）
 import { t } from "./用户体验_国际化.js";
 
@@ -35,8 +36,19 @@ function _isTouchDevice() {
  * @param {number} maxSizeMB - 最大输出大小（MB）
  * @returns {Promise<File|null>} - 裁剪后的文件或 null（取消）
  */
-export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title'), maxSizeMB = 3) {
-    return new Promise((resolve) => {
+export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title'), maxSizeMB = 3, { signal } = {}) {
+    if (signal?.aborted) return null;
+    try { await validateImageFile(file, { signal }); }
+    catch (error) { if (signal?.aborted || error?.name === 'AbortError') return null; throw error; }
+    if (signal?.aborted) return null;
+    return new Promise((resolve, reject) => {
+        let isCleanedUp = false, bindTimer = null, activeCanvas = null;
+        let removalObserver = null, decodeTimer = null, encodeTimer = null;
+        const fail = () => {
+            if (isCleanedUp) return;
+            cleanup(false); reject(new Error('Crop processing unavailable'));
+        };
+        const onAbort = () => { cleanup(false); resolve(null); };
         const previousFocus = document.activeElement;
         const dialogId = `image-crop-dialog-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
         // 创建遮罩层
@@ -121,10 +133,17 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
         // 加载图片
         const reader = new FileReader();
         reader.onload = (e) => {
-            img.src = e.target.result;
+            if (isCleanedUp) return;
             img.onload = () => {
+                if (isCleanedUp) return;
                 imgNaturalWidth = img.naturalWidth;
                 imgNaturalHeight = img.naturalHeight;
+                if (!Number.isSafeInteger(imgNaturalWidth) || !Number.isSafeInteger(imgNaturalHeight)
+                    || imgNaturalWidth <= 0 || imgNaturalHeight <= 0
+                    || Math.max(imgNaturalWidth, imgNaturalHeight) > IMAGE_PROCESS.MAX_SOURCE_EDGE
+                    || imgNaturalWidth * imgNaturalHeight > IMAGE_PROCESS.MAX_PIXELS) { fail(); return; }
+                clearTimeout(decodeTimer); decodeTimer = null;
+                modal.querySelector('#btn-crop-confirm').disabled = false;
 
                 // 计算初始缩放（确保图片填满裁剪区域）
                 const scaleX = containerWidth / imgNaturalWidth;
@@ -134,8 +153,9 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
                 // 居中显示
                 updateImagePosition();
             };
+            img.src = e.target.result;
         };
-        reader.readAsDataURL(file);
+        reader.onerror = fail; img.onerror = fail;
 
         // 更新图片位置
         function updateImagePosition() {
@@ -348,7 +368,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
         });
         buttonContainer.innerHTML = `
             <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>
+            <button id="btn-crop-confirm" type="button" disabled 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
@@ -362,7 +382,9 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
         modal.querySelector("#btn-crop-cancel").focus();
 
         // 绑定缩放滑块事件
-        setTimeout(() => {
+        bindTimer = setTimeout(() => {
+            bindTimer = null;
+            if (isCleanedUp) return;
             const slider = modal.querySelector("#crop-scale-slider");
             const scaleValue = modal.querySelector("#crop-scale-value");
             
@@ -385,27 +407,41 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
 
             // 确认裁剪按钮
             modal.querySelector("#btn-crop-confirm").onclick = async () => {
+                if (isCleanedUp) return;
                 const btn = modal.querySelector("#btn-crop-confirm");
+                if (btn.disabled) return;
                 btn.textContent = `⏳ ${t('crop.processing')}`;
                 btn.disabled = true;
 
+                encodeTimer = setTimeout(fail, IMAGE_PROCESS.TIMEOUT);
                 try {
                     const croppedFile = await cropAndCompress();
+                    if (isCleanedUp) return;
                     cleanup();
                     resolve(croppedFile);
                 } catch (err) {
+                    if (isCleanedUp) return;
+                    clearTimeout(encodeTimer); encodeTimer = null;
                     btn.textContent = t('crop.process_failed');
                     btn.disabled = false;
-                    console.error("裁剪失败:", err);
+                    console.error("[RanKing] Crop processing failed");
                 }
             };
         }, 0);
 
         // 🔧 P3优化：统一清理函数，确保所有事件监听器被移除
-        let isCleanedUp = false;
-        function cleanup() {
+        function cleanup(restoreFocus = true) {
             if (isCleanedUp) return;  // 防止重复清理
             isCleanedUp = true;
+            const ownedFocus = modal.contains(document.activeElement);
+            clearTimeout(bindTimer); bindTimer = null;
+            clearTimeout(decodeTimer); clearTimeout(encodeTimer); decodeTimer = encodeTimer = null;
+            removalObserver?.disconnect(); removalObserver = null;
+            signal?.removeEventListener('abort', onAbort);
+            reader.onload = reader.onerror = null;
+            if (reader.readyState === FileReader.LOADING) { try { reader.abort(); } catch (_) { /* 继续释放其余所属资源 */ } }
+            img.onload = img.onerror = null; img.removeAttribute('src');
+            if (activeCanvas) { activeCanvas.width = activeCanvas.height = 0; activeCanvas = null; }
             document.removeEventListener("mousemove", handleMouseMove);
             document.removeEventListener("mouseup", handleMouseUp);
             document.removeEventListener("keydown", handleKeyDown);
@@ -414,7 +450,7 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
             cropContainer.removeEventListener("touchend", handleTouchEnd);
             cropContainer.removeEventListener("touchcancel", handleTouchEnd);
             overlay.remove();
-            if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus();
+            if (restoreFocus && ownedFocus && previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus();
         }
 
         // 点击遮罩关闭
@@ -425,78 +461,103 @@ export function openImageCropper(file, aspectRatio = 16/9, title = t('crop.title
             }
         };
 
+        signal?.addEventListener('abort', onAbort, { once: true });
+        if (signal?.aborted) onAbort();
+        if (!isCleanedUp) {
+            removalObserver = new MutationObserver(() => { if (!overlay.isConnected || !modal.isConnected) onAbort(); });
+            removalObserver.observe(document.body, { childList: true, subtree: true });
+            if (!overlay.isConnected || !modal.isConnected) onAbort();
+        }
+        if (!isCleanedUp) {
+            decodeTimer = setTimeout(fail, IMAGE_PROCESS.TIMEOUT);
+            try { reader.readAsDataURL(file); } catch (_) { fail(); }
+        }
+
         // 裁剪并压缩
         async function cropAndCompress() {
-            const canvas = document.createElement("canvas");
-            const ctx = canvas.getContext("2d");
-
-            // 输出尺寸（根据比例）
-            let outputWidth, outputHeight;
-            if (aspectRatio === 1) {
-                // 1:1 正方形（头像，512x512）
-                outputWidth = outputHeight = 512;
-            } else if (aspectRatio > 1) {
-                // 16:9 横向
-                outputWidth = Math.min(1920, containerWidth * 2);
-                outputHeight = outputWidth / aspectRatio;
-            } else {
-                // 9:16 纵向
-                outputHeight = Math.min(1920, containerHeight * 2);
-                outputWidth = outputHeight * aspectRatio;
-            }
+            if (isCleanedUp) throw new Error('Crop closed');
+            const canvas = document.createElement("canvas"); activeCanvas = canvas;
+            try {
+                const ctx = canvas.getContext("2d");
+
+                // 输出尺寸（根据比例）
+                let outputWidth, outputHeight;
+                if (aspectRatio === 1) {
+                    // 1:1 正方形（头像，512x512）
+                    outputWidth = outputHeight = 512;
+                } else if (aspectRatio > 1) {
+                    // 16:9 横向
+                    outputWidth = Math.min(1920, containerWidth * 2);
+                    outputHeight = outputWidth / aspectRatio;
+                } else {
+                    // 9:16 纵向
+                    outputHeight = Math.min(1920, containerHeight * 2);
+                    outputWidth = outputHeight * aspectRatio;
+                }
 
-            canvas.width = outputWidth;
-            canvas.height = outputHeight;
+                canvas.width = outputWidth;
+                canvas.height = outputHeight;
+
+                // 计算裁剪区域在原图上的位置
+                const scaledWidth = imgNaturalWidth * scale;
+                const scaledHeight = imgNaturalHeight * scale;
+                const imgLeft = (containerWidth - scaledWidth) / 2 + offsetX;
+                const imgTop = (containerHeight - scaledHeight) / 2 + offsetY;
+
+                // 裁剪区域相对于缩放后图片的位置
+                const cropX = -imgLeft / scale;
+                const cropY = -imgTop / scale;
+                const cropW = containerWidth / scale;
+                const cropH = containerHeight / scale;
+
+                // 绘制到 canvas
+                ctx.drawImage(
+                    img,
+                    cropX, cropY, cropW, cropH,  // 源图裁剪区域
+                    0, 0, outputWidth, outputHeight  // 目标canvas
+                );
+
+                // 压缩并转换为 Blob
+                let quality = 0.92;
+                let blob = await canvasToBlob(canvas, quality);
+                if (isCleanedUp || !blob) throw new Error('Crop output unavailable');
+
+                // 如果超过限制大小，逐步降低质量
+                while (blob.size > maxSizeMB * 1024 * 1024 && quality > 0.3) {
+                    quality -= 0.1;
+                    blob = await canvasToBlob(canvas, quality);
+                    if (isCleanedUp || !blob) throw new Error('Crop output unavailable');
+                }
 
-            // 计算裁剪区域在原图上的位置
-            const scaledWidth = imgNaturalWidth * scale;
-            const scaledHeight = imgNaturalHeight * scale;
-            const imgLeft = (containerWidth - scaledWidth) / 2 + offsetX;
-            const imgTop = (containerHeight - scaledHeight) / 2 + offsetY;
-
-            // 裁剪区域相对于缩放后图片的位置
-            const cropX = -imgLeft / scale;
-            const cropY = -imgTop / scale;
-            const cropW = containerWidth / scale;
-            const cropH = containerHeight / scale;
-
-            // 绘制到 canvas
-            ctx.drawImage(
-                img,
-                cropX, cropY, cropW, cropH,  // 源图裁剪区域
-                0, 0, outputWidth, outputHeight  // 目标canvas
-            );
-
-            // 压缩并转换为 Blob
-            let quality = 0.92;
-            let blob = await canvasToBlob(canvas, quality);
-
-            // 如果超过限制大小，逐步降低质量
-            while (blob.size > maxSizeMB * 1024 * 1024 && quality > 0.3) {
-                quality -= 0.1;
-                blob = await canvasToBlob(canvas, quality);
-            }
+                // 如果仍然超过限制，缩小尺寸
+                if (blob.size > maxSizeMB * 1024 * 1024) {
+                    const scaleFactor = Math.sqrt((maxSizeMB * 1024 * 1024) / blob.size) * 0.9;
+                    canvas.width = outputWidth * scaleFactor;
+                    canvas.height = outputHeight * scaleFactor;
+                    ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, canvas.width, canvas.height);
+                    blob = await canvasToBlob(canvas, 0.85);
+                    if (isCleanedUp || !blob) throw new Error('Crop output unavailable');
+                }
 
-            // 如果仍然超过限制，缩小尺寸
-            if (blob.size > maxSizeMB * 1024 * 1024) {
-                const scaleFactor = Math.sqrt((maxSizeMB * 1024 * 1024) / blob.size) * 0.9;
-                canvas.width = outputWidth * scaleFactor;
-                canvas.height = outputHeight * scaleFactor;
-                ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, canvas.width, canvas.height);
-                blob = await canvasToBlob(canvas, 0.85);
+                if (!Number.isSafeInteger(blob.size) || blob.size <= 0 || blob.size > maxSizeMB * 1024 * 1024) {
+                    throw new Error('Crop output exceeds budget');
+                }
+                // 生成文件名
+                const baseName = file.name.replace(/\.[^/.]+$/, "");
+                const fileName = `${baseName}_cropped.jpg`;
+
+                return new File([blob], fileName, { type: "image/jpeg" });
+            } finally {
+                canvas.width = canvas.height = 0;
+                if (activeCanvas === canvas) activeCanvas = null;
             }
-
-            // 生成文件名
-            const baseName = file.name.replace(/\.[^/.]+$/, "");
-            const fileName = `${baseName}_cropped.jpg`;
-
-            return new File([blob], fileName, { type: "image/jpeg" });
         }
 
         // Canvas 转 Blob 辅助函数
         function canvasToBlob(canvas, quality) {
             return new Promise((resolve) => {
-                canvas.toBlob((blob) => resolve(blob), "image/jpeg", quality);
+                if (isCleanedUp) throw new Error('Crop closed');
+                canvas.toBlob((blob) => resolve(isCleanedUp ? null : blob), "image/jpeg", quality);
             });
         }
     });

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

@@ -237,6 +237,9 @@ const translations = {
         'settings.clear_all_cache': '清除全部缓存',
         'settings.cache_clearing': '清理中...',
         'settings.cache_cleared': '缓存已清除',
+        'settings.cache_clear_unconfirmed': '缓存清理未确认完成，部分缓存可能已清除。请刷新统计后再试。',
+        'settings.cache_stats_unavailable': '暂时无法读取缓存统计',
+        'settings.cache_stats_stale': '暂时无法刷新，仍显示上次统计',
         'settings.files': '个文件',
         'settings.no_cache': '无缓存',
         
@@ -545,6 +548,8 @@ const translations = {
         'social.unfollow': '取消关注',
         'social.send_message': '发消息',
         'social.tip_author': '赞赏作者',
+        'social.comment_refresh_required': '评论操作已完成，请重新打开当前页面更新显示后再操作。',
+        'social.comment_unconfirmed': '评论操作结果尚未确认，请重新打开当前页面核对后再操作。',
         'social.say_something': '说点什么...',
         'social.reply': '回复',
         'social.reply_to': '回复',
@@ -655,6 +660,8 @@ const translations = {
         'creator.tip_login_required': '请先登录',
         'creator.message_board': '💬 创作者留言板',
         'creator.visit_profile': '访问 TA 的主页',
+        'creator.expand_details': '展开详情',
+        'creator.collapse_details': '收起详情',
         
         // 通用补充
         'common.back': '返回',
@@ -867,6 +874,12 @@ const translations = {
         'task.delete_confirm_desc': '删除后无法恢复，确定要删除这个任务吗？',
         'task.delete_success': '任务已删除',
         'task.delete_failed': '删除失败',
+        'task.delete_unconfirmed': '删除结果尚未确认，请先关闭弹窗并核对任务状态，避免重复操作。',
+        'task.delete_pending': '删除结果待确认',
+        'task.operation_unconfirmed': '操作结果尚未确认，请先关闭弹窗并核对任务和钱包状态，避免重复操作。',
+        'task.operation_pending': '操作结果待确认',
+        'task.comment_unconfirmed': '评论操作结果尚未确认，请先重新打开任务核对评论，避免重复操作。',
+        'task.comment_pending': '评论结果待确认',
         'task.cancel_apply': '撤回申请',
         'task.apply_task': '🙋 申请接单',
         'task.submit_result': '📤 提交成果',
@@ -1607,6 +1620,7 @@ const translations = {
         'settings_form.crop_ui_bg': '裁剪界面背景',
         'settings_form.uploading': '上传中...',
         'settings_form.avatar_process_failed': '头像处理失败，请重新选择图片后重试。',
+        'settings_form.image_process_failed': '图片处理失败，请重新选择图片后重试。',
         'settings_form.banner_selected': '背景图已选择，点击底部保存设置后才会上传。',
         'settings_form.ui_bg_applied': '界面背景设置成功，已立即生效！',
         'settings_form.ui_bg_cleared': '已清除界面背景，已立即生效。',
@@ -1929,6 +1943,9 @@ const translations = {
         'settings.clear_all_cache': 'Clear All Cache',
         'settings.cache_clearing': 'Clearing...',
         'settings.cache_cleared': 'Cache Cleared',
+        'settings.cache_clear_unconfirmed': 'Cache clearing was not confirmed. Some cache may have been removed. Refresh the statistics before trying again.',
+        'settings.cache_stats_unavailable': 'Cache statistics are temporarily unavailable',
+        'settings.cache_stats_stale': 'Refresh failed. Showing the previous statistics.',
         'settings.files': 'files',
         'settings.no_cache': 'No Cache',
         
@@ -2238,6 +2255,8 @@ const translations = {
         'social.unfollow': 'Unfollow',
         'social.send_message': 'Send Message',
         'social.tip_author': 'Tip Author',
+        'social.comment_refresh_required': 'The comment action completed. Reopen this page to update the display before another action.',
+        'social.comment_unconfirmed': 'The comment result is unconfirmed. Reopen this page to check before another action.',
         'social.say_something': 'Say something...',
         'social.reply_to': 'Reply to',
         'social.comment_deleted': 'This comment has been deleted',
@@ -2345,6 +2364,8 @@ const translations = {
         'creator.tip_login_required': 'Please login first',
         'creator.message_board': '💬 Creator Message Board',
         'creator.visit_profile': 'Visit profile',
+        'creator.expand_details': 'Show details',
+        'creator.collapse_details': 'Hide details',
         'common.back': 'Back',
         
         // Market
@@ -2544,6 +2565,12 @@ const translations = {
         'task.delete_confirm_desc': 'This action cannot be undone. Are you sure you want to delete this task?',
         'task.delete_success': 'Task deleted',
         'task.delete_failed': 'Failed to delete',
+        'task.delete_unconfirmed': 'Deletion is unconfirmed. Close this dialog and check the task status before trying again.',
+        'task.delete_pending': 'Deletion unconfirmed',
+        'task.operation_unconfirmed': 'The result is unconfirmed. Close this dialog and check the task and wallet before trying again.',
+        'task.operation_pending': 'Result unconfirmed',
+        'task.comment_unconfirmed': 'The comment result is unconfirmed. Reopen the task and check its comments before trying again.',
+        'task.comment_pending': 'Comment result unconfirmed',
         'task.cancel_apply': 'Withdraw',
         'task.apply_task': '🙋 Apply',
         'task.submit_result': '📤 Submit Result',
@@ -3261,6 +3288,7 @@ const translations = {
         '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.image_process_failed': 'Could not process the image. 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.',

前端页面/components/缓存管理请求.js

@@ -0,0 +1,67 @@
+// 本机缓存运维请求：单次提交、有界响应；不参与云端冷却或榜单缓存。
+import { API } from '../core/全局配置.js';
+
+async function readSmallJSON(response, controller) {
+    const declared = response.headers.get('Content-Length');
+    if (declared !== null && (!/^\d+$/.test(declared) || Number(declared) > API.LOCAL_CACHE_RESPONSE_MAX_BYTES)) {
+        throw new Error('cache_response_invalid');
+    }
+    const reader = response.body?.getReader();
+    if (!reader) throw new Error('cache_response_invalid');
+    const chunks = [];
+    let size = 0, complete = false;
+    try {
+        while (true) {
+            const chunk = await reader.read();
+            if (chunk.done) { complete = true; break; }
+            if (!chunk.value.byteLength) continue;
+            size += chunk.value.byteLength;
+            if (size > API.LOCAL_CACHE_RESPONSE_MAX_BYTES) throw new Error('cache_response_invalid');
+            chunks.push(chunk.value);
+        }
+        const body = new Uint8Array(size);
+        let offset = 0;
+        for (const chunk of chunks) { body.set(chunk, offset); offset += chunk.byteLength; }
+        return JSON.parse(new TextDecoder('utf-8', { fatal: true }).decode(body));
+    } finally {
+        if (!complete) {
+            controller.abort();
+            try { await reader.cancel(); } catch {}
+        }
+        reader.releaseLock();
+    }
+}
+
+async function requestCache(action, { signal } = {}) {
+    const controller = new AbortController();
+    const abort = () => controller.abort();
+    signal?.addEventListener('abort', abort, { once: true });
+    if (signal?.aborted) controller.abort();
+    const timer = setTimeout(abort, action === 'stats' ? API.LOCAL_CACHE_STATS_TIMEOUT : API.LOCAL_CACHE_CLEAR_TIMEOUT);
+    try {
+        if (controller.signal.aborted) throw new Error('cache_operation_unconfirmed');
+        const response = await fetch('/community_hub/cache/'+action, {
+            method: action === 'stats' ? 'GET' : 'POST',
+            headers: action === 'stats' ? {} : { 'Content-Type': 'application/json' },
+            body: action === 'stats' ? undefined : JSON.stringify({ target: 'all' }),
+            cache: 'no-store', signal: controller.signal,
+        });
+        if (!response.ok) throw new Error('cache_operation_unconfirmed');
+        const data = await readSmallJSON(response, controller);
+        const fields = action === 'stats' ? ['image_count', 'image_size', 'video_count', 'video_size'] : ['cleared_count', 'freed_size'];
+        if (!data || typeof data !== 'object' || Array.isArray(data)
+                || fields.some(key => !Number.isSafeInteger(data[key]) || data[key] < 0)) {
+            throw new Error('cache_response_invalid');
+        }
+        return Object.fromEntries(fields.map(key => [key, data[key]]));
+    } catch {
+        throw new Error('cache_operation_unconfirmed');
+    } finally {
+        clearTimeout(timer);
+        signal?.removeEventListener('abort', abort);
+        controller.abort();
+    }
+}
+
+export const getDiskCacheStats = options => requestCache('stats', options);
+export const clearDiskCache = options => requestCache('clear', options);

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

@@ -2,6 +2,7 @@
 
 import { api } from "../core/网络请求API.js";
 import { API, CACHE } from "../core/全局配置.js";
+import { getCompleteImageUrl } from "../core/网络请求_图片代理.js";
 import { t } from "./用户体验_国际化.js";
 
 // ========== 广告配置数据（默认值 / fallback） ==========
@@ -54,17 +55,22 @@ function validateBannerConfig(data) {
  * @returns {Object|null} data 为缓存内容，无缓存时为 null
  */
 function readBannerCache() {
+    let cached;
     try {
-        const cached = localStorage.getItem(BANNER_CACHE_KEY);
-        if (cached) {
-            const { data } = JSON.parse(cached);
-            return validateBannerConfig(data);
-        }
-    } catch (parseErr) {
-        // 缓存数据损坏，清除
+        cached = localStorage.getItem(BANNER_CACHE_KEY);
+    } catch (storageError) {
+        // 无法读取不代表缓存损坏；保留未确认的数据，等待存储恢复。
+        return null;
+    }
+    if (!cached) return null;
+    try {
+        const { data } = JSON.parse(cached);
+        return validateBannerConfig(data);
+    } catch (parseError) {
+        // 只有已经读到且确认无效的配置才清除。
         try {
             localStorage.removeItem(BANNER_CACHE_KEY);
-        } catch (storageErr) {
+        } catch (storageError) {
             console.warn("广告缓存不可清理，继续使用默认显示流程");
         }
     }
@@ -98,6 +104,9 @@ async function prepareBannerConfig(data) {
     if (data === null) return { config: { ...BANNER_CONFIG }, image: null };
     const config = validateBannerConfig(data);
     if (!config.enabled) return { config, image: null };
+    // 新配置在本地缓存中保留已下载的代理地址；旧缓存直链仍按原流程立即显示。
+    config.bannerImage = getCompleteImageUrl(config.bannerImage);
+    config.detailImage = getCompleteImageUrl(config.detailImage);
     const [image] = await Promise.all([
         preloadImage(config.bannerImage),
         preloadImage(config.detailImage)

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

@@ -46,9 +46,30 @@ try {
 // option 的 value 是独立字面量，排序/筛选逻辑不受影响
 const noTr = (txt) => `${txt}\u200b`;
 
+const sidebarPreferenceMemory = new Map();
+const pendingSidebarPreferences = new Set();
 const Store = {
-    save(key, value) { localStorage.setItem(`ComfyCommunitySidebar_${key}`, value); },
-    load(key, defaultValue) { return localStorage.getItem(`ComfyCommunitySidebar_${key}`) || defaultValue; }
+    save(key, value) {
+        const saved = String(value);
+        sidebarPreferenceMemory.set(key, saved);
+        try {
+            localStorage.setItem(`ComfyCommunitySidebar_${key}`, saved);
+            pendingSidebarPreferences.delete(key);
+        } catch {
+            pendingSidebarPreferences.add(key);
+        }
+    },
+    load(key, defaultValue) {
+        if (pendingSidebarPreferences.has(key)) return sidebarPreferenceMemory.get(key) || defaultValue;
+        try {
+            const saved = localStorage.getItem(`ComfyCommunitySidebar_${key}`);
+            if (saved === null) sidebarPreferenceMemory.delete(key);
+            else sidebarPreferenceMemory.set(key, saved);
+            return saved || defaultValue;
+        } catch {
+            return sidebarPreferenceMemory.get(key) || defaultValue;
+        }
+    }
 };
 
 // 工具背景图本地存储管理（账号隔离）
@@ -61,7 +82,10 @@ const BackgroundStore = {
             console.warn("⚠️ 界面背景保存失败（存储空间不足或不可用）:", e.message);
         }
     },
-    load() { return localStorage.getItem(getBackgroundKey()) || null; },
+    load() {
+        try { return localStorage.getItem(getBackgroundKey()) || null; }
+        catch { return null; }
+    },
     clear() {
         try {
             localStorage.removeItem(getBackgroundKey());

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

@@ -18,7 +18,7 @@
 // 🌐 API 配置
 // ==========================================
 
-/** @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 }} */
+/** @type {{ BASE_URL: string, TIMEOUT: number, VIDEO_UPLOAD_TIMEOUT: number, VIDEO_UPLOAD_RESPONSE_MAX_CHARS: number, LOCAL_CACHE_STATS_TIMEOUT: number, LOCAL_CACHE_CLEAR_TIMEOUT: number, LOCAL_CACHE_RESPONSE_MAX_BYTES: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, PROFILE_RESOURCE_TIMEOUT: number, CREATOR_CHART_SCRIPT_URL: string, BACKGROUND_TIMEOUT: number, BACKGROUND_RETRIES: number, WORKFLOW_DOWNLOAD_TIMEOUT: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string, IMAGE_PROXY_PATH: string, LOCAL_IMAGE_PROXY_PREFIX: string, COMPLETE_IMAGE_QUERY_SUFFIX: 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'],
@@ -31,6 +31,9 @@ export const API = {
     TIMEOUT: 30000,
     VIDEO_UPLOAD_TIMEOUT: 300000,
     VIDEO_UPLOAD_RESPONSE_MAX_CHARS: 65536,
+    LOCAL_CACHE_STATS_TIMEOUT: 10000,
+    LOCAL_CACHE_CLEAR_TIMEOUT: 60000,
+    LOCAL_CACHE_RESPONSE_MAX_BYTES: 8192,
 
     // GET 请求重试次数（实际尝试 MAX_RETRIES + 1 次）
     // 🔧 修复：此前本值为 3 且全库无人读取，真正的重试次数硬编码在 网络请求_基础设施.js 中为 2，
@@ -50,6 +53,7 @@ export const API = {
     SEARCH_TIMEOUT: 10000,
     SEARCH_RETRIES: 1,
     PROFILE_RESOURCE_TIMEOUT: 5000,
+    CREATOR_CHART_SCRIPT_URL: "https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js",
 
     // 🐢 后台补新预算（仅作用于 GET，由 网络请求_基础设施.js 按「本地是否已有可兜底数据」判定）
     // 七大列表视图都是「本地数据先上屏 → 再发请求补新」，此时界面上已经有内容，
@@ -75,6 +79,9 @@ export const API = {
     SEARCH_COMPONENT_ID: "sidebar-search",
     // 上传相对路径的云端图片读取入口。
     IMAGE_PROXY_PATH: "/api/image_proxy",
+    // 本地广告预载要求真实图片，熔断占位图不能作为下载成功。
+    LOCAL_IMAGE_PROXY_PREFIX: "/community_hub/image?url=",
+    COMPLETE_IMAGE_QUERY_SUFFIX: "&require_complete=1",
     // 身份相关或私有 GET 禁止通用响应缓存；公开列表仍使用原缓存策略。
     PRIVATE_GET_PATTERNS: [
         /^\/api\/(wallet|messages|chats|admin|disputes|users)(?:\/|$)/,
@@ -760,4 +767,4 @@ export default {
 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]) });
+export const TASK_LIMITS = Object.freeze({ MAX_PRICE: 2147483647, MAX_REFERENCE_IMAGES: 6, DEPOSIT_RATIOS: Object.freeze([10, 20, 30, 50]), TIP_AMOUNTS: Object.freeze([10, 50, 100, 500]) });

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

@@ -59,13 +59,14 @@ const api = {
 
     async getUserProfile(account, options = {}) { return request(`/api/users/${account}`, options); },
     async updateUserProfile(account, data) { return request(`/api/users/${account}`, { method: "PUT", body: data }); },
+    async updateUserSettings(account, data) { return request(`/api/users/${account}/settings`, { 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, options = {}) { return request(`/api/creators?sort=${sort}&limit=${limit}`, options); },
     // 🔍 带上取消分组 ID：用户继续输入时，上一次仍在途的搜索请求可被 requestCancelManager 撤销，
     // 不再占用并发额度与超时预算（调用时机见 侧边栏数据引擎.js 的创作者搜索分支）
     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 getCreatorDetails(account, options = {}) { return request(`/api/creators/${account}/details`, options); },
     async uploadFile(file, fileType, timeout = 120000) {
         const formData = new FormData();
         formData.append("file", file);

前端页面/core/网络请求_图片代理.js

@@ -36,12 +36,26 @@ function _unwrapProxy(url, prefix) {
     let result = url;
     let guard = 0;
     while (result.startsWith(prefix) && guard++ < 10) {
-        try { result = decodeURIComponent(result.replace(prefix, '')); }
+        try {
+            let encoded = result.slice(prefix.length);
+            if (prefix === API.LOCAL_IMAGE_PROXY_PREFIX && encoded.endsWith(API.COMPLETE_IMAGE_QUERY_SUFFIX)) {
+                encoded = encoded.slice(0, -API.COMPLETE_IMAGE_QUERY_SUFFIX.length);
+            }
+            result = decodeURIComponent(encoded);
+        }
         catch (e) { break; }
     }
     return result;
 }
 
+/** 广告预载复用磁盘缓存；只有真实图片成功，才允许更新已展示的广告。 */
+export function getCompleteImageUrl(url) {
+    if (!url || typeof url !== 'string') return url;
+    const original = _unwrapProxy(url, API.LOCAL_IMAGE_PROXY_PREFIX);
+    if (IS_WEB_MODE || !original.startsWith('http')) return original;
+    return API.LOCAL_IMAGE_PROXY_PREFIX + encodeURIComponent(original) + API.COMPLETE_IMAGE_QUERY_SUFFIX;
+}
+
 // 🚀 导出图片代理函数，供其他组件在缓存读取后调用
 export function proxyImages(obj) {
     if (!obj) return obj;

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

@@ -424,7 +424,10 @@ export function clearAllCache() {
             }
         }
         keysToRemove.forEach(k => localStorage.removeItem(k));
-    } catch {}
+        return true;
+    } catch {
+        return false;
+    }
 }
 
 // LRU 顺序更新

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

@@ -365,8 +365,11 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     detailView.appendChild(refundArea);
 
     let isRendered = false;
+    let commentUI = null;
     const toggleButton = summaryView.querySelector('.card-summary__toggle');
     const setExpanded = (expanded) => {
+        if (expanded) mountComments();
+        commentUI?._setActive?.(expanded);
         if (!expanded && detailView.contains(document.activeElement)) toggleButton.focus();
         detailView.hidden = !expanded;
         detailView.style.display = expanded ? "block" : "none";
@@ -414,12 +417,14 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     
     // 🚀 核心修改：传入一个回调函数，当组件内部发送/删除留言时，外部的数字能实时响应刷新！
     // 🚀 P0安全修复：传递 itemData.author 作为 contentAuthor，使内容作者可以删除其内容下的评论
-    const commentUI = createCommentSection(itemData.id, itemData.commentsData || [], currentUser, (newCount) => {
-        const badge = summaryView.querySelector(".card-comment-count");
-        if (badge) badge.innerText = `💬 ${newCount}`;
-    }, itemData.author);
-    
-    commentsContainer.appendChild(commentUI);
+    function mountComments() {
+        if (commentUI) return;
+        commentUI = createCommentSection(itemData.id, itemData.commentsData || [], currentUser, (newCount) => {
+            const badge = summaryView.querySelector(".card-comment-count");
+            if (badge) badge.innerText = `💬 ${newCount}`;
+        }, itemData.author);
+        commentsContainer.appendChild(commentUI);
+    }
     detailView.appendChild(commentsContainer);
 
     if (currentUser && currentUser.account === itemData.author) {
@@ -450,6 +455,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     // 🖼️ 启用图片懒加载（跳过 data URL 和已处理的）
     lazyLoadImages(card);
 
+    card._cleanup = () => commentUI?._cleanup?.();
     card.appendChild(summaryView);
     card.appendChild(detailView);
     return card;

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

@@ -11,36 +11,80 @@
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { createCommentSection } from "../social/评论与互动组件.js";
 import { renderTipLevelHTML, getTipLevelRuleShort } from "../components/打赏等级工具.js";
-import { getBannerCacheKey, PLACEHOLDERS, getCachedProfile, getProfileWithSWR, escapeHtml } from "../core/全局配置.js";
+import { getBannerCacheKey, PLACEHOLDERS, getCachedProfile, getProfileWithSWR, escapeHtml, CACHE, API } from "../core/全局配置.js";
 import { api } from "../core/网络请求_业务API.js";
+import { captureRequestSession, requestCancelManager } from "../core/网络请求_基础设施.js";
+import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
+import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
 import { getSettings } from "../components/全局设置组件.js";
 import { t } from "../components/用户体验增强.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { openTipModal } from "../profile/个人中心_赞赏组件.js";
 
-// ==========================================
-// 📌 模块级常量
-// ==========================================
-
-// 打赏按钮统一样式（通过 CSS 类控制 hover，避免内联事件）
-const _TIP_BUTTON_STYLE = 'padding: 4px 10px; background: linear-gradient(135deg, #FF9800, #F57C00); color: #fff; border: none; border-radius: 4px; font-size: 11px; cursor: pointer; transition: 0.2s;';
-
-// section 标签统一样式
-const _SECTION_LABEL_STYLE = 'font-size: 12px; font-weight: bold; margin-bottom: 8px; color: #aaa;';
-
-// ==========================================
-// 📌 模块级状态：当前展开的卡片
-// ==========================================
+// 当前展开卡片由原生展开按钮与鼠标摘要入口共同管理。
 let currentExpandedCard = null;
 
-// 注入打赏按钮 hover 样式（模块加载时执行一次）
-(function _injectTipBtnStyle() {
-    if (document.getElementById('creator-tip-btn-style')) return;
-    const style = document.createElement('style');
-    style.id = 'creator-tip-btn-style';
-    style.textContent = '.creator-tip-btn:hover { opacity: 0.8; }';
-    document.head.appendChild(style);
-})();
+// 身份事件共用底层订阅；每张卡片仍独立捕获会话并决定是否撤销。
+const creatorSessionSubscribers = new Set();
+let stopCreatorSessionSubscription = null;
+let creatorSessionDispatchDepth = 0;
+function releaseCreatorSessionSubscription() {
+    if (creatorSessionSubscribers.size || creatorSessionDispatchDepth) return;
+    const stop = stopCreatorSessionSubscription;
+    stopCreatorSessionSubscription = null;
+    stop?.();
+}
+function subscribeCreatorSessionChanges(notify) {
+    const entry = { notify };
+    creatorSessionSubscribers.add(entry);
+    if (!stopCreatorSessionSubscription) {
+        try {
+            stopCreatorSessionSubscription = subscribeTaskSessionChanges(force => {
+                creatorSessionDispatchDepth++;
+                try {
+                    // 本轮新建的卡片不接收旧事件，已清理的卡片不再被通知。
+                    for (const current of [...creatorSessionSubscribers]) {
+                        if (!creatorSessionSubscribers.has(current)) continue;
+                        try { current.notify(force); }
+                        catch (_) { console.warn('创作者会话通知失败，继续通知其它卡片。'); }
+                    }
+                } finally {
+                    creatorSessionDispatchDepth--;
+                    releaseCreatorSessionSubscription();
+                }
+            }, { target: window, eventBus, events: EVENTS,
+                userKey: CACHE.LEGACY_KEYS.USER, tokenKey: CACHE.LEGACY_KEYS.TOKEN });
+        } catch (error) {
+            creatorSessionSubscribers.delete(entry);
+            throw error;
+        }
+    }
+    return () => {
+        creatorSessionSubscribers.delete(entry);
+        releaseCreatorSessionSubscription();
+    };
+}
+
+// 所有卡片共用一个移除观察器；不为未展开的卡片逐个扫描整页。
+const mountedCreatorCards = new Map();
+let creatorRemovalObserver = null;
+function trackCreatorRemoval(card, dispose) {
+    mountedCreatorCards.set(card, dispose);
+    if (!creatorRemovalObserver) {
+        creatorRemovalObserver = new MutationObserver(() => {
+            for (const [node, cleanup] of mountedCreatorCards) {
+                if (!node.isConnected) cleanup();
+            }
+        });
+        creatorRemovalObserver.observe(document.body, { childList: true, subtree: true });
+    }
+    return () => {
+        mountedCreatorCards.delete(card);
+        if (!mountedCreatorCards.size) {
+            creatorRemovalObserver?.disconnect(); creatorRemovalObserver = null;
+        }
+    };
+}
 
 /**
  * 处理打赏创作者按钮点击
@@ -49,18 +93,19 @@ let currentExpandedCard = null;
  * @param {Function} onTipSuccess - 打赏成功回调
  */
 async function handleTipCreator(creatorData, currentUser, onTipSuccess, parentCurrent) {
+    if (parentCurrent && !parentCurrent()) return;
     // 检查用户是否登录
     if (!currentUser) {
         showToast(t('creator.tip_login_required'), "warning");
         return;
     }
-    
+
     // 不能给自己打赏
     if (currentUser.account === creatorData.account) {
         showToast(t('creator.cannot_tip_self'), "warning");
         return;
     }
-    
+
     // 打开打赏弹窗
     await openTipModal(currentUser, {
         account: creatorData.account,
@@ -71,15 +116,30 @@ async function handleTipCreator(creatorData, currentUser, onTipSuccess, parentCu
     }, null, { isCurrent: parentCurrent });
 }
 
+let echartsLoading = null, echartsLoadFailures = 0;
 function loadECharts() {
-    return new Promise((resolve, reject) => {
-        if (window.echarts) { resolve(window.echarts); return; }
+    if (typeof window.echarts?.init === 'function') return Promise.resolve(window.echarts);
+    if (echartsLoading) return echartsLoading;
+    echartsLoading = new Promise((resolve, reject) => {
         const script = document.createElement("script");
-        script.src = "https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js";
-        script.onload = () => resolve(window.echarts);
-        script.onerror = () => reject(new Error("ECharts load failed"));
+        let settled = false;
+        const finish = (error) => {
+            if (settled) return;
+            settled = true; clearTimeout(timer);
+            script.onload = script.onerror = null; script.remove();
+            if (error) { echartsLoadFailures++; reject(new Error('ECharts load failed')); }
+            else { echartsLoadFailures = 0; resolve(window.echarts); }
+        };
+        const timer = setTimeout(() => finish(true), API.PROFILE_RESOURCE_TIMEOUT);
+        const scriptURL = new URL(API.CREATOR_CHART_SCRIPT_URL);
+        // 移除script不保证终止原下载；失败后的读取不能复用未结束的旧URL。
+        if (echartsLoadFailures) scriptURL.searchParams.set('_ranking_retry', `${Date.now()}-${echartsLoadFailures}`);
+        script.src = scriptURL.href;
+        script.onload = () => finish(typeof window.echarts?.init !== 'function');
+        script.onerror = () => finish(true);
         document.head.appendChild(script);
-    });
+    }).finally(() => { echartsLoading = null; });
+    return echartsLoading;
 }
 
 /**
@@ -87,9 +147,9 @@ function loadECharts() {
  */
 function _renderTipBoardEntry(entry, idx, rankIcon, levelHtml, userHtml, containerId = '') {
     const idAttr = containerId ? ` id="${escapeHtml(containerId)}"` : '';
-    return `<div${idAttr} style="display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:${idx % 2 === 0 ? '#222' : 'var(--comfy-menu-bg)'};border-radius:4px;margin-bottom:4px;">` +
-        `<div style="display:flex;align-items:center;gap:8px;"><span style="font-size:14px;min-width:24px;">${rankIcon}</span>${userHtml}</div>` +
-        `<div style="display:flex;align-items:center;gap:6px;">${levelHtml}<span style="color:#4CAF50;font-weight:bold;font-size:11px;">${entry.amount}</span></div></div>`;
+    return `<div${idAttr} class="creator-tip-entry">` +
+        `<div class="creator-tip-entry__identity"><span class="creator-tip-entry__rank" aria-hidden="true">${rankIcon}</span>${userHtml}</div>` +
+        `<div class="creator-tip-entry__value">${levelHtml}<span class="creator-tip-entry__amount">${escapeHtml(entry.amount)}</span></div></div>`;
 }
 
 /**
@@ -101,110 +161,110 @@ function _renderTipBoardEntry(entry, idx, rankIcon, levelHtml, userHtml, contain
  * @param {object} currentUser - 当前登录用户
  * @param {Function} onTipSuccess - 打赏成功回调
  */
-export function createTipBoardSection(tipBoard = [], title = "🎁 赞赏贡献榜", onUserClick = null, creatorData = null, currentUser = null, onTipSuccess = null) {
+export function createTipBoardSection(tipBoard = [], title = t('creator.tip_board.title'), onUserClick = null, creatorData = null, currentUser = null, onTipSuccess = null, parentCurrent = null) {
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        background: "#1a1d2e", border: "1px solid #2d334a", borderRadius: "6px",
-        padding: "10px", marginTop: "10px"
-    });
+    const current = () => container.isConnected && (!parentCurrent || parentCurrent());
+    container.className = 'creator-tip-board';
 
     // 等级规则说明
     const levelRuleHtml = `
-        <div style="font-size: 11px; color: #888; margin-bottom: 8px; padding: 4px 8px; background: rgba(255,255,255,0.03); border-radius: 4px;">
+        <div class="creator-tip-board__rule">
             📊 ${t('creator.tip_level_rule')}：${getTipLevelRuleShort()}
         </div>
     `;
 
     if (!tipBoard || tipBoard.length === 0) {
         container.innerHTML = `
-            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
-                <div style="font-size: 12px; font-weight: bold; color: #FF9800; display: flex; align-items: center; gap: 6px;">
+            <div class="creator-tip-board__header">
+                <div class="creator-tip-board__title">
                     ${escapeHtml(title)}
-                    <span style="font-size: 10px; color: #888; font-weight: normal;">(${t('creator.tip_board.count', {count: 0})})</span>
+                    <span class="creator-tip-board__count">(${t('creator.tip_board.count', {count: 0})})</span>
                 </div>
-                ${creatorData ? `<button id="btn-tip-creator-empty" class="creator-tip-btn" style="${_TIP_BUTTON_STYLE}">${t('creator.tip_this_creator')}</button>` : ''}
+                ${creatorData ? `<button id="btn-tip-creator-empty" type="button" class="creator-tip-btn">${t('creator.tip_this_creator')}</button>` : ''}
             </div>
             ${levelRuleHtml}
-            <div style="color: #666; font-size: 12px; text-align: center; padding: 15px 0;">${t('creator.no_tips')}</div>
+            <div class="creator-tip-board__empty">${t('creator.no_tips')}</div>
         `;
-        
+
         // 绑定打赏按钮事件（空榜单时）
         if (creatorData) {
             const tipBtn = container.querySelector('#btn-tip-creator-empty');
             if (tipBtn) {
-                tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess, () => container.isConnected);
+                tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess, current);
             }
         }
-        
+
         return container;
     }
 
     // 榜单前10名
     const top10 = tipBoard.slice(0, 10);
-    const rankColors = ["#FFD700", "#C0C0C0", "#CD7F32"]; // 金银铜
 
     // 🚀 使用统一的打赏等级工具渲染星星/月亮/太阳
     let listHtml = top10.map((entry, idx) => {
-        const rankColor = rankColors[idx] || "#888";
-        const rankIcon = idx < 3 ? ["🥇", "🥈", "🥉"][idx] : `<span style="color:${rankColor}">#${idx + 1}</span>`;
-        
+        const rankIcon = idx < 3 ? ["🥇", "🥈", "🥉"][idx] : `#${idx + 1}`;
+
         // 使用统一等级工具获取等级图标
         const levelHtml = renderTipLevelHTML(entry.amount, true);
-        
+
         if (entry.is_anon) {
-            const userHtml = `<span style="color: #888; font-style: italic; font-size: 13px;">${t('creator.anonymous')}</span>`;
+            const userHtml = `<span class="creator-tip-entry__anonymous">${t('creator.anonymous')}</span>`;
             return _renderTipBoardEntry(entry, idx, rankIcon, levelHtml, userHtml);
         }
-        
+
         // 🚀 SWR 模式：非匿名用户显示头像+用户名
         const containerId = `creator-tip-board-item-${entry.account}-${idx}-${Date.now()}`;
-        
+
         // 从缓存获取初始数据（0延迟渲染）
         const cached = getCachedProfile(entry.account);
         const avatarUrl = cached?.avatar || cached?.avatarDataUrl || PLACEHOLDERS.AVATAR_SMALL;
         const userName = cached?.name || entry.account;
-        
+
         // 后台静默校对并更新 DOM
         setTimeout(() => {
+            if (!current()) return;
             getProfileWithSWR(entry.account, api.getUserProfile, (profile) => {
                 const itemContainer = document.getElementById(containerId);
-                if (!itemContainer) return;
-                
+                if (!current() || !itemContainer || !profile || typeof profile !== 'object' || Array.isArray(profile) || (profile.account != null && profile.account !== entry.account)) return;
+
                 const avatarImg = itemContainer.querySelector('.tip-board-avatar');
                 const nameSpan = itemContainer.querySelector('.tip-board-name');
-                
-                if (avatarImg && profile.avatar) {
+
+                if (avatarImg && typeof profile.avatar === 'string' && profile.avatar) {
                     avatarImg.src = profile.avatar;
                 }
-                if (nameSpan && profile.name) {
+                if (nameSpan && typeof profile.name === 'string' && profile.name) {
                     nameSpan.textContent = profile.name;
+                    const userControl = itemContainer.querySelector('.tip-board-user');
+                    if (userControl) userControl.setAttribute('aria-label', `${t('creator.visit_profile')}: ${profile.name}`);
                 }
             });
         }, 0);
-        
+
         // 🔒 XSS防护：昵称/头像均来自用户可修改的资料，写入 HTML 前必须转义
         // （下方 SWR 刷新路径用的是 .src / .textContent，本身就是安全的）
-        const userHtml = `<span class="tip-board-user" data-account="${escapeHtml(entry.account)}" data-anon="false" style="display: flex; align-items: center; gap: 6px; color: #4CAF50; cursor: pointer; font-size: 13px;"><img class="tip-board-avatar" src="${escapeHtml(avatarUrl)}" style="width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--comfy-input-bg);"><span class="tip-board-name">${escapeHtml(userName)}</span></span>`;
+        const userTag = onUserClick ? 'button' : 'span';
+        const userHtml = `<${userTag} ${onUserClick ? 'type="button"' : ''} class="tip-board-user" data-account="${escapeHtml(entry.account)}" data-anon="false" aria-label="${escapeHtml(`${t('creator.visit_profile')}: ${userName}`)}"><img class="tip-board-avatar" src="${escapeHtml(avatarUrl)}" alt=""><span class="tip-board-name">${escapeHtml(userName)}</span></${userTag}>`;
         return _renderTipBoardEntry(entry, idx, rankIcon, levelHtml, userHtml, containerId);
     }).join("");
 
     container.innerHTML = `
-        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;">
-            <div style="font-size: 12px; font-weight: bold; color: #FF9800; display: flex; align-items: center; gap: 6px;">
+        <div class="creator-tip-board__header">
+            <div class="creator-tip-board__title">
                 ${escapeHtml(title)}
-                <span style="font-size: 10px; color: #888; font-weight: normal;">(${t('creator.tip_board.count', {count: tipBoard.length})})</span>
+                <span class="creator-tip-board__count">(${t('creator.tip_board.count', {count: tipBoard.length})})</span>
             </div>
-            ${creatorData ? `<button id="btn-tip-creator" class="creator-tip-btn" style="${_TIP_BUTTON_STYLE}">${t('creator.tip_this_creator')}</button>` : ''}
+            ${creatorData ? `<button id="btn-tip-creator" type="button" class="creator-tip-btn">${t('creator.tip_this_creator')}</button>` : ''}
         </div>
         ${levelRuleHtml}
-        <div style="max-height: 200px; overflow-y: auto;">${listHtml}</div>
+        <div class="creator-tip-board__list">${listHtml}</div>
     `;
 
     // 绑定打赏按钮事件
     if (creatorData) {
         const tipBtn = container.querySelector('#btn-tip-creator');
         if (tipBtn) {
-            tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess, () => container.isConnected);
+            tipBtn.onclick = async () => await handleTipCreator(creatorData, currentUser, onTipSuccess, current);
         }
     }
 
@@ -214,7 +274,7 @@ export function createTipBoardSection(tipBoard = [], title = "🎁 赞赏贡献
             if (el.dataset.anon === "false") {
                 el.onclick = (e) => {
                     e.stopPropagation();
-                    onUserClick(el.dataset.account);
+                    if (current()) onUserClick(el.dataset.account);
                 };
             }
         });
@@ -226,96 +286,125 @@ export function createTipBoardSection(tipBoard = [], title = "🎁 赞赏贡献
 export function createCreatorCard(creatorData, currentUser = null) {
     const card = document.createElement("div");
     card.setAttribute("data-item-id", creatorData.account);
-    Object.assign(card.style, {
-        backgroundColor: "var(--comfy-input-bg, #2b2b2b)", borderRadius: "8px", 
-        marginBottom: "12px", border: "1px solid #444", color: "#fff", fontFamily: "sans-serif",
-        overflow: "hidden"  // 🖼️ 背景图需要隐藏溢出
-    });
-
+    card.className = 'creator-card';
     const chartContainerId = `creator-chart-${Math.random().toString(36).substr(2, 9)}`;
     const summaryView = document.createElement("div");
-    summaryView.style.cursor = "pointer";
+    summaryView.className = 'creator-card__summary';
 
     const avatarSrc = creatorData.avatar || PLACEHOLDERS.AVATAR;
-    
+
     // ⚙️ 读取设置：是否显示创作者背景图
     const settings = getSettings();
     const showBanner = settings.showCreatorBanner;
-    
+
     // 🖼️ 个人资料卡背景图：优先使用本地缓存（与个人资料界面共用同一份缓存）
     const cacheKey = getBannerCacheKey(creatorData.account);
-    const cachedBanner = localStorage.getItem(cacheKey);
-    const bannerUrl = cachedBanner || creatorData.bannerUrl;  // 优先用本地缓存
-    const hasBanner = showBanner && bannerUrl && bannerUrl.trim() !== '';  // ⚙️ 受设置控制
-    
+    let cachedBanner = null;
+    try { cachedBanner = localStorage.getItem(cacheKey); } catch (_) { /* 可选装饰缓存不可用时继续构建卡片。 */ }
+    const validBanner = value => typeof value === 'string' && value.trim() ? value : '';
+    const bannerUrl = validBanner(cachedBanner) || validBanner(creatorData.bannerUrl);
+    const hasBanner = !!(showBanner && bannerUrl);  // 有效本地缓存优先，受显示设置控制
+
     // 🖼️ 全覆盖背景图样式
     // 在使用 bannerUrl 之前添加安全过滤
     const safeBannerUrl = (bannerUrl || '').replace(/['"()\\]/g, '');
-    const cardBgStyle = hasBanner 
-        ? `background-image: url(${safeBannerUrl}); background-size: cover; background-position: center;`
-        : '';
-    
+    summaryView.classList.toggle('creator-card__summary--banner', !!hasBanner);
+    if (hasBanner) summaryView.style.backgroundImage = `url("${safeBannerUrl}")`;
+    const profileName = typeof creatorData.name === 'string' && creatorData.name.trim() ? creatorData.name : creatorData.account;
+    const profileLabel = `${t('creator.visit_profile')}: ${profileName}`;
+    const stat = (field, label, value, unit = '') => `<div class="creator-card__stat" data-stat="${field}"><span>${escapeHtml(label)}</span><strong class="creator-card__stat-value"><span class="${/^\d+$/.test(String(value)) ? 'creator-card__number' : ''}">${escapeHtml(value)}</span>${unit ? ` <small>${escapeHtml(unit)}</small>` : ''}</strong></div>`;
     summaryView.innerHTML = `
-        <div style="${cardBgStyle} position: relative; padding: 10px; border-radius: 8px;">
-            ${hasBanner ? '<div style="position: absolute; inset: 0; background: rgba(0,0,0,0.2); border-radius: 8px;"></div>' : ''}
-            <div style="position: relative; z-index: 1;">
-                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px; padding: 5px 0;">
-                    <img class="creator-avatar-link" src="${escapeHtml(avatarSrc)}" title="${t('creator.visit_profile')}" style="width: 50px; height: 50px; border-radius: 50%; border: 2px solid ${hasBanner ? 'rgba(255,255,255,0.8)' : '#555'}; object-fit: cover; cursor: pointer; transition: 0.2s; ${hasBanner ? 'box-shadow: 0 2px 8px rgba(0,0,0,0.3);' : ''}" onmouseover="this.style.borderColor='#4CAF50'" onmouseout="this.style.borderColor='${hasBanner ? 'rgba(255,255,255,0.8)' : '#555'}'">
-                    <div class="creator-name-link" title="${t('creator.visit_profile')}" style="font-weight: bold; font-size: 16px; cursor: pointer; transition: 0.2s; color: #FFD700; text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 8px rgba(255,215,0,0.3);" onmouseover="this.style.color='#FFA500'" onmouseout="this.style.color='#FFD700'">${escapeHtml(creatorData.name)}</div>
-                    <div data-stat="downloads" style="font-size: 12px; color: #FF6B6B; margin-left: auto; text-shadow: 0 1px 3px rgba(0,0,0,0.6);">${t('creator.usage_count', {count: creatorData.downloads || 0})}</div>
-                </div>
-                <div style="font-size: 12px; color: ${hasBanner ? '#ccc' : '#aaa'}; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px;">${escapeHtml(creatorData.shortDesc && creatorData.shortDesc !== "null" ? creatorData.shortDesc : t('profile.no_intro'))}</div>
-                <div style="background: rgba(34,34,34,${hasBanner ? '0.8' : '1'}); border-radius: 6px; padding: 8px 10px; border: 1px dashed #555;">
-                    <div style="display: flex; gap: 15px; font-size: 12px; color: #eee; justify-content: space-between; margin-bottom: 8px;">
-                        <span data-stat="likes" style="color: #FF5722;">👍 ${t('creator.stats.likes')}: <strong>${creatorData.likes}</strong></span>
-                        <span data-stat="favorites" style="color: #FFC107;">🔖 ${t('creator.stats.favorites')}: <strong>${creatorData.favorites}</strong></span>
-                        <span data-stat="followers" style="color: #4CAF50;">👥 ${t('creator.stats.followers')}: <strong>${creatorData.followers}</strong></span>
-                    </div>
-                    <div style="display: flex; gap: 15px; font-size: 12px; color: #ccc; justify-content: center; border-top: 1px solid var(--border-color, #333); padding-top: 8px;">
-                        <span data-stat="toolsCount" style="color: #2196F3;">🛠️ ${t('creator.output.tools')}: <strong>${creatorData.toolsCount}</strong> ${t('creator.output.unit')}</span>
-                        <span data-stat="skillsCount" style="color: #7C4DFF;">⚡ ${t('creator.output.skills')}: <strong>${creatorData.skillsCount || 0}</strong> ${t('creator.output.unit')}</span>
-                        <span data-stat="appsCount" style="color: #9C27B0;">📦 ${t('creator.output.apps')}: <strong>${creatorData.appsCount}</strong> ${t('creator.output.unit')}</span>
-                    </div>
-                </div>
-            </div>
+        <div class="creator-card__identity">
+            <button type="button" class="creator-avatar-link" aria-label="${escapeHtml(profileLabel)}"><img src="${escapeHtml(avatarSrc)}" alt=""></button>
+            <button type="button" class="creator-name-link" aria-label="${escapeHtml(profileLabel)}">${escapeHtml(creatorData.name)}</button>
+        </div>
+        <div class="creator-card__usage" data-stat="downloads">${escapeHtml(t('creator.usage_count', {count: creatorData.downloads || 0}))}</div>
+        <p class="creator-card__intro">${escapeHtml(creatorData.shortDesc && creatorData.shortDesc !== "null" ? creatorData.shortDesc : t('profile.no_intro'))}</p>
+        <div class="creator-card__statistics">
+            <div class="creator-card__stats">${stat('likes',t('creator.stats.likes'),creatorData.likes)}${stat('favorites',t('creator.stats.favorites'),creatorData.favorites)}${stat('followers',t('creator.stats.followers'),creatorData.followers)}</div>
+            <div class="creator-card__outputs">${stat('toolsCount',t('creator.output.tools'),creatorData.toolsCount,t('creator.output.unit'))}${stat('skillsCount',t('creator.output.skills'),creatorData.skillsCount || 0,t('creator.output.unit'))}${stat('appsCount',t('creator.output.apps'),creatorData.appsCount,t('creator.output.unit'))}</div>
         </div>
+        <button type="button" class="creator-card__toggle" aria-expanded="false" aria-controls="detail-${chartContainerId}">${escapeHtml(t('creator.expand_details'))}<span aria-hidden="true">⌄</span></button>
     `;
+    const toggleButton = summaryView.querySelector('.creator-card__toggle');
 
-    const jumpToProfile = (e) => { 
-        e.stopPropagation(); 
-        openOtherUserProfileModal(creatorData.account, currentUser); 
+    const jumpToProfile = (e) => {
+        e.stopPropagation();
+        if (scope.isCurrent() && card.isConnected) openOtherUserProfileModal(creatorData.account, currentUser);
     };
     summaryView.querySelector('.creator-avatar-link').onclick = jumpToProfile;
     summaryView.querySelector('.creator-name-link').onclick = jumpToProfile;
 
     const detailView = document.createElement("div");
-    Object.assign(detailView.style, { display: "none", marginTop: "12px", paddingTop: "12px", borderTop: "1px dashed #555" });
-
-    // 🔄 延迟渲染：初始只显示 loading 状态
-    detailView.innerHTML = `
-        <div id="detail-content-${chartContainerId}" style="display: none;">
-            <div style="${_SECTION_LABEL_STYLE}">${t('creator.chart.download_trend')}</div>
-            <div id="${chartContainerId}" style="width: 100%; height: 180px; background: #222; border-radius: 4px; margin-bottom: 15px;"></div>
-            <div id="tipboard-${chartContainerId}"></div>
-            <div style="${_SECTION_LABEL_STYLE} margin-bottom: 6px; margin-top: 15px;">${t('creator.message_board')}</div>
-            <div id="board-${chartContainerId}" style="height: 250px; border: 1px solid #444; border-radius: 4px; overflow: hidden;"></div>
-        </div>
-        <div id="detail-loading-${chartContainerId}" style="text-align: center; padding: 40px 20px; color: #888;">
-            <div style="font-size: 14px;">⏳ ${t('creator.loading_details')}</div>
-        </div>
-        <div id="detail-error-${chartContainerId}" style="display: none; text-align: center; padding: 40px 20px; color: #F44336;">
-            <div style="font-size: 14px; margin-bottom: 12px;">❌ ${t('creator.load_failed')}</div>
-            <button id="btn-retry-${chartContainerId}" style="padding: 6px 16px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">${t('creator.retry')}</button>
-        </div>
-    `;
+    detailView.className = "creator-card__detail";
+    detailView.id = `detail-${chartContainerId}`;
+    detailView.hidden = true;
+    detailView.style.display = "none";
+
+    // 首次展开才挂载详情骨架；折叠保留节点和原评论实例。
+    let detailMounted = false;
+    function mountDetails() {
+        if (detailMounted) return;
+        detailView.innerHTML = `
+            <div id="detail-content-${chartContainerId}" style="display: none;">
+                <div class="creator-card__section-label">${t('creator.chart.download_trend')}</div>
+                <div id="${chartContainerId}" class="creator-card__chart"></div>
+                <div id="tipboard-${chartContainerId}"></div>
+                <div class="creator-card__section-label creator-card__section-label--comments">${t('creator.message_board')}</div>
+                <div id="board-${chartContainerId}" class="creator-card__comments"></div>
+            </div>
+            <div id="detail-loading-${chartContainerId}" class="creator-card__status" role="status">
+                <div class="creator-card__status-copy">⏳ ${t('creator.loading_details')}</div>
+            </div>
+            <div id="detail-error-${chartContainerId}" class="creator-card__status creator-card__status--error" role="alert" style="display: none;">
+                <div class="creator-card__status-copy">❌ ${t('creator.load_failed')}</div>
+                <button id="btn-retry-${chartContainerId}" type="button" class="creator-card__retry">${t('creator.retry')}</button>
+            </div>
+        `;
+        detailMounted = true;
+    }
 
     // 状态标记
+    let commentUI = null;
     let isDetailLoaded = false;
     let isChartRendered = false;
     let chartInstance = null;
+    let generation = 0, detailPending = false, chartPending = false, detailRead = null;
+    let widthObserver = null, widthTimer = null, resizeTimer = null;
+    let stopTrackingRemoval = null, resizeSubscribed = false;
+    let constructing = true;
+    const matches = captureRequestSession();
+    const account = currentUser?.account || null;
+    const sessionMatches = () => matches() && (getUser()?.account || null) === account;
+    const componentId = chartContainerId;
+    const scope = createTaskViewScope({
+        sessionMatches, connected: () => constructing || card.isConnected,
+        subscribe: subscribeCreatorSessionChanges,
+        cancelReads: () => requestCancelManager.cancelAll(componentId),
+        invalidate: () => {
+            detailView.replaceChildren();
+            const notice = document.createElement('div');
+            notice.setAttribute('role', 'status'); notice.textContent = t('auth.session_changed');
+            detailView.append(notice); detailView.hidden = false; detailView.style.display = 'block';
+            toggleButton.disabled = true; toggleButton.setAttribute('aria-expanded', 'true');
+        }
+    });
+    const current = token => scope.isCurrent() && card.isConnected && detailView.style.display !== 'none' && token === generation;
+    const clearChartWork = () => {
+        widthObserver?.disconnect(); widthObserver = null;
+        clearTimeout(widthTimer); clearTimeout(resizeTimer); widthTimer = resizeTimer = null;
+        chartPending = false;
+    };
+    const pauseDetails = () => {
+        generation++; detailPending = false;
+        requestCancelManager.cancelAll(componentId);
+        clearChartWork(); commentUI?._setActive?.(false);
+    };
 
     // 🔄 加载详情数据
     async function loadCreatorDetails() {
+        const token = generation;
+        if (!current(token) || detailPending) return;
         const loadingEl = detailView.querySelector(`#detail-loading-${chartContainerId}`);
         const contentEl = detailView.querySelector(`#detail-content-${chartContainerId}`);
         const errorEl = detailView.querySelector(`#detail-error-${chartContainerId}`);
@@ -333,9 +422,20 @@ export function createCreatorCard(creatorData, currentUser = null) {
         contentEl.style.display = 'none';
         errorEl.style.display = 'none';
 
+        detailPending = true;
+        let ownedRead = null;
         try {
-            const response = await api.getCreatorDetails(creatorData.account);
-            if (response.status === "success" && response.data) {
+            // 等待已取消的旧读取完成退出，避免网络层去重复用旧Promise。
+            if (detailRead) { try { await detailRead; } catch (_) {} }
+            if (!current(token)) return;
+            ownedRead = api.getCreatorDetails(creatorData.account, { componentId });
+            detailRead = ownedRead;
+            const response = await ownedRead;
+            if (!current(token)) return;
+            if (response?.status === "success" && response.data && typeof response.data === 'object' && !Array.isArray(response.data)
+                && response.data.account === creatorData.account
+                && Array.isArray(response.data.commentsData) && Array.isArray(response.data.tip_board)
+                && response.data.trendData && typeof response.data.trendData === 'object' && !Array.isArray(response.data.trendData)) {
                 // 缓存详情数据到 creatorData 对象
                 creatorData._detailData = response.data;
                 creatorData.trendData = response.data.trendData;
@@ -347,31 +447,36 @@ export function createCreatorCard(creatorData, currentUser = null) {
                 contentEl.style.display = 'block';
                 renderDetailContent(response.data);
             } else {
-                throw new Error(response.detail || response.error || '加载失败');
+                throw new Error('Invalid creator details');
             }
         } catch (err) {
-            console.error('加载创作者详情失败:', err);
+            if (!current(token)) return;
             loadingEl.style.display = 'none';
             errorEl.style.display = 'block';
-            
+
             // 绑定重试按钮
             const retryBtn = errorEl.querySelector(`#btn-retry-${chartContainerId}`);
             if (retryBtn) {
                 retryBtn.onclick = () => loadCreatorDetails();
             }
+        } finally {
+            if (ownedRead && detailRead === ownedRead) detailRead = null;
+            if (current(token)) detailPending = false;
         }
     }
 
     // 🎨 渲染详情内容（图表、赞赏榜、留言板）
     function renderDetailContent(detailData) {
         const contentEl = detailView.querySelector(`#detail-content-${chartContainerId}`);
-        
+
         // 🎁 添加赞赏贡献总榜
         const tipBoardContainer = contentEl.querySelector(`#tipboard-${chartContainerId}`);
         tipBoardContainer.innerHTML = ''; // 清空之前的内容
-        
+
         // 打赏成功后的回调函数 - 刷新创作者数据
+        const tipGeneration = generation;
         const onTipSuccess = () => {
+            if (!current(tipGeneration)) return;
             // 触发重新加载创作者数据
             if (window.refreshCreatorData) {
                 window.refreshCreatorData(creatorData.account);
@@ -380,41 +485,49 @@ export function createCreatorCard(creatorData, currentUser = null) {
             creatorData._detailData = null;
             isDetailLoaded = false;
         };
-        
+
         const tipBoardUI = createTipBoardSection(
-            detailData.tip_board, 
+            detailData.tip_board,
             t('creator.tip_board.title'),
-            (account) => openOtherUserProfileModal(account, currentUser),
+            (account) => { if (current(tipGeneration)) openOtherUserProfileModal(account, currentUser); },
             creatorData,
             currentUser,
-            onTipSuccess
+            onTipSuccess,
+            () => current(tipGeneration)
         );
         tipBoardContainer.appendChild(tipBoardUI);
 
         // 💬 添加留言板
         const boardContainer = contentEl.querySelector(`#board-${chartContainerId}`);
-        boardContainer.innerHTML = ''; // 清空之前的内容
-        // 🚀 P0安全修复：传递创作者账号作为 contentAuthor，使创作者可以删除其主页下的评论
-        const commentUI = createCommentSection(creatorData.account, detailData.commentsData || [], currentUser, null, creatorData.account);
-        boardContainer.appendChild(commentUI);
+        if (!commentUI) {
+            boardContainer.innerHTML = '';
+            commentUI = createCommentSection(creatorData.account, detailData.commentsData || [], currentUser, null, creatorData.account);
+            boardContainer.appendChild(commentUI);
+        }
+        commentUI._setActive?.(detailView.style.display !== "none");
 
         // 📊 渲染趋势图表
         renderTrendChart(detailData.trendData);
     }
 
     // 📊 渲染趋势图表
-    function _initTrendChart(chartDom, trendData) {
+    function _initTrendChart(chartDom, trendData, token) {
+        if (!current(token)) return;
         loadECharts().then(echarts => {
-            chartDom.innerHTML = ""; 
-            chartInstance = echarts.init(chartDom, 'dark', { backgroundColor: 'transparent' });
-            
+            if (!current(token) || !chartDom.isConnected) return;
+            chartDom.innerHTML = "";
+            const theme = getComputedStyle(card);
+            const textColor = theme.getPropertyValue('--rk-text').trim() || theme.color;
+            const borderColor = theme.getPropertyValue('--rk-border').trim() || theme.borderColor;
+            chartInstance = echarts.init(chartDom, null, { backgroundColor: 'transparent' });
+
             const data = trendData || { months: [], tools: [], skills: [], apps: [], recommends: [] };
 
             chartInstance.setOption({
                 tooltip: { trigger: 'axis', textStyle: { fontSize: 11 } },
                 grid: { top: 10, bottom: 20, left: 35, right: 10, containLabel: true },
-                xAxis: { type: 'category', data: data.months, axisLabel: { color: '#888', fontSize: 10 }, axisLine: { lineStyle: { color: '#444' } } },
-                yAxis: { type: 'value', splitLine: { lineStyle: { color: '#333', type: 'dashed' } }, axisLabel: { color: '#888', fontSize: 10 }, minInterval: 1 },
+                xAxis: { type: 'category', data: data.months, axisLabel: { color: textColor, fontSize: 10 }, axisLine: { lineStyle: { color: borderColor } } },
+                yAxis: { type: 'value', splitLine: { lineStyle: { color: borderColor, type: 'dashed' } }, axisLabel: { color: textColor, fontSize: 10 }, minInterval: 1 },
                 series: [
                     { name: t('creator.chart.series.tools'), type: 'line', data: data.tools, smooth: true, itemStyle: { color: '#4CAF50' }, lineStyle: { width: 2, type: 'dashed' } },
                     { name: t('creator.chart.series.skills'), type: 'line', data: data.skills || [], smooth: true, itemStyle: { color: '#7C4DFF' }, lineStyle: { width: 2, type: 'dashed' } },
@@ -423,90 +536,115 @@ export function createCreatorCard(creatorData, currentUser = null) {
                 ]
             });
             isChartRendered = true;
-            
+
             // 初始化完成后延迟调用resize确保正确渲染
-            setTimeout(() => {
-                if (chartInstance) chartInstance.resize();
+            resizeTimer = setTimeout(() => {
+                resizeTimer = null;
+                if (current(token) && chartInstance) chartInstance.resize();
             }, 300);
-        }).catch(err => { 
-            chartDom.innerHTML = `<div style="text-align:center; line-height:180px; color:#F44336;">${t('creator.chart.load_failed')}</div>`; 
-        });
+        }).catch(() => {
+            if (!current(token)) return;
+            chartInstance?.dispose(); chartInstance = null; isChartRendered = false;
+            chartDom.innerHTML = `<div class="creator-card__chart-status creator-card__chart-status--error" role="status">${t('creator.chart.load_failed')}</div>`;
+        }).finally(() => { if (current(token)) chartPending = false; });
     }
 
     function renderTrendChart(trendData) {
-        if (isChartRendered) return;
+        const token = generation;
+        if (!current(token)) return;
+        if (isChartRendered) { chartInstance?.resize(); return; }
+        if (chartPending) return;
+        chartPending = true;
         const chartDom = detailView.querySelector(`#${chartContainerId}`);
-        if (!chartDom) return;
-        
-        chartDom.innerHTML = `<div style="text-align:center; line-height:180px; color:#888;">${t('creator.chart.loading')}</div>`;
-        
+        if (!chartDom) { chartPending = false; return; }
+
+        chartDom.innerHTML = `<div class="creator-card__chart-status" role="status">${t('creator.chart.loading')}</div>`;
+
         // 使用 ResizeObserver 等待容器获得有效宽度后再渲染
         if (chartDom.clientWidth === 0) {
-            const observer = new ResizeObserver((entries) => {
+            widthObserver = new ResizeObserver((entries) => {
+                if (!current(token)) return;
                 for (const entry of entries) {
                     if (entry.contentRect.width > 0) {
-                        observer.disconnect();
-                        _initTrendChart(chartDom, trendData);
+                        widthObserver?.disconnect(); widthObserver = null;
+                        clearTimeout(widthTimer); widthTimer = null;
+                        _initTrendChart(chartDom, trendData, token);
                         return;
                     }
                 }
             });
-            observer.observe(chartDom);
-            
+            widthObserver.observe(chartDom);
+
             // 安全超时：5秒后如果仍未获得宽度，放弃并清理
-            setTimeout(() => {
-                observer.disconnect();
+            widthTimer = setTimeout(() => {
+                if (!current(token)) return;
+                widthObserver?.disconnect(); widthObserver = null; widthTimer = null; chartPending = false;
                 if (chartDom.clientWidth === 0) {
                     chartDom.innerHTML = '';
                 }
             }, 5000);
             return;
         }
-        
-        _initTrendChart(chartDom, trendData);
+
+        _initTrendChart(chartDom, trendData, token);
     }
 
-    // 🔄 点击展开/收起
-    summaryView.onclick = () => {
-        const isHidden = detailView.style.display === "none";
-        
-        if (isHidden) {
-            // 展开当前卡片
-            // 1. 如果有其他卡片已展开，先关闭它
-            if (currentExpandedCard && currentExpandedCard !== card) {
-                const otherDetailView = currentExpandedCard.querySelector('[id^="detail-content-"]')?.parentElement;
-                if (otherDetailView) {
-                    otherDetailView.style.display = "none";
-                }
+    function setExpanded(expanded) {
+        if (!scope.isCurrent()) return;
+        if (expanded) {
+            mountDetails();
+            if (!resizeSubscribed) {
+                window.addEventListener('resize', resizeHandler); resizeSubscribed = true;
             }
-            
-            // 2. 展开当前卡片
-            detailView.style.display = "block";
+            if (currentExpandedCard && currentExpandedCard !== card) currentExpandedCard._closeDetails?.();
+            detailView.hidden = false; detailView.style.display = "block";
             currentExpandedCard = card;
-            
-            // 3. 加载详情数据
-            loadCreatorDetails();
         } else {
-            // 收起当前卡片
-            detailView.style.display = "none";
-            if (currentExpandedCard === card) {
-                currentExpandedCard = null;
-            }
+            pauseDetails(); detailView.hidden = true; detailView.style.display = "none";
+            if (currentExpandedCard === card) currentExpandedCard = null;
         }
+        toggleButton.setAttribute('aria-expanded', String(expanded));
+        toggleButton.firstChild.textContent = t(expanded ? 'creator.collapse_details' : 'creator.expand_details');
+        if (expanded) loadCreatorDetails();
+    }
+    const toggleDetails = () => setExpanded(detailView.hidden);
+    summaryView.onclick = event => {
+        if (event.target.closest('button') && !event.target.closest('.creator-card__toggle')) return;
+        toggleDetails();
     };
-
-    const resizeHandler = () => { if (chartInstance) chartInstance.resize(); };
-    window.addEventListener('resize', resizeHandler);
-
-    card._cleanup = () => {
-        window.removeEventListener('resize', resizeHandler);
+    card._closeDetails = () => setExpanded(false);
+    const keyHandler = event => {
+        if (event.key !== 'Escape' || detailView.hidden || !card.contains(document.activeElement)) return;
+        event.preventDefault(); event.stopPropagation();
+        setExpanded(false); toggleButton.focus();
+    };
+    card.addEventListener('keydown', keyHandler);
+
+    const resizeHandler = () => { if (current(generation) && chartInstance) chartInstance.resize(); };
+
+    card._pauseComments = () => commentUI?._setActive?.(false);
+    card._pauseDetails = pauseDetails;
+    scope.addCleanup(() => {
+        pauseDetails(); stopTrackingRemoval?.(); stopTrackingRemoval = null;
+        summaryView.onclick = null; card.removeEventListener('keydown', keyHandler);
+        toggleButton.disabled = true;
+        commentUI?._cleanup?.();
+        if (currentExpandedCard === card) currentExpandedCard = null;
+        if (resizeSubscribed) window.removeEventListener('resize', resizeHandler);
+        resizeSubscribed = false;
         if (chartInstance) {
             chartInstance.dispose();
             chartInstance = null;
         }
-    };
+    });
+    card._cleanup = () => scope.dispose();
+    queueMicrotask(() => {
+        constructing = false;
+        if (!scope.isCurrent()) return;
+        stopTrackingRemoval = trackCreatorRemoval(card, () => scope.dispose());
+    });
 
     card.appendChild(summaryView);
     card.appendChild(detailView);
     return card;
-}
+}

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

@@ -92,6 +92,25 @@ function _getInstallErrorMessage(result) {
     return errorKey ? t(errorKey) : t('install.error_generic');
 }
 
+/** 流式与旧式安装共用终态确认；旧式响应另核查HTTP状态。 */
+function _getInstallOutcome(data, response = null) {
+    if (!data || typeof data !== "object" || Array.isArray(data)) return "unknown";
+    if (Object.hasOwn(data, "outcomeUnknown") && data.outcomeUnknown !== false) return "unknown";
+    if (data.message !== undefined && typeof data.message !== "string") return "unknown";
+    if (data.status === "success") {
+        return (!response || response.ok) && !Object.hasOwn(data, "error") && !Object.hasOwn(data, "error_code")
+            ? "success" : "unknown";
+    }
+    if ((!response && data.status !== "error") || (data.status !== undefined && data.status !== "error")) return "unknown";
+    if (data.error_code !== undefined && (typeof data.error_code !== "string" || !data.error_code.trim())) return "unknown";
+    if (data.error !== undefined && (typeof data.error !== "string" || !data.error.trim())) return "unknown";
+    if (data.status === "error" || typeof data.error_code === "string") return "error";
+    // 无错误码的旧响应仅接受明确客户端拒绝或成功HTTP中的旧式error字段。
+    // 服务器/网关5xx本身不能证明磁盘发布没有发生。
+    if (typeof data.error === "string" && response && (response.ok || (response.status >= 400 && response.status < 500))) return "error";
+    return "unknown";
+}
+
 const INSTALL_STAGE_KEYS = {
     queued: 'install.stage_queued',
     validate: 'install.stage_validate',
@@ -607,7 +626,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                             );
 
                             if (!isCurrent()) return;
-                            if (result.cancelRequested) {
+                            if (result?.cancelRequested) {
                                 phase = "unknown"; btnUse.removeAttribute("aria-busy");
                                 const message = t('install.cancel_outcome_uncertain');
                                 progress.error(message);
@@ -615,7 +634,16 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                                 return;
                             }
 
-                            if (result.status === "success") {
+                            const outcome = _getInstallOutcome(result);
+                            if (outcome === "unknown") {
+                                phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                                const message = t('install.connection_uncertain');
+                                progress.error(message);
+                                progress.showDiagnostics(diagnosticEvents);
+                                showToast(message, "warning");
+                                return;
+                            }
+                            if (outcome === "success") {
                                 progress.complete(t('install.complete'));
                                 // 根据后端返回的 message 判断是否为自更新场景
                                 const isSelfUpdate = result.message && result.message.includes("重启") && result.message.includes("生效");
@@ -671,9 +699,17 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                                 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');
+                                const outcome = _getInstallOutcome(data, res);
+                                if (outcome === "unknown") {
+                                    phase = "unknown"; btnUse.removeAttribute("aria-busy");
+                                    inlineStatusBox.textContent = t('install.connection_uncertain');
+                                    showToast(t('install.connection_uncertain'), "warning");
+                                    return;
+                                }
+                                if (outcome === "error") {
+                                    const isLinkError = data?.error_code === 'invalid_repository'
+                                        || (typeof data?.error === "string" && data.error.includes('不是有效的 Git'));
+                                    const safeMessage = isLinkError ? t('install.error_invalid_repository') : _getInstallErrorMessage(data);
                                     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>`;
@@ -718,7 +754,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                             } 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>`;
+                                inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(t('install.connection_uncertain'))}</span>`;
                             }
                         }
                     } catch (_) {

前端页面/profile/个人设置表单组件.js

@@ -4,7 +4,7 @@ import { regionData, getSortedCountries } from "../auth/国家地区数据.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { uploadFile } from "../market/发布内容_提交引擎.js";
 import { openImageCropper } from "../components/图片裁剪组件.js";
-import { CACHE, getBackgroundKey, getBannerCacheKey, PLACEHOLDERS, escapeHtml } from "../core/全局配置.js";
+import { CACHE, IMAGE_PROCESS, getBackgroundKey, getBannerCacheKey, PLACEHOLDERS, escapeHtml } from "../core/全局配置.js";
 import { t } from "../components/用户体验增强.js";
 import { normalizeProfileData, mergeStoredProfile } from "./个人资料工具.js";
 
@@ -30,8 +30,8 @@ function calculateAge(birthDate) {
 }
 
 // 图像上传处理通用函数：绑定触发按钮 → 文件选择 → 裁剪 → 回调
-function _createImageUploadHandler(inputEl, triggerEl, cropRatio, cropTitle, qualityLevel, onCropped, current) {
-    let busy = false;
+function _createImageUploadHandler(inputEl, triggerEl, cropRatio, cropTitle, qualityLevel, onCropped, current, cropControllers, refreshSave) {
+    let busy = false, generation = 0, activeController = null;
     triggerEl.onclick = () => { if (current() && !busy) inputEl.click(); };
     inputEl.onchange = async (e) => {
         if (!current() || busy) return;
@@ -39,25 +39,47 @@ function _createImageUploadHandler(inputEl, triggerEl, cropRatio, cropTitle, qua
         if (!file) return;
         inputEl.value = "";
         busy = true;
+        const token = ++generation;
+        const operationCurrent = () => current() && token === generation;
+        const controller = new AbortController(); activeController = controller; cropControllers.add(controller); refreshSave();
         try {
-            const croppedFile = await openImageCropper(file, cropRatio, cropTitle, qualityLevel);
-            if (!current() || !croppedFile) return;
-            await onCropped(croppedFile);
+            const croppedFile = await openImageCropper(file, cropRatio, cropTitle, qualityLevel, { signal: controller.signal });
+            if (!operationCurrent() || !croppedFile) return;
+            await onCropped(croppedFile, operationCurrent, controller.signal);
         } catch (_) {
-            if (current()) showToast(t('settings_form.avatar_process_failed'), 'error');
-        } finally { busy = false; }
+            if (operationCurrent()) showToast(t('settings_form.image_process_failed'), 'error');
+        } finally { cropControllers.delete(controller); if (activeController === controller) activeController = null; busy = false; refreshSave(); }
     };
+    return () => { generation++; try { activeController?.abort(); } catch (_) {} };
 }
 
 // FileReader读取图片并预览到目标元素，可选保存到localStorage
-function _readAndPreviewImage(file, previewElement, cacheKey, current, readers) {
+function _readAndPreviewImage(file, previewElement, cacheKey, current, readers, signal) {
+    if (!current() || signal?.aborted) return Promise.resolve(null);
     return new Promise((resolve) => {
         const reader = new FileReader();
+        let settled = false, timer = null;
+        const finish = value => {
+            if (settled) return;
+            settled = true;
+            clearTimeout(timer); signal?.removeEventListener('abort', cancel);
+            reader.onload = reader.onerror = reader.onabort = null;
+            readers.delete(reader);
+            if (reader.readyState === FileReader.LOADING) { try { reader.abort(); } catch (_) {} }
+            resolve(value);
+        };
+        const cancel = () => finish(null);
+        const fail = () => {
+            if (settled) return;
+            if (current() && !signal?.aborted) showToast(t('settings_form.file_read_failed'), "error");
+            finish(null);
+        };
         readers.add(reader);
-        const finish = value => { readers.delete(reader); resolve(value); };
         reader.onload = (ev) => {
-            if (!current() || !previewElement.isConnected) { finish(null); return; }
+            if (settled) return;
+            if (!current() || signal?.aborted || !previewElement.isConnected) { finish(null); return; }
             const base64 = ev.target.result;
+            if (typeof base64 !== 'string' || !base64.startsWith('data:image/') || !base64.includes(',')) { fail(); return; }
             if (cacheKey) {
                 try {
                     localStorage.setItem(cacheKey, base64);
@@ -84,12 +106,12 @@ function _readAndPreviewImage(file, previewElement, cacheKey, current, readers)
             previewElement.style.backgroundPosition = "center";
             finish(base64);
         };
-        reader.onerror = () => {
-            if (current()) showToast(t('settings_form.file_read_failed'), "error");
-            finish(null);
-        };
-        reader.onabort = () => finish(null);
-        reader.readAsDataURL(file);
+        reader.onerror = fail;
+        reader.onabort = cancel;
+        signal?.addEventListener('abort', cancel, { once: true });
+        if (signal?.aborted) { cancel(); return; }
+        timer = setTimeout(fail, IMAGE_PROCESS.TIMEOUT);
+        try { reader.readAsDataURL(file); } catch (_) { fail(); }
     });
 }
 
@@ -99,12 +121,14 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     container.className = 'ranking-settings-form';
     const sessionMatches = captureRequestSession();
     let disposed = false, saving = false;
-    const readers = new Set();
+    const readers = new Set(), cropControllers = new Set();
     const current = () => !disposed && container.isConnected && sessionMatches() && (options.isCurrent?.() ?? true);
     container._cleanup = () => {
         if (disposed) return;
         disposed = true;
-        for (const reader of readers) reader.abort();
+        for (const controller of cropControllers) { try { controller.abort(); } catch (_) {} }
+        cropControllers.clear();
+        for (const reader of readers) { try { reader.abort(); } catch (_) {} }
         readers.clear();
         container.querySelectorAll('input, textarea').forEach(input => { input.value = ''; });
         pendingBannerFile = pendingBannerDataUrl = null;
@@ -392,27 +416,32 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
             } finally {
                 if (current()) { btnTrigger.innerText = originalText; btnTrigger.disabled = false; }
             }
-        }, current
+        }, () => current() && !saving, cropControllers, refreshSaveAvailability
     );
 
+    function refreshSaveAvailability() {
+        const saveButton = container.querySelector('#btn-save-settings');
+        if (saveButton) saveButton.disabled = saving || cropControllers.size > 0;
+    }
+
     // 个人资料卡背景图上传逻辑（16:9 裁剪）
     // 🚀 优化：裁剪后只预览，点击保存时才上传到云端
-    _createImageUploadHandler(
+    const cancelBannerSelection = _createImageUploadHandler(
         settingBannerInput, container.querySelector("#btn-trigger-banner"),
         16/9, t('settings_form.crop_banner'), 3,
-        async (croppedFile) => {
-            if (!current()) return;
-            pendingBannerFile = croppedFile;
-            const dataUrl = await _readAndPreviewImage(croppedFile, bannerPreview, null, current, readers);
-            if (!current()) return;
+        async (croppedFile, operationCurrent, signal) => {
+            if (!operationCurrent()) return;
+            const dataUrl = await _readAndPreviewImage(croppedFile, bannerPreview, null, operationCurrent, readers, signal);
+            if (!operationCurrent()) return;
             if (dataUrl) {
+                pendingBannerFile = croppedFile;
                 pendingBannerDataUrl = dataUrl;
                 showToast(t('settings_form.banner_selected'), "info");
             }
-        }, current
+        }, () => current() && !saving, cropControllers, refreshSaveAvailability
     );
     container.querySelector("#btn-clear-banner").onclick = () => {
-        if (!current()) return;
+        if (!current() || saving) return;
         // 🔧 清除必须传空串而非 null：云端 PUT /api/users/{account} 的更新循环只写非 None 值
         // （见 router_users_profile.py「遍历请求中的字段，只更新非空值」），传 null 等同于
         // 「本次没改这个字段」而被跳过，云端旧图残留 —— 表现为点清除并保存后提示成功，
@@ -420,6 +449,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         // 且下游 hasBanner / bannerImageUrl 等判断都按 falsy 正确处理。
         // 注意上方 `let bannerUrl = userData.bannerUrl || null` 的初值仍保持 null：那是「本次未涉及该字段」
         // 的语义，可防止 userData 恰好缺 bannerUrl 时把云端图误清掉。
+        cancelBannerSelection();
         bannerUrl = "";
         pendingBannerFile = null;
         pendingBannerDataUrl = null;
@@ -433,20 +463,21 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     };
 
     // 界面背景上传逻辑（9:16 裁剪，仅本地）
-    _createImageUploadHandler(
+    const cancelUiBgSelection = _createImageUploadHandler(
         settingUiBgInput, container.querySelector("#btn-trigger-ui-bg"),
         9/16, t('settings_form.crop_ui_bg'), 3,
-        async (croppedFile) => {
-            const dataUrl = await _readAndPreviewImage(croppedFile, uiBgPreview, getBackgroundKey(userData.account), current, readers);
-            if (!current()) return;
+        async (croppedFile, operationCurrent, signal) => {
+            const dataUrl = await _readAndPreviewImage(croppedFile, uiBgPreview, getBackgroundKey(userData.account), operationCurrent, readers, signal);
+            if (!operationCurrent()) return;
             if (dataUrl) {
                 window.dispatchEvent(new CustomEvent("comfy-sidebar-bg-update"));
                 showToast(t('settings_form.ui_bg_applied'), "success");
             }
-        }, current
+        }, () => current() && !saving, cropControllers, refreshSaveAvailability
     );
     container.querySelector("#btn-clear-ui-bg").onclick = () => {
-        if (!current()) return;
+        if (!current() || saving) return;
+        cancelUiBgSelection();
         // 使用账号区分键清除
         if (!_safeLocalStorageRemove(getBackgroundKey(userData.account))) {
             showToast(t('settings_form.local_storage_unavailable'), "error");
@@ -462,57 +493,20 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     container.querySelector("#btn-cancel-settings").onclick = () => { if (current() && onCancelCallback) onCancelCallback(); };
 
     container.querySelector("#btn-save-settings").onclick = async (e) => {
-        if (!current() || saving) return;
+        if (!current() || saving || cropControllers.size > 0) return;
         saving = true;
         const btn = e.currentTarget;
         btn.innerHTML = `⏳ ${escapeHtml(t('settings_form.saving'))}`;
-        btn.disabled = true;
+        const lockedControls = Array.from(container.querySelectorAll('input, select, textarea, button'))
+            .filter(control => control.id !== 'btn-cancel-settings')
+            .map(control => [control, control.disabled]);
+        for (const [control] of lockedControls) control.disabled = true;
+        const unlock = () => {
+            for (const [control, disabled] of lockedControls) control.disabled = disabled;
+            saving = false; refreshSaveAvailability();
+        };
 
         try {
-            // 🚀 优化：如果有待上传的背景图，先上传
-            if (pendingBannerFile) {
-                btn.innerHTML = `⏳ ${escapeHtml(t('settings_form.uploading_banner'))}`;
-                try {
-                    const cloudImageUrl = await uploadFile(pendingBannerFile, "banner");
-                    if (!current()) return;
-                    if (cloudImageUrl) {
-                        bannerUrl = cloudImageUrl;
-                        // 保存到本地缓存
-                        if (pendingBannerDataUrl) {
-                            const bannerCacheKey = getBannerCacheKey(userData.account);
-                            try {
-                                localStorage.setItem(bannerCacheKey, pendingBannerDataUrl);
-                            } catch (storageErr) {
-                                // 配额溢出：清理其他用户的旧 banner 缓存后重试
-                                if (storageErr.name === "QuotaExceededError") {
-                                    try {
-                                        for (let i = localStorage.length - 1; i >= 0; i--) {
-                                            const key = localStorage.key(i);
-                                            if (key && key.startsWith("ComfyRanking_ProfileBannerCache_") && key !== bannerCacheKey) {
-                                                localStorage.removeItem(key);
-                                            }
-                                        }
-                                        localStorage.setItem(bannerCacheKey, pendingBannerDataUrl);
-                                    } catch (_) {
-                                        // 仍然失败则放弃本地缓存（不影响云端保存）
-                                    }
-                                }
-                            }
-                        }
-                    }
-                    pendingBannerFile = null;
-                    pendingBannerDataUrl = null;
-                } catch (uploadErr) {
-                    if (!current()) return;
-                    saving = false;
-                    showToast(t('settings_form.banner_upload_failed'), "error");
-                    btn.innerHTML = escapeHtml(t('settings_form.save_all'));
-                    btn.disabled = false;
-                    return;
-                }
-            }
-            
-            btn.innerHTML = `⏳ ${escapeHtml(t('settings_form.saving_settings'))}`;
             const birthday = birthdayInput.value || null;
             const updateData = {
                 name: container.querySelector("#setting-name").value.trim(),
@@ -525,21 +519,68 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
                 avatarDataUrl: avatarDataUrl,
                 bannerUrl: bannerUrl
             };
-
-            const res = await api.updateUserProfile(userData.account, updateData);
-            if (!current()) return;
-            if (res?.status !== 'success' || !res.data || typeof res.data !== 'object' || Array.isArray(res.data) || res.data.account !== userData.account) throw new Error('Invalid settings response');
-            
-            // 收集隐私设置并发送到后端
             const privacySettings = {
                 follows: container.querySelector("#hide-follows").checked,
                 likes: container.querySelector("#hide-likes").checked,
                 favorites: container.querySelector("#hide-favorites").checked,
                 downloads: container.querySelector("#hide-downloads").checked
             };
-            const privacyResponse = await api.updatePrivacy(userData.account, privacySettings);
+
+            const bannerDataToCache = pendingBannerDataUrl;
+            // 🚀 优化：如果有待上传的背景图，先上传
+            if (pendingBannerFile) {
+                btn.innerHTML = `⏳ ${escapeHtml(t('settings_form.uploading_banner'))}`;
+                try {
+                    const cloudImageUrl = await uploadFile(pendingBannerFile, "banner", { isCurrent: current, silent: true });
+                    if (!current()) return;
+                    if (typeof cloudImageUrl !== "string" || !cloudImageUrl.trim()) throw new Error("Invalid banner upload");
+                    bannerUrl = cloudImageUrl;
+                    updateData.bannerUrl = cloudImageUrl;
+                    pendingBannerFile = null;
+                } catch (uploadErr) {
+                    if (!current()) return;
+                    unlock();
+                    showToast(t('settings_form.banner_upload_failed'), "error");
+                    btn.innerHTML = escapeHtml(t('settings_form.save_all'));
+                    btn.disabled = false;
+                    return;
+                }
+            }
+
+            btn.innerHTML = `⏳ ${escapeHtml(t('settings_form.saving_settings'))}`;
+
+
+            const res = await api.updateUserSettings(userData.account, { ...updateData, privacy: privacySettings });
             if (!current()) return;
-            if (privacyResponse?.status !== 'success') throw new Error('Invalid privacy response');
+            if (res?.status !== 'success' || !res.data || typeof res.data !== 'object' || Array.isArray(res.data) || res.data.account !== userData.account) throw new Error('Invalid settings response');
+
+            if (!res.data.privacy || Object.keys(privacySettings).some(key => res.data.privacy[key] !== privacySettings[key])) {
+                throw new Error('Invalid settings privacy confirmation');
+            }
+
+            // 保存到本地缓存
+            if (bannerDataToCache) {
+                const bannerCacheKey = getBannerCacheKey(userData.account);
+                try {
+                    localStorage.setItem(bannerCacheKey, bannerDataToCache);
+                } catch (storageErr) {
+                    // 配额溢出：清理其他用户的旧 banner 缓存后重试
+                    if (storageErr.name === "QuotaExceededError") {
+                        try {
+                            for (let i = localStorage.length - 1; i >= 0; i--) {
+                                const key = localStorage.key(i);
+                                if (key && key.startsWith("ComfyRanking_ProfileBannerCache_") && key !== bannerCacheKey) {
+                                    localStorage.removeItem(key);
+                                }
+                            }
+                            localStorage.setItem(bannerCacheKey, bannerDataToCache);
+                        } catch (_) {
+                            // 仍然失败则放弃本地缓存（不影响云端保存）
+                        }
+                    }
+                }
+            }
+            pendingBannerDataUrl = null;
 
             const newUserData = normalizeProfileData({ ...userData, ...res.data, privacy: privacySettings }, userData.account, true);
 
@@ -558,7 +599,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
             if (onSaveSuccessCallback) onSaveSuccessCallback(newUserData);
         } catch (err) {
             if (!current()) return;
-            saving = false;
+            unlock();
             showToast(t('settings_form.settings_save_failed'), "error");
             btn.innerHTML = escapeHtml(t('settings_form.save_all'));
             btn.disabled = false;

前端页面/social/评论与互动组件.js

@@ -6,31 +6,70 @@ import { showToast, showConfirm } from "../components/UI交互提示组件.js";
 // 🧹 P2归一：escapeHtml 局部副本已移除，改用统一版
 import { escapeHtml } from "../components/互动工具函数.js";
 
+import { captureRequestSession } from "../core/网络请求_基础设施.js";
+import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
+import { CACHE } from "../core/全局配置.js";
+import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
+import { isConfirmedCommentResponse, isConfirmedCommentDeletion, isDefiniteCommentRejection } from "./评论数据工具.js";
+
 export { setupToggleButton } from "./互动按钮.js";
 
 // 🚀 核心修改：在参数末尾接收外部传进来的 onCountChange 回调函数
 // 🚀 P0安全修复：新增 contentAuthor 参数用于判断内容作者权限
 export function createCommentSection(itemId, commentsData, currentUser, onCountChange, contentAuthor = null) {
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex", flexDirection: "column", height: "100%", backgroundColor: "var(--comfy-menu-bg)", borderRadius: "4px"
-    });
+    container.className = "comment-section";
 
     const listArea = document.createElement("div");
-    Object.assign(listArea.style, { flex: "1", overflowY: "auto", padding: "10px", fontSize: "12px", color: "#ccc" });
+    listArea.className = "comment-section__list";
 
     const inputArea = document.createElement("div");
-    Object.assign(inputArea.style, { display: "flex", padding: "8px", borderTop: "1px solid var(--border-color, #333)", backgroundColor: "var(--comfy-input-bg)", gap: "8px" });
+    inputArea.className = "comment-section__composer";
 
-    let currentReplyTarget = null; 
+    let currentReplyTarget = null;
+    let sending = false, deleting = false, blocked = false, scope = null, constructing = true, observer;
+    let active = true, generation = 0, writePending = false;
+    const account = currentUser?.account || null;
+    const matches = captureRequestSession();
+    const sessionMatches = () => matches() && (getUser()?.account || null) === account;
+    const current = () => active && (scope ? scope.isCurrent() : sessionMatches()) && container.isConnected;
+    const profileCurrent = () => active && (scope ? scope.isCurrent() : sessionMatches()) && (constructing || container.isConnected);
 
     const inputField = document.createElement("input");
-    Object.assign(inputField.style, { flex: "1", padding: "6px 10px", borderRadius: "15px", border: "1px solid #555", backgroundColor: "var(--comfy-menu-bg)", color: "#fff", outline: "none" });
+    inputField.className = "comment-section__input";
     inputField.placeholder = t('social.say_something');
+    inputField.setAttribute('aria-label', inputField.placeholder);
 
     const submitBtn = document.createElement("button");
     submitBtn.innerText = t('common.send');
-    Object.assign(submitBtn.style, { padding: "4px 12px", borderRadius: "15px", border: "none", backgroundColor: "#4CAF50", color: "#fff", cursor: "pointer", fontWeight: "bold" });
+    submitBtn.className = "comment-section__send";
+    submitBtn.type = "button";
+
+    const notice = document.createElement('div');
+    notice.className = 'comment-section__empty';
+    notice.setAttribute('role', 'alert');
+    function setControls() {
+        const busy = sending || deleting;
+        submitBtn.disabled = busy || blocked;
+        inputField.readOnly = busy || blocked;
+        submitBtn.setAttribute('aria-busy', String(busy));
+        inputArea.setAttribute('aria-busy', String(busy));
+        listArea.querySelectorAll('.reply-btn,.delete-btn').forEach(button => { button.disabled = busy || blocked; });
+    }
+    function unconfirmed() {
+        blocked = true;
+        notice.textContent = t('social.comment_unconfirmed');
+        inputArea.append(notice);
+        setControls();
+        showToast(t('social.comment_unconfirmed'), 'warning');
+    }
+
+    function refreshRequired() {
+        blocked = true;
+        notice.textContent = t('social.comment_refresh_required');
+        inputArea.append(notice); setControls();
+        showToast(t('social.comment_refresh_required'), 'warning');
+    }
 
     // 🚀 核心新增：封装一个统计算法，每次发生数据变动时向外抛出真实的评论数量
     const triggerCountUpdate = () => {
@@ -49,24 +88,23 @@ export function createCommentSection(itemId, commentsData, currentUser, onCountC
 
     function renderCommentItem(comment, isSubReply = false) {
         const itemDiv = document.createElement("div");
-        Object.assign(itemDiv.style, { display: "flex", gap: "8px", marginBottom: "12px", paddingLeft: isSubReply ? "35px" : "0px" });
+        itemDiv.className = "comment-section__item" + (isSubReply ? " comment-section__item--reply" : "");
 
         if (comment.isDeleted) {
             if (!comment.replies || comment.replies.length === 0) return null;
             itemDiv.innerHTML = `
-                <div style="width: ${isSubReply ? '24px' : '32px'}; height: ${isSubReply ? '24px' : '32px'}; border-radius: 50%; background: var(--comfy-input-bg); display: flex; align-items: center; justify-content: center; font-size: 10px; color: #555;">✖</div>
-                <div style="flex: 1; background: var(--comfy-input-bg); padding: 6px 10px; border-radius: 4px; color: #666; font-style: italic; border: 1px dashed #444;">${t('social.comment_deleted')}</div>
+                <div class="comment-section__avatar comment-section__deleted-icon" aria-hidden="true">✖</div>
+                <div class="comment-section__deleted">${t('social.comment_deleted')}</div>
             `;
         } else {
-            const avatarSize = isSubReply ? "24px" : "32px";
-            const replyLabel = comment.replyToUserName ? `<span style="color: #888;">${t('social.reply_to')} <span style="color: #2196F3;">@${escapeHtml(comment.replyToUserName)}</span>：</span>` : "";
+            const replyLabel = comment.replyToUserName ? `<span class="comment-section__reply-label">${t('social.reply_to')} <span class="comment-section__reply-name">@${escapeHtml(comment.replyToUserName)}</span>: </span>` : "";
             
             // 🚀 P0安全修复：权限判断 - 评论作者、内容作者或管理员可删除
             const isCommentAuthor = currentUser && currentUser.account === comment.author;
             const isContentAuthor = currentUser && contentAuthor && currentUser.account === contentAuthor;
             const isAdminUser = currentUser && isAdmin(currentUser.account);
             const canDelete = isCommentAuthor || isContentAuthor || isAdminUser;
-            const deleteBtnHtml = canDelete ? `<span class="delete-btn" style="color: #F44336; cursor: pointer; margin-left: 10px; font-size: 10px;">${t('common.delete')}</span>` : "";
+            const deleteBtnHtml = canDelete ? `<button type="button" class="delete-btn comment-section__action comment-section__action--delete">${t('common.delete')}</button>` : "";
 
             // 🚀 SWR 缓存优先获取头像
             const account = comment.author;
@@ -75,55 +113,81 @@ export function createCommentSection(itemId, commentsData, currentUser, onCountC
             const avatarSrc = avatar || DEFAULT_AVATAR_SVG;
 
             itemDiv.innerHTML = `
-                <img class="swr-avatar" src="${escapeHtml(avatarSrc)}" style="width: ${avatarSize}; height: ${avatarSize}; border-radius: 50%; object-fit: cover; background: var(--comfy-input-bg);">
-                <div style="flex: 1;">
-                    <div style="display: flex; justify-content: space-between; margin-bottom: 2px;">
-                        <span class="swr-name" style="color: #aaa; font-weight: bold; font-size: 11px;">${escapeHtml(comment.authorName || comment.author)}</span>
+                <img class="swr-avatar comment-section__avatar" src="${escapeHtml(avatarSrc)}" alt="">
+                <div class="comment-section__body">
+                    <div class="comment-section__header">
+                        <span class="swr-name comment-section__name">${escapeHtml(comment.authorName || comment.author)}</span>
                     </div>
-                    <div style="line-height: 1.4; word-break: break-all;">${replyLabel}${escapeHtml(comment.content)}</div>
-                    <div style="display: flex; gap: 15px; margin-top: 4px; font-size: 10px; color: #777;">
-                        <span class="reply-btn" style="cursor: pointer; color: #aaa;">${t('social.reply')}</span>${deleteBtnHtml}
+                    <div class="comment-section__content">${replyLabel}${escapeHtml(comment.content)}</div>
+                    <div class="comment-section__actions">
+                        <button type="button" class="reply-btn comment-section__action" ${sending ? "disabled" : ""}>${t('social.reply')}</button>${deleteBtnHtml}
                     </div>
                 </div>
             `;
 
             // 🚀 后台SWR校对头像
+            const profileGeneration = generation;
             getProfileWithSWR(account, api.getUserProfile, (profile) => {
                 const avatarEl = itemDiv.querySelector('.swr-avatar');
                 const nameEl = itemDiv.querySelector('.swr-name');
-                if (avatarEl && profile.avatar) {
+                if (profileGeneration !== generation || !profileCurrent() || !profile || typeof profile !== 'object' || Array.isArray(profile)
+                    || (profile.account != null && profile.account !== account)) return;
+                if (avatarEl && typeof profile.avatar === 'string' && profile.avatar) {
                     avatarEl.src = profile.avatar;
                 }
-                if (nameEl && profile.name) {
+                if (nameEl && typeof profile.name === 'string' && profile.name) {
                     nameEl.textContent = profile.name;
                 }
             });
 
             itemDiv.querySelector(".reply-btn").onclick = () => {
+                if (!current() || sending || deleting || blocked) return;
                 currentReplyTarget = { 
                     account: comment.author, name: comment.authorName || comment.author,
                     parentId: isSubReply ? comment.parentId : comment.id 
                 };
                 inputField.placeholder = `${t('social.reply_to')} @${currentReplyTarget.name}:`;
+                inputField.setAttribute('aria-label', inputField.placeholder);
                 inputField.focus();
             };
 
             if (canDelete) {
                 itemDiv.querySelector(".delete-btn").onclick = async () => {
-                    const confirmed = await showConfirm(t('social.delete_comment_confirm'), {
-                        title: t('social.delete_comment_title'),
-                        confirmText: t('common.confirm'),
-                        cancelText: t('common.cancel'),
-                        type: 'danger'
-                    });
-                    if (!confirmed) return;
+                    if (!current() || sending || deleting || blocked) return;
+                    const operationGeneration = generation;
+                    const startedWithFocus = container.contains(document.activeElement);
+                    deleting = true; setControls();
+                    let requested = false, confirmedWrite = false;
                     try {
-                        // 🚀 P0安全修复：删除评论不再传递author，后端从JWT中获取
-                        await api.deleteComment(itemId, comment.id);
+                        const confirmed = await showConfirm(t('social.delete_comment_confirm'), {
+                            title: t('social.delete_comment_title'), confirmText: t('common.confirm'),
+                            cancelText: t('common.cancel'), type: 'danger', signal: confirmationAbort.signal
+                        });
+                        if (!confirmed || !current() || operationGeneration !== generation) return;
+                        requested = true; writePending = true;
+                        const response = await api.deleteComment(itemId, comment.id);
+                        if (!current() || operationGeneration !== generation) return;
+                        if (!isConfirmedCommentDeletion(response)) { unconfirmed(); return; }
+                        confirmedWrite = true;
                         comment.isDeleted = true;
-                        renderList(); 
+                        const restoreFocus = startedWithFocus && (container.contains(document.activeElement) || document.activeElement === document.body);
+                        renderList();
+                        if (restoreFocus) inputField.focus();
                         triggerCountUpdate();
-                    } catch(e) { showToast(t('feedback.delete_failed') + t('feedback.retry_suffix'), "error"); }
+                    } catch (error) {
+                        if (!current() || operationGeneration !== generation) return;
+                        if (confirmedWrite) refreshRequired();
+                        else if (!requested || isDefiniteCommentRejection(error)) showToast(t('feedback.delete_failed') + t('feedback.retry_suffix'), 'error');
+                        else unconfirmed();
+                    } finally {
+                        if (current() && operationGeneration === generation) {
+                            deleting = false; writePending = false; setControls();
+                            if (startedWithFocus && document.activeElement === document.body) {
+                                const trigger = itemDiv.querySelector('.delete-btn');
+                                (trigger?.isConnected && !trigger.disabled ? trigger : inputField).focus();
+                            }
+                        }
+                    }
                 };
             }
         }
@@ -133,7 +197,7 @@ export function createCommentSection(itemId, commentsData, currentUser, onCountC
     function renderList() {
         listArea.innerHTML = "";
         if (!commentsData || commentsData.length === 0) {
-            listArea.innerHTML = `<div style="text-align:center; padding: 20px; color:#666;">${t('social.no_comments')}</div>`;
+            listArea.innerHTML = `<div class="comment-section__empty">${t('social.no_comments')}</div>`;
             return;
         }
 
@@ -149,24 +213,41 @@ export function createCommentSection(itemId, commentsData, currentUser, onCountC
                 });
             }
         });
+        if (!listArea.firstElementChild) {
+            listArea.innerHTML = `<div class="comment-section__empty">${t('social.no_comments')}</div>`;
+        }
+        setControls();
         listArea.scrollTop = listArea.scrollHeight;
     }
 
     submitBtn.onclick = async () => {
+        if (!current() || sending || deleting || blocked) return;
         if (!currentUser) return showToast(t('feedback.login_required'), "warning");
         const text = inputField.value.trim();
         if (!text) return;
 
-        submitBtn.disabled = true;
+        const operationGeneration = generation;
+        sending = true;
+        const submittedValue = inputField.value;
+        setControls();
+        let confirmedWrite = false;
         try {
             const parentId = currentReplyTarget ? currentReplyTarget.parentId : null;
             const replyToAcc = currentReplyTarget ? currentReplyTarget.account : null;
             
+            writePending = true;
             const res = await api.postComment(itemId, currentUser.account, text, replyToAcc, parentId);
+            if (!current() || operationGeneration !== generation) return;
+            if (!isConfirmedCommentResponse(res, account, replyToAcc)
+                || commentsData.some(c => c.id === res.data.id || (c.replies || []).some(r => r.id === res.data.id))) {
+                unconfirmed(); return;
+            }
+            confirmedWrite = true;
             const newComment = res.data;
             
             if (parentId) {
                 let targetParent = commentsData.find(c => c.id === parentId);
+                if (!targetParent) { refreshRequired(); return; }
                 if (targetParent) {
                     if (!targetParent.replies) targetParent.replies = [];
                     targetParent.replies.push(newComment);
@@ -175,16 +256,67 @@ export function createCommentSection(itemId, commentsData, currentUser, onCountC
                 commentsData.push(newComment);
             }
             
-            inputField.value = ""; inputField.placeholder = t('social.say_something');
+            if (inputField.value === submittedValue) inputField.value = "";
+            inputField.placeholder = t('social.say_something');
+            inputField.setAttribute('aria-label', inputField.placeholder);
             currentReplyTarget = null;
             renderList();
             triggerCountUpdate();
-        } catch (e) {
-            showToast(t('feedback.send_failed_retry'), "error");
+        } catch (error) {
+            if (!current() || operationGeneration !== generation) return;
+            if (confirmedWrite) refreshRequired();
+            else if (isDefiniteCommentRejection(error)) showToast(t('feedback.send_failed_retry'), 'error');
+            else unconfirmed();
         } finally {
-            submitBtn.disabled = false;
+            if (current() && operationGeneration === generation) { writePending = false; sending = false; setControls(); }
+        }
+    };
+
+    let confirmationAbort = new AbortController();
+    scope = createTaskViewScope({
+        sessionMatches, connected: () => constructing || container.isConnected,
+        subscribe: notify => subscribeTaskSessionChanges(notify, { target: window, eventBus, events: EVENTS,
+            userKey: CACHE.LEGACY_KEYS.USER, tokenKey: CACHE.LEGACY_KEYS.TOKEN }),
+        cancelReads: () => {},
+        invalidate: () => { notice.textContent = t('auth.session_changed'); container.append(notice); }
+    });
+    scope.addCleanup(() => {
+        active = false; generation++;
+        observer?.disconnect(); confirmationAbort.abort();
+        inputField.value = ''; currentReplyTarget = null; commentsData = [];
+        blocked = true; sending = deleting = false; setControls(); container.replaceChildren();
+    });
+    container._setActive = value => {
+        const next = !!value;
+        if (next === active) return;
+        if (next && !scope.isCurrent()) return;
+        generation++;
+        active = next;
+        if (!next) {
+            if (writePending) {
+                blocked = true;
+                notice.textContent = t('social.comment_unconfirmed');
+                inputArea.append(notice);
+            }
+            confirmationAbort.abort();
+            inputField.value = ''; currentReplyTarget = null;
+            inputField.placeholder = t('social.say_something');
+            inputField.setAttribute('aria-label', inputField.placeholder);
+            sending = deleting = writePending = false;
+        } else confirmationAbort = new AbortController();
+        setControls();
+        if (!active) {
+            submitBtn.disabled = true; inputField.readOnly = true;
+            listArea.querySelectorAll('.reply-btn,.delete-btn').forEach(button => { button.disabled = true; });
         }
     };
+    container._cleanup = () => scope.dispose();
+    queueMicrotask(() => {
+        constructing = false;
+        if (!scope.isCurrent()) return;
+        observer = new MutationObserver(() => { if (!container.isConnected) scope.dispose(); });
+        observer.observe(document.body, { childList: true, subtree: true });
+    });
 
     inputArea.appendChild(inputField); inputArea.appendChild(submitBtn);
     container.appendChild(listArea); container.appendChild(inputArea);

前端页面/social/评论数据工具.js

@@ -0,0 +1,20 @@
+// 通用评论接口的确认边界；不依赖宿主、存储或网络。
+export function isConfirmedCommentResponse(response, account, replyTo = null) {
+    const data = response?.data;
+    return typeof account === 'string' && account.trim().length > 0
+        && response?.status === 'success' && !!data && typeof data === 'object' && !Array.isArray(data)
+        && typeof data.id === 'string' && data.id.trim().length > 0
+        && data.author === account && typeof data.content === 'string' && data.content.trim().length > 0
+        && data.isDeleted === false && Array.isArray(data.replies) && data.replies.length === 0
+        && data.replyToUser === replyTo
+        && ['authorName', 'avatar'].every(key => data[key] === undefined || typeof data[key] === 'string')
+        && (data.replyToUserName == null || typeof data.replyToUserName === 'string');
+}
+
+export function isConfirmedCommentDeletion(response) {
+    return response?.status === 'success';
+}
+
+export function isDefiniteCommentRejection(error) {
+    return Number.isInteger(error?.status) && error.status >= 400 && error.status < 500 && error.status !== 408;
+}

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

@@ -822,6 +822,7 @@
 
 .comfy-ranking-root .hub-controls {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--rk-space-2);
     width: 100%;
@@ -847,7 +848,7 @@
 
 .comfy-ranking-root .hub-search-input {
     flex: 1 1 100px;
-    min-width: 0;
+    min-width: 80px;
     padding: 6px 10px;
     background: var(--rk-panel);
 }
@@ -1494,3 +1495,117 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 .ranking-publish-secondary:hover { border-color: var(--rk-accent, #667eea); }
 .ranking-publish-form :is(#video-name,#audio-name) { overflow-wrap: anywhere; }
 @media (prefers-reduced-motion: reduce) { .ranking-publish-form, .ranking-publish-form * { transition: none !important; animation: none !important; } }
+
+/* Public comments: fixed-height embeds retain their own scroll area. */
+.comment-section { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; border-radius: var(--rk-radius-sm, 6px); background: var(--rk-bg, var(--comfy-menu-bg, #202020)); color: var(--rk-text, var(--fg-color, #f1f1f1)); font-size: 12px; }
+.comment-section__list { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; padding: 10px; }
+.comment-section__composer { display: flex; flex-wrap: wrap; flex: 0 0 auto; min-width: 0; padding: 8px; gap: 8px; border-top: 1px solid var(--rk-border, var(--border-color, #454545)); background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.comment-section__input { flex: 1 1 120px; min-width: 0; width: 0; max-width: 100%; box-sizing: border-box; min-height: 32px; padding: 6px 10px; border: 1px solid var(--rk-border, var(--border-color, #454545)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-bg, var(--comfy-menu-bg, #202020)); color: inherit; font: inherit; }
+.comment-section__input::placeholder { color: var(--rk-muted, var(--descrip-text, #a4a4a4)); opacity: 1; }
+.comment-section__input[readonly] { cursor: wait; }
+.comment-section__send { min-height: 32px; max-width: 100%; padding: 4px 12px; border: 1px solid var(--rk-success, #4caf50); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-weight: bold; cursor: pointer; overflow-wrap: anywhere; }
+.comment-section__item { display: flex; gap: 8px; margin-bottom: 12px; min-width: 0; }
+.comment-section__item--reply { padding-left: 24px; }
+.comment-section__avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.comment-section__item--reply .comment-section__avatar { flex-basis: 24px; width: 24px; height: 24px; }
+.comment-section__body { flex: 1; min-width: 0; }
+.comment-section__header { display: flex; margin-bottom: 2px; min-width: 0; }
+.comment-section__name { font-weight: bold; font-size: 11px; overflow-wrap: anywhere; }
+.comment-section__content { line-height: 1.5; overflow-wrap: anywhere; }
+.comment-section__reply-label { color: var(--rk-muted, var(--descrip-text, #a4a4a4)); }
+.comment-section__reply-name { color: var(--rk-text, var(--fg-color, #f1f1f1)); }
+.comment-section__actions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; }
+.comment-section__action { min-height: 24px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--rk-radius-sm, 6px); background: transparent; color: inherit; font: inherit; font-size: 11px; cursor: pointer; overflow-wrap: anywhere; }
+.comment-section__action--delete { border-color: var(--rk-danger, #ef5350); }
+.comment-section__action:hover, .comment-section__send:hover { border-color: var(--rk-focus, #8ab4ff); background: var(--rk-bg, var(--comfy-menu-bg, #202020)); }
+.comment-section__action:focus-visible, .comment-section__send:focus-visible, .comment-section__input:focus-visible { outline: 2px solid var(--rk-focus, #8ab4ff); outline-offset: 2px; }
+.comment-section__action:disabled, .comment-section__send:disabled { opacity: .7; cursor: wait; }
+.comment-section__deleted-icon { display: flex; align-items: center; justify-content: center; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 10px; }
+.comment-section__deleted { flex: 1; min-width: 0; padding: 6px 10px; border: 1px dashed var(--rk-border, var(--border-color, #454545)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-style: italic; overflow-wrap: anywhere; }
+.comment-section__empty { padding: 20px 8px; text-align: center; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); overflow-wrap: anywhere; }
+/* Creator cards: compact identity, clear statistics and separate native actions. */
+.creator-card { container-type:inline-size; container-name:ranking-creator; min-width:0; margin-bottom:12px; border:1px solid var(--rk-border,var(--border-color,#454545)); border-radius:var(--rk-radius-md,10px); background:var(--rk-panel,var(--comfy-input-bg,#292929)); color:var(--rk-text,var(--fg-color,#f1f1f1)); font:inherit; overflow:hidden; }
+.creator-card *, .creator-tip-board * { box-sizing:border-box; }
+.creator-card__summary { position:relative; padding:12px; cursor:pointer; background-position:center; background-size:cover; }
+.creator-card__summary--banner::before { content:""; position:absolute; inset:0; background:rgb(0 0 0 / 76%); }
+.creator-card__summary--banner { color:#fff; }
+.creator-card__summary > * { position:relative; }
+.creator-card__identity { display:grid; grid-template-columns:50px minmax(0,1fr); align-items:center; gap:12px; }
+.creator-avatar-link, .creator-name-link, .tip-board-user { padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; text-align:left; min-width:0; }
+.creator-avatar-link { width:50px; height:50px; border-radius:50%; }
+.creator-avatar-link img { width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--rk-border,#555); }
+.creator-name-link { font-size:16px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
+.creator-card__usage { margin:8px 0; color:var(--rk-muted,var(--descrip-text,#a4a4a4)); font-size:12px; overflow-wrap:anywhere; }
+.creator-card__intro { margin:0 0 12px; color:var(--rk-muted,var(--descrip-text,#a4a4a4)); font-size:12px; line-height:1.6; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.creator-card__statistics { border:1px solid var(--rk-border,#454545); border-radius:6px; background:var(--rk-bg,var(--comfy-menu-bg,#202020)); padding:8px; }
+.creator-card__stats, .creator-card__outputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
+.creator-card__outputs { margin-top:8px; padding-top:8px; border-top:1px solid var(--rk-border,#454545); }
+.creator-card__stat { min-width:0; display:flex; flex-direction:column; gap:4px; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
+.creator-card__stat > span { color:var(--rk-muted,var(--descrip-text,#a4a4a4)); }
+.creator-card__stat strong { font-size:13px; font-variant-numeric:tabular-nums; }
+.creator-card__stat-value { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px; }
+.creator-card__stat-value > span { min-width:0; }
+.creator-card__number { white-space:nowrap; }
+.creator-card__stat small { font-weight:400; font-size:10px; }
+.creator-card__toggle { width:100%; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; padding:6px 10px; border:1px solid var(--rk-border,#454545); border-radius:6px; background:var(--rk-panel,var(--comfy-input-bg,#292929)); color:var(--rk-text,var(--fg-color,#f1f1f1)); font:inherit; font-size:12px; cursor:pointer; }
+.creator-card__toggle[aria-expanded="true"] > span { transform:rotate(180deg); }
+.creator-card button:hover, .creator-tip-board button:hover { text-decoration:underline; }
+.creator-card button:focus-visible, .creator-tip-board button:focus-visible { outline:2px solid var(--rk-focus,#8ab4ff); outline-offset:2px; }
+.creator-card button:disabled { cursor:default; opacity:.65; }
+.creator-card__summary--banner .creator-card__usage, .creator-card__summary--banner .creator-card__intro { color:#eee; }
+.creator-card__summary--banner .creator-card__statistics { color:var(--rk-text,var(--fg-color,#f1f1f1)); }
+.creator-card__detail { padding:12px; border-top:1px solid var(--rk-border,#454545); }
+.creator-card__detail[hidden] { display:none !important; }
+.creator-card__section-label { font-size:12px; font-weight:700; margin-bottom:8px; }
+.creator-card__section-label--comments { margin-top:16px; }
+.creator-card__chart { width:100%; height:180px; background:var(--rk-bg,var(--comfy-menu-bg,#202020)); border-radius:6px; margin-bottom:12px; }
+.creator-card__comments { height:250px; border:1px solid var(--rk-border,#454545); border-radius:6px; overflow:hidden; }
+.creator-card__status { padding:32px 12px; text-align:center; color:var(--rk-muted,var(--descrip-text,#a4a4a4)); }
+.creator-card__status--error, .creator-card__chart-status--error { color:var(--rk-danger,#ef5350); }
+.creator-card__status-copy { font-size:13px; line-height:1.6; margin-bottom:12px; }
+.creator-card__retry, .creator-tip-btn { min-height:36px; padding:6px 12px; border:1px solid var(--rk-border,#454545); border-radius:6px; color:var(--rk-text,var(--fg-color,#f1f1f1)); background:var(--rk-panel,var(--comfy-input-bg,#292929)); font:inherit; font-size:12px; cursor:pointer; }
+.creator-card__chart-status { display:grid; place-items:center; height:100%; padding:12px; text-align:center; font-size:12px; }
+.creator-tip-board { padding:10px; margin-top:10px; border:1px solid var(--rk-border,#454545); border-radius:6px; background:var(--rk-bg,var(--comfy-menu-bg,#202020)); color:var(--rk-text,var(--fg-color,#f1f1f1)); min-width:0; }
+.creator-tip-board__header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
+.creator-tip-board__title { font-size:12px; font-weight:700; min-width:0; overflow-wrap:anywhere; }
+.creator-tip-board__count { font-size:11px; font-weight:400; color:var(--rk-muted,var(--descrip-text,#a4a4a4)); }
+.creator-tip-board__rule { font-size:11px; line-height:1.6; color:var(--rk-muted,var(--descrip-text,#a4a4a4)); padding:6px 0; margin-bottom:6px; overflow-wrap:anywhere; }
+.creator-tip-board__empty { padding:15px 0; text-align:center; color:var(--rk-muted,var(--descrip-text,#a4a4a4)); font-size:12px; }
+.creator-tip-board__list { max-height:200px; overflow-y:auto; }
+.creator-tip-entry { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; padding:7px 6px; border-radius:4px; font-size:12px; }
+.creator-tip-entry:nth-child(odd) { background:var(--rk-panel,var(--comfy-input-bg,#292929)); }
+.creator-tip-entry__identity { display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 100px; }
+.creator-tip-entry__rank { width:24px; flex-shrink:0; }
+.tip-board-user { display:flex; align-items:center; gap:6px; min-height:32px; line-height:1.4; }
+.tip-board-avatar { width:20px; height:20px; border-radius:50%; object-fit:cover; flex-shrink:0; }
+.tip-board-name { min-width:0; overflow-wrap:anywhere; }
+.creator-tip-entry__value { display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; margin-left:auto; }
+.creator-tip-entry__amount { font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
+.creator-tip-entry__anonymous { color:var(--rk-muted,var(--descrip-text,#a4a4a4)); font-style:italic; }
+@container ranking-creator (max-width:280px) { .creator-card__summary, .creator-card__detail { padding:10px; } .creator-card__stats, .creator-card__outputs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .creator-card__stat strong { font-size:12px; } .creator-tip-entry__identity { flex-basis:100%; } .creator-tip-entry__value { margin-left:30px; } }
+@media (prefers-reduced-motion:reduce) { .creator-card *, .creator-tip-board * { transition:none !important; animation:none !important; } }
+
+/* 任务申诉发起弹窗：局部主题与原生控件状态。 */
+.task-dispute { min-width: 0; color: var(--rk-text, var(--fg-color, #f1f1f1)); font: inherit; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
+.task-dispute .task-dispute__field { min-width: 0; margin-bottom: 16px; }
+.task-dispute .task-dispute__label { display: block; margin-bottom: 8px; font-weight: 600; }
+.task-dispute .task-dispute__required { color: var(--rk-danger, #ef5350); }
+.task-dispute .task-dispute__reason { display: block; width: 100%; min-width: 0; height: 120px; min-height: 120px; padding: 12px; box-sizing: border-box; border: 1px solid var(--rk-border, var(--border-color, #454545)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; line-height: 1.5; resize: vertical; }
+.task-dispute .task-dispute__reason::placeholder { color: inherit; opacity: .7; }
+.task-dispute .task-dispute__reason[readonly] { border-style: dashed; }
+.task-dispute .task-dispute__reason[aria-invalid="true"] { border-color: var(--rk-danger, #ef5350); border-width: 2px; }
+.task-dispute .task-dispute__upload { display: block; width: 100%; min-width: 0; min-height: 64px; padding: 16px 12px; box-sizing: border-box; border: 2px dashed var(--rk-border, var(--border-color, #454545)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; line-height: 1.5; overflow-wrap: anywhere; cursor: pointer; transition: border-color .15s ease; }
+.task-dispute .task-dispute__file { display: none; }
+.task-dispute .task-dispute__preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-width: 0; }
+.task-dispute .task-dispute__evidence { position: relative; flex: 0 0 72px; width: 72px; height: 72px; }
+.task-dispute .task-dispute__image { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--rk-radius-sm, 6px); }
+.task-dispute .task-dispute__remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; box-sizing: border-box; border: 1px solid var(--rk-danger, #ef5350); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
+.task-dispute .task-dispute__notice { min-width: 0; margin-bottom: 16px; padding: 12px; border: 1px solid var(--rk-border, var(--border-color, #454545)); border-left: 3px solid var(--rk-warning, #ff9800); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.task-dispute .task-dispute__notice-copy { font-size: 13px; }
+.task-dispute .task-dispute__notice-list { margin: 8px 0 0 16px; padding: 0; line-height: 1.6; }
+.task-dispute .task-dispute__notice-list li + li { margin-top: 4px; }
+.task-dispute .task-dispute__submit { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 12px; box-sizing: border-box; border: 1px solid var(--rk-danger, #ef5350); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: inherit; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; cursor: pointer; transition: border-color .15s ease; }
+.task-dispute button:disabled { cursor: default; opacity: .65; }
+.task-dispute button:focus-visible, .task-dispute textarea:focus-visible { outline: 2px solid var(--rk-focus, var(--comfy-focus-color, #8ab4ff)); outline-offset: 3px; }
+@media (hover: hover) { .task-dispute .task-dispute__upload:hover:not(:disabled), .task-dispute .task-dispute__submit:hover:not(:disabled), .task-dispute .task-dispute__remove:hover:not(:disabled) { border-color: var(--rk-focus, var(--comfy-focus-color, #8ab4ff)); } }
+@media (prefers-reduced-motion: reduce) { .task-dispute *, .task-dispute *::before, .task-dispute *::after { transition: none !important; animation: none !important; } }

前端页面/task/任务视图生命周期.js

@@ -1,59 +1,98 @@
-/** 会话与路由范围；取消读取，不重放已经提交的业务操作。 */
-export function createTaskViewScope({ sessionMatches, connected, subscribe, cancelReads, invalidate }) {
-    let disposed = false;
-    let unsubscribe = () => {};
-    const cleanups = new Set();
-    const dispose = () => {
-        if (disposed) return;
-        disposed = true;
-        // 一项清理失败不能阻止其它弹窗、读取与订阅释放。
-        try { unsubscribe(); } catch (_) {}
-        try { cancelReads(); } catch (_) {}
-        for (const cleanup of cleanups) {
-            try { cleanup(); } catch (_) {}
-        }
-        cleanups.clear();
-    };
-    const revoke = () => {
-        if (disposed) return;
-        dispose();
-        invalidate();
-    };
-    unsubscribe = subscribe(force => {
-        if (force || !sessionMatches()) revoke();
-    });
-    return {
-        dispose,
-        isCurrent() {
-            if (disposed) return false;
-            if (!sessionMatches()) { revoke(); return false; }
-            if (!connected()) { dispose(); return false; }
-            return true;
-        },
-        addCleanup(cleanup) {
-            if (disposed) { cleanup(); return () => {}; }
-            cleanups.add(cleanup);
-            return () => cleanups.delete(cleanup);
-        }
-    };
-}
-
-/** 同域登录事件及跨标签身份记录变化，任务与申诉视图使用相同语义。 */
-export function subscribeTaskSessionChanges(notify, { target, eventBus, events, userKey, tokenKey }) {
-    const handlers = [
-        ["comfy-user-login", () => notify(true)],
-        ["comfy-user-logout", () => notify(true)],
-        ["comfy-ranking-auth-expired", () => notify(true)],
-        ["storage", event => {
-            if (event.key === null || event.key === userKey) notify(true);
-            else if (event.key === tokenKey) notify(false);
-        }]
-    ];
-    for (const [name, handler] of handlers) target.addEventListener(name, handler);
-    const offLogin = eventBus.on(events.USER_LOGIN, () => notify(true));
-    const offLogout = eventBus.on(events.USER_LOGOUT, () => notify(true));
-    return () => {
-        for (const [name, handler] of handlers) target.removeEventListener(name, handler);
-        offLogin(); offLogout();
-    };
-}
+/** 会话与路由范围；取消读取，不重放已经提交的业务操作。 */
+export function createTaskViewScope({ sessionMatches, connected, subscribe, cancelReads, invalidate }) {
+    let disposed = false;
+    let unsubscribe = () => {};
+    const cleanups = new Set();
+    const dispose = () => {
+        if (disposed) return;
+        disposed = true;
+        // 一项清理失败不能阻止其它弹窗、读取与订阅释放。
+        try { unsubscribe(); } catch (_) {}
+        try { cancelReads(); } catch (_) {}
+        for (const cleanup of cleanups) {
+            try { cleanup(); } catch (_) {}
+        }
+        cleanups.clear();
+    };
+    const revoke = () => {
+        if (disposed) return;
+        dispose();
+        invalidate();
+    };
+    try {
+        unsubscribe = subscribe(force => {
+            if (force || !sessionMatches()) revoke();
+        });
+        if (typeof unsubscribe !== "function") throw new Error("Invalid view subscription");
+        // 注册期间同步撤销时，补收刚返回的取消订阅句柄。
+        if (disposed) { try { unsubscribe(); } catch (_) {} }
+    } catch (error) {
+        dispose();
+        throw error;
+    }
+    return {
+        dispose,
+        isCurrent() {
+            if (disposed) return false;
+            if (!sessionMatches()) { revoke(); return false; }
+            if (!connected()) { dispose(); return false; }
+            return true;
+        },
+        addCleanup(cleanup) {
+            if (disposed) { cleanup(); return () => {}; }
+            cleanups.add(cleanup);
+            return () => cleanups.delete(cleanup);
+        }
+    };
+}
+
+/** 同域登录事件及跨标签身份记录变化，任务与申诉视图使用相同语义。 */
+export function subscribeTaskSessionChanges(notify, { target, eventBus, events, userKey, tokenKey }) {
+    let stopped = false;
+    const cleanups = [];
+    const notifyCurrent = force => { if (!stopped) notify(force); };
+    const unsubscribe = () => {
+        if (stopped) return;
+        stopped = true;
+        // 一项平台/总线清理失败不阻止其它监听释放，旧回调也不再通知。
+        for (const cleanup of cleanups.splice(0)) {
+            try { cleanup(); }
+            catch (_) { console.warn('会话监听清理失败，继续释放其它监听。'); }
+        }
+    };
+    const handlers = [
+        ["comfy-user-login", () => notifyCurrent(true)],
+        ["comfy-user-logout", () => notifyCurrent(true)],
+        ["comfy-ranking-auth-expired", () => notifyCurrent(true)],
+        ["storage", event => {
+            if (event.key === null || event.key === userKey) notifyCurrent(true);
+            else if (event.key === tokenKey) notifyCurrent(false);
+        }]
+    ];
+    const subscribeBus = name => {
+        const handler = () => notifyCurrent(true);
+        let off;
+        cleanups.push(() => {
+            if (typeof off === "function") {
+                try { off(); return; }
+                catch (_) { console.warn('会话总线清理失败，尝试释放原监听。'); }
+            }
+            // on中途失败或返回坏句柄时，仍能精确回收已登记的原回调。
+            if (typeof eventBus.off === "function") eventBus.off(name, handler);
+        });
+        off = eventBus.on(name, handler);
+        if (typeof off !== "function") throw new Error("Invalid session subscription");
+    };
+    try {
+        for (const [name, handler] of handlers) {
+            cleanups.push(() => target.removeEventListener(name, handler));
+            target.addEventListener(name, handler);
+        }
+        subscribeBus(events.USER_LOGIN);
+        subscribeBus(events.USER_LOGOUT);
+        return unsubscribe;
+    } catch (error) {
+        unsubscribe();
+        throw error;
+    }
+}

前端页面/task/任务详情组件.js

@@ -12,7 +12,7 @@ import { eventBus, EVENTS } from "../core/状态管理.js";
 import { createTaskViewScope, subscribeTaskSessionChanges } from "./任务视图生命周期.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
-import { API, CACHE, PLACEHOLDERS, getCachedProfile, getProfileWithSWR, isAdmin, IS_WEB_MODE } from "../core/全局配置.js";
+import { API, CACHE, PLACEHOLDERS, TASK_LIMITS, getCachedProfile, getProfileWithSWR, isAdmin, IS_WEB_MODE } from "../core/全局配置.js";
 import { removeCache, findInListCache, requireListResponseData } from "../components/性能优化工具.js";
 import { globalModal } from "../components/全局弹窗管理器.js";
 import { compressImageForUpload } from "../market/发布内容_提交引擎.js";
@@ -23,6 +23,7 @@ import { recordView, handleToggleLike, handleToggleFavorite, renderTipBoardHTML
 let taskViewSequence = 0;
 const taskScopes = new WeakMap();
 const modalScopes = new WeakMap();
+const taskCommentStates = new WeakMap();
 
 function openTaskModal(scope, title, content, options) {
     if (scope && !scope.isCurrent()) return;
@@ -323,8 +324,8 @@ ${escapeHtml(task.description)}</div>
             
             <!-- 评论输入框 -->
             <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                <input type="text" id="comment-input" placeholder="${t('post.comment_placeholder')}" style="flex: 1; padding: 10px 12px; background: var(--comfy-input-bg); border: 1px solid #444; border-radius: 20px; color: #fff; font-size: 13px; outline: none;" onfocus="this.style.borderColor='#4CAF50'" onblur="this.style.borderColor='#444'">
-                <button id="btn-send-comment" style="background: #4CAF50; border: none; color: #fff; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s;" onmouseover="this.style.background='#45a049'" onmouseout="this.style.background='#4CAF50'">
+                <input type="text" id="comment-input" aria-label="${escapeHtml(t('post.comment_placeholder'))}" aria-required="true" required placeholder="${escapeHtml(t('post.comment_placeholder'))}" style="flex: 1; padding: 10px 12px; background: var(--comfy-input-bg); border: 1px solid #444; border-radius: 20px; color: #fff; font-size: 13px; outline: none;" onfocus="this.style.borderColor='#4CAF50'" onblur="this.style.borderColor='#444'">
+                <button type="button" id="btn-send-comment" style="background: #4CAF50; border: none; color: #fff; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s;" onmouseover="this.style.background='#45a049'" onmouseout="this.style.background='#4CAF50'">
                     ${t('common.send')}
                 </button>
             </div>
@@ -435,8 +436,10 @@ ${escapeHtml(task.description)}</div>
 /**
  * 🔧 通用确认对话框工厂函数
  */
-function _showConfirmDialog({ scope, title, icon, message, description, confirmText, confirmStyle, loadingText, errorText, width, onConfirm }) {
+function _showConfirmDialog({ scope, title, icon, message, description, confirmText, confirmStyle, loadingText, errorText, width, onConfirm, onSuccess, validateResult = result => result?.status === "success" }) {
+    let phase = "idle";
     const content = document.createElement("div");
+    content._cleanup = () => { phase = "closed"; };
     content.style.color = "#ccc";
     // 🔒 XSS防护：message/description 可能嵌入其他用户的账号或昵称
     // （如 t('task.confirm_assign', { assignee })），写入 innerHTML 前必须转义。
@@ -453,24 +456,36 @@ function _showConfirmDialog({ scope, title, icon, message, description, confirmT
         </div>
     `;
     
-    content.querySelector("#dialog-cancel").onclick = () => closeTaskModal(content);
-    
-    content.querySelector("#dialog-confirm").onclick = async () => {
-        const confirmBtn = content.querySelector("#dialog-confirm");
+    content.querySelector("#dialog-cancel").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+
+    const confirmBtn = content.querySelector("#dialog-confirm");
+    confirmBtn.onclick = async () => {
+        if (phase !== "idle" || !taskModalCurrent(content)) return;
+        phase = "submitting";
         confirmBtn.disabled = true;
         confirmBtn.textContent = loadingText || `⏳ ${t('common.confirming')}...`;
-        
+        content.setAttribute("aria-busy", "true");
         try {
-            if (!taskModalCurrent(content)) return;
-            await onConfirm(content);
+            const result = await onConfirm(content);
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            if (!validateResult(result)) throw new Error("Unconfirmed task operation");
+            phase = "committed";
+            await onSuccess(content);
         } catch (err) {
-            if (!taskModalCurrent(content)) return;
-            showToast(errorText || t('common.error'), "error");
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = confirmText;
+            if (!taskModalCurrent(content) || phase === "closed" || phase === "committed") return;
+            const rejected = [400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+            phase = rejected ? "idle" : "unconfirmed";
+            showToast(rejected ? errorText : t('task.operation_unconfirmed'), rejected ? "error" : "warning");
+        } finally {
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            content.removeAttribute("aria-busy");
+            confirmBtn.disabled = phase !== "idle";
+            confirmBtn.textContent = phase === "unconfirmed" ? t('task.operation_pending') : confirmText;
         }
     };
-    
+
     openTaskModal(scope, title, content, { width: width || "350px" });
 }
 
@@ -478,6 +493,7 @@ function _showConfirmDialog({ scope, title, icon, message, description, confirmT
  * 👤 显示接受任务申请确认对话框
  */
 function showAssignConfirmDialog(task, assignee, contentEl, currentUser) {
+    const taskId = task.id;
     _showConfirmDialog({
         scope: taskScopes.get(task),
         title: t('task.choose_assignee'),
@@ -487,61 +503,97 @@ function showAssignConfirmDialog(task, assignee, contentEl, currentUser) {
         confirmText: t('common.confirm'),
         confirmStyle: 'background: #4CAF50',
         errorText: t('task.assign_failed'),
-        onConfirm: async (content) => {
-            if (!taskModalCurrent(content)) return;
-            await api.assignTask(task.id, assignee);
-            if (!taskModalCurrent(content)) return;
+        onConfirm: () => api.assignTask(taskId, assignee),
+        onSuccess: async (content) => {
             showToast(t('task.assign_success'), "success");
             closeTaskModal(content);
-            loadTaskDetail(contentEl.closest("div"), task.id, currentUser);
+            loadTaskDetail(contentEl.closest("div"), taskId, currentUser);
         }
     });
 }
 
+/** 申请与退回文字表单：固定输入快照，未知结果不重新开放写请求。 */
+function bindTaskTextSubmission({ content, taskId, input, button, confirmText, errorText, successText, trimValue, requiredText, submit, onSuccess }) {
+    let phase = "idle";
+    content._cleanup = () => { phase = "closed"; };
+    input.addEventListener("input", () => {
+        if (phase === "idle" && taskModalCurrent(content)) input.removeAttribute("aria-invalid");
+    });
+    button.onclick = async () => {
+        if (phase !== "idle" || !taskModalCurrent(content)) return;
+        const value = trimValue ? input.value.trim() : input.value;
+        if (requiredText && !value) {
+            input.setAttribute("aria-invalid", "true");
+            input.focus();
+            showToast(requiredText, "warning");
+            return;
+        }
+        if (typeof taskId !== "string" || !taskId.trim()) {
+            showToast(errorText, "error");
+            return;
+        }
+        phase = "submitting";
+        button.disabled = true;
+        input.readOnly = true;
+        button.textContent = `⏳ ${t('common.submitting')}...`;
+        content.setAttribute("aria-busy", "true");
+        try {
+            const result = await submit(taskId, value);
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            if (result?.status !== "success") throw new Error("Unconfirmed task text submission");
+            phase = "committed";
+            showToast(successText, "success");
+            closeTaskModal(content);
+            await onSuccess();
+        } catch (err) {
+            if (!taskModalCurrent(content) || phase === "closed" || phase === "committed") return;
+            const rejected = [400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+            phase = rejected ? "idle" : "unconfirmed";
+            showToast(rejected ? errorText : t('task.operation_unconfirmed'), rejected ? "error" : "warning");
+        } finally {
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            content.removeAttribute("aria-busy");
+            button.disabled = phase !== "idle";
+            input.readOnly = phase !== "idle";
+            button.textContent = phase === "unconfirmed" ? t('task.operation_pending') : confirmText;
+        }
+    };
+}
+
 /**
  * 🙋 显示申请接单对话框
  */
 function showApplyDialog(task, currentUser) {
+    const taskId = task.id;
     const content = document.createElement("div");
     content.style.color = "#ccc";
     content.innerHTML = `
         <div style="margin-bottom: 15px;">
-            <div style="color: #888; font-size: 12px; margin-bottom: 8px;">${t('task.apply_message_prompt')}</div>
+            <label for="apply-message" style="display: block; color: #888; font-size: 12px; margin-bottom: 8px;">${t('task.apply_message_prompt')}</label>
             <textarea id="apply-message" rows="4" placeholder="${t('task.apply_message_placeholder')}" style="width: 100%; padding: 10px; background: var(--comfy-input-bg); border: 1px solid #444; border-radius: 6px; color: #fff; resize: none; box-sizing: border-box; font-size: 13px;"></textarea>
         </div>
         <div style="display: flex; gap: 10px;">
-            <button id="apply-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
-            <button id="apply-confirm" style="flex: 1; background: #FF9800; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('common.confirm_submit')}</button>
+            <button type="button" id="apply-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
+            <button type="button" id="apply-confirm" style="flex: 1; background: #FF9800; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('common.confirm_submit')}</button>
         </div>
     `;
     
-    content.querySelector("#apply-cancel").onclick = () => closeTaskModal(content);
-    
-    content.querySelector("#apply-confirm").onclick = async () => {
-        const message = content.querySelector("#apply-message").value;
-        const confirmBtn = content.querySelector("#apply-confirm");
-        confirmBtn.disabled = true;
-        confirmBtn.textContent = `⏳ ${t('common.submitting')}...`;
-        
-        try {
-            if (!taskModalCurrent(content)) return;
-            await api.applyTask(task.id, message);
-            if (!taskModalCurrent(content)) return;
-            showToast(t('task.apply_success'), "success");
-            closeTaskModal(content);
-            // 重新加载任务详情
+    content.querySelector("#apply-cancel").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+    bindTaskTextSubmission({
+        content, taskId,
+        input: content.querySelector("#apply-message"),
+        button: content.querySelector("#apply-confirm"),
+        confirmText: t('common.confirm_submit'), errorText: t('task.apply_failed'), successText: t('task.apply_success'),
+        trimValue: false, requiredText: null,
+        submit: (id, value) => api.applyTask(id, value),
+        onSuccess: () => {
             const container = taskScopes.get(task)?.root;
-            if (container && currentUser) {
-                loadTaskDetail(container, task.id, currentUser);
-            }
-        } catch (err) {
-            if (!taskModalCurrent(content)) return;
-            showToast(t('task.apply_failed'), "error");
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = t('common.confirm_submit');
+            if (container && currentUser) return loadTaskDetail(container, taskId, currentUser);
         }
-    };
-    
+    });
+
     openTaskModal(taskScopes.get(task), t('task.apply_task'), content, { width: "400px" });
 }
 
@@ -549,6 +601,7 @@ function showApplyDialog(task, currentUser) {
  * ↩️ 显示撤回申请确认对话框
  */
 function showCancelApplyConfirmDialog(task, currentUser) {
+    const taskId = task.id;
     _showConfirmDialog({
         scope: taskScopes.get(task),
         title: t('task.cancel_apply'),
@@ -558,15 +611,13 @@ function showCancelApplyConfirmDialog(task, currentUser) {
         confirmText: t('common.confirm'),
         confirmStyle: 'background: #FF9800',
         errorText: t('task.cancel_apply_failed'),
-        onConfirm: async (content) => {
-            if (!taskModalCurrent(content)) return;
-            await api.cancelApplyTask(task.id);
-            if (!taskModalCurrent(content)) return;
+        onConfirm: () => api.cancelApplyTask(taskId),
+        onSuccess: async (content) => {
             showToast(t('task.apply_cancelled'), "success");
             closeTaskModal(content);
             const container = taskScopes.get(task)?.root;
             if (container && currentUser) {
-                loadTaskDetail(container, task.id, currentUser);
+                loadTaskDetail(container, taskId, currentUser);
             }
         }
     });
@@ -576,6 +627,7 @@ function showCancelApplyConfirmDialog(task, currentUser) {
  * ❌ 显示取消任务确认对话框
  */
 function showCancelTaskConfirmDialog(task) {
+    const taskId = task.id;
     _showConfirmDialog({
         scope: taskScopes.get(task),
         title: t('task.cancel_task'),
@@ -586,10 +638,9 @@ function showCancelTaskConfirmDialog(task) {
         confirmStyle: 'background: #F44336',
         loadingText: `⏳ ${t('common.cancelling')}...`,
         errorText: t('task.cancel_task_failed'),
-        onConfirm: async (content) => {
-            if (!taskModalCurrent(content)) return;
-            await api.cancelTask(task.id);
-            if (!taskModalCurrent(content)) return;
+        onConfirm: () => api.cancelTask(taskId),
+        validateResult: result => result?.status === "success" && Number.isSafeInteger(result.refunded_amount) && result.refunded_amount >= 0,
+        onSuccess: async (content) => {
             showToast(t('task.task_cancelled'), "success");
             closeTaskModal(content);
             window.dispatchEvent(new CustomEvent("comfy-route-back"));
@@ -601,6 +652,7 @@ function showCancelTaskConfirmDialog(task) {
  * ✅ 显示验收通过确认对话框
  */
 function showAcceptConfirmDialog(task, currentUser) {
+    const taskId = task.id;
     _showConfirmDialog({
         scope: taskScopes.get(task),
         title: t('task.accept_work'),
@@ -610,15 +662,13 @@ function showAcceptConfirmDialog(task, currentUser) {
         confirmText: t('task.accept_work'),
         confirmStyle: 'background: #4CAF50',
         errorText: t('common.operation_failed'),
-        onConfirm: async (content) => {
-            if (!taskModalCurrent(content)) return;
-            await api.acceptTask(task.id, true);
-            if (!taskModalCurrent(content)) return;
+        onConfirm: () => api.acceptTask(taskId, true),
+        onSuccess: async (content) => {
             showToast(t('task.accept_success'), "success");
             closeTaskModal(content);
             const container = taskScopes.get(task)?.root;
             if (container && currentUser) {
-                loadTaskDetail(container, task.id, currentUser);
+                loadTaskDetail(container, taskId, currentUser);
             }
         }
     });
@@ -628,51 +678,36 @@ function showAcceptConfirmDialog(task, currentUser) {
  * ❌ 显示验收拒绝对话框
  */
 function showRejectDialog(task, currentUser) {
+    const taskId = task.id;
     const content = document.createElement("div");
     content.style.color = "#ccc";
     content.innerHTML = `
         <div style="margin-bottom: 15px;">
-            <div style="color: #888; font-size: 12px; margin-bottom: 8px;">${t('task.reject_reason_prompt')}</div>
-            <textarea id="reject-feedback" rows="4" placeholder="${t('task.reject_reason_placeholder')}" style="width: 100%; padding: 10px; background: var(--comfy-input-bg); border: 1px solid #444; border-radius: 6px; color: #fff; resize: none; box-sizing: border-box; font-size: 13px;"></textarea>
+            <label for="reject-feedback" style="display: block; color: #888; font-size: 12px; margin-bottom: 8px;">${t('task.reject_reason_prompt')}</label>
+            <textarea aria-required="true" id="reject-feedback" rows="4" placeholder="${t('task.reject_reason_placeholder')}" style="width: 100%; padding: 10px; background: var(--comfy-input-bg); border: 1px solid #444; border-radius: 6px; color: #fff; resize: none; box-sizing: border-box; font-size: 13px;"></textarea>
         </div>
         <div style="display: flex; gap: 10px;">
-            <button id="reject-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
-            <button id="reject-confirm" style="flex: 1; background: #F44336; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('task.reject_work')}</button>
+            <button type="button" id="reject-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
+            <button type="button" id="reject-confirm" style="flex: 1; background: #F44336; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('task.reject_work')}</button>
         </div>
     `;
     
-    content.querySelector("#reject-cancel").onclick = () => closeTaskModal(content);
-    
-    content.querySelector("#reject-confirm").onclick = async () => {
-        const feedback = content.querySelector("#reject-feedback").value.trim();
-        if (!feedback) {
-            showToast(t('task.reject_reason_required'), "warning");
-            return;
-        }
-        
-        const confirmBtn = content.querySelector("#reject-confirm");
-        confirmBtn.disabled = true;
-        confirmBtn.textContent = `⏳ ${t('common.submitting')}...`;
-        
-        try {
-            if (!taskModalCurrent(content)) return;
-            await api.acceptTask(task.id, false, feedback);
-            if (!taskModalCurrent(content)) return;
-            showToast(t('task.work_returned'), "success");
-            closeTaskModal(content);
-            // 重新加载任务详情
+    content.querySelector("#reject-cancel").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+    bindTaskTextSubmission({
+        content, taskId,
+        input: content.querySelector("#reject-feedback"),
+        button: content.querySelector("#reject-confirm"),
+        confirmText: t('task.reject_work'), errorText: t('common.operation_failed'), successText: t('task.work_returned'),
+        trimValue: true, requiredText: t('task.reject_reason_required'),
+        submit: (id, value) => api.acceptTask(id, false, value),
+        onSuccess: () => {
             const container = taskScopes.get(task)?.root;
-            if (container && currentUser) {
-                loadTaskDetail(container, task.id, currentUser);
-            }
-        } catch (err) {
-            if (!taskModalCurrent(content)) return;
-            showToast(t('common.operation_failed'), "error");
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = t('task.reject_work');
+            if (container && currentUser) return loadTaskDetail(container, taskId, currentUser);
         }
-    };
-    
+    });
+
     openTaskModal(taskScopes.get(task), t('task.reject_work'), content, { width: "400px" });
 }
 
@@ -680,7 +715,10 @@ function showRejectDialog(task, currentUser) {
  * 🗑️ 显示删除评论确认对话框
  */
 function showDeleteCommentConfirmDialog(taskId, comment, container, currentUser) {
+    const commentId = comment.id;
+    let phase = "idle";
     const content = document.createElement("div");
+    content._cleanup = () => { phase = "closed"; };
     content.style.color = "#ccc";
     content.innerHTML = `
         <div style="text-align: center;">
@@ -688,34 +726,43 @@ function showDeleteCommentConfirmDialog(taskId, comment, container, currentUser)
             <div style="color: #fff; font-size: 14px; margin-bottom: 8px;">${t('post.delete_comment_confirm')}</div>
             <div style="color: #888; font-size: 12px; margin-bottom: 20px;">${t('post.delete_comment_warning')}</div>
             <div style="display: flex; gap: 10px;">
-                <button id="delete-comment-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
-                <button id="delete-comment-confirm" style="flex: 1; background: #F44336; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('common.delete')}</button>
+                <button type="button" id="delete-comment-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
+                <button type="button" id="delete-comment-confirm" style="flex: 1; background: #F44336; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('common.delete')}</button>
             </div>
         </div>
     `;
     
-    content.querySelector("#delete-comment-cancel").onclick = () => closeTaskModal(content);
-    
-    content.querySelector("#delete-comment-confirm").onclick = async () => {
-        const confirmBtn = content.querySelector("#delete-comment-confirm");
+    content.querySelector("#delete-comment-cancel").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+    const confirmBtn = content.querySelector("#delete-comment-confirm");
+    confirmBtn.onclick = async () => {
+        if (phase !== "idle" || !taskModalCurrent(content)) return;
+        phase = "submitting";
         confirmBtn.disabled = true;
-        confirmBtn.textContent = `⏳ ${t('common.deleting')}...`;
-        
+        confirmBtn.textContent = t('common.deleting');
+        content.setAttribute("aria-busy", "true");
         try {
-            if (!taskModalCurrent(content)) return;
-            await api.deleteComment(taskId, comment.id);
-            if (!taskModalCurrent(content)) return;
+            const result = await api.deleteComment(taskId, commentId);
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            if (result?.status !== "success") throw new Error("Unconfirmed task comment deletion");
+            phase = "committed";
             showToast(t('post.delete_comment_success'), "success");
             closeTaskModal(content);
-            loadTaskComments(container, taskId, currentUser);
+            await loadTaskComments(container, taskId, currentUser);
         } catch (err) {
-            if (!taskModalCurrent(content)) return;
-            showToast(t('post.delete_comment_failed') + ": " + err.message, "error");
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = t('common.delete');
+            if (!taskModalCurrent(content) || phase === "closed" || phase === "committed") return;
+            const rejected = [400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+            phase = rejected ? "idle" : "unconfirmed";
+            showToast(t(rejected ? 'post.delete_comment_failed' : 'task.comment_unconfirmed'), rejected ? "error" : "warning");
+        } finally {
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            content.removeAttribute("aria-busy");
+            confirmBtn.disabled = phase !== "idle";
+            confirmBtn.textContent = t(phase === "unconfirmed" ? 'task.comment_pending' : 'common.delete');
         }
     };
-    
+
     openTaskModal(container._taskScope, t('common.delete'), content, { width: "350px" });
 }
 
@@ -853,87 +900,97 @@ function bindActionEvents(container, task, currentUser) {
  * 📤 显示提交成果对话框
  */
 function showSubmitDialog(task, currentUser) {
+    const taskId = task.id;
+    let phase = "idle";
     const content = document.createElement("div");
+    content._cleanup = () => { phase = "closed"; };
     content.style.color = "#ccc";
     content.innerHTML = `
         <div style="margin-bottom: 15px;">
-            <label style="display: block; color: #ccc; font-size: 13px; margin-bottom: 5px;">${t('task.deliverable_images')} *</label>
-            <input type="file" id="deliverable-files" multiple accept="image/*" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; border-radius: 6px; color: #fff;">
-            <div style="font-size: 11px; color: #888; margin-top: 4px;">${t('task.support_multiple_images')}</div>
+            <label for="deliverable-files" style="display: block; color: #ccc; font-size: 13px; margin-bottom: 5px;">${t('task.deliverable_images')} <span aria-hidden="true">*</span></label>
+            <input type="file" aria-required="true" aria-describedby="deliverable-hint" id="deliverable-files" multiple accept="image/*" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; border-radius: 6px; color: #fff;">
+            <div id="deliverable-hint" style="font-size: 11px; color: #888; margin-top: 4px;">${t('task.support_multiple_images')}</div>
         </div>
         
         <div style="margin-bottom: 20px;">
-            <label style="display: block; color: #ccc; font-size: 13px; margin-bottom: 5px;">${t('task.note_optional')}</label>
+            <label for="submit-note" style="display: block; color: #ccc; font-size: 13px; margin-bottom: 5px;">${t('task.note_optional')}</label>
             <textarea id="submit-note" rows="3" placeholder="${t('task.note_placeholder')}" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; border-radius: 6px; color: #fff; resize: none; box-sizing: border-box;"></textarea>
         </div>
         
         <div style="display: flex; gap: 10px;">
-            <button id="btn-cancel-modal" style="flex: 1; padding: 10px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
-            <button id="btn-confirm-submit" style="flex: 1; padding: 10px; background: #4CAF50; border: none; color: #fff; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('common.confirm_submit')}</button>
+            <button type="button" id="btn-cancel-modal" style="flex: 1; padding: 10px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
+            <button type="button" id="btn-confirm-submit" style="flex: 1; padding: 10px; background: #4CAF50; border: none; color: #fff; border-radius: 6px; cursor: pointer; font-weight: bold;">${t('common.confirm_submit')}</button>
         </div>
     `;
     
-    content.querySelector("#btn-cancel-modal").onclick = () => closeTaskModal(content);
-    
-    content.querySelector("#btn-confirm-submit").onclick = async () => {
-        const files = content.querySelector("#deliverable-files").files;
-        const note = content.querySelector("#submit-note").value;
-        
-        if (!files || files.length === 0) {
+    content.querySelector("#btn-cancel-modal").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+    const filesInput = content.querySelector("#deliverable-files");
+    const noteInput = content.querySelector("#submit-note");
+    const confirmBtn = content.querySelector("#btn-confirm-submit");
+    filesInput.addEventListener("change", () => {
+        if (phase === "idle" && taskModalCurrent(content)) filesInput.removeAttribute("aria-invalid");
+    });
+    confirmBtn.onclick = async () => {
+        if (phase !== "idle" || !taskModalCurrent(content)) return;
+        const files = Array.from(filesInput.files || []);
+        const note = noteInput.value;
+        if (!files.length) {
+            filesInput.setAttribute("aria-invalid", "true");
+            filesInput.focus();
             showToast(t('task.please_upload_deliverables'), "warning");
             return;
         }
-        
+        if (typeof taskId !== "string" || !taskId.trim()) {
+            showToast(t('task.submit_failed'), "error");
+            return;
+        }
+        phase = "submitting";
+        filesInput.disabled = confirmBtn.disabled = true;
+        noteInput.readOnly = true;
+        content.setAttribute("aria-busy", "true");
+        let saveAttempted = false;
         try {
-            const confirmBtn = content.querySelector("#btn-confirm-submit");
-            confirmBtn.disabled = true;
-            confirmBtn.textContent = `⏳ ${t('common.uploading')}...`;
-            
-            // 上传交付图片
             const deliverables = [];
             for (let i = 0; i < files.length; i++) {
                 confirmBtn.textContent = `⏳ ${t('common.upload_progress', { current: i + 1, total: files.length })}...`;
-                try {
-                    if (!taskModalCurrent(content)) return;
-                    const processedFile = await compressImageForUpload(files[i]);
-                    if (!taskModalCurrent(content)) return;
-                    const res = await api.uploadFile(processedFile, "task");
-                    if (!taskModalCurrent(content)) return;
-                    deliverables.push(res.url);
-                } catch (uploadErr) {
-                    console.error("图片上传失败:", uploadErr);
+                if (!taskModalCurrent(content) || phase === "closed") return;
+                const processedFile = await compressImageForUpload(files[i]);
+                if (!taskModalCurrent(content) || phase === "closed") return;
+                const response = await api.uploadFile(processedFile, "task");
+                if (!taskModalCurrent(content) || phase === "closed") return;
+                if (response?.status !== "success" || typeof response.url !== "string" || !response.url.trim()) {
+                    throw new Error("Unconfirmed task image upload");
                 }
+                deliverables.push(response.url);
             }
-            
-            if (deliverables.length === 0) {
-                showToast(t('task.upload_failed_retry'), "error");
-                confirmBtn.disabled = false;
-                confirmBtn.textContent = t('common.confirm_submit');
-                return;
-            }
-            
-            // 提交成果
             confirmBtn.textContent = `⏳ ${t('common.submitting')}...`;
-            if (!taskModalCurrent(content)) return;
-            await api.submitTask(task.id, deliverables, note || null);
-            if (!taskModalCurrent(content)) return;
-            
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            saveAttempted = true;
+            const result = await api.submitTask(taskId, deliverables, note || null);
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            if (result?.status !== "success") throw new Error("Unconfirmed task delivery");
+            phase = "committed";
             showToast(t('task.submit_success_waiting'), "success");
             closeTaskModal(content);
-            // 重新加载任务详情
             const container = taskScopes.get(task)?.root;
-            if (container && currentUser) {
-                loadTaskDetail(container, task.id, currentUser);
-            }
+            if (container && currentUser) await loadTaskDetail(container, taskId, currentUser);
         } catch (err) {
-            if (!taskModalCurrent(content)) return;
-            showToast(t('task.submit_failed'), "error");
-            const confirmBtn = content.querySelector("#btn-confirm-submit");
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = t('common.confirm_submit');
+            if (!taskModalCurrent(content) || phase === "closed" || phase === "committed") return;
+            const unknown = saveAttempted && ![400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+            phase = unknown ? "unconfirmed" : "idle";
+            showToast(t(unknown ? 'task.operation_unconfirmed' : (saveAttempted ? 'task.submit_failed' : 'task.upload_failed_retry')),
+                unknown ? "warning" : "error");
+        } finally {
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            content.removeAttribute("aria-busy");
+            filesInput.disabled = confirmBtn.disabled = phase !== "idle";
+            noteInput.readOnly = phase !== "idle";
+            confirmBtn.textContent = t(phase === "unconfirmed" ? 'task.operation_pending' : 'common.confirm_submit');
         }
     };
-    
+
     openTaskModal(taskScopes.get(task), `📤 ${t('task.submit_work')}`, content, { width: "450px" });
 }
 
@@ -982,45 +1039,63 @@ function bindTaskInteractionEvents(container, task, currentUser) {
  * 🎁 显示任务打赏对话框
  */
 function showTaskTipDialog(task, currentUser, container) {
+    const taskId = task.id;
+    let phase = "idle";
     const content = document.createElement("div");
+    content._cleanup = () => { phase = "closed"; };
     content.style.color = "#ccc";
     content.innerHTML = `
         <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 15px;">
-            <button class="tip-amount" data-amount="10" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer;">10 ${t('task.points')}</button>
-            <button class="tip-amount" data-amount="50" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer;">50 ${t('task.points')}</button>
-            <button class="tip-amount" data-amount="100" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer;">100 ${t('task.points')}</button>
-            <button class="tip-amount" data-amount="500" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer;">500 ${t('task.points')}</button>
+            ${TASK_LIMITS.TIP_AMOUNTS.map(amount => `<button type="button" class="tip-amount" data-amount="${amount}" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px 20px; border-radius: 6px; cursor: pointer;">${amount} ${t('task.points')}</button>`).join("")}
         </div>
         <div style="display: flex; gap: 10px;">
-            <button id="tip-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
+            <button type="button" id="tip-cancel" style="flex: 1; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer;">${t('common.cancel')}</button>
         </div>
     `;
 
     openTaskModal(taskScopes.get(task), `🎁 ${t('post.tip_dialog_title')}`, content, { width: "300px" });
 
-    // 取消按钮
-    content.querySelector("#tip-cancel").onclick = () => closeTaskModal(content);
-
-    // 打赏金额按钮
-    content.querySelectorAll(".tip-amount").forEach(btn => {
+    content.querySelector("#tip-cancel").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+    const amountButtons = Array.from(content.querySelectorAll(".tip-amount"));
+    amountButtons.forEach(btn => {
+        const preset = btn.dataset.amount;
         btn.onclick = async () => {
-            const amount = parseInt(btn.dataset.amount);
+            if (phase !== "idle" || !taskModalCurrent(content)) return;
+            const rawAmount = btn.dataset.amount;
+            const amount = typeof rawAmount === "string" && /^\d+$/.test(rawAmount) ? Number(rawAmount) : NaN;
+            if (rawAmount !== preset || !Number.isSafeInteger(amount) || !TASK_LIMITS.TIP_AMOUNTS.includes(amount)) {
+                showToast(t('tip.integer_amount'), "warning");
+                return;
+            }
+            if (typeof taskId !== "string" || !taskId.trim()) {
+                showToast(t('post.tip_failed'), "error");
+                return;
+            }
+            phase = "submitting";
+            amountButtons.forEach(button => { button.disabled = true; });
+            content.setAttribute("aria-busy", "true");
             try {
-                if (!taskModalCurrent(content)) return;
-                await api.tipTask(task.id, amount, false);
-                if (!taskModalCurrent(content)) return;
+                const result = await api.tipTask(taskId, amount, false);
+                if (!taskModalCurrent(content) || phase === "closed") return;
+                if (result?.status !== "success") throw new Error("Unconfirmed task tip");
+                phase = "committed";
                 showToast(t('post.tip_success', { amount }), "success");
                 closeTaskModal(content);
-                // 刷新页面
-                loadTaskDetail(container.closest("div"), task.id, currentUser);
-            } catch (err) {
-                if (!taskModalCurrent(content)) return;
-                showToast(t('post.tip_failed') + ": " + err.message, "error");
+                await loadTaskDetail(container.closest("div"), taskId, currentUser);
+            } catch (_) {
+                if (!taskModalCurrent(content) || phase === "closed" || phase === "committed") return;
+                phase = "unconfirmed";
+                showToast(t('tip.unknown_result'), "warning");
+            } finally {
+                if (!taskModalCurrent(content) || phase === "closed") return;
+                content.removeAttribute("aria-busy");
+                amountButtons.forEach(button => { button.disabled = phase !== "idle"; });
             }
         };
     });
 }
-
 /**
  * 🎁 渲染打赏榜单 - 使用公共工具函数
  */
@@ -1044,16 +1119,36 @@ function _renderCommentAvatar(name, avatarUrl) {
  */
 async function loadTaskComments(container, taskId, currentUser) {
     const commentsList = container.querySelector("#comments-list");
-    const scope = container._taskScope;
-    const isCurrent = () => (!scope || scope.isCurrent()) && commentsList?.isConnected
-        && container.querySelector("#comments-list") === commentsList;
-    if (!isCurrent()) return;
     const commentInput = container.querySelector("#comment-input");
     const sendBtn = container.querySelector("#btn-send-comment");
-    
+    const scope = container._taskScope;
+    const account = typeof currentUser === "string" ? currentUser : currentUser?.account;
+    let state = taskCommentStates.get(container);
+    if (!state || state.list !== commentsList || state.input !== commentInput || state.button !== sendBtn
+        || state.taskId !== taskId || state.account !== account || state.scope !== scope) {
+        state?.dispose();
+        state = { list: commentsList, input: commentInput, button: sendBtn, taskId, account, scope, phase: "idle", generation: 0, bound: false };
+        state.dispose = () => {
+            state.phase = "closed";
+            state.release?.();
+            if (commentInput) { commentInput.value = ""; commentInput.readOnly = true; }
+            if (sendBtn) { sendBtn.disabled = true; sendBtn.removeAttribute("aria-busy"); }
+            if (taskCommentStates.get(container) === state) taskCommentStates.delete(container);
+        };
+        taskCommentStates.set(container, state);
+        state.release = scope?.addCleanup?.(state.dispose);
+    }
+    const isCurrent = () => state.phase !== "closed" && taskCommentStates.get(container) === state
+        && (!scope || scope.isCurrent()) && commentsList?.isConnected
+        && container.querySelector("#comments-list") === commentsList
+        && container.querySelector("#comment-input") === commentInput && container.querySelector("#btn-send-comment") === sendBtn;
+    if (!isCurrent()) return;
+    const generation = ++state.generation;
+    const readCurrent = () => isCurrent() && generation === state.generation;
+
     try {
         const res = await api.getTaskComments(taskId, { componentId: scope?.componentId, noCache: true, timeout: API.BACKGROUND_TIMEOUT, retries: API.BACKGROUND_RETRIES });
-        if (!isCurrent()) return;
+        if (!readCurrent()) return;
         let comments = requireListResponseData(res);
         comments = proxyImages(comments);
         
@@ -1114,6 +1209,7 @@ async function loadTaskComments(container, taskId, currentUser) {
             // 绑定删除评论按钮事件
             commentsList.querySelectorAll(".btn-delete-comment").forEach(btn => {
                 btn.onclick = () => {
+                    if (!readCurrent() || !btn.isConnected) return;
                     const idx = parseInt(btn.dataset.idx);
                     const comment = comments[idx];
                     if (!comment) return;
@@ -1122,7 +1218,7 @@ async function loadTaskComments(container, taskId, currentUser) {
             });
         }
     } catch (err) {
-        if (!isCurrent()) return;
+        if (!readCurrent()) return;
         commentsList.innerHTML = `
             <div style="text-align: center; padding: 20px; color: #F44336; font-size: 12px;">
                 ${t('post.comment_load_failed')}
@@ -1130,48 +1226,64 @@ async function loadTaskComments(container, taskId, currentUser) {
         `;
     }
     
-    // 发送评论
-    if (sendBtn) {
+    // 同一组输入/按钮只绑定一次；列表刷新不重新开放在途或未知提交。
+    if (sendBtn && commentInput && !state.bound && isCurrent()) {
+        state.bound = true;
+        sendBtn.disabled = false;
+        sendBtn.removeAttribute("aria-busy");
+        sendBtn.textContent = t('common.send');
+        commentInput.readOnly = false;
+        commentInput.removeAttribute("aria-invalid");
+        commentInput.oninput = () => {
+            if (state.phase === "idle" && isCurrent() && commentInput.value.trim()) commentInput.removeAttribute("aria-invalid");
+        };
         sendBtn.onclick = async () => {
-            if (!isCurrent()) return;
-            if (!currentUser) {
-                showToast(t('auth.login_required'), "warning");
-                return;
-            }
-            const content = commentInput.value.trim();
-            if (!content) {
+            if (state.phase !== "idle" || !isCurrent()) return;
+            if (!account) { showToast(t('auth.login_required'), "warning"); return; }
+            const value = commentInput.value.trim();
+            if (!value) {
+                commentInput.setAttribute("aria-invalid", "true");
+                commentInput.focus();
                 showToast(t('post.comment_required'), "warning");
                 return;
             }
+            commentInput.removeAttribute("aria-invalid");
+            state.phase = "submitting";
+            sendBtn.disabled = true;
+            sendBtn.setAttribute("aria-busy", "true");
+            commentInput.readOnly = true;
+            sendBtn.textContent = t('post.comment_sending');
             try {
-                sendBtn.disabled = true;
-                sendBtn.textContent = t('post.comment_sending');
-                await api.addTaskComment(taskId, content);
+                const result = await api.addTaskComment(taskId, value);
                 if (!isCurrent()) return;
+                if (result?.status !== "success" || typeof result.data?.id !== "string" || !result.data.id.trim()
+                    || result.data.author !== account || result.data.content !== value) throw new Error("Unconfirmed task comment");
+                state.phase = "committed";
                 commentInput.value = "";
                 showToast(t('post.comment_success'), "success");
-                loadTaskComments(container, taskId, currentUser);
+                await loadTaskComments(container, taskId, currentUser);
+                if (isCurrent()) state.phase = "idle";
             } catch (err) {
-                if (isCurrent()) showToast(t('post.comment_failed'), "error");
+                if (!isCurrent() || state.phase === "committed") return;
+                const rejected = [400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+                state.phase = rejected ? "idle" : "unconfirmed";
+                showToast(t(rejected ? 'post.comment_failed' : 'task.comment_unconfirmed'), rejected ? "error" : "warning");
             } finally {
                 if (!isCurrent()) return;
-                sendBtn.disabled = false;
-                sendBtn.textContent = t('common.send');
+                sendBtn.removeAttribute("aria-busy");
+                sendBtn.disabled = state.phase !== "idle";
+                commentInput.readOnly = state.phase !== "idle";
+                sendBtn.textContent = t(state.phase === "unconfirmed" ? 'task.comment_pending' : 'common.send');
             }
         };
-    }
-    
-    // 回车发送
-    if (commentInput) {
-        commentInput.onkeydown = (e) => {
-            if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                sendBtn?.click();
+        commentInput.onkeydown = event => {
+            if (event.key === "Enter" && !event.shiftKey && !event.isComposing && event.keyCode !== 229 && !event.repeat) {
+                event.preventDefault();
+                sendBtn.click();
             }
         };
     }
 }
-
 /**
  * 🕐 格式化时间
  */
@@ -1201,7 +1313,10 @@ function formatDeadline(deadline) {
  * 🗑️ 显示删除任务确认对话框
  */
 function showDeleteTaskConfirm(task, contentEl) {
+    const taskId = task.id;
+    let phase = "idle";
     const content = document.createElement("div");
+    content._cleanup = () => { phase = "closed"; };
     content.style.color = "#ccc";
     content.innerHTML = `
         <div style="text-align: center;">
@@ -1215,30 +1330,44 @@ function showDeleteTaskConfirm(task, contentEl) {
         </div>
     `;
     
-    content.querySelector("#delete-cancel").onclick = () => closeTaskModal(content);
-    
-    content.querySelector("#delete-confirm").onclick = async () => {
+    content.querySelector("#delete-cancel").onclick = () => {
+        if (taskModalCurrent(content)) closeTaskModal(content);
+    };
+
+    const confirmBtn = content.querySelector("#delete-confirm");
+    confirmBtn.onclick = async () => {
+        if (phase !== "idle" || !taskModalCurrent(content)) return;
+        if (typeof taskId !== "string" || !taskId.trim()) {
+            showToast(t('task.delete_failed'), "error");
+            return;
+        }
+        phase = "submitting";
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = t('common.deleting');
+        content.setAttribute("aria-busy", "true");
         try {
-            const confirmBtn = content.querySelector("#delete-confirm");
-            confirmBtn.disabled = true;
-            confirmBtn.textContent = t('common.deleting');
-            
-            if (!taskModalCurrent(content)) return;
-            await api.cancelTask(task.id);
-            if (!taskModalCurrent(content)) return;
+            const result = await api.cancelTask(taskId);
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            if (result?.status !== "success" || !Number.isSafeInteger(result.refunded_amount) || result.refunded_amount < 0) {
+                throw new Error("Unconfirmed task cancellation");
+            }
+            phase = "committed";
             showToast(t('task.delete_success'), "success");
             closeTaskModal(content);
-            
             window.dispatchEvent(new CustomEvent("comfy-route-back"));
         } catch (err) {
-            if (!taskModalCurrent(content)) return;
-            showToast(t('task.delete_failed'), "error");
-            const confirmBtn = content.querySelector("#delete-confirm");
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = t('common.delete');
+            if (!taskModalCurrent(content) || phase === "closed" || phase === "committed") return;
+            const rejected = [400, 401, 403, 404, 409, 422, 429].includes(err?.status);
+            phase = rejected ? "idle" : "unconfirmed";
+            showToast(t(rejected ? 'task.delete_failed' : 'task.delete_unconfirmed'), rejected ? "error" : "warning");
+        } finally {
+            if (!taskModalCurrent(content) || phase === "closed") return;
+            content.removeAttribute("aria-busy");
+            confirmBtn.disabled = phase !== "idle";
+            confirmBtn.textContent = t(phase === "unconfirmed" ? 'task.delete_pending' : 'common.delete');
         }
     };
-    
+
     openTaskModal(taskScopes.get(task), t('common.delete'), content, { width: "300px" });
 }
 
@@ -1247,26 +1376,26 @@ function showDeleteTaskConfirm(task, contentEl) {
  */
 function showDisputeDialog(task, currentUser) {
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.className = "task-dispute";
     content.innerHTML = `
-        <div style="margin-bottom: 16px;">
-            <label style="display: block; color: #ccc; margin-bottom: 8px; font-size: 14px;">${t('dispute.reason')} <span style="color: #f44;">*</span></label>
-            <textarea id="dispute-reason" placeholder="${t('dispute.reason_placeholder')}" style="width: 100%; height: 120px; background: var(--comfy-input-bg); border: 1px solid #444; border-radius: 8px; color: #fff; padding: 12px; resize: none; box-sizing: border-box; font-size: 14px; line-height: 1.5;"></textarea>
+        <div class="task-dispute__field">
+            <label for="dispute-reason" class="task-dispute__label">${t('dispute.reason')} <span aria-hidden="true" class="task-dispute__required">*</span></label>
+            <textarea id="dispute-reason" aria-required="true" placeholder="${t('dispute.reason_placeholder')}" class="task-dispute__reason"></textarea>
         </div>
         
-        <div style="margin-bottom: 16px;">
-            <label style="display: block; color: #ccc; margin-bottom: 8px; font-size: 14px;">${t('dispute.evidence_optional')}</label>
-            <div id="evidence-upload-area" style="border: 2px dashed #444; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; color: #888; transition: all 0.2s;">
+        <div class="task-dispute__field">
+            <label for="evidence-file-input" class="task-dispute__label">${t('dispute.evidence_optional')}</label>
+            <button type="button" id="evidence-upload-area" class="task-dispute__upload">
                 📷 ${t('dispute.click_upload_evidence')}
-            </div>
-            <input type="file" id="evidence-file-input" accept="image/*" multiple style="display: none;">
-            <div id="evidence-preview" style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;"></div>
+            </button>
+            <input type="file" aria-label="${t('dispute.evidence_optional')}" id="evidence-file-input" accept="image/*" multiple class="task-dispute__file">
+            <div id="evidence-preview" class="task-dispute__preview"></div>
         </div>
         
-        <div style="background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.3); border-radius: 8px; padding: 12px; margin-bottom: 16px;">
-            <div style="color: #FF9800; font-size: 13px;">
+        <div class="task-dispute__notice">
+            <div class="task-dispute__notice-copy">
                 ⚠️ ${t('dispute.notice_title')}：
-                <ul style="margin: 8px 0 0 16px; padding: 0; line-height: 1.6;">
+                <ul class="task-dispute__notice-list">
                     <li>${t('dispute.notice_1')}</li>
                     <li>${t('dispute.notice_2')}</li>
                     <li>${t('dispute.notice_3')}</li>
@@ -1274,7 +1403,7 @@ function showDisputeDialog(task, currentUser) {
             </div>
         </div>
         
-        <button id="btn-submit-dispute" style="width: 100%; padding: 14px; background: linear-gradient(135deg, #F44336, #D32F2F); border: none; border-radius: 8px; color: #fff; font-size: 15px; font-weight: bold; cursor: pointer;">
+        <button id="btn-submit-dispute" class="task-dispute__submit">
             ${t('dispute.submit')}
         </button>
     `;
@@ -1284,12 +1413,35 @@ function showDisputeDialog(task, currentUser) {
     const fileInput = content.querySelector("#evidence-file-input");
     const preview = content.querySelector("#evidence-preview");
     const evidenceFiles = [];
+    const previewUrls = new Set();
+    let closed = false, submitting = false;
+    const reasonInput = content.querySelector("#dispute-reason");
+    const submitButton = content.querySelector("#btn-submit-dispute");
+    const setSubmitting = active => {
+        submitting = active;
+        content.setAttribute("aria-busy", String(active));
+        reasonInput.readOnly = active;
+        uploadArea.disabled = active;
+        fileInput.disabled = active;
+        submitButton.disabled = active;
+        preview.querySelectorAll("button").forEach(button => { button.disabled = active; });
+    };
+    reasonInput.addEventListener("input", () => reasonInput.removeAttribute("aria-invalid"));
+    const releasePreviews = () => {
+        for (const url of previewUrls) URL.revokeObjectURL(url);
+        previewUrls.clear();
+    };
+    content._cleanup = () => {
+        if (closed) return;
+        closed = true;
+        releasePreviews();
+        evidenceFiles.length = 0;
+    };
     
-    uploadArea.onclick = () => fileInput.click();
-    uploadArea.onmouseover = () => { uploadArea.style.borderColor = "#2196F3"; uploadArea.style.color = "#2196F3"; };
-    uploadArea.onmouseout = () => { uploadArea.style.borderColor = "#444"; uploadArea.style.color = "#888"; };
+    uploadArea.onclick = () => { if (!closed && !submitting && taskModalCurrent(content)) fileInput.click(); };
     
     fileInput.onchange = (e) => {
+        if (closed || submitting || !taskModalCurrent(content)) return;
         for (const file of e.target.files) {
             if (evidenceFiles.length >= 6) {
                 showToast(t('dispute.max_6_images'), "warning");
@@ -1297,19 +1449,27 @@ function showDisputeDialog(task, currentUser) {
             }
             evidenceFiles.push(file);
         }
+        fileInput.value = "";
         renderPreview();
     };
     
     function renderPreview() {
-        preview.innerHTML = evidenceFiles.map((file, idx) => `
-            <div style="position: relative;">
-                <img src="${URL.createObjectURL(file)}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 6px;">
-                <button data-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; background: #f44; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 18px;">×</button>
+        releasePreviews();
+        if (closed) return;
+        preview.innerHTML = evidenceFiles.map((file, idx) => {
+            const url = URL.createObjectURL(file);
+            previewUrls.add(url);
+            return `
+            <div class="task-dispute__evidence">
+                <img alt="" src="${url}" class="task-dispute__image">
+                <button type="button" aria-label="${escapeHtml(t('dispute.remove_evidence', { index: idx + 1 }))}" data-idx="${idx}" class="task-dispute__remove">×</button>
             </div>
-        `).join("");
+        `;
+        }).join("");
         
         preview.querySelectorAll("button").forEach(btn => {
             btn.onclick = () => {
+                if (closed || submitting || !taskModalCurrent(content)) return;
                 evidenceFiles.splice(parseInt(btn.dataset.idx), 1);
                 renderPreview();
             };
@@ -1317,36 +1477,50 @@ function showDisputeDialog(task, currentUser) {
     }
     
     // 提交申诉
-    content.querySelector("#btn-submit-dispute").onclick = async () => {
-        const reason = content.querySelector("#dispute-reason").value.trim();
+    submitButton.onclick = async () => {
+        if (closed || submitting || !taskModalCurrent(content)) return;
+        const reason = reasonInput.value.trim();
         if (!reason) {
+            reasonInput.setAttribute("aria-invalid", "true");
+            reasonInput.focus();
             showToast(t('dispute.please_enter_reason'), "warning");
             return;
         }
         
-        const btn = content.querySelector("#btn-submit-dispute");
-        btn.disabled = true;
+        reasonInput.removeAttribute("aria-invalid");
+        const files = evidenceFiles.slice();
+        const btn = submitButton;
+        setSubmitting(true);
         btn.textContent = `•• ${t('common.submitting')}...`;
         
         try {
             // 上传证据图片
             const evidenceUrls = [];
-            for (let i = 0; i < evidenceFiles.length; i++) {
-                btn.textContent = `•• ${t('common.upload_image_progress', { current: i + 1, total: evidenceFiles.length })}...`;
+            for (let i = 0; i < files.length; i++) {
+                btn.textContent = `•• ${t('common.upload_image_progress', { current: i + 1, total: files.length })}...`;
                 if (!taskModalCurrent(content)) return;
-                const processedFile = await compressImageForUpload(evidenceFiles[i]);
+                const processedFile = await compressImageForUpload(files[i]);
                 if (!taskModalCurrent(content)) return;
                 const res = await api.uploadFile(processedFile, "dispute");
                 if (!taskModalCurrent(content)) return;
+                if (res?.status !== "success" || typeof res.url !== "string" || !res.url.trim()) {
+                    throw new Error("Invalid evidence upload response");
+                }
                 evidenceUrls.push(res.url);
             }
             
             // 提交申诉
             btn.textContent = `•• ${t('dispute.submitting')}...`;
             if (!taskModalCurrent(content)) return;
-            await api.disputeTask(task.id, reason, evidenceUrls);
+            const response = await api.disputeTask(task.id, reason, evidenceUrls);
             if (!taskModalCurrent(content)) return;
             
+            const dispute = response?.data;
+            if (response?.status !== "success" || typeof dispute?.id !== "string" || !dispute.id.trim()
+                || dispute.task_id !== task.id || dispute.initiator !== currentUser?.account) {
+                throw new Error("Invalid task dispute response");
+            }
+
             showToast(t('dispute.submit_success'), "success");
             closeTaskModal(content);
             // 重新加载任务详情
@@ -1357,8 +1531,9 @@ function showDisputeDialog(task, currentUser) {
         } catch (err) {
             if (!taskModalCurrent(content)) return;
             showToast(t('dispute.submit_failed'), "error");
-            btn.disabled = false;
             btn.textContent = t('dispute.submit');
+        } finally {
+            if (!closed && taskModalCurrent(content)) setSubmitting(false);
         }
     };