Upload 98 files

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

@@ -26,6 +26,39 @@ import { escapeHtml, UI } from "../core/全局配置.js";
 let toastQueue = [];
 let toastObserver = null;
 let toastSizeObserver = null;
+let toastPointer = null;
+let toastPointerListening = false;
+
+function isToastHovered(toast) {
+    if (!toastPointer) return false;
+    const bounds = toast.getBoundingClientRect();
+    return toastPointer.x >= bounds.left && toastPointer.x < bounds.right &&
+        toastPointer.y >= bounds.top && toastPointer.y < bounds.bottom;
+}
+
+function updateToastHover() {
+    const states = toastQueue.map(isToastHovered);
+    toastQueue.forEach((toast, index) => toast._setToastHovered?.(states[index]));
+}
+
+function handleToastPointer(event) {
+    if (event.pointerType === "touch") return;
+    toastPointer = { x: event.clientX, y: event.clientY };
+    updateToastHover();
+}
+
+function clearToastPointer() {
+    toastPointer = null;
+    updateToastHover();
+}
+
+function observeToastPointer() {
+    if (toastPointerListening) return;
+    toastPointerListening = true;
+    document.addEventListener("pointermove", handleToastPointer, { passive: true });
+    document.addEventListener("pointerleave", clearToastPointer);
+    window.addEventListener("blur", clearToastPointer);
+}
 let dialogInstanceId = 0;
 const dialogStack = [];
 
@@ -36,6 +69,7 @@ function repositionToasts() {
         toast.style.top = `${top}px`;
         top += heights[index] + UI.TOAST.GAP;
     });
+    updateToastHover();
 }
 
 function observeToastSize(toast) {
@@ -57,6 +91,7 @@ function releaseToast(toast) {
     toast._previousFocus = null;
     toast._cleanupToastEvents?.();
     toast._cleanupToastEvents = null;
+    toast._setToastHovered = null;
     const index = toastQueue.indexOf(toast);
     if (index > -1) toastQueue.splice(index, 1);
     repositionToasts();
@@ -65,6 +100,11 @@ function releaseToast(toast) {
         toastObserver = null;
         toastSizeObserver?.disconnect();
         toastSizeObserver = null;
+        document.removeEventListener("pointermove", handleToastPointer);
+        document.removeEventListener("pointerleave", clearToastPointer);
+        window.removeEventListener("blur", clearToastPointer);
+        toastPointerListening = false;
+        toastPointer = null;
     }
 }
 
@@ -76,6 +116,17 @@ function observeToastRemoval() {
     toastObserver.observe(document.body, { childList: true });
 }
 
+function reserveToastSlot() {
+    while (toastQueue.length >= UI.TOAST.MAX_VISIBLE) {
+        const candidate = toastQueue.find(toast => !toast.contains(document.activeElement) && !isToastHovered(toast))
+            || toastQueue.find(toast => !toast.contains(document.activeElement));
+        if (!candidate) return false;
+        candidate.remove();
+        releaseToast(candidate);
+    }
+    return true;
+}
+
 /**
  * 显示 Toast 消息提示
  * @param {string} message - 提示内容
@@ -83,6 +134,7 @@ function observeToastRemoval() {
  * @param {number} duration - 显示时长（毫秒），默认3000
  */
 export function showToast(message, type = "info", duration = 3000) {
+    if (!reserveToastSlot()) return;
     const previousFocus = document.activeElement;
     const toast = document.createElement("div");
     const safeType = ["success", "error", "warning", "info"].includes(type) ? type : "info";
@@ -93,7 +145,7 @@ export function showToast(message, type = "info", duration = 3000) {
     const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
     if (reduceMotion) toast.classList.add("comfy-ranking-toast--reduced-motion");
     // 新提示从目标位置上方滑入；关闭后再按当前队列位置重排。
-    toast.style.top = `${UI.TOAST.OFFSET - 30}px`;
+    toast.style.top = `${UI.TOAST.OFFSET + toastQueue.reduce((height, item) => height + item.offsetHeight + UI.TOAST.GAP, 0) - 30}px`;
 
     // 提示文本统一转义：message 常携带昵称/标题/后端报错等用户可控内容，
     // 全库无任何调用方故意向 showToast 传 HTML 标签，故无条件转义不会改变现有显示效果。
@@ -138,22 +190,24 @@ export function showToast(message, type = "info", duration = 3000) {
         deadline = performance.now() + remaining;
         toast._autoCloseTimer = setTimeout(() => closeToast(toast), remaining);
     };
-    const handleEnter = () => { hovered = true; pauseTimer(); };
-    const handleLeave = () => { hovered = false; resumeTimer(); };
+    toast._setToastHovered = value => {
+        if (hovered === value) return;
+        hovered = value;
+        if (hovered) pauseTimer();
+        else resumeTimer();
+    };
     const handleFocusOut = event => {
         if (!toast.contains(event.relatedTarget)) queueMicrotask(resumeTimer);
     };
-    toast.addEventListener("mouseenter", handleEnter);
-    toast.addEventListener("mouseleave", handleLeave);
     toast.addEventListener("focusin", pauseTimer);
     toast.addEventListener("focusout", handleFocusOut);
     toast._cleanupToastEvents = () => {
         closeButton.removeEventListener("click", handleClose);
-        toast.removeEventListener("mouseenter", handleEnter);
-        toast.removeEventListener("mouseleave", handleLeave);
         toast.removeEventListener("focusin", pauseTimer);
         toast.removeEventListener("focusout", handleFocusOut);
     };
+    observeToastPointer();
+    updateToastHover();
     resumeTimer();
 }
 
@@ -502,10 +556,11 @@ export function showRetryDialog(message, retryFn, options = {}) {
 
         let settled = false;
         let retryInProgress = false;
-        let dialogAccessibility;
+        let dialogAccessibility, observer;
         const settle = result => {
             if (settled) return;
             settled = true;
+            observer?.disconnect();
             dialogAccessibility?.cleanup();
             _closeDialog(overlay, box, false, () => {
                 dialogAccessibility?.restoreFocus();
@@ -517,32 +572,42 @@ export function showRetryDialog(message, retryFn, options = {}) {
                 if (!retryInProgress) settle(false);
             }
         );
+        observer = new MutationObserver(() => {
+            if (settled || overlay.isConnected) return;
+            settled = true;
+            observer.disconnect();
+            dialogAccessibility.cleanup();
+            resolve(false);
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
 
         box.querySelector("#ui-btn-cancel").onclick = () => {
             settle(false);
         };
         
         box.querySelector("#ui-btn-retry").onclick = async () => {
+            if (settled || retryInProgress || !overlay.isConnected) return;
             const retryBtn = box.querySelector("#ui-btn-retry");
             retryBtn.innerHTML = `<span class="btn-spinner"></span> ${t('common.retrying')}`;
             retryBtn.disabled = true;
             retryInProgress = true;
+            box.setAttribute("aria-busy", "true");
             
             try {
                 await retryFn();
+                if (settled || !overlay.isConnected) return;
                 settle(true);
-            } catch (error) {
-                // 重试错误可能来自远端或扩展，即使初始提示允许富文本也必须作为纯文本处理
-                const errText = error.message || t('common.retry_failed');
+            } catch {
+                if (settled || !overlay.isConnected) return;
                 const errBox = box.querySelector(".comfy-ranking-dialog__message");
-                if (html) {
-                    errBox.innerHTML = escapeHtml(errText);
-                } else {
-                    errBox.textContent = errText;
-                }
+                errBox.textContent = t('common.retry_failed');
+                errBox.setAttribute("role", "alert");
+            } finally {
+                if (settled || !overlay.isConnected) return;
                 retryBtn.innerHTML = escapeHtml(retryText);
                 retryBtn.disabled = false;
                 retryInProgress = false;
+                box.removeAttribute("aria-busy");
             }
         };
     });

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

@@ -1,643 +1,512 @@
-// 前端页面/components/全局设置组件.js
-// ==========================================
-// ⚙️ 全局设置组件（界面偏好设置）
-// ==========================================
-// 作用：提供全局界面设置入口，控制显示偏好
-// 关联文件：
-//   - 顶部导航组件.js (设置按钮入口)
-//   - 创作者卡片组件.js (背景图显示控制)
-// ==========================================
-
-import { showToast } from "./UI交互提示组件.js";
-import { setLanguage, getLanguage, t } from "./用户体验增强.js";
-import { clearAllCache } from "./性能优化工具.js";
-import { IS_WEB_MODE, getSettings, saveSettings } from "../core/全局配置.js";
-export { getSettings, saveSettings };
-import { getDiskCacheStats, clearDiskCache } from './缓存管理请求.js';
-
-// 🌐 语言选项（双语显示）
-const LANGUAGE_OPTIONS = [
-    { value: 'zh-CN', label: '简体中文 / Simplified Chinese' },
-    { value: 'en-US', label: 'English / 英语' }
-];
-
-/**
- * 📊 格式化文件大小
- */
-function formatSize(bytes) {
-    if (bytes === 0) return '0 B';
-    const units = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log2(bytes) / 10);
-    const unitIndex = Math.min(i, units.length - 1);
-    const size = bytes / Math.pow(1024, unitIndex);
-    return `${size.toFixed(1)} ${units[unitIndex]}`;
-}
-
-/**
- * 📊 获取浏览器缓存统计
- */
-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);
-            if (key && key.startsWith('ComfyRanking_')) {
-                const value = localStorage.getItem(key);
-                if (value) {
-                    totalSize += new Blob([value]).size;
-                    count++;
-                }
-            }
-        }
-    } catch (e) { available = false; }
-    return { count, totalSize, available };
-}
-
-/**
- * ⚙️ 创建设置页面视图
- */
-export function createSettingsView() {
-    const settings = getSettings();
-    
-    const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        color: "#ccc",
-        fontSize: "14px",
-        padding: "0",
-        overflowY: "auto",
-        flex: "1",
-        boxSizing: "border-box"
-    });
-    
-    // 添加开关样式
-    const styleSheet = document.createElement("style");
-    styleSheet.textContent = `
-        .setting-switch {
-            color: inherit;
-            appearance: none;
-            border: 0;
-            padding: 0;
-            position: relative;
-            width: 44px;
-            height: 24px;
-            background: #444;
-            border-radius: 12px;
-            cursor: pointer;
-            transition: 0.3s;
-            flex-shrink: 0;
-        }
-        .setting-switch:focus-visible {
-            outline: 2px solid currentColor;
-            outline-offset: 3px;
-        }
-        .setting-switch.active {
-            background: #4CAF50;
-        }
-        .setting-switch::after {
-            content: '';
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: 20px;
-            height: 20px;
-            background: #fff;
-            border-radius: 50%;
-            transition: 0.3s;
-        }
-        .setting-switch.active::after {
-            left: 22px;
-        }
-        .setting-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 16px;
-            border-bottom: 1px solid var(--border-color, #333);
-            transition: background 0.2s;
-        }
-        .setting-item:hover {
-            background: rgba(255,255,255,0.03);
-        }
-        .setting-select {
-            background: var(--comfy-input-bg);
-            border: 1px solid #444;
-            color: #fff;
-            padding: 8px 12px;
-            border-radius: 6px;
-            font-size: 13px;
-            cursor: pointer;
-            min-width: 200px;
-            outline: none;
-            transition: 0.2s;
-        }
-        .setting-select:hover {
-            border-color: #4CAF50;
-        }
-        .setting-select:focus {
-            border-color: #4CAF50;
-            box-shadow: 0 0 0 2px rgba(76,175,80,0.2);
-        }
-        .setting-select option {
-            background: var(--comfy-input-bg);
-            color: #fff;
-            padding: 8px;
-        }
-        .setting-number-input {
-            background: var(--comfy-input-bg);
-            border: 1px solid #444;
-            color: #fff;
-            padding: 8px 12px;
-            border-radius: 6px;
-            font-size: 13px;
-            width: 80px;
-            outline: none;
-            transition: 0.2s;
-            text-align: center;
-        }
-        .setting-number-input:hover {
-            border-color: #4CAF50;
-        }
-        .setting-number-input:focus {
-            border-color: #4CAF50;
-            box-shadow: 0 0 0 2px rgba(76,175,80,0.2);
-        }
-        .setting-number-input::-webkit-inner-spin-button,
-        .setting-number-input::-webkit-outer-spin-button {
-            opacity: 0;
-            width: 0;
-        }
-        .setting-range-slider {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 100%;
-            height: 6px;
-            border-radius: 3px;
-            background: linear-gradient(to right, #4CAF50 0%, #333 0%);
-            outline: none;
-            cursor: pointer;
-        }
-        .setting-range-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: #4CAF50;
-            cursor: pointer;
-            box-shadow: 0 1px 4px rgba(0,0,0,0.4);
-            transition: transform 0.15s;
-        }
-        .setting-range-slider::-webkit-slider-thumb:hover {
-            transform: scale(1.2);
-        }
-        .setting-range-slider::-moz-range-thumb {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-            background: #4CAF50;
-            cursor: pointer;
-            border: none;
-        }
-        .cache-clear-btn {
-            flex: 1;
-            min-width: 120px;
-            background: rgba(156, 39, 176, 0.15);
-            border: 1px solid #9C27B0;
-            color: #ccc;
-            padding: 8px 14px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 13px;
-            transition: 0.2s;
-        }
-        .cache-clear-btn:hover:not(:disabled) {
-            background: rgba(156, 39, 176, 0.3);
-            color: #fff;
-        }
-        .cache-clear-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-    `;
-    document.head.appendChild(styleSheet);
-    
-    container.innerHTML = `
-        <!-- 顶部标题栏 -->
-        <div style="display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid #444; background: #1a1a1a;">
-            <!-- 🚀 返回按钮位置可调整参数：margin-left 控制右移，margin-top 控制下移 -->
-            <button id="btn-back-settings" style="margin-left: 15px; margin-top: 15px; background: rgba(51,51,51,0.8); border: 1px solid rgba(85,85,85,0.8); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: 0.2s;" onmouseover="this.style.background='#4CAF50'; this.style.borderColor='#4CAF50'" onmouseout="this.style.background='rgba(51,51,51,0.8)'; this.style.borderColor='rgba(85,85,85,0.8)'">
-                ⬅ ${t('common.back')}
-            </button>
-            <span style="font-size: 16px; font-weight: bold; color: #fff;">⚙️ ${t('settings.title')}</span>
-        </div>
-        
-        <!-- 设置内容区域 -->
-        <div style="padding: 0; flex: 1;">
-            
-            <!-- 分类：通用设置 -->
-            <div style="padding: 16px 16px 10px; color: #2196F3; font-size: 13px; font-weight: bold; border-bottom: 1px solid var(--border-color, #333); background: rgba(33,150,243,0.05);">
-                🌐 ${t('settings.general')}
-            </div>
-            
-            <!-- 设置项：界面语言 -->
-            <div class="setting-item">
-                <div style="flex: 1;">
-                    <div id="label-language" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.language')} / Language</div>
-                    <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.language_desc')} / Select display language</div>
-                </div>
-                <select aria-labelledby="label-language" id="select-language" class="setting-select">
-                    ${LANGUAGE_OPTIONS.map(opt => 
-                        `<option value="${opt.value}" ${(settings.language || 'zh-CN') === opt.value ? 'selected' : ''}>${opt.label}</option>`
-                    ).join('')}
-                </select>
-            </div>
-            
-            <!-- 分类：显示偏好 -->
-            <div style="padding: 16px 16px 10px; color: #4CAF50; font-size: 13px; font-weight: bold; border-bottom: 1px solid var(--border-color, #333); background: rgba(76,175,80,0.05); margin-top: 20px;">
-                📐 ${t('settings.display')}
-            </div>
-            
-            <!-- 设置项：创作者卡片背景图 -->
-            <div class="setting-item">
-                <div style="flex: 1;">
-                    <div id="label-creator-banner" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.creator_banner')}</div>
-                    <div id="desc-creator-banner" style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.creator_banner_desc')}</div>
-                </div>
-                <button type="button" role="switch" id="switch-creator-banner" aria-labelledby="label-creator-banner" aria-describedby="desc-creator-banner" class="setting-switch ${settings.showCreatorBanner ? 'active' : ''}"></button>
-            </div>
-            
-            <!-- 分类：更多功能 -->
-            <div style="padding: 16px 16px 10px; color: #FF9800; font-size: 13px; font-weight: bold; border-bottom: 1px solid var(--border-color, #333); background: rgba(255,152,0,0.05); margin-top: 20px;">
-                ✨ ${t('settings.animation')}
-            </div>
-            
-            <!-- 设置项：榜单切换动画 -->
-            <div class="setting-item">
-                <div style="flex: 1;">
-                    <div id="label-animations" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.animations')}</div>
-                    <div id="desc-animations" style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.animations_desc')}</div>
-                </div>
-                <button type="button" role="switch" id="switch-animations" aria-labelledby="label-animations" aria-describedby="desc-animations" class="setting-switch ${settings.enableAnimations ? 'active' : ''}"></button>
-            </div>
-            
-            <!-- 设置项：动画音效 -->
-            <div class="setting-item">
-                <div style="flex: 1;">
-                    <div id="label-sound-effects" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.sound')}</div>
-                    <div id="desc-sound-effects" style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.sound_desc')}</div>
-                </div>
-                <button type="button" role="switch" id="switch-sound-effects" aria-labelledby="label-sound-effects" aria-describedby="desc-sound-effects" class="setting-switch ${settings.enableSoundEffects ? 'active' : ''}"></button>
-            </div>
-            
-            <!-- 分类：数据与缓存 -->
-            <div style="padding: 16px 16px 10px; color: #9C27B0; font-size: 13px; font-weight: bold; border-bottom: 1px solid var(--border-color, #333); background: rgba(156,39,176,0.05); margin-top: 20px;">
-                ${t('settings.data_cache')}
-            </div>
-            
-            <!-- 设置项：缓存刷新间隔（滑条） -->
-            <div class="setting-item" style="flex-direction: column; align-items: flex-start; gap: 12px;">
-                <div style="flex: 1; width: 100%;">
-                    <div id="label-cache-expire" style="color: #fff; font-size: 14px; margin-bottom: 4px; font-weight: 500;">${t('settings.cache_expire')}</div>
-                    <div style="color: #888; font-size: 12px; line-height: 1.4;">${t('settings.cache_expire_desc')}</div>
-                </div>
-                <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
-                    <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
-                        <input aria-labelledby="label-cache-expire" type="range" id="slider-cache-expire" class="setting-range-slider"
-                            value="${settings.cacheExpireSeconds || 7200}"
-                            min="60" max="86400" step="60"
-                            style="flex: 1;">
-                        <input aria-labelledby="label-cache-expire" type="number" id="input-cache-expire" class="setting-number-input"
-                            value="${settings.cacheExpireSeconds || 7200}"
-                            min="60" max="86400" step="60">
-                        <span id="cache-expire-label" style="color: #4CAF50; font-size: 12px; min-width: 55px; white-space: nowrap;"></span>
-                    </div>
-                    <div style="color: #666; font-size: 11px; line-height: 1.5; padding: 8px 12px; background: rgba(0,0,0,0.2); border-radius: 4px; border-left: 2px solid #9C27B0;">
-                        💡 ${t('settings.cache_trigger_desc')}
-                    </div>
-                </div>
-            </div>
-            
-            <!-- 设置项：缓存统计与清理 -->
-            <div class="setting-item" style="flex-direction: column; align-items: flex-start; gap: 12px;">
-                <div style="flex: 1; width: 100%;">
-                    <div style="color: #fff; font-size: 14px; margin-bottom: 2px; font-weight: 500;">${t('settings.cache_stats')}</div>
-                    <div style="color: #999; font-size: 12px; line-height: 1.4;">${t('settings.cache_stats_hint')}</div>
-                </div>
-                <div id="cache-stats-panel" style="width: 100%; display: flex; flex-direction: column; gap: 6px;">
-                    <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')}
-                    </div>
-                </div>
-                <div style="display: flex; gap: 10px; width: 100%; flex-wrap: wrap;">
-                    <button id="btn-clear-browser-cache" class="cache-clear-btn">${t('settings.clear_browser_cache')}</button>
-                    ${IS_WEB_MODE ? '' : `<button id="btn-clear-disk-cache" class="cache-clear-btn">${t('settings.clear_disk_cache')}</button>
-                    <button id="btn-clear-all-cache" class="cache-clear-btn">${t('settings.clear_all_cache')}</button>`}
-                </div>
-            </div>
-            
-            <!-- 动画预览提示 -->
-            <div style="padding: 16px; background: rgba(33, 150, 243, 0.05); border-radius: 8px; margin: 16px; border: 1px dashed var(--border-color, #333);">
-                <div style="color: #2196F3; font-size: 12px; font-weight: bold; margin-bottom: 8px;">🎨 ${t('settings.animation_preview')}</div>
-                <div style="color: #888; font-size: 11px; line-height: 1.5;">
-                    • ${t('settings.anim_cascade')}<br>
-                    • ${t('settings.anim_fan')}<br>
-                    • ${t('settings.anim_abyss')}<br>
-                    • ${t('settings.anim_dataflow')}
-                </div>
-            </div>
-        </div>
-        
-        <!-- 底部信息 -->
-        <div style="padding: 15px; border-top: 1px solid var(--border-color, #333); background: #1a1a1a; text-align: center;">
-            <div style="color: #666; font-size: 11px;">${t('settings.auto_save')}</div>
-        </div>
-    `;
-    
-    // 🔌 绑定事件
-    
-    // 返回按钮
-    container.querySelector("#btn-back-settings").onclick = () => {
-        window.dispatchEvent(new CustomEvent("comfy-route-back"));
-    };
-    
-    /**
-     * 通用开关绑定辅助函数
-     * @param {string} selector - querySelector 选择器
-     * @param {string} settingKey - settings 对象的字段名
-     * @param {string} labelKey - i18n label key
-     * @param {string} [iconOn] - 开启时的图标前缀，默认 '✅'
-     */
-    function _bindSwitchHandler(selector, settingKey, labelKey, iconOn = '✅') {
-        const switchEl = container.querySelector(selector);
-        switchEl.setAttribute("aria-checked", String(switchEl.classList.contains("active")));
-        switchEl.onclick = () => {
-            const newValue = !switchEl.classList.contains("active");
-            switchEl.classList.toggle("active", newValue);
-            switchEl.setAttribute("aria-checked", String(newValue));
-            const currentSettings = getSettings();
-            currentSettings[settingKey] = newValue;
-            saveSettings(currentSettings);
-            showToast(
-                newValue
-                    ? `${iconOn} ${t(labelKey)} ${t('settings.enabled')}`
-                    : `${t(labelKey)} ${t('settings.disabled')}`,
-                "success"
-            );
-        };
-    }
-    
-    // 🌐 下拉控制：界面语言
-    const selectLanguage = container.querySelector("#select-language");
-    let languageTimer = null;
-    let languageGeneration = 0;
-    selectLanguage.onchange = () => {
-        if (cacheViewDisposed || !container.isConnected) return;
-        const newLang = selectLanguage.value;
-        if (!LANGUAGE_OPTIONS.some(option => option.value === newLang)) return;
-        const generation = ++languageGeneration;
-        clearTimeout(languageTimer);
-        languageTimer = null;
-        
-        const currentSettings = getSettings();
-        currentSettings.language = newLang;
-        saveSettings(currentSettings);
-        
-        // 同步到 i18n 模块
-        setLanguage(newLang);
-        if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) return;
-        
-        const langName = LANGUAGE_OPTIONS.find(opt => opt.value === newLang)?.label || newLang;
-        showToast(`🌐 ${t('settings.language_changed')} ${langName.split(' / ')[0]}`, "success");
-        
-        languageTimer = setTimeout(() => {
-            languageTimer = null;
-            if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) return;
-            const restoreFocus = document.activeElement === selectLanguage;
-            const newSettingsView = createSettingsView();
-            if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) {
-                newSettingsView._cleanup?.();
-                return;
-            }
-            window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view: newSettingsView } }));
-            if (!newSettingsView.isConnected) {
-                newSettingsView._cleanup?.();
-                return;
-            }
-            if (restoreFocus && (document.activeElement === document.body || document.activeElement === selectLanguage)) {
-                newSettingsView.querySelector("#select-language")?.focus({ preventScroll: true });
-            }
-        }, 100);
-    };
-    
-    // 🎛️ 开关控制：创作者背景图 / 榜单切换动画 / 动画音效
-    _bindSwitchHandler("#switch-creator-banner", "showCreatorBanner", "settings.creator_banner", "✅");
-    _bindSwitchHandler("#switch-animations",     "enableAnimations",  "settings.animations",     "✨");
-    _bindSwitchHandler("#switch-sound-effects",  "enableSoundEffects", "settings.sound",         "🔊");
-    
-    // ⏱️ 滑条+输入框联动：缓存刷新间隔
-    const inputCacheExpire = container.querySelector("#input-cache-expire");
-    const sliderCacheExpire = container.querySelector("#slider-cache-expire");
-    const cacheExpireLabel = container.querySelector("#cache-expire-label");
-    
-    // 格式化时间显示
-    function formatCacheTime(seconds) {
-        if (seconds >= 3600) {
-            const hours = Math.floor(seconds / 3600);
-            const mins = Math.floor((seconds % 3600) / 60);
-            return mins > 0 ? `${hours}h${mins}m` : `${hours}h`;
-        }
-        return `${Math.floor(seconds / 60)}min`;
-    }
-    
-    // 更新滑条渐变背景
-    function updateSliderTrack() {
-        const val = sliderCacheExpire.value;
-        const pct = ((val - 60) / (86400 - 60)) * 100;
-        sliderCacheExpire.style.background = `linear-gradient(to right, #4CAF50 ${pct}%, #333 ${pct}%)`;
-    }
-    
-    // 保存设置
-    function saveCacheExpire(newValue) {
-        const currentSettings = getSettings();
-        currentSettings.cacheExpireSeconds = newValue;
-        saveSettings(currentSettings);
-        cacheExpireLabel.textContent = formatCacheTime(newValue);
-        updateSliderTrack();
-    }
-    
-    // 初始化显示
-    cacheExpireLabel.textContent = formatCacheTime(parseInt(inputCacheExpire.value));
-    updateSliderTrack();
-    
-    // 滑条拖动 → 同步输入框 + 保存
-    sliderCacheExpire.oninput = () => {
-        const val = parseInt(sliderCacheExpire.value);
-        inputCacheExpire.value = val;
-        cacheExpireLabel.textContent = formatCacheTime(val);
-        updateSliderTrack();
-    };
-    sliderCacheExpire.onchange = () => {
-        saveCacheExpire(parseInt(sliderCacheExpire.value));
-        showToast(`⏱️ ${t('settings.cache_expire')}: ${formatCacheTime(parseInt(sliderCacheExpire.value))}`, "success");
-    };
-    
-    // 输入框修改 → 同步滑条 + 保存
-    inputCacheExpire.onchange = () => {
-        let newValue = parseInt(inputCacheExpire.value);
-        if (isNaN(newValue) || newValue < 60) { newValue = 60; }
-        else if (newValue > 86400) { newValue = 86400; }
-        inputCacheExpire.value = newValue;
-        sliderCacheExpire.value = newValue;
-        saveCacheExpire(newValue);
-        showToast(`⏱️ ${t('settings.cache_expire')}: ${formatCacheTime(newValue)}`, "success");
-    };
-    
-    // 📊 缓存统计面板
-    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;
-        languageGeneration++;
-        clearTimeout(languageTimer);
-        languageTimer = null;
-        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([
-                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;
-            const imageSize = diskRes.image_size;
-            const videoCount = diskRes.video_count;
-            const videoSize = diskRes.video_size;
-            const browserCount = browserStats.count;
-            const browserSize = browserStats.totalSize;
-            
-            const hasAnyCache = imageCount > 0 || videoCount > 0 || browserCount > 0;
-            
-            if (!hasAnyCache) {
-                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')}
-                    </div>
-                `;
-                lastStatsHTML = cacheStatsPanel.innerHTML;
-                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_disk_images')}：</span>${imageCount} ${t('settings.files')} · ${formatSize(imageSize)}
-                </div>
-                <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_disk_videos')}：</span>${videoCount} ${t('settings.files')} · ${formatSize(videoSize)}
-                </div>
-                <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>${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;">
-                    ${lastStatsHTML === null ? t('settings.cache_stats_unavailable') : t('settings.cache_stats_stale')}
-                </div>
-            ` + (lastStatsHTML || '');
-        } finally {
-            if (statsController === controller) statsController = null;
-        }
-    }
-    
-    // 🧹 缓存清理按钮
-    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');
-        clearButtons.forEach(button => { button.disabled = true; button.setAttribute('aria-busy', 'true'); });
-        
-        try {
-            if (action === 'browser' || action === 'all') {
-                if (!clearAllCache()) throw new Error('cache_operation_unconfirmed');
-            }
-            if (action === 'disk' || action === 'all') {
-                await clearDiskCache();
-            }
-            if (cacheViewDisposed || !container.isConnected) return;
-            await loadCacheStats();
-            if (!cacheViewDisposed && container.isConnected) showToast(t('settings.cache_cleared'), "success");
-        } catch (e) {
-            if (cacheViewDisposed || !container.isConnected) return;
-            showToast(t('settings.cache_clear_unconfirmed'), "error");
-            await loadCacheStats();
-        } finally {
-            btn.textContent = originalText;
-            clearingCache = false;
-            clearButtons.forEach(button => { button.disabled = false; button.removeAttribute('aria-busy'); });
-        }
-    }
-    
-    btnClearBrowser.onclick = () => handleClearCache(btnClearBrowser, 'browser');
-    if (btnClearDisk) btnClearDisk.onclick = () => handleClearCache(btnClearDisk, 'disk');
-    if (btnClearAll) btnClearAll.onclick = () => handleClearCache(btnClearAll, 'all');
-    
-    // 进入设置页时自动加载缓存统计
-    loadCacheStats();
-    
-    return container;
-}
-
-/**
- * ⚙️ 打开设置页面（通过路由）
- */
-export function openSettingsPage() {
-    const view = createSettingsView();
-    window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
-}
+// 前端页面/components/全局设置组件.js
+// ==========================================
+// ⚙️ 全局设置组件（界面偏好设置）
+// ==========================================
+// 作用：提供全局界面设置入口，控制显示偏好
+// 关联文件：
+//   - 顶部导航组件.js (设置按钮入口)
+//   - 创作者卡片组件.js (背景图显示控制)
+// ==========================================
+
+import { showToast } from "./UI交互提示组件.js";
+import { setLanguage, getLanguage, t } from "./用户体验增强.js";
+import { clearAllCache } from "./性能优化工具.js";
+import { IS_WEB_MODE, getSettings, saveSettings } from "../core/全局配置.js";
+export { getSettings, saveSettings };
+import { getDiskCacheStats, clearDiskCache } from './缓存管理请求.js';
+
+// 🌐 语言选项（双语显示）
+const LANGUAGE_OPTIONS = [
+    { value: 'zh-CN', label: '简体中文 / Simplified Chinese' },
+    { value: 'en-US', label: 'English / 英语' }
+];
+
+/**
+ * 📊 格式化文件大小
+ */
+function formatSize(bytes) {
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log2(bytes) / 10);
+    const unitIndex = Math.min(i, units.length - 1);
+    const size = bytes / Math.pow(1024, unitIndex);
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+}
+
+/**
+ * 📊 获取浏览器缓存统计
+ */
+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);
+            if (key && key.startsWith('ComfyRanking_')) {
+                const value = localStorage.getItem(key);
+                if (value) {
+                    totalSize += new Blob([value]).size;
+                    count++;
+                }
+            }
+        }
+    } catch (e) { available = false; }
+    return { count, totalSize, available };
+}
+
+/**
+ * ⚙️ 创建设置页面视图
+ */
+export function createSettingsView() {
+    const settings = getSettings();
+
+    const container = document.createElement("div");
+    container.className = "ranking-settings";
+
+    container.innerHTML = `
+        <!-- 顶部标题栏 -->
+        <header class="ranking-settings__header">
+            <button type="button" class="ranking-settings__back" id="btn-back-settings" >
+                ⬅ ${t('common.back')}
+            </button>
+            <h1 class="ranking-settings__title">⚙️ ${t('settings.title')}</h1>
+        </header>
+
+        <!-- 设置内容区域 -->
+        <div class="ranking-settings__body" >
+
+            <!-- 分类：通用设置 -->
+            <h2 class="ranking-settings__heading-general">
+                🌐 ${t('settings.general')}
+            </h2>
+
+            <!-- 设置项：界面语言 -->
+            <div class="setting-item">
+                <div class="ranking-settings__copy" >
+                    <div class="ranking-settings__label" id="label-language" >${t('settings.language')} / Language</div>
+                    <div class="ranking-settings__description" >${t('settings.language_desc')} / Select display language</div>
+                </div>
+                <select aria-labelledby="label-language" id="select-language" class="setting-select">
+                    ${LANGUAGE_OPTIONS.map(opt =>
+                        `<option value="${opt.value}" ${(settings.language || 'zh-CN') === opt.value ? 'selected' : ''}>${opt.label}</option>`
+                    ).join('')}
+                </select>
+            </div>
+
+            <section class="setting-shortcuts" aria-labelledby="heading-shortcuts">
+                <h2 id="heading-shortcuts" class="setting-shortcuts__heading">⌨️ ${t('settings.shortcuts')}</h2>
+                <div class="setting-item">
+                    <div class="setting-shortcuts__copy">
+                        <div id="label-keyboard-shortcuts" class="setting-shortcuts__label">${t('settings.keyboard_combinations')}</div>
+                        <p id="desc-keyboard-shortcuts" class="setting-shortcuts__desc">${t('settings.keyboard_combinations_desc')}</p>
+                    </div>
+                    <button type="button" role="switch" id="switch-keyboard-shortcuts" aria-labelledby="label-keyboard-shortcuts" aria-describedby="desc-keyboard-shortcuts" class="setting-switch ${settings.enableKeyboardShortcuts === true ? 'active' : ''}"></button>
+                </div>
+                <dl class="setting-shortcuts__list">
+                    ${[[t('settings.shortcuts_tab_keys'), t('settings.shortcuts_controls')], [t('settings.shortcuts_activate_keys'), t('settings.shortcuts_activate')], [t('settings.shortcuts_arrows'), t('settings.shortcuts_tabs')], [t('settings.shortcuts_image_keys'), t('settings.shortcuts_images')], [t('settings.shortcuts_escape_key'), t('settings.shortcuts_escape')]].map(([keys, description]) => `<div class="setting-shortcuts__entry"><dt><kbd>${keys}</kbd></dt><dd>${description}</dd></div>`).join('')}
+                </dl>
+                <p class="setting-shortcuts__note">${t('settings.shortcuts_scope')}</p>
+            </section>
+
+            <!-- 分类：显示偏好 -->
+            <h2 class="ranking-settings__heading-display">
+                📐 ${t('settings.display')}
+            </h2>
+
+            <!-- 设置项：创作者卡片背景图 -->
+            <div class="setting-item">
+                <div class="ranking-settings__copy" >
+                    <div class="ranking-settings__label" id="label-creator-banner" >${t('settings.creator_banner')}</div>
+                    <div class="ranking-settings__description" id="desc-creator-banner" >${t('settings.creator_banner_desc')}</div>
+                </div>
+                <button type="button" role="switch" id="switch-creator-banner" aria-labelledby="label-creator-banner" aria-describedby="desc-creator-banner" class="setting-switch ${settings.showCreatorBanner ? 'active' : ''}"></button>
+            </div>
+
+            <!-- 分类：更多功能 -->
+            <h2 class="ranking-settings__heading-animation">
+                ✨ ${t('settings.animation')}
+            </h2>
+
+            <!-- 设置项：榜单切换动画 -->
+            <div class="setting-item">
+                <div class="ranking-settings__copy" >
+                    <div class="ranking-settings__label" id="label-animations" >${t('settings.animations')}</div>
+                    <div class="ranking-settings__description" id="desc-animations" >${t('settings.animations_desc')}</div>
+                </div>
+                <button type="button" role="switch" id="switch-animations" aria-labelledby="label-animations" aria-describedby="desc-animations" class="setting-switch ${settings.enableAnimations ? 'active' : ''}"></button>
+            </div>
+
+            <!-- 设置项：动画音效 -->
+            <div class="setting-item">
+                <div class="ranking-settings__copy" >
+                    <div class="ranking-settings__label" id="label-sound-effects" >${t('settings.sound')}</div>
+                    <div class="ranking-settings__description" id="desc-sound-effects" >${t('settings.sound_desc')}</div>
+                </div>
+                <button type="button" role="switch" id="switch-sound-effects" aria-labelledby="label-sound-effects" aria-describedby="desc-sound-effects" class="setting-switch ${settings.enableSoundEffects ? 'active' : ''}"></button>
+            </div>
+
+            <!-- 分类：数据与缓存 -->
+            <h2 class="ranking-settings__heading-cache">
+                ${t('settings.data_cache')}
+            </h2>
+
+            <!-- 设置项：缓存刷新间隔（滑条） -->
+            <div class="ranking-settings__stack setting-item" >
+                <div class="ranking-settings__copy-wide" >
+                    <div class="ranking-settings__label" id="label-cache-expire" >${t('settings.cache_expire')}</div>
+                    <div class="ranking-settings__description" >${t('settings.cache_expire_desc')}</div>
+                </div>
+                <div class="ranking-settings__controls" >
+                    <div class="ranking-settings__range-row" >
+                        <input aria-labelledby="label-cache-expire" type="range" id="slider-cache-expire" class="ranking-settings__copy setting-range-slider"
+                            value="${settings.cacheExpireSeconds || 7200}"
+                            min="60" max="86400" step="60"
+                            >
+                        <input aria-labelledby="label-cache-expire" type="number" id="input-cache-expire" class="setting-number-input"
+                            value="${settings.cacheExpireSeconds || 7200}"
+                            min="60" max="86400" step="60">
+                        <span class="ranking-settings__time" id="cache-expire-label" ></span>
+                    </div>
+                    <div class="ranking-settings__hint" >
+                        💡 ${t('settings.cache_trigger_desc')}
+                    </div>
+                </div>
+            </div>
+
+            <!-- 设置项：缓存统计与清理 -->
+            <div class="ranking-settings__stack setting-item" >
+                <div class="ranking-settings__copy-wide" >
+                    <div class="ranking-settings__stats-label" >${t('settings.cache_stats')}</div>
+                    <div class="ranking-settings__stats-hint" >${t('settings.cache_stats_hint')}</div>
+                </div>
+                <div class="ranking-settings__stats" id="cache-stats-panel" >
+                    <div class="ranking-settings__stat-muted" >
+                        ${t('settings.no_cache')}
+                    </div>
+                </div>
+                <div class="ranking-settings__actions" >
+                    <button type="button" id="btn-clear-browser-cache" class="cache-clear-btn">${t('settings.clear_browser_cache')}</button>
+                    ${IS_WEB_MODE ? '' : `<button type="button" id="btn-clear-disk-cache" class="cache-clear-btn">${t('settings.clear_disk_cache')}</button>
+                    <button type="button" id="btn-clear-all-cache" class="cache-clear-btn">${t('settings.clear_all_cache')}</button>`}
+                </div>
+            </div>
+
+            <!-- 动画预览提示 -->
+            <div class="ranking-settings__preview" >
+                <div class="ranking-settings__preview-title" >🎨 ${t('settings.animation_preview')}</div>
+                <div class="ranking-settings__preview-copy" >
+                    • ${t('settings.anim_cascade')}<br>
+                    • ${t('settings.anim_fan')}<br>
+                    • ${t('settings.anim_abyss')}<br>
+                    • ${t('settings.anim_dataflow')}
+                </div>
+            </div>
+        </div>
+
+        <!-- 底部信息 -->
+        <div class="ranking-settings__footer" >
+            <div class="ranking-settings__footer-copy" >${t('settings.auto_save')}</div>
+        </div>
+    `;
+
+    // 🔌 绑定事件
+
+    // 返回按钮
+    container.querySelector("#btn-back-settings").onclick = () => {
+        window.dispatchEvent(new CustomEvent("comfy-route-back"));
+    };
+
+    /**
+     * 通用开关绑定辅助函数
+     * @param {string} selector - querySelector 选择器
+     * @param {string} settingKey - settings 对象的字段名
+     * @param {string} labelKey - i18n label key
+     * @param {string} [iconOn] - 开启时的图标前缀，默认 '✅'
+     */
+    function _bindSwitchHandler(selector, settingKey, labelKey, iconOn = '✅') {
+        const switchEl = container.querySelector(selector);
+        switchEl.setAttribute("aria-checked", String(switchEl.classList.contains("active")));
+        switchEl.onclick = () => {
+            if (settingKey === 'enableKeyboardShortcuts' && (cacheViewDisposed || !container.isConnected)) return;
+            let currentSettings;
+            try { currentSettings = getSettings(settingKey === 'enableKeyboardShortcuts' ? { strict: true } : undefined); }
+            catch { showToast(t('common.error'), 'error'); return; }
+            const previousValue = switchEl.classList.contains("active");
+            const newValue = !previousValue;
+            switchEl.classList.toggle("active", newValue);
+            switchEl.setAttribute("aria-checked", String(newValue));
+            currentSettings[settingKey] = newValue;
+            const saved = saveSettings(currentSettings);
+            let confirmed = saved === true;
+            if (settingKey === 'enableKeyboardShortcuts') {
+                try { confirmed = confirmed && getSettings({ strict: true }).enableKeyboardShortcuts === newValue; }
+                catch { confirmed = false; }
+            }
+            if (settingKey === 'enableKeyboardShortcuts' && !confirmed) {
+                switchEl.classList.toggle('active', previousValue);
+                switchEl.setAttribute('aria-checked', String(previousValue));
+                showToast(t('common.error'), 'error');
+                return;
+            }
+            showToast(
+                newValue
+                    ? `${iconOn} ${t(labelKey)} ${t('settings.enabled')}`
+                    : `${t(labelKey)} ${t('settings.disabled')}`,
+                "success"
+            );
+        };
+    }
+
+    // 🌐 下拉控制：界面语言
+    const selectLanguage = container.querySelector("#select-language");
+    let languageTimer = null;
+    let languageGeneration = 0;
+    selectLanguage.onchange = () => {
+        if (cacheViewDisposed || !container.isConnected) return;
+        const newLang = selectLanguage.value;
+        if (!LANGUAGE_OPTIONS.some(option => option.value === newLang)) return;
+        const generation = ++languageGeneration;
+        clearTimeout(languageTimer);
+        languageTimer = null;
+
+        const currentSettings = getSettings();
+        currentSettings.language = newLang;
+        saveSettings(currentSettings);
+
+        // 同步到 i18n 模块
+        setLanguage(newLang);
+        if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) return;
+
+        const langName = LANGUAGE_OPTIONS.find(opt => opt.value === newLang)?.label || newLang;
+        showToast(`🌐 ${t('settings.language_changed')} ${langName.split(' / ')[0]}`, "success");
+
+        languageTimer = setTimeout(() => {
+            languageTimer = null;
+            if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) return;
+            const restoreFocus = document.activeElement === selectLanguage;
+            const newSettingsView = createSettingsView();
+            if (cacheViewDisposed || generation !== languageGeneration || !container.isConnected) {
+                newSettingsView._cleanup?.();
+                return;
+            }
+            window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view: newSettingsView } }));
+            if (!newSettingsView.isConnected) {
+                newSettingsView._cleanup?.();
+                return;
+            }
+            if (restoreFocus && (document.activeElement === document.body || document.activeElement === selectLanguage)) {
+                newSettingsView.querySelector("#select-language")?.focus({ preventScroll: true });
+            }
+        }, 100);
+    };
+
+    // 🎛️ 开关控制：创作者背景图 / 榜单切换动画 / 动画音效
+    _bindSwitchHandler("#switch-keyboard-shortcuts", "enableKeyboardShortcuts", "settings.keyboard_combinations");
+    _bindSwitchHandler("#switch-creator-banner", "showCreatorBanner", "settings.creator_banner", "✅");
+    _bindSwitchHandler("#switch-animations",     "enableAnimations",  "settings.animations",     "✨");
+    _bindSwitchHandler("#switch-sound-effects",  "enableSoundEffects", "settings.sound",         "🔊");
+
+    // ⏱️ 滑条+输入框联动：缓存刷新间隔
+    const inputCacheExpire = container.querySelector("#input-cache-expire");
+    const sliderCacheExpire = container.querySelector("#slider-cache-expire");
+    const cacheExpireLabel = container.querySelector("#cache-expire-label");
+
+    // 格式化时间显示
+    function formatCacheTime(seconds) {
+        if (seconds >= 3600) {
+            const hours = Math.floor(seconds / 3600);
+            const mins = Math.floor((seconds % 3600) / 60);
+            return mins > 0 ? `${hours}h${mins}m` : `${hours}h`;
+        }
+        return `${Math.floor(seconds / 60)}min`;
+    }
+
+    // 更新滑条渐变背景
+    function updateSliderTrack() {
+        const val = sliderCacheExpire.value;
+        const pct = ((val - 60) / (86400 - 60)) * 100;
+        sliderCacheExpire.style.setProperty("--settings-range-progress", `${pct}%`);
+    }
+
+    // 保存设置
+    function saveCacheExpire(newValue) {
+        const currentSettings = getSettings();
+        currentSettings.cacheExpireSeconds = newValue;
+        saveSettings(currentSettings);
+        cacheExpireLabel.textContent = formatCacheTime(newValue);
+        updateSliderTrack();
+    }
+
+    // 初始化显示
+    cacheExpireLabel.textContent = formatCacheTime(parseInt(inputCacheExpire.value));
+    updateSliderTrack();
+
+    // 滑条拖动 → 同步输入框 + 保存
+    sliderCacheExpire.oninput = () => {
+        const val = parseInt(sliderCacheExpire.value);
+        inputCacheExpire.value = val;
+        cacheExpireLabel.textContent = formatCacheTime(val);
+        updateSliderTrack();
+    };
+    sliderCacheExpire.onchange = () => {
+        saveCacheExpire(parseInt(sliderCacheExpire.value));
+        showToast(`⏱️ ${t('settings.cache_expire')}: ${formatCacheTime(parseInt(sliderCacheExpire.value))}`, "success");
+    };
+
+    // 输入框修改 → 同步滑条 + 保存
+    inputCacheExpire.onchange = () => {
+        let newValue = parseInt(inputCacheExpire.value);
+        if (isNaN(newValue) || newValue < 60) { newValue = 60; }
+        else if (newValue > 86400) { newValue = 86400; }
+        inputCacheExpire.value = newValue;
+        sliderCacheExpire.value = newValue;
+        saveCacheExpire(newValue);
+        showToast(`⏱️ ${t('settings.cache_expire')}: ${formatCacheTime(newValue)}`, "success");
+    };
+
+    // 📊 缓存统计面板
+    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;
+        container.querySelector("#switch-keyboard-shortcuts").onclick = null;
+        languageGeneration++;
+        clearTimeout(languageTimer);
+        languageTimer = null;
+        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 class="ranking-settings__stat" >
+                    <span class="ranking-settings__stat-title" >${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([
+                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;
+            const imageSize = diskRes.image_size;
+            const videoCount = diskRes.video_count;
+            const videoSize = diskRes.video_size;
+            const browserCount = browserStats.count;
+            const browserSize = browserStats.totalSize;
+
+            const hasAnyCache = imageCount > 0 || videoCount > 0 || browserCount > 0;
+
+            if (!hasAnyCache) {
+                cacheStatsPanel.innerHTML = `
+                    <div class="ranking-settings__stat-muted" >
+                        ${t('settings.no_cache')}
+                    </div>
+                `;
+                lastStatsHTML = cacheStatsPanel.innerHTML;
+                return;
+            }
+
+            cacheStatsPanel.innerHTML = `
+                <div class="ranking-settings__stat" >
+                    <span class="ranking-settings__stat-title" >${t('settings.cache_disk_images')}：</span>${imageCount} ${t('settings.files')} · ${formatSize(imageSize)}
+                </div>
+                <div class="ranking-settings__stat" >
+                    <span class="ranking-settings__stat-title" >${t('settings.cache_disk_videos')}：</span>${videoCount} ${t('settings.files')} · ${formatSize(videoSize)}
+                </div>
+                <div class="ranking-settings__stat" >
+                    <span class="ranking-settings__stat-title" >${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 class="ranking-settings__stat-muted" >
+                    ${lastStatsHTML === null ? t('settings.cache_stats_unavailable') : t('settings.cache_stats_stale')}
+                </div>
+            ` + (lastStatsHTML || '');
+        } finally {
+            if (statsController === controller) statsController = null;
+        }
+    }
+
+    // 🧹 缓存清理按钮
+    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');
+        clearButtons.forEach(button => { button.disabled = true; button.setAttribute('aria-busy', 'true'); });
+
+        try {
+            if (action === 'browser' || action === 'all') {
+                if (!clearAllCache()) throw new Error('cache_operation_unconfirmed');
+            }
+            if (action === 'disk' || action === 'all') {
+                await clearDiskCache();
+            }
+            if (cacheViewDisposed || !container.isConnected) return;
+            await loadCacheStats();
+            if (!cacheViewDisposed && container.isConnected) showToast(t('settings.cache_cleared'), "success");
+        } catch (e) {
+            if (cacheViewDisposed || !container.isConnected) return;
+            showToast(t('settings.cache_clear_unconfirmed'), "error");
+            await loadCacheStats();
+        } finally {
+            btn.textContent = originalText;
+            clearingCache = false;
+            clearButtons.forEach(button => { button.disabled = false; button.removeAttribute('aria-busy'); });
+        }
+    }
+
+    btnClearBrowser.onclick = () => handleClearCache(btnClearBrowser, 'browser');
+    if (btnClearDisk) btnClearDisk.onclick = () => handleClearCache(btnClearDisk, 'disk');
+    if (btnClearAll) btnClearAll.onclick = () => handleClearCache(btnClearAll, 'all');
+
+    // 进入设置���时自动加载缓存统计
+    loadCacheStats();
+
+    return container;
+}
+
+/**
+ * ⚙️ 打开设置页面（通过路由）
+ */
+export function openSettingsPage() {
+    const view = createSettingsView();
+    window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
+}

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

@@ -14,11 +14,50 @@ export function createCardNavigationScope(target, isCurrent, { captureSession =
     for (const event of events) target.addEventListener(event, invalidate);
     for (const event of identityEvents) target.addEventListener(event, revokeIdentity);
     target.addEventListener('storage', onStorage);
+    const capture = () => {
+        const captured = generation;
+        const isSessionCurrent = captureSession();
+        return () => !disposed && !identityRevoked && captured === generation && isCurrent() && isViewSessionCurrent() && isSessionCurrent();
+    };
     return {
-        capture() {
-            const captured = generation;
-            const isSessionCurrent = captureSession();
-            return () => !disposed && !identityRevoked && captured === generation && isCurrent() && isViewSessionCurrent() && isSessionCurrent();
+        capture,
+        captureListFocus(container) {
+            let doc = container?.ownerDocument;
+            let active = doc?.activeElement;
+            if (!active || !container.contains(active)) return () => {};
+            let oldCards = Array.from(container.children).filter(card => card._rankingListId != null);
+            let oldCard = oldCards.find(card => card === active || card.contains(active));
+            if (!oldCard) return () => {};
+            const id = oldCard._rankingListId;
+            const index = oldCards.indexOf(oldCard);
+            const rootFocused = oldCard === active;
+            const tag = active.tagName;
+            const className = typeof active.className === 'string' ? active.className : '';
+            const current = capture();
+            oldCard = oldCards = null;
+            let consumed = false;
+            return () => {
+                if (consumed) return;
+                consumed = true;
+                try {
+                    if (!current() || !container.isConnected || (active.isConnected && container.contains(active))) return;
+                    const focused = doc.activeElement;
+                    if (focused !== doc.body && focused !== doc.documentElement && focused !== active) return;
+                    const cards = Array.from(container.children).filter(card => card._rankingListId != null);
+                    const card = cards.find(item => item._rankingListId === id) || cards[Math.min(index, cards.length - 1)];
+                    if (!card) {
+                        container.setAttribute('tabindex', '-1');
+                        container.focus({ preventScroll: true });
+                        return;
+                    }
+                    const sameAction = rootFocused ? card : [...card.querySelectorAll('button, a[href], [tabindex]')]
+                        .find(item => item.tagName === tag && item.className === className);
+                    const replacement = sameAction || card.querySelector('.business-list-card__title') || card;
+                    replacement.focus({ preventScroll: true });
+                } finally {
+                    container = doc = active = null;
+                }
+            };
         },
         dispose() {
             if (disposed) return;

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

@@ -6,7 +6,7 @@
 // 接口：openImageViewer(imageUrls, startIndex, options)
 // ==========================================
 
-import { escapeHtml } from "../core/全局配置.js";
+import { escapeHtml, API, IS_WEB_MODE } from "../core/全局配置.js";
 import { t } from "./用户体验增强.js";
 
 // ==========================================
@@ -400,10 +400,14 @@ function _calcGridLayout(displayWidth, displayHeight, maxGridSize) {
  */
 class CyberImageViewer {
     constructor(imageUrls, startIndex = 0) {
-        // 处理URL，确保使用本地缓存代理
+        // 按运行模式处理图片地址
         this.imageUrls = imageUrls.map(url => this._proxyImageUrl(url));
         this.currentIndex = Math.max(0, Math.min(startIndex, this.imageUrls.length - 1));
         this.preloadCache = new Map();
+        this._preloadRequests = new Map();
+        this._imageReads = new Set();
+        this._loadGeneration = 0;
+        this._mainLoadController = null;
         this.isAnimating = false;
         this.container = null;
         this.elements = {};
@@ -412,30 +416,163 @@ class CyberImageViewer {
         // 自动播放状态管理
         this._autoPlayEnabled = false;
         this._autoPlayTimerId = null;
+        this._autoWaitTimerId = null;
         this._autoPlayInterval = 1000; // 默认1秒展示时间
         this._autoPlayStateChangeCallbacks = []; // 状态变化回调
         this._returnFocus = document.activeElement;
+        this._frames = new Map();
+        this._timers = new Map();
+        this._eventCleanups = [];
+        this._removalObserver = null;
+        this._wasMounted = false;
+        this._disposed = false;
+    }
+
+    _isActive(allowClosing = false) {
+        return !this._disposed && (!this._isClosing || allowClosing) && !!this.container?.isConnected;
+    }
+
+    _scheduleFrame(callback, allowClosing = false) {
+        if (!this._isActive(allowClosing)) return null;
+        const record = {};
+        const id = requestAnimationFrame(time => {
+            if (this._frames.get(id) !== record) return;
+            this._frames.delete(id);
+            if (!this._isActive(allowClosing)) {
+                if (!this.container?.isConnected) this._dispose();
+                return;
+            }
+            callback(time);
+        });
+        this._frames.set(id, record);
+        return id;
+    }
+
+    _scheduleTimer(callback, delay, onCancel = null, allowClosing = false) {
+        if (!this._isActive(allowClosing)) { onCancel?.(); return null; }
+        const record = { onCancel };
+        const id = setTimeout(() => {
+            if (this._timers.get(id) !== record) return;
+            this._timers.delete(id);
+            if (!this._isActive(allowClosing)) {
+                onCancel?.();
+                if (!this.container?.isConnected) this._dispose();
+                return;
+            }
+            callback();
+        }, delay);
+        this._timers.set(id, record);
+        return id;
+    }
+
+    _cancelTimer(id) {
+        if (id == null) return;
+        const record = this._timers.get(id);
+        if (!record) return;
+        this._timers.delete(id);
+        clearTimeout(id);
+        record.onCancel?.();
+    }
+
+    _listen(target, type, callback, options) {
+        const owned = event => {
+            if (!this._isActive()) return;
+            this._watchRemoval();
+            callback(event);
+        };
+        target.addEventListener(type, owned, options);
+        this._eventCleanups.push(() => target.removeEventListener(type, owned, options));
+    }
+
+    _watchRemoval() {
+        if (this._disposed || this._removalObserver) return;
+        const container = this.container;
+        const inspect = records => {
+            if (this._disposed || this._removalObserver !== observer) return;
+            if (container.isConnected) { this._wasMounted = true; return; }
+            const appeared = records.some(record => [...record.addedNodes, ...record.removedNodes]
+                .some(node => node === container || node.contains?.(container)));
+            if (this._wasMounted || appeared) this._dispose();
+        };
+        const observer = new MutationObserver(inspect);
+        this._removalObserver = observer;
+        observer.observe(document.body, { childList: true, subtree: true });
+        queueMicrotask(() => {
+            if (this._disposed || this._removalObserver !== observer) return;
+            inspect(observer.takeRecords());
+            if (!container.isConnected && !this._wasMounted && !this._disposed) {
+                observer.disconnect();
+                this._removalObserver = null;
+            }
+        });
+    }
+
+    _cancelAnimationWork() {
+        this._animationId++;
+        for (const id of this._frames.keys()) cancelAnimationFrame(id);
+        this._frames.clear();
+        for (const id of [...this._timers.keys()]) this._cancelTimer(id);
+        this.container?.querySelectorAll('.cyber-blocks-container, .cyber-particles-container').forEach(node => node.remove());
+        this.isAnimating = false;
+        this._autoPlayTimerId = null;
+        this._autoWaitTimerId = null;
+    }
+
+    _stopOwnedWork() {
+        this._loadGeneration++;
+        this._mainLoadController?.abort();
+        this._mainLoadController = null;
+        for (const cancel of [...this._imageReads]) cancel();
+        for (const controller of this._preloadRequests.values()) controller.abort();
+        this._preloadRequests.clear();
+        for (const image of this.preloadCache.values()) image.src = '';
+        this.preloadCache.clear();
+        const wasPlaying = this._autoPlayEnabled;
+        this._autoPlayEnabled = false;
+        this._cancelTimer(this._autoPlayTimerId);
+        this._autoPlayTimerId = null;
+        if (wasPlaying && this.container?.isConnected) {
+            try { this._updateAutoPlayUI(); } catch (_) { console.warn('Image viewer playback cleanup failed'); }
+        }
+        this._cancelAnimationWork();
+        for (const cleanup of this._eventCleanups) cleanup();
+        this._eventCleanups = [];
+        this._keydownHandler = null;
+    }
+
+    _dispose() {
+        if (this._disposed) return;
+        this._disposed = true;
+        this._isClosing = true;
+        this._stopOwnedWork();
+        this._removalObserver?.disconnect();
+        this._removalObserver = null;
+        this._returnFocus = null;
+        this._autoPlayStateChangeCallbacks = [];
+        this.container?.querySelectorAll('img').forEach(image => image.removeAttribute('src'));
+        this.imageUrls = [];
     }
 
     /**
-     * 将URL转换为本地缓存代理格式
+     * 按本地或网页模式处理图片地址
      * 自动识别代理URL、data: URL、blob: URL和普通HTTP(S) URL
      */
     _proxyImageUrl(url) {
-        if (!url) return '';
-        // data: URL 和 blob: URL 直接使用不转换
-        if (url.startsWith('data:') || url.startsWith('blob:')) {
-            return url;
-        }
-        // 如果已经是代理格式，直接返回
-        if (url.startsWith('/community_hub/image?url=')) {
-            return url;
-        }
-        // 如果是HTTP/HTTPS链接，添加代理前缀
-        if (url.startsWith('http')) {
-            return `/community_hub/image?url=${encodeURIComponent(url)}`;
+        if (typeof url !== 'string' || !url) return '';
+        const prefix = API.LOCAL_IMAGE_PROXY_PREFIX;
+        if (IS_WEB_MODE) {
+            let original = url;
+            for (let depth = 0; depth < 10 && original.startsWith(prefix); depth++) {
+                let encoded = original.slice(prefix.length);
+                if (encoded.endsWith(API.COMPLETE_IMAGE_QUERY_SUFFIX)) {
+                    encoded = encoded.slice(0, -API.COMPLETE_IMAGE_QUERY_SUFFIX.length);
+                }
+                try { original = decodeURIComponent(encoded); } catch (_) { break; }
+            }
+            return original;
         }
-        return url;
+        if (url.startsWith('data:') || url.startsWith('blob:') || url.startsWith(prefix)) return url;
+        return url.startsWith('http') ? prefix + encodeURIComponent(url) : url;
     }
 
     /**
@@ -534,6 +671,7 @@ class CyberImageViewer {
         // 渲染缩略图
         this._renderThumbnails();
 
+        this._watchRemoval();
         // 加载初始图片
         this._loadImage(this.currentIndex);
 
@@ -571,7 +709,7 @@ class CyberImageViewer {
      * 开始自动播放
      */
     _startAutoPlay() {
-        if (this._autoPlayEnabled) return;
+        if (!this._isActive() || this._autoPlayEnabled) return;
         
         console.log('▶️ 自动播放开始');
         this._autoPlayEnabled = true;
@@ -580,6 +718,8 @@ class CyberImageViewer {
         // 如果当前没有动画，立即开始第一张图片的计时
         if (!this.isAnimating) {
             this._scheduleNextAutoPlay();
+        } else {
+            this._waitForBlockAnimationAndSchedule(this._animationId);
         }
     }
 
@@ -591,10 +731,12 @@ class CyberImageViewer {
         
         console.log('⏸️ 自动播放停止');
         this._autoPlayEnabled = false;
+        this._cancelTimer(this._autoWaitTimerId);
+        this._autoWaitTimerId = null;
         
         // 清除定时器
         if (this._autoPlayTimerId) {
-            clearTimeout(this._autoPlayTimerId);
+            this._cancelTimer(this._autoPlayTimerId);
             this._autoPlayTimerId = null;
         }
         
@@ -632,6 +774,7 @@ class CyberImageViewer {
      * @param {Function} callback - 回调函数，参数为新的自动播放状态
      */
     onAutoPlayStateChange(callback) {
+        if (this._isClosing || this._disposed) return;
         this._autoPlayStateChangeCallbacks.push(callback);
     }
 
@@ -642,7 +785,7 @@ class CyberImageViewer {
     _scheduleNextAutoPlay() {
         // 清除之前的定时器
         if (this._autoPlayTimerId) {
-            clearTimeout(this._autoPlayTimerId);
+            this._cancelTimer(this._autoPlayTimerId);
             this._autoPlayTimerId = null;
         }
         
@@ -652,7 +795,7 @@ class CyberImageViewer {
         
         console.log(`⏱️ 自动播放：等待 ${this._autoPlayInterval}ms 后切换`);
         
-        this._autoPlayTimerId = setTimeout(() => {
+        this._autoPlayTimerId = this._scheduleTimer(() => {
             // 检查动画ID守卫
             if (currentAnimId !== this._animationId) {
                 console.log('⛔ 自动播放定时器：动画已被中断，跳过本次切换');
@@ -692,7 +835,10 @@ class CyberImageViewer {
         if (!this._autoPlayEnabled) return;
         
         // 递增动画ID，用于中断检测
-        this._animationId++;
+        this._cancelAnimationWork();
+        this._loadGeneration++;
+        this._mainLoadController?.abort();
+        this._mainLoadController = null;
         const currentAnimId = this._animationId;
         
         // 计算下一张索引（循环播放）
@@ -728,7 +874,10 @@ class CyberImageViewer {
      * @param {number} expectedAnimId - 期望的动画ID
      */
     _waitForBlockAnimationAndSchedule(expectedAnimId) {
+        this._cancelTimer(this._autoWaitTimerId);
+        this._autoWaitTimerId = null;
         const checkAndSchedule = () => {
+            this._autoWaitTimerId = null;
             // 检查动画ID守卫
             if (expectedAnimId !== this._animationId) {
                 console.log('⛔ 自动播放等待：动画已被中断');
@@ -743,7 +892,7 @@ class CyberImageViewer {
             
             // 如果动画还在进行，继续等待
             if (this.isAnimating) {
-                setTimeout(checkAndSchedule, 100);
+                this._autoWaitTimerId = this._scheduleTimer(checkAndSchedule, 100);
                 return;
             }
             
@@ -762,6 +911,7 @@ class CyberImageViewer {
     _bindEvents() {
         // 键盘导航
         this._keydownHandler = (e) => {
+            if (!this._isActive()) return;
             if (e.defaultPrevented || e.isComposing || e.keyCode === 229
                     || e.ctrlKey || e.metaKey || e.altKey || (e.shiftKey && e.key !== 'Tab')) return;
             if (e.key === 'Tab') {
@@ -783,29 +933,29 @@ class CyberImageViewer {
 
             }
         };
-        this.container.addEventListener('keydown', this._keydownHandler);
+        this._listen(this.container, 'keydown', this._keydownHandler);
 
         // 点击导航区域 - 传递点击位置用于波浪效果
-        this.elements.navLeft.addEventListener('click', (e) => {
+        this._listen(this.elements.navLeft, 'click', (e) => {
             this._stopAutoPlay(); // 手动切换时停止自动播放
             this.prev(e.clientX, e.clientY);
         });
-        this.elements.navRight.addEventListener('click', (e) => {
+        this._listen(this.elements.navRight, 'click', (e) => {
             this._stopAutoPlay(); // 手动切换时停止自动播放
             this.next(e.clientX, e.clientY);
         });
 
         // 关闭按钮
-        this.elements.closeBtn.addEventListener('click', () => this.close());
+        this._listen(this.elements.closeBtn, 'click', () => this.close());
 
         // 自动播放按钮
-        this.elements.autoPlayBtn.addEventListener('click', () => this.toggleAutoPlay());
+        this._listen(this.elements.autoPlayBtn, 'click', () => this.toggleAutoPlay());
 
         // 阻止右键菜单
-        this.container.addEventListener('contextmenu', (e) => e.preventDefault());
+        this._listen(this.container, 'contextmenu', (e) => e.preventDefault());
 
         // 阻止拖拽
-        this.elements.mainImage.addEventListener('dragstart', (e) => e.preventDefault());
+        this._listen(this.elements.mainImage, 'dragstart', (e) => e.preventDefault());
     }
 
     /**
@@ -823,7 +973,7 @@ class CyberImageViewer {
             thumb.setAttribute('aria-current', i === this.currentIndex ? 'true' : 'false');
             // 🔒 XSS防护：图片 URL 来自其他用户发布的内容，写入 innerHTML 前必须转义
             thumb.innerHTML = `<img src="${escapeHtml(this.imageUrls[i])}" alt="">`;
-            thumb.addEventListener('click', (e) => {
+            this._listen(thumb, 'click', (e) => {
                 this._stopAutoPlay(); // 手动切换时停止自动播放
                 this.goTo(i, e.clientX, e.clientY);
             });
@@ -854,69 +1004,89 @@ class CyberImageViewer {
      * 加载指定索引的图片
      */
     async _loadImage(index) {
-        if (index < 0 || index >= this.imageUrls.length) return;
-
-        const url = this.imageUrls[index];
+        if (this._isClosing || index < 0 || index >= this.imageUrls.length) return;
+        this._mainLoadController?.abort();
+        const controller = new AbortController();
+        this._mainLoadController = controller;
+        const generation = ++this._loadGeneration;
+        const container = this.container;
         const img = this.elements.mainImage;
-        const loader = this.elements.loader;
-
-        // 隐藏当前图片，准备加载新图片（同步立即隐藏，无过渡）
+        const url = this.imageUrls[index];
+        const current = () => !this._isClosing && generation === this._loadGeneration &&
+            this.container === container && this.elements.mainImage === img;
         img.style.transition = 'none';
         img.style.opacity = '0';
         img.style.visibility = 'hidden';
         img.classList.remove('visible');
-        loader.style.display = 'flex';
-
-        // 检查缓存
-        if (this.preloadCache.has(url)) {
-            const cachedImg = this.preloadCache.get(url);
-            img.src = cachedImg.src;
-            this._onImageLoaded();
-        } else {
-            // 加载图片
-            try {
-                await this._loadImageAsync(url);
+        this.elements.loader.style.display = 'flex';
+        let loaded = false;
+        try {
+            if (this.preloadCache.has(url)) {
+                if (!container.isConnected) return;
+                img.src = this.preloadCache.get(url).src;
+                this._onImageLoaded(generation);
+            } else {
+                await this._loadImageAsync(url, { signal: controller.signal });
+                if (!current() || !container.isConnected) return;
+                this._watchRemoval();
                 img.src = url;
-                this._onImageLoaded();
-            } catch (err) {
-                console.error('图片加载失败');
-                this._onImageError();
+                this._onImageLoaded(generation);
             }
+            loaded = true;
+        } catch (error) {
+            if (!current() || !container.isConnected || controller.signal.aborted) return;
+            this._watchRemoval();
+            console.error('图片加载失败');
+            this._onImageError();
+        } finally {
+            if (this._mainLoadController === controller) this._mainLoadController = null;
         }
-
-        // 更新计数器
+        if (!current()) return;
         this.elements.counterCurrent.textContent = index + 1;
-        this.elements.mainImage.alt = t('image.viewer.image_position', { current: index + 1, total: this.imageUrls.length });
+        img.alt = t('image.viewer.image_position', { current: index + 1, total: this.imageUrls.length });
         this._updateThumbnails();
-
-        // 预加载相邻图片
-        this._preloadAdjacent(index);
+        if (loaded) this._preloadAdjacent(index);
     }
 
-    /**
-     * 异步加载图片
-     */
-    _loadImageAsync(url) {
+    _loadImageAsync(url, { signal } = {}) {
         return new Promise((resolve, reject) => {
+            if (this._isClosing || signal?.aborted) {
+                reject(new DOMException('Image read cancelled', 'AbortError'));
+                return;
+            }
             const img = new Image();
-            console.log('📥 开始加载图片');
-            img.onload = () => {
-                console.log('✅ 图片加载成功');
-                resolve(img);
-            };
-            img.onerror = (err) => {
-                console.error('❌ 图片加载失败');
-                reject(new Error('图片加载失败'));
+            let settled = false;
+            let timer = null;
+            const finish = error => {
+                if (settled) return;
+                settled = true;
+                if (timer !== null) clearTimeout(timer);
+                img.onload = img.onerror = null;
+                signal?.removeEventListener('abort', cancel);
+                this._imageReads.delete(cancel);
+                if (error) {
+                    img.src = '';
+                    reject(error);
+                } else resolve(img);
             };
-            img.src = url;
+            const cancel = () => finish(new DOMException('Image read cancelled', 'AbortError'));
+            this._imageReads.add(cancel);
+            signal?.addEventListener('abort', cancel, { once: true });
+            img.onload = () => finish(null);
+            img.onerror = () => finish(new Error('Image read failed'));
+            timer = setTimeout(() => finish(new Error('Image read timed out')), API.TIMEOUT);
+            try { img.src = url; } catch (error) { finish(error); }
         });
     }
 
     /**
      * 图片加载完成回调 - 触发方块合并动画
      */
-    _onImageLoaded() {
-        requestAnimationFrame(() => {
+    _onImageLoaded(generation = this._loadGeneration) {
+        const container = this.container;
+        this._scheduleFrame(() => {
+            if (this._isClosing || generation !== this._loadGeneration ||
+                    this.container !== container || !container.isConnected) return;
             this.elements.loader.style.display = 'none';
             // 确保图片初始隐藏，不要在这里显示图片（同步立即隐藏，无过渡）
             const img = this.elements.mainImage;
@@ -941,10 +1111,13 @@ class CyberImageViewer {
      * 使用与粒子消散相同的网格参数和背景图裁切方式
      */
     _playBlockAssemblyAnimation() {
+        if (!this._isActive()) return;
+        this.isAnimating = true;
         const currentAnimId = this._animationId; // 记录当前动画ID
         const img = this.elements.mainImage;
         const wrapper = this.elements.wrapper;
         const imgSrc = img.src;
+        const imageBackground = `url(${JSON.stringify(imgSrc)})`;
 
         // 调试日志
         console.log('🎬 方块聚合动画开始');
@@ -1009,8 +1182,7 @@ class CyberImageViewer {
                 block.style.top = `${r * blockSide}px`;
                 
                 // 使用与粒子消散相同的背景图设置方式
-                // 注意：URL已经由_proxyImageUrl处理过，直接使用，不要再次编码
-                block.style.backgroundImage = `url("${imgSrc}")`;
+                block.style.backgroundImage = imageBackground;
                 block.style.backgroundSize = `${displayWidth}px ${displayHeight}px`;
                 // 背景定位：根据正方形方块的实际位置计算
                 const bgPosX = c * blockSide;
@@ -1056,8 +1228,8 @@ class CyberImageViewer {
         blocksContainer.getBoundingClientRect();
 
         // 触发方块聚合动画 - 使用双重requestAnimationFrame确保浏览器已渲染初始状态
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
+        this._scheduleFrame(() => {
+            this._scheduleFrame(() => {
                 // 检查动画是否已被中断
                 if (currentAnimId !== this._animationId) {
                     console.log('⛔ 方块聚合动画被中断，跳过动画触发');
@@ -1078,7 +1250,7 @@ class CyberImageViewer {
         console.log('⏱️ 动画持续时间:', animationDuration, 'ms');
 
         // 动画完成后显示完整图片并清理方块
-        setTimeout(() => {
+        this._scheduleTimer(() => {
             // 检查动画是否已被中断
             if (currentAnimId !== this._animationId) {
                 // 动画已被中断，只做清理
@@ -1109,7 +1281,7 @@ class CyberImageViewer {
             blocksContainer.style.transition = 'opacity 0.15s ease';
 
             // 等待方块淡出完成后移除容器，然后恢复transition
-            setTimeout(() => {
+            this._scheduleTimer(() => {
                 // 内层timeout也要检查
                 if (currentAnimId !== this._animationId) {
                     if (blocksContainer.parentNode) {
@@ -1137,10 +1309,12 @@ class CyberImageViewer {
      * 支持多种路径类型：弧线(90%)、S形(5%)、直线(5%)
      */
     async _playParticleDisperseAnimation(clickX, clickY) {
+        if (!this._isActive()) return;
         const currentAnimId = this._animationId; // 记录当前动画ID
         const img = this.elements.mainImage;
         const wrapper = this.elements.wrapper;
         const imgSrc = img.src;
+        const imageBackground = `url(${JSON.stringify(imgSrc)})`;
 
         console.log('💨 粒子消散动画开始');
 
@@ -1257,7 +1431,7 @@ class CyberImageViewer {
                     particleInner = document.createElement('div');
                     particleInner.style.width = '100%';
                     particleInner.style.height = '100%';
-                    particleInner.style.backgroundImage = `url("${imgSrc}")`;
+                    particleInner.style.backgroundImage = imageBackground;
                     particleInner.style.backgroundSize = `${displayWidth}px ${displayHeight}px`;
                     particleInner.style.backgroundPosition = `-${c * particleSide}px -${r * particleSide}px`;
                     particleInner.style.backgroundRepeat = 'no-repeat';
@@ -1342,7 +1516,7 @@ class CyberImageViewer {
                     particle.style.left = `${c * particleSide}px`;
                     particle.style.top = `${r * particleSide}px`;
 
-                    particle.style.backgroundImage = `url("${imgSrc}")`;
+                    particle.style.backgroundImage = imageBackground;
                     particle.style.backgroundSize = `${displayWidth}px ${displayHeight}px`;
                     particle.style.backgroundPosition = `-${c * particleSide}px -${r * particleSide}px`;
                     particle.style.backgroundRepeat = 'no-repeat';
@@ -1388,8 +1562,8 @@ class CyberImageViewer {
         particlesContainer.getBoundingClientRect();
 
         // 触发消散动画 - 使用双重requestAnimationFrame
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
+        this._scheduleFrame(() => {
+            this._scheduleFrame(() => {
                 console.log('🎭 开始粒子消散动画');
                 particles.forEach(({ element, innerElement, disperseX, disperseY, rotate, pathType }) => {
                     if (pathType === 'arc' || pathType === 's-curve') {
@@ -1416,7 +1590,7 @@ class CyberImageViewer {
 
         // 等待动画完成
         return new Promise(resolve => {
-            setTimeout(() => {
+            this._scheduleTimer(() => {
                 console.log('✨ 粒子消散动画完成');
                 // 无论是否被中断，都要清理粒子容器
                 if (particlesContainer.parentNode) {
@@ -1430,7 +1604,7 @@ class CyberImageViewer {
                     img.classList.remove('visible');
                 }
                 resolve();
-            }, animationDuration);
+            }, animationDuration, resolve);
         });
     }
 
@@ -1441,35 +1615,51 @@ class CyberImageViewer {
         this.elements.loader.style.display = 'none';
         this.elements.mainImage.src = this._createErrorPlaceholder();
         // 错误图片直接显示，不使用方块动画
+        this.elements.mainImage.style.visibility = 'visible';
+        this.elements.mainImage.style.opacity = '1';
         this.elements.mainImage.classList.add('visible');
+        this.isAnimating = false;
     }
 
     /**
      * 创建错误占位图
      */
     _createErrorPlaceholder() {
-        return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%231a1a1a' width='400' height='300'/%3E%3Ctext x='200' y='140' text-anchor='middle' fill='%23ff6b6b' font-size='48'%3E⚠️%3C/text%3E%3Ctext x='200' y='180' text-anchor='middle' fill='%23888' font-size='14'%3E图片加载失败%3C/text%3E%3C/svg%3E`;
+        return 'data:image/svg+xml,' + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"><rect fill="#1a1a1a" width="400" height="300"/><text x="200" y="140" text-anchor="middle" fill="#ff6b6b" font-size="48">⚠️</text><text x="200" y="180" text-anchor="middle" fill="#888" font-size="14">${escapeHtml(t('image.load_failed'))}</text></svg>`);
     }
 
     /**
      * 预加载相邻图片
      */
     _preloadAdjacent(currentIndex) {
-        const indices = [
-            currentIndex - 1,
-            currentIndex + 1
-        ].filter(i => i >= 0 && i < this.imageUrls.length);
-
-        indices.forEach(index => {
-            const url = this.imageUrls[index];
-            if (!this.preloadCache.has(url)) {
-                const img = new Image();
-                img.onload = () => {
-                    this.preloadCache.set(url, img);
-                };
-                img.src = url;
+        if (this._isClosing || !this.container?.isConnected) return;
+        const wanted = new Set([currentIndex - 1, currentIndex + 1]
+            .filter(index => index >= 0 && index < this.imageUrls.length)
+            .map(index => this.imageUrls[index]));
+        const retained = new Set([...wanted, this.imageUrls[currentIndex]]);
+        for (const [url, image] of this.preloadCache) {
+            if (!retained.has(url)) {
+                image.src = '';
+                this.preloadCache.delete(url);
             }
-        });
+        }
+        for (const [url, controller] of this._preloadRequests) {
+            if (!wanted.has(url)) {
+                controller.abort();
+                this._preloadRequests.delete(url);
+            }
+        }
+        for (const url of wanted) {
+            if (this.preloadCache.has(url) || this._preloadRequests.has(url)) continue;
+            const controller = new AbortController();
+            this._preloadRequests.set(url, controller);
+            this._loadImageAsync(url, { signal: controller.signal }).then(img => {
+                if (!this._isClosing && this.container?.isConnected && !controller.signal.aborted &&
+                        this._preloadRequests.get(url) === controller) this.preloadCache.set(url, img);
+            }).catch(() => {}).finally(() => {
+                if (this._preloadRequests.get(url) === controller) this._preloadRequests.delete(url);
+            });
+        }
     }
 
     /**
@@ -1480,23 +1670,23 @@ class CyberImageViewer {
      * @param {number} clickY - 点击位置的Y坐标（用于波浪效果）
      */
     async goTo(index, clickX, clickY) {
+        if (this._isClosing || !this.container?.isConnected) return;
         if (index === this.currentIndex) return;
         if (index < 0 || index >= this.imageUrls.length) return;
 
         // 递增动画ID，用于中断检测
-        this._animationId++;
+        const interrupted = this.isAnimating;
+        this._cancelAnimationWork();
+        this._loadGeneration++;
+        this._mainLoadController?.abort();
+        this._mainLoadController = null;
         const currentAnimId = this._animationId;
 
         // 如果正在动画中，立��清理并跳过载出动画，直接切换到新图片
-        if (this.isAnimating) {
+        if (interrupted) {
+            this.isAnimating = true;
             console.log('⚡ 快速切换：跳过载出动画，直接切换到图片索引:', index);
             
-            // 清理所有动画容器
-            const blocks = this.container.querySelector('.cyber-blocks-container');
-            if (blocks) blocks.remove();
-            const particles = this.container.querySelector('.cyber-particles-container');
-            if (particles) particles.remove();
-            
             // 立即隐藏当前图片（同步操作，防止旧图闪现）
             const img = this.elements.mainImage;
             img.style.transition = 'none';
@@ -1525,7 +1715,7 @@ class CyberImageViewer {
         if (currentAnimId !== this._animationId) return;
 
         // 2. 载出动画完全结束后，等待0.5秒间隔
-        await new Promise(resolve => setTimeout(resolve, 250));
+        await new Promise(resolve => this._scheduleTimer(resolve, 250, resolve));
 
         // 检查是否被新的切换中断
         if (currentAnimId !== this._animationId) return;
@@ -1566,27 +1756,24 @@ class CyberImageViewer {
      * 关闭查看器
      */
     close() {
-        if (this._isClosing) return;
+        if (this._isClosing || this._disposed) return;
         this._isClosing = true;
-        // 停止自动播放并清除定时器
-        this._stopAutoPlay();
-        
-        // 清理事件监听
-        this.container.removeEventListener('keydown', this._keydownHandler);
-
-        // 添加关闭动画
-        this.container.style.opacity = '1';
-        this.container.style.transition = 'opacity 0.3s ease';
-        
-        requestAnimationFrame(() => {
-            this.container.style.opacity = '0';
-            setTimeout(() => {
-                if (this.container.parentNode) {
-                    this.container.parentNode.removeChild(this.container);
-                }
-                if (this._returnFocus?.isConnected && typeof this._returnFocus.focus === 'function') this._returnFocus.focus();
-            }, 300);
-        });
+        this._stopOwnedWork();
+        if (!this.container?.isConnected) { this._dispose(); return; }
+        const container = this.container;
+        container.style.opacity = '1';
+        container.style.transition = 'opacity 0.3s ease';
+        this._scheduleFrame(() => {
+            container.style.opacity = '0';
+            this._scheduleTimer(() => {
+                const restore = container.contains(document.activeElement);
+                const previousFocus = this._returnFocus;
+                container.remove();
+                this._dispose();
+                if (restore && document.activeElement === document.body && previousFocus?.isConnected &&
+                        typeof previousFocus.focus === 'function') previousFocus.focus();
+            }, 300, null, true);
+        }, true);
     }
 }
 
@@ -1619,10 +1806,10 @@ export function openImageViewer(imageUrls, startIndex = 0, options = {}) {
     viewer.elements.closeBtn.focus();
 
     // 添加入场动画
-    requestAnimationFrame(() => {
+    viewer._scheduleFrame(() => {
         container.style.opacity = '0';
         container.style.transition = 'opacity 0.3s ease';
-        requestAnimationFrame(() => {
+        viewer._scheduleFrame(() => {
             container.style.opacity = '1';
         });
     });

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

@@ -12,7 +12,7 @@
 // ==========================================
 
 import { t } from "./用户体验增强.js";
-import { escapeHtml } from "../core/全局配置.js";
+import { escapeHtml, API, UI } from "../core/全局配置.js";
 import { openImageViewer } from "./图片展示测试.js";
 
 // 🔧 通用SVG占位图生成函数
@@ -34,25 +34,31 @@ function getErrorSVG() { return createErrorSVG(t('image.load_failed')); }
 function getTimeoutSVG() { return createTimeoutSVG(t('image.load_timeout')); }
 
 // 🔧 P3优化：带超时机制的图片加载器
-const IMAGE_LOAD_TIMEOUT = 30000;  // 30秒超时
-
-function loadImageWithTimeout(url, timeout = IMAGE_LOAD_TIMEOUT) {
+function loadImageWithTimeout(url, signal) {
     return new Promise((resolve, reject) => {
-        const img = new Image();
-        const timer = setTimeout(() => {
-            img.onload = img.onerror = null;
-            reject(new Error('图片加载超时'));
-        }, timeout);
-        
-        img.onload = () => {
-            clearTimeout(timer);
-            resolve(img);
-        };
-        img.onerror = () => {
-            clearTimeout(timer);
-            reject(new Error('图片加载失败'));
+        if (signal.aborted) { reject(new DOMException('Image read cancelled', 'AbortError')); return; }
+        const image = new Image();
+        let settled = false;
+        let timer = null;
+        const finish = error => {
+            if (settled) return;
+            settled = true;
+            if (timer !== null) clearTimeout(timer);
+            image.onload = image.onerror = null;
+            signal.removeEventListener('abort', cancel);
+            if (error) { image.src = ''; reject(error); }
+            else resolve(image);
         };
-        img.src = url;
+        const cancel = () => finish(new DOMException('Image read cancelled', 'AbortError'));
+        signal.addEventListener('abort', cancel, { once: true });
+        image.onload = () => finish(null);
+        image.onerror = () => finish(new Error('Image read failed'));
+        timer = setTimeout(() => {
+            const error = new Error('Image read timed out');
+            error.name = 'TimeoutError';
+            finish(error);
+        }, API.TIMEOUT);
+        try { image.src = url; } catch (error) { finish(error); }
     });
 }
 
@@ -65,8 +71,8 @@ export function getCoverSandboxHTML(imageSource, lazyLoad = true) {
     // 兼容：接受单个URL或数组
     let imageUrls = [];
     if (Array.isArray(imageSource)) {
-        imageUrls = imageSource.filter(url => url && url.trim());
-    } else if (imageSource && imageSource.trim()) {
+        imageUrls = imageSource.filter(url => typeof url === 'string' && url.trim());
+    } else if (typeof imageSource === 'string' && imageSource.trim()) {
         imageUrls = [imageSource];
     }
     
@@ -75,7 +81,7 @@ export function getCoverSandboxHTML(imageSource, lazyLoad = true) {
     const firstUrl = imageUrls[0];
     
     // 🚀 本地代理URL已缓存，无需懒加载（从磁盘读取几乎瞬时）
-    const isLocalProxy = firstUrl && firstUrl.startsWith('/community_hub/image?url=');
+    const isLocalProxy = firstUrl && firstUrl.startsWith(API.LOCAL_IMAGE_PROXY_PREFIX);
     const shouldLazy = lazyLoad && !isLocalProxy;
     
     // 🔒 XSS防护：图片 URL 来自其他用户发布的内容，写入 HTML 属性前必须转义
@@ -86,36 +92,26 @@ export function getCoverSandboxHTML(imageSource, lazyLoad = true) {
     
     // 🖼️ 多图模式：显示左右切换按钮和计数器
     const hasMultiple = imageUrls.length > 1;
+    const positionLabel = escapeHtml(t('image.viewer.image_position', { current: 1, total: imageUrls.length }));
     const navButtons = hasMultiple ? `
-        <button class="btn-prev" style="position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; font-size: 18px; z-index: 20; display: flex; align-items: center; justify-content: center; transition: 0.2s;" onmouseover="this.style.background='rgba(76,175,80,0.8)'" onmouseout="this.style.background='rgba(0,0,0,0.6)'">❮</button>
-        <button class="btn-next" style="position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; font-size: 18px; z-index: 20; display: flex; align-items: center; justify-content: center; transition: 0.2s;" onmouseover="this.style.background='rgba(76,175,80,0.8)'" onmouseout="this.style.background='rgba(0,0,0,0.6)'">❯</button>
-        <div class="img-counter" style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; z-index: 20;">1 / ${imageUrls.length}</div>
+        <button type="button" class="sandbox-control btn-prev" aria-label="${escapeHtml(t('image.viewer.previous_short'))}" title="${escapeHtml(t('image.viewer.previous_short'))}">❮</button>
+        <button type="button" class="sandbox-control btn-next" aria-label="${escapeHtml(t('image.viewer.next_short'))}" title="${escapeHtml(t('image.viewer.next_short'))}">❯</button>
+        <div class="img-counter" role="status" aria-label="${positionLabel}">1 / ${imageUrls.length}</div>
     ` : '';
-    
-    // 🔒 图片保护：禁用右键菜单、拖拽
-    const protectionStyles = `
-        -webkit-user-select: none; 
-        -moz-user-select: none; 
-        -ms-user-select: none; 
-        user-select: none; 
-        pointer-events: none;
-        -webkit-user-drag: none;
-    `;
-    
     return `
-        <div style="font-size: 12px; font-weight: bold; margin-bottom: 6px; color: #aaa;">🖼️ ${t('image.gallery')}${hasMultiple ? ` (${imageUrls.length})` : ''}</div>
-        <div class="img-viewport" data-images='${escapeHtml(JSON.stringify(imageUrls))}' data-current="0" style="position: relative; width: 100%; height: 260px; background: #111; border: 2px dashed #666; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; cursor: grab; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;" oncontextmenu="return false;">
-            <img class="target-img ${lazyClass}" src="${escapeHtml(imgSrc)}" ${dataAttr} draggable="false" style="max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; transition: transform 0.05s linear, opacity 0.3s ease; ${protectionStyles}">
+        <div class="sandbox-heading">🖼️ ${t('image.gallery')}${hasMultiple ? ` (${imageUrls.length})` : ''}</div>
+        <div class="img-viewport image-sandbox" role="group" aria-label="${escapeHtml(t('image.gallery'))}" data-images='${escapeHtml(JSON.stringify(imageUrls))}' data-current="0">
+            <img class="target-img ${lazyClass}" src="${escapeHtml(imgSrc)}" ${dataAttr} draggable="false" alt="${positionLabel}">
             ${navButtons}
-            <div style="position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; opacity: 0.3; transition: 0.3s; z-index: 10;" onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=0.3">
-                <button class="btn-zoom-out" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold;">-</button>
-                <button class="btn-zoom-reset" style="background: #333; color: #fff; border: 1px solid #555; height: 28px; padding: 0 8px; border-radius: 4px; cursor: pointer; font-size: 12px;">${t('common.reset')}</button>
-                <button class="btn-zoom-in" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold;">+</button>
-                <button class="btn-fullscreen" style="background: #333; color: #fff; border: 1px solid #555; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-left: 5px;" title="${escapeHtml(t('image.viewer.fullscreen'))}">⛶</button>
+            <div class="sandbox-tools">
+                <button type="button" class="sandbox-control btn-zoom-out" aria-label="${escapeHtml(t('image.zoom_out'))}" title="${escapeHtml(t('image.zoom_out'))}">−</button>
+                <button type="button" class="sandbox-control btn-zoom-reset" title="${escapeHtml(t('common.reset'))}">${t('common.reset')}</button>
+                <button type="button" class="sandbox-control btn-zoom-in" aria-label="${escapeHtml(t('image.zoom_in'))}" title="${escapeHtml(t('image.zoom_in'))}">+</button>
+                <button type="button" class="sandbox-control btn-fullscreen" aria-label="${escapeHtml(t('image.viewer.fullscreen'))}" title="${escapeHtml(t('image.viewer.fullscreen'))}">⛶</button>
             </div>
-            <div class="sliders-wrapper" style="opacity: 0.2; transition: 0.3s; position: absolute; width: 100%; height: 100%; top:0; left:0; pointer-events: none;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=0.2">
-                <input type="range" class="slider-x" min="-400" max="400" value="0" style="position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 80%; pointer-events: auto; z-index: 10;">
-                <input type="range" class="slider-y" min="-400" max="400" value="0" style="position: absolute; left: -100px; top: 50%; transform: translateY(-50%) rotate(270deg); width: 230px; pointer-events: auto; z-index: 10;">
+            <div class="sliders-wrapper">
+                <input type="range" class="slider-x" min="-400" max="400" value="0" aria-label="${escapeHtml(t('image.pan_horizontal'))}">
+                <input type="range" class="slider-y" min="-400" max="400" value="0" aria-label="${escapeHtml(t('image.pan_vertical'))}">
             </div>
         </div>
     `;
@@ -125,201 +121,192 @@ export function getCoverSandboxHTML(imageSource, lazyLoad = true) {
  * 🖼️ 设置图片沙盒事件（轮播、缩放、拖动）
  */
 export function setupImageSandboxEvents(detailView) {
-    const viewport = detailView.querySelector('.img-viewport');
+    const viewport = detailView?.matches?.('.img-viewport') ? detailView : detailView?.querySelector('.img-viewport');
     if (!viewport) return;
-
-    const targetImg = detailView.querySelector('.target-img');
-    const btnIn = detailView.querySelector('.btn-zoom-in');
-    const btnOut = detailView.querySelector('.btn-zoom-out');
-    const btnReset = detailView.querySelector('.btn-zoom-reset');
-    const sliderX = detailView.querySelector('.slider-x');
-    const sliderY = detailView.querySelector('.slider-y');
-    const btnPrev = detailView.querySelector('.btn-prev');
-    const btnNext = detailView.querySelector('.btn-next');
-    const imgCounter = detailView.querySelector('.img-counter');
-    
-    // 🔒 图片保护：禁用右键菜单
-    viewport.addEventListener('contextmenu', (e) => e.preventDefault());
-    targetImg.addEventListener('dragstart', (e) => e.preventDefault());
-
-    // 📦 解析图片数组
-    let imageUrls = [];
-    let currentIndex = 0;
-    try {
-        imageUrls = JSON.parse(viewport.dataset.images || '[]');
-    } catch (e) {
-        imageUrls = [];
-    }
-    
-    // 🖼️ 加载指定索引的图片（🔧 P3优化：带超时机制）
-    const loadImage = async (index) => {
-        if (index < 0 || index >= imageUrls.length) return;
+    viewport._sandboxCleanup?.();
+    const targetImg = viewport.querySelector('.target-img');
+    const btnIn = viewport.querySelector('.btn-zoom-in');
+    const btnOut = viewport.querySelector('.btn-zoom-out');
+    const btnReset = viewport.querySelector('.btn-zoom-reset');
+    const sliderX = viewport.querySelector('.slider-x');
+    const sliderY = viewport.querySelector('.slider-y');
+    if (![targetImg, btnIn, btnOut, btnReset, sliderX, sliderY].every(Boolean)) return;
+    let imageUrls;
+    try { imageUrls = JSON.parse(viewport.dataset.images || '[]'); } catch (_) { imageUrls = []; }
+    if (!Array.isArray(imageUrls)) imageUrls = [];
+    imageUrls = imageUrls.filter(url => typeof url === 'string' && url.trim());
+    if (!imageUrls.length) return;
+    let currentIndex = Number.parseInt(viewport.dataset.current || '0', 10);
+    if (!Number.isInteger(currentIndex) || currentIndex < 0 || currentIndex >= imageUrls.length) currentIndex = 0;
+    let disposed = false, generation = 0, readController = null, closeViewer = null;
+    let observer = null, wasMounted = false, fallbackNode = null, fallbackTimer = null;
+    const stops = [];
+    const owns = () => !disposed && viewport._sandboxCleanup === cleanup;
+    const connected = () => viewport.isConnected && (detailView === viewport || detailView.contains(viewport));
+    const current = () => owns() && connected();
+    const cleanup = () => {
+        if (disposed) return;
+        disposed = true;
+        generation++;
+        readController?.abort();
+        readController = null;
+        for (const stop of stops) stop();
+        stops.length = 0;
+        observer?.disconnect();
+        observer = null;
+        if (fallbackTimer !== null) clearTimeout(fallbackTimer);
+        fallbackTimer = null;
+        fallbackNode?.remove();
+        fallbackNode = null;
+        const close = closeViewer;
+        closeViewer = null;
+        try { close?.(); } catch (_) { console.warn('Image sandbox viewer cleanup failed'); }
+        if (viewport._sandboxCleanup === cleanup) viewport._sandboxCleanup = null;
+    };
+    viewport._sandboxCleanup = cleanup;
+    const watchRemoval = () => {
+        if (!owns() || observer) return;
+        const inspect = records => {
+            if (!owns() || observer !== ownedObserver) return;
+            if (connected()) { wasMounted = true; return; }
+            const appeared = records.some(record => [...record.addedNodes, ...record.removedNodes]
+                .some(node => node === viewport || node.contains?.(viewport)));
+            if (wasMounted || appeared) cleanup();
+        };
+        const ownedObserver = new MutationObserver(inspect);
+        observer = ownedObserver;
+        observer.observe(document.body, { childList: true, subtree: true });
+        queueMicrotask(() => {
+            if (!owns() || observer !== ownedObserver) return;
+            inspect(ownedObserver.takeRecords());
+            if (!connected() && !wasMounted && owns()) { ownedObserver.disconnect(); observer = null; }
+        });
+    };
+    const guard = callback => event => {
+        if (!current()) return;
+        watchRemoval();
+        callback(event);
+    };
+    const listen = (target, type, callback, options) => {
+        const owned = guard(callback);
+        target.addEventListener(type, owned, options);
+        stops.push(() => target.removeEventListener(type, owned, options));
+    };
+    const click = (target, callback) => {
+        if (!target) return;
+        const owned = guard(callback);
+        target.onclick = owned;
+        stops.push(() => { if (target.onclick === owned) target.onclick = null; });
+    };
+    let scale = Number(viewport.dataset.sandboxScale);
+    if (!Number.isFinite(scale) || scale < 0.5 || scale > 5) scale = 1;
+    const syncTransform = () => {
+        viewport.dataset.sandboxScale = String(scale);
+        targetImg.style.transform = `scale(${scale}) translate(${sliderX.value}px, ${sliderY.value}px)`;
+    };
+    const counter = viewport.querySelector('.img-counter');
+    const updateCounter = () => {
+        viewport.dataset.current = String(currentIndex);
+        const label = t('image.viewer.image_position', { current: currentIndex + 1, total: imageUrls.length });
+        targetImg.alt = label;
+        if (counter) {
+            counter.textContent = `${currentIndex + 1} / ${imageUrls.length}`;
+            counter.setAttribute('aria-label', label);
+        }
+    };
+    const loadImage = async index => {
+        if (!owns() || index < 0 || index >= imageUrls.length) return;
+        readController?.abort();
+        const controller = new AbortController();
+        readController = controller;
+        const expected = ++generation;
         currentIndex = index;
-        viewport.dataset.current = index;
-        
-        const url = imageUrls[index];
+        updateCounter();
+        scale = 1; sliderX.value = 0; sliderY.value = 0; syncTransform();
+        targetImg.classList.remove('lazy-loaded', 'lazy-error');
         targetImg.classList.add('lazy-loading');
         targetImg.src = getPlaceholderSVG();
-        
+        const url = imageUrls[index];
         try {
-            await loadImageWithTimeout(url);
+            await loadImageWithTimeout(url, controller.signal);
+            if (!current() || expected !== generation) return;
+            watchRemoval();
             targetImg.src = url;
-            targetImg.classList.remove('lazy-loading');
+            targetImg.classList.remove('lazy-loading', 'lazy-error');
             targetImg.classList.add('lazy-loaded');
             targetImg.style.opacity = '1';
-        } catch (err) {
-            // 区分超时和加载失败
-            targetImg.src = err.message.includes('超时') ? getTimeoutSVG() : getErrorSVG();
-            targetImg.classList.remove('lazy-loading');
+        } catch (error) {
+            if (!current() || expected !== generation || controller.signal.aborted) return;
+            watchRemoval();
+            targetImg.src = error.name === 'TimeoutError' ? getTimeoutSVG() : getErrorSVG();
+            targetImg.classList.remove('lazy-loading', 'lazy-loaded');
             targetImg.classList.add('lazy-error');
+        } finally {
+            if (readController === controller) readController = null;
         }
-        
-        // 更新计数器
-        if (imgCounter) {
-            imgCounter.textContent = `${index + 1} / ${imageUrls.length}`;
-        }
-        
-        // 重置缩放和位置
-        scale = 1;
-        sliderX.value = 0;
-        sliderY.value = 0;
-        syncTransform();
     };
-
-    // ⚡ 初始加载第一张图片（🔧 P3优化：带超时机制）
-    if (targetImg.classList.contains('lazy-loading') && targetImg.dataset.src) {
-        const realSrc = targetImg.dataset.src;
-        
-        loadImageWithTimeout(realSrc).then(() => {
-            targetImg.src = realSrc;
-            targetImg.classList.remove('lazy-loading');
-            targetImg.classList.add('lazy-loaded');
-            targetImg.style.opacity = '1';
-            delete targetImg.dataset.src;
-        }).catch(err => {
-            targetImg.src = err.message.includes('超时') ? getTimeoutSVG() : getErrorSVG();
-            targetImg.classList.remove('lazy-loading');
-            targetImg.classList.add('lazy-error');
-        });
-    }
-
-    // 🖼️ 轮播切换按钮事件
-    if (btnPrev && btnNext) {
-        btnPrev.onclick = (e) => {
-            e.stopPropagation();
-            loadImage(currentIndex > 0 ? currentIndex - 1 : imageUrls.length - 1);
-        };
-        btnNext.onclick = (e) => {
-            e.stopPropagation();
-            loadImage(currentIndex < imageUrls.length - 1 ? currentIndex + 1 : 0);
-        };
-    }
-
-    // 🔍 缩放功能
-    let scale = 1.0;
-    const syncTransform = () => { 
-        targetImg.style.transform = `scale(${scale}) translate(${sliderX.value}px, ${sliderY.value}px)`; 
-    };
-    
-    const zoom = (delta) => { 
-        scale = Math.max(0.5, Math.min(5.0, scale + delta)); 
-        syncTransform(); 
-    };
-
-    btnIn.onclick = () => zoom(0.2); 
-    btnOut.onclick = () => zoom(-0.2);
-    btnReset.onclick = () => { scale = 1; sliderX.value = 0; sliderY.value = 0; syncTransform(); };
-    
-    // ⛶ 全屏播放按钮事件
-    const btnFullscreen = viewport.querySelector('.btn-fullscreen');
-    if (btnFullscreen) {
-        btnFullscreen.onclick = (e) => {
-            e.stopPropagation();
-            
-            // 收集当前viewport的所有图片URL
-            const dataImages = viewport.getAttribute('data-images');
-            let imageUrls = [];
-            
-            if (dataImages) {
-                try {
-                    imageUrls = JSON.parse(dataImages);
-                } catch (e) {
-                    // 单图模式
-                    const img = viewport.querySelector('.target-img');
-                    if (img && img.src) {
-                        imageUrls = [img.src];
-                    }
-                }
-            } else {
-                // 无data-images属性，取当前img的src
-                const img = viewport.querySelector('.target-img');
-                if (img && img.src) {
-                    imageUrls = [img.src];
-                }
-            }
-            
-            // 获取当前图片索引
-            const currentIndex = parseInt(viewport.getAttribute('data-current') || '0', 10);
-            
-            // 🔍 调试日志：输出收集到的图片URL
-            console.log('🖼️ 全屏播放图片:', '图片数量:', imageUrls.length, '当前索引:', currentIndex);
-            
-            if (imageUrls.length > 0) {
-                // 打开全屏图像播放器（使用静态import，避免动态import路径问题）
-                try {
-                    openImageViewer(imageUrls, currentIndex, { opaque: true });
-                } catch (err) {
-                    console.error('无法打开图像播放器');
-                    // 显示用户可见的错误提示
-                    import('./UI交互提示组件.js').then(module => {
-                        module.showToast(t('image.viewer.load_failed'), 'error');
-                    }).catch(() => {
-                        // 动态import也失败时，创建简单的内联提示
-                        const fallback = document.createElement('div');
-                        fallback.textContent = t('image.viewer.load_failed');
-                        Object.assign(fallback.style, { position: 'fixed', top: '50px', left: '50%', transform: 'translateX(-50%)', background: '#F44336', color: '#fff', padding: '10px 20px', borderRadius: '8px', zIndex: '10000', fontSize: '14px' });
-                        document.body.appendChild(fallback);
-                        setTimeout(() => fallback.remove(), 3000);
-                    });
-                }
-            } else {
-                console.warn('⚠️ 没有可播放的图片URL');
-            }
-        };
-    }
-    
-    viewport.addEventListener('wheel', (e) => { e.preventDefault(); zoom(e.deltaY > 0 ? -0.1 : 0.1); });
-    sliderX.addEventListener('input', syncTransform); 
-    sliderY.addEventListener('input', syncTransform);
-
-    // ✨ 拖动功能（统一管理事件监听器）
-    let isDragging = false; let startX, startY, initValX, initValY;
-    
-    // 🔧 命名事件处理函数，便于清理
-    const handleMouseMove = (e) => {
-        if (!isDragging) return;
-        const dx = (e.clientX - startX) / scale; const dy = (e.clientY - startY) / scale;
-        sliderX.value = initValX + dx; sliderY.value = initValY + dy; syncTransform();
+    delete targetImg.dataset.src;
+    watchRemoval();
+    updateCounter();
+    syncTransform();
+    const ready = targetImg.getAttribute('src') === imageUrls[currentIndex] &&
+        (targetImg.classList.contains('lazy-loaded') || (targetImg.complete && targetImg.naturalWidth > 0));
+    if (!ready) loadImage(currentIndex);
+    else { targetImg.classList.remove('lazy-loading', 'lazy-error'); targetImg.classList.add('lazy-loaded'); }
+    listen(viewport, 'contextmenu', event => event.preventDefault());
+    listen(targetImg, 'dragstart', event => event.preventDefault());
+    click(viewport.querySelector('.btn-prev'), event => { event.stopPropagation(); loadImage(currentIndex > 0 ? currentIndex - 1 : imageUrls.length - 1); });
+    click(viewport.querySelector('.btn-next'), event => { event.stopPropagation(); loadImage(currentIndex < imageUrls.length - 1 ? currentIndex + 1 : 0); });
+    const zoom = delta => { scale = Math.max(0.5, Math.min(5, scale + delta)); syncTransform(); };
+    click(btnIn, () => zoom(0.2));
+    click(btnOut, () => zoom(-0.2));
+    click(btnReset, () => { scale = 1; sliderX.value = 0; sliderY.value = 0; syncTransform(); });
+    const notifyFailure = async () => {
+        try {
+            const module = await import('./UI交互提示组件.js');
+            if (current()) module.showToast(t('image.viewer.load_failed'), 'error');
+        } catch (_) {
+            if (!current()) return;
+            fallbackNode?.remove();
+            if (fallbackTimer !== null) clearTimeout(fallbackTimer);
+            const node = document.createElement('div');
+            node.textContent = t('image.viewer.load_failed');
+            Object.assign(node.style, { position: 'fixed', top: '50px', left: '50%', transform: 'translateX(-50%)', background: '#F44336', color: '#fff', padding: '10px 20px', borderRadius: '8px', zIndex: '10000', fontSize: '14px' });
+            fallbackNode = node;
+            document.body.appendChild(node);
+            fallbackTimer = setTimeout(() => { node.remove(); if (fallbackNode === node) { fallbackNode = null; fallbackTimer = null; } }, UI.TOAST.DURATION);
+        }
     };
-    
-    const handleMouseUp = () => { isDragging = false; viewport.style.cursor = 'grab'; };
-    
-    viewport.addEventListener('mousedown', (e) => {
-        if(e.target.tagName.toLowerCase() === 'input' || e.target.tagName.toLowerCase() === 'button') return;
-        e.preventDefault(); // 阻止浏览器默认的文本/图片选中行为
-        isDragging = true; viewport.style.cursor = 'grabbing';
-        startX = e.clientX; startY = e.clientY; initValX = parseInt(sliderX.value); initValY = parseInt(sliderY.value);
+    click(viewport.querySelector('.btn-fullscreen'), event => {
+        event.stopPropagation();
+        try { closeViewer?.(); closeViewer = openImageViewer(imageUrls, currentIndex, { opaque: true }); }
+        catch (_) { console.error('无法打开图像播放器'); notifyFailure(); }
     });
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-    viewport.addEventListener('mouseleave', () => { isDragging = false; viewport.style.cursor = 'grab'; });
-    
-    // 🔧 P3优化：注册清理函数，供组件销毁时调用
-    const cleanup = () => {
-        window.removeEventListener('mousemove', handleMouseMove);
-        window.removeEventListener('mouseup', handleMouseUp);
+    listen(viewport, 'wheel', event => { event.preventDefault(); zoom(event.deltaY > 0 ? -0.1 : 0.1); }, { passive: false });
+    const rangeKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown']);
+    const keepNativeRangeKey = event => {
+        if (event.defaultPrevented || event.isComposing || event.keyCode === 229 ||
+            event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) return;
+        if (rangeKeys.has(event.key)) event.stopPropagation();
     };
-    viewport._sandboxCleanup = cleanup;
+    listen(sliderX, 'keydown', keepNativeRangeKey);
+    listen(sliderY, 'keydown', keepNativeRangeKey);
+    listen(sliderX, 'input', syncTransform);
+    listen(sliderY, 'input', syncTransform);
+    let dragging = false, startX, startY, initialX, initialY;
+    listen(viewport, 'mousedown', event => {
+        if (event.target.closest('input, button')) return;
+        event.preventDefault(); dragging = true; viewport.style.cursor = 'grabbing';
+        startX = event.clientX; startY = event.clientY; initialX = Number(sliderX.value); initialY = Number(sliderY.value);
+    });
+    listen(window, 'mousemove', event => {
+        if (!dragging) return;
+        sliderX.value = initialX + (event.clientX - startX) / scale;
+        sliderY.value = initialY + (event.clientY - startY) / scale;
+        syncTransform();
+    });
+    listen(window, 'mouseup', () => { dragging = false; viewport.style.cursor = 'grab'; });
+    listen(viewport, 'mouseleave', () => { dragging = false; viewport.style.cursor = 'grab'; });
 }
 
 /**
@@ -327,9 +314,7 @@ export function setupImageSandboxEvents(detailView) {
  * @param {HTMLElement} detailView - 详情视图容器
  */
 export function cleanupImageSandbox(detailView) {
-    const viewport = detailView?.querySelector('.img-viewport');
-    if (viewport && viewport._sandboxCleanup) {
-        viewport._sandboxCleanup();
-        viewport._sandboxCleanup = null;
-    }
+    const viewports = [...(detailView?.querySelectorAll?.('.img-viewport') || [])];
+    if (detailView?.matches?.('.img-viewport')) viewports.unshift(detailView);
+    for (const viewport of viewports) viewport._sandboxCleanup?.();
 }

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

@@ -53,11 +53,7 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         const dialogId = `image-crop-dialog-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
         // 创建遮罩层
         const overlay = document.createElement("div");
-        Object.assign(overlay.style, {
-            position: "fixed", top: "0", left: "0", width: "100%", height: "100%",
-            background: "rgba(0,0,0,0.85)", zIndex: "99999",
-            display: "flex", justifyContent: "center", alignItems: "center"
-        });
+        overlay.className = "image-crop-overlay";
 
         // 创建弹窗容器
         const modal = document.createElement("div");
@@ -66,18 +62,11 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         modal.setAttribute("aria-labelledby", `${dialogId}-title`);
         modal.setAttribute("aria-describedby", `${dialogId}-hint`);
         modal.setAttribute("tabindex", "-1");
-        Object.assign(modal.style, {
-            background: "var(--comfy-input-bg)", borderRadius: "12px", padding: "20px",
-            maxWidth: "90vw", maxHeight: "90vh", display: "flex", flexDirection: "column",
-            boxShadow: "0 8px 32px rgba(0,0,0,0.5)"
-        });
+        modal.className = "image-crop-dialog";
 
         // 标题栏
         const header = document.createElement("div");
-        Object.assign(header.style, {
-            display: "flex", justifyContent: "space-between", alignItems: "center",
-            marginBottom: "15px", paddingBottom: "10px", borderBottom: "1px solid #444"
-        });
+        header.className = "image-crop-header";
         // 比例显示文字
         let ratioText = '16:9';
         if (aspectRatio === 1) ratioText = '1:1';
@@ -85,40 +74,23 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         // 📱 触控设备与鼠标设备的操作提示区分（移动端无滚轮/拖动概念）；文案走词典，随界面语言切换
         const gestureHint = _isTouchDevice() ? t('crop.gesture_hint_touch') : t('crop.gesture_hint_mouse');
         header.innerHTML = `
-            <span id="${dialogId}-title" role="heading" aria-level="2" style="font-size: 16px; font-weight: bold; color: #fff;">✂️ ${escapeHtml(title)}</span>
-            <span id="${dialogId}-hint" style="font-size: 12px; color: #888;">${escapeHtml(t('crop.ratio_label'))} ${ratioText} | ${escapeHtml(gestureHint)}</span>
+            <span id="${dialogId}-title" role="heading" aria-level="2" class="image-crop-title">✂️ ${escapeHtml(title)}</span>
+            <span id="${dialogId}-hint" class="image-crop-hint">${escapeHtml(t('crop.ratio_label'))} ${ratioText} | ${escapeHtml(gestureHint)}</span>
         `;
 
         // 裁剪区域容器
         const cropContainer = document.createElement("div");
         let containerWidth, containerHeight;
-        if (aspectRatio === 1) {
-            // 1:1 正方形
-            containerWidth = containerHeight = Math.min(400, window.innerWidth * 0.7);
-        } else if (aspectRatio > 1) {
-            // 16:9 横向
-            containerWidth = Math.min(600, window.innerWidth * 0.8);
-            containerHeight = containerWidth / aspectRatio;
-        } else {
-            // 9:16 纵向
-            containerWidth = Math.min(300, window.innerWidth * 0.5);
-            containerHeight = Math.min(450, window.innerHeight * 0.5);
-        }
-        
-        Object.assign(cropContainer.style, {
-            width: `${containerWidth}px`, height: `${containerHeight}px`,
-            position: "relative", overflow: "hidden", borderRadius: "8px",
-            background: "#1a1a1a", border: "2px solid #4CAF50", cursor: "move",
-            // 📱 禁止浏览器接管触摸手势（页面滚动/双指缩放页面），交由裁剪组件自行处理
-            touchAction: "none"
-        });
+        const preferredWidth = aspectRatio === 1
+            ? Math.min(400, window.innerWidth * 0.7)
+            : aspectRatio > 1 ? Math.min(600, window.innerWidth * 0.8)
+                : Math.min(300, window.innerWidth * 0.5, Math.min(450, window.innerHeight * 0.5) * aspectRatio);
+        cropContainer.className = "image-crop-viewport";
+
 
         // 图片元素
         const img = document.createElement("img");
-        Object.assign(img.style, {
-            position: "absolute", maxWidth: "none", maxHeight: "none",
-            userSelect: "none", pointerEvents: "none"
-        });
+        img.className = "image-crop-image";
 
         // 裁剪状态
         let scale = 1;
@@ -177,13 +149,30 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
             img.style.height = `${scaledHeight}px`;
             img.style.left = `${left}px`;
             img.style.top = `${top}px`;
+            const slider = modal.querySelector('#crop-scale-slider');
+            if (slider && imgNaturalWidth) {
+                const percent = Math.round(scale / _getScaleLimits().minScale * 100);
+                slider.value = String(percent);
+                slider.setAttribute('aria-valuetext', `${percent}%`);
+                modal.querySelector('#crop-scale-value').textContent = `${percent}%`;
+            }
+        }
+
+        function localPoint(clientX, clientY) {
+            const rect = cropContainer.getBoundingClientRect();
+            return {
+                x: (clientX - rect.left) * (containerWidth + cropContainer.clientLeft * 2) / rect.width - cropContainer.clientLeft,
+                y: (clientY - rect.top) * (containerHeight + cropContainer.clientTop * 2) / rect.height - cropContainer.clientTop
+            };
         }
 
         // 鼠标拖动
         cropContainer.onmousedown = (e) => {
+            if (!imgNaturalWidth || e.button !== 0) return;
             isDragging = true;
-            dragStartX = e.clientX - offsetX;
-            dragStartY = e.clientY - offsetY;
+            const point = localPoint(e.clientX, e.clientY);
+            dragStartX = point.x - offsetX;
+            dragStartY = point.y - offsetY;
             cropContainer.style.cursor = "grabbing";
         };
 
@@ -192,6 +181,7 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
 
         // 🔧 P3优化：ESC 键关闭
         function handleKeyDown(e) {
+            if (e.isComposing || e.ctrlKey || e.altKey || e.metaKey) return;
             if (e.key === 'Escape') {
                 e.preventDefault();
                 cleanup();
@@ -221,8 +211,9 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
 
         function handleMouseMove(e) {
             if (!isDragging) return;
-            offsetX = e.clientX - dragStartX;
-            offsetY = e.clientY - dragStartY;
+            const point = localPoint(e.clientX, e.clientY);
+            offsetX = point.x - dragStartX;
+            offsetY = point.y - dragStartY;
             updateImagePosition();
         }
 
@@ -234,6 +225,7 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         // 滚轮缩放
         cropContainer.onwheel = (e) => {
             e.preventDefault();
+            if (!imgNaturalWidth) return;
             const delta = e.deltaY > 0 ? 0.95 : 1.05;
             const newScale = scale * delta;
 
@@ -254,9 +246,6 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         let pinchCenterY = 0;
         let pinchStartOffsetX = 0;
         let pinchStartOffsetY = 0;
-        // 🔧 手势起始时容器的视口原点（含 border），用于把 clientX/Y 换算成与 img.style.left 同源的容器内坐标
-        let pinchOriginX = 0;
-        let pinchOriginY = 0;
 
         // 获取缩放边界（与滚轮缩放共用同一规则）
         function _getScaleLimits() {
@@ -267,10 +256,8 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         }
 
         function _getTouchMidPoint(touches) {
-            return {
-                x: (touches[0].clientX + touches[1].clientX) / 2,
-                y: (touches[0].clientY + touches[1].clientY) / 2
-            };
+            return localPoint((touches[0].clientX + touches[1].clientX) / 2,
+                (touches[0].clientY + touches[1].clientY) / 2);
         }
 
         function _getTouchDistance(touches) {
@@ -280,22 +267,19 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         }
 
         function handleTouchStart(e) {
+            if (!imgNaturalWidth) return;
             if (e.touches.length === 1) {
                 isDragging = true;
-                dragStartX = e.touches[0].clientX - offsetX;
-                dragStartY = e.touches[0].clientY - offsetY;
+                const point = localPoint(e.touches[0].clientX, e.touches[0].clientY);
+                dragStartX = point.x - offsetX;
+                dragStartY = point.y - offsetY;
             } else if (e.touches.length === 2) {
                 isDragging = false;
                 pinchStartDist = _getTouchDistance(e.touches);
                 pinchStartScale = scale;
-                // 🔧 clientX 是视口坐标，offsetX/containerWidth 是容器内坐标，两者必须同原点才能参与锚点计算；
-                // clientLeft/clientTop 为 2px 边框宽度（img 的 absolute 定位原点在 padding box 左上角）
-                const rect = cropContainer.getBoundingClientRect();
-                pinchOriginX = rect.left + cropContainer.clientLeft;
-                pinchOriginY = rect.top + cropContainer.clientTop;
                 const mid = _getTouchMidPoint(e.touches);
-                pinchCenterX = mid.x - pinchOriginX;
-                pinchCenterY = mid.y - pinchOriginY;
+                pinchCenterX = mid.x;
+                pinchCenterY = mid.y;
                 pinchStartOffsetX = offsetX;
                 pinchStartOffsetY = offsetY;
             }
@@ -305,8 +289,9 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         function handleTouchMove(e) {
             if (e.touches.length === 1 && isDragging) {
                 // 单指拖动
-                offsetX = e.touches[0].clientX - dragStartX;
-                offsetY = e.touches[0].clientY - dragStartY;
+                const point = localPoint(e.touches[0].clientX, e.touches[0].clientY);
+                offsetX = point.x - dragStartX;
+                offsetY = point.y - dragStartY;
                 updateImagePosition();
             } else if (e.touches.length === 2 && pinchStartDist > 0) {
                 // 双指捏合缩放（以两指中点为锚点，图片跟随手指中心移动）
@@ -314,9 +299,8 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
                 const newScale = _clamp(pinchStartScale * (_getTouchDistance(e.touches) / pinchStartDist), minScale, maxScale);
                 const ratio = newScale / pinchStartScale;
                 const mid = _getTouchMidPoint(e.touches);
-                // 换算到容器内坐标（与 handleTouchStart 同原点，一次捏合手势期间弹窗不移动）
-                const relX = mid.x - pinchOriginX;
-                const relY = mid.y - pinchOriginY;
+                const relX = mid.x;
+                const relY = mid.y;
                 // 图片 left = (W - s·imgW)/2 + o，故锚点不动的条件解出：
                 //   o1 = (p1 - p0) + ratio·(o0 - d) + d，其中 d = p0 - W/2 为起始手指相对容器中心的偏移
                 const centerX = containerWidth / 2;
@@ -339,8 +323,9 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
                 // 双指抬起剩单指：切换为拖动模式，避免图片跳变
                 pinchStartDist = 0;
                 isDragging = true;
-                dragStartX = e.touches[0].clientX - offsetX;
-                dragStartY = e.touches[0].clientY - offsetY;
+                const point = localPoint(e.touches[0].clientX, e.touches[0].clientY);
+                dragStartX = point.x - offsetX;
+                dragStartY = point.y - offsetY;
             }
         }
 
@@ -351,24 +336,20 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
 
         // 缩放滑块
         const sliderContainer = document.createElement("div");
-        Object.assign(sliderContainer.style, {
-            display: "flex", alignItems: "center", gap: "10px", marginTop: "15px", padding: "0 10px"
-        });
+        sliderContainer.className = "image-crop-zoom";
         sliderContainer.innerHTML = `
-            <span style="color: #888; font-size: 12px;">🔍 ${escapeHtml(t('crop.zoom_label'))}</span>
+            <label for="crop-scale-slider" class="image-crop-zoom-label">🔍 ${escapeHtml(t('crop.zoom_label'))}</label>
             <input type="range" id="crop-scale-slider" min="100" max="500" value="100" aria-label="${escapeHtml(t('crop.zoom_label'))}" aria-valuetext="100%"
-                   style="flex: 1; accent-color: #4CAF50;">
-            <span id="crop-scale-value" style="color: #4CAF50; font-size: 12px; min-width: 40px;">100%</span>
+                   class="image-crop-range">
+            <span id="crop-scale-value" class="image-crop-zoom-value">100%</span>
         `;
 
         // 按钮区域
         const buttonContainer = document.createElement("div");
-        Object.assign(buttonContainer.style, {
-            display: "flex", gap: "10px", marginTop: "15px", justifyContent: "flex-end"
-        });
+        buttonContainer.className = "image-crop-actions";
         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" 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>
+            <button id="btn-crop-cancel" type="button" class="image-crop-button image-crop-cancel">${escapeHtml(t('common.cancel'))}</button>
+            <button id="btn-crop-confirm" type="button" disabled class="image-crop-button image-crop-confirm">✂️ ${escapeHtml(t('crop.confirm'))}</button>
         `;
 
         // 组装DOM
@@ -379,6 +360,13 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
         modal.appendChild(buttonContainer);
         overlay.appendChild(modal);
         document.body.appendChild(overlay);
+        const modalStyle = getComputedStyle(modal);
+        const availableWidth = modal.clientWidth - parseFloat(modalStyle.paddingLeft) - parseFloat(modalStyle.paddingRight);
+        const viewportStyle = getComputedStyle(cropContainer);
+        containerWidth = Math.min(preferredWidth, Math.max(1, availableWidth - parseFloat(viewportStyle.borderLeftWidth) - parseFloat(viewportStyle.borderRightWidth)));
+        containerHeight = containerWidth / aspectRatio;
+        cropContainer.style.width = `${containerWidth}px`;
+        cropContainer.style.height = `${containerHeight}px`;
         modal.querySelector("#btn-crop-cancel").focus();
 
         // 绑定缩放滑块事件
@@ -389,6 +377,7 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
             const scaleValue = modal.querySelector("#crop-scale-value");
             
             slider.oninput = () => {
+                if (!imgNaturalWidth) return;
                 const minScaleX = containerWidth / imgNaturalWidth;
                 const minScaleY = containerHeight / imgNaturalHeight;
                 const minScale = Math.max(minScaleX, minScaleY);
@@ -411,6 +400,7 @@ export async function openImageCropper(file, aspectRatio = 16/9, title = t('crop
                 const btn = modal.querySelector("#btn-crop-confirm");
                 if (btn.disabled) return;
                 btn.textContent = `⏳ ${t('crop.processing')}`;
+                if (modal.contains(document.activeElement)) modal.focus({ preventScroll: true });
                 btn.disabled = true;
 
                 encodeTimer = setTimeout(fail, IMAGE_PROCESS.TIMEOUT);

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

@@ -15,7 +15,8 @@
 // 🔒 P0安全优化：敏感数据脱敏
 // ==========================================
 
-import { API, PAGINATION } from "../core/全局配置.js";
+import { API, PAGINATION, LAZY_IMAGES } from "../core/全局配置.js";
+import { t } from "./用户体验_国际化.js";
 // 📦 列表缓存工具需要本地可用的缓存实现；下方「向后兼容重导出」那行是纯转发、
 // 不会生成本地绑定，故此处必须单独 import（勿误删，否则 readListCache 运行时报错）
 import { setCache, getCacheWithMeta, removeCache, getCacheKeysByPrefix } from "../core/网络请求_缓存管理.js";
@@ -429,136 +430,162 @@ export function renderListSearchMessage(container, message) {
 // 特点：
 //   - 使用 IntersectionObserver API
 //   - 支持占位图和加载动画
-//   - 自动重试失败的图片
+//   - 节点移除、读取超时与迟到结果清理
 
-// 默认占位图（Base64 灰色方块）
-const PLACEHOLDER_IMAGE = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect fill='%23f0f0f0' width='100' height='100'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='%23999' font-size='12'%3E加载中%3C/text%3E%3C/svg%3E";
+const lazyImages = new Map();
+let lazyLoadObserver = null;
+let lazyRemovalObserver = null;
 
-// 错误占位图
-const ERROR_IMAGE = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect fill='%23ffeaea' width='100' height='100'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='%23c44' font-size='12'%3E加载失败%3C/text%3E%3C/svg%3E";
+function lazyPlaceholder(failed = false) {
+    const text = t(failed ? 'image.load_failed' : 'image.loading');
+    const fill = failed ? '%23ffeaea' : '%23f0f0f0';
+    const color = failed ? '%23c44' : '%23999';
+    return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Crect fill='${fill}' width='100' height='100'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='${color}' font-size='12'%3E${encodeURIComponent(text)}%3C/text%3E%3C/svg%3E`;
+}
 
-// 全局 Observer 实例
-let lazyLoadObserver = null;
+function releaseLazyImage(record, restore = false) {
+    const img = record.img;
+    if (!img || lazyImages.get(img) !== record) return;
+    if (restore && img.dataset.src === record.src && img.getAttribute('src') === record.placeholder) {
+        img.loading = 'lazy';
+        img.src = record.src;
+        delete img.dataset.src;
+        img.classList.remove('lazy-loading');
+    }
+    lazyImages.delete(img);
+    lazyLoadObserver?.unobserve(img);
+    if (record.timer !== null) clearTimeout(record.timer);
+    record.timer = null;
+    if (record.reader) {
+        record.reader.onload = record.reader.onerror = null;
+        record.reader.src = '';
+        record.reader = null;
+    }
+    if (img._lazyCleanup === record.cleanup) delete img._lazyCleanup;
+    record.img = null;
+    record.cleanup = null;
+    if (!lazyImages.size) {
+        lazyLoadObserver?.disconnect(); lazyLoadObserver = null;
+        lazyRemovalObserver?.disconnect(); lazyRemovalObserver = null;
+    }
+}
+
+function ownsLazyImage(record) {
+    const img = record.img;
+    return !!img && lazyImages.get(img) === record && img.isConnected &&
+        img.dataset.src === record.src && img.getAttribute('src') === record.placeholder;
+}
 
-/**
- * 初始化图片懒加载（全局单例）
- */
 function _initLazyLoadObserver() {
-    if (lazyLoadObserver) return;
-    
-    // 检查浏览器支持
-    if (!("IntersectionObserver" in window)) {
-        console.warn("⚠️ 浏览器不支持 IntersectionObserver，懒加载降级为直接加载");
-        return;
-    }
-    
-    lazyLoadObserver = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                const img = entry.target;
-                _loadImage(img);
-                lazyLoadObserver.unobserve(img);
+    if (lazyLoadObserver || !('IntersectionObserver' in window)) return;
+    const observer = new IntersectionObserver(entries => {
+        if (lazyLoadObserver !== observer) return;
+        for (const entry of entries) {
+            if (entry.isIntersecting) _loadImage(entry.target);
+        }
+    }, { rootMargin: LAZY_IMAGES.ROOT_MARGIN, threshold: LAZY_IMAGES.THRESHOLD });
+    lazyLoadObserver = observer;
+}
+
+function watchLazyImages() {
+    if (lazyRemovalObserver) return;
+    const observer = new MutationObserver(mutations => {
+        if (lazyRemovalObserver !== observer) return;
+        for (const record of lazyImages.values()) {
+            const img = record.img;
+            if (mutations.some(mutation => [...mutation.addedNodes].some(node => node === img || node.contains?.(img)))) record.seen = true;
+            if (img.isConnected) {
+                record.seen = true;
+                if (!record.reader && record.timer !== null) { clearTimeout(record.timer); record.timer = null; }
             }
-        });
-    }, {
-        rootMargin: "200px 0px", // 提前 200px 开始加载
-        threshold: 0.01
+            if ((!img.isConnected && record.seen) || img.dataset.src !== record.src || img.getAttribute('src') !== record.placeholder) {
+                releaseLazyImage(record, !img.isConnected);
+            }
+        }
     });
+    lazyRemovalObserver = observer;
+    observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['src', 'data-src'] });
 }
 
-/**
- * 实际加载图片
- */
-function _loadImage(img) {
-    const src = img.dataset.src;
-    if (!src) return;
-    
-    // 创建临时图片测试加载
-    const tempImg = new Image();
-    
-    tempImg.onload = () => {
+function registerLazyImage(img, src) {
+    const previous = lazyImages.get(img);
+    if (previous) releaseLazyImage(previous);
+    _initLazyLoadObserver();
+    if (!lazyLoadObserver) {
+        img.classList.add('lazy-image');
         img.src = src;
-        img.classList.remove("lazy-loading");
-        img.classList.add("lazy-loaded");
         delete img.dataset.src;
+        img.classList.remove('lazy-loading', 'lazy-error');
+        return;
+    }
+    const placeholder = lazyPlaceholder();
+    img.dataset.src = src;
+    img.src = placeholder;
+    img.classList.remove('lazy-loaded', 'lazy-error');
+    img.classList.add('lazy-image', 'lazy-loading');
+    const record = { img, src, placeholder, seen: img.isConnected, reader: null, timer: null, cleanup: null };
+    record.cleanup = () => releaseLazyImage(record, true);
+    img._lazyCleanup = record.cleanup;
+    lazyImages.set(img, record);
+    watchLazyImages();
+    if (!record.seen) record.timer = setTimeout(() => {
+        if (ownsLazyImage(record)) { record.seen = true; record.timer = null; }
+        else {
+            const unmounted = !record.seen && img.dataset.src === src && img.getAttribute('src') === placeholder;
+            releaseLazyImage(record);
+            if (unmounted) { img.src = src; delete img.dataset.src; img.classList.remove('lazy-loading'); }
+        }
+    }, LAZY_IMAGES.MOUNT_TIMEOUT);
+    lazyLoadObserver.observe(img);
+}
+
+function _loadImage(img) {
+    const record = lazyImages.get(img);
+    if (!record || record.reader) return;
+    if (!ownsLazyImage(record)) {
+        if (record.seen || img.dataset.src !== record.src || img.getAttribute('src') !== record.placeholder) releaseLazyImage(record, !img.isConnected);
+        return;
+    }
+    record.seen = true;
+    lazyLoadObserver?.unobserve(img);
+    if (record.timer !== null) clearTimeout(record.timer);
+    const reader = new Image();
+    record.reader = reader;
+    const finish = failed => {
+        if (!ownsLazyImage(record)) { releaseLazyImage(record, !img.isConnected); return; }
+        const src = record.src;
+        releaseLazyImage(record);
+        img.src = failed ? lazyPlaceholder(true) : src;
+        img.classList.remove('lazy-loading');
+        img.classList.add(failed ? 'lazy-error' : 'lazy-loaded');
+        if (failed) img.dataset.retries = (parseInt(img.dataset.retries) || 0) + 1;
+        else delete img.dataset.src;
     };
-    
-    tempImg.onerror = () => {
-        // 加载失败，显示错误占位图
-        img.src = ERROR_IMAGE;
-        img.classList.remove("lazy-loading");
-        img.classList.add("lazy-error");
-        
-        // 记录失败，后续可重试
-        img.dataset.retries = (parseInt(img.dataset.retries) || 0) + 1;
-    };
-    
-    tempImg.src = src;
+    reader.onload = () => finish(false);
+    reader.onerror = () => finish(true);
+    record.timer = setTimeout(() => finish(true), LAZY_IMAGES.READ_TIMEOUT);
+    reader.src = record.src;
 }
 
-/**
- * 创建懒加载图片元素
- * @param {string} src - 图片真实地址
- * @param {string} alt - 图片描述
- * @param {Object} style - 样式对象
- * @returns {HTMLImageElement}
- */
-export function createLazyImage(src, alt = "", style = {}) {
-    _initLazyLoadObserver();
-    
-    const img = document.createElement("img");
+export function createLazyImage(src, alt = '', style = {}) {
+    const img = document.createElement('img');
     img.alt = alt;
-    img.src = PLACEHOLDER_IMAGE;
-    img.dataset.src = src;
-    img.className = "lazy-image lazy-loading";
-    
-    // 应用样式
-    Object.assign(img.style, {
-        transition: "opacity 0.3s ease",
-        ...style
-    });
-    
-    // 添加到观察队列
-    if (lazyLoadObserver) {
-        lazyLoadObserver.observe(img);
-    } else {
-        // 降级：直接加载
-        img.src = src;
-    }
-    
+    Object.assign(img.style, { transition: 'opacity 0.3s ease', ...style });
+    registerLazyImage(img, src);
     return img;
 }
 
-/**
- * 将现有图片转���为懒加载
- * @param {HTMLImageElement} img - 已存在的图片元素
- */
 export function makeLazy(img) {
     if (!img.src || img.dataset.src) return;
-    
-    _initLazyLoadObserver();
-    
-    img.dataset.src = img.src;
-    img.src = PLACEHOLDER_IMAGE;
-    img.classList.add("lazy-image", "lazy-loading");
-    
-    if (lazyLoadObserver) {
-        lazyLoadObserver.observe(img);
-    }
+    registerLazyImage(img, img.src);
 }
 
-/**
- * 批量设置容器内所有图片为懒加载
- * @param {HTMLElement} container - 容器元素
- * @param {string} selector - 图片选择器，默认 "img"
- */
-export function lazyLoadImages(container, selector = "img") {
-    const images = container.querySelectorAll(selector);
-    images.forEach(img => {
-        // 跳过已处理的和 data URL
-        if (img.dataset.src || img.src.startsWith("data:")) return;
+export function lazyLoadImages(container, selector = 'img') {
+    for (const img of container.querySelectorAll(selector)) {
+        if (img.classList.contains('target-img') && img.closest('.img-viewport')?._sandboxCleanup) continue;
+        if (img.dataset.src || img.src.startsWith('data:')) continue;
         makeLazy(img);
-    });
+    }
 }
 
 

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

@@ -206,6 +206,21 @@ const translations = {
         // 设置页面
         'settings.title': '界面设置',
         'settings.general': '通用设置',
+        'settings.shortcuts': '快捷键',
+        'settings.keyboard_combinations': '启用插件组合键',
+        'settings.keyboard_combinations_desc': '默认关闭，避免与 ComfyUI 冲突。开启后，仅在对应控件聚焦时生效。',
+        'settings.shortcuts_controls': '控件之间移动',
+        'settings.shortcuts_activate': '激活已聚焦的按钮',
+        'settings.shortcuts_tabs': '聚焦榜单标签后切换标签',
+        'settings.shortcuts_images': '聚焦发布图片后，在已有图片或新图片组内排序；需开启组合键',
+        'settings.shortcuts_escape': '关闭当前媒体或弹窗，仅在其内部生效',
+        'settings.shortcuts_scope': '基础键盘操作始终保留。插件不提供全局保存快捷键，不接管 ComfyUI 画布按键。',
+        'settings.shortcuts_tab_keys': 'Tab / Shift+Tab',
+        'settings.shortcuts_activate_keys': 'Enter / Space',
+        'settings.shortcuts_image_keys': 'Alt+← / Alt+→',
+        'settings.shortcuts_escape_key': 'Escape',
+        'settings.shortcuts_arrows': '← / → / Home / End',
+        'post.image_drag_hint': '可拖拽排序，首张图片为封面。',
         'settings.display': '显示偏好',
         'settings.animation': '动画与音效',
         'settings.language': '界面语言',
@@ -478,7 +493,7 @@ const translations = {
         'wallet.withdraw.fill_account': '请完整填写收款人支付宝账号与真实姓名！',
         'wallet.withdraw.invalid_code': '请输入 6 位有效验证码！',
         'wallet.withdraw.code_sent': '验证码已发送，请查收邮箱 (注意检查垃圾箱)',
-        'wallet.withdraw.code_failed': '发送失败: ',
+        'wallet.withdraw.code_failed': '暂时无法确认验证码发送，请稍后重试。',
         'wallet.withdraw.success': '🎉 提现申请提交成功！预计 1-3 个工作日内打款至您的支付宝。',
         'wallet.withdraw.submit_failed': '提交失败: ',
         'wallet.withdraw.fee_free_quota': '🎉 您目前享有平台 100元 内免手续费优惠福利！',
@@ -562,6 +577,7 @@ const translations = {
         'social.tip_author': '赞赏作者',
         'social.comment_refresh_required': '评论操作已完成，请重新打开当前页面更新显示后再操作。',
         'social.comment_unconfirmed': '评论操作结果尚未确认，请重新打开当前页面核对后再操作。',
+        'social.comment_pending': '评论结果待确认',
         'social.say_something': '说点什么...',
         'social.reply': '回复',
         'social.reply_to': '回复',
@@ -1156,6 +1172,7 @@ const translations = {
         'prompt.text_placeholder': '输入完整提示词，发布后仅购买者可查看...',
         'prompt.price_label': '定价',
         'prompt.price_invalid': '请输入 0–{max} 的整数价格。',
+        'prompt.price_unknown': '价格暂时无法确认，请重新打开详情后重试。',
         'prompt.video_label': '示例视频',
         'prompt.title_required': '请输入标题',
         'prompt.content_required': '请输入介绍文案',
@@ -1277,6 +1294,10 @@ const translations = {
         'image.load_failed': '图片加载失败',
         'image.load_timeout': '加载超时',
         'image.gallery': '效果展示图',
+        'image.zoom_in': '放大图片',
+        'image.zoom_out': '缩小图片',
+        'image.pan_horizontal': '水平移动图片',
+        'image.pan_vertical': '垂直移动图片',
         'image.viewer.fullscreen': '全屏播放',
         'image.viewer.load_failed': '图像播放器加载失败，请刷新页面重试',
         'image.viewer.close': '关闭 (ESC)',
@@ -1940,6 +1961,21 @@ const translations = {
         // Settings
         'settings.title': 'Settings',
         'settings.general': 'General',
+        'settings.shortcuts': 'Keyboard shortcuts',
+        'settings.keyboard_combinations': 'Enable plugin key combinations',
+        'settings.keyboard_combinations_desc': 'Off by default to avoid ComfyUI conflicts. When enabled, combinations work only in the focused plugin control.',
+        'settings.shortcuts_controls': 'Move between controls',
+        'settings.shortcuts_activate': 'Activate the focused button',
+        'settings.shortcuts_tabs': 'Navigate focused ranking tabs',
+        'settings.shortcuts_images': 'Reorder focused publishing images within the existing or new image group; requires key combinations',
+        'settings.shortcuts_escape': 'Close the current media viewer or dialog, only while focus is inside it',
+        'settings.shortcuts_scope': 'Standard keyboard controls stay available. The plugin has no global save shortcut and does not capture ComfyUI canvas keys.',
+        'settings.shortcuts_tab_keys': 'Tab / Shift+Tab',
+        'settings.shortcuts_activate_keys': 'Enter / Space',
+        'settings.shortcuts_image_keys': 'Alt+← / Alt+→',
+        'settings.shortcuts_escape_key': 'Escape',
+        'settings.shortcuts_arrows': '← / → / Home / End',
+        'post.image_drag_hint': 'Drag to reorder. The first image is the cover.',
         'settings.display': 'Display',
         'settings.animation': 'Animation & Sound',
         'settings.language': 'Language',
@@ -2212,7 +2248,7 @@ const translations = {
         'wallet.withdraw.fill_account': 'Please fill in both Alipay account and real name!',
         'wallet.withdraw.invalid_code': 'Please enter a valid 6-digit code!',
         'wallet.withdraw.code_sent': 'Code sent! Please check your email (including spam folder)',
-        'wallet.withdraw.code_failed': 'Send failed: ',
+        'wallet.withdraw.code_failed': 'Code delivery could not be confirmed. Try again later.',
         'wallet.withdraw.success': '🎉 Withdrawal submitted! Funds will be transferred within 1-3 business days.',
         'wallet.withdraw.submit_failed': 'Submit failed: ',
         'wallet.withdraw.fee_free_quota': '🎉 You enjoy fee-free withdrawal up to 100 CNY!',
@@ -2297,6 +2333,7 @@ const translations = {
         '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.comment_pending': 'Comment result unconfirmed',
         'social.say_something': 'Say something...',
         'social.reply_to': 'Reply to',
         'social.comment_deleted': 'This comment has been deleted',
@@ -2967,6 +3004,7 @@ const translations = {
                 'prompt.text_placeholder': 'Enter the full prompt, only visible to buyers after publishing...',
                 'prompt.price_label': 'Price',
                 'prompt.price_invalid': 'Enter a whole-number price from 0 to {max}.',
+                'prompt.price_unknown': 'The price is unavailable. Reopen the details and try again.',
                 'prompt.video_label': 'Sample Video',
                 'prompt.title_required': 'Please enter a title',
                 'prompt.content_required': 'Please enter the intro',
@@ -3103,6 +3141,10 @@ const translations = {
         'image.load_failed': 'Image load failed',
         'image.load_timeout': 'Load timeout',
         'image.gallery': 'Gallery',
+        'image.zoom_in': 'Zoom in',
+        'image.zoom_out': 'Zoom out',
+        'image.pan_horizontal': 'Move image horizontally',
+        'image.pan_vertical': 'Move image vertically',
         'image.viewer.fullscreen': 'Open fullscreen viewer',
         'image.viewer.load_failed': 'Could not load the image viewer. Refresh and try again.',
         'image.viewer.close': 'Close (Esc)',

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

@@ -10,6 +10,8 @@
 //   - 用户体验_国际化.js (i18n 翻译字典)
 // ==========================================
 
+import { areKeyboardShortcutsEnabled } from '../core/全局配置.js';
+
 import { t, initI18n } from './用户体验_国际化.js';
 
 
@@ -231,7 +233,7 @@ export function registerShortcut(key, handler, options = {}) {
         if (event.target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])')
                 && event.key !== 'Escape') return;
         const combo = `${event.ctrlKey || event.metaKey ? 'Ctrl+' : ''}${event.altKey ? 'Alt+' : ''}${event.shiftKey ? 'Shift+' : ''}${event.key}`;
-        if (combo !== key) return;
+        if (combo !== key || ((event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) && !areKeyboardShortcutsEnabled())) return;
         if (preventDefault) event.preventDefault();
         event.stopPropagation();
         handler(event);

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

@@ -124,6 +124,16 @@ async function loadPublishFactory(kind) {
     throw new Error('Invalid publish view');
 }
 
+function _applySidebarBackground(container, value) {
+    const valid = typeof value === "string" && value.trim() && !/[\u0000-\u001f\u007f]/.test(value);
+    container.style.backgroundImage = valid ? `url(${JSON.stringify(value)})` : "none";
+    container.style.backgroundColor = valid ? "transparent" : "var(--comfy-menu-bg)";
+    if (valid) {
+        container.style.backgroundSize = "cover";
+        container.style.backgroundPosition = "center";
+    }
+}
+
 export function buildSidebarDOM() {
     // 🔧 P1修复：重建前先清理上一轮的 window 监听，避免重复注册
     _cleanupSidebarWindowListeners();
@@ -132,13 +142,8 @@ export function buildSidebarDOM() {
     container.className = "comfy-ranking-root";
     
     // 加载本地背景图
-    const savedBg = BackgroundStore.load();
-    const bgStyle = savedBg 
-        ? `background-image: url(${savedBg}); background-size: cover; background-position: center;`
-        : `background-color: var(--comfy-menu-bg);`;
+    _applySidebarBackground(container, BackgroundStore.load());
     
-    container.style.cssText += bgStyle;
-
     const topNav = createTopNav();
     const sidebarInstanceId = `comfy-ranking-${++_sidebarInstanceSequence}`;
 
@@ -293,16 +298,7 @@ export function buildSidebarDOM() {
     
     // 监听从设置页面触发的背景更新事件
     _onSidebarWindow("comfy-sidebar-bg-update", () => {
-        const newBg = BackgroundStore.load();
-        if (newBg) {
-            container.style.backgroundImage = `url(${newBg})`;
-            container.style.backgroundSize = "cover";
-            container.style.backgroundPosition = "center";
-            container.style.backgroundColor = "transparent";
-        } else {
-            container.style.backgroundImage = "none";
-            container.style.backgroundColor = "var(--comfy-menu-bg)";
-        }
+        _applySidebarBackground(container, BackgroundStore.load());
     });
     // =========================================================================
 

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

@@ -104,6 +104,13 @@ export const API = {
 
 
 // 发布视频的本地读取预算，不改变云端上传额度。
+export const LAZY_IMAGES = Object.freeze({
+    ROOT_MARGIN: "200px 0px",
+    THRESHOLD: 0.01,
+    MOUNT_TIMEOUT: 30000,
+    READ_TIMEOUT: 30000
+});
+
 export const PUBLISH_MEDIA_LIMITS = Object.freeze({
     MAX_IMAGES: 9,
     IMAGE_MAX_EDGE: 1920,
@@ -809,6 +816,7 @@ const SETTINGS_KEY = "ComfyCommunity_Settings";
 
 // 🔧 默认设置值
 const DEFAULT_SETTINGS = {
+    enableKeyboardShortcuts: false,
     showCreatorBanner: true,  // 创作者卡片显示背景图
     enableAnimations: true,   // ✨ 榜单切换动画
     enableSoundEffects: true, // 🔊 动画音效
@@ -822,23 +830,30 @@ const DEFAULT_SETTINGS = {
 /**
  * 📦 获取当前设置
  */
-export function getSettings() {
+export function getSettings(options = {}) {
     try {
         const saved = localStorage.getItem(SETTINGS_KEY);
         if (saved) {
-            return { ...DEFAULT_SETTINGS, ...JSON.parse(saved) };
+            const value = JSON.parse(saved);
+            if (options.strict && (!value || typeof value !== 'object' || Array.isArray(value))) throw new Error('Invalid settings');
+            return { ...DEFAULT_SETTINGS, ...value };
         }
-    } catch (e) {}
+    } catch (e) { if (options.strict) throw e; }
     return { ...DEFAULT_SETTINGS };
 }
 
 /**
  * 💾 保存设置
  */
+export function areKeyboardShortcutsEnabled() {
+    return getSettings().enableKeyboardShortcuts === true;
+}
+
 export function saveSettings(settings) {
     try {
         localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
         // 🔔 广播设置变更事件，让其他组件响应
         window.dispatchEvent(new CustomEvent("comfy-settings-changed", { detail: settings }));
-    } catch (e) {}
+        return true;
+    } catch (e) { return false; }
 }

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

@@ -300,9 +300,9 @@ export function getCacheKeysByPrefix(prefix) {
 function _touchStorageEntry(key, cached) {
     if (memoryOnlyEntries.has(cached)) return;
     try {
-        if (localStorage.getItem(key) === null) return;
         const now = Date.now();
         if (Number.isFinite(cached.lastAccessAt) && now - cached.lastAccessAt < 60_000) return;
+        if (localStorage.getItem(key) === null) return;
         cached.lastAccessAt = now;
         localStorage.setItem(key, JSON.stringify(cached));
     } catch {}
@@ -394,7 +394,12 @@ export function removeCache(key) {
  */
 export function removeCacheByPrefix(prefix) {
     if (!prefix) return 0;
-    const candidates = prefix.startsWith(CACHE_PREFIX) ? [prefix] : [_fullKey(prefix), prefix];
+    return _removeCacheByPrefixes([prefix]);
+}
+
+function _removeCacheByPrefixes(prefixes) {
+    const candidates = [...new Set(prefixes.flatMap(prefix =>
+        prefix.startsWith(CACHE_PREFIX) ? [prefix] : [_fullKey(prefix), prefix]))];
     const isMatch = (key) => candidates.some(p => key.startsWith(p));
     const removed = new Set();
 
@@ -474,8 +479,11 @@ function _cleanExpiredStorage(aggressive = false) {
                     // 激进模式：清除所有缓存项
                     keysToRemove.push(key);
                 } else {
+                    let stored;
+                    try { stored = localStorage.getItem(key); } catch { continue; }
+                    if (stored === null) continue;
                     try {
-                        const cached = JSON.parse(localStorage.getItem(key));
+                        const cached = JSON.parse(stored);
                         if (cached.expireAt < now) {
                             keysToRemove.push(key);
                         }
@@ -496,24 +504,29 @@ function _cleanExpiredStorage(aggressive = false) {
 function _evictOldestStorage() {
     try {
         const entries = [];
+        const invalidKeys = [];
         for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
             if (_isManagedStorageKey(key)) {
+                let stored;
+                try { stored = localStorage.getItem(key); } catch { continue; }
+                if (stored === null) continue;
                 try {
-                    const cached = JSON.parse(localStorage.getItem(key));
+                    const cached = JSON.parse(stored);
                     if (!_isValidCacheEntry(cached)) {
-                        localStorage.removeItem(key);
+                        invalidKeys.push(key);
                         continue;
                     }
                     const writtenAt = Number.isFinite(cached.expireAt) ? cached.expireAt - DEFAULT_TTL : 0;
                     entries.push({ key, lastAccessAt: Number.isFinite(cached.lastAccessAt) ? cached.lastAccessAt : writtenAt });
                 } catch {
-                    localStorage.removeItem(key);
+                    invalidKeys.push(key);
                 }
             }
         }
         
-        if (entries.length === 0) return false;
+        invalidKeys.forEach(key => localStorage.removeItem(key));
+        if (entries.length === 0) return invalidKeys.length > 0;
         
         entries.sort((a, b) => a.lastAccessAt - b.lastAccessAt);
         
@@ -702,11 +715,8 @@ export function invalidateRelatedCache(endpoint, method = null) {
     // 🔧 同时修复：原实现无条件给 pattern 补 CACHE.PREFIX，使上方映射表中的裸键前缀
     // （ComfyCommunity_ProfileCache_，SWR 头像缓存直接写 localStorage、不带前缀）被拼成
     // ComfyRanking_ComfyCommunity_ProfileCache_，永远匹配不到，改头像/昵称后该缓存清不掉。
-    // 现统一走 removeCacheByPrefix：两级缓存一起清，且兼容带前缀与裸键两种键空间。
-    let cleared = 0;
-    for (const pattern of patterns) {
-        cleared += removeCacheByPrefix(pattern);
-    }
+    // 复用两级前缀删除逻辑；同次失效合并为一次存储遍历，兼容带前缀与裸键。
+    const cleared = _removeCacheByPrefixes(patterns);
     
     if (cleared > 0) {
         console.log(`🗑️ 精确清除缓存: ${cleared} 个项`);

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

@@ -4,7 +4,7 @@ import { api, captureRequestSession } from "../core/网络请求API.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { recordView, escapeHtml } from "../components/互动工具函数.js";  // 🧹 P2归一：escapeHtml 局部副本已移除
 import { renderItemTrendChart } from "../components/图表渲染组件.js";
-import { getCoverSandboxHTML, setupImageSandboxEvents } from "../components/图片沙盒组件.js";
+import { getCoverSandboxHTML, setupImageSandboxEvents, cleanupImageSandbox } from "../components/图片沙盒组件.js";
 import { setupResourceInstall, checkItemStatus } from "./资源安装引擎.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { openTipModal } from "../profile/个人中心_赞赏组件.js";
@@ -368,7 +368,10 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     let commentUI = null;
     const toggleButton = summaryView.querySelector('.card-summary__toggle');
     const setExpanded = (expanded) => {
-        if (expanded) mountComments();
+        if (expanded) {
+            mountComments();
+            if (isRendered) setupImageSandboxEvents(detailView);
+        } else cleanupImageSandbox(detailView);
         commentUI?._setActive?.(expanded);
         if (!expanded && detailView.contains(document.activeElement)) toggleButton.focus();
         detailView.hidden = !expanded;
@@ -455,7 +458,7 @@ export function createItemCard(itemData, currentUser = null, contextType = null)
     // 🖼️ 启用图片懒加载（跳过 data URL 和已处理的）
     lazyLoadImages(card);
 
-    card._cleanup = () => commentUI?._cleanup?.();
+    card._cleanup = () => { cleanupImageSandbox(detailView); commentUI?._cleanup?.(); };
     card.appendChild(summaryView);
     card.appendChild(detailView);
     return card;

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

@@ -300,15 +300,12 @@ export function createCreatorCard(creatorData, currentUser = null) {
     const cacheKey = getBannerCacheKey(creatorData.account);
     let cachedBanner = null;
     try { cachedBanner = localStorage.getItem(cacheKey); } catch (_) { /* 可选装饰缓存不可用时继续构建卡片。 */ }
-    const validBanner = value => typeof value === 'string' && value.trim() ? value : '';
+    const validBanner = value => typeof value === 'string' && value.trim() && !/[\u0000-\u001f\u007f]/.test(value) ? value : '';
     const bannerUrl = validBanner(cachedBanner) || validBanner(creatorData.bannerUrl);
     const hasBanner = !!(showBanner && bannerUrl);  // 有效本地缓存优先，受显示设置控制
 
-    // 🖼️ 全覆盖背景图样式
-    // 在使用 bannerUrl 之前添加安全过滤
-    const safeBannerUrl = (bannerUrl || '').replace(/['"()\\]/g, '');
     summaryView.classList.toggle('creator-card__summary--banner', !!hasBanner);
-    if (hasBanner) summaryView.style.backgroundImage = `url("${safeBannerUrl}")`;
+    if (hasBanner) summaryView.style.backgroundImage = `url(${JSON.stringify(bannerUrl)})`;
     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>`;

前端页面/market/资金与钱包_充值组件.js

@@ -26,8 +26,6 @@ function _setButtonLoading(btn, isLoading, loadingText, normalText) {
     btn.disabled = isLoading;
     btn.setAttribute('aria-busy', String(isLoading));
     btn.innerText = isLoading ? loadingText : normalText;
-    btn.style.background = isLoading ? "#888" : "#4CAF50";
-    btn.style.cursor = isLoading ? "not-allowed" : "pointer";
 }
 
 export async function openRechargeModal(currentUser, onBalanceChange) {
@@ -57,7 +55,7 @@ export async function openRechargeModal(currentUser, onBalanceChange) {
         if (Number.isSafeInteger(wallet.balance)) balanceText = String(wallet.balance);
     } catch (_) { if (!scope.isCurrent()) return; }
 
-    container.style.color = "#ccc";
+    container.className = "wallet-modal wallet-modal--recharge";
 
     const rechargeOptions = [
         { points: 10, price: 10, isCustom: false },
@@ -70,58 +68,58 @@ export async function openRechargeModal(currentUser, onBalanceChange) {
     let paymentMethod = "alipay"; 
 
     function _rechargeOptionWrapper(isSelected, index, innerHtml) {
-        return `<button type="button" aria-pressed="${isSelected}" class="recharge-opt ${isSelected ? 'selected' : ''}" data-index="${index}" style="flex: 1; min-width: 45%; padding: 15px; background: ${isSelected ? 'rgba(76, 175, 80, 0.2)' : 'var(--comfy-input-bg)'}; border: 2px solid ${isSelected ? '#4CAF50' : '#444'}; border-radius: 8px; cursor: pointer; text-align: center; transition: 0.2s;">${innerHtml}</button>`;
+        return `<button type="button" aria-pressed="${isSelected}" class="recharge-opt ${isSelected ? 'selected' : ''}" data-index="${index}">${innerHtml}</button>`;
     }
 
     const renderOptions = () => rechargeOptions.map((opt, index) => {
         const isSelected = selectedOption === opt;
         if (opt.isCustom) {
-            const inner = `<div style="font-size: 18px; font-weight: bold; color: ${isSelected ? '#4CAF50' : '#fff'}; margin-bottom: 5px; line-height: 22px;">${opt.label}</div><div style="font-size: 12px; color: #888;">${t('wallet.recharge.any_amount')}</div>`;
+            const inner = `<div class="wallet-recharge__option-title">${opt.label}</div><div class="wallet-modal__hint">${t('wallet.recharge.any_amount')}</div>`;
             return _rechargeOptionWrapper(isSelected, index, inner);
         } else {
-            const inner = `<div style="font-size: 18px; font-weight: bold; color: ${isSelected ? '#4CAF50' : '#fff'}; margin-bottom: 5px;">${opt.points} ${t('wallet.recharge.points_suffix')}</div><div style="font-size: 12px; color: #888;">${t('wallet.recharge.price_prefix')}${opt.price.toFixed(2)}</div>`;
+            const inner = `<div class="wallet-recharge__option-title">${opt.points} ${t('wallet.recharge.points_suffix')}</div><div class="wallet-modal__hint">${t('wallet.recharge.price_prefix')}${opt.price.toFixed(2)}</div>`;
             return _rechargeOptionWrapper(isSelected, index, inner);
         }
     }).join("");
 
     container.innerHTML = `
-        <div style="margin-bottom: 20px; text-align: center;">
-            <div style="font-size: 14px; color: #aaa;">${t('wallet.recharge.current_balance')}</div>
-            <div style="font-size: 28px; font-weight: bold; color: #FF9800; margin-top: 5px;">${balanceText} <span style="font-size: 14px;">${t('wallet.recharge.points_suffix')}</span></div>
+        <div class="wallet-recharge__balance">
+            <div class="wallet-modal__muted">${t('wallet.recharge.current_balance')}</div>
+            <div class="wallet-recharge__balance-value">${balanceText} <span class="wallet-recharge__balance-unit">${t('wallet.recharge.points_suffix')}</span></div>
         </div>
         
-        <div style="margin-bottom: 15px;">
-            <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #eee;">${t('wallet.recharge.select_amount')} <span style="color: #888; font-weight: normal;">${t('wallet.recharge.exchange_rate')}</span></label>
-            <div id="recharge-grid" style="display: flex; flex-wrap: wrap; gap: 10px;">
+        <div class="wallet-modal__field">
+            <label for="custom-amount" class="wallet-modal__label">${t('wallet.recharge.select_amount')} <span class="wallet-modal__muted">${t('wallet.recharge.exchange_rate')}</span></label>
+            <div id="recharge-grid" class="wallet-recharge__grid">
                 ${renderOptions()}
             </div>
-            <div id="custom-input-container" style="display: none; margin-top: 10px;">
-                <input type="number" id="custom-amount" placeholder="${t('wallet.recharge.custom_placeholder')}" min="1" max="10000" step="1" style="width: 100%; padding: 10px; background: #222; border: 1px solid #4CAF50; color: #fff; border-radius: 4px; box-sizing: border-box; text-align: center; font-size: 16px; font-weight: bold; outline: none;">
+            <div id="custom-input-container" class="wallet-recharge__custom" style="display: none;">
+                <input type="number" id="custom-amount" placeholder="${t('wallet.recharge.custom_placeholder')}" min="1" max="10000" step="1" class="wallet-modal__input wallet-recharge__custom-input">
             </div>
         </div>
 
-        <div style="margin-bottom: 20px;">
-            <label style="display: block; margin-bottom: 8px; font-weight: bold; color: #eee;">${t('wallet.recharge.payment_method')}</label>
-            <div style="display: flex; gap: 15px;">
-                <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
+        <div class="wallet-modal__field wallet-modal__field--last">
+            <div class="wallet-modal__label">${t('wallet.recharge.payment_method')}</div>
+            <div class="wallet-recharge__methods">
+                <label class="wallet-recharge__method">
                     <input type="radio" name="pay_method" value="alipay" checked>
-                    <span style="color: #00A1E9; font-weight: bold;">${t('wallet.recharge.alipay')}</span>
+                    <span class="wallet-recharge__method-name">${t('wallet.recharge.alipay')}</span>
                 </label>
-                <label style="display: flex; align-items: center; gap: 5px; cursor: pointer;">
+                <label class="wallet-recharge__method">
                     <input type="radio" name="pay_method" value="wechat" disabled>
-                    <span style="color: #888; font-weight: bold;">${t('wallet.recharge.wechat')}</span>
+                    <span class="wallet-modal__muted">${t('wallet.recharge.wechat')}</span>
                 </label>
             </div>
         </div>
 
-        <div id="qr-container" style="display: none; text-align: center; margin-bottom: 20px; padding: 20px; background: #fff; border-radius: 8px;">
-            <div id="qr-loading" style="color: #666; font-size: 14px; margin-bottom: 10px;">${t('wallet.recharge.connecting')}</div>
-            <img id="qr-image" style="width: 180px; height: 180px; display: none; margin: 0 auto;">
-            <div style="color: #333; font-size: 13px; margin-top: 10px; font-weight: bold;">${t('wallet.recharge.scan_to_pay')} <span id="pay-price-text" style="color: #F44336;"></span> ${t('wallet.recharge.yuan')}</div>
-            <div style="color: #888; font-size: 11px; margin-top: 5px;">${t('wallet.recharge.auto_redirect')}</div>
+        <div id="qr-container" class="wallet-recharge__qr" style="display: none;">
+            <div id="qr-loading" class="wallet-recharge__qr-status">${t('wallet.recharge.connecting')}</div>
+            <img id="qr-image" class="wallet-recharge__qr-image" style="display: none;">
+            <div class="wallet-recharge__pay-label">${t('wallet.recharge.scan_to_pay')} <span id="pay-price-text" class="wallet-modal__danger"></span> ${t('wallet.recharge.yuan')}</div>
+            <div class="wallet-recharge__qr-hint">${t('wallet.recharge.auto_redirect')}</div>
         </div>
 
-        <button id="btn-create-order" style="width: 100%; padding: 12px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 15px; box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3);">${t('wallet.recharge.get_qr')}</button>
+        <button type="button" id="btn-create-order" class="wallet-modal__button wallet-modal__button--primary">${t('wallet.recharge.get_qr')}</button>
     `;
 
     const customInputContainer = container.querySelector("#custom-input-container");
@@ -131,6 +129,8 @@ export async function openRechargeModal(currentUser, onBalanceChange) {
         container.querySelectorAll('.recharge-opt').forEach(el => {
             el.onclick = () => {
                 if (!scope.isCurrent() || submitting) return;
+                const restoreOptionFocus = document.activeElement === el;
+                const optionIndex = el.getAttribute('data-index');
                 selectedOption = rechargeOptions[parseInt(el.getAttribute('data-index'))];
                 container.querySelector('#recharge-grid').innerHTML = renderOptions();
                 
@@ -141,7 +141,13 @@ export async function openRechargeModal(currentUser, onBalanceChange) {
                     customInputContainer.style.display = "none";
                     customAmountInput.value = ""; 
                 }
-                bindGridEvents(); 
+                bindGridEvents();
+                if (restoreOptionFocus && !selectedOption.isCustom && scope.isCurrent() && container.isConnected &&
+                        document.activeElement === document.body) {
+                    const replacement = Array.from(container.querySelectorAll('.recharge-opt'))
+                        .find(button => button.getAttribute('data-index') === optionIndex);
+                    replacement?.focus({ preventScroll: true });
+                }
             };
         });
     };

前端页面/market/资金与钱包_提现组件.js

@@ -20,7 +20,6 @@ let withdrawalSequence = 0;
 function _setButtonState(btn, disabled, bgColor, text) {
     btn.disabled = disabled;
     btn.setAttribute('aria-busy', String(disabled));
-    btn.style.background = bgColor;
     btn.innerText = text;
 }
 
@@ -85,48 +84,48 @@ export async function openWithdrawModal(currentUser, onSuccess) {
         showToast(t('wallet.withdraw.no_balance'), "warning"); scope.dispose(); return;
     }
 
-    container.style.color = "#ccc";
+    container.className = "wallet-modal wallet-modal--withdraw";
 
     container.innerHTML = `
-        <div style="margin-bottom: 20px; background: rgba(33, 150, 243, 0.1); border: 1px dashed #2196F3; padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
+        <div class="wallet-withdraw__summary">
             <div>
-                <div style="font-size: 12px; color: #2196F3; margin-bottom: 5px;">${t('wallet.withdraw.total_withdrawable')}</div>
-                <div style="font-size: 24px; font-weight: bold; color: #fff;">${maxWithdraw}</div>
+                <div class="wallet-withdraw__summary-label">${t('wallet.withdraw.total_withdrawable')}</div>
+                <div class="wallet-withdraw__balance">${maxWithdraw}</div>
             </div>
-            <div style="text-align: right;">
-                <div style="font-size: 12px; color: #888; margin-bottom: 5px;">${t('wallet.withdraw.rmb_equivalent')}</div>
-                <div style="font-size: 16px; font-weight: bold; color: #4CAF50;">≈ ${t('wallet.recharge.price_prefix')} ${maxWithdraw.toFixed(2)}</div>
+            <div class="wallet-withdraw__equivalent">
+                <div class="wallet-withdraw__summary-label">${t('wallet.withdraw.rmb_equivalent')}</div>
+                <div class="wallet-withdraw__equivalent-value">≈ ${t('wallet.recharge.price_prefix')} ${maxWithdraw.toFixed(2)}</div>
             </div>
         </div>
 
-        <div style="margin-bottom: 15px;">
-            <label style="display:block; margin-bottom:5px; color:#ccc;">${t('wallet.withdraw.amount_label')} <span style="color:#F44336">*</span></label>
-            <input type="number" id="withdraw-amount" placeholder="${t('wallet.withdraw.amount_placeholder')}" max="${maxWithdraw}" min="1" step="1" style="width:100%; padding:10px; background:var(--comfy-input-bg); border:1px solid #555; color:#fff; border-radius:4px; box-sizing:border-box;">
+        <div class="wallet-modal__field">
+            <label for="withdraw-amount" class="wallet-modal__label">${t('wallet.withdraw.amount_label')} <span class="wallet-modal__danger">*</span></label>
+            <input type="number" id="withdraw-amount" placeholder="${t('wallet.withdraw.amount_placeholder')}" max="${maxWithdraw}" min="1" step="1" class="wallet-modal__input">
             
-            <div id="fee-calc-box" style="margin-top: 10px; padding: 10px; background: rgba(255,152,0,0.1); border: 1px dashed #FF9800; border-radius: 4px; font-size: 12px; color: #FF9800; display:none; line-height: 1.5;">
+            <div id="fee-calc-box" class="wallet-withdraw__fee" style="display:none;">
                 <div id="fee-text"></div>
             </div>
         </div>
 
-        <div style="margin-bottom: 15px;">
-            <label style="display:block; margin-bottom:5px; color:#ccc;">${t('wallet.withdraw.alipay_account')} <span style="color:#F44336">*</span></label>
-            <input type="text" id="withdraw-account" placeholder="${t('wallet.withdraw.alipay_placeholder')}" style="width:100%; padding:10px; background:var(--comfy-input-bg); border:1px solid #555; color:#fff; border-radius:4px; box-sizing:border-box;">
+        <div class="wallet-modal__field">
+            <label for="withdraw-account" class="wallet-modal__label">${t('wallet.withdraw.alipay_account')} <span class="wallet-modal__danger">*</span></label>
+            <input type="text" id="withdraw-account" placeholder="${t('wallet.withdraw.alipay_placeholder')}" class="wallet-modal__input">
         </div>
 
-        <div style="margin-bottom: 15px;">
-            <label style="display:block; margin-bottom:5px; color:#ccc;">${t('wallet.withdraw.real_name')} <span style="color:#F44336">*</span></label>
-            <input type="text" id="withdraw-name" placeholder="${t('wallet.withdraw.real_name_placeholder')}" style="width:100%; padding:10px; background:var(--comfy-input-bg); border:1px solid #555; color:#fff; border-radius:4px; box-sizing:border-box;">
+        <div class="wallet-modal__field">
+            <label for="withdraw-name" class="wallet-modal__label">${t('wallet.withdraw.real_name')} <span class="wallet-modal__danger">*</span></label>
+            <input type="text" id="withdraw-name" placeholder="${t('wallet.withdraw.real_name_placeholder')}" class="wallet-modal__input">
         </div>
 
-        <div style="margin-bottom: 20px;">
-            <label style="display:block; margin-bottom:5px; color:#ccc;">${t('wallet.withdraw.security_code')} <span style="color:#F44336">*</span></label>
-            <div style="display:flex; gap:10px;">
-                <input type="text" id="withdraw-code" placeholder="${t('wallet.withdraw.code_placeholder')}" maxlength="6" style="flex:1; padding:10px; background:var(--comfy-input-bg); border:1px solid #555; color:#fff; border-radius:4px; box-sizing:border-box;">
-                <button id="btn-send-code" style="padding:0 15px; background:#2196F3; color:white; border:none; border-radius:4px; cursor:pointer; font-weight:bold; white-space:nowrap; transition:0.2s;">${t('wallet.withdraw.get_code')}</button>
+        <div class="wallet-modal__field wallet-modal__field--last">
+            <label for="withdraw-code" class="wallet-modal__label">${t('wallet.withdraw.security_code')} <span class="wallet-modal__danger">*</span></label>
+            <div class="wallet-withdraw__code-row">
+                <input type="text" id="withdraw-code" placeholder="${t('wallet.withdraw.code_placeholder')}" maxlength="6" class="wallet-modal__input wallet-withdraw__code-input">
+                <button type="button" id="btn-send-code" class="wallet-modal__button wallet-modal__button--code">${t('wallet.withdraw.get_code')}</button>
             </div>
         </div>
 
-        <button id="btn-submit-withdraw" style="width:100%; padding:12px; background:#4CAF50; color:white; border:none; border-radius:4px; cursor:pointer; font-weight:bold; font-size:15px; transition:0.2s;" >${t('wallet.withdraw.confirm')}</button>
+        <button type="button" id="btn-submit-withdraw" class="wallet-modal__button wallet-modal__button--primary" >${t('wallet.withdraw.confirm')}</button>
     `;
 
     // 🚀 核心逻辑：动态计算提现手续费
@@ -151,9 +150,9 @@ export async function openWithdrawModal(currentUser, onSuccess) {
         
         feeBox.style.display = "block";
         if (fee > 0) {
-            feeText.innerHTML = `${t('wallet.withdraw.fee_quota_exhausted')}<br>${t('wallet.withdraw.fee_deducted')}<strong style="color:#F44336;">${fee} ${t('wallet.recharge.points_suffix')}</strong><br>${t('wallet.withdraw.fee_actual')}<strong style="color:#4CAF50;">${(val - fee).toFixed(2)} ${t('wallet.withdraw.yuan')}</strong>`;
+            feeText.innerHTML = `${t('wallet.withdraw.fee_quota_exhausted')}<br>${t('wallet.withdraw.fee_deducted')}<strong class="wallet-modal__danger">${fee} ${t('wallet.recharge.points_suffix')}</strong><br>${t('wallet.withdraw.fee_actual')}<strong class="wallet-modal__success">${(val - fee).toFixed(2)} ${t('wallet.withdraw.yuan')}</strong>`;
         } else {
-            feeText.innerHTML = `${t('wallet.withdraw.fee_free_quota')}<br>${t('wallet.withdraw.fee_full_amount')}<strong style="color:#4CAF50;">${val.toFixed(2)} ${t('wallet.withdraw.yuan')}</strong>`;
+            feeText.innerHTML = `${t('wallet.withdraw.fee_free_quota')}<br>${t('wallet.withdraw.fee_full_amount')}<strong class="wallet-modal__success">${val.toFixed(2)} ${t('wallet.withdraw.yuan')}</strong>`;
         }
     };
 
@@ -162,8 +161,20 @@ export async function openWithdrawModal(currentUser, onSuccess) {
         if (!scope.isCurrent() || btnSendCode.disabled) return;
         _setButtonState(btnSendCode, true, "#555", t('wallet.withdraw.sending'));
         try {
-            await api.sendVerifyCode(currentUser.email, "email", "withdraw", currentUser.account);
+            const profile = await api.getUserProfile(account, { noCache: true, noStore: true, componentId,
+                timeout: API.BACKGROUND_TIMEOUT, retries: API.BACKGROUND_RETRIES });
             if (!scope.isCurrent()) return;
+            if (!profile || typeof profile !== "object" || Array.isArray(profile) || profile.status !== "success" ||
+                    !profile.data || typeof profile.data !== "object" ||
+                    Array.isArray(profile.data) || profile.data.account !== account ||
+                    typeof profile.data.email !== "string" || !profile.data.email.trim()) {
+                throw new Error("unconfirmed withdrawal contact");
+            }
+            const result = await api.sendVerifyCode(profile.data.email, "email", "withdraw", account);
+            if (!scope.isCurrent()) return;
+            if (!result || typeof result !== "object" || Array.isArray(result) || result.status !== "success") {
+                throw new Error("unconfirmed verification code");
+            }
             showToast(t('wallet.withdraw.code_sent'), "success");
             let count = 60;
             countdown = setInterval(() => {

前端页面/post/发布帖子组件.js

@@ -17,7 +17,7 @@ import { t } from "../components/用户体验增强.js";
 import { removeCache, removeCacheByPrefix } from "../components/性能优化工具.js";
 import { createPublishEditingLock } from "../market/发布编辑锁.js";
 import { createPublishSubmissionScope } from "../market/发布提交生命周期.js";
-import { API, CACHE, PUBLISH_MEDIA_LIMITS, IMAGE_PROCESS, escapeHtml } from "../core/全局配置.js";
+import { areKeyboardShortcutsEnabled, API, CACHE, PUBLISH_MEDIA_LIMITS, IMAGE_PROCESS, escapeHtml } from "../core/全局配置.js";
 
 function requirePostUpload(result) {
     if (result?.status !== 'success' || typeof result.url !== 'string' || !result.url.trim()) {
@@ -58,8 +58,9 @@ function updateCoverMark(previewContainer) {
         wrapper.tabIndex = 0;
         wrapper.setAttribute('role', 'group');
         wrapper.setAttribute('aria-label', t('post.image_position', { index: idx + 1, total: wrappers.length }));
-        wrapper.setAttribute('aria-keyshortcuts', 'Alt+ArrowLeft Alt+ArrowRight');
-        if (!wrapper.title) wrapper.title = t('post.image_move_hint');
+        if (areKeyboardShortcutsEnabled()) wrapper.setAttribute('aria-keyshortcuts', 'Alt+ArrowLeft Alt+ArrowRight');
+        else wrapper.removeAttribute('aria-keyshortcuts');
+        wrapper.title = t(areKeyboardShortcutsEnabled() ? 'post.image_move_hint' : 'post.image_drag_hint');
         const remove = wrapper.querySelector('button[data-action="remove"]');
         if (remove) {
             remove.type = 'button';
@@ -68,13 +69,13 @@ function updateCoverMark(previewContainer) {
         if (img && !img.hasAttribute('alt')) img.alt = '';
 
         if (img) {
-            img.style.borderColor = idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))';
+            img.style.borderColor = idx === 0 ? 'var(--rk-success, #4caf50)' : 'var(--rk-border, var(--border-color, #444))';
         }
         if (idx === 0) {
             if (!coverLabel) {
                 const label = document.createElement('span');
                 label.className = 'cover-label';
-                label.style.cssText = 'position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-text, var(--fg-color, #ddd)); font-size: 10px; padding: 2px 6px; border-radius: 3px; pointer-events: none;';
+                
                 label.textContent = t('post.cover');
                 wrapper.appendChild(label);
             }
@@ -109,7 +110,7 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
 
     wrappers.forEach(wrapper => {
         wrapper.draggable = true;
-        wrapper.style.cursor = 'grab';
+        
 
         // 绑定删除按钮（如果尚未绑定）
         const removeBtn = wrapper.querySelector('button[data-action="remove"]');
@@ -131,7 +132,7 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
         }
 
         wrapper.onkeydown = (e) => {
-            if (e.target !== wrapper || !e.altKey || e.ctrlKey || e.metaKey || e.shiftKey ||
+            if (!areKeyboardShortcutsEnabled() || e.defaultPrevented || e.keyCode === 229 || e.target !== wrapper || !e.altKey || e.ctrlKey || e.metaKey || e.shiftKey ||
                 e.repeat || e.isComposing || !canInteract() ||
                 !['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
             const current = getWrappers();
@@ -177,13 +178,15 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
             _clearDragIndicators(currentWrappers);
 
             // 在当前目标左侧显示绿色竖线指示插入位置
-            wrapper.style.borderLeft = '3px solid #4CAF50';
+            wrapper.style.borderLeft = '3px solid var(--rk-success, #4caf50)';
             wrapper.style.paddingLeft = '5px';
+            
         };
 
         wrapper.ondragleave = () => {
             wrapper.style.borderLeft = '';
             wrapper.style.paddingLeft = '';
+            
         };
 
         wrapper.ondrop = (e) => {
@@ -234,7 +237,7 @@ function formatFileSize(bytes) {
 
 // ===== 共用样式常量 =====
 // P3-1: 图片预览包装器通用尺寸样式
-const PREVIEW_WRAPPER_STYLE = { position: "relative", width: "80px", height: "80px" };
+
 
 // ===== 共用辅助函数 =====
 
@@ -243,6 +246,7 @@ function _clearDragIndicators(wrappers) {
     wrappers.forEach(w => {
         w.style.borderLeft = '';
         w.style.paddingLeft = '';
+        
     });
 }
 
@@ -252,19 +256,7 @@ function _createAddButton(imagesInput, scope) {
     addBtn.type = "button";
     addBtn.setAttribute("aria-label", t("post.upload_images"));
     addBtn.setAttribute("data-file-picker-button", "");
-    Object.assign(addBtn.style, {
-        width: "80px",
-        height: "80px",
-        background: "transparent",
-        border: "2px dashed var(--rk-border, var(--border-color, #444))",
-        borderRadius: "6px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        color: "var(--rk-muted, var(--descrip-text, #a4a4a4))",
-        fontSize: "24px"
-    });
+    addBtn.className = "post-publish-add";
     addBtn.textContent = "+";
     addBtn.onclick = (e) => {
         if (!scope.isCurrent() || imagesInput.disabled) return;
@@ -379,7 +371,7 @@ export function createPublishPostView(currentUser, editPostData = null) {
     
     const container = document.createElement("div");
 
-    container.classList.add("ranking-publish-form");
+    container.classList.add("ranking-publish-form", "discussion-publish");
     container.innerHTML = `
         <!-- 顶部标题栏 -->
         <div class="ranking-publish-header">
@@ -394,65 +386,65 @@ export function createPublishPostView(currentUser, editPostData = null) {
         <!-- 表单内容 -->
         <div class="ranking-publish-body">
             <!-- 模式切换 -->
-            <div style="margin-bottom: 15px;">
-                <label style="display: block; font-size: 13px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">
+            <div class="post-publish__field-group">
+                <label class="post-publish__field-label">
                     ${t('post.mode_label')}
                 </label>
-                <div role="group" aria-label="${t('post.mode_label')}" style="display: flex; gap: 0; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 1px solid var(--rk-border, var(--border-color, #444)); border-radius: 6px; overflow: hidden;">
-                    <button id="mode-image" style="flex: 1; padding: 10px; background: #4CAF50; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s;">
+                <div role="group" aria-label="${t('post.mode_label')}" class="post-publish__modes">
+                    <button type="button" id="mode-image" class="post-publish__mode-image">
                         📷 ${t('post.mode_image')}
                     </button>
-                    <button id="mode-video" style="flex: 1; padding: 10px; background: transparent; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); border: none; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s; border-left: 1px solid var(--rk-border, var(--border-color, #444));">
+                    <button type="button" id="mode-video" class="post-publish__mode-video">
                         🎬 ${t('post.mode_video')}
                     </button>
                 </div>
             </div>
             
             <!-- 图片上传区 -->
-            <div id="image-upload-section" style="margin-bottom: 20px;">
-                <label style="display: block; font-size: 13px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">
-                    🖼️ ${t('post.upload_images')} <span style="color: #F44336;">*</span>
-                    <span style="font-weight: normal; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 12px;">（${t('post.max_9_images')}）</span>
+            <div id="image-upload-section" class="post-publish__upload-section">
+                <label for="images-input" class="post-publish__field-label">
+                    🖼️ ${t('post.upload_images')} <span class="post-publish__required">*</span>
+                    <span class="post-publish__hint">（${t('post.max_9_images')}）</span>
                 </label>
                 <input type="file" id="images-input" accept="image/*" multiple style="display: none;">
-                <div id="images-preview" style="display: flex; flex-wrap: wrap; gap: 8px; min-height: 80px; padding: 15px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 2px dashed var(--rk-border, var(--border-color, #444)); border-radius: 8px; cursor: pointer; transition: 0.2s;">
-                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                        <div style="font-size: 32px; margin-bottom: 8px;">📷</div>
+                <div id="images-preview" class="post-publish__images-preview">
+                    <div class="post-publish__upload-empty">
+                        <div class="post-publish__upload-icon">📷</div>
                         ${t('post.click_upload')}
                     </div>
                 </div>
             </div>
             
             <!-- 视频上传区 -->
-            <div id="video-upload-section" style="margin-bottom: 20px; display: none;">
-                <label style="display: block; font-size: 13px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">
-                    🎬 ${t('post.upload_video')} <span style="color: #F44336;">*</span>
-                    <span style="font-weight: normal; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 12px;">${t('post.video_limits_hint', { megabytes: PUBLISH_MEDIA_LIMITS.VIDEO_MAX_BYTES / (1024 * 1024), minutes: PUBLISH_MEDIA_LIMITS.VIDEO_MAX_SECONDS / 60 })}</span>
+            <div id="video-upload-section" style="display: none;" class="post-publish__upload-section">
+                <label for="video-input" class="post-publish__field-label">
+                    🎬 ${t('post.upload_video')} <span class="post-publish__required">*</span>
+                    <span class="post-publish__hint">${t('post.video_limits_hint', { megabytes: PUBLISH_MEDIA_LIMITS.VIDEO_MAX_BYTES / (1024 * 1024), minutes: PUBLISH_MEDIA_LIMITS.VIDEO_MAX_SECONDS / 60 })}</span>
                 </label>
                 <input type="file" id="video-input" accept="video/mp4,video/webm,video/quicktime" style="display: none;">
-                <div id="video-preview-area" style="padding: 15px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 2px dashed var(--rk-border, var(--border-color, #444)); border-radius: 8px; cursor: pointer; transition: 0.2s;">
-                    <div id="video-empty-state" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                        <div style="font-size: 32px; margin-bottom: 8px;">🎬</div>
+                <div id="video-preview-area" class="post-publish__video-preview">
+                    <div id="video-empty-state" class="post-publish__upload-empty">
+                        <div class="post-publish__upload-icon">🎬</div>
                         ${t('post.click_upload_video')}
                     </div>
                     <div id="video-player-wrap" style="display: none;">
-                        <video id="video-player" controls style="width: 100%; max-height: 300px; border-radius: 8px; background: #000; display: block;"></video>
-                        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
-                            <div style="font-size: 12px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); line-height: 1.5;">
+                        <video id="video-player" controls class="post-publish__video"></video>
+                        <div class="post-publish__video-info">
+                            <div class="post-publish__video-meta">
                                 <div id="video-name"></div>
                                 <div id="video-meta"></div>
                             </div>
-                            <button id="btn-remove-video" style="width: 28px; height: 28px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0;">×</button>
+                            <button type="button" id="btn-remove-video" aria-label="${t('common.delete')} ${t('post.mode_video')}" class="post-publish__remove-video">×</button>
                         </div>
                         <!-- 封面区域 -->
-                        <div id="video-cover-wrap" style="display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color, #333);">
-                            <div style="font-size: 12px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">${t('post.video_cover')}</div>
+                        <div id="video-cover-wrap" style="display: none;" class="post-publish__cover-section">
+                            <div class="post-publish__cover-heading">${t('post.video_cover')}</div>
                             <div class="ranking-publish-cover-controls">
-                                <div style="position: relative; width: 80px; height: 80px; flex-shrink: 0;">
-                                    <img id="cover-thumb" src="" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid #4CAF50; display: none;">
-                                    <span id="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px; display: none;">${t('post.cover')}</span>
+                                <div class="post-publish__cover-slot">
+                                    <img id="cover-thumb" src="" style="display: none;" class="post-publish__cover-image">
+                                    <span id="cover-label" style="display: none;" class="post-publish__cover-label">${t('post.cover')}</span>
                                 </div>
-                                <div style="display: flex; flex-direction: column; gap: 6px;">
+                                <div class="post-publish__cover-actions">
                                     <button type="button" id="btn-capture-frame" class="ranking-publish-secondary">
                                         📸 ${t('post.capture_frame')}
                                     </button>
@@ -468,40 +460,40 @@ export function createPublishPostView(currentUser, editPostData = null) {
             </div>
             
             <!-- 标题输入 -->
-            <div style="margin-bottom: 15px;">
-                <label for="title-input" style="display: block; font-size: 13px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">
-                    📝 ${t('post.title_label')} <span style="color: #F44336;">*</span>
+            <div class="post-publish__field-group">
+                <label for="title-input" class="post-publish__field-label">
+                    📝 ${t('post.title_label')} <span class="post-publish__required">*</span>
                 </label>
                 <input type="text" id="title-input" class="ranking-publish-input" value="${escapeHtml(editTitle)}" placeholder="${t('post.title_placeholder')}" maxlength="50">
-                <div style="text-align: right; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 4px;">
+                <div class="post-publish__counter">
                     <span id="title-count">${editTitle.length}</span>/50
                 </div>
             </div>
             
             <!-- 正文输入 -->
-            <div style="margin-bottom: 15px;">
-                <label for="content-input" style="display: block; font-size: 13px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">
+            <div class="post-publish__field-group">
+                <label for="content-input" class="post-publish__field-label">
                     ✍️ ${t('post.content_label')}
                 </label>
-                <textarea id="content-input" class="ranking-publish-input" placeholder="${t('post.content_placeholder')}" maxlength="2000" style="height: 200px; resize: none; line-height: 1.6;">${escapeHtml(editContent)}</textarea>
-                <div style="text-align: right; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 4px;">
+                <textarea id="content-input" class="post-publish__content ranking-publish-input" placeholder="${t('post.content_placeholder')}" maxlength="2000">${escapeHtml(editContent)}</textarea>
+                <div class="post-publish__counter">
                     <span id="content-count">${editContent.length}</span>/2000
                 </div>
             </div>
             
             <!-- 原创作品勾选框 -->
-            <div style="margin-bottom: 15px; padding: 12px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 1px solid var(--rk-border, var(--border-color, #444)); border-radius: 6px;">
-                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
-                    <input type="checkbox" id="is-original-checkbox" ${editIsOriginal ? 'checked' : ''} style="width: 16px; height: 16px; cursor: pointer; accent-color: #4CAF50;" />
-                    <span style="font-size: 13px; color: var(--rk-text, var(--fg-color, #ddd));">🎨 ${t('publish.mark_as_original')}</span>
+            <div class="post-publish__original">
+                <label class="post-publish__original-label">
+                    <input type="checkbox" id="is-original-checkbox" ${editIsOriginal ? 'checked' : ''} class="post-publish__original-checkbox" />
+                    <span class="post-publish__original-text">🎨 ${t('publish.mark_as_original')}</span>
                 </label>
-                <div style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 6px; padding-left: 24px;">
+                <div class="post-publish__original-hint">
                     ${t('publish.original_default_hint')}
                 </div>
             </div>
             
             <!-- 提示信息 -->
-            <div style="background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.3); border-radius: 6px; padding: 12px; font-size: 12px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); line-height: 1.6;">
+            <div class="post-publish__notice">
                 💡 <strong>${t('post.publish_notice')}：</strong><br>
                 • ${t('post.notice_original')}<br>
                 • ${t('post.notice_compress')}<br>
@@ -509,8 +501,8 @@ export function createPublishPostView(currentUser, editPostData = null) {
             </div>
             
             <!-- 确认发布按钮 -->
-            <button id="btn-submit-post" style="width: 100%; padding: 12px; background: #4CAF50; border: none; color: var(--rk-on-accent, #fff); border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: bold; transition: 0.2s; margin-top: 15px; margin-bottom: 5px;" onmouseover="this.style.background='#45a049'" onmouseout="this.style.background='#4CAF50'">
-                🚀 ${isEditMode ? '保存修改' : t('common.publish')}
+            <button type="button" id="btn-submit-post" class="post-publish__submit">
+                🚀 ${isEditMode ? t('task.save_changes') : t('common.publish')}
             </button>
         </div>
     `;
@@ -560,6 +552,15 @@ export function createPublishPostView(currentUser, editPostData = null) {
     const isOriginalCheckbox = container.querySelector("#is-original-checkbox");
     const account = currentUser?.account;
     const scope = createPublishSubmissionScope(container, submitBtn, account);
+    const refreshImageShortcuts = () => {
+        if (scope.isCurrent()) updateCoverMark(imagesPreview);
+    };
+    window.addEventListener('comfy-settings-changed', refreshImageShortcuts);
+    window.addEventListener('storage', refreshImageShortcuts);
+    scope.addCleanup(() => {
+        window.removeEventListener('comfy-settings-changed', refreshImageShortcuts);
+        window.removeEventListener('storage', refreshImageShortcuts);
+    });
     const editingLock = createPublishEditingLock(container, [submitBtn, container.querySelector("#btn-back-publish")]);
     scope.addCleanup(() => editingLock.dispose());
     const previewReaders = new Set(), temporaryVideos = new Map();
@@ -620,17 +621,9 @@ export function createPublishPostView(currentUser, editPostData = null) {
         modeImageBtn.setAttribute('aria-pressed', String(postMode === 'image'));
         modeVideoBtn.setAttribute('aria-pressed', String(postMode === 'video'));
         if (postMode === 'image') {
-            modeImageBtn.style.background = '#4CAF50';
-            modeImageBtn.style.color = 'var(--rk-on-accent, #fff)';
-            modeVideoBtn.style.background = 'transparent';
-            modeVideoBtn.style.color = 'var(--rk-muted, var(--descrip-text, #a4a4a4))';
             imageSection.style.display = 'block';
             videoSection.style.display = 'none';
         } else {
-            modeImageBtn.style.background = 'transparent';
-            modeImageBtn.style.color = 'var(--rk-muted, var(--descrip-text, #a4a4a4))';
-            modeVideoBtn.style.background = '#4CAF50';
-            modeVideoBtn.style.color = 'var(--rk-on-accent, #fff)';
             imageSection.style.display = 'none';
             videoSection.style.display = 'block';
         }
@@ -774,8 +767,8 @@ export function createPublishPostView(currentUser, editPostData = null) {
         
         if (totalImages === 0) {
             imagesPreview.innerHTML = `
-                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                    <div style="font-size: 32px; margin-bottom: 8px;">📷</div>
+                <div class="post-publish__upload-empty">
+                    <div class="post-publish__upload-icon">📷</div>
                     ${t('post.click_upload')}
                 </div>
             `;
@@ -801,12 +794,12 @@ export function createPublishPostView(currentUser, editPostData = null) {
         
         existingImageUrls.forEach((url, idx) => {
             const wrapper = document.createElement("div");
-            Object.assign(wrapper.style, PREVIEW_WRAPPER_STYLE);
+            wrapper.className = "post-publish-preview";
             
             wrapper.innerHTML = `
-                <img src="${escapeHtml(url)}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid ${idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))'};">
-                ${idx === 0 ? `<span class="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px;">${t('post.cover')}</span>` : ''}
-                <button data-action="remove" data-existing-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+                <img src="${escapeHtml(url)}" class="post-publish__preview-image">
+                ${idx === 0 ? `<span class="post-publish__cover-label cover-label">${t('post.cover')}</span>` : ''}
+                <button type="button" data-action="remove" data-existing-idx="${idx}" class="post-publish__remove-image">×</button>
             `;
 
             wrapper._imageType = 'existing';
@@ -830,11 +823,11 @@ export function createPublishPostView(currentUser, editPostData = null) {
             previewReaders.add(reader);
             reader.onabort = () => finishPreviewReader(reader);
             const wrapper = document.createElement("div");
-            Object.assign(wrapper.style, PREVIEW_WRAPPER_STYLE);
+            wrapper.className = "post-publish-preview";
             wrapper.innerHTML = `
-                <img src="" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid ${existingImageUrls.length === 0 && idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))'};">
-                ${existingImageUrls.length === 0 && idx === 0 ? `<span class="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px;">${t('post.cover')}</span>` : ''}
-                <button data-action="remove" data-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+                <img src="" class="post-publish__preview-image">
+                ${existingImageUrls.length === 0 && idx === 0 ? `<span class="post-publish__cover-label cover-label">${t('post.cover')}</span>` : ''}
+                <button type="button" data-action="remove" data-idx="${idx}" class="post-publish__remove-image">×</button>
             `;
 
             wrapper.querySelector('img').removeAttribute('src');
@@ -881,8 +874,8 @@ export function createPublishPostView(currentUser, editPostData = null) {
         const generation = beginImagePreviews();
         if (imageFiles.length === 0) {
             imagesPreview.innerHTML = `
-                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                    <div style="font-size: 32px; margin-bottom: 8px;">📷</div>
+                <div class="post-publish__upload-empty">
+                    <div class="post-publish__upload-icon">📷</div>
                     ${t('post.click_upload')}
                 </div>
             `;
@@ -898,12 +891,12 @@ export function createPublishPostView(currentUser, editPostData = null) {
             previewReaders.add(reader);
             reader.onabort = () => finishPreviewReader(reader);
             const wrapper = document.createElement("div");
-            Object.assign(wrapper.style, PREVIEW_WRAPPER_STYLE);
+            wrapper.className = "post-publish-preview";
 
             wrapper.innerHTML = `
-                <img src="" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid ${idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))'};">
-                ${idx === 0 ? `<span class="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px;">${t('post.cover')}</span>` : ''}
-                <button data-action="remove" data-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+                <img src="" class="post-publish__preview-image">
+                ${idx === 0 ? `<span class="post-publish__cover-label cover-label">${t('post.cover')}</span>` : ''}
+                <button type="button" data-action="remove" data-idx="${idx}" class="post-publish__remove-image">×</button>
             `;
 
             wrapper.querySelector('img').removeAttribute('src');

前端页面/post/帖子详情组件.js

@@ -11,7 +11,7 @@
 
 import { api, proxyImages, captureRequestSession, requestCancelManager } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
-import { getCoverSandboxHTML, setupImageSandboxEvents } from "../components/图片沙盒组件.js";
+import { getCoverSandboxHTML, setupImageSandboxEvents, cleanupImageSandbox } from "../components/图片沙盒组件.js";
 import { getVideoPlayerHTML, setupVideoPlayerEvents, cleanupVideoPlayer } from "../components/视频播放器组件.js";
 import { renderTipLevelHTML } from "../components/打赏等级工具.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
@@ -25,6 +25,8 @@ import { createRatingStars, isValidRatingResponse } from "../social/评论与互
 import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
 import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
 
+import { isConfirmedDedicatedCommentResponse, isDefiniteCommentRejection } from "../social/评论数据工具.js";
+
 const viewContexts = new WeakMap();
 let postViewSequence = 0;
 const isCurrent = node => !!viewContexts.get(node)?.scope.isCurrent();
@@ -48,10 +50,10 @@ function _generateAvatarHtml(avatar, name, size, extraStyle = '') {
     const initial = (name || 'U')[0].toUpperCase();
     // 🔒 XSS防护：avatar / name 均来自他人可修改的资料（昵称首字母可能是 < ），写入 HTML 前必须转义
     if (avatar) {
-        return `<img class="swr-avatar" src="${escapeHtml(avatar)}" style="width: ${size}px; height: ${size}px; border-radius: 50%; object-fit: cover; ${extraStyle}">`;
+        return `<img alt="" class="swr-avatar post-detail-avatar ${extraStyle === 'border: 2px solid #444;' ? 'post-detail-avatar--border' : extraStyle === 'background: var(--comfy-input-bg);' ? 'post-detail-avatar--panel' : ''}" src="${escapeHtml(avatar)}" style="width: ${size}px; height: ${size}px; ${['border: 2px solid #444;', 'background: var(--comfy-input-bg);'].includes(extraStyle) ? '' : extraStyle}">`;
     }
     const fontSize = Math.max(9, Math.round(size * 0.4));
-    return `<div class="swr-avatar" style="width: ${size}px; height: ${size}px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: ${fontSize}px; font-weight: bold;">${escapeHtml(initial)}</div>`;
+    return `<div class="swr-avatar post-detail-avatar ${extraStyle === 'border: 2px solid #444;' ? 'post-detail-avatar--border' : extraStyle === 'background: var(--comfy-input-bg);' ? 'post-detail-avatar--panel' : ''}" style="width: ${size}px; height: ${size}px; font-size: ${fontSize}px; font-weight: bold;">${escapeHtml(initial)}</div>`;
 }
 
 /**
@@ -66,7 +68,7 @@ function _updateAvatarElement(avatarEl, profile, size, extraStyle = '') {
     if (avatarEl.tagName === 'IMG') {
         avatarEl.src = profile.avatar;
     } else {
-        avatarEl.outerHTML = `<img class="swr-avatar" src="${escapeHtml(profile.avatar)}" style="width: ${size}px; height: ${size}px; border-radius: 50%; object-fit: cover; ${extraStyle}">`;
+        avatarEl.outerHTML = `<img alt="" class="swr-avatar post-detail-avatar ${extraStyle === 'border: 2px solid #444;' ? 'post-detail-avatar--border' : extraStyle === 'background: var(--comfy-input-bg);' ? 'post-detail-avatar--panel' : ''}" src="${escapeHtml(profile.avatar)}" style="width: ${size}px; height: ${size}px; ${['border: 2px solid #444;', 'background: var(--comfy-input-bg);'].includes(extraStyle) ? '' : extraStyle}">`;
     }
 }
 
@@ -75,31 +77,21 @@ function _updateAvatarElement(avatarEl, profile, size, extraStyle = '') {
  */
 export function createPostDetailView(postId, currentUser) {
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        color: "#ccc",
-        fontSize: "14px",
-        padding: "0",
-        overflowY: "auto",
-        flex: "1",
-        boxSizing: "border-box"
-    });
+    container.className = "discussion-detail";
     
     container.innerHTML = `
         <!-- 顶部标题栏 -->
-        <div style="display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid #444; background: #1a1a1a;">
-            <button id="btn-back-detail" style="margin-left: 15px; margin-top: 15px; background: rgba(51,51,51,0.8); border: 1px solid rgba(85,85,85,0.8); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: 0.2s;" onmouseover="this.style.background='#4CAF50'; this.style.borderColor='#4CAF50'" onmouseout="this.style.background='rgba(51,51,51,0.8)'; this.style.borderColor='rgba(85,85,85,0.8)'">
+        <div class="post-detail__header">
+            <button type="button" id="btn-back-detail" class="post-detail__back">
                 ⬅ ${t('common.back')}
             </button>
-            <span style="font-size: 16px; font-weight: bold; color: #fff;">${t('post.detail_title')}</span>
+            <span class="post-detail__heading">${t('post.detail_title')}</span>
         </div>
         
         <!-- 内容区域 -->
-        <div id="post-content" style="flex: 1; overflow-y: auto; padding: 15px;">
-            <div style="text-align: center; padding: 60px; color: #888;">
-                <div style="font-size: 24px; margin-bottom: 10px;">⏳</div>
+        <div id="post-content" class="post-detail__body">
+            <div class="post-detail__loading" role="status">
+                <div class="post-detail__icon">⏳</div>
                 ${t('post.loading')}
             </div>
         </div>
@@ -123,6 +115,7 @@ export function createPostDetailView(postId, currentUser) {
     viewContexts.set(container, context); viewContexts.set(contentArea, context);
     const handleRouteBack = () => scope.dispose();
     scope.addCleanup(() => {
+        cleanupImageSandbox(contentArea);
         cleanupVideoPlayer(contentArea);
         contentArea.querySelectorAll('audio').forEach(audio => { audio.pause(); audio.removeAttribute('src'); audio.load(); });
         contentArea.replaceChildren(); observer?.disconnect();
@@ -158,6 +151,7 @@ async function loadPostDetail(container, postId, currentUser) {
     
     // 先清理旧的视频播放器全局事件（如果存在）
     if (contentArea) {
+        cleanupImageSandbox(contentArea);
         cleanupVideoPlayer(contentArea);
     }
     
@@ -182,8 +176,8 @@ async function loadPostDetail(container, postId, currentUser) {
     
     if (!post) {
         contentArea.innerHTML = `
-            <div style="text-align: center; padding: 60px; color: #F44336;">
-                <div style="font-size: 24px; margin-bottom: 10px;">⚠️</div>
+            <div class="post-detail__error" role="alert">
+                <div class="post-detail__icon">⚠️</div>
                 ${t('post.not_exist')}
             </div>
         `;
@@ -209,92 +203,89 @@ async function loadPostDetail(container, postId, currentUser) {
     
     contentArea.innerHTML = `
             <!-- 图片展示区 -->
-            <div id="images-area" style="margin-bottom: 15px;">
+            <div id="images-area" class="post-detail__media">
                 ${mediaHTML}
             </div>
             
             <!-- 标题 -->
-            <div style="font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 8px; line-height: 1.4;">
+            <div class="post-detail__title">
                 ${escapeHtml(post.title)}
             </div>
             
             <!-- 原创标识 -->
             ${post.is_original ? `
-            <div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; 
-                        background: linear-gradient(135deg, #FF6B35, #FF8F00); border-radius: 12px; 
-                        font-size: 11px; color: #fff; font-weight: 500; margin-bottom: 12px;">
+            <div class="post-detail__original">
                 🎨 ${t('publish.original_no_commercial')}
             </div>
             ` : ''}
             
             <!-- 作者信息（SWR 缓存头像） -->
-            <div id="author-row" style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px; background: #1a1a1a; border-radius: 8px; cursor: pointer;">
-                <div class="swr-avatar-container" style="width: 40px; height: 40px;"></div>
-                <div style="flex: 1;">
-                    <div class="swr-name" style="font-size: 14px; font-weight: 500; color: #fff;">${escapeHtml(post.author_name || post.author)}</div>
-                    <div style="font-size: 11px; color: #888;">${formatTime(post.created_at)}</div>
-                </div>
+            <div class="post-detail__author post-detail-author-row">
+                <button type="button" id="author-row" class="post-detail-author-button"><div class="post-detail__avatar-slot swr-avatar-container"></div>
+                <div class="post-detail__identity">
+                    <div class="post-detail__name swr-name">${escapeHtml(post.author_name || post.author)}</div>
+                    <div class="post-detail__timestamp">${formatTime(post.created_at)}</div>
+                </div></button>
                 ${currentUser && currentUser.account === post.author ? `
-                <div style="display: flex; gap: 8px;" onclick="event.stopPropagation()">
-                    ${IS_WEB_MODE ? '' : `<button id="btn-edit-post" style="background: #2196F3; border: none; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;" title="${t('common.edit')}">✏️</button>`}
-                    <button id="btn-delete-post" style="background: #F44336; border: none; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;" title="${t('common.delete')}">🗑️</button>
+                <div onclick="event.stopPropagation()" class="post-detail__owner-actions">
+                    ${IS_WEB_MODE ? '' : `<button type="button" id="btn-edit-post" aria-label="${t('common.edit')}" title="${t('common.edit')}" class="post-detail__edit">✏️</button>`}
+                    <button type="button" id="btn-delete-post" aria-label="${t('common.delete')}" title="${t('common.delete')}" class="post-detail__delete">🗑️</button>
                 </div>
                 ` : ''}
             </div>
             
             <!-- 正文内容 -->
-            <div style="font-size: 14px; color: #ddd; line-height: 1.8; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">
-                ${escapeHtml(post.content)}
-            </div>
+            <div class="post-detail__content">${escapeHtml(post.content)}</div>
             
             <!-- 互动按钮栏 -->
-            <div id="interaction-bar" style="display: flex; align-items: center; gap: 15px; padding: 15px 0; border-top: 1px solid var(--border-color, #333); border-bottom: 1px solid var(--border-color, #333);">
-                <button id="btn-like" style="background: ${isLiked ? '#FF5722' : 'var(--comfy-input-bg)'}; border: 1px solid ${isLiked ? '#FF5722' : '#555'}; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+            <div id="interaction-bar" class="post-detail__interactions">
+                <button type="button" id="btn-like" aria-label="${t('market.like')}" aria-pressed="${isLiked}" class="post-detail-toggle">
                     ❤️ <span id="like-count">${post.likes || 0}</span>
                 </button>
-                <button id="btn-favorite" style="background: ${isFavorited ? '#FFC107' : 'var(--comfy-input-bg)'}; border: 1px solid ${isFavorited ? '#FFC107' : '#555'}; color: ${isFavorited ? '#000' : '#fff'}; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+                <button type="button" id="btn-favorite" aria-label="${t('market.favorite')}" aria-pressed="${isFavorited}" class="post-detail-toggle">
                     🔖 <span id="favorite-count">${post.favorites || 0}</span>
                 </button>
-                <button id="btn-tip" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+                <button type="button" id="btn-tip" class="post-detail__tip">
                     ${t('post.tip_author')}
                 </button>
                 <!-- 👀 浏览量统计（纯展示） -->
-                <div style="display: flex; align-items: center; gap: 12px; margin-left: auto; color: #888; font-size: 13px;">
-                    <span style="display: flex; align-items: center; gap: 4px;">🔥 <span id="post-view-total">${post.views || 0}</span></span>
-                    <span style="display: flex; align-items: center; gap: 4px;">📅 <span id="post-view-daily">${post.daily_views || 0}</span></span>
+                <div class="post-detail__stats">
+                    <span class="post-detail__stat">🔥 <span id="post-view-total">${post.views || 0}</span></span>
+                    <span class="post-detail__stat">📅 <span id="post-view-daily">${post.daily_views || 0}</span></span>
                 </div>
             </div>
             
             <!-- 评分区域 -->
-            <div id="rating-section" style="padding: 12px 0; border-bottom: 1px solid var(--border-color, #333); margin-bottom: 15px;"></div>
+            <div id="rating-section" class="post-detail__rating"></div>
             
             <!-- 打赏榜单 -->
-            <div id="tip-board-area" style="margin-bottom: 15px;">
+            <div id="tip-board-area" class="post-detail__media">
                 ${renderTipBoard(post.tip_board || [])}
             </div>
             
             <!-- 评论区 -->
-            <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
-                ${t('post.comments_title')} <span style="color: #888; font-weight: normal;">(${post.comments || 0})</span>
+            <div class="post-detail__comments-heading">
+                ${t('post.comments_title')} <span class="post-detail__comments-count">(${post.comments || 0})</span>
             </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'">
+            <div class="post-detail__comment-composer">
+                <input type="text" id="comment-input" required aria-label="${escapeHtml(t('post.comment_placeholder'))}" placeholder="${t('post.comment_placeholder')}" class="post-detail__comment-input">
+                <button type="button" id="btn-send-comment" class="post-detail__comment-send">
                     ${t('common.send')}
                 </button>
             </div>
             
             <!-- 评论列表 -->
-            <div id="comments-list" style="display: flex; flex-direction: column; gap: 10px;">
-                <div style="text-align: center; padding: 20px; color: #888; font-size: 12px;">
+            <div id="comments-list" class="post-detail__comments-list">
+                <div class="post-detail__comments-loading" role="status">
                     ${t('post.comment_loading')}
                 </div>
             </div>
         `;
         
         // 设置图片沙盒事件（视频帖无沙盒元素，函数会安全返回）
+        contentArea.querySelectorAll("#images-area button:not([type])").forEach(button => { button.type = "button"; });
         setupImageSandboxEvents(contentArea);
         
         // 视频播放器事件绑定
@@ -489,19 +480,19 @@ async function showTipDialog(post, currentUser, container) {
     }
 
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.className = "discussion-modal";
     content.innerHTML = `
-        <div style="margin-bottom: 12px; background: rgba(255,152,0,0.1); padding: 10px; border-radius: 4px; border: 1px solid #FF9800; text-align: center;">
-            ${t('wallet.current_balance')}: <strong style="color:#FF9800;">${balance}</strong> ${t('wallet.credits')}
+        <div class="post-detail__balance">
+            ${t('wallet.current_balance')}: <strong class="post-detail__balance-value">${balance}</strong> ${t('wallet.credits')}
         </div>
-        <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>
+        <div class="post-detail__tip-options">
+            <button type="button" class="post-detail__tip-amount tip-amount" data-amount="10">10 ${t('task.points')}</button>
+            <button type="button" class="post-detail__tip-amount tip-amount" data-amount="50">50 ${t('task.points')}</button>
+            <button type="button" class="post-detail__tip-amount tip-amount" data-amount="100">100 ${t('task.points')}</button>
+            <button type="button" class="post-detail__tip-amount tip-amount" data-amount="500">500 ${t('task.points')}</button>
         </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>
+        <div class="post-detail__modal-actions">
+            <button type="button" id="tip-cancel" class="post-detail__modal-cancel">${t('common.cancel')}</button>
         </div>
     `;
 
@@ -550,6 +541,13 @@ async function loadComments(container, postId, currentUser) {
     const sendBtn = container.querySelector("#btn-send-comment");
     if (!isCurrent(container)) return;
     const context = viewContexts.get(container);
+    const account = typeof currentUser === "string" ? currentUser : currentUser?.account;
+    let submission = context.commentSubmission;
+    if (!submission || submission.input !== commentInput || submission.button !== sendBtn || submission.account !== account) {
+        submission = context.commentSubmission = { input: commentInput, button: sendBtn, account, phase: "idle", bound: false };
+    }
+    const submissionCurrent = () => isCurrent(container) && context.commentSubmission === submission
+        && commentInput.isConnected && sendBtn.isConnected;
     const generation = context.commentGeneration = (context.commentGeneration || 0) + 1;
     const current = () => isCurrent(container) && context.commentGeneration === generation && commentsList.isConnected;
 
@@ -563,7 +561,7 @@ async function loadComments(container, postId, currentUser) {
 
         if (comments.length === 0) {
             commentsList.innerHTML = `
-                <div style="text-align: center; padding: 30px; color: #666; font-size: 13px;">
+                <div class="post-detail__comments-empty">
                     ${t('post.no_comments')}
                 </div>
             `;
@@ -577,13 +575,13 @@ async function loadComments(container, postId, currentUser) {
                 const avatarHtml = _generateAvatarHtml(avatar, name, 24, 'background: var(--comfy-input-bg);');
 
                 return `
-                    <div id="comment-${idx}" data-account="${escapeHtml(c.author)}" style="background: #1a1a1a; padding: 12px; border-radius: 8px;">
-                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                    <div id="comment-${idx}" data-account="${escapeHtml(c.author)}" class="post-detail__comment">
+                        <div class="post-detail__comment-author">
                             <div class="swr-avatar-container">${avatarHtml}</div>
-                            <span class="swr-name" style="font-size: 13px; color: #fff; font-weight: 500;">${escapeHtml(name)}</span>
-                            <span style="font-size: 11px; color: #888; margin-left: auto;">${formatTime(c.created_at)}</span>
+                            <span class="post-detail__comment-name swr-name">${escapeHtml(name)}</span>
+                            <span class="post-detail__comment-time">${formatTime(c.created_at)}</span>
                         </div>
-                        <div style="font-size: 13px; color: #ddd; line-height: 1.5; padding-left: 32px;">
+                        <div class="post-detail__comment-content">
                             ${escapeHtml(c.content)}
                         </div>
                     </div>
@@ -607,45 +605,71 @@ async function loadComments(container, postId, currentUser) {
     } catch (err) {
         if (!current()) return;
         commentsList.innerHTML = `
-            <div style="text-align: center; padding: 20px; color: #F44336; font-size: 12px;">
+            <div class="post-detail__comments-error" role="alert">
                 ${t('post.comment_load_failed')}
             </div>
         `;
     }
 
-    // 发送评论
+    if (submission.bound || !submissionCurrent()) return;
+    submission.bound = true;
+    sendBtn.disabled = false;
+    commentInput.readOnly = false;
+    sendBtn.removeAttribute("aria-busy");
+    commentInput.oninput = () => {
+        if (submissionCurrent()) commentInput.removeAttribute("aria-invalid");
+    };
     sendBtn.onclick = async () => {
-        if (!isCurrent(container) || !sendBtn.isConnected || sendBtn.disabled) return;
-        if (!currentUser) {
+        if (!submissionCurrent() || submission.phase !== "idle") return;
+        if (typeof account !== "string" || !account.trim()) {
             showToast(t('auth.login_required'), "warning");
             return;
         }
-        const content = commentInput.value.trim();
+        const originalInput = commentInput.value, content = originalInput.trim();
         if (!content) {
+            commentInput.setAttribute("aria-invalid", "true");
+            commentInput.focus();
             showToast(t('post.comment_required'), "warning");
             return;
         }
+        commentInput.removeAttribute("aria-invalid");
+        submission.phase = "submitting";
+        sendBtn.disabled = true;
+        sendBtn.setAttribute("aria-busy", "true");
+        sendBtn.textContent = t('common.sending');
         try {
-            sendBtn.disabled = true;
-            sendBtn.textContent = t('common.sending');
             const result = await api.addPostComment(postId, content);
-            if (!isCurrent(container) || !sendBtn.isConnected) return;
-            if (result?.status !== "success") throw new Error();
-            if (commentInput.value.trim() === content) commentInput.value = "";
+            if (!submissionCurrent()) return;
+            if (!isConfirmedDedicatedCommentResponse(result, account, content)) throw new Error("Unconfirmed comment");
+            submission.phase = "committed";
+            if (commentInput.value === originalInput) commentInput.value = "";
             showToast(t('post.comment_success'), "success");
-            loadComments(container, postId, currentUser);
+            await loadComments(container, postId, currentUser);
+            if (submissionCurrent()) submission.phase = "idle";
         } catch (err) {
-            if (isCurrent(container) && sendBtn.isConnected) showToast(t('post.comment_failed'), "error");
+            if (!submissionCurrent()) return;
+            if (submission.phase === "committed") {
+                try { showToast(t('social.comment_refresh_required'), "warning"); } catch (_) {}
+                return;
+            }
+            const rejected = isDefiniteCommentRejection(err);
+            submission.phase = rejected ? "idle" : "unconfirmed";
+            showToast(t(rejected ? 'post.comment_failed' : 'social.comment_unconfirmed'), rejected ? "error" : "warning");
         } finally {
-            if (!isCurrent(container) || !sendBtn.isConnected) return;
-            sendBtn.disabled = false;
-            sendBtn.textContent = t('common.send');
+            if (!submissionCurrent()) return;
+            sendBtn.disabled = submission.phase !== "idle";
+            commentInput.readOnly = submission.phase !== "idle";
+            sendBtn.removeAttribute("aria-busy");
+            sendBtn.textContent = t(submission.phase === "unconfirmed" ? 'social.comment_pending' : 'common.send');
         }
     };
 
     // 回车发送
     commentInput.onkeydown = (e) => {
-        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        if (isCurrent(container) && !e.defaultPrevented && e.key === "Enter"
+            && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey
+            && !e.isComposing && e.keyCode !== 229 && !e.repeat
+            && !commentInput.disabled && !commentInput.readOnly) {
             e.preventDefault();
             sendBtn.click();
         }
@@ -665,15 +689,15 @@ function renderTipBoard(tipBoard) {
 function showDeleteConfirmDialog(post, container) {
     if (!isCurrent(container)) return;
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.className = "discussion-modal";
     content.innerHTML = `
-        <div style="text-align: center;">
-            <div style="font-size: 40px; margin-bottom: 15px;">⚠️</div>
-            <div style="font-size: 16px; font-weight: bold; color: #fff; margin-bottom: 10px;">${t('post.delete_confirm_title')}</div>
-            <div style="font-size: 13px; color: #888; margin-bottom: 20px;">${t('post.delete_confirm_desc')}</div>
-            <div style="display: flex; gap: 10px;">
-                <button id="delete-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-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 class="post-detail__modal-center">
+            <div class="post-detail__warning-icon">⚠️</div>
+            <div class="post-detail__modal-title">${t('post.delete_confirm_title')}</div>
+            <div class="post-detail__modal-description">${t('post.delete_confirm_desc')}</div>
+            <div class="post-detail__modal-actions">
+                <button type="button" id="delete-cancel" class="post-detail__modal-cancel">${t('common.cancel')}</button>
+                <button type="button" id="delete-confirm" class="post-detail__modal-danger">${t('common.delete')}</button>
             </div>
         </div>
     `;

前端页面/post/讨论区组件.js

@@ -259,7 +259,7 @@ export function createPostsView(currentUser, keyword = "") {
             // 🚀 本地排序优先：已有数据时直接本地排序渲染
             if (allPostsData.length > 0) {
                 const sorted = sortPostsLocally(allPostsData, currentSort);
-                renderPostsFromCache(sorted);
+                renderPostsFromCache(sorted, true);
                 // 后台静默刷新最新数据
                 silentRefresh();
             } else {
@@ -282,7 +282,7 @@ export function createPostsView(currentUser, keyword = "") {
         listViewGeneration++;
         if (allPostsData.length > 0) {
             const sorted = sortPostsLocally(allPostsData, currentSort);
-            renderPostsFromCache(sorted);
+            renderPostsFromCache(sorted, true);
         }
         silentRefresh();
     };
@@ -445,6 +445,7 @@ export function createPostsView(currentUser, keyword = "") {
     // 从缓存渲染帖子列表
     const renderPostsFromCache = (posts, deferSearchScan = false) => {
         firstPageReady = true;
+        const restoreFocus = cardNavigation.captureListFocus(postsGrid);
         postsGrid.innerHTML = "";
         
         // 🔍 搜索过滤
@@ -460,6 +461,7 @@ export function createPostsView(currentUser, keyword = "") {
                 postsGrid.innerHTML = _renderEmptyState(t);
                 loadMoreWrapper.style.display = "none";
             }
+            restoreFocus();
             return;
         }
         
@@ -487,6 +489,7 @@ export function createPostsView(currentUser, keyword = "") {
         } else {
             loadMoreWrapper.style.display = "none";
         }
+        restoreFocus();
     };
     
     // 后台静默更新
@@ -548,14 +551,25 @@ export function createPostsView(currentUser, keyword = "") {
     const _postsDataChanged = (oldData, newData) => {
         if (!oldData || !newData) return true;
         if (oldData.length !== newData.length) return true;
-        const checkCount = Math.min(10, oldData.length);
+        const checkCount = oldData.length;
         const COMPARE_FIELDS = ['likes', 'favorites', 'views', 'daily_views', 'comments_count'];
+        const contentFields = ["title", "content", "post_type", "created_at", "author", "author_name"];
+        const mediaFields = ["cover_image", "author_avatar"];
+        const normalizedImage = value => typeof value === 'string'
+            ? proxyImages({ cover_image: value }).cover_image : value;
         for (let i = 0; i < checkCount; i++) {
             if ((oldData[i].id) !== (newData[i].id)) return true;
+            for (const field of contentFields) {
+                if (!Object.is(oldData[i][field], newData[i][field])) return true;
+            }
+            for (const field of mediaFields) {
+                if (!Object.is(normalizedImage(oldData[i][field]), normalizedImage(newData[i][field]))) return true;
+            }
             for (const f of COMPARE_FIELDS) {
                 if ((oldData[i][f] || 0) !== (newData[i][f] || 0)) return true;
             }
-            if (Math.abs((oldData[i].rating_avg || 0) - (newData[i].rating_avg || 0)) > 0.01) return true;
+            const ratingText = value => (typeof value === 'number' && Number.isFinite(value) ? value : 0).toFixed(1);
+            if (ratingText(oldData[i].rating_avg) !== ratingText(newData[i].rating_avg)) return true;
         }
         return false;
     };
@@ -601,12 +615,17 @@ export function createPostsView(currentUser, keyword = "") {
 function createPostCard(post, currentUser = currentUserCache, isCurrent = () => true, captureNavigation = () => isCurrent) {
     const card = document.createElement("div");
     card.className = "business-list-card posts-card";
+    if (typeof post.id === 'string' || (typeof post.id === 'number' && Number.isFinite(post.id))) {
+        card._rankingListId = String(post.id);
+    }
     
     // 格式化时间
     const timeStr = formatTime(post.created_at);
     
     // 判断是否为视频帖子
     const isVideo = post.post_type === "video";
+    const initialAuthor = isCurrent() && typeof post.author === 'string' ? getCachedProfile(post.author) : null;
+    const initialAuthorName = [initialAuthor?.name, post.author_name, post.author].find(value => typeof value === 'string' && value) || '';
     
     card.innerHTML = `
         <!-- 封面图 -->
@@ -630,7 +649,7 @@ function createPostCard(post, currentUser = currentUserCache, isCurrent = () =>
             </button>
             
             <!-- 作者信息（SWR 缓存头像） -->
-            <div class="business-list-card__author posts-card__author"></div>
+            <div class="business-list-card__author posts-card__author">${_generateAvatarHtml('', initialAuthorName)}<span class="swr-name posts-card__name">${escapeHtml(initialAuthorName)}</span></div>
             
             <!-- 互动数据 -->
             <div class="posts-card__stats">
@@ -650,9 +669,9 @@ function createPostCard(post, currentUser = currentUserCache, isCurrent = () =>
         if (!authorContainer) return;
         
         const account = post.author;
-        const cached = getCachedProfile(account);
-        const avatar = cached?.avatar || post.author_avatar || '';
-        const name = cached?.name || post.author_name || account || '';
+        const cached = initialAuthor;
+        const avatar = [cached?.avatar, post.author_avatar].find(value => typeof value === 'string' && value) || '';
+        const name = initialAuthorName;
         const initial = (name || 'U')[0].toUpperCase();
         
         // 渲染初始头像
@@ -661,21 +680,23 @@ function createPostCard(post, currentUser = currentUserCache, isCurrent = () =>
         authorContainer.innerHTML = `${avatarHtml}<span class="swr-name posts-card__name">${escapeHtml(name)}</span>`;
         
         // 后台静默校对
-        getProfileWithSWR(account, api.getUserProfile, (profile) => {
+        const updateAuthor = (profile) => {
             if (!isCurrent() || !card.isConnected) return;
             const avatarEl = authorContainer.querySelector('.swr-avatar');
             const nameEl = authorContainer.querySelector('.swr-name');
-            if (avatarEl && profile.avatar) {
+            if (avatarEl && typeof profile.avatar === 'string' && profile.avatar) {
                 if (avatarEl.tagName === 'IMG') {
-                    avatarEl.src = profile.avatar;
+                    if (avatarEl.getAttribute('src') !== profile.avatar) avatarEl.src = profile.avatar;
                 } else {
-                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, profile.name || name);
+                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, typeof profile.name === 'string' && profile.name ? profile.name : name);
                 }
             }
-            if (nameEl && profile.name) {
+            if (nameEl && typeof profile.name === 'string' && profile.name && nameEl.textContent !== profile.name) {
                 nameEl.textContent = profile.name;
             }
-        });
+        };
+        const latestCached = getProfileWithSWR(account, api.getUserProfile, updateAuthor);
+        if (latestCached) updateAuthor(latestCached);
     }, 0);
     
     const cover = card.querySelector('img');

前端页面/profile/个人中心_UI模板.js

@@ -12,34 +12,9 @@ import { getBannerCacheKey, PLACEHOLDERS } from "../core/全局配置.js";
 import { t } from "../components/用户体验增强.js";
 import { escapeHtml } from "../components/互动工具函数.js";  // 🧹 P2归一：局部副本已移除
 
-// 一次性注入组件样式（CSS类替代内联hover事件+减少重复样式）
-if (!document.getElementById('profile-template-styles')) {
-    const style = document.createElement('style');
-    style.id = 'profile-template-styles';
-    style.textContent = `
-        .profile-nav-btn{background:rgba(51,51,51,0.8);border:1px solid rgba(85,85,85,0.8);color:#fff;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:bold;display:flex;align-items:center;gap:6px;box-shadow:0 2px 4px rgba(0,0,0,0.3);transition:0.2s}
-        .profile-nav-btn:hover{background:#4CAF50;border-color:#4CAF50}
-        .profile-header-btn{padding:6px 14px;border-radius:6px;cursor:pointer;font-size:12px;transition:0.2s;backdrop-filter:blur(4px)}
-        .profile-header-btn--settings{background:rgba(51,51,51,0.8);border:1px solid rgba(85,85,85,0.8);color:#ccc}
-        .profile-header-btn--settings:hover{color:#fff;border-color:#888}
-        .profile-header-btn--logout{background:rgba(244,67,54,0.2);border:1px solid #F44336;color:#F44336}
-        .profile-header-btn--logout:hover{background:#F44336;color:#fff}
-        .profile-action-btn{border-radius:4px;cursor:pointer;font-weight:bold}
-        .profile-action-btn--primary{background:#FF9800;border:none;color:white;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:0.2s}
-        .profile-action-btn--primary:hover{opacity:0.8}
-        .profile-action-btn--withdraw{background:rgba(76,175,80,0.2);border:1px solid #4CAF50;color:#4CAF50;transition:0.2s}
-        .profile-action-btn--withdraw:hover{background:rgba(76,175,80,0.3)}
-        .profile-action-btn--send{background:#2196F3;border:none;color:white;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
-        .profile-action-btn--follow{background:#4CAF50;border:none;color:white;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
-        .profile-action-btn--me{padding:8px 12px;font-size:13px}
-        .profile-action-btn--other{padding:6px 12px;font-size:12px;width:100%}
-    `;
-    document.head.appendChild(style);
-}
-
 /** 生成返回按钮HTML */
-function _backButtonHtml(extraStyle = '') {
-    return `<button id="btn-back-profile" class="profile-nav-btn" style="${extraStyle}">⬅ ${t('common.back')}</button>`;
+function _backButtonHtml(extraClass = '') {
+    return `<button type="button" id="btn-back-profile" class="profile-nav-btn ${extraClass}">⬅ ${t('common.back')}</button>`;
 }
 
 export function buildProfileHTML(userData, isMe, isSettingsView, isFollowing, followingCount, activeTab, tabs) {
@@ -55,78 +30,78 @@ export function buildProfileHTML(userData, isMe, isSettingsView, isFollowing, fo
         }
     }
     
-    // 🔒 XSS防护：他人查看时 bannerUrl 直接来自云端（用户可自行填写），
-    // 写入 CSS url() 前剔除引号与括号，避免突破属性（与创作者卡片、个人设置表单同一写法）
-    const bannerStyle = bannerImageUrl 
-        ? `background-image: url(${String(bannerImageUrl).replace(/['"()\\]/g, '')}); background-size: cover; background-position: center;`
-        : `background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);`;
+    const hasBannerImage = typeof bannerImageUrl === "string" && bannerImageUrl.trim()
+        && !/[\u0000-\u001f\u007f]/.test(bannerImageUrl);
+    const bannerStyle = hasBannerImage
+        ? `background-image: ${escapeHtml(`url(${JSON.stringify(bannerImageUrl)})`)}; background-size: cover; background-position: center;`
+        : ``;
 
     // 设置视图时返回简化的返回按钮（与个人资料页按钮样式一致，但不显示背景图）
     if (isSettingsView && isMe) {
-        return _backButtonHtml('align-self:flex-start;margin-left:15px;margin-top:15px');
+        return _backButtonHtml('profile-nav-btn--settings-return');
     }
 
     const actionButtons = isMe 
-        ? `<div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
-               <button id="btn-wallet" class="profile-action-btn profile-action-btn--primary profile-action-btn--me">💰 ${t('profile.recharge')}</button>
-               <button id="btn-withdraw" class="profile-action-btn profile-action-btn--withdraw profile-action-btn--me">💸 ${t('profile.withdraw')}</button>
+        ? `<div class="profile-wallet-actions">
+               <button type="button" id="btn-wallet" class="profile-action-btn profile-action-btn--primary profile-action-btn--me">💰 ${t('profile.recharge')}</button>
+               <button type="button" id="btn-withdraw" class="profile-action-btn profile-action-btn--withdraw profile-action-btn--me">💸 ${t('profile.withdraw')}</button>
            </div>`
-        : `<button id="btn-tip-user" class="profile-action-btn profile-action-btn--primary profile-action-btn--other" style="margin-bottom: 8px">🎁 ${t('profile.tip_support')}</button>
-           <button id="btn-send-msg" class="profile-action-btn profile-action-btn--send profile-action-btn--other">✉️ ${t('profile.send_message')}</button>
-           <button id="btn-follow-user" class="profile-action-btn profile-action-btn--follow profile-action-btn--other" style="margin-top: 8px">${isFollowing ? `✔️ ${t('profile.followed')}` : `➕ ${t('profile.follow_author')}`}</button>`;
+        : `<button type="button" id="btn-tip-user" class="profile-tip-action profile-action-btn profile-action-btn--primary profile-action-btn--other">🎁 ${t('profile.tip_support')}</button>
+           <button type="button" id="btn-send-msg" class="profile-action-btn profile-action-btn--send profile-action-btn--other">✉️ ${t('profile.send_message')}</button>
+           <button type="button" id="btn-follow-user" class="profile-follow-action profile-action-btn profile-action-btn--follow profile-action-btn--other">${isFollowing ? `✔️ ${t('profile.followed')}` : `➕ ${t('profile.follow_author')}`}</button>`;
 
     // 统计数据区域（现在在背景图内）
     const statsHtml = `
-        <div style="display: flex; gap: 15px; font-size: 12px; color: rgba(255,255,255,0.9); flex-wrap: wrap; margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1);">
+        <div class="profile-stats">
             ${isMe ? `
-                <div style="display:flex; flex-direction: column; gap: 6px; width: 100%;">
-                    <div style="font-size: 14px;">
-                        <span>💰 ${t('profile.balance')}: <strong style="color:#FF9800; font-size: 16px;">${escapeHtml(userData.balance || 0)}</strong></span>
+                <div class="profile-wallet-stats">
+                    <div class="profile-balance">
+                        <span>💰 ${t('profile.balance')}: <strong class="profile-balance-amount">${escapeHtml(userData.balance || 0)}</strong></span>
                     </div>
-                    <div style="font-size: 11px; color: rgba(255,255,255,0.6);">
+                    <div class="profile-earnings">
                         <span>🛍️ ${t('profile.sales')}: ${escapeHtml(userData.earn_balance || 0)}</span>
-                        <span style="margin-left: 12px;">🎁 ${t('profile.tips')}: ${escapeHtml(userData.tip_balance || 0)}</span>
-                        <span style="margin-left: 12px;">📋 ${t('profile.task_earnings')}: ${escapeHtml(userData.task_balance || 0)}</span>
+                        <span class="profile-earning-item">🎁 ${t('profile.tips')}: ${escapeHtml(userData.tip_balance || 0)}</span>
+                        <span class="profile-earning-item">📋 ${t('profile.task_earnings')}: ${escapeHtml(userData.task_balance || 0)}</span>
                     </div>
                 </div>
             ` : ''}
-            <div style="display:flex; gap: 12px;">
-                <span>👍 ${t('profile.received_likes')}: <strong style="color:#fff;">${escapeHtml(userData.receivedLikes || 0)}</strong></span>
-                <span>🔖 ${t('profile.received_favorites')}: <strong style="color:#fff;">${escapeHtml(userData.receivedFavorites || 0)}</strong></span>
-                <span id="btn-followers" style="cursor: pointer;">👥 ${t('profile.followers_count')}: <strong style="color:#fff;">${userData.followers ? userData.followers.length : 0}</strong></span>
-                <span id="btn-following" style="cursor: pointer;">🏃 ${t('profile.following_count')}: <strong style="color:#fff;">${escapeHtml(followingCount)}</strong></span>
+            <div class="profile-counts">
+                <span>👍 ${t('profile.received_likes')}: <strong class="profile-count">${escapeHtml(userData.receivedLikes || 0)}</strong></span>
+                <span>🔖 ${t('profile.received_favorites')}: <strong class="profile-count">${escapeHtml(userData.receivedFavorites || 0)}</strong></span>
+                <button type="button" class="profile-count-link" id="btn-followers">👥 ${t('profile.followers_count')}: <strong class="profile-count">${userData.followers ? userData.followers.length : 0}</strong></button>
+                <button type="button" class="profile-count-link" id="btn-following">🏃 ${t('profile.following_count')}: <strong class="profile-count">${escapeHtml(followingCount)}</strong></button>
             </div>
         </div>
     `;
 
     // 整个头部区域（包括返回按钮、用户信息、统计数据）都在背景图内
     const headerHtml = `
-        <div style="position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 15px;">
-            <div style="${bannerStyle} padding: 15px; min-height: 200px;">
+        <div class="profile-header">
+            <div class="profile-banner" style="${bannerStyle}">
                 <!-- 顶部导航栏 -->
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                    <div style="display: flex; gap: 8px; align-items: center;">
-                        ${_backButtonHtml('backdrop-filter:blur(4px)')}
+                <div class="profile-navigation">
+                    <div class="profile-back-group">
+                        ${_backButtonHtml()}
                     </div>
                     ${isMe ? `
-                    <div style="display: flex; gap: 10px;">
-                        <button id="btn-open-settings" class="profile-header-btn profile-header-btn--settings">⚙️ ${t('profile.settings')}</button>
-                        <button id="btn-logout" class="profile-header-btn profile-header-btn--logout">🚪 ${t('profile.logout')}</button>
+                    <div class="profile-account-actions">
+                        <button type="button" id="btn-open-settings" class="profile-header-btn profile-header-btn--settings">⚙️ ${t('profile.settings')}</button>
+                        <button type="button" id="btn-logout" class="profile-header-btn profile-header-btn--logout">🚪 ${t('profile.logout')}</button>
                     </div>` : ''}
                 </div>
                 
                 <!-- 用户信息区域 -->
-                <div style="display: flex; align-items: flex-start; gap: 15px; position: relative;">
-                    <img src="${escapeHtml(userData.avatarDataUrl || userData.avatar || PLACEHOLDERS.AVATAR)}" style="width: 80px; height: 80px; border-radius: 50%; border: 3px solid #4CAF50; object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.4);">
-                    <div style="flex: 1; padding-right: 150px;">
-                        <div style="font-size: 20px; font-weight: bold; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.6);">
+                <div class="profile-identity">
+                    <img alt="" class="profile-avatar" src="${escapeHtml(userData.avatarDataUrl || userData.avatar || PLACEHOLDERS.AVATAR)}">
+                    <div class="profile-bio">
+                        <div class="profile-name">
                             ${escapeHtml(userData.name)}
-                            <span style="font-size: 12px; background: rgba(68,68,68,0.8); padding: 2px 6px; border-radius: 4px; font-weight: normal; backdrop-filter: blur(4px);">${userData.gender === 'male' ? '♂️' : (userData.gender === 'female' ? '♀️' : '🔒')} ${userData.age !== undefined && userData.age !== null ? escapeHtml(userData.age) : t('profile.unknown_age')}${t('profile.age_years')}</span>
+                            <span class="profile-age">${userData.gender === 'male' ? '♂️' : (userData.gender === 'female' ? '♀️' : '🔒')} ${userData.age !== undefined && userData.age !== null ? escapeHtml(userData.age) : t('profile.unknown_age')}${t('profile.age_years')}</span>
                         </div>
-                        <div style="font-size: 12px; color: rgba(255,255,255,0.85); margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.6);">📍 ${escapeHtml(userData.country) || t('profile.location_secret')} - ${escapeHtml(userData.region || '')}</div>
-                        <div style="font-size: 13px; color: rgba(255,255,255,0.95); line-height: 1.4; word-break: break-all; text-shadow: 0 1px 3px rgba(0,0,0,0.6);">${escapeHtml(userData.intro) || t('profile.no_intro')}</div>
+                        <div class="profile-location">📍 ${escapeHtml(userData.country) || t('profile.location_secret')} - ${escapeHtml(userData.region || '')}</div>
+                        <div class="profile-intro">${escapeHtml(userData.intro) || t('profile.no_intro')}</div>
                     </div>
-                    <div style="position: absolute; top: 0; right: 0; width: 135px; display: flex; flex-direction: column; gap: 8px;">${actionButtons}</div>
+                    <div class="profile-actions">${actionButtons}</div>
                 </div>
                 
                 <!-- 统计数据区域 -->
@@ -135,12 +110,12 @@ export function buildProfileHTML(userData, isMe, isSettingsView, isFollowing, fo
         </div>
     `;
 
-    let tabsHtml = `<div style="display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #444; padding-bottom: 5px;">`;
+    let tabsHtml = `<div class="profile-tabs">`;
     tabs.forEach(tab => {
         const isActive = activeTab === tab.id;
-        tabsHtml += `<button class="profile-tab-btn" data-id="${tab.id}" style="background: transparent; border: none; cursor: pointer; padding: 5px 10px; color: ${isActive ? '#4CAF50' : '#888'}; font-weight: ${isActive ? 'bold' : 'normal'}; border-bottom: ${isActive ? '2px solid #4CAF50' : 'none'};">${tab.label}</button>`;
+        tabsHtml += `<button type="button" class="profile-tab-btn" data-id="${tab.id}" aria-pressed="${isActive}">${tab.label}</button>`;
     });
-    tabsHtml += `</div><div id="profile-list-container" style="flex: 1; overflow-y: auto; padding-right: 5px;"></div>`;
+    tabsHtml += `</div><div class="profile-list" id="profile-list-container"></div>`;
 
     return headerHtml + tabsHtml;
 }

前端页面/profile/个人列表组件.js

@@ -1,5 +1,6 @@
 // 前端页面/profile/个人列表组件.js
 import { api } from "../core/网络请求API.js";
+import { getPromptPriceState } from "../prompt/价格校验.js";
 import { createItemCard } from "../market/列表卡片组件.js";
 import { getAcquiredItems } from "../market/资源安装引擎.js";
 import { showToast } from "../components/UI交互提示组件.js";
@@ -243,14 +244,12 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
             };
             
             const listDiv = document.createElement("div");
-            listDiv.style.display = "flex";
-            listDiv.style.flexDirection = "column";
-            listDiv.style.gap = "10px";
+            listDiv.className = 'profile-content-list';
             
             // 渲染我发布的任务
             if (publishedTasks.length > 0) {
                 const sectionTitle = document.createElement("div");
-                sectionTitle.style.cssText = "font-size: 13px; font-weight: bold; color: #FF9800; margin-bottom: 5px; padding: 5px 0;";
+                sectionTitle.className = 'profile-list-section-title';
                 sectionTitle.textContent = `📤 ${t('profile.published_tasks')} (${publishedTasks.length})`;
                 listDiv.appendChild(sectionTitle);
                 
@@ -263,7 +262,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
             // 渲染我接的任务
             if (assignedTasks.length > 0) {
                 const sectionTitle = document.createElement("div");
-                sectionTitle.style.cssText = "font-size: 13px; font-weight: bold; color: #2196F3; margin-bottom: 5px; padding: 5px 0; margin-top: 15px;";
+                sectionTitle.className = 'profile-list-section-title';
                 sectionTitle.textContent = `📥 ${t('profile.assigned_tasks')} (${assignedTasks.length})`;
                 listDiv.appendChild(sectionTitle);
                 
@@ -304,7 +303,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
             const salesStats = salesStatsRes.data || {};
             
             const containerDiv = document.createElement("div");
-            containerDiv.style.cssText = "display: flex; flex-direction: column; gap: 15px;";
+            containerDiv.className = 'profile-transactions';
             
             // 💰 销售统计卡片（放在最上方，与打赏统计样式一致）
             // 🔧 下方销售/打赏两处的 profile.transactions_unit 不再加 || '笔' 兜底：
@@ -342,7 +341,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
             
             // 📝 交易明细列表
             const txListDiv = document.createElement("div");
-            txListDiv.style.cssText = "display: flex; flex-direction: column; gap: 8px;";
+            txListDiv.className = 'profile-transaction-list';
             
             if (transactions.length === 0) {
                 txListDiv.innerHTML = _renderEmptyState('💰', t('profile.no_transactions'));
@@ -384,9 +383,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
             }
 
             const listDiv = document.createElement("div");
-            listDiv.style.display = "flex";
-            listDiv.style.flexDirection = "column";
-            listDiv.style.gap = "10px";
+            listDiv.className = 'profile-content-list';
 
             posts.forEach(post => {
                 const postDiv = createPostItem(post, currentUser);
@@ -419,9 +416,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
             }
 
             const listDiv = document.createElement("div");
-            listDiv.style.display = "flex";
-            listDiv.style.flexDirection = "column";
-            listDiv.style.gap = "10px";
+            listDiv.className = 'profile-content-list';
 
             prompts.forEach(prompt => {
                 const promptDiv = createPromptItem(prompt, currentUser);
@@ -453,11 +448,11 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
                 return;
             }
             const listDiv = document.createElement("div");
-            listDiv.style.cssText = "display:flex;flex-direction:column;gap:10px;";
+            listDiv.className = 'profile-content-list';
 
             if (items && items.length > 0) {
                 const sectionTitle = document.createElement("div");
-                sectionTitle.style.cssText = "font-size: 13px; font-weight: bold; color: #FF9800; margin-bottom: 5px; padding: 5px 0;";
+                sectionTitle.className = 'profile-list-section-title';
                 sectionTitle.textContent = `📦 ${t('profile.collected_items')} (${items.length})`;
                 listDiv.appendChild(sectionTitle);
                 items.forEach(item => { listDiv.appendChild(createItemCard(item, currentUser)); });
@@ -465,7 +460,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
 
             if (posts && posts.length > 0) {
                 const sectionTitle = document.createElement("div");
-                sectionTitle.style.cssText = "font-size: 13px; font-weight: bold; color: #9C27B0; margin-bottom: 5px; padding: 5px 0;" + (items && items.length > 0 ? " margin-top: 15px;" : "");
+                sectionTitle.className = 'profile-list-section-title';
                 sectionTitle.textContent = `💬 ${t('profile.collected_posts')} (${posts.length})`;
                 listDiv.appendChild(sectionTitle);
                 posts.forEach(post => { listDiv.appendChild(createPostItem(post, currentUser)); });
@@ -473,7 +468,7 @@ export async function renderProfileListContent(tabId, domElement, userData, curr
 
             if (prompts && prompts.length > 0) {
                 const sectionTitle = document.createElement("div");
-                sectionTitle.style.cssText = "font-size: 13px; font-weight: bold; color: #00BCD4; margin-bottom: 5px; padding: 5px 0;" + ((items && items.length > 0) || (posts && posts.length > 0) ? " margin-top: 15px;" : "");
+                sectionTitle.className = 'profile-list-section-title';
                 sectionTitle.textContent = `🧩 ${t('profile.collected_prompts')} (${prompts.length})`;
                 listDiv.appendChild(sectionTitle);
                 prompts.forEach(prompt => { listDiv.appendChild(createPromptItem(prompt, currentUser)); });
@@ -582,15 +577,16 @@ function _renderEmptyState(icon, title, subtitle = '') {
  */
 function _createStatsCard(title, stats, extraStyle = '') {
     const card = document.createElement('div');
-    card.style.cssText = `background: linear-gradient(135deg, var(--comfy-input-bg), #1a1a1a); border-radius: 12px; padding: 15px; border: 1px solid #444;${extraStyle}`;
+    card.className = extraStyle === ' margin-bottom: 15px;' ? 'profile-stats-card profile-stats-card--spaced' : 'profile-stats-card';
+    const tones = { '#4CAF50': 'income', '#F44336': 'expense', '#2196F3': 'net' };
     const colsHtml = stats.map(s => `
-        <div style="text-align: center; padding: 10px; background: rgba(${s.bgRgb || '76,175,80'},0.1); border-radius: 8px;">
-            <div style="font-size: 20px; font-weight: bold; color: ${s.color};">${s.value}</div>
-            <div style="font-size: 11px; color: #888;">${s.label}</div>
+        <div class="profile-stats-card__cell profile-stats-card__cell--${Object.hasOwn(tones, s.color) ? tones[s.color] : 'net'}">
+            <div class="profile-stats-card__value">${escapeHtml(String(s.value))}</div>
+            <div class="profile-stats-card__label">${escapeHtml(String(s.label))}</div>
         </div>`).join('');
     card.innerHTML = `
-        <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 12px;">${title}</div>
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">${colsHtml}</div>
+        <div class="profile-stats-card__title">${escapeHtml(String(title))}</div>
+        <div class="profile-stats-card__grid">${colsHtml}</div>
     `;
     return card;
 }
@@ -599,35 +595,26 @@ function _createStatsCard(title, stats, extraStyle = '') {
  * 📝 创建任务卡片项
  */
 function createTaskItem(task, statusColors, statusLabels, currentUser) {
-    const taskDiv = document.createElement("div");
-    Object.assign(taskDiv.style, {
-        padding: "12px",
-        background: "var(--comfy-input-bg)",
-        borderRadius: "8px",
-        border: "1px solid #444",
-        cursor: "pointer",
-        transition: "0.2s"
-    });
+    const taskDiv = document.createElement("button");
+    taskDiv.type = 'button';
+    taskDiv.className = 'profile-task-card';
     
-    const statusColor = statusColors[task.status] || "#666";
+    const statusTones = { '#4CAF50': 'open', '#2196F3': 'active', '#FF9800': 'pending', '#F44336': 'disputed' };
+    const statusTone = Object.hasOwn(statusTones, statusColors[task.status]) ? statusTones[statusColors[task.status]] : 'neutral';
     const statusLabel = statusLabels[task.status] || t('task.status_unknown');
     
     taskDiv.innerHTML = `
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-            <span style="background: ${statusColor}; color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px;">${statusLabel}</span>
-            <span style="color: #FF9800; font-weight: bold;">💰 ${task.total_price} ${t('task.points')}</span>
+        <div class="profile-task-card__summary">
+            <span class="profile-task-card__status profile-task-card__status--${statusTone}">${escapeHtml(String(statusLabel))}</span>
+            <span class="profile-task-card__price">💰 ${escapeHtml(String(task.total_price))} ${t('task.points')}</span>
         </div>
-        <div style="font-weight: bold; color: #eee; margin-bottom: 6px; font-size: 14px;">${escapeHtml(task.title)}</div>
-        <div style="font-size: 11px; color: #888; display: flex; gap: 15px;">
-            <span>✈️ ${formatDeadline(task.deadline)}</span>
-            ${task.status === "open" ? `<span>👥 ${(task.applicants || []).length} ${t('task.applicants')}</span>` : ""}
+        <div class="profile-list-card__title">${escapeHtml(task.title)}</div>
+        <div class="profile-list-card__meta">
+            <span>✈️ ${escapeHtml(String(formatDeadline(task.deadline)))}</span>
+            ${task.status === "open" ? `<span>👥 ${escapeHtml(String((task.applicants || []).length))} ${t('task.applicants')}</span>` : ""}
         </div>
     `;
     
-    // 悬停效果
-    taskDiv.onmouseover = () => { taskDiv.style.borderColor = "#666"; taskDiv.style.transform = "translateX(3px)"; };
-    taskDiv.onmouseout = () => { taskDiv.style.borderColor = "#444"; taskDiv.style.transform = "translateX(0)"; };
-    
     // 点击进入详情
     taskDiv.onclick = () => {
         import("../task/任务详情组件.js").then(module => {
@@ -661,15 +648,9 @@ function formatDeadline(deadline) {
  * 💬 创建帖子卡片项
  */
 function createPostItem(post, currentUser) {
-    const postDiv = document.createElement("div");
-    Object.assign(postDiv.style, {
-        padding: "12px",
-        background: "var(--comfy-input-bg)",
-        borderRadius: "8px",
-        border: "1px solid #444",
-        cursor: "pointer",
-        transition: "all 0.2s"
-    });
+    const postDiv = document.createElement("button");
+    postDiv.type = 'button';
+    postDiv.className = 'profile-entry-card';
     
     // 截取内容摘要
     const contentPreview = (post.content || "").slice(0, 80) + ((post.content || "").length > 80 ? "..." : "");
@@ -688,39 +669,31 @@ function createPostItem(post, currentUser) {
     }
     
     postDiv.innerHTML = `
-        <div style="display: flex; align-items: flex-start; gap: 10px;">
+        <div class="profile-entry-card__row">
             ${coverImageUrl ? `
-                <div style="position: relative; flex-shrink: 0;">
-                    <img src="${escapeHtml(coverImageUrl)}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 6px; display: block;">
+                <div class="profile-entry-card__media">
+                    <img src="${escapeHtml(coverImageUrl)}" class="profile-entry-card__image">
                     ${isVideo ? `
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-                                width: 28px; height: 28px; background: rgba(0,0,0,0.6); border-radius: 50%;
-                                display: flex; align-items: center; justify-content: center; pointer-events: none;">
-                        <div style="width: 0; height: 0; border-left: 10px solid rgba(255,255,255,0.9);
-                                    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
-                                    margin-left: 2px;"></div>
+                    <div class="profile-entry-card__play">
+                        <div class="profile-entry-card__play-triangle"></div>
                     </div>
                     ` : ''}
                 </div>
             ` : ""}
-            <div style="flex: 1; min-width: 0;">
-                <div style="font-size: 14px; color: #fff; margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
+            <div class="profile-list-card__body">
+                <div class="profile-list-card__title">
                     ${escapeHtml(contentPreview)}
                 </div>
-                <div style="display: flex; align-items: center; gap: 12px; font-size: 11px; color: #888;">
-                    <span>❤️ ${post.like_count || 0}</span>
-                    <span>💬 ${post.comment_count || 0}</span>
+                <div class="profile-list-card__meta">
+                    <span>❤️ ${escapeHtml(String(post.like_count || 0))}</span>
+                    <span>💬 ${escapeHtml(String(post.comment_count || 0))}</span>
                     ${isVideo ? `<span>🎬 ${t('post.video_tag')}</span>` : ((post.images || []).length > 1 ? `<span>🖼️ ${(post.images || []).length}${t('post.images_unit')}</span>` : "")}
-                    <span style="margin-left: auto;">${timeStr}</span>
+                    <span class="profile-list-card__time">${escapeHtml(String(timeStr))}</span>
                 </div>
             </div>
         </div>
     `;
     
-    // 悬停效果（使用 mouseenter/mouseleave 避免子元素边界闪烁）
-    postDiv.onmouseenter = () => { postDiv.style.borderColor = "#9C27B0"; postDiv.style.transform = "translateX(2px)"; };
-    postDiv.onmouseleave = () => { postDiv.style.borderColor = "#444"; postDiv.style.transform = "translateX(0)"; };
-    
     // 点击进入详情
     postDiv.onclick = () => {
         import("../post/帖子详情组件.js").then(module => {
@@ -739,15 +712,9 @@ function createPostItem(post, currentUser) {
  * 🧩 创建提示词卡片项（复刻 createPostItem 模式）
  */
 function createPromptItem(prompt, currentUser) {
-    const promptDiv = document.createElement("div");
-    Object.assign(promptDiv.style, {
-        padding: "12px",
-        background: "var(--comfy-input-bg)",
-        borderRadius: "8px",
-        border: "1px solid #444",
-        cursor: "pointer",
-        transition: "all 0.2s"
-    });
+    const promptDiv = document.createElement("button");
+    promptDiv.type = 'button';
+    promptDiv.className = 'profile-entry-card';
 
     // 时间格式化（复用帖子时间格式函数）
     const timeStr = formatPostTime(prompt.created_at);
@@ -757,46 +724,39 @@ function createPromptItem(prompt, currentUser) {
     const coverImageUrl = prompt.cover_image || null;
 
     // 价格徽标
-    const priceBadge = (prompt.price > 0)
-        ? `<span style="background: rgba(255,193,7,0.15); color: #FFC107; padding: 1px 6px; border-radius: 4px; font-size: 10px;">💎 ${prompt.price}</span>`
-        : `<span style="background: rgba(76,175,80,0.15); color: #4CAF50; padding: 1px 6px; border-radius: 4px; font-size: 10px;">${t('prompt.free')}</span>`;
+    const priceState = getPromptPriceState(prompt.price);
+    const priceBadge = priceState !== 'free'
+        ? `<span class="profile-list-badge profile-list-badge--price">💎 ${escapeHtml(priceState === 'paid' ? String(prompt.price) : t('common.unknown'))}</span>`
+        : `<span class="profile-list-badge profile-list-badge--free">${t('prompt.free')}</span>`;
 
     promptDiv.innerHTML = `
-        <div style="display: flex; align-items: flex-start; gap: 10px;">
+        <div class="profile-entry-card__row">
             ${coverImageUrl ? `
-                <div style="position: relative; flex-shrink: 0;">
-                    <img src="${escapeHtml(coverImageUrl)}" style="width: 60px; height: 60px; object-fit: cover; border-radius: 6px; display: block;">
+                <div class="profile-entry-card__media">
+                    <img src="${escapeHtml(coverImageUrl)}" class="profile-entry-card__image">
                     ${isVideo ? `
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-                                width: 28px; height: 28px; background: rgba(0,0,0,0.6); border-radius: 50%;
-                                display: flex; align-items: center; justify-content: center; pointer-events: none;">
-                        <div style="width: 0; height: 0; border-left: 10px solid rgba(255,255,255,0.9);
-                                    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
-                                    margin-left: 2px;"></div>
+                    <div class="profile-entry-card__play">
+                        <div class="profile-entry-card__play-triangle"></div>
                     </div>
                     ` : ''}
                 </div>
             ` : ""}
-            <div style="flex: 1; min-width: 0;">
-                <div style="font-size: 14px; color: #fff; margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
+            <div class="profile-list-card__body">
+                <div class="profile-list-card__title">
                     ${escapeHtml(prompt.title || '')}
                 </div>
-                <div style="display: flex; align-items: center; gap: 8px; font-size: 11px; color: #888; flex-wrap: wrap;">
+                <div class="profile-list-card__meta">
                     ${priceBadge}
-                    ${prompt.category ? `<span style="background: rgba(0,188,212,0.12); color: #00BCD4; padding: 1px 6px; border-radius: 4px; font-size: 10px;">${escapeHtml(tIfExists('promptcat.' + prompt.category, prompt.category))}</span>` : ''}
-                    <span>❤️ ${prompt.likes || 0}</span>
-                    <span>⭐ ${prompt.favorites || 0}</span>
-                    <span>👁️ ${prompt.views || 0}</span>
-                    <span style="margin-left: auto;">${timeStr}</span>
+                    ${prompt.category ? `<span class="profile-list-badge">${escapeHtml(tIfExists('promptcat.' + prompt.category, prompt.category))}</span>` : ''}
+                    <span>❤️ ${escapeHtml(String(prompt.likes || 0))}</span>
+                    <span>⭐ ${escapeHtml(String(prompt.favorites || 0))}</span>
+                    <span>👁️ ${escapeHtml(String(prompt.views || 0))}</span>
+                    <span class="profile-list-card__time">${escapeHtml(String(timeStr))}</span>
                 </div>
             </div>
         </div>
     `;
 
-    // 悬停效果（青色主题，与提示词 Tab 配色一致）
-    promptDiv.onmouseenter = () => { promptDiv.style.borderColor = "#00BCD4"; promptDiv.style.transform = "translateX(2px)"; };
-    promptDiv.onmouseleave = () => { promptDiv.style.borderColor = "#444"; promptDiv.style.transform = "translateX(0)"; };
-
     // 点击进入提示词详情
     promptDiv.onclick = () => {
         import("../prompt/提示词详情组件.js").then(module => {
@@ -833,10 +793,9 @@ function formatPostTime(timestamp) {
  */
 function createTransactionCard(tx) {
     const txDiv = document.createElement("div");
-    txDiv.style.cssText = "padding: 12px; background: var(--comfy-input-bg); border-radius: 8px; border: 1px solid #444; display: flex; justify-content: space-between; align-items: flex-start;";
+    txDiv.className = 'profile-transaction-card';
     
     const isPositive = tx.amount > 0;
-    const amountColor = isPositive ? '#4CAF50' : '#F44336';
     const timeStr = tx.created_at ? new Date(tx.created_at).toLocaleString(getLanguage(), { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
     
     // 获取交易类型配置
@@ -945,31 +904,31 @@ function createTransactionCard(tx) {
     
     // 资源标题（如果有）
     const itemTitle = tx.item_title && tx.tx_type !== 'TIP_IN' && tx.tx_type !== 'TIP_OUT' 
-        ? `<span style="color: #888; margin-left: 6px;">- ${escapeHtml(tx.item_title)}</span>` 
+        ? `<span class="profile-transaction-card__item">- ${escapeHtml(tx.item_title)}</span>` 
         : '';
     
     // 实到金额（仅提现类型）
     const netAmountHtml = (tx.tx_type === 'WITHDRAW' && tx.net_amount !== null && tx.net_amount !== undefined)
-        ? `<div style="font-size: 11px; color: #888; text-align: right;">${t('tx.net_amount')}: ${tx.net_amount}</div>`
+        ? `<div class="profile-transaction-card__net">${t('tx.net_amount')}: ${escapeHtml(String(tx.net_amount))}</div>`
         : '';
     
     if (hasDetailedInfo) {
         // 详细展示模式
         txDiv.innerHTML = `
-            <div style="display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0;">
-                <span style="font-size: 20px; flex-shrink: 0;">${typeConfig.icon}</span>
-                <div style="flex: 1; min-width: 0;">
-                    <div style="display: flex; align-items: center; flex-wrap: wrap;">
-                        <span style="font-weight: bold; color: #eee; font-size: 13px;">${typeConfig.title}</span>
+            <div class="profile-transaction-card__summary">
+                <span class="profile-transaction-card__icon">${typeConfig.icon}</span>
+                <div class="profile-list-card__body">
+                    <div class="profile-transaction-card__heading">
+                        <span class="profile-transaction-card__title">${escapeHtml(String(typeConfig.title))}</span>
                         ${itemTitle}
                     </div>
-                    ${description ? `<div style="font-size: 11px; color: #aaa; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(description)}</div>` : ''}
-                    ${detailText ? `<div style="font-size: 11px; color: #888; margin-top: 3px;">${escapeHtml(detailText)}</div>` : ''}
+                    ${description ? `<div class="profile-transaction-card__description">${escapeHtml(description)}</div>` : ''}
+                    ${detailText ? `<div class="profile-transaction-card__detail">${escapeHtml(detailText)}</div>` : ''}
                 </div>
             </div>
-            <div style="text-align: right; flex-shrink: 0; margin-left: 10px;">
-                <div style="font-weight: bold; font-size: 15px; color: ${amountColor};">
-                    ${isPositive ? '+' : ''}${tx.amount}
+            <div class="profile-transaction-card__money">
+                <div class="profile-transaction-card__amount ${isPositive ? 'profile-transaction-card__amount--income' : 'profile-transaction-card__amount--expense'}">
+                    ${isPositive ? '+' : ''}${escapeHtml(String(tx.amount))}
                 </div>
                 ${netAmountHtml}
             </div>
@@ -977,15 +936,15 @@ function createTransactionCard(tx) {
     } else {
         // 简洁展示模式（向后兼容旧数据）
         txDiv.innerHTML = `
-            <div style="display: flex; align-items: center; gap: 10px;">
-                <span style="font-size: 20px;">${typeConfig.icon}</span>
+            <div class="profile-transaction-card__summary">
+                <span class="profile-transaction-card__icon">${typeConfig.icon}</span>
                 <div>
-                    <div style="font-weight: bold; color: #eee; font-size: 13px;">${typeConfig.title}</div>
-                    <div style="font-size: 11px; color: #888;">${timeStr}${tx.related_account ? ' · ' + escapeHtml(tx.related_account.substring(0, 8)) + '...' : ''}</div>
+                    <div class="profile-transaction-card__title">${escapeHtml(String(typeConfig.title))}</div>
+                    <div class="profile-transaction-card__detail">${escapeHtml(String(timeStr))}${tx.related_account ? ' · ' + escapeHtml(tx.related_account.substring(0, 8)) + '...' : ''}</div>
                 </div>
             </div>
-            <div style="font-weight: bold; font-size: 15px; color: ${amountColor};">
-                ${isPositive ? '+' : ''}${tx.amount}
+            <div class="profile-transaction-card__amount ${isPositive ? 'profile-transaction-card__amount--income' : 'profile-transaction-card__amount--expense'}">
+                ${isPositive ? '+' : ''}${escapeHtml(String(tx.amount))}
             </div>
         `;
     }

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

@@ -16,6 +16,11 @@ function _safeLocalStorageRemove(key) {
     try { window.localStorage.removeItem(key); return true; } catch { return false; }
 }
 
+function _cssBackgroundImage(value) {
+    if (typeof value !== "string" || !value.trim() || /[\u0000-\u001f\u007f]/.test(value)) return "none";
+    return `url(${JSON.stringify(value)})`;
+}
+
 // 计算年龄工具函数
 function calculateAge(birthDate) {
     if (!birthDate) return null;
@@ -101,7 +106,7 @@ function _readAndPreviewImage(file, previewElement, cacheKey, current, readers,
                     }
                 }
             }
-            previewElement.style.backgroundImage = `url(${base64})`;
+            previewElement.style.backgroundImage = _cssBackgroundImage(base64);
             previewElement.style.backgroundSize = "cover";
             previewElement.style.backgroundPosition = "center";
             finish(base64);
@@ -147,85 +152,85 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     const countryOptions = sortedCountries.map(c => `<option value="${c}" ${c === userData.country ? 'selected' : ''}>${c}</option>`).join("");
 
     container.innerHTML = `
-        <div style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #444; font-weight: bold; font-size: 16px;">⚙️ ${t('settings_form.title')}</div>
-        <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
-            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 5px; background: var(--comfy-input-bg); padding: 10px; border-radius: 6px; border: 1px dashed #555;">
-                <img id="setting-avatar-preview" src="${escapeHtml(userData.avatarDataUrl || PLACEHOLDERS.AVATAR)}" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #666;">
+        <div class="settings-heading">⚙️ ${t('settings_form.title')}</div>
+        <div class="settings-fields">
+            <div class="settings-avatar-panel">
+                <img alt="" class="settings-avatar" id="setting-avatar-preview" src="${escapeHtml(userData.avatarDataUrl || PLACEHOLDERS.AVATAR)}">
                 <div>
-                    <button id="btn-trigger-avatar" style="padding: 6px 12px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; margin-bottom: 5px;">${t('settings_form.change_avatar')}</button>
-                    <div style="font-size: 11px; color: #888;">${t('settings_form.avatar_hint')}</div>
+                    <button type="button" class="settings-avatar-action" id="btn-trigger-avatar">${t('settings_form.change_avatar')}</button>
+                    <div class="settings-hint">${t('settings_form.avatar_hint')}</div>
                 </div>
-                <input type="file" id="setting-avatar" accept="image/*" style="display: none;">
+                <input class="settings-file-input" type="file" id="setting-avatar" accept="image/*">
             </div>
 
-            <div style="background: var(--comfy-input-bg); padding: 10px; border-radius: 6px; border: 1px dashed #555;">
-                <div style="font-size: 12px; color: #aaa; margin-bottom: 8px;">🇺️ ${t('settings_form.banner_title')}</div>
-                <div id="setting-banner-preview" style="width: 100%; height: 80px; border-radius: 4px; background: ${userData.bannerUrl ? `url(${String(userData.bannerUrl).replace(/['"()\\]/g, '')})` : '#1a1a1a'}; background-size: cover; background-position: center; margin-bottom: 8px; border: 1px solid #444;"></div>
-                <div style="display: flex; gap: 8px;">
-                    <button id="btn-trigger-banner" style="flex: 1; padding: 6px 12px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; cursor: pointer; font-size: 12px;">📷 ${t('settings_form.banner_upload')}</button>
-                    <button id="btn-clear-banner" style="padding: 6px 12px; background: transparent; border: 1px solid #555; color: #888; border-radius: 4px; cursor: pointer; font-size: 12px;">🗑️ ${t('settings_form.banner_clear')}</button>
+            <div class="settings-media-panel">
+                <div class="settings-media-title">🇺️ ${t('settings_form.banner_title')}</div>
+                <div class="settings-banner-preview" id="setting-banner-preview"></div>
+                <div class="settings-media-actions">
+                    <button type="button" class="settings-upload" id="btn-trigger-banner">📷 ${t('settings_form.banner_upload')}</button>
+                    <button type="button" class="settings-clear" id="btn-clear-banner">🗑️ ${t('settings_form.banner_clear')}</button>
                 </div>
-                <div style="font-size: 11px; color: #666; margin-top: 5px;">${t('settings_form.banner_hint')}</div>
-                <input type="file" id="setting-banner" accept="image/*" style="display: none;">
+                <div class="settings-media-hint">${t('settings_form.banner_hint')}</div>
+                <input class="settings-file-input" type="file" id="setting-banner" accept="image/*">
             </div>
 
-            <div style="background: var(--comfy-input-bg); padding: 10px; border-radius: 6px; border: 1px dashed #555;">
-                <div style="font-size: 12px; color: #aaa; margin-bottom: 8px;">🎨 ${t('settings_form.ui_bg_title')}</div>
-                <div id="setting-ui-bg-preview" style="width: 100%; height: 100px; border-radius: 4px; background: #1a1a1a; background-size: cover; background-position: center; margin-bottom: 8px; border: 1px solid #444;"></div>
-                <div style="display: flex; gap: 8px;">
-                    <button id="btn-trigger-ui-bg" style="flex: 1; padding: 6px 12px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; cursor: pointer; font-size: 12px;">📷 ${t('settings_form.banner_upload')}</button>
-                    <button id="btn-clear-ui-bg" style="padding: 6px 12px; background: transparent; border: 1px solid #555; color: #888; border-radius: 4px; cursor: pointer; font-size: 12px;">🗑️ ${t('settings_form.banner_clear')}</button>
+            <div class="settings-media-panel">
+                <div class="settings-media-title">🎨 ${t('settings_form.ui_bg_title')}</div>
+                <div class="settings-background-preview" id="setting-ui-bg-preview"></div>
+                <div class="settings-media-actions">
+                    <button type="button" class="settings-upload" id="btn-trigger-ui-bg">📷 ${t('settings_form.banner_upload')}</button>
+                    <button type="button" class="settings-clear" id="btn-clear-ui-bg">🗑️ ${t('settings_form.banner_clear')}</button>
                 </div>
-                <div style="font-size: 11px; color: #666; margin-top: 5px;">${t('settings_form.ui_bg_hint')}</div>
-                <input type="file" id="setting-ui-bg" accept="image/*" style="display: none;">
+                <div class="settings-media-hint">${t('settings_form.ui_bg_hint')}</div>
+                <input class="settings-file-input" type="file" id="setting-ui-bg" accept="image/*">
             </div>
 
-            <div><label style="display: block; margin-bottom: 5px; font-size: 12px; color: #aaa;">${t('settings_form.display_name')}</label><input type="text" id="setting-name" value="${escapeHtml(userData.name || '')}" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; box-sizing: border-box;"></div>
+            <div><label class="settings-label" for="setting-name">${t('settings_form.display_name')}</label><input class="settings-input" type="text" id="setting-name" value="${escapeHtml(userData.name || '')}"></div>
             
-            <div style="display: flex; gap: 10px;">
-                <div style="flex: 1;"><label style="display: block; margin-bottom: 5px; font-size: 12px; color: #aaa;">${t('settings_form.gender')}</label>
-                    <select id="setting-gender" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px;">
+            <div class="settings-row">
+                <div class="settings-field"><label class="settings-label" for="setting-gender">${t('settings_form.gender')}</label>
+                    <select class="settings-select" id="setting-gender">
                         <option value="male" ${userData.gender === 'male' ? 'selected' : ''}>${t('settings_form.gender_male')}</option>
                         <option value="female" ${userData.gender === 'female' ? 'selected' : ''}>${t('settings_form.gender_female')}</option>
                         <option value="other" ${userData.gender === 'other' ? 'selected' : ''}>${t('settings_form.gender_secret')}</option>
                     </select>
                 </div>
-                <div style="flex: 1;">
-                    <label style="display: block; margin-bottom: 5px; font-size: 12px; color: #aaa;">${t('settings_form.birthday')}</label>
-                    <div style="display: flex; align-items: center; gap: 8px;">
-                        <input type="date" id="setting-birthday" value="${escapeHtml(userData.birthday || '')}" style="flex: 1; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; box-sizing: border-box;">
-                        <span id="setting-age-display" style="color: #888; font-size: 12px; white-space: nowrap;">${userData.age ? userData.age + ' ' + t('profile.age_years') : ''}</span>
+                <div class="settings-field">
+                    <label class="settings-label" for="setting-birthday">${t('settings_form.birthday')}</label>
+                    <div class="settings-birthday-row">
+                        <input class="settings-birthday" type="date" id="setting-birthday" value="${escapeHtml(userData.birthday || '')}">
+                        <span class="settings-age" id="setting-age-display">${userData.age ? userData.age + ' ' + t('profile.age_years') : ''}</span>
                     </div>
                 </div>
             </div>
 
-            <div><label style="display: block; margin-bottom: 5px; font-size: 12px; color: #aaa;">${t('settings_form.country')}</label>
-                <select id="setting-country" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; margin-bottom: 10px;">
+            <div><label class="settings-label" for="setting-country">${t('settings_form.country')}</label>
+                <select class="settings-country" id="setting-country">
                     <option value="">${t('settings_form.select_country')}</option>
                     ${countryOptions}
                 </select>
-                <select id="setting-region" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px;">
+                <select class="settings-select" id="setting-region" aria-label="${escapeHtml(t('auth.region'))}">
                     <option value="${escapeHtml(userData.region || '')}">${escapeHtml(userData.region || t('settings_form.select_country_first'))}</option>
                 </select>
             </div>
 
-            <div><label style="display: block; margin-bottom: 5px; font-size: 12px; color: #aaa;">${t('settings_form.intro')}</label><textarea id="setting-intro" rows="3" placeholder="${t('settings_form.intro_placeholder')}" style="width: 100%; padding: 8px; background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; border-radius: 4px; box-sizing: border-box; resize: vertical;">${escapeHtml(userData.intro || '')}</textarea></div>
+            <div><label class="settings-label" for="setting-intro">${t('settings_form.intro')}</label><textarea class="settings-intro" id="setting-intro" rows="3" placeholder="${t('settings_form.intro_placeholder')}">${escapeHtml(userData.intro || '')}</textarea></div>
             
-            <div style="margin-top: 15px; border-top: 1px solid #444; padding-top: 15px;">
-                <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #4CAF50;">🛡️ ${t('settings_form.privacy_title')}</div>
-                <div style="font-size: 11px; color: #888; margin-bottom: 10px;">${t('settings_form.privacy_hint')}</div>
+            <div class="settings-privacy">
+                <div class="settings-section-heading">🛡️ ${t('settings_form.privacy_title')}</div>
+                <div class="settings-privacy-hint">${t('settings_form.privacy_hint')}</div>
                 
-                <div style="display: flex; flex-direction: column; gap: 8px;">
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer;">
+                <div class="settings-privacy-options">
+                    <label class="settings-check">
                         <input type="checkbox" id="hide-follows" ${getPrivacy('follows') ? 'checked' : ''}> ${t('settings_form.hide_follows')}
                     </label>
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer;">
+                    <label class="settings-check">
                         <input type="checkbox" id="hide-likes" ${getPrivacy('likes') ? 'checked' : ''}> ${t('settings_form.hide_likes')}
                     </label>
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer;">
+                    <label class="settings-check">
                         <input type="checkbox" id="hide-favorites" ${getPrivacy('favorites') ? 'checked' : ''}> ${t('settings_form.hide_favorites')}
                     </label>
-                    <label style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer;">
+                    <label class="settings-check">
                         <input type="checkbox" id="hide-downloads" ${getPrivacy('downloads') ? 'checked' : ''}> ${t('settings_form.hide_downloads')}
                     </label>
                 </div>
@@ -233,36 +238,36 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
             
             ${isAdmin ? `
             <!-- 🔒 管理员设置区域 -->
-            <div id="admin-settings-section" style="margin-top: 15px; border-top: 1px solid #9C27B0; padding-top: 15px; background: linear-gradient(135deg, rgba(156,39,176,0.1), transparent); border-radius: 8px; padding: 15px; margin-top: 15px;">
-                <div style="font-size: 14px; font-weight: bold; margin-bottom: 10px; color: #9C27B0; display: flex; align-items: center; gap: 8px;">
+            <div class="settings-admin" id="admin-settings-section">
+                <div class="settings-admin-heading">
                     <span>🔒</span> ${t('settings_form.admin_title')}
-                    <span style="font-size: 10px; background: #9C27B0; color: white; padding: 2px 6px; border-radius: 10px;">Admin</span>
+                    <span class="settings-admin-badge">Admin</span>
                 </div>
-                <div style="font-size: 11px; color: #888; margin-bottom: 12px;">${t('settings_form.admin_hint')}</div>
+                <div class="settings-admin-hint">${t('settings_form.admin_hint')}</div>
                 
-                <div style="display: flex; flex-direction: column; gap: 10px;">
+                <div class="settings-admin-fields">
                     <!-- 图像审核开关 -->
-                    <div style="background: var(--comfy-input-bg); padding: 12px; border-radius: 6px; border: 1px solid #444;">
-                        <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <div class="settings-moderation">
+                        <div class="settings-moderation-row">
                             <div>
-                                <div style="font-size: 13px; color: #fff; margin-bottom: 4px;">🖼️ ${escapeHtml(t('settings_form.image_moderation'))}</div>
-                                <div id="moderation-hint" style="font-size: 11px; color: #888;">${escapeHtml(t('settings_form.image_moderation_hint'))}</div>
+                                <div class="settings-moderation-title">🖼️ ${escapeHtml(t('settings_form.image_moderation'))}</div>
+                                <div class="settings-hint" id="moderation-hint">${escapeHtml(t('settings_form.image_moderation_hint'))}</div>
                             </div>
-                            <label class="toggle-switch" style="position: relative; display: inline-block; width: 50px; height: 26px;">
-                                <input type="checkbox" id="admin-image-moderation" disabled aria-label="${escapeHtml(t('settings_form.image_moderation'))}" aria-describedby="moderation-hint moderation-status" style="opacity: 0; width: 0; height: 0;">
-                                <span class="toggle-slider" style="position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--comfy-input-bg); transition: .3s; border-radius: 26px;"></span>
+                            <label class="settings-switch toggle-switch">
+                                <input class="settings-switch-input" type="checkbox" id="admin-image-moderation" disabled aria-label="${escapeHtml(t('settings_form.image_moderation'))}" aria-describedby="moderation-hint moderation-status"><span class="toggle-slider" aria-hidden="true"></span>
+
                             </label>
                         </div>
-                        <div id="moderation-status" role="status" aria-live="polite" style="margin-top: 8px; font-size: 11px; color: var(--rk-text-muted, #aaa);">${escapeHtml(t('common.loading'))}</div>
+                        <div class="settings-moderation-status" id="moderation-status" role="status" aria-live="polite">${escapeHtml(t('common.loading'))}</div>
                         <button id="moderation-retry" type="button" hidden>${escapeHtml(t('common.retry'))}</button>
                     </div>
                 </div>
             </div>
             ` : ''}
         </div>
-        <div style="display: flex; gap: 10px; margin-top: 20px;">
-            <button id="btn-cancel-settings" style="flex: 1; padding: 10px; background: transparent; border: 1px solid #555; color: #ccc; border-radius: 4px; cursor: pointer;">${t('settings_form.cancel')}</button>
-            <button id="btn-save-settings" style="flex: 2; padding: 10px; background: #4CAF50; border: none; color: white; border-radius: 4px; cursor: pointer; font-weight: bold;">${t('settings_form.save_all')}</button>
+        <div class="settings-actions">
+            <button type="button" class="settings-cancel" id="btn-cancel-settings">${t('settings_form.cancel')}</button>
+            <button type="button" class="settings-save" id="btn-save-settings">${t('settings_form.save_all')}</button>
         </div>
     `;
 
@@ -273,6 +278,11 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     const settingUiBgInput = container.querySelector("#setting-ui-bg");
     const bannerPreview = container.querySelector("#setting-banner-preview");
     const uiBgPreview = container.querySelector("#setting-ui-bg-preview");
+    const initialBannerBackground = _cssBackgroundImage(userData.bannerUrl);
+    bannerPreview.style.backgroundImage = initialBannerBackground;
+    if (initialBannerBackground !== "none") {
+        bannerPreview.style.backgroundColor = "transparent";
+    }
     const birthdayInput = container.querySelector("#setting-birthday");
     const ageDisplay = container.querySelector("#setting-age-display");
     let avatarDataUrl = userData.avatarDataUrl;
@@ -293,32 +303,6 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     let pendingBannerFile = null;  // 待上传的背景图文件
     let pendingBannerDataUrl = null;  // 用于预览和本地缓存
 
-    // 🔒 管理员开关样式注入
-    if (isAdmin && !document.getElementById('admin-toggle-styles')) {
-        const toggleStyles = document.createElement('style');
-        toggleStyles.id = 'admin-toggle-styles';
-        toggleStyles.textContent = `
-            .toggle-switch input:checked + .toggle-slider {
-                background-color: #4CAF50;
-            }
-            .toggle-slider:before {
-                position: absolute;
-                content: "";
-                height: 20px;
-                width: 20px;
-                left: 3px;
-                bottom: 3px;
-                background-color: white;
-                transition: .3s;
-                border-radius: 50%;
-            }
-            .toggle-switch input:checked + .toggle-slider:before {
-                transform: translateX(24px);
-            }
-        `;
-        document.head.appendChild(toggleStyles);
-    }
-    
     if (isAdmin) {
         const moderationToggle = container.querySelector('#admin-image-moderation');
         const statusDiv = container.querySelector('#moderation-status');
@@ -405,7 +389,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     // 加载本地界面背景预览（使用账号区分键）
     const savedUiBg = _safeStorageGet('localStorage', getBackgroundKey(userData.account));
     if (typeof savedUiBg === "string" && /^data:image\/(?:png|jpeg|webp);base64,/i.test(savedUiBg)) {
-        uiBgPreview.style.backgroundImage = `url(${savedUiBg})`;
+        uiBgPreview.style.backgroundImage = _cssBackgroundImage(savedUiBg);
         uiBgPreview.style.backgroundSize = "cover";
         uiBgPreview.style.backgroundPosition = "center";
     }
@@ -415,7 +399,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         const age = calculateAge(birthdayInput.value);
         if (age !== null) {
             ageDisplay.textContent = `${age} ${t('profile.age_years')}`;
-            ageDisplay.style.color = "#4CAF50";
+            ageDisplay.classList.add("settings-age--known");
         } else {
             ageDisplay.textContent = "";
         }
@@ -488,7 +472,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         pendingBannerFile = null;
         pendingBannerDataUrl = null;
         bannerPreview.style.backgroundImage = "none";
-        bannerPreview.style.background = "#1a1a1a";
+        bannerPreview.style.backgroundColor = "";
         // 同时清除本地缓存（使用账号区分键）
         if (!_safeLocalStorageRemove(getBannerCacheKey(userData.account))) {
             showToast(t('settings_form.local_storage_unavailable'), "warning");
@@ -518,7 +502,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
             return;
         }
         uiBgPreview.style.backgroundImage = "none";
-        uiBgPreview.style.background = "#1a1a1a";
+        uiBgPreview.style.backgroundColor = "";
         // 立即应用到侧边栏
         window.dispatchEvent(new CustomEvent("comfy-sidebar-bg-update"));
         showToast(t('settings_form.ui_bg_cleared'), "success");

前端页面/prompt/价格校验.js

@@ -20,3 +20,10 @@ export function validatePromptPriceInput(input, error, t) {
     input.removeAttribute("aria-invalid");
     return price;
 }
+
+export function getPromptPriceState(value) {
+    const known = (typeof value === 'number' || (typeof value === 'string' && value.trim() !== ''))
+        && Number.isFinite(Number(value)) && Number(value) >= 0;
+    if (!known) return 'unknown';
+    return Number(value) === 0 ? 'free' : 'paid';
+}

前端页面/prompt/发布提示词组件.js

@@ -20,7 +20,7 @@ import { removeCacheByPrefix } from "../components/性能优化工具.js";
 import { createPublishEditingLock } from "../market/发布编辑锁.js";
 import { createPublishSubmissionScope } from "../market/发布提交生命周期.js";
 import { parsePromptPrice, validatePromptPriceInput } from "./价格校验.js";
-import { API, CACHE, PUBLISH_MEDIA_LIMITS, IMAGE_PROCESS, PROMPT_LIMITS } from "../core/全局配置.js";
+import { areKeyboardShortcutsEnabled, API, CACHE, PUBLISH_MEDIA_LIMITS, IMAGE_PROCESS, PROMPT_LIMITS } from "../core/全局配置.js";
 import { escapeHtml } from "../components/互动工具函数.js";  // 🧹 P2归一：局部副本已移除
 
 function requirePromptUpload(result) {
@@ -119,13 +119,11 @@ function formatFileSize(bytes) {
 }
 
 // ===== 多图预览与拖拽排序（参考讨论区发布界面） =====
-const PREVIEW_WRAPPER_STYLE = { position: "relative", width: "80px", height: "80px" };
 
 // 清除所有拖拽插入指示线
 function _clearDragIndicators(wrappers) {
     wrappers.forEach(w => {
-        w.style.borderLeft = '';
-        w.style.paddingLeft = '';
+        w.removeAttribute('data-prompt-drop');
     });
 }
 
@@ -135,19 +133,7 @@ function _createAddButton(imagesInput, scope) {
     addBtn.type = "button";
     addBtn.setAttribute("aria-label", t("post.upload_images"));
     addBtn.setAttribute("data-file-picker-button", "");
-    Object.assign(addBtn.style, {
-        width: "80px",
-        height: "80px",
-        background: "transparent",
-        border: "2px dashed var(--rk-border, var(--border-color, #444))",
-        borderRadius: "6px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        color: "var(--rk-muted, var(--descrip-text, #a4a4a4))",
-        fontSize: "24px"
-    });
+    addBtn.className = "prompt-publish__add";
     addBtn.textContent = "+";
     addBtn.onclick = (e) => {
         if (!scope.isCurrent() || imagesInput.disabled) return;
@@ -188,8 +174,9 @@ function updateCoverMark(previewContainer) {
         wrapper.tabIndex = 0;
         wrapper.setAttribute('role', 'group');
         wrapper.setAttribute('aria-label', t('post.image_position', { index: idx + 1, total: wrappers.length }));
-        wrapper.setAttribute('aria-keyshortcuts', 'Alt+ArrowLeft Alt+ArrowRight');
-        if (!wrapper.title) wrapper.title = t('post.image_move_hint');
+        if (areKeyboardShortcutsEnabled()) wrapper.setAttribute('aria-keyshortcuts', 'Alt+ArrowLeft Alt+ArrowRight');
+        else wrapper.removeAttribute('aria-keyshortcuts');
+        wrapper.title = t(areKeyboardShortcutsEnabled() ? 'post.image_move_hint' : 'post.image_drag_hint');
         const remove = wrapper.querySelector('button[data-action="remove"]');
         if (remove) {
             remove.type = 'button';
@@ -198,13 +185,13 @@ function updateCoverMark(previewContainer) {
         if (img && !img.hasAttribute('alt')) img.alt = '';
 
         if (img) {
-            img.style.borderColor = idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))';
+            wrapper.setAttribute('data-prompt-cover', String(idx === 0));
         }
         if (idx === 0) {
             if (!coverLabel) {
                 const label = document.createElement('span');
                 label.className = 'cover-label';
-                label.style.cssText = 'position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-text, var(--fg-color, #ddd)); font-size: 10px; padding: 2px 6px; border-radius: 3px; pointer-events: none;';
+                
                 label.textContent = t('post.cover');
                 wrapper.appendChild(label);
             }
@@ -239,7 +226,7 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
 
     wrappers.forEach(wrapper => {
         wrapper.draggable = true;
-        wrapper.style.cursor = 'grab';
+        wrapper.className = "prompt-publish__image";
 
         // 绑定删除按钮（如果尚未绑定）
         const removeBtn = wrapper.querySelector('button[data-action="remove"]');
@@ -261,7 +248,7 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
         }
 
         wrapper.onkeydown = (e) => {
-            if (e.target !== wrapper || !e.altKey || e.ctrlKey || e.metaKey || e.shiftKey ||
+            if (!areKeyboardShortcutsEnabled() || e.defaultPrevented || e.keyCode === 229 || e.target !== wrapper || !e.altKey || e.ctrlKey || e.metaKey || e.shiftKey ||
                 e.repeat || e.isComposing || !canInteract() ||
                 !['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
             const current = getWrappers();
@@ -286,7 +273,7 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
             e.stopPropagation();
             dragSrcEl = wrapper;
             dragSrcIndex = getWrappers().indexOf(wrapper);
-            wrapper.style.opacity = '0.5';
+            wrapper.setAttribute('data-prompt-dragging', 'true');
             e.dataTransfer.effectAllowed = 'move';
             e.dataTransfer.setData('text/plain', String(dragSrcIndex));
         };
@@ -307,13 +294,11 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
             _clearDragIndicators(currentWrappers);
 
             // 在当前目标左侧显示绿色竖线指示插入位置
-            wrapper.style.borderLeft = '3px solid #4CAF50';
-            wrapper.style.paddingLeft = '5px';
+            wrapper.setAttribute('data-prompt-drop', 'true');
         };
 
         wrapper.ondragleave = () => {
-            wrapper.style.borderLeft = '';
-            wrapper.style.paddingLeft = '';
+            wrapper.removeAttribute('data-prompt-drop');
         };
 
         wrapper.ondrop = (e) => {
@@ -347,7 +332,7 @@ function setupImageDragSort(previewContainer, fileArray, options = {}) {
             dragSrcEl = null;
             dragSrcIndex = -1;
             const endWrappers = getWrappers();
-            endWrappers.forEach(w => { w.style.opacity = ''; });
+            endWrappers.forEach(w => { w.removeAttribute('data-prompt-dragging'); });
             _clearDragIndicators(endWrappers);
         };
     });
@@ -377,10 +362,8 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
     const editTags = isEditMode ? (Array.isArray(editPromptData.tags) ? editPromptData.tags : []) : [];
 
     const container = document.createElement("div");
-    const fieldLabelStyle = "display: block; font-size: 13px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;";
-    const inputStyle = "";
 
-    container.classList.add("ranking-publish-form");
+    container.classList.add("ranking-publish-form", "prompt-publish");
     container.innerHTML = `
         <!-- 顶部标题栏 -->
         <div class="ranking-publish-header">
@@ -395,124 +378,124 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
         <!-- 表单内容 -->
         <div class="ranking-publish-body">
             <!-- 类型切换（图像/视频提示词） -->
-            <div style="margin-bottom: 15px;">
-                <label style="${fieldLabelStyle}">🎯 ${t('prompt.type_label')}</label>
-                <div role="group" aria-label="${t('prompt.type_label')}" style="display: flex; gap: 0; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 1px solid var(--rk-border, var(--border-color, #444)); border-radius: 6px; overflow: hidden;">
-                    <button id="ptype-image" style="flex: 1; padding: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s;">
+            <div class="prompt-publish__field">
+                <label class="prompt-publish__label">🎯 ${t('prompt.type_label')}</label>
+                <div role="group" aria-label="${t('prompt.type_label')}" class="prompt-publish__types">
+                    <button type="button" id="ptype-image" class="prompt-publish__type">
                         🎨 ${t('prompt.tab_image')}
                     </button>
-                    <button id="ptype-video" style="flex: 1; padding: 10px; background: transparent; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); border: none; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s; border-left: 1px solid var(--rk-border, var(--border-color, #444));">
+                    <button type="button" id="ptype-video" class="prompt-publish__type">
                         🎬 ${t('prompt.tab_video')}
                     </button>
-                    <button id="ptype-music" style="flex: 1; padding: 10px; background: transparent; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); border: none; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s; border-left: 1px solid var(--rk-border, var(--border-color, #444));">
+                    <button type="button" id="ptype-music" class="prompt-publish__type">
                         🎵 ${t('prompt.tab_music')}
                     </button>
                 </div>
             </div>
 
             <!-- 分类选择 -->
-            <div style="margin-bottom: 15px;">
-                <label for="category-select" style="${fieldLabelStyle}">🏷️ ${t('prompt.category_label')} <span style="color: #F44336;">*</span></label>
-                <select id="category-select" class="ranking-publish-input" style="${inputStyle} cursor: pointer;">
+            <div class="prompt-publish__field">
+                <label for="category-select" class="prompt-publish__label">🏷️ ${t('prompt.category_label')} <span class="prompt-publish__required">*</span></label>
+                <select id="category-select" class="ranking-publish-input prompt-publish__select">
                     <option value="">${t('prompt.category_select')}</option>
                 </select>
             </div>
 
             <!-- 🏷️ 标签（自定义 + 推荐快加 + 搜索过滤） -->
-            <div style="margin-bottom: 15px;">
-                <label for="tag-input" style="${fieldLabelStyle}">🔖 ${t('prompt.tag_label')}</label>
-                <div id="tags-selected" style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;"></div>
-                <input type="text" id="tag-input" class="ranking-publish-input" placeholder="${t('prompt.tag_placeholder')}" maxlength="12" style="${inputStyle}">
-                <div style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 6px;">${t('prompt.tag_recommend')}</div>
-                <div id="tag-recommend-list" style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; max-height: 92px; overflow-y: auto;"></div>
+            <div class="prompt-publish__field">
+                <label for="tag-input" class="prompt-publish__label">🔖 ${t('prompt.tag_label')}</label>
+                <div id="tags-selected" class="prompt-publish__tags"></div>
+                <input type="text" id="tag-input" class="ranking-publish-input" placeholder="${t('prompt.tag_placeholder')}" maxlength="12">
+                <div class="prompt-publish__hint">${t('prompt.tag_recommend')}</div>
+                <div id="tag-recommend-list" class="prompt-publish__recommendations"></div>
             </div>
 
             <!-- 标题输入 -->
-            <div style="margin-bottom: 15px;">
-                <label for="title-input" style="${fieldLabelStyle}">📝 ${t('prompt.title_label')} <span style="color: #F44336;">*</span></label>
-                <input type="text" id="title-input" class="ranking-publish-input" value="${escapeAttr(editTitle)}" placeholder="${t('prompt.title_placeholder')}" maxlength="50" style="${inputStyle}">
-                <div style="text-align: right; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 4px;">
+            <div class="prompt-publish__field">
+                <label for="title-input" class="prompt-publish__label">📝 ${t('prompt.title_label')} <span class="prompt-publish__required">*</span></label>
+                <input type="text" id="title-input" class="ranking-publish-input" value="${escapeAttr(editTitle)}" placeholder="${t('prompt.title_placeholder')}" maxlength="50">
+                <div class="prompt-publish__count">
                     <span id="title-count">${editTitle.length}</span>/50
                 </div>
             </div>
 
             <!-- 文案/简介输入 -->
-            <div style="margin-bottom: 15px;">
-                <label for="content-input" style="${fieldLabelStyle}">✍️ ${t('prompt.content_label')} <span style="color: #F44336;">*</span></label>
-                <textarea id="content-input" class="ranking-publish-input" placeholder="${t('prompt.content_placeholder')}" maxlength="2000" style="${inputStyle} height: 100px; resize: none; line-height: 1.6;">${escapeHtml(editContent)}</textarea>
-                <div style="text-align: right; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 4px;">
+            <div class="prompt-publish__field">
+                <label for="content-input" class="prompt-publish__label">✍️ ${t('prompt.content_label')} <span class="prompt-publish__required">*</span></label>
+                <textarea id="content-input" class="ranking-publish-input prompt-publish__description" placeholder="${t('prompt.content_placeholder')}" maxlength="2000">${escapeHtml(editContent)}</textarea>
+                <div class="prompt-publish__count">
                     <span id="content-count">${editContent.length}</span>/2000
                 </div>
             </div>
 
             <!-- 提示词正文（付费内容） -->
-            <div style="margin-bottom: 15px;">
-                <label for="text-input" style="${fieldLabelStyle}">🔑 ${t('prompt.text_label')} <span style="color: #F44336;">*</span></label>
-                <textarea id="text-input" class="ranking-publish-input" placeholder="${t('prompt.text_placeholder')}" maxlength="20000" style="${inputStyle} height: 180px; resize: none; line-height: 1.6; font-family: monospace;">${escapeHtml(editText)}</textarea>
-                <div style="text-align: right; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 4px;">
+            <div class="prompt-publish__field">
+                <label for="text-input" class="prompt-publish__label">🔑 ${t('prompt.text_label')} <span class="prompt-publish__required">*</span></label>
+                <textarea id="text-input" class="ranking-publish-input prompt-publish__text" placeholder="${t('prompt.text_placeholder')}" maxlength="20000">${escapeHtml(editText)}</textarea>
+                <div class="prompt-publish__count">
                     <span id="text-count">${editText.length}</span>/20000
                 </div>
             </div>
 
             <!-- 价格设置 -->
-            <div style="margin-bottom: 15px;">
-                <label for="price-input" style="${fieldLabelStyle}">💎 ${t('prompt.price_label')}</label>
-                <input type="number" id="price-input" class="ranking-publish-input" value="${escapeHtml(String(editPrice))}" min="0" max="${PROMPT_LIMITS.MAX_PRICE}" step="1" aria-describedby="price-error" style="${inputStyle}">
-                <div id="price-error" role="alert" hidden style="color: var(--rk-danger, #ef5350); font-size: 12px; margin-top: 6px;"></div>
+            <div class="prompt-publish__field">
+                <label for="price-input" class="prompt-publish__label">💎 ${t('prompt.price_label')}</label>
+                <input type="number" id="price-input" class="ranking-publish-input" value="${escapeHtml(String(editPrice))}" min="0" max="${PROMPT_LIMITS.MAX_PRICE}" step="1" aria-describedby="price-error">
+                <div id="price-error" role="alert" hidden class="prompt-publish__error"></div>
             </div>
 
             <!-- 原创作品勾选（参考讨论区） -->
-            <div style="margin-bottom: 15px; padding: 12px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 1px solid var(--rk-border, var(--border-color, #444)); border-radius: 6px;">
-                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
-                    <input type="checkbox" id="is-original-checkbox" ${editIsOriginal ? 'checked' : ''} style="width: 16px; height: 16px; cursor: pointer; accent-color: #764ba2;" />
-                    <span style="font-size: 13px; color: var(--rk-text, var(--fg-color, #ddd));">🎨 ${t('publish.mark_as_original')}</span>
+            <div class="prompt-publish__original">
+                <label class="prompt-publish__checkbox">
+                    <input type="checkbox" id="is-original-checkbox" ${editIsOriginal ? 'checked' : ''} class="prompt-publish__check" />
+                    <span class="prompt-publish__copy">🎨 ${t('publish.mark_as_original')}</span>
                 </label>
-                <div style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin-top: 6px; padding-left: 24px;">
+                <div class="prompt-publish__checkbox-hint">
                     ${t('publish.original_default_hint')}
                 </div>
             </div>
 
             <!-- 图片上传区（图像提示词专用：多图 + 拖拽排序，首张为封面） -->
-            <div id="image-upload-section" style="margin-bottom: 15px;">
-                <label style="${fieldLabelStyle}">🖼️ ${t('post.upload_images')} <span style="color: #F44336;">*</span>
-                    <span style="font-weight: normal; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 12px;">（${t('post.max_9_images')}）</span>
+            <div id="image-upload-section" class="prompt-publish__field">
+                <label class="prompt-publish__label">🖼️ ${t('post.upload_images')} <span class="prompt-publish__required">*</span>
+                    <span class="prompt-publish__optional">（${t('post.max_9_images')}）</span>
                 </label>
                 <input type="file" id="images-input" accept="image/*" multiple style="display: none;">
-                <div id="images-preview" style="display: flex; flex-wrap: wrap; gap: 8px; min-height: 80px; padding: 15px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 2px dashed var(--rk-border, var(--border-color, #444)); border-radius: 8px; cursor: pointer; transition: 0.2s;">
-                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                        <div style="font-size: 32px; margin-bottom: 8px;">📷</div>
+                <div id="images-preview" class="prompt-publish__images">
+                    <div class="prompt-publish__empty">
+                        <div class="prompt-publish__empty-icon">📷</div>
                         ${t('post.click_upload')}
                     </div>
                 </div>
             </div>
 
             <!-- 视频上传区（视频提示词专用：截取当前帧或手动上传封面） -->
-            <div id="video-upload-section" style="margin-bottom: 20px; display: none;">
-                <label style="${fieldLabelStyle}">🎬 ${t('prompt.video_label')} <span id="video-required-mark" style="color: #F44336;">*</span><span id="video-optional-mark" style="color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-weight: normal; font-size: 12px; display: none;">${t('prompt.optional_mark')}</span></label>
+            <div id="video-upload-section" style="display: none;" class="prompt-publish__media-section">
+                <label class="prompt-publish__label">🎬 ${t('prompt.video_label')} <span id="video-required-mark" class="prompt-publish__required">*</span><span id="video-optional-mark" style="display: none;" class="prompt-publish__optional">${t('prompt.optional_mark')}</span></label>
                 <input type="file" id="video-input" accept="video/mp4,video/webm,video/quicktime" style="display: none;">
-                <div id="video-preview-area" style="padding: 15px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 2px dashed var(--rk-border, var(--border-color, #444)); border-radius: 8px; cursor: pointer; transition: 0.2s;">
-                    <div id="video-empty-state" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                        <div style="font-size: 32px; margin-bottom: 8px;">🎬</div>
+                <div id="video-preview-area" class="prompt-publish__media">
+                    <div id="video-empty-state" class="prompt-publish__empty">
+                        <div class="prompt-publish__empty-icon">🎬</div>
                         ${t('post.click_upload_video')}
                     </div>
                     <div id="video-player-wrap" style="display: none;">
-                        <video id="video-player" controls style="width: 100%; max-height: 300px; border-radius: 8px; background: #000; display: block;"></video>
-                        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
-                            <div style="font-size: 12px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); line-height: 1.5;">
+                        <video id="video-player" controls class="prompt-publish__video"></video>
+                        <div class="prompt-publish__media-meta">
+                            <div class="prompt-publish__meta-copy">
                                 <div id="video-name"></div>
                                 <div id="video-meta"></div>
                             </div>
-                            <button id="btn-remove-video" style="width: 28px; height: 28px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0;">×</button>
+                            <button type="button" aria-label="${t('common.delete')} ${t('prompt.video_label')}" id="btn-remove-video" class="prompt-publish__remove-media">×</button>
                         </div>
                         <!-- 封面区域（截取当前帧 / 手动上传） -->
-                        <div id="video-cover-wrap" style="display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color, #333);">
-                            <div style="font-size: 12px; font-weight: bold; color: var(--rk-text, var(--fg-color, #ddd)); margin-bottom: 8px;">${t('post.video_cover')}</div>
+                        <div id="video-cover-wrap" style="display: none;" class="prompt-publish__cover-section">
+                            <div class="prompt-publish__cover-title">${t('post.video_cover')}</div>
                             <div class="ranking-publish-cover-controls">
-                                <div style="position: relative; width: 80px; height: 80px; flex-shrink: 0;">
-                                    <img id="cover-thumb" src="" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid #4CAF50; display: none;">
-                                    <span id="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px; display: none;">${t('post.cover')}</span>
+                                <div class="prompt-publish__cover-frame">
+                                    <img id="cover-thumb" src="" style="display: none;" class="prompt-publish__cover-image">
+                                    <span id="cover-label" style="display: none;" class="prompt-publish__cover-badge">${t('post.cover')}</span>
                                 </div>
-                                <div style="display: flex; flex-direction: column; gap: 6px;">
+                                <div class="prompt-publish__cover-actions">
                                     <button type="button" id="btn-capture-frame" class="ranking-publish-secondary">
                                         📸 ${t('post.capture_frame')}
                                     </button>
@@ -528,30 +511,30 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
             </div>
 
             <!-- 🎵 音频上传区（音乐提示词专用：图片+音频方案，视频可选） -->
-            <div id="audio-upload-section" style="margin-bottom: 20px; display: none;">
-                <label style="${fieldLabelStyle}">🎵 ${t('prompt.audio_label')} <span style="color: #F44336;">*</span></label>
-                <div style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); margin: -4px 0 8px; line-height: 1.5;">${t('prompt.music_media_hint')}</div>
+            <div id="audio-upload-section" style="display: none;" class="prompt-publish__media-section">
+                <label class="prompt-publish__label">🎵 ${t('prompt.audio_label')} <span class="prompt-publish__required">*</span></label>
+                <div class="prompt-publish__media-hint">${t('prompt.music_media_hint')}</div>
                 <input type="file" id="audio-input" accept="audio/mpeg,audio/wav,audio/x-wav,audio/mp4,audio/x-m4a,audio/ogg,.mp3,.wav,.m4a,.ogg" style="display: none;">
-                <div id="audio-preview-area" style="padding: 15px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 2px dashed var(--rk-border, var(--border-color, #444)); border-radius: 8px; cursor: pointer; transition: 0.2s;">
-                    <div id="audio-empty-state" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                        <div style="font-size: 32px; margin-bottom: 8px;">🎵</div>
+                <div id="audio-preview-area" class="prompt-publish__media">
+                    <div id="audio-empty-state" class="prompt-publish__empty">
+                        <div class="prompt-publish__empty-icon">🎵</div>
                         ${t('post.click_upload_audio')}
                     </div>
                     <div id="audio-player-wrap" style="display: none;">
-                        <audio id="audio-player" controls style="width: 100%; display: block;"></audio>
-                        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 10px;">
-                            <div style="font-size: 12px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); line-height: 1.5;">
+                        <audio id="audio-player" controls class="prompt-publish__audio"></audio>
+                        <div class="prompt-publish__media-meta">
+                            <div class="prompt-publish__meta-copy">
                                 <div id="audio-name"></div>
                                 <div id="audio-meta"></div>
                             </div>
-                            <button id="btn-remove-audio" style="width: 28px; height: 28px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 16px; line-height: 1; flex-shrink: 0;">×</button>
+                            <button type="button" aria-label="${t('common.delete')} ${t('prompt.audio_label')}" id="btn-remove-audio" class="prompt-publish__remove-media">×</button>
                         </div>
                     </div>
                 </div>
             </div>
 
             <!-- 提示信息 -->
-            <div style="background: rgba(102,126,234,0.1); border: 1px solid rgba(102,126,234,0.3); border-radius: 6px; padding: 12px; font-size: 12px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); line-height: 1.6;">
+            <div class="prompt-publish__notice">
                 💡 <strong>${t('prompt.notice_title')}：</strong><br>
                 • ${t('prompt.notice_1')}<br>
                 • ${t('prompt.notice_2')}<br>
@@ -559,7 +542,7 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
             </div>
 
             <!-- 确认发布按钮 -->
-            <button id="btn-submit-prompt" style="width: 100%; padding: 12px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: var(--rk-on-accent, #fff); border-radius: 6px; cursor: pointer; font-size: 15px; font-weight: bold; transition: 0.2s; margin-top: 15px; margin-bottom: 5px;">
+            <button type="button" id="btn-submit-prompt" class="prompt-publish__submit">
                 ${isEditMode ? '💾' : '🚀'} ${isEditMode ? t('prompt.save_submit') : t('prompt.publish_submit')}
             </button>
         </div>
@@ -647,6 +630,15 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
     const submitBtn = container.querySelector("#btn-submit-prompt");
     const account = currentUser?.account;
     const scope = createPublishSubmissionScope(container, submitBtn, account);
+    const refreshImageShortcuts = () => {
+        if (scope.isCurrent()) updateCoverMark(imagesPreview);
+    };
+    window.addEventListener('comfy-settings-changed', refreshImageShortcuts);
+    window.addEventListener('storage', refreshImageShortcuts);
+    scope.addCleanup(() => {
+        window.removeEventListener('comfy-settings-changed', refreshImageShortcuts);
+        window.removeEventListener('storage', refreshImageShortcuts);
+    });
     const editingLock = createPublishEditingLock(container, [submitBtn, container.querySelector("#btn-back-publish-prompt")]);
     scope.addCleanup(() => editingLock.dispose());
     const previewReaders = new Set(), temporaryVideos = new Map();
@@ -754,14 +746,6 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
     // ========== 类型切换 ==========
     function updateTypeUI() {
         for (const [button, type] of [[ptypeImageBtn, 'image'], [ptypeVideoBtn, 'video'], [ptypeMusicBtn, 'music']]) button.setAttribute('aria-pressed', String(promptType === type));
-        // 先重置三个按钮样式，再高亮当前选中项
-        [ptypeImageBtn, ptypeVideoBtn, ptypeMusicBtn].forEach(btn => {
-            btn.style.background = 'transparent';
-            btn.style.color = 'var(--rk-muted, var(--descrip-text, #a4a4a4))';
-        });
-        const activeBtn = promptType === 'image' ? ptypeImageBtn : (promptType === 'music' ? ptypeMusicBtn : ptypeVideoBtn);
-        activeBtn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-        activeBtn.style.color = 'var(--rk-on-accent, #fff)';
         // 图像区：图像提示词 + 音乐提示词（图片+音频方案）；视频区：视频/音乐；音频区：仅音乐
         imageSection.style.display = promptType === 'video' ? 'none' : 'block';
         videoSection.style.display = promptType === 'image' ? 'none' : 'block';
@@ -879,11 +863,13 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
         tagsSelectedEl.innerHTML = "";
         selectedTags.forEach(tag => {
             const chip = document.createElement("span");
-            chip.style.cssText = "display: inline-flex; align-items: center; gap: 4px; background: rgba(0,188,212,0.15); border: 1px solid rgba(0,188,212,0.4); color: #4DD0E1; font-size: 12px; padding: 3px 8px; border-radius: 10px;";
+            chip.className = "prompt-publish__tag";
             chip.textContent = "#" + tag;
             const rm = document.createElement("button");
             rm.textContent = "×";
-            rm.style.cssText = "background: none; border: none; color: #4DD0E1; cursor: pointer; font-size: 13px; line-height: 1; padding: 0;";
+            rm.className = "prompt-publish__remove-tag";
+            rm.type = "button";
+            rm.setAttribute("aria-label", `${t("common.delete")} ${tag}`);
             rm.onclick = () => {
         if (!scope.isCurrent()) return; selectedTags = selectedTags.filter(x => x !== tag); renderSelectedTags(); renderRecommendTags(); };
             chip.appendChild(rm);
@@ -900,12 +886,13 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
             .slice(0, 20);
         tagRecommendList.innerHTML = "";
         if (!list.length) {
-            tagRecommendList.innerHTML = `<span style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4));">${t('prompt.tag_no_recommend')}</span>`;
+            tagRecommendList.innerHTML = `<span class="prompt-publish__muted">${t('prompt.tag_no_recommend')}</span>`;
             return;
         }
         list.forEach(name => {
             const chip = document.createElement("button");
-            chip.style.cssText = "background: rgba(118,75,162,0.2); border: 1px solid rgba(118,75,162,0.5); color: #CE93D8; font-size: 11px; padding: 3px 8px; border-radius: 10px; cursor: pointer; transition: 0.2s;";
+            chip.className = "prompt-publish__tag";
+            chip.type = "button";
             chip.textContent = "+ " + name;
             chip.onclick = () => addTag(name);
             tagRecommendList.appendChild(chip);
@@ -925,8 +912,11 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
     }
 
     tagInput.onkeydown = (e) => {
-        if (!scope.isCurrent()) return;
-        if (e.key === "Enter") { e.preventDefault(); addTag(tagInput.value); }
+        if (!scope.isCurrent() || e.defaultPrevented || e.key !== "Enter"
+            || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey
+            || e.isComposing || e.keyCode === 229 || e.repeat
+            || tagInput.disabled || tagInput.readOnly) return;
+        e.preventDefault(); addTag(tagInput.value);
     };
     tagInput.oninput = () => { if (scope.isCurrent()) renderRecommendTags(); };
 
@@ -1009,8 +999,8 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
 
         if (totalImages === 0) {
             imagesPreview.innerHTML = `
-                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                    <div style="font-size: 32px; margin-bottom: 8px;">📷</div>
+                <div class="prompt-publish__empty">
+                    <div class="prompt-publish__empty-icon">📷</div>
                     ${t('post.click_upload')}
                 </div>
             `;
@@ -1036,12 +1026,12 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
 
         existingImageUrls.forEach((url, idx) => {
             const wrapper = document.createElement("div");
-            Object.assign(wrapper.style, PREVIEW_WRAPPER_STYLE);
+            wrapper.className = "prompt-publish__image";
 
             wrapper.innerHTML = `
-                <img src="${escapeAttr(url)}" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid ${idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))'};">
-                ${idx === 0 ? `<span class="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px;">${t('post.cover')}</span>` : ''}
-                <button data-action="remove" data-existing-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+                <img src="${escapeAttr(url)}" class="prompt-publish__thumbnail">
+                ${idx === 0 ? `<span class="prompt-publish__cover-badge cover-label">${t('post.cover')}</span>` : ''}
+                <button type="button" data-action="remove" data-existing-idx="${idx}" class="prompt-publish__remove-image">×</button>
             `;
 
             wrapper._imageType = 'existing';
@@ -1065,11 +1055,11 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
             previewReaders.add(reader);
             reader.onabort = () => finishPreviewReader(reader);
             const wrapper = document.createElement("div");
-            Object.assign(wrapper.style, PREVIEW_WRAPPER_STYLE);
+            wrapper.className = "prompt-publish__image";
             wrapper.innerHTML = `
-                <img src="" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid ${existingImageUrls.length === 0 && idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))'};">
-                ${existingImageUrls.length === 0 && idx === 0 ? `<span class="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px;">${t('post.cover')}</span>` : ''}
-                <button data-action="remove" data-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+                <img src="" class="prompt-publish__thumbnail">
+                ${existingImageUrls.length === 0 && idx === 0 ? `<span class="prompt-publish__cover-badge cover-label">${t('post.cover')}</span>` : ''}
+                <button type="button" data-action="remove" data-idx="${idx}" class="prompt-publish__remove-image">×</button>
             `;
 
             wrapper.querySelector('img').removeAttribute('src');
@@ -1116,8 +1106,8 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
         const generation = beginImagePreviews();
         if (imageFiles.length === 0) {
             imagesPreview.innerHTML = `
-                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); font-size: 13px;">
-                    <div style="font-size: 32px; margin-bottom: 8px;">📷</div>
+                <div class="prompt-publish__empty">
+                    <div class="prompt-publish__empty-icon">📷</div>
                     ${t('post.click_upload')}
                 </div>
             `;
@@ -1133,12 +1123,12 @@ export function createPublishPromptView(currentUser, editPromptData = null) {
             previewReaders.add(reader);
             reader.onabort = () => finishPreviewReader(reader);
             const wrapper = document.createElement("div");
-            Object.assign(wrapper.style, PREVIEW_WRAPPER_STYLE);
+            wrapper.className = "prompt-publish__image";
 
             wrapper.innerHTML = `
-                <img src="" style="width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid ${idx === 0 ? '#4CAF50' : 'var(--rk-border, var(--border-color, #444))'};">
-                ${idx === 0 ? `<span class="cover-label" style="position: absolute; top: 4px; left: 4px; background: #4CAF50; color: var(--rk-on-accent, #fff); font-size: 10px; padding: 2px 6px; border-radius: 3px;">${t('post.cover')}</span>` : ''}
-                <button data-action="remove" data-idx="${idx}" style="position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #F44336; color: var(--rk-on-accent, #fff); border: none; cursor: pointer; font-size: 12px; line-height: 1;">×</button>
+                <img src="" class="prompt-publish__thumbnail">
+                ${idx === 0 ? `<span class="prompt-publish__cover-badge cover-label">${t('post.cover')}</span>` : ''}
+                <button type="button" data-action="remove" data-idx="${idx}" class="prompt-publish__remove-image">×</button>
             `;
 
             wrapper.querySelector('img').removeAttribute('src');

前端页面/prompt/提示词组件.js

@@ -15,6 +15,7 @@
 // ==========================================
 
 import { createPromptCategorySync, isPromptCategoryList } from "./提示词分类同步.js";
+import { getPromptPriceState } from "./价格校验.js";
 import { createCardNavigationScope } from "../components/卡片导航生命周期.js";
 import { api, proxyImages, captureRequestSession } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
@@ -31,6 +32,20 @@ const CACHE_KEY_PREFIX = "PromptsCache";
 const CATEGORIES_CACHE_PREFIX = "PromptsCategoriesCache";  // 📴 分类缓存键前缀（离线容灾）
 const PAGE_SIZE = 20;
 
+function promptListCacheKey(type, category, sort) {
+    const filter = category ? `category_${JSON.stringify([category, sort])}` : `all_${sort}`;
+    return `${CACHE_KEY_PREFIX}_${type}_${filter}`;
+}
+
+function readPromptListCache(type, category, sort) {
+    const cached = readListCache(promptListCacheKey(type, category, sort));
+    if (cached || !category) return cached;
+    const legacy = readListCache(`${CACHE_KEY_PREFIX}_${type}_${category}_${sort}`);
+    if (!legacy || legacy.some(item => item.category !== category ||
+        (item.prompt_type != null && item.prompt_type !== type))) return null;
+    return legacy;
+}
+
 // 缓存当前用户
 let currentUserCache = null;
 
@@ -84,10 +99,10 @@ function _catLabel(name) {
  */
 function _renderEmptyState() {
     return `
-        <div style="grid-column: span 2; text-align: center; padding: 60px 20px; color: #666;">
-            <div style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;">🧩</div>
-            <div style="font-size: 14px; margin-bottom: 8px;">${t('prompt.no_prompts')}</div>
-            <div style="font-size: 12px; color: #888;">${t('prompt.be_first')}</div>
+        <div class="prompt-board__empty" role="status">
+            <div class="prompt-board__empty-icon" aria-hidden="true">🧩</div>
+            <div class="prompt-board__empty-title">${t('prompt.no_prompts')}</div>
+            <div class="prompt-board__empty-hint">${t('prompt.be_first')}</div>
         </div>
     `;
 }
@@ -101,7 +116,7 @@ function _generateAvatarHtml(avatar, name) {
     if (avatar) {
         return `<img class="swr-avatar prompt-card__avatar" alt="" src="${escapeHtml(avatar)}">`;
     }
-    return `<div class="swr-avatar prompt-card__avatar prompt-card__avatar--initial">${escapeHtml(initial)}</div>`;
+    return `<div class="swr-avatar prompt-card__avatar prompt-card__avatar--initial" aria-hidden="true">${escapeHtml(initial)}</div>`;
 }
 
 /**
@@ -115,18 +130,6 @@ export function createPromptsView(currentUser, keyword = "") {
 
     const container = document.createElement("div");
     container.className = "prompt-board";
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        color: "var(--rk-text, var(--fg-color, #ddd))",
-        fontSize: "14px",
-        padding: "0",
-        overflowY: "auto",
-        flex: "1",
-        boxSizing: "border-box"
-    });
-
     container.innerHTML = `
         <!-- 🎨 模块切换（图像/视频/音乐） -->
         <div id="prompt-type-tabs" class="prompt-board__types" role="group" aria-label="${escapeHtml(t('prompt.type_label'))}">
@@ -143,19 +146,19 @@ export function createPromptsView(currentUser, keyword = "") {
 
         <!-- 🏷️ 分类选择条（换行自适应侧边栏宽度） -->
         <div id="prompt-category-bar" class="prompt-board__categories" role="group" aria-label="${escapeHtml(t('prompt.category_label'))}">
-            <div style="color: #888; font-size: 12px; padding: 6px 0;">⏳</div>
+            <div class="prompt-board__category-loading" aria-hidden="true">⏳</div>
         </div>
 
         <!-- 🎯 瀑布流容器 -->
-        <div id="prompts-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 15px; overflow-y: auto; flex: 1;">
-            <div id="prompts-loading" style="grid-column: span 2; text-align: center; padding: 40px; color: #888;">
-                <div style="font-size: 24px; margin-bottom: 10px;">⏳</div>
+        <div id="prompts-grid" class="prompt-board__grid">
+            <div id="prompts-loading" class="prompt-board__loading" role="status">
+                <div class="prompt-board__loading-icon" aria-hidden="true">⏳</div>
                 ${t('prompt.loading')}
             </div>
         </div>
 
         <!-- 加载更多 -->
-        <div id="load-more-wrapper" style="display: none; padding: 15px; text-align: center; border-top: 1px solid var(--border-color, #333);">
+        <div id="load-more-wrapper" class="prompt-board__pagination" style="display: none;">
             <button type="button" id="btn-load-more" class="prompt-board__more">
                 ${t('post.load_more')}
             </button>
@@ -384,7 +387,7 @@ export function createPromptsView(currentUser, keyword = "") {
             // 🚀 本地��序优先：已有数据时直接本地排序渲染
             if (allPromptsData.length > 0) {
                 const sorted = sortPromptsLocally(allPromptsData, currentSort);
-                renderPromptsFromCache(sorted);
+                renderPromptsFromCache(sorted, true);
                 // 后台静默刷新最新数据
                 silentRefresh();
             } else {
@@ -407,7 +410,7 @@ export function createPromptsView(currentUser, keyword = "") {
         listViewGeneration++;
         if (allPromptsData.length > 0) {
             const sorted = sortPromptsLocally(allPromptsData, currentSort);
-            renderPromptsFromCache(sorted);
+            renderPromptsFromCache(sorted, true);
         }
         silentRefresh();
     };
@@ -415,28 +418,20 @@ export function createPromptsView(currentUser, keyword = "") {
 
     // 显示骨架屏
     const showSkeleton = () => {
-        promptsGrid.innerHTML = "";
+        promptsGrid.innerHTML = `<div class="prompt-board__loading prompt-board__loading--skeleton" role="status">${t('prompt.loading')}</div>`;
         for (let i = 0; i < 4; i++) {
             const skeletonCard = document.createElement("div");
-            skeletonCard.style.cssText = "background: var(--comfy-input-bg); border-radius: 10px; overflow: hidden; animation: pulse 1.5s infinite;";
+            skeletonCard.className = "prompt-board__skeleton";
+            skeletonCard.setAttribute("aria-hidden", "true");
             skeletonCard.innerHTML = `
-                <div style="width: 100%; padding-top: 120%; background: linear-gradient(90deg, #2a2a2a 25%, #333 50%, #2a2a2a 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite;"></div>
-                <div style="padding: 10px;">
-                    <div style="height: 14px; background: #333; border-radius: 4px; margin-bottom: 8px;"></div>
-                    <div style="height: 12px; background: #333; border-radius: 4px; width: 60%;"></div>
+                <div class="prompt-board__skeleton-cover"></div>
+                <div class="prompt-board__skeleton-body">
+                    <div class="prompt-board__skeleton-line"></div>
+                    <div class="prompt-board__skeleton-line prompt-board__skeleton-line--short"></div>
                 </div>
             `;
             promptsGrid.appendChild(skeletonCard);
         }
-        if (!document.getElementById("prompts-skeleton-style")) {
-            const style = document.createElement("style");
-            style.id = "prompts-skeleton-style";
-            style.textContent = `
-                @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
-                @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
-            `;
-            document.head.appendChild(style);
-        }
     };
 
     const loadPrompts = async (page = 1, append = false) => {
@@ -446,11 +441,11 @@ export function createPromptsView(currentUser, keyword = "") {
         const requestedType = currentType;
         const requestedCategory = currentCategory;
         const requestedSort = currentSort;
-        const cacheKey = `${CACHE_KEY_PREFIX}_${requestedType}_${requestedCategory || 'all'}_${requestedSort}`;
+        const cacheKey = promptListCacheKey(requestedType, requestedCategory, requestedSort);
 
         // ✅ 优先从本地缓存读取（含过期缓存：离线容灾，与插件榜/工作流/推荐榜策略一致）
         if (!append && page === 1) {
-            const cachedData = readListCache(cacheKey);
+            const cachedData = readPromptListCache(requestedType, requestedCategory, requestedSort);
             if (cachedData) {
                 allPromptsData = proxyImages(cachedData);
                 renderPromptsFromCache(allPromptsData, true);
@@ -557,7 +552,7 @@ export function createPromptsView(currentUser, keyword = "") {
             console.error("加载提示词失败");
             // 网络失败时尝试从缓存读取（包括过期缓存，离线容灾）
             if (!append) {
-                const cachedData = readListCache(cacheKey);
+                const cachedData = readPromptListCache(requestedType, requestedCategory, requestedSort);
                 if (cachedData) {
                     allPromptsData = proxyImages(cachedData);
                     renderPromptsFromCache(allPromptsData);
@@ -572,6 +567,7 @@ export function createPromptsView(currentUser, keyword = "") {
     // 从缓存渲染提示词列表
     const renderPromptsFromCache = (prompts, deferSearchScan = false) => {
         firstPageReady = true;
+        const restoreFocus = cardNavigation.captureListFocus(promptsGrid);
         promptsGrid.innerHTML = "";
 
         // 🔍 搜索过滤
@@ -587,6 +583,7 @@ export function createPromptsView(currentUser, keyword = "") {
                 promptsGrid.innerHTML = _renderEmptyState();
                 loadMoreWrapper.style.display = "none";
             }
+            restoreFocus();
             return;
         }
 
@@ -614,6 +611,7 @@ export function createPromptsView(currentUser, keyword = "") {
         } else {
             loadMoreWrapper.style.display = "none";
         }
+        restoreFocus();
     };
 
     // 后台静默更新
@@ -623,7 +621,7 @@ export function createPromptsView(currentUser, keyword = "") {
         const requestedType = currentType;
         const requestedCategory = currentCategory;
         const requestedSort = currentSort;
-        const cacheKey = `${CACHE_KEY_PREFIX}_${requestedType}_${requestedCategory || 'all'}_${requestedSort}`;
+        const cacheKey = promptListCacheKey(requestedType, requestedCategory, requestedSort);
         const requestGeneration = ++networkRequestGeneration;
         try {
             isLoadingFromNetwork = true;
@@ -677,10 +675,23 @@ export function createPromptsView(currentUser, keyword = "") {
     const _promptsDataChanged = (oldData, newData) => {
         if (!oldData || !newData) return true;
         if (oldData.length !== newData.length) return true;
-        const checkCount = Math.min(10, oldData.length);
+        const checkCount = oldData.length;
         const COMPARE_FIELDS = ['likes', 'favorites', 'views', 'daily_views', 'comments'];
+        const contentFields = ["title", "content", "category", "prompt_type", "media_type", "price", "created_at", "author", "author_name"];
+        const mediaFields = ["cover_image", "author_avatar"];
+        const normalizedImage = value => typeof value === 'string'
+            ? proxyImages({ cover_image: value }).cover_image : value;
         for (let i = 0; i < checkCount; i++) {
             if ((oldData[i].id) !== (newData[i].id)) return true;
+            for (const field of contentFields) {
+                if (!Object.is(oldData[i][field], newData[i][field])) return true;
+            }
+            for (const field of mediaFields) {
+                if (!Object.is(normalizedImage(oldData[i][field]), normalizedImage(newData[i][field]))) return true;
+            }
+            const oldTags = Array.isArray(oldData[i].tags) ? oldData[i].tags : [];
+            const newTags = Array.isArray(newData[i].tags) ? newData[i].tags : [];
+            if (oldTags.length !== newTags.length || oldTags.some((value, index) => !Object.is(value, newTags[index]))) return true;
             for (const f of COMPARE_FIELDS) {
                 if ((oldData[i][f] || 0) !== (newData[i][f] || 0)) return true;
             }
@@ -741,16 +752,22 @@ export function createPromptsView(currentUser, keyword = "") {
 function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = () => true, captureNavigation = () => isCurrent) {
     const card = document.createElement("div");
     card.className = "business-list-card prompt-card";
+    if (typeof prompt.id === 'string' || (typeof prompt.id === 'number' && Number.isFinite(prompt.id))) {
+        card._rankingListId = String(prompt.id);
+    }
 
     // 格式化时间
     const timeStr = formatTime(prompt.created_at);
 
     // 判断是否为视频封面
     const isVideo = prompt.media_type === "video";
+    const initialAuthor = isCurrent() && typeof prompt.author === 'string' ? getCachedProfile(prompt.author) : null;
+    const initialAuthorName = [initialAuthor?.name, prompt.author_name, prompt.author].find(value => typeof value === 'string' && value) || '';
 
     // 价格徽标
-    const priceHtml = (prompt.price > 0)
-        ? `<span class="prompt-card__badge prompt-card__badge--paid">💎 ${escapeHtml(prompt.price)}</span>`
+    const priceState = getPromptPriceState(prompt.price);
+    const priceHtml = priceState !== 'free'
+        ? `<span class="prompt-card__badge prompt-card__badge--paid">💎 ${escapeHtml(priceState === 'paid' ? prompt.price : t('common.unknown'))}</span>`
         : `<span class="prompt-card__badge prompt-card__badge--free">${t('prompt.free')}</span>`;
 
     card.innerHTML = `
@@ -768,7 +785,7 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
                 ${priceHtml}
             </div>
             <!-- 🔒 付费锁标识 -->
-            ${prompt.price > 0 ? `
+            ${priceState !== 'free' ? `
             <div class="prompt-card__lock">🔒</div>
             ` : ''}
         </div>
@@ -787,7 +804,7 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
             </div>
 
             <!-- 作者信息（SWR 缓存头像） -->
-            <div class="business-list-card__author prompt-card__author"></div>
+            <div class="business-list-card__author prompt-card__author">${_generateAvatarHtml('', initialAuthorName)}<span class="swr-name prompt-card__name">${escapeHtml(initialAuthorName)}</span></div>
 
             <!-- 互动数据 -->
             <div class="prompt-card__stats">
@@ -806,9 +823,9 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
         if (!authorContainer) return;
 
         const account = prompt.author;
-        const cached = getCachedProfile(account);
-        const avatar = cached?.avatar || '';
-        const name = cached?.name || account || '';
+        const cached = initialAuthor;
+        const avatar = [cached?.avatar, prompt.author_avatar].find(value => typeof value === 'string' && value) || '';
+        const name = initialAuthorName;
 
         // 渲染初始头像
         const avatarHtml = _generateAvatarHtml(avatar, name);
@@ -816,21 +833,23 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
         authorContainer.innerHTML = `${avatarHtml}<span class="swr-name prompt-card__name">${escapeHtml(name)}</span>`;
 
         // 后台静默校对
-        getProfileWithSWR(account, api.getUserProfile, (profile) => {
+        const updateAuthor = (profile) => {
             if (!isCurrent() || !card.isConnected) return;
             const avatarEl = authorContainer.querySelector('.swr-avatar');
             const nameEl = authorContainer.querySelector('.swr-name');
-            if (avatarEl && profile.avatar) {
+            if (avatarEl && typeof profile.avatar === 'string' && profile.avatar) {
                 if (avatarEl.tagName === 'IMG') {
-                    avatarEl.src = profile.avatar;
+                    if (avatarEl.getAttribute('src') !== profile.avatar) avatarEl.src = profile.avatar;
                 } else {
-                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, profile.name || name);
+                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, typeof profile.name === 'string' && profile.name ? profile.name : name);
                 }
             }
-            if (nameEl && profile.name) {
+            if (nameEl && typeof profile.name === 'string' && profile.name && nameEl.textContent !== profile.name) {
                 nameEl.textContent = profile.name;
             }
-        });
+        };
+        const latestCached = getProfileWithSWR(account, api.getUserProfile, updateAuthor);
+        if (latestCached) updateAuthor(latestCached);
     }, 0);
 
     const cover = card.querySelector('img');

前端页面/prompt/提示词详情组件.js

@@ -12,8 +12,9 @@
 // ==========================================
 
 import { api, proxyImages, captureRequestSession, requestCancelManager } from "../core/网络请求API.js";
+import { getPromptPriceState } from "./价格校验.js";
 import { showToast } from "../components/UI交互提示组件.js";
-import { getCoverSandboxHTML, setupImageSandboxEvents } from "../components/图片沙盒组件.js";
+import { getCoverSandboxHTML, setupImageSandboxEvents, cleanupImageSandbox } from "../components/图片沙盒组件.js";
 import { getVideoPlayerHTML, setupVideoPlayerEvents, cleanupVideoPlayer } from "../components/视频播放器组件.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { t, tIfExists } from "../components/用户体验增强.js";
@@ -25,6 +26,8 @@ import { recordView, handleToggleLike, handleToggleFavorite, renderTipBoardHTML
 import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
 import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
 
+import { isConfirmedDedicatedCommentResponse, isDefiniteCommentRejection } from "../social/评论数据工具.js";
+
 const viewContexts = new WeakMap();
 let promptViewSequence = 0;
 const isCurrent = node => !!viewContexts.get(node)?.scope.isCurrent();
@@ -44,10 +47,9 @@ function _generateAvatarHtml(avatar, name, size, extraStyle = '') {
     const initial = (name || 'U')[0].toUpperCase();
     // 🔒 XSS防护：avatar / name 均来自他人可修改的资料（昵称首字母可能是 < ），写入 HTML 前必须转义
     if (avatar) {
-        return `<img class="swr-avatar" src="${escapeHtml(avatar)}" style="width: ${size}px; height: ${size}px; border-radius: 50%; object-fit: cover; ${extraStyle}">`;
+        return `<img class="swr-avatar prompt-detail__avatar ${size === 24 ? 'prompt-detail__avatar--small' : 'prompt-detail__avatar--large'}" alt="" src="${escapeHtml(avatar)}">`;
     }
-    const fontSize = Math.max(9, Math.round(size * 0.4));
-    return `<div class="swr-avatar" style="width: ${size}px; height: ${size}px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: ${fontSize}px; font-weight: bold;">${escapeHtml(initial)}</div>`;
+    return `<div class="swr-avatar prompt-detail__avatar prompt-detail__avatar--initial ${size === 24 ? 'prompt-detail__avatar--small' : 'prompt-detail__avatar--large'}" aria-hidden="true">${escapeHtml(initial)}</div>`;
 }
 
 /**
@@ -58,7 +60,7 @@ function _updateAvatarElement(avatarEl, profile, size, extraStyle = '') {
     if (avatarEl.tagName === 'IMG') {
         avatarEl.src = profile.avatar;
     } else {
-        avatarEl.outerHTML = `<img class="swr-avatar" src="${escapeHtml(profile.avatar)}" style="width: ${size}px; height: ${size}px; border-radius: 50%; object-fit: cover; ${extraStyle}">`;
+        avatarEl.outerHTML = `<img class="swr-avatar prompt-detail__avatar ${size === 24 ? 'prompt-detail__avatar--small' : 'prompt-detail__avatar--large'}" alt="" src="${escapeHtml(profile.avatar)}">`;
     }
 }
 
@@ -67,31 +69,21 @@ function _updateAvatarElement(avatarEl, profile, size, extraStyle = '') {
  */
 export function createPromptDetailView(promptId, currentUser) {
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        color: "#ccc",
-        fontSize: "14px",
-        padding: "0",
-        overflowY: "auto",
-        flex: "1",
-        boxSizing: "border-box"
-    });
+    container.className = "prompt-detail";
 
     container.innerHTML = `
         <!-- 顶部标题栏 -->
-        <div style="display: flex; align-items: center; gap: 10px; padding: 15px; border-bottom: 1px solid #444; background: #1a1a1a;">
-            <button id="btn-back-prompt-detail" style="background: rgba(51,51,51,0.8); border: 1px solid rgba(85,85,85,0.8); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: 0.2s;" onmouseover="this.style.background='#667eea'; this.style.borderColor='#667eea'" onmouseout="this.style.background='rgba(51,51,51,0.8)'; this.style.borderColor='rgba(85,85,85,0.8)'">
+        <div class="prompt-detail__header">
+            <button type="button" id="btn-back-prompt-detail" class="prompt-detail__button">
                 ⬅ ${t('common.back')}
             </button>
-            <span style="font-size: 16px; font-weight: bold; color: #fff;">${t('prompt.detail_title')}</span>
+            <span class="prompt-detail__heading">${t('prompt.detail_title')}</span>
         </div>
 
         <!-- 内容区域 -->
-        <div id="prompt-content" style="flex: 1; overflow-y: auto; padding: 15px;">
-            <div style="text-align: center; padding: 60px; color: #888;">
-                <div style="font-size: 24px; margin-bottom: 10px;">⏳</div>
+        <div id="prompt-content" class="prompt-detail__content">
+            <div class="prompt-detail__state" role="status">
+                <div class="prompt-detail__state-icon" aria-hidden="true">⏳</div>
                 ${t('prompt.loading')}
             </div>
         </div>
@@ -115,6 +107,7 @@ export function createPromptDetailView(promptId, currentUser) {
     viewContexts.set(container, context); viewContexts.set(contentArea, context);
     const handleRouteBack = () => scope.dispose();
     scope.addCleanup(() => {
+        cleanupImageSandbox(contentArea);
         cleanupVideoPlayer(contentArea);
         contentArea.querySelectorAll('audio').forEach(audio => { audio.pause(); audio.removeAttribute('src'); audio.load(); });
         contentArea.replaceChildren(); observer?.disconnect();
@@ -147,6 +140,7 @@ async function loadPromptDetail(container, promptId, currentUser) {
 
     // 先清理旧的视频播放器全局事件（如果存在）
     if (contentArea) {
+        cleanupImageSandbox(contentArea);
         cleanupVideoPlayer(contentArea);
     }
 
@@ -171,8 +165,8 @@ async function loadPromptDetail(container, promptId, currentUser) {
 
     if (!prompt) {
         contentArea.innerHTML = `
-            <div style="text-align: center; padding: 60px; color: #F44336;">
-                <div style="font-size: 24px; margin-bottom: 10px;">⚠️</div>
+            <div class="prompt-detail__state prompt-detail__state--error" role="alert">
+                <div class="prompt-detail__state-icon" aria-hidden="true">⚠️</div>
                 ${t('prompt.not_exist')}
             </div>
         `;
@@ -185,6 +179,7 @@ async function loadPromptDetail(container, promptId, currentUser) {
     // 🔓 判断提示词是否可见（免费/作者/已购买 → prompt_text 已由服务端下发）
     const isOwner = currentUser && currentUser.account === prompt.author;
     const isUnlocked = !fromCache && typeof prompt.prompt_text === "string" && prompt.locked !== true;
+    const priceState = getPromptPriceState(prompt.price);
 
     // 判断是否为视频封面
     const isVideo = prompt.media_type === "video" && prompt.video_url;
@@ -199,9 +194,9 @@ async function loadPromptDetail(container, promptId, currentUser) {
 
     // 🎵 音乐提示词音频播放器（图片+音频方案，仅存在 audio_url 时渲染）
     const audioHTML = prompt.audio_url ? `
-        <div style="margin-top: 12px; padding: 12px; background: #1a1a1a; border: 1px solid #444; border-radius: 8px;">
-            <div style="font-size: 12px; color: #aaa; margin-bottom: 8px;">🎵 ${t('prompt.audio_label')}</div>
-            <audio controls preload="metadata" src="${escapeHtml(prompt.audio_url)}" style="width: 100%; display: block;"></audio>
+        <div class="prompt-detail__audio">
+            <div class="prompt-detail__muted prompt-detail__audio-label">🎵 ${t('prompt.audio_label')}</div>
+            <audio controls preload="metadata" src="${escapeHtml(prompt.audio_url)}" class="prompt-detail__audio-player"></audio>
         </div>` : '';
 
     // 检查当前用户是否已点赞/收藏
@@ -210,100 +205,100 @@ async function loadPromptDetail(container, promptId, currentUser) {
 
     contentArea.innerHTML = `
             <!-- 媒体展示区 -->
-            <div id="media-area" style="margin-bottom: 15px;">
+            <div id="media-area" class="prompt-detail__media">
                 ${mediaHTML}
                 ${audioHTML}
             </div>
 
             <!-- 标题 -->
-            <div style="font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 8px; line-height: 1.4;">
+            <div class="prompt-detail__title">
                 ${escapeHtml(prompt.title)}
             </div>
 
             <!-- 原创标识 -->
             ${prompt.is_original ? `
-            <div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
-                        background: linear-gradient(135deg, #FF6B35, #FF8F00); border-radius: 12px;
-                        font-size: 11px; color: #fff; font-weight: 500; margin-bottom: 12px;">
+            <div class="prompt-detail__badge prompt-detail__badge--original">
                 🎨 ${t('prompt.original_badge')}
             </div>
             ` : ''}
 
             <!-- 分类与价格标签 -->
-            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
-                <span style="display: inline-block; background: rgba(118, 75, 162, 0.25); border: 1px solid rgba(118, 75, 162, 0.5); color: #CE93D8; font-size: 11px; padding: 3px 10px; border-radius: 10px;">${prompt.prompt_type === 'video' ? '🎬' : (prompt.prompt_type === 'music' ? '🎵' : '🎨')} ${escapeHtml(tIfExists('promptcat.' + (prompt.category || ''), prompt.category || ''))}</span>
-                ${prompt.price > 0
-                    ? `<span style="background: linear-gradient(135deg, #FFD700, #FFA000); color: #333; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 10px;">💎 ${prompt.price}</span>`
-                    : `<span style="background: rgba(76, 175, 80, 0.25); color: #4CAF50; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 10px; border: 1px solid rgba(76, 175, 80, 0.5);">${t('prompt.free')}</span>`}
-                ${prompt.owned ? `<span style="background: rgba(33, 150, 243, 0.25); color: #64B5F6; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 10px; border: 1px solid rgba(33, 150, 243, 0.5);">${t('prompt.owned_mark')}</span>` : ''}
+            <div class="prompt-detail__badges">
+                <span class="prompt-detail__badge">${prompt.prompt_type === 'video' ? '🎬' : (prompt.prompt_type === 'music' ? '🎵' : '🎨')} ${escapeHtml(tIfExists('promptcat.' + (prompt.category || ''), prompt.category || ''))}</span>
+                ${priceState !== 'free'
+                    ? `<span class="prompt-detail__badge prompt-detail__badge--price">💎 ${escapeHtml(priceState === 'paid' ? prompt.price : t('common.unknown'))}</span>`
+                    : `<span class="prompt-detail__badge">${t('prompt.free')}</span>`}
+                ${prompt.owned ? `<span class="prompt-detail__badge">${t('prompt.owned_mark')}</span>` : ''}
             </div>
 
             <!-- 🏷️ 标签展示 -->
             ${(Array.isArray(prompt.tags) && prompt.tags.length) ? `
-            <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;">
-                ${prompt.tags.map(tag => `<span style="display: inline-block; background: rgba(0,188,212,0.12); border: 1px solid rgba(0,188,212,0.35); color: #4DD0E1; font-size: 11px; padding: 2px 8px; border-radius: 10px;">#${escapeHtml(tag)}</span>`).join('')}
+            <div class="prompt-detail__tags">
+                ${prompt.tags.map(tag => `<span class="prompt-detail__badge">#${escapeHtml(tag)}</span>`).join('')}
             </div>` : ''}
 
             <!-- 作者信息（SWR 缓存头像） -->
-            <div id="author-row" style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px; background: #1a1a1a; border-radius: 8px; cursor: pointer;">
-                <div class="swr-avatar-container" style="width: 40px; height: 40px;"></div>
-                <div style="flex: 1;">
-                    <div class="swr-name" style="font-size: 14px; font-weight: 500; color: #fff;">${escapeHtml(prompt.author_name || prompt.author)}</div>
-                    <div style="font-size: 11px; color: #888;">${formatTime(prompt.created_at)}</div>
-                </div>
+            <div id="author-row" class="prompt-detail__author">
+                <button type="button" id="btn-author-prompt" class="prompt-detail__author-link">
+                <span class="swr-avatar-container prompt-detail__avatar-slot"></span>
+                <span class="prompt-detail__author-info">
+                    <span class="swr-name prompt-detail__author-name">${escapeHtml(prompt.author_name || prompt.author)}</span>
+                    <span class="prompt-detail__muted prompt-detail__author-time">${escapeHtml(formatTime(prompt.created_at))}</span>
+                </span>
+                </button>
                 ${isOwner ? `
-                <div style="display: flex; gap: 8px;" onclick="event.stopPropagation()">
-                    ${IS_WEB_MODE ? '' : `<button id="btn-edit-prompt" style="background: #2196F3; border: none; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;" title="${t('common.edit')}">✏️</button>`}
-                    <button id="btn-delete-prompt" style="background: #F44336; border: none; color: #fff; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;" title="${t('common.delete')}">🗑️</button>
+                <div class="prompt-detail__author-actions">
+                    ${IS_WEB_MODE ? '' : `<button type="button" id="btn-edit-prompt" class="prompt-detail__button" aria-label="${t('common.edit')}" title="${t('common.edit')}">✏️</button>`}
+                    <button type="button" id="btn-delete-prompt" class="prompt-detail__button prompt-detail__button--danger" aria-label="${t('common.delete')}" title="${t('common.delete')}">🗑️</button>
                 </div>
                 ` : ''}
             </div>
 
             <!-- 简介内容 -->
-            <div style="font-size: 14px; color: #ddd; line-height: 1.8; margin-bottom: 20px; white-space: pre-wrap; word-wrap: break-word;">${escapeHtml((prompt.content || '').trim())}</div>
+            <div class="prompt-detail__description">${escapeHtml((prompt.content || '').trim())}</div>
 
             <!-- 🔑 提示词正文区（付费遮罩/解锁/复制） -->
-            <div id="prompt-text-area" style="margin-bottom: 20px;"></div>
+            <div id="prompt-text-area" class="prompt-detail__text-area"></div>
 
             <!-- 互动按钮栏 -->
-            <div id="interaction-bar" style="display: flex; align-items: center; gap: 15px; padding: 15px 0; border-top: 1px solid var(--border-color, #333); border-bottom: 1px solid var(--border-color, #333);">
-                <button id="btn-like" style="background: ${isLiked ? '#FF5722' : 'var(--comfy-input-bg)'}; border: 1px solid ${isLiked ? '#FF5722' : '#555'}; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
-                    ❤️ <span id="like-count">${prompt.likes || 0}</span>
+            <div id="interaction-bar" class="prompt-detail__interactions">
+                <button type="button" id="btn-like" aria-label="${t('market.like')}" aria-pressed="${isLiked}" class="prompt-detail__button prompt-detail__interaction">
+                    ❤️ <span id="like-count">${escapeHtml(prompt.likes || 0)}</span>
                 </button>
-                <button id="btn-favorite" style="background: ${isFavorited ? '#FFC107' : 'var(--comfy-input-bg)'}; border: 1px solid ${isFavorited ? '#FFC107' : '#555'}; color: ${isFavorited ? '#000' : '#fff'}; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
-                    🔖 <span id="favorite-count">${prompt.favorites || 0}</span>
+                <button type="button" id="btn-favorite" aria-label="${t('market.favorite')}" aria-pressed="${isFavorited}" class="prompt-detail__button prompt-detail__interaction">
+                    🔖 <span id="favorite-count">${escapeHtml(prompt.favorites || 0)}</span>
                 </button>
-                <button id="btn-tip" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+                <button type="button" id="btn-tip" class="prompt-detail__button prompt-detail__interaction">
                     ${t('prompt.tip_author')}
                 </button>
                 <!-- 👀 浏览量统计（纯展示） -->
-                <div style="display: flex; align-items: center; gap: 12px; margin-left: auto; color: #888; font-size: 13px;">
-                    <span style="display: flex; align-items: center; gap: 4px;">🔥 <span id="prompt-view-total">${prompt.views || 0}</span></span>
-                    <span style="display: flex; align-items: center; gap: 4px;">📅 <span id="prompt-view-daily">${prompt.daily_views || 0}</span></span>
+                <div class="prompt-detail__views">
+                    <span class="prompt-detail__view-count">🔥 <span id="prompt-view-total">${escapeHtml(prompt.views || 0)}</span></span>
+                    <span class="prompt-detail__view-count">📅 <span id="prompt-view-daily">${escapeHtml(prompt.daily_views || 0)}</span></span>
                 </div>
             </div>
 
             <!-- 打赏榜单 -->
-            <div id="tip-board-area" style="margin: 15px 0;">
+            <div id="tip-board-area" class="prompt-detail__tips">
                 ${renderCommonTipBoardHTML(prompt.tip_board || [], 5, t('prompt.no_tips'))}
             </div>
 
             <!-- 评论区 -->
-            <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
-                ${t('prompt.comments_title')} <span style="color: #888; font-weight: normal;">(${prompt.comments || 0})</span>
+            <div class="prompt-detail__comments-heading">
+                ${t('prompt.comments_title')} <span class="prompt-detail__muted">(${escapeHtml(prompt.comments || 0)})</span>
             </div>
 
             <!-- 评论输入框 -->
-            <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                <input type="text" id="comment-input" placeholder="${t('prompt.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='#764ba2'" onblur="this.style.borderColor='#444'">
-                <button id="btn-send-comment" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: #fff; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: bold; transition: 0.2s;">
+            <div class="prompt-detail__comment-form">
+                <input type="text" id="comment-input" required aria-label="${escapeHtml(t('prompt.comment_placeholder'))}" placeholder="${t('prompt.comment_placeholder')}" class="prompt-detail__comment-input">
+                <button type="button" id="btn-send-comment" class="prompt-detail__button prompt-detail__button--accent">
                     ${t('common.send')}
                 </button>
             </div>
 
             <!-- 评论列表 -->
-            <div id="comments-list" style="display: flex; flex-direction: column; gap: 10px;">
-                <div style="text-align: center; padding: 20px; color: #888; font-size: 12px;">⏳</div>
+            <div id="comments-list" class="prompt-detail__comments">
+                <div class="prompt-detail__state prompt-detail__state--compact" role="status" aria-label="${t('prompt.loading')}">⏳</div>
             </div>
         `;
 
@@ -349,7 +344,7 @@ async function loadPromptDetail(container, promptId, currentUser) {
         }
 
         // 绑定作者点击
-        contentArea.querySelector("#author-row").onclick = (e) => {
+        contentArea.querySelector("#btn-author-prompt").onclick = (e) => {
             if (!isCurrent(contentArea)) return;
             if (e.target.id === 'btn-edit-prompt' || e.target.id === 'btn-delete-prompt') return;
             openOtherUserProfileModal(prompt.author, currentUser);
@@ -402,35 +397,36 @@ function renderPromptTextArea(contentArea, prompt, currentUser, isUnlocked) {
     if (!isCurrent(contentArea)) return;
     const textArea = contentArea.querySelector("#prompt-text-area");
     if (!textArea) return;
+    const priceState = getPromptPriceState(prompt.price);
 
     if (isUnlocked && prompt.prompt_text) {
         // ✅ 已解锁：展示正文 + 一键复制
         textArea.innerHTML = `
-            <div style="background: #1a1a1a; border: 1px solid rgba(118, 75, 162, 0.5); border-radius: 8px; overflow: hidden;">
-                <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #333; background: rgba(118, 75, 162, 0.15);">
-                    <span style="font-size: 13px; font-weight: bold; color: #CE93D8;">🔑 ${t('prompt.text_label')}</span>
-                    <button id="btn-copy-prompt" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; color: #fff; padding: 6px 16px; border-radius: 16px; cursor: pointer; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 4px;">
+            <div class="prompt-detail__text-box">
+                <div class="prompt-detail__text-header">
+                    <span class="prompt-detail__text-label">🔑 ${t('prompt.text_label')}</span>
+                    <button type="button" id="btn-copy-prompt" class="prompt-detail__button prompt-detail__button--accent">
                         📋 ${t('prompt.copy')}
                     </button>
                 </div>
-                <div style="padding: 14px; font-size: 13px; color: #ddd; line-height: 1.7; font-family: monospace; white-space: pre-wrap; word-wrap: break-word; user-select: text;">${escapeHtml(prompt.prompt_text)}</div>
+                <div class="prompt-detail__text-body">${escapeHtml(prompt.prompt_text)}</div>
             </div>
         `;
         textArea.querySelector("#btn-copy-prompt").onclick = () => {
             if (isCurrent(contentArea)) copyToClipboard(prompt.prompt_text, textArea.querySelector("#btn-copy-prompt"), () => isCurrent(contentArea));
         };
-    } else if (prompt.price > 0) {
+    } else if (priceState === 'paid') {
         // 🔒 付费遮罩：模糊预览 + 解锁按钮
         textArea.innerHTML = `
-            <div style="position: relative; min-height: 240px; background: #1a1a1a; border: 1px solid #444; border-radius: 8px; overflow: hidden;">
-                <div style="padding: 14px; min-height: 240px; box-sizing: border-box; font-size: 13px; color: #ddd; line-height: 1.7; font-family: monospace; filter: blur(8px); user-select: none; pointer-events: none;">
+            <div class="prompt-detail__locked">
+                <div class="prompt-detail__locked-preview" aria-hidden="true">
                     ${escapeHtml((prompt.content || '') + '\n' + (prompt.content || ''))}
                 </div>
-                <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,0.35);">
-                    <div style="font-size: 28px;">🔒</div>
-                    <div style="font-size: 14px; font-weight: bold; color: #fff;">${t('prompt.locked_title')}</div>
-                    <div style="font-size: 12px; color: #bbb; max-width: 80%; text-align: center;">${t('prompt.locked_desc')}</div>
-                    <button id="btn-unlock-prompt" style="background: linear-gradient(135deg, #FFD700, #FFA000); border: none; color: #333; padding: 10px 28px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: bold; display: flex; align-items: center; gap: 6px; transition: 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
+                <div class="prompt-detail__locked-overlay">
+                    <div class="prompt-detail__lock-icon" aria-hidden="true">🔒</div>
+                    <div class="prompt-detail__lock-title">${t('prompt.locked_title')}</div>
+                    <div class="prompt-detail__muted prompt-detail__locked-description">${t('prompt.locked_desc')}</div>
+                    <button type="button" id="btn-unlock-prompt" class="prompt-detail__button prompt-detail__button--gold">
                         💎 ${t('prompt.unlock', { price: prompt.price })}
                     </button>
                 </div>
@@ -439,6 +435,12 @@ function renderPromptTextArea(contentArea, prompt, currentUser, isUnlocked) {
         textArea.querySelector("#btn-unlock-prompt").onclick = () => {
             showPurchaseConfirmDialog(contentArea, prompt, currentUser);
         };
+    } else if (priceState === 'unknown') {
+        const message = document.createElement('p');
+        message.className = 'prompt-detail__muted';
+        message.setAttribute('role', 'status');
+        message.textContent = t('prompt.price_unknown');
+        textArea.replaceChildren(message);
     }
 }
 
@@ -526,18 +528,18 @@ async function showPurchaseConfirmDialog(contentArea, prompt, currentUser) {
     }
 
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.className = "prompt-detail-dialog";
     content.innerHTML = `
-        <div style="text-align: center;">
-            <div style="font-size: 36px; margin-bottom: 12px;">💎</div>
-            <div style="font-size: 15px; font-weight: bold; color: #fff; margin-bottom: 10px;">${t('prompt.purchase_confirm_title')}</div>
-            <div style="font-size: 13px; color: #aaa; margin-bottom: 15px; line-height: 1.6;">${t('prompt.purchase_confirm_desc', { price: expectedPrice, title: escapeHtml(purchaseTitle) })}</div>
-            <div style="margin-bottom: 15px; background: rgba(255,152,0,0.1); padding: 10px; border-radius: 4px; border: 1px solid #FF9800;">
-                ${t('prompt.purchase_balance')}: <strong style="color:#FF9800;">${balance}</strong>
+        <div class="prompt-detail-dialog__center">
+            <div class="prompt-detail-dialog__icon" aria-hidden="true">💎</div>
+            <div class="prompt-detail-dialog__title">${t('prompt.purchase_confirm_title')}</div>
+            <div class="prompt-detail-dialog__description">${t('prompt.purchase_confirm_desc', { price: expectedPrice, title: escapeHtml(purchaseTitle) })}</div>
+            <div class="prompt-detail-dialog__balance">
+                ${t('prompt.purchase_balance')}: <strong class="prompt-detail-dialog__value">${balance}</strong>
             </div>
-            <div style="display: flex; gap: 10px;">
-                <button id="purchase-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="purchase-confirm" style="flex: 1; background: linear-gradient(135deg, #FFD700, #FFA000); border: none; color: #333; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">💎 ${t('prompt.unlock', { price: expectedPrice })}</button>
+            <div class="prompt-detail-dialog__actions">
+                <button type="button" id="purchase-cancel" class="prompt-detail__button">${t('common.cancel')}</button>
+                <button type="button" id="purchase-confirm" class="prompt-detail__button prompt-detail__button--gold">💎 ${t('prompt.unlock', { price: expectedPrice })}</button>
             </div>
         </div>
     `;
@@ -644,19 +646,19 @@ async function showTipDialog(prompt, currentUser, container) {
     }
 
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.className = "prompt-detail-dialog";
     content.innerHTML = `
-        <div style="margin-bottom: 12px; background: rgba(255,152,0,0.1); padding: 10px; border-radius: 4px; border: 1px solid #FF9800; text-align: center;">
-            ${t('wallet.current_balance')}: <strong style="color:#FF9800;">${balance}</strong> ${t('wallet.credits')}
+        <div class="prompt-detail-dialog__balance">
+            ${t('wallet.current_balance')}: <strong class="prompt-detail-dialog__value">${balance}</strong> ${t('wallet.credits')}
         </div>
-        <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>
+        <div class="prompt-detail__tip-amounts">
+            <button type="button" class="tip-amount prompt-detail__button" data-amount="10">10 ${t('task.points')}</button>
+            <button type="button" class="tip-amount prompt-detail__button" data-amount="50">50 ${t('task.points')}</button>
+            <button type="button" class="tip-amount prompt-detail__button" data-amount="100">100 ${t('task.points')}</button>
+            <button type="button" class="tip-amount prompt-detail__button" data-amount="500">500 ${t('task.points')}</button>
         </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>
+        <div class="prompt-detail-dialog__actions">
+            <button type="button" id="tip-cancel" class="prompt-detail__button">${t('common.cancel')}</button>
         </div>
     `;
 
@@ -705,6 +707,13 @@ async function loadComments(container, promptId, currentUser) {
     const sendBtn = container.querySelector("#btn-send-comment");
     if (!isCurrent(container)) return;
     const context = viewContexts.get(container);
+    const account = typeof currentUser === "string" ? currentUser : currentUser?.account;
+    let submission = context.commentSubmission;
+    if (!submission || submission.input !== commentInput || submission.button !== sendBtn || submission.account !== account) {
+        submission = context.commentSubmission = { input: commentInput, button: sendBtn, account, phase: "idle", bound: false };
+    }
+    const submissionCurrent = () => isCurrent(container) && context.commentSubmission === submission
+        && commentInput.isConnected && sendBtn.isConnected;
     const generation = context.commentGeneration = (context.commentGeneration || 0) + 1;
     const current = () => isCurrent(container) && context.commentGeneration === generation && commentsList.isConnected;
 
@@ -718,7 +727,7 @@ async function loadComments(container, promptId, currentUser) {
 
         if (comments.length === 0) {
             commentsList.innerHTML = `
-                <div style="text-align: center; padding: 30px; color: #666; font-size: 13px;">
+                <div class="prompt-detail__state prompt-detail__state--compact" role="status">
                     ${t('prompt.no_comments')}
                 </div>
             `;
@@ -732,13 +741,13 @@ async function loadComments(container, promptId, currentUser) {
                 const avatarHtml = _generateAvatarHtml(avatar, name, 24, 'background: var(--comfy-input-bg);');
 
                 return `
-                    <div id="comment-${idx}" data-account="${escapeHtml(c.author)}" style="background: #1a1a1a; padding: 12px; border-radius: 8px;">
-                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                    <div id="comment-${idx}" data-account="${escapeHtml(c.author)}" class="prompt-detail__comment">
+                        <div class="prompt-detail__comment-header">
                             <div class="swr-avatar-container">${avatarHtml}</div>
-                            <span class="swr-name" style="font-size: 13px; color: #fff; font-weight: 500;">${escapeHtml(name)}</span>
-                            <span style="font-size: 11px; color: #888; margin-left: auto;">${formatTime(c.created_at)}</span>
+                            <span class="swr-name prompt-detail__comment-name">${escapeHtml(name)}</span>
+                            <span class="prompt-detail__muted prompt-detail__comment-time">${escapeHtml(formatTime(c.created_at))}</span>
                         </div>
-                        <div style="font-size: 13px; color: #ddd; line-height: 1.5; padding-left: 32px;">
+                        <div class="prompt-detail__comment-body">
                             ${escapeHtml(c.content)}
                         </div>
                     </div>
@@ -762,45 +771,71 @@ async function loadComments(container, promptId, currentUser) {
     } catch (err) {
         if (!current()) return;
         commentsList.innerHTML = `
-            <div style="text-align: center; padding: 20px; color: #F44336; font-size: 12px;">
+            <div class="prompt-detail__state prompt-detail__state--compact prompt-detail__state--error" role="alert">
                 ${t('prompt.load_failed')}
             </div>
         `;
     }
 
-    // 发送评论
+    if (submission.bound || !submissionCurrent()) return;
+    submission.bound = true;
+    sendBtn.disabled = false;
+    commentInput.readOnly = false;
+    sendBtn.removeAttribute("aria-busy");
+    commentInput.oninput = () => {
+        if (submissionCurrent()) commentInput.removeAttribute("aria-invalid");
+    };
     sendBtn.onclick = async () => {
-        if (!isCurrent(container) || !sendBtn.isConnected || sendBtn.disabled) return;
-        if (!currentUser) {
+        if (!submissionCurrent() || submission.phase !== "idle") return;
+        if (typeof account !== "string" || !account.trim()) {
             showToast(t('auth.login_required'), "warning");
             return;
         }
-        const content = commentInput.value.trim();
+        const originalInput = commentInput.value, content = originalInput.trim();
         if (!content) {
+            commentInput.setAttribute("aria-invalid", "true");
+            commentInput.focus();
             showToast(t('prompt.comment_required'), "warning");
             return;
         }
+        commentInput.removeAttribute("aria-invalid");
+        submission.phase = "submitting";
+        sendBtn.disabled = true;
+        sendBtn.setAttribute("aria-busy", "true");
+        sendBtn.textContent = t('common.sending');
         try {
-            sendBtn.disabled = true;
-            sendBtn.textContent = t('common.sending');
             const result = await api.addPromptComment(promptId, content);
-            if (!isCurrent(container) || !sendBtn.isConnected) return;
-            if (result?.status !== "success") throw new Error();
-            if (commentInput.value.trim() === content) commentInput.value = "";
+            if (!submissionCurrent()) return;
+            if (!isConfirmedDedicatedCommentResponse(result, account, content)) throw new Error("Unconfirmed comment");
+            submission.phase = "committed";
+            if (commentInput.value === originalInput) commentInput.value = "";
             showToast(t('prompt.comment_success'), "success");
-            loadComments(container, promptId, currentUser);
+            await loadComments(container, promptId, currentUser);
+            if (submissionCurrent()) submission.phase = "idle";
         } catch (err) {
-            if (isCurrent(container) && sendBtn.isConnected) showToast(t('prompt.comment_failed'), "error");
+            if (!submissionCurrent()) return;
+            if (submission.phase === "committed") {
+                try { showToast(t('social.comment_refresh_required'), "warning"); } catch (_) {}
+                return;
+            }
+            const rejected = isDefiniteCommentRejection(err);
+            submission.phase = rejected ? "idle" : "unconfirmed";
+            showToast(t(rejected ? 'prompt.comment_failed' : 'social.comment_unconfirmed'), rejected ? "error" : "warning");
         } finally {
-            if (!isCurrent(container) || !sendBtn.isConnected) return;
-            sendBtn.disabled = false;
-            sendBtn.textContent = t('common.send');
+            if (!submissionCurrent()) return;
+            sendBtn.disabled = submission.phase !== "idle";
+            commentInput.readOnly = submission.phase !== "idle";
+            sendBtn.removeAttribute("aria-busy");
+            sendBtn.textContent = t(submission.phase === "unconfirmed" ? 'social.comment_pending' : 'common.send');
         }
     };
 
     // 回车发送
     commentInput.onkeydown = (e) => {
-        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        if (isCurrent(container) && !e.defaultPrevented && e.key === "Enter"
+            && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey
+            && !e.isComposing && e.keyCode !== 229 && !e.repeat
+            && !commentInput.disabled && !commentInput.readOnly) {
             e.preventDefault();
             sendBtn.click();
         }
@@ -813,15 +848,15 @@ async function loadComments(container, promptId, currentUser) {
 function showDeleteConfirmDialog(prompt, container) {
     if (!isCurrent(container)) return;
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.className = "prompt-detail-dialog";
     content.innerHTML = `
-        <div style="text-align: center;">
-            <div style="font-size: 40px; margin-bottom: 15px;">⚠️</div>
-            <div style="font-size: 16px; font-weight: bold; color: #fff; margin-bottom: 10px;">${t('prompt.delete_confirm')}</div>
-            <div style="font-size: 13px; color: #888; margin-bottom: 20px;">${escapeHtml(prompt.title)}</div>
-            <div style="display: flex; gap: 10px;">
-                <button id="delete-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-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 class="prompt-detail-dialog__center">
+            <div class="prompt-detail-dialog__icon" aria-hidden="true">⚠️</div>
+            <div class="prompt-detail-dialog__title">${t('prompt.delete_confirm')}</div>
+            <div class="prompt-detail-dialog__description">${escapeHtml(prompt.title)}</div>
+            <div class="prompt-detail-dialog__actions">
+                <button type="button" id="delete-cancel" class="prompt-detail__button">${t('common.cancel')}</button>
+                <button type="button" id="delete-confirm" class="prompt-detail__button prompt-detail__button--danger">${t('common.delete')}</button>
             </div>
         </div>
     `;

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

@@ -455,7 +455,10 @@ export function openChatModal(currentUser, targetAccount = null) {
 
     // 🚀 P1-2: Enter 发送，Shift+Enter 换行
     inputField.onkeydown = (e) => {
-        if (e.key === "Enter" && !e.shiftKey && !e.isComposing) {
+        if (scope.isCurrent() && !e.defaultPrevented && e.key === "Enter"
+            && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey
+            && !e.isComposing && e.keyCode !== 229 && !e.repeat
+            && !inputField.disabled && !inputField.readOnly) {
             e.preventDefault();
             sendBtn.click();
         }

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

@@ -18,3 +18,12 @@ export function isConfirmedCommentDeletion(response) {
 export function isDefiniteCommentRejection(error) {
     return Number.isInteger(error?.status) && error.status >= 400 && error.status < 500 && error.status !== 408;
 }
+
+export function isConfirmedDedicatedCommentResponse(response, account, content) {
+    const data = response?.data;
+    return typeof account === 'string' && !!account.trim()
+        && typeof content === 'string' && !!content.trim()
+        && response?.status === 'success' && !!data && typeof data === 'object' && !Array.isArray(data)
+        && typeof data.id === 'string' && !!data.id.trim()
+        && data.author === account && data.content === content;
+}

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

@@ -212,10 +212,11 @@ export function createTasksView(currentUser, keyword = "") {
                 sorted.sort((a, b) => (b.daily_views || 0) - (a.daily_views || 0));
                 break;
             case "price":
-                sorted.sort((a, b) => (b.price || 0) - (a.price || 0));
+                sorted.sort((a, b) => (b.total_price || 0) - (a.total_price || 0));
                 break;
             case "deadline":
-                sorted.sort((a, b) => (a.deadline || Infinity) - (b.deadline || Infinity));
+                const deadlineTime = value => parseTaskDeadline(value) ?? Infinity;
+                sorted.sort((a, b) => deadlineTime(a.deadline) - deadlineTime(b.deadline));
                 break;
             default: // latest
                 sorted.sort((a, b) => (b.created_at || 0) - (a.created_at || 0));
@@ -353,6 +354,7 @@ export function createTasksView(currentUser, keyword = "") {
     // 从缓存渲染任务列表
     const renderTasksFromCache = (tasks) => {
         firstPageReady = true;
+        const restoreFocus = cardNavigation.captureListFocus(tasksList);
         tasksList.innerHTML = "";
         
         // 🔍 搜索过滤
@@ -366,6 +368,7 @@ export function createTasksView(currentUser, keyword = "") {
                 tasksList.innerHTML = _renderNoTasksView();
                 loadMoreWrapper.style.display = "none";
             }
+            restoreFocus();
             return;
         }
         
@@ -390,6 +393,7 @@ export function createTasksView(currentUser, keyword = "") {
         } else {
             loadMoreWrapper.style.display = "none";
         }
+        restoreFocus();
     };
     
     // 后台静默更新
@@ -450,10 +454,20 @@ export function createTasksView(currentUser, keyword = "") {
     const _tasksDataChanged = (oldData, newData) => {
         if (!oldData || !newData) return true;
         if (oldData.length !== newData.length) return true;
-        const checkCount = Math.min(10, oldData.length);
+        const checkCount = oldData.length;
+        const contentFields = ["title", "description", "total_price", "deadline", "is_overdue", "publisher", "publisher_name", "created_at"];
+        const mediaFields = ["publisher_avatar"];
+        const normalizedImage = value => typeof value === 'string'
+            ? proxyImages({ cover_image: value }).cover_image : value;
         for (let i = 0; i < checkCount; i++) {
             if (oldData[i].id !== newData[i].id) return true;
             if (oldData[i].status !== newData[i].status) return true;
+            for (const field of contentFields) {
+                if (!Object.is(oldData[i][field], newData[i][field])) return true;
+            }
+            for (const field of mediaFields) {
+                if (!Object.is(normalizedImage(oldData[i][field]), normalizedImage(newData[i][field]))) return true;
+            }
             for (const field of COMPARE_FIELDS) {
                 if ((oldData[i][field] || 0) !== (newData[i][field] || 0)) return true;
             }
@@ -561,6 +575,9 @@ export function createTasksView(currentUser, keyword = "") {
 function createTaskCard(task, currentUser = currentUserCache, isCurrent = () => true, captureNavigation = () => isCurrent) {
     const card = document.createElement("div");
     card.className = "task-card";
+    if (typeof task.id === 'string' || (typeof task.id === 'number' && Number.isFinite(task.id))) {
+        card._rankingListId = String(task.id);
+    }
     card.setAttribute("role", "button");
     card.tabIndex = 0;
     
@@ -583,7 +600,7 @@ function createTaskCard(task, currentUser = currentUserCache, isCurrent = () =>
     const deadline = formatDeadline(task.deadline);
     
     // 检查是否逾期（进行中但超过截止日期）
-    const isOverdue = task.is_overdue || (task.status === "in_progress" && task.deadline && task.deadline < new Date().toISOString().slice(0, 10));
+    const isOverdue = task.is_overdue === true || (task.status === "in_progress" && parseTaskDeadline(task.deadline) != null && task.deadline.slice(0, 10) < new Date().toISOString().slice(0, 10));
     const overdueTag = isOverdue ? `<span class="task-card__overdue">${t('task.overdue')}</span>` : "";
     
     // 过期卡片样式
@@ -591,6 +608,10 @@ function createTaskCard(task, currentUser = currentUserCache, isCurrent = () =>
         card.classList.add("task-card--stale");
     }
     
+    const initialAuthor = isCurrent() && typeof task.publisher === 'string' ? getCachedProfile(task.publisher) : null;
+    const initialAuthorName = [initialAuthor?.name, task.publisher_name, task.publisher].find(value => typeof value === 'string' && value) || '';
+    const DEFAULT_AVATAR_SVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23333'/%3E%3Ccircle cx='18' cy='14' r='6' fill='%23666'/%3E%3Cpath d='M6 32c0-6.6 5.4-12 12-12s12 5.4 12 12' fill='%23666'/%3E%3C/svg%3E";
+
     card.innerHTML = `
         <!-- 顶部：状态 + 价格 -->
         <div class="task-card__header">
@@ -618,7 +639,7 @@ function createTaskCard(task, currentUser = currentUserCache, isCurrent = () =>
         <!-- 底部信息 -->
         <div class="task-card__footer">
             <!-- 发布者（SWR 缓存头像） -->
-            <div class="task-card__author"></div>
+            <div class="task-card__author"><img class="swr-avatar task-card__avatar" alt="" src="${escapeHtml(DEFAULT_AVATAR_SVG)}"><span class="swr-name">${escapeHtml(initialAuthorName)}</span></div>
             
             <!-- 截止日期 + 申请人数 + 访问量 + 点赞 + 收藏 -->
             <div class="task-card__stats">
@@ -638,12 +659,10 @@ function createTaskCard(task, currentUser = currentUserCache, isCurrent = () =>
         if (!authorContainer) return;
         
         const account = task.publisher;
-        const cached = getCachedProfile(account);
-        const avatar = cached?.avatar || task.publisher_avatar || '';
-        const name = cached?.name || task.publisher_name || account || '';
+        const cached = initialAuthor;
+        const avatar = [cached?.avatar, task.publisher_avatar].find(value => typeof value === 'string' && value) || '';
+        const name = initialAuthorName;
         
-        // 内联 SVG 默认头像（用户剪影图标）
-        const DEFAULT_AVATAR_SVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='18' fill='%23333'/%3E%3Ccircle cx='18' cy='14' r='6' fill='%23666'/%3E%3Cpath d='M6 32c0-6.6 5.4-12 12-12s12 5.4 12 12' fill='%23666'/%3E%3C/svg%3E";
         
         // 渲染头像（始终使用 img 标签）
         const avatarSrc = avatar || DEFAULT_AVATAR_SVG;
@@ -653,17 +672,19 @@ function createTaskCard(task, currentUser = currentUserCache, isCurrent = () =>
         authorContainer.innerHTML = `${avatarHtml}<span class="swr-name">${escapeHtml(name)}</span>`;
         
         // 后台静默校对
-        getProfileWithSWR(account, api.getUserProfile, (profile) => {
+        const updateAuthor = (profile) => {
             if (!isCurrent() || !card.isConnected) return;
             const avatarEl = authorContainer.querySelector('.swr-avatar');
             const nameEl = authorContainer.querySelector('.swr-name');
-            if (avatarEl && profile.avatar) {
-                avatarEl.src = profile.avatar;
+            if (avatarEl && typeof profile.avatar === 'string' && profile.avatar) {
+                if (avatarEl.getAttribute('src') !== profile.avatar) avatarEl.src = profile.avatar;
             }
-            if (nameEl && profile.name) {
+            if (nameEl && typeof profile.name === 'string' && profile.name && nameEl.textContent !== profile.name) {
                 nameEl.textContent = profile.name;
             }
-        });
+        };
+        const latestCached = getProfileWithSWR(account, api.getUserProfile, updateAuthor);
+        if (latestCached) updateAuthor(latestCached);
     }, 0);
     
     // 点击进入详情；捕获创建视图的用户和点击时的导航范围。
@@ -697,26 +718,42 @@ function createTaskCard(task, currentUser = currentUserCache, isCurrent = () =>
     return card;
 }
 
+function parseTaskDeadline(value) {
+    if (typeof value !== 'string' || value.trim() !== value ||
+        !/^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/.test(value)) return null;
+    const year = Number(value.slice(0, 4));
+    const month = Number(value.slice(5, 7));
+    const day = Number(value.slice(8, 10));
+    if (year < 1 || month < 1 || month > 12 || day < 1) return null;
+    const leap = year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0);
+    const lastDay = month === 2 ? (leap ? 29 : 28) : ([4, 6, 9, 11].includes(month) ? 30 : 31);
+    if (day > lastDay) return null;
+    const time = Date.parse(value);
+    return Number.isFinite(time) ? time : null;
+}
+
 /**
  * 📅 格式化截止日期
  */
 function formatDeadline(deadline) {
-    if (!deadline) return t('time.unlimited');
+    if (deadline == null || deadline === '') return t('time.unlimited');
+    const timestamp = parseTaskDeadline(deadline);
+    if (timestamp == null) return t('common.unknown');
     
     try {
-        const date = new Date(deadline);
+        const day = deadline.slice(0, 10);
         const now = new Date();
-        const diff = date - now;
-        
-        if (diff < 0) return t('time.deadline_ended');
-        
-        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+        const today = new Date(0);
+        today.setUTCFullYear(now.getFullYear(), now.getMonth(), now.getDate());
+        const days = Math.round((Date.parse(day) - today.getTime()) / (1000 * 60 * 60 * 24));
+        if (!Number.isFinite(days)) return t('common.unknown');
+        if (days < 0) return t('time.deadline_ended');
         if (days === 0) return t('time.deadline_today');
         if (days === 1) return t('time.deadline_tomorrow');
         if (days < 7) return t('time.deadline_days', { n: days });
         
-        return `${date.getMonth() + 1}/${date.getDate()}`;
+        return `${Number(day.slice(5, 7))}/${Number(day.slice(8, 10))}`;
     } catch {
-        return deadline;
+        return t('common.unknown');
     }
 }

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

@@ -16,7 +16,8 @@ import { API, CACHE, PLACEHOLDERS, TASK_LIMITS, getCachedProfile, getProfileWith
 import { removeCache, findInListCache, requireListResponseData } from "../components/性能优化工具.js";
 import { globalModal } from "../components/全局弹窗管理器.js";
 import { compressImageForUpload } from "../market/发布内容_提交引擎.js";
-import { getCoverSandboxHTML, setupImageSandboxEvents } from "../components/图片沙盒组件.js";
+import { getCoverSandboxHTML, setupImageSandboxEvents, cleanupImageSandbox } from "../components/图片沙盒组件.js";
+import { openChatModal } from "../social/私信聊天组件.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { recordView, handleToggleLike, handleToggleFavorite, renderTipBoardHTML as renderCommonTipBoardHTML, escapeHtml } from "../components/互动工具函数.js";
 
@@ -27,6 +28,7 @@ const taskCommentStates = new WeakMap();
 
 function openTaskModal(scope, title, content, options) {
     if (scope && !scope.isCurrent()) return;
+    content.classList.add("task-modal");
     globalModal.openModal(title, content, options);
     const modal = globalModal.activeModals.at(-1);
     const release = scope?.addCleanup(() => globalModal.closeModal(modal));
@@ -87,6 +89,7 @@ export function createTaskDetailView(taskId, currentUser) {
     });
     scope.componentId = componentId;
     scope.root = container;
+    scope.addCleanup(() => cleanupImageSandbox(container));
     container._taskScope = scope;
     container.querySelector("#task-content")._taskScope = scope;
     container._cleanup = () => {
@@ -187,7 +190,8 @@ function renderTaskDetail(contentEl, task, currentUser, preview = false) {
         submitted: { bg: "#FF9800", textKey: "task.status_submitted" },
         completed: { bg: "#9E9E9E", textKey: "task.status_completed" },
         disputed: { bg: "#F44336", textKey: "task.status_disputed" },
-        cancelled: { bg: "#757575", textKey: "task.status_cancelled" }
+        cancelled: { bg: "#757575", textKey: "task.status_cancelled" },
+        expired: { bg: "#757575", textKey: "task.status_expired" }
     };
     
     const status = Object.prototype.hasOwnProperty.call(statusStyles, task.status)
@@ -216,123 +220,124 @@ function renderTaskDetail(contentEl, task, currentUser, preview = false) {
     const isLiked = Array.isArray(task.liked_by) && task.liked_by.includes(currentAccount);
     const isFavorited = Array.isArray(task.favorited_by) && task.favorited_by.includes(currentAccount);
     
+    cleanupImageSandbox(contentEl);
     contentEl.innerHTML = `
         <!-- 状态 + 价格 -->
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
-            <span style="background: ${status.bg}; color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: bold;">
+        <div class="task-detail__summary">
+            <span class="task-detail__status" data-status="${escapeHtml(task.status)}">
                 ${statusText}
             </span>
-            <div style="text-align: right;">
-                <div style="color: #FF9800; font-size: 20px; font-weight: bold;">💰 ${escapeHtml(task.total_price)} ${t('common.credits')}</div>
-                <div style="font-size: 11px; color: #888;">${t('task.deposit')} ${escapeHtml(task.deposit_ratio)}%（${escapeHtml(task.deposit_amount)} ${t('common.credits')}）</div>
+            <div class="task-detail__price-align">
+                <div class="task-detail__price">💰 ${escapeHtml(task.total_price)} ${t('common.credits')}</div>
+                <div class="task-detail__deposit">${t('task.deposit')} ${escapeHtml(task.deposit_ratio)}%（${escapeHtml(task.deposit_amount)} ${t('common.credits')}）</div>
             </div>
         </div>
         
         <!-- 标题 -->
-        <h2 style="font-size: 18px; font-weight: bold; color: #fff; margin: 0 0 15px 0; line-height: 1.4;">
+        <h2 class="task-detail__title">
             ${escapeHtml(task.title)}
         </h2>
         
         <!-- 发布者信息 -->
-        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding: 10px; background: var(--comfy-menu-bg); border-radius: 8px;">
+        <div class="task-detail__publisher">
             <img src="${escapeHtml(task.publisher_avatar || PLACEHOLDERS.AVATAR_SMALL)}"
-                 style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-color, #333); cursor: pointer;" id="publisher-avatar">
-            <div style="flex: 1;">
-                <div style="color: #fff; font-size: 14px; font-weight: 500;">${escapeHtml(task.publisher_name || task.publisher)}</div>
-                <div style="color: #888; font-size: 11px;">${t('task.published_at')} ${formatTime(task.created_at)}</div>
+                 class="task-detail__avatar-main" id="publisher-avatar" alt="">
+            <div class="task-detail__grow">
+                <div class="task-detail__publisher-name">${escapeHtml(task.publisher_name || task.publisher)}</div>
+                <div class="task-detail__timestamp">${t('task.published_at')} ${formatTime(task.created_at)}</div>
             </div>
             ${isPublisher && ["open", "in_progress", "submitted"].includes(task.status) ? `
-            <div style="display: flex; gap: 8px;">
-                ${IS_WEB_MODE ? '' : `<button id="btn-edit-task" style="background: #2196F3; border: none; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;" title="${t('common.edit')}">✏️ ${t('common.edit')}</button>`}
+            <div class="task-detail__compact-actions">
+                ${IS_WEB_MODE ? '' : `<button type="button" id="btn-edit-task" class="task-detail__edit" title="${t('common.edit')}">✏️ ${t('common.edit')}</button>`}
                 ${task.status === "open" ? `
-                <button id="btn-delete-task" style="background: #F44336; border: none; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;" title="${t('common.delete')}">🗑️ ${t('common.delete')}</button>
+                <button type="button" id="btn-delete-task" class="task-detail__delete" title="${t('common.delete')}">🗑️ ${t('common.delete')}</button>
                 ` : ''}
             </div>
             ` : ''}
             ${!isPublisher && currentUser ? `
-                <button id="btn-chat-publisher" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;">
+                <button type="button" id="btn-chat-publisher" class="task-detail__chat">
                     💬 ${t('common.message')}
                 </button>
             ` : ""}
         </div>
         
         <!-- 👀 浏览量统计 -->
-        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding: 10px; background: #1a1a1a; border-radius: 8px; color: #888; font-size: 12px;">
-            <span style="display: flex; align-items: center; gap: 4px;">${t('task.view_total')}: <span id="task-view-total" style="color: #fff; font-weight: 500;">${escapeHtml(task.views || 0)}</span></span>
-            <span style="display: flex; align-items: center; gap: 4px;">${t('task.view_today')}: <span id="task-view-daily" style="color: #fff; font-weight: 500;">${escapeHtml(task.daily_views || 0)}</span></span>
+        <div class="task-detail__stats">
+            <span class="task-detail__stat">${t('task.view_total')}: <span id="task-view-total" class="task-detail__value">${escapeHtml(task.views || 0)}</span></span>
+            <span class="task-detail__stat">${t('task.view_today')}: <span id="task-view-daily" class="task-detail__value">${escapeHtml(task.daily_views || 0)}</span></span>
         </div>
         
         <!-- 截止日期 -->
-        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 15px; padding: 10px; background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.3); border-radius: 8px;">
-            <span style="font-size: 18px;">⏰</span>
+        <div class="task-detail__deadline">
+            <span class="task-detail__icon">⏰</span>
             <div>
-                <div style="color: #FF9800; font-size: 13px; font-weight: bold;">${t('task.deadline')}</div>
-                <div style="color: #fff; font-size: 14px;">${formatDeadline(task.deadline)}</div>
+                <div class="task-detail__deadline-title">${t('task.deadline')}</div>
+                <div class="task-detail__deadline-value">${formatDeadline(task.deadline)}</div>
             </div>
         </div>
         
         <!-- 任务描述 -->
-        <div style="margin-bottom: 20px;">
-            <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 8px;">📄 ${t('task.description')}</div>
-            <div style="color: #ccc; font-size: 13px; line-height: 1.6; white-space: pre-wrap; background: var(--comfy-menu-bg); padding: 12px; border-radius: 8px;">
+        <div class="task-detail__section">
+            <div class="task-detail__heading">📄 ${t('task.description')}</div>
+            <div class="task-detail__prose">
 ${escapeHtml(task.description)}</div>
         </div>
         
         <!-- 参考图片 -->
         ${referenceImages.length > 0 ? `
-            <div style="margin-bottom: 20px;" class="ref-images-sandbox">
-                <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 8px;">🖼️ ${t('task.reference_images')}</div>
-                <div style="--sandbox-title-display: none">
-                    ${getCoverSandboxHTML(referenceImages, true).replace(/<div style="font-size: 12px[^>]*>[^<]*<\/div>/, '')}
+            <div class="task-detail__section ref-images-sandbox" >
+                <div class="task-detail__heading">🖼️ ${t('task.reference_images')}</div>
+                <div class="task-detail__gallery-inner">
+                    ${getCoverSandboxHTML(referenceImages, true)}
                 </div>
             </div>
         ` : ""}
         
         <!-- 参考链接 -->
         ${safeReferenceLink ? `
-            <div style="margin-bottom: 20px;">
-                <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 8px;">🔗 ${t('task.reference_link')}</div>
-                <a href="${escapeHtml(safeReferenceLink)}" target="_blank" rel="noopener noreferrer" style="color: #2196F3; font-size: 13px; word-break: break-all;">
+            <div class="task-detail__section">
+                <div class="task-detail__heading">🔗 ${t('task.reference_link')}</div>
+                <a href="${escapeHtml(safeReferenceLink)}" target="_blank" rel="noopener noreferrer" class="task-detail__reference-link">
                     ${escapeHtml(task.reference_link)}
                 </a>
             </div>
         ` : ""}
         
         <!-- 👍 互动按钮栏 -->
-        <div id="interaction-bar" style="display: flex; align-items: center; gap: 15px; padding: 15px 0; border-top: 1px solid var(--border-color, #333); border-bottom: 1px solid var(--border-color, #333); margin-bottom: 15px;">
-            <button id="btn-like" style="background: ${isLiked ? '#FF5722' : 'var(--comfy-input-bg)'}; border: 1px solid ${isLiked ? '#FF5722' : '#555'}; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+        <div id="interaction-bar" class="task-detail__interactions">
+            <button type="button" id="btn-like" aria-label="${escapeHtml(t('market.like'))}" class="task-detail__like" aria-pressed="${isLiked}">
                 ❤️ <span id="like-count">${escapeHtml(task.likes || 0)}</span>
             </button>
-            <button id="btn-favorite" style="background: ${isFavorited ? '#FFC107' : 'var(--comfy-input-bg)'}; border: 1px solid ${isFavorited ? '#FFC107' : '#555'}; color: ${isFavorited ? '#000' : '#fff'}; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+            <button type="button" id="btn-favorite" aria-label="${escapeHtml(t('market.favorite'))}" class="task-detail__favorite" aria-pressed="${isFavorited}">
                 🔖 <span id="favorite-count">${escapeHtml(task.favorites || 0)}</span>
             </button>
-            <button id="btn-tip" style="background: var(--comfy-input-bg); border: 1px solid #555; color: #fff; padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; transition: 0.2s;">
+            <button type="button" id="btn-tip" class="task-detail__tip">
                 💰 ${t('post.tip_author')}
             </button>
         </div>
         
         <!-- 💰 打赏榜单 -->
-        <div id="tip-board-area" style="margin-bottom: 15px;">
+        <div id="tip-board-area" class="task-detail__spaced">
             ${renderTipBoard(tipBoard)}
         </div>
         
         <!-- 💬 评论区 -->
-        <div style="margin-bottom: 15px;">
-            <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
-                💬 ${t('post.comments_title')} <span style="color: #888; font-weight: normal;">(${escapeHtml(task.comments || 0)})</span>
+        <div class="task-detail__spaced">
+            <div class="task-detail__comments-heading">
+                💬 ${t('post.comments_title')} <span class="task-detail__count">(${escapeHtml(task.comments || 0)})</span>
             </div>
             
             <!-- 评论输入框 -->
-            <div style="display: flex; gap: 10px; margin-bottom: 15px;">
-                <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'">
+            <div class="task-detail__comment-compose">
+                <input type="text" id="comment-input" aria-label="${escapeHtml(t('post.comment_placeholder'))}" aria-required="true" required placeholder="${escapeHtml(t('post.comment_placeholder'))}" class="task-detail__comment-input">
+                <button type="button" id="btn-send-comment" class="task-detail__comment-send">
                     ${t('common.send')}
                 </button>
             </div>
             
             <!-- 评论列表 -->
-            <div id="comments-list" style="display: flex; flex-direction: column; gap: 10px;">
-                <div style="text-align: center; padding: 20px; color: #888; font-size: 12px;">
+            <div id="comments-list" class="task-detail__stack">
+                <div class="task-detail__empty">
                     ${t('post.comment_loading')}
                 </div>
             </div>
@@ -340,41 +345,41 @@ ${escapeHtml(task.description)}</div>
         
         <!-- 接单者信息（如果有） -->
         ${task.assignee ? `
-            <div style="margin-bottom: 20px; padding: 12px; background: rgba(33,150,243,0.1); border: 1px solid rgba(33,150,243,0.3); border-radius: 8px;">
-                <div style="font-size: 13px; font-weight: bold; color: #2196F3; margin-bottom: 8px;">👷 ${t('task.assignee')}</div>
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <img src="${escapeHtml(task.assignee_avatar || PLACEHOLDERS.AVATAR_SMALL)}"
-                         style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
-                    <span style="color: #fff;">${escapeHtml(task.assignee_name || task.assignee)}</span>
+            <div class="task-detail__assignee">
+                <div class="task-detail__assignee-heading">👷 ${t('task.assignee')}</div>
+                <div class="task-detail__person">
+                    <img alt="" src="${escapeHtml(task.assignee_avatar || PLACEHOLDERS.AVATAR_SMALL)}"
+                         class="task-detail__avatar">
+                    <span class="task-detail__person-name">${escapeHtml(task.assignee_name || task.assignee)}</span>
                 </div>
             </div>
         ` : ""}
         
         <!-- 交付成果（如果有） -->
         ${deliverables.length > 0 ? `
-            <div style="margin-bottom: 20px; padding: 12px; background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.3); border-radius: 8px;" class="deliverables-sandbox">
-                <div style="font-size: 13px; font-weight: bold; color: #FF9800; margin-bottom: 8px;">📦 ${t('task.deliverables')}</div>
-                <div style="--sandbox-title-display: none">
-                    ${getCoverSandboxHTML(deliverables, true).replace(/<div style="font-size: 12px[^>]*>[^<]*<\/div>/, '')}
+            <div class="task-detail__delivery deliverables-sandbox" >
+                <div class="task-detail__delivery-heading">📦 ${t('task.deliverables')}</div>
+                <div class="task-detail__gallery-inner">
+                    ${getCoverSandboxHTML(deliverables, true)}
                 </div>
-                ${task.submit_note ? `<div style="margin-top: 10px; color: #ccc; font-size: 12px;">${t('task.note')}: ${escapeHtml(task.submit_note)}</div>` : ""}
+                ${task.submit_note ? `<div class="task-detail__note">${t('task.note')}: ${escapeHtml(task.submit_note)}</div>` : ""}
             </div>
         ` : ""}
         
         <!-- 申请者列表（仅发布者可见，且在 open 状态） -->
         ${isPublisher && task.status === "open" && applicants.length > 0 ? `
-            <div style="margin-bottom: 20px;">
-                <div style="font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 8px;">👥 ${t('task.applicants')}（${applicants.length}${t('task.applicants_count')}）</div>
-                <div id="applicants-list" style="display: flex; flex-direction: column; gap: 8px;">
+            <div class="task-detail__section">
+                <div class="task-detail__heading">👥 ${t('task.applicants')}（${applicants.length}${t('task.applicants_count')}）</div>
+                <div id="applicants-list" class="task-detail__applicants">
                     ${applicants.map(app => `
-                        <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--comfy-menu-bg); border-radius: 8px;">
-                            <img src="${escapeHtml(app.avatar || PLACEHOLDERS.AVATAR_SMALL)}"
-                                 style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
-                            <div style="flex: 1;">
-                                <div style="color: #fff; font-size: 13px;">${escapeHtml(app.name || app.account)}</div>
-                                ${app.message ? `<div style="color: #888; font-size: 11px; margin-top: 2px;">${escapeHtml(app.message)}</div>` : ""}
+                        <div class="task-detail__applicant">
+                            <img alt="" src="${escapeHtml(app.avatar || PLACEHOLDERS.AVATAR_SMALL)}"
+                                 class="task-detail__avatar">
+                            <div class="task-detail__grow">
+                                <div class="task-detail__applicant-name">${escapeHtml(app.name || app.account)}</div>
+                                ${app.message ? `<div class="task-detail__applicant-message">${escapeHtml(app.message)}</div>` : ""}
                             </div>
-                            <button class="btn-assign" data-account="${escapeHtml(app.account)}" style="background: #4CAF50; border: none; color: #fff; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;">
+                            <button type="button" class="btn-assign task-detail__assign" data-account="${escapeHtml(app.account)}" >
                                 ${t('task.choose_assignee')}
                             </button>
                         </div>
@@ -384,7 +389,7 @@ ${escapeHtml(task.description)}</div>
         ` : ""}
         
         <!-- 操作按钮区域 -->
-        <div id="action-buttons" style="display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color, #333);">
+        <div id="action-buttons" class="task-detail__actions">
         </div>
     `;
     
@@ -396,7 +401,7 @@ ${escapeHtml(task.description)}</div>
         contentEl.querySelectorAll("button, input, textarea, select").forEach(control => { control.disabled = true; });
         contentEl.querySelector("#action-buttons").textContent = t('task.cached_readonly');
         contentEl.querySelector("#comments-list").textContent = t('task.cached_readonly');
-        setupImageSandboxEvents(contentEl);
+        contentEl.querySelectorAll(".img-viewport").forEach(viewport => setupImageSandboxEvents(viewport));
         return;
     }
 
@@ -415,6 +420,12 @@ ${escapeHtml(task.description)}</div>
         showDeleteTaskConfirm(task, contentEl);
     });
     
+    contentEl.querySelector("#btn-chat-publisher")?.addEventListener("click", () => {
+        const scope = taskScopes.get(task);
+        if (!scope?.isCurrent() || typeof task.publisher !== "string" || !task.publisher.trim()) return;
+        openChatModal(currentUser, task.publisher);
+    });
+
     // 绑定申请者列表的选择按钮
     contentEl.querySelectorAll(".btn-assign").forEach(btn => {
         btn.onclick = () => {
@@ -424,7 +435,7 @@ ${escapeHtml(task.description)}</div>
     });
     
     // 绑定图片沙盒交互（缩放、拖动、轮播等）
-    setupImageSandboxEvents(contentEl);
+    contentEl.querySelectorAll(".img-viewport").forEach(viewport => setupImageSandboxEvents(viewport));
     
     // 👍 绑定互动事件（点赞/收藏/打赏）
     bindTaskInteractionEvents(contentEl, task, currentUser);
@@ -440,18 +451,18 @@ function _showConfirmDialog({ scope, title, icon, message, description, confirmT
     let phase = "idle";
     const content = document.createElement("div");
     content._cleanup = () => { phase = "closed"; };
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     // 🔒 XSS防护：message/description 可能嵌入其他用户的账号或昵称
     // （如 t('task.confirm_assign', { assignee })），写入 innerHTML 前必须转义。
     // 本函数的 4 个调用方传的都是词典文本/emoji/数字，转义不改变现有显示效果。
     content.innerHTML = `
-        <div style="text-align: center;">
-            <div style="font-size: 40px; margin-bottom: 15px;">${icon}</div>
-            <div style="color: #fff; font-size: 14px; margin-bottom: 8px;">${escapeHtml(message)}</div>
-            <div style="color: #888; font-size: 12px; margin-bottom: 20px;">${escapeHtml(description)}</div>
-            <div style="display: flex; gap: 10px;">
-                <button id="dialog-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="dialog-confirm" style="flex: 1; ${confirmStyle}; border: none; color: #fff; padding: 10px; border-radius: 6px; cursor: pointer; font-weight: bold;">${escapeHtml(confirmText)}</button>
+        <div class="task-detail__centered">
+            <div class="task-detail__dialog-icon">${icon}</div>
+            <div class="task-detail__dialog-message">${escapeHtml(message)}</div>
+            <div class="task-detail__dialog-description">${escapeHtml(description)}</div>
+            <div class="task-detail__buttons">
+                <button type="button" id="dialog-cancel" class="task-detail__cancel">${t('common.cancel')}</button>
+                <button type="button" id="dialog-confirm" class="task-detail__confirm" data-tone="${confirmStyle === 'background: #F44336' ? 'danger' : confirmStyle === 'background: #FF9800' ? 'warning' : 'success'}">${escapeHtml(confirmText)}</button>
             </div>
         </div>
     `;
@@ -566,15 +577,15 @@ function bindTaskTextSubmission({ content, taskId, input, button, confirmText, e
 function showApplyDialog(task, currentUser) {
     const taskId = task.id;
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     content.innerHTML = `
-        <div style="margin-bottom: 15px;">
-            <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 class="task-detail__spaced">
+            <label for="apply-message" class="task-detail__label">${t('task.apply_message_prompt')}</label>
+            <textarea id="apply-message" rows="4" placeholder="${t('task.apply_message_placeholder')}" class="task-detail__textarea"></textarea>
         </div>
-        <div style="display: flex; gap: 10px;">
-            <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 class="task-detail__buttons">
+            <button type="button" id="apply-cancel" class="task-detail__cancel">${t('common.cancel')}</button>
+            <button type="button" id="apply-confirm" class="task-detail__submit-warning">${t('common.confirm_submit')}</button>
         </div>
     `;
     
@@ -680,15 +691,15 @@ function showAcceptConfirmDialog(task, currentUser) {
 function showRejectDialog(task, currentUser) {
     const taskId = task.id;
     const content = document.createElement("div");
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     content.innerHTML = `
-        <div style="margin-bottom: 15px;">
-            <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 class="task-detail__spaced">
+            <label for="reject-feedback" class="task-detail__label">${t('task.reject_reason_prompt')}</label>
+            <textarea aria-required="true" id="reject-feedback" rows="4" placeholder="${t('task.reject_reason_placeholder')}" class="task-detail__textarea"></textarea>
         </div>
-        <div style="display: flex; gap: 10px;">
-            <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 class="task-detail__buttons">
+            <button type="button" id="reject-cancel" class="task-detail__cancel">${t('common.cancel')}</button>
+            <button type="button" id="reject-confirm" class="task-detail__submit-danger">${t('task.reject_work')}</button>
         </div>
     `;
     
@@ -719,15 +730,15 @@ function showDeleteCommentConfirmDialog(taskId, comment, container, currentUser)
     let phase = "idle";
     const content = document.createElement("div");
     content._cleanup = () => { phase = "closed"; };
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     content.innerHTML = `
-        <div style="text-align: center;">
-            <div style="font-size: 40px; margin-bottom: 15px;">⚠️</div>
-            <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 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 class="task-detail__centered">
+            <div class="task-detail__dialog-icon">⚠️</div>
+            <div class="task-detail__dialog-message">${t('post.delete_comment_confirm')}</div>
+            <div class="task-detail__dialog-description">${t('post.delete_comment_warning')}</div>
+            <div class="task-detail__buttons">
+                <button type="button" id="delete-comment-cancel" class="task-detail__cancel">${t('common.cancel')}</button>
+                <button type="button" id="delete-comment-confirm" class="task-detail__submit-danger">${t('common.delete')}</button>
             </div>
         </div>
     `;
@@ -773,23 +784,23 @@ function renderActionButtons(container, task, currentUser, isPublisher, isAssign
     let buttons = [];
     
     if (!currentUser) {
-        buttons.push(`<div style="text-align: center; color: #888; font-size: 13px;">${t('common.login_required')}</div>`);
+        buttons.push(`<div class="task-detail__login">${t('common.login_required')}</div>`);
     } else if (task.status === "open") {
         if (isPublisher) {
             buttons.push(`
-                <button id="btn-cancel-task" style="background: #F44336; border: none; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold;">
+                <button type="button" id="btn-cancel-task" class="task-detail__action-danger">
                     ❌ ${t('task.cancel_task')}
                 </button>
             `);
         } else if (hasApplied) {
             buttons.push(`
-                <button id="btn-cancel-apply" style="background: #757575; border: none; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold;">
+                <button type="button" id="btn-cancel-apply" class="task-detail__action-neutral">
                     ${t('task.cancel_apply')}
                 </button>
             `);
         } else {
             buttons.push(`
-                <button id="btn-apply" style="background: linear-gradient(135deg, #FF9800, #F57C00); border: none; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; box-shadow: 0 2px 8px rgba(255,152,0,0.3);">
+                <button type="button" id="btn-apply" class="task-detail__action-warning">
                     🙋 ${t('task.apply_task')}
                 </button>
             `);
@@ -797,7 +808,7 @@ function renderActionButtons(container, task, currentUser, isPublisher, isAssign
     } else if (task.status === "in_progress") {
         if (isAssignee) {
             buttons.push(`
-                <button id="btn-submit" style="background: linear-gradient(135deg, #4CAF50, #45a049); border: none; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold;">
+                <button type="button" id="btn-submit" class="task-detail__action-success">
                     📤 ${t('task.submit_work')}
                 </button>
             `);
@@ -805,10 +816,10 @@ function renderActionButtons(container, task, currentUser, isPublisher, isAssign
     } else if (task.status === "submitted") {
         if (isPublisher) {
             buttons.push(`
-                <button id="btn-accept" style="background: #4CAF50; border: none; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold; margin-bottom: 8px;">
+                <button type="button" id="btn-accept" class="task-detail__action-accept">
                     ✅ ${t('task.accept_work')}
                 </button>
-                <button id="btn-reject" style="background: #F44336; border: none; color: #fff; padding: 12px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: bold;">
+                <button type="button" id="btn-reject" class="task-detail__action-danger">
                     ❌ ${t('task.reject_work')}
                 </button>
             `);
@@ -818,7 +829,7 @@ function renderActionButtons(container, task, currentUser, isPublisher, isAssign
     // 申诉按钮（进行中或待验收时，双方都可以申诉）
     if ((task.status === "in_progress" || task.status === "submitted") && (isPublisher || isAssignee)) {
         buttons.push(`
-            <button id="btn-dispute" style="background: #757575; border: none; color: #fff; padding: 10px; border-radius: 8px; cursor: pointer; font-size: 13px; margin-top: 10px;">
+            <button type="button" id="btn-dispute" class="task-detail__action-dispute">
                 ⚖️ ${t('task.start_dispute')}
             </button>
         `);
@@ -827,7 +838,7 @@ function renderActionButtons(container, task, currentUser, isPublisher, isAssign
     // 查看申诉详情按钮（争议中状态）
     if (task.status === "disputed" && task.dispute_id && (isPublisher || isAssignee)) {
         buttons.push(`
-            <button id="btn-view-dispute" style="background: linear-gradient(135deg, #9C27B0, #7B1FA2); border: none; color: #fff; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: bold; margin-top: 10px;">
+            <button type="button" id="btn-view-dispute" class="task-detail__action-dispute-view">
                 ⚖️ ${t('task.view_dispute')}
             </button>
         `);
@@ -904,22 +915,22 @@ function showSubmitDialog(task, currentUser) {
     let phase = "idle";
     const content = document.createElement("div");
     content._cleanup = () => { phase = "closed"; };
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     content.innerHTML = `
-        <div style="margin-bottom: 15px;">
-            <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 class="task-detail__spaced">
+            <label for="deliverable-files" class="task-detail__file-label">${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/*" class="task-detail__file-input">
+            <div id="deliverable-hint" class="task-detail__hint">${t('task.support_multiple_images')}</div>
         </div>
         
-        <div style="margin-bottom: 20px;">
-            <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 class="task-detail__section">
+            <label for="submit-note" class="task-detail__file-label">${t('task.note_optional')}</label>
+            <textarea id="submit-note" rows="3" placeholder="${t('task.note_placeholder')}" class="task-detail__note-input"></textarea>
         </div>
         
-        <div style="display: flex; gap: 10px;">
-            <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 class="task-detail__buttons">
+            <button type="button" id="btn-cancel-modal" class="task-detail__cancel-padded">${t('common.cancel')}</button>
+            <button type="button" id="btn-confirm-submit" class="task-detail__submit-success">${t('common.confirm_submit')}</button>
         </div>
     `;
     
@@ -1043,13 +1054,13 @@ function showTaskTipDialog(task, currentUser, container) {
     let phase = "idle";
     const content = document.createElement("div");
     content._cleanup = () => { phase = "closed"; };
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     content.innerHTML = `
-        <div style="display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 15px;">
-            ${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 class="task-detail__tip-options">
+            ${TASK_LIMITS.TIP_AMOUNTS.map(amount => `<button type="button" class="tip-amount task-detail__tip-option" data-amount="${amount}" >${amount} ${t('task.points')}</button>`).join("")}
         </div>
-        <div style="display: flex; gap: 10px;">
-            <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 class="task-detail__buttons">
+            <button type="button" id="tip-cancel" class="task-detail__cancel">${t('common.cancel')}</button>
         </div>
     `;
 
@@ -1110,8 +1121,8 @@ function _renderCommentAvatar(name, avatarUrl) {
     const initial = String(name || 'U')[0].toUpperCase();
     // 🔒 XSS防护：评论者昵称与头像均来自他人可修改的资料，写入 HTML 前必须转义
     return avatarUrl 
-        ? `<img class="swr-avatar" src="${escapeHtml(avatarUrl)}" style="width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--comfy-input-bg);">`
-        : `<div class="swr-avatar" style="width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: bold;">${escapeHtml(initial)}</div>`;
+        ? `<img alt="" class="swr-avatar task-detail__comment-avatar" src="${escapeHtml(avatarUrl)}" >`
+        : `<div class="swr-avatar task-detail__comment-avatar-fallback" >${escapeHtml(initial)}</div>`;
 }
 
 /**
@@ -1154,7 +1165,7 @@ async function loadTaskComments(container, taskId, currentUser) {
         
         if (comments.length === 0) {
             commentsList.innerHTML = `
-                <div style="text-align: center; padding: 30px; color: #666; font-size: 13px;">
+                <div class="task-detail__comments-empty">
                     ${t('post.no_comments')}
                 </div>
             `;
@@ -1175,16 +1186,14 @@ async function loadTaskComments(container, taskId, currentUser) {
                 );
                 
                 return `
-                    <div id="task-comment-${idx}" data-account="${escapeHtml(c.author)}" data-comment-id="${escapeHtml(c.id || idx)}" style="background: #1a1a1a; padding: 12px; border-radius: 8px;">
-                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                    <div id="task-comment-${idx}" data-account="${escapeHtml(c.author)}" data-comment-id="${escapeHtml(c.id || idx)}" class="task-detail__comment">
+                        <div class="task-detail__comment-meta">
                             <div class="swr-avatar-container">${avatarHtml}</div>
-                            <span class="swr-name" style="font-size: 13px; color: #fff; font-weight: 500;">${escapeHtml(name)}</span>
-                            <span style="font-size: 11px; color: #888; margin-left: auto;">${formatTime(c.created_at)}</span>
-                            ${canDelete ? `<button class="btn-delete-comment" data-idx="${idx}" style="background: transparent; border: none; color: #f44; cursor: pointer; font-size: 11px; padding: 2px 6px;">🗑️</button>` : ''}
-                        </div>
-                        <div style="font-size: 13px; color: #ddd; line-height: 1.5; padding-left: 32px;">
-                            ${escapeHtml(c.content)}
+                            <span class="swr-name task-detail__comment-name" >${escapeHtml(name)}</span>
+                            <span class="task-detail__comment-time">${formatTime(c.created_at)}</span>
+                            ${canDelete ? `<button type="button" aria-label="${escapeHtml(t('social.delete_comment_title'))}" class="btn-delete-comment task-detail__comment-delete" data-idx="${idx}" >🗑️</button>` : ''}
                         </div>
+                        <div class="task-detail__comment-body">${escapeHtml(c.content)}</div>
                     </div>
                 `;
             }).join("");
@@ -1220,7 +1229,7 @@ async function loadTaskComments(container, taskId, currentUser) {
     } catch (err) {
         if (!readCurrent()) return;
         commentsList.innerHTML = `
-            <div style="text-align: center; padding: 20px; color: #F44336; font-size: 12px;">
+            <div class="task-detail__comments-error">
                 ${t('post.comment_load_failed')}
             </div>
         `;
@@ -1277,7 +1286,10 @@ async function loadTaskComments(container, taskId, currentUser) {
             }
         };
         commentInput.onkeydown = event => {
-            if (event.key === "Enter" && !event.shiftKey && !event.isComposing && event.keyCode !== 229 && !event.repeat) {
+            if (isCurrent() && !event.defaultPrevented && event.key === "Enter"
+                && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
+                && !event.isComposing && event.keyCode !== 229 && !event.repeat
+                && !commentInput.disabled && !commentInput.readOnly) {
                 event.preventDefault();
                 sendBtn.click();
             }
@@ -1317,15 +1329,15 @@ function showDeleteTaskConfirm(task, contentEl) {
     let phase = "idle";
     const content = document.createElement("div");
     content._cleanup = () => { phase = "closed"; };
-    content.style.color = "#ccc";
+    content.classList.add("task-modal");
     content.innerHTML = `
-        <div style="text-align: center;">
-            <div style="font-size: 40px; margin-bottom: 15px;">⚠️</div>
-            <div style="color: #fff; font-size: 14px; margin-bottom: 8px;">${t('task.delete_confirm_title')}</div>
-            <div style="color: #888; font-size: 12px; margin-bottom: 20px;">${t('task.delete_confirm_desc')}</div>
-            <div style="display: flex; gap: 10px;">
-                <button id="delete-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-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 class="task-detail__centered">
+            <div class="task-detail__dialog-icon">⚠️</div>
+            <div class="task-detail__dialog-message">${t('task.delete_confirm_title')}</div>
+            <div class="task-detail__dialog-description">${t('task.delete_confirm_desc')}</div>
+            <div class="task-detail__buttons">
+                <button type="button" id="delete-cancel" class="task-detail__cancel">${t('common.cancel')}</button>
+                <button type="button" id="delete-confirm" class="task-detail__submit-danger">${t('common.delete')}</button>
             </div>
         </div>
     `;
@@ -1403,7 +1415,7 @@ function showDisputeDialog(task, currentUser) {
             </div>
         </div>
         
-        <button id="btn-submit-dispute" class="task-dispute__submit">
+        <button type="button" id="btn-submit-dispute" class="task-dispute__submit">
             ${t('dispute.submit')}
         </button>
     `;

前端页面/task/发布任务组件.js

@@ -97,18 +97,7 @@ export function createPublishTaskView(currentUser, editTaskData = null) {
     const isLockedStatus = editTaskData && ["in_progress", "submitted"].includes(editTaskData.status);
     
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        color: "#ccc",
-        fontSize: "14px",
-        padding: "0",
-        overflowY: "auto",
-        flex: "1",
-        boxSizing: "border-box",
-        background: "#121212"
-    });
+    container.className = "task-publish ranking-publish-form";
     
     // 使用本地日历日期，不通过 UTC 转换选择器的日期。
     const tomorrow = new Date();
@@ -127,114 +116,114 @@ export function createPublishTaskView(currentUser, editTaskData = null) {
     
     container.innerHTML = `
         <!-- 顶部导航 -->
-        <div style="display: flex; align-items: center; padding: 12px 15px; background: #1a1a1a; border-bottom: 1px solid var(--border-color, #333);">
-            <button type="button" id="btn-back" style="background: rgba(51,51,51,0.8); border: 1px solid rgba(85,85,85,0.8); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: bold; display: flex; align-items: center; gap: 6px;" onmouseover="this.style.background='#4CAF50'" onmouseout="this.style.background='rgba(51,51,51,0.8)'">
+        <div class="task-publish__header">
+            <button type="button" id="btn-back" class="task-publish__back">
                 ⬅ ${t('common.back')}
             </button>
-            <span style="flex: 1; text-align: center; font-size: 15px; font-weight: bold; color: #fff;">📝 ${isEditMode ? t('task.edit_task') : t('task.publish')}</span>
-            <div style="width: 60px;"></div>
+            <span class="task-publish__heading">📝 ${isEditMode ? t('task.edit_task') : t('task.publish')}</span>
+            <div class="task-publish__header-spacer"></div>
         </div>
         
         <!-- 表单内容 -->
-        <div style="padding: 15px; display: flex; flex-direction: column; gap: 15px;">
+        <div class="task-publish__body">
             
             <!-- 任务标题 -->
             <div>
-                <label for="task-title" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
-                    📌 ${t('task.task_title')} <span aria-hidden="true" style="color: #F44336;">*</span>
+                <label for="task-title" class="task-publish__label">
+                    📌 ${t('task.task_title')} <span aria-hidden="true" class="task-publish__required">*</span>
                 </label>
                 <input type="text" id="task-title" required maxlength="50" placeholder="${t('task.title_placeholder')}" value="${escapeHtml(editTitle)}"
-                       style="width: 100%; padding: 10px 12px; background: var(--comfy-menu-bg); border: 1px solid var(--border-color, #333); border-radius: 8px; color: #fff; font-size: 14px; box-sizing: border-box;">
+                       class="task-publish__input">
             </div>
             
             <!-- 任务描述 -->
             <div>
-                <label for="task-description" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
-                    📄 ${t('task.description')} <span aria-hidden="true" style="color: #F44336;">*</span>
+                <label for="task-description" class="task-publish__label">
+                    📄 ${t('task.description')} <span aria-hidden="true" class="task-publish__required">*</span>
                 </label>
                 <textarea id="task-description" required aria-describedby="desc-count" rows="6" maxlength="2000" placeholder="${t('task.description_placeholder')}"
-                          style="width: 100%; padding: 10px 12px; background: var(--comfy-menu-bg); border: 1px solid var(--border-color, #333); border-radius: 8px; color: #fff; font-size: 14px; resize: none; box-sizing: border-box; line-height: 1.5;">${escapeHtml(editDescription)}</textarea>
-                <div style="text-align: right; font-size: 11px; color: #666; margin-top: 4px;">
+                          class="task-publish__textarea">${escapeHtml(editDescription)}</textarea>
+                <div class="task-publish__counter">
                     <span id="desc-count">${editDescription.length}</span>/2000
                 </div>
             </div>
             
             <!-- 参考图片 -->
             <div>
-                <label for="ref-images" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
+                <label for="ref-images" class="task-publish__label">
                     🖼️ ${t('task.reference_images_optional')}
                 </label>
                 <input type="file" id="ref-images" multiple accept="image/*" 
                        style="display: none;">
-                <div id="image-preview" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px;"></div>
-                <button type="button" id="btn-add-image" style="width: 100%; padding: 12px; background: var(--comfy-menu-bg); border: 1px dashed #555; border-radius: 8px; color: #888; cursor: pointer; font-size: 13px;">
+                <div id="image-preview" class="task-publish__images"></div>
+                <button type="button" id="btn-add-image" class="task-publish__add-image">
                     + ${t('task.add_reference_image')}
                 </button>
             </div>
             
             <!-- 参考链接 -->
             <div>
-                <label for="ref-link" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
+                <label for="ref-link" class="task-publish__label">
                     🔗 ${t('task.reference_link_optional')}
                 </label>
                 <input type="url" id="ref-link" placeholder="https://..." value="${escapeHtml(editRefLink)}"
-                       style="width: 100%; padding: 10px 12px; background: var(--comfy-menu-bg); border: 1px solid var(--border-color, #333); border-radius: 8px; color: #fff; font-size: 14px; box-sizing: border-box;">
+                       class="task-publish__input">
             </div>
             
             <!-- 价格设置 -->
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+            <div class="task-publish__price-grid">
                 <!-- 总价格 -->
                 <div>
-                    <label for="total-price" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
-                        💰 ${t('task.total_price')} <span aria-hidden="true" style="color: #F44336;">*</span>
+                    <label for="total-price" class="task-publish__label">
+                        💰 ${t('task.total_price')} <span aria-hidden="true" class="task-publish__required">*</span>
                     </label>
-                    <div style="position: relative;">
+                    <div class="task-publish__amount-wrap">
                         <input type="number" id="total-price" required aria-describedby="task-price-hint" min="0" max="${TASK_LIMITS.MAX_PRICE}" step="1" placeholder="100" value="${escapeHtml(editTotalPrice)}" ${isLockedStatus ? 'disabled' : ''}
-                               style="width: 100%; padding: 10px 12px; padding-right: 40px; background: ${isLockedStatus ? 'var(--comfy-input-bg)' : 'var(--comfy-menu-bg)'}; border: 1px solid var(--border-color, #333); border-radius: 8px; color: ${isLockedStatus ? '#666' : '#FF9800'}; font-size: 16px; font-weight: bold; box-sizing: border-box; cursor: ${isLockedStatus ? 'not-allowed' : 'auto'};">
-                        <span style="position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #888; font-size: 12px;">${t('common.credits')}</span>
+                               class="task-publish__amount">
+                        <span class="task-publish__credits">${t('common.credits')}</span>
                     </div>
-                    <div id="task-price-hint" style="font-size: 11px; color: #666; margin-top: 4px;">${isLockedStatus ? t('task.price_locked') : t('task.price_range', { max: TASK_LIMITS.MAX_PRICE })}</div>
+                    <div id="task-price-hint" class="task-publish__hint">${isLockedStatus ? t('task.price_locked') : t('task.price_range', { max: TASK_LIMITS.MAX_PRICE })}</div>
                 </div>
                 
                 <!-- 订金比例 -->
                 <div>
-                    <label for="deposit-ratio" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
-                        📊 ${t('task.deposit_ratio')} <span aria-hidden="true" style="color: #F44336;">*</span>
+                    <label for="deposit-ratio" class="task-publish__label">
+                        📊 ${t('task.deposit_ratio')} <span aria-hidden="true" class="task-publish__required">*</span>
                     </label>
-                    <select id="deposit-ratio" required aria-describedby="task-deposit-hint" ${isLockedStatus ? 'disabled' : ''} style="width: 100%; padding: 10px 12px; background: ${isLockedStatus ? 'var(--comfy-input-bg)' : 'var(--comfy-menu-bg)'}; border: 1px solid var(--border-color, #333); border-radius: 8px; color: ${isLockedStatus ? '#666' : '#fff'}; font-size: 14px; cursor: ${isLockedStatus ? 'not-allowed' : 'pointer'};">
+                    <select id="deposit-ratio" required aria-describedby="task-deposit-hint" ${isLockedStatus ? 'disabled' : ''} class="task-publish__select">
                         ${TASK_LIMITS.DEPOSIT_RATIOS.map(ratio => `<option value="${ratio}" ${editDepositRatio == ratio ? 'selected' : ''}>${ratio}%</option>`).join('')}
                     </select>
-                    <div id="task-deposit-hint" style="font-size: 11px; color: #666; margin-top: 4px;">${isLockedStatus ? t('task.deposit_locked') : t('task.deposit_deducted_on_assign')}</div>
+                    <div id="task-deposit-hint" class="task-publish__hint">${isLockedStatus ? t('task.deposit_locked') : t('task.deposit_deducted_on_assign')}</div>
                 </div>
             </div>
             
             <!-- 价格说明 -->
-            <div id="price-summary" style="padding: 12px; background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.3); border-radius: 8px;">
-                <div style="font-size: 12px; color: #FF9800; margin-bottom: 6px;">💡 ${t('task.price_description')}</div>
-                <div style="font-size: 13px; color: #ccc; line-height: 1.6;">
-                    ${t('task.total_price')}: <span id="summary-total" style="color: #FF9800; font-weight: bold;">0</span> ${t('common.credits')}<br>
-                    ${t('task.deposit_on_assign')}: <span id="summary-deposit" style="color: #2196F3;">0</span> ${t('common.credits')}<br>
+            <div id="price-summary" class="task-publish__summary">
+                <div class="task-publish__summary-title">💡 ${t('task.price_description')}</div>
+                <div class="task-publish__summary-body">
+                    ${t('task.total_price')}: <span id="summary-total" class="task-publish__summary-total">0</span> ${t('common.credits')}<br>
+                    ${t('task.deposit_on_assign')}: <span id="summary-deposit" class="task-publish__summary-deposit">0</span> ${t('common.credits')}<br>
                     ${t('task.remaining_on_accept')}: <span id="summary-remaining">0</span> ${t('common.credits')}
                 </div>
             </div>
             
             <!-- 截止日期 -->
             <div>
-                <label for="deadline" style="display: block; color: #fff; font-size: 13px; font-weight: bold; margin-bottom: 6px;">
-                    ⏰ ${t('task.deadline')} <span aria-hidden="true" style="color: #F44336;">*</span>
+                <label for="deadline" class="task-publish__label">
+                    ⏰ ${t('task.deadline')} <span aria-hidden="true" class="task-publish__required">*</span>
                 </label>
                 <input type="date" id="deadline" required ${isLockedStatus ? 'aria-describedby="task-deadline-hint"' : ''} min="${minDate}" value="${defaultDate}" ${isLockedStatus ? 'disabled' : ''}
-                       style="width: 100%; padding: 10px 12px; background: ${isLockedStatus ? 'var(--comfy-input-bg)' : 'var(--comfy-menu-bg)'}; border: 1px solid var(--border-color, #333); border-radius: 8px; color: ${isLockedStatus ? '#666' : '#fff'}; font-size: 14px; box-sizing: border-box; cursor: ${isLockedStatus ? 'not-allowed' : 'auto'};">
-                ${isLockedStatus ? `<div id="task-deadline-hint" style="font-size: 11px; color: #666; margin-top: 4px;">${t('task.deadline_locked')}</div>` : ''}
+                       class="task-publish__date">
+                ${isLockedStatus ? `<div id="task-deadline-hint" class="task-publish__hint">${t('task.deadline_locked')}</div>` : ''}
             </div>
             
             <!-- 提交按钮 -->
-            <button type="button" id="btn-publish" style="margin-top: 10px; padding: 14px; background: linear-gradient(135deg, #FF9800, #F57C00); border: none; color: #fff; border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: bold; box-shadow: 0 4px 12px rgba(255,152,0,0.3);">
+            <button type="button" id="btn-publish" class="task-publish__submit">
                 🚀 ${isEditMode ? t('task.save_changes') : t('task.publish_task')}
             </button>
             
             <!-- 提示 -->
-            <div style="text-align: center; font-size: 11px; color: #666; padding: 10px 0;">
+            <div class="task-publish__footer">
                 ${t('task.manage_in_task_list')}
             </div>
         </div>
@@ -396,9 +385,9 @@ export function createPublishTaskView(currentUser, editTaskData = null) {
     
     const renderImagePreview = () => {
         imagePreview.innerHTML = selectedImages.map((img, i) => `
-            <div style="position: relative; padding-top: 100%; background: var(--comfy-menu-bg); border-radius: 8px; overflow: hidden;">
-                <img alt="${escapeHtml(t('task.reference_images'))} ${i + 1}" src="${escapeHtml(img.dataUrl)}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
-                <button type="button" aria-label="${escapeHtml(t('task.remove_reference_image', { index: i + 1 }))}" class="btn-remove-img" data-index="${i}" style="position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: rgba(244,67,54,0.9); border: none; border-radius: 50%; color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;">×</button>
+            <div class="task-publish__image">
+                <img alt="${escapeHtml(t('task.reference_images'))} ${i + 1}" src="${escapeHtml(img.dataUrl)}" class="task-publish__preview">
+                <button type="button" aria-label="${escapeHtml(t('task.remove_reference_image', { index: i + 1 }))}" class="btn-remove-img task-publish__remove" data-index="${i}">×</button>
             </div>
         `).join("");