Upload 98 files

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

@@ -15,7 +15,7 @@
 // ===========================================
 
 import { t } from "./用户体验增强.js";
-import { escapeHtml } from "../core/全局配置.js";
+import { escapeHtml, UI } from "../core/全局配置.js";
 
 // ==========================================
 // 📢 Toast 消息提示
@@ -24,16 +24,58 @@ import { escapeHtml } from "../core/全局配置.js";
 
 // Toast 队列管理（避免重叠）
 let toastQueue = [];
-let toastOffset = 50;
+let toastObserver = null;
+let toastSizeObserver = null;
 let dialogInstanceId = 0;
 const dialogStack = [];
 
 function repositionToasts() {
+    const heights = toastQueue.map(toast => toast.offsetHeight);
+    let top = UI.TOAST.OFFSET;
     toastQueue.forEach((toast, index) => {
-        toast.style.top = `${toastOffset + index * 60}px`;
+        toast.style.top = `${top}px`;
+        top += heights[index] + UI.TOAST.GAP;
     });
 }
 
+function observeToastSize(toast) {
+    if (typeof ResizeObserver !== "function") return;
+    if (!toastSizeObserver) toastSizeObserver = new ResizeObserver(repositionToasts);
+    toastSizeObserver.observe(toast);
+}
+
+
+function releaseToast(toast) {
+    toast._toastReleased = true;
+    toastSizeObserver?.unobserve(toast);
+    if (toast._autoCloseTimer != null) clearTimeout(toast._autoCloseTimer);
+    if (toast._closeTimer != null) clearTimeout(toast._closeTimer);
+    if (toast._entryFrame != null) cancelAnimationFrame(toast._entryFrame);
+    toast._autoCloseTimer = null;
+    toast._closeTimer = null;
+    toast._entryFrame = null;
+    toast._previousFocus = null;
+    toast._cleanupToastEvents?.();
+    toast._cleanupToastEvents = null;
+    const index = toastQueue.indexOf(toast);
+    if (index > -1) toastQueue.splice(index, 1);
+    repositionToasts();
+    if (!toastQueue.length) {
+        toastObserver?.disconnect();
+        toastObserver = null;
+        toastSizeObserver?.disconnect();
+        toastSizeObserver = null;
+    }
+}
+
+function observeToastRemoval() {
+    if (toastObserver) return;
+    toastObserver = new MutationObserver(() => {
+        for (const toast of [...toastQueue]) if (!toast.isConnected) releaseToast(toast);
+    });
+    toastObserver.observe(document.body, { childList: true });
+}
+
 /**
  * 显示 Toast 消息提示
  * @param {string} message - 提示内容
@@ -41,16 +83,17 @@ function repositionToasts() {
  * @param {number} duration - 显示时长（毫秒），默认3000
  */
 export function showToast(message, type = "info", duration = 3000) {
+    const previousFocus = document.activeElement;
     const toast = document.createElement("div");
     const safeType = ["success", "error", "warning", "info"].includes(type) ? type : "info";
     toast.className = `comfy-ranking-toast comfy-ranking-toast--${safeType}`;
-    toast.setAttribute("role", type === "error" ? "alert" : "status");
+    toast.setAttribute("role", safeType === "error" ? "alert" : "status");
     toast.setAttribute("aria-live", safeType === "error" ? "assertive" : "polite");
     toast.setAttribute("aria-atomic", "true");
     const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
     if (reduceMotion) toast.classList.add("comfy-ranking-toast--reduced-motion");
     // 新提示从目标位置上方滑入；关闭后再按当前队列位置重排。
-    toast.style.top = `${toastOffset + toastQueue.length * 60 - 30}px`;
+    toast.style.top = `${UI.TOAST.OFFSET - 30}px`;
 
     // 提示文本统一转义：message 常携带昵称/标题/后端报错等用户可控内容，
     // 全库无任何调用方故意向 showToast 传 HTML 标签，故无条件转义不会改变现有显示效果。
@@ -61,34 +104,74 @@ export function showToast(message, type = "info", duration = 3000) {
         <button type="button" class="toast-close comfy-ranking-toast__close" aria-label="${escapeHtml(t('common.close'))}">×</button>
     `;
     
+    toast._previousFocus = previousFocus;
     document.body.appendChild(toast);
     toastQueue.push(toast);
+    observeToastRemoval();
+    observeToastSize(toast);
     
     // 点击关闭
-    toast.querySelector(".toast-close").addEventListener("click", () => closeToast(toast));
+    const closeButton = toast.querySelector(".toast-close");
+    const handleClose = () => closeToast(toast);
+    closeButton.addEventListener("click", handleClose);
     
     // 入场动画
-    requestAnimationFrame(() => {
+    toast._entryFrame = requestAnimationFrame(() => {
+        toast._entryFrame = null;
+        if (toast._toastReleased || !toast.isConnected || toast.classList.contains("comfy-ranking-toast--closing")) return;
         toast.style.opacity = "1";
         repositionToasts();
     });
 
-    // 自动关闭
-    const autoCloseTimer = setTimeout(() => closeToast(toast), duration);
-    toast._autoCloseTimer = autoCloseTimer;
+    let remaining = Number(duration);
+    let deadline = 0;
+    let hovered = false;
+    const pauseTimer = () => {
+        if (toast._autoCloseTimer == null) return;
+        clearTimeout(toast._autoCloseTimer);
+        toast._autoCloseTimer = null;
+        remaining = Math.max(0, deadline - performance.now());
+    };
+    const resumeTimer = () => {
+        if (toast._toastReleased || hovered || toast.contains(document.activeElement) || !toast.isConnected ||
+                toast.classList.contains("comfy-ranking-toast--closing") || toast._autoCloseTimer != null) return;
+        deadline = performance.now() + remaining;
+        toast._autoCloseTimer = setTimeout(() => closeToast(toast), remaining);
+    };
+    const handleEnter = () => { hovered = true; pauseTimer(); };
+    const handleLeave = () => { hovered = false; 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);
+    };
+    resumeTimer();
 }
 
 function closeToast(toast) {
-    if (!toast?.isConnected || toast.classList.contains("comfy-ranking-toast--closing")) return;
-    if (toast._autoCloseTimer) clearTimeout(toast._autoCloseTimer);
+    if (!toast || toast._toastReleased) return;
+    if (!toast.isConnected) { releaseToast(toast); return; }
+    if (toast.classList.contains("comfy-ranking-toast--closing")) return;
+    if (toast._autoCloseTimer != null) clearTimeout(toast._autoCloseTimer);
+    toast._autoCloseTimer = null;
     
     toast.classList.add("comfy-ranking-toast--closing");
     
-    setTimeout(() => {
+    toast._closeTimer = setTimeout(() => {
+        const restore = toast.contains(document.activeElement);
+        const previousFocus = toast._previousFocus;
         toast.remove();
-        const idx = toastQueue.indexOf(toast);
-        if (idx > -1) toastQueue.splice(idx, 1);
-        repositionToasts();
+        releaseToast(toast);
+        if (restore && previousFocus?.isConnected) previousFocus.focus();
     }, window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : 300);
 }
 
@@ -716,6 +799,8 @@ export function createInstallProgress(container) {
     const progressTrack = wrapper.querySelector(".install-progress__track");
     const startedAt = Date.now();
     let cancelButton = null;
+    let destroyed = false;
+    let diagnosticGeneration = 0;
     const updateElapsed = () => {
         const totalSeconds = Math.floor((Date.now() - startedAt) / 1000);
         const time = `${Math.floor(totalSeconds / 60)}:${String(totalSeconds % 60).padStart(2, "0")}`;
@@ -755,28 +840,37 @@ export function createInstallProgress(container) {
             stage.textContent = message || `❌ ${t('install.failed')}`;
             progressTrack.setAttribute("aria-valuetext", stage.textContent);
         },
-        showDiagnostics(entries) {
-            if (!Array.isArray(entries) || entries.length === 0) return;
-            const details = document.createElement("details");
-            details.className = "install-progress__diagnostics";
-            const summary = document.createElement("summary");
-            summary.textContent = t('install.diagnostics');
-            details.appendChild(summary);
-
-            const list = document.createElement("ol");
-            for (const entry of entries.slice(-50)) {
-                const item = document.createElement("li");
-                const stageKey = entry.stageKey;
-                const stageLabel = stageKey ? t(stageKey) : (entry.stage || t('install.stage_unknown'));
-                item.textContent = t('install.diagnostic_entry', {
-                    time: entry.time,
-                    stage: stageLabel,
-                    progress: Number.isFinite(entry.progress) ? `${entry.progress}%` : "—"
-                });
-                list.appendChild(item);
+        showDiagnostics(entries, error = null) {
+            if (destroyed) return;
+            const generation = ++diagnosticGeneration;
+            wrapper.querySelectorAll('.install-progress__diagnostics, .comfy-ranking-request-diagnostic').forEach(node => node.remove());
+            if (Array.isArray(entries) && entries.length) {
+                const details = document.createElement("details");
+                details.className = "install-progress__diagnostics";
+                const summary = document.createElement("summary");
+                summary.textContent = t('install.diagnostics');
+                details.appendChild(summary);
+
+                const list = document.createElement("ol");
+                for (const entry of entries.slice(-50)) {
+                    const item = document.createElement("li");
+                    const stageKey = entry.stageKey;
+                    const stageLabel = stageKey ? t(stageKey) : (entry.stage || t('install.stage_unknown'));
+                    item.textContent = t('install.diagnostic_entry', {
+                        time: entry.time,
+                        stage: stageLabel,
+                        progress: Number.isFinite(entry.progress) ? `${entry.progress}%` : "—"
+                    });
+                    list.appendChild(item);
+                }
+                details.appendChild(list);
+                wrapper.appendChild(details);
             }
-            details.appendChild(list);
-            wrapper.appendChild(details);
+            if (typeof error?.requestId !== 'string') return;
+            import('./性能优化工具.js').then(({ appendRequestDiagnostic }) => {
+                const isCurrent = () => !destroyed && generation === diagnosticGeneration && wrapper.isConnected;
+                if (isCurrent()) appendRequestDiagnostic(wrapper, error, t, isCurrent);
+            }).catch(() => { console.warn('请求诊断界面加载失败'); });
         },
         addCancelButton(label, onCancel) {
             if (cancelButton || typeof onCancel !== "function") return;
@@ -793,6 +887,8 @@ export function createInstallProgress(container) {
             wrapper.appendChild(cancelButton);
         },
         destroy() {
+            destroyed = true;
+            diagnosticGeneration++;
             stopElapsedTimer();
             wrapper.remove();
         }

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

@@ -11,54 +11,16 @@
 import { showToast } from "./UI交互提示组件.js";
 import { setLanguage, getLanguage, t } from "./用户体验增强.js";
 import { clearAllCache } from "./性能优化工具.js";
-import { IS_WEB_MODE } from "../core/全局配置.js";
+import { IS_WEB_MODE, getSettings, saveSettings } from "../core/全局配置.js";
+export { getSettings, saveSettings };
 import { getDiskCacheStats, clearDiskCache } from './缓存管理请求.js';
 
-// 🔧 设置项 localStorage Key
-const SETTINGS_KEY = "ComfyCommunity_Settings";
-
-// 🔧 默认设置值
-const DEFAULT_SETTINGS = {
-    showCreatorBanner: true,  // 创作者卡片显示背景图
-    enableAnimations: true,   // ✨ 榜单切换动画
-    enableSoundEffects: true, // 🔊 动画音效
-    language: 'zh-CN',        // 🌐 界面语言
-    cacheExpireSeconds: 7200, // ⏱️ 缓存刷新间隔（秒），默认2小时
-    // 🚀 后续可扩展更多设置项
-    // compactMode: false,    // 紧凑模式
-    // darkMode: true,        // 深色模式
-};
-
 // 🌐 语言选项（双语显示）
 const LANGUAGE_OPTIONS = [
     { value: 'zh-CN', label: '简体中文 / Simplified Chinese' },
     { value: 'en-US', label: 'English / 英语' }
 ];
 
-/**
- * 📦 获取当前设置
- */
-export function getSettings() {
-    try {
-        const saved = localStorage.getItem(SETTINGS_KEY);
-        if (saved) {
-            return { ...DEFAULT_SETTINGS, ...JSON.parse(saved) };
-        }
-    } catch (e) {}
-    return { ...DEFAULT_SETTINGS };
-}
-
-/**
- * 💾 保存设置
- */
-export function saveSettings(settings) {
-    try {
-        localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
-        // 🔔 广播设置变更事件，让其他组件响应
-        window.dispatchEvent(new CustomEvent("comfy-settings-changed", { detail: settings }));
-    } catch (e) {}
-}
-
 /**
  * 📊 格式化文件大小
  */

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

@@ -11,7 +11,7 @@
 //   - tetris: 提示词 - 俄罗斯方块式逐个下坠堆积
 // ==========================================
 
-import { getSettings } from "./全局设置组件.js";
+import { getSettings } from "../core/全局配置.js";
 
 function prefersReducedMotion() {
     try { return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches === true; }

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

@@ -1411,6 +1411,12 @@ export function renderListLoadError(container, message, onRetry, t, error = null
 
     status.append(text, retry);
     container.replaceChildren(status);
+    appendRequestDiagnostic(container, error, t);
+}
+
+
+export function appendRequestDiagnostic(container, error, t, isCurrent = () => true) {
+    if (!container || !isCurrent()) return;
     const requestId = error?.requestId;
     if (typeof requestId !== 'string' || !API.REQUEST_ID_PATTERN.test(requestId)) return;
 
@@ -1433,24 +1439,25 @@ export function renderListLoadError(container, message, onRetry, t, error = null
     feedback.setAttribute('aria-live', 'polite');
     let copying = false;
     copy.addEventListener('click', async () => {
-        if (copying || !details.isConnected) return;
+        if (copying || !details.isConnected || !isCurrent()) return;
         copying = true; copy.setAttribute('aria-busy', 'true');
         try {
             if (typeof navigator.clipboard?.writeText !== 'function') throw new Error();
             await navigator.clipboard.writeText(requestId);
-            if (details.isConnected) feedback.textContent = t('feedback.copied');
+            if (details.isConnected && isCurrent()) feedback.textContent = t('feedback.copied');
         } catch {
-            if (details.isConnected) {
+            if (details.isConnected && isCurrent()) {
                 feedback.textContent = t('feedback.copy_id_manually');
                 if (document.activeElement === copy) { input.focus(); input.select(); }
             }
         } finally {
             copying = false;
-            if (details.isConnected) copy.setAttribute('aria-busy', 'false');
+            if (details.isConnected && isCurrent()) copy.setAttribute('aria-busy', 'false');
         }
     });
     details.append(summary, label, copy, feedback);
     container.append(details);
+    return details;
 }
 
 /**

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

@@ -808,6 +808,11 @@ const translations = {
         'feedback.search_local_result': '⚠️ 网络不可用，显示本地搜索结果',
         // 🔍 搜索请求被新关键词取代时抛出的错误消息（详见 网络请求_基础设施.js 的主动取消分支）
         'feedback.request_cancelled': '请求已取消',
+        'feedback.stream_idle_timeout': '连接长时间未收到数据，操作结果暂时无法确认。',
+        'feedback.stream_missing_final': '连接已结束，但未收到最终结果，请先核对操作状态。',
+        'feedback.stream_invalid_encoding': '流数据编码异常，操作结果暂时无法确认。',
+        'feedback.stream_limit_exceeded': '流数据超出安全读取范围，操作结果暂时无法确认。',
+        'feedback.stream_timeout_unconfirmed': '连接超时，操作结果暂时无法确认。',
         
         // 通用
         'common.processing': '处理中',
@@ -1458,7 +1463,8 @@ const translations = {
         'publish.password_encrypted_hint': '密码加密存储于云端，仅在用户成功购买后所解密显示。未购买用户无法通过任何接口获取。',
         'publish.private_repo_hint': '这是一个私有 GitHub 仓库（需配置访问密钥）',
         'publish.pat_label': '私有库专属访问密钥 (PAT)',
-        'publish.pat_hint': '系统使用此 Token 替购买者拉取源码。该密钥仅存储于云端后台，<span style="color:#F44336; font-weight:bold;">绝对不会在前端接口中公开暴露</span>。',
+        'publish.pat_hint': '系统使用此 Token 替购买者拉取源码。该密钥仅存储于云端后台，',
+        'publish.pat_privacy': '绝对不会在前端接口中公开暴露。',
         'publish.token_placeholder': 'ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
         'publish.token_keep_hint': '已配置，留空保留原密钥',
         'publish.effect_images': '效果展示图 (最多6张，可选)',
@@ -1656,6 +1662,10 @@ const translations = {
         'settings_form.moderation_skipped': '上传图片将跳过审核',
         'settings_form.moderation_enabled': '图像审核已启用',
         'settings_form.moderation_disabled': '图像审核已关闭',
+        'settings_form.moderation_read_failed': '审核状态读取失败，请重试后再修改。',
+        'settings_form.moderation_confirming': '正在保存并确认审核状态…',
+        'settings_form.moderation_unconfirmed': '审核设置结果尚未确认，请重试读取状态后再操作。',
+        'settings_form.moderation_changed': '审核状态与本次设置不同，已显示当前读取结果。',
         // 视频播放器
         'video.play': '播放',
         'video.pause': '暂停',
@@ -2520,6 +2530,11 @@ const translations = {
         'feedback.cloud_unreachable_no_cache': 'Cloud service is unreachable, and there is no local content to show',
         'feedback.search_local_result': '⚠️ Network unavailable, showing local search results',
         'feedback.request_cancelled': 'Request cancelled',
+        'feedback.stream_idle_timeout': 'No data has arrived for a while. The operation result is not yet confirmed.',
+        'feedback.stream_missing_final': 'The connection ended without a final result. Check the operation status before continuing.',
+        'feedback.stream_invalid_encoding': 'The stream contains invalid text encoding. The operation result is not yet confirmed.',
+        'feedback.stream_limit_exceeded': 'The stream exceeds the safe reading limits. The operation result is not yet confirmed.',
+        'feedback.stream_timeout_unconfirmed': 'The connection timed out. The operation result is not yet confirmed.',
         'common.processing': 'Processing',
         'common.got_it': 'Got it',
         'confirm.delete_title': 'Confirm Delete',
@@ -3147,7 +3162,8 @@ const translations = {
         'publish.password_encrypted_hint': 'Password encrypted in cloud, shown only after successful purchase.',
         'publish.private_repo_hint': 'This is a private GitHub repo (requires access key)',
         'publish.pat_label': 'Private Repo PAT',
-        'publish.pat_hint': 'System uses this token to pull source for buyers. Only stored on backend, <span style="color:#F44336; font-weight:bold;">never exposed in frontend APIs</span>.',
+        'publish.pat_hint': 'System uses this token to pull source for buyers. Only stored on backend,',
+        'publish.pat_privacy': 'never exposed in frontend APIs.',
         'publish.token_placeholder': 'ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
         'publish.token_keep_hint': 'Already configured, leave empty to keep',
         'publish.effect_images': 'Preview Images (max 6, optional)',
@@ -3342,6 +3358,10 @@ const translations = {
         'settings_form.moderation_skipped': 'Uploaded images will skip moderation',
         'settings_form.moderation_enabled': 'Image moderation enabled',
         'settings_form.moderation_disabled': 'Image moderation disabled',
+        'settings_form.moderation_read_failed': 'Could not read moderation status. Retry before changing it.',
+        'settings_form.moderation_confirming': 'Saving and confirming moderation status…',
+        'settings_form.moderation_unconfirmed': 'Moderation settings are not yet confirmed. Retry reading the status before making changes.',
+        'settings_form.moderation_changed': 'Moderation status differs from this change. The current readback is shown.',
         
         // Video player
         'video.play': 'Play',

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

@@ -1,12 +1,10 @@
 // 前端页面/components/顶部导航组件.js
-import { createAuthView } from "../auth/用户注册登录组件.js";
 import { openUserProfileModal } from "../profile/个人中心视图.js";
 import { openChatModal, loadChatUnreadCount } from "../social/私信聊天组件.js";
 import { api, captureRequestSession } from "../core/网络请求API.js";
 import { showToast } from "./UI交互提示组件.js";
 import { showAboutInfo } from "./关于插件组件.js";
-import { openNotificationCenter, loadUnreadCount } from "../social/通知中心组件.js";
-import { openSettingsPage } from "./全局设置组件.js";  // ⚙️ 新增
+import { loadUnreadCount } from "../social/未读角标工具.js";
 import { setUser, updateUser, initUserState } from "../core/状态管理.js";
 import { readUserSession, sessionProfile } from "../core/用户会话存储.js";
 import { API, CACHE, PLACEHOLDERS } from "../core/全局配置.js";
@@ -58,7 +56,13 @@ export function createTopNav() {
     settingsBtn.textContent = "⚙️";
     settingsBtn.title = t('nav.settings');
     settingsBtn.setAttribute("aria-label", t('nav.settings'));
-    settingsBtn.onclick = (e) => { e.stopPropagation(); openSettingsPage(); };
+    settingsBtn.onclick = (e) => {
+        e.stopPropagation();
+        return openDeferredView(async () => {
+            const { createSettingsView } = await import('./全局设置组件.js');
+            return createSettingsView;
+        }, settingsBtn);
+    };
 
     const titleWrapper = document.createElement("div");
     titleWrapper.className = "top-nav__heading";
@@ -84,13 +88,69 @@ export function createTopNav() {
     bellBtn.setAttribute("aria-label", t('social.notifications'));
 
     let currentUser = null;
+    let navigationGeneration = 0;
     chatEntryBtn.onclick = () => openChatModal(currentUser);
-    bellBtn.onclick = () => openNotificationCenter(currentUser, bellBtn);
+    bellBtn.onclick = () => {
+        if (!currentUser?.account) return showToast(t('notif.login_required'), 'warning');
+        const notificationUser = currentUser;
+        return openDeferredView(async () => {
+            const { openNotificationCenter } = await import('../social/通知中心组件.js');
+            return () => openNotificationCenter(notificationUser, bellBtn);
+        }, bellBtn, { ownsRoute: true });
+    };
     const sessionStorages = () => ['localStorage', 'sessionStorage'].map(name => { try { return window[name]; } catch (_) { return null; } });
     const restoredSession = readUserSession(sessionStorages(), CACHE.LEGACY_KEYS);
     currentUser = restoredSession?.user || null;
 
+    async function openDeferredView(loadFactory, trigger, { ownsRoute = false } = {}) {
+        const generation = navigationGeneration;
+        const matchesSession = captureRequestSession();
+        const loadingView = document.createElement('div');
+        loadingView.className = 'hub-inline-load-state';
+        const message = document.createElement('span');
+        message.textContent = t('common.loading');
+        message.setAttribute('role', 'status');
+        message.setAttribute('aria-live', 'polite');
+        const back = document.createElement('button');
+        back.type = 'button'; back.className = 'ranking-publish-back';
+        back.textContent = t('common.back');
+        let active = true;
+        loadingView._cleanup = () => { active = false; back.onclick = null; };
+        loadingView.appendChild(message); loadingView.appendChild(back);
+        const currentLoad = () => active && loadingView.isConnected && userHeader.isConnected
+            && _navInstance?.dom === userHeader && navigationGeneration === generation && matchesSession();
+        back.onclick = () => {
+            if (!active || !loadingView.isConnected || _navInstance?.dom !== userHeader) return;
+            window.dispatchEvent(new CustomEvent('comfy-route-back'));
+            if (trigger.isConnected) trigger.focus();
+        };
+        window.dispatchEvent(new CustomEvent('comfy-route-view', { detail: { view: loadingView } }));
+        try {
+            const createView = await loadFactory();
+            if (!currentLoad()) return;
+            if (ownsRoute) {
+                await createView();
+                if (currentLoad()) back.onclick();
+                return;
+            }
+            const view = createView();
+            if (!currentLoad()) { try { view._cleanup?.(); } finally { view.remove(); } return; }
+            window.dispatchEvent(new CustomEvent('comfy-route-view', { detail: { view } }));
+        } catch {
+            if (currentLoad()) {
+                message.textContent = t('common.operation_failed');
+                message.setAttribute('role', 'alert'); message.setAttribute('aria-live', 'assertive');
+            }
+        } finally {
+            if (active && !currentLoad()) {
+                if (loadingView.isConnected && _navInstance?.dom === userHeader) window.dispatchEvent(new CustomEvent('comfy-route-back'));
+                else { loadingView._cleanup(); loadingView.remove(); }
+            }
+        }
+    }
+
     const updateUserButtonState = () => {
+        navigationGeneration++;
         if (currentUser) {
             const avatar = document.createElement("img");
             avatar.className = "top-nav__avatar";
@@ -121,8 +181,9 @@ export function createTopNav() {
             bellBtn.querySelector("#unread-badge").style.display = "none";
             chatEntryBtn.querySelector("#chat-unread-badge").style.display = "none";
             
-            userActionBtn.onclick = () => {
-                const view = createAuthView(async (formData, context) => {
+            userActionBtn.onclick = () => openDeferredView(async () => {
+                const { createAuthView } = await import('../auth/用户注册登录组件.js');
+                return () => createAuthView(async (formData, context) => {
                     const originalSession = captureRequestSession();
                     const current = () => context.isCurrent() && userHeader.isConnected
                         && _navInstance?.dom === userHeader && originalSession();
@@ -157,7 +218,7 @@ export function createTopNav() {
                         showToast(t(isRegister ? 'auth.register_success' : 'auth.login_success'), 'success');
                         // 凭证已发布即完成登录，资料补充不阻塞页面返回。
                         window.dispatchEvent(new CustomEvent('comfy-route-back'));
-                        updateUserButtonState(); window.dispatchEvent(new CustomEvent('comfy-user-login'));
+                        window.dispatchEvent(new CustomEvent('comfy-user-login')); updateUserButtonState();
                         const applyProfile = data => {
                             if (!sameLogin() || data?.account !== account) return;
                             currentUser = sessionProfile({ ...currentUser, ...data });
@@ -195,8 +256,7 @@ export function createTopNav() {
                         }
                     }
                 });
-                window.dispatchEvent(new CustomEvent("comfy-route-view", { detail: { view } }));
-            };
+            }, userActionBtn);
         }
     };
 

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

@@ -6,13 +6,8 @@
 // 由 侧边栏入口注册.js 动态加载
 // ==========================================
 
-import { createPublishView } from "../market/发布内容组件.js";
-import { createPublishTaskView } from "../task/发布任务组件.js";  // 🎯 新增：任务发布
-import { createPublishPostView } from "../post/发布帖子组件.js";  // 🎯 新增：帖子发布
-import { createPublishPromptView } from "../prompt/发布提示词组件.js";  // 🎯 新增：提示词发布
 import { createTopNav } from "../components/顶部导航组件.js";
 import { loadSidebarContent, disposeSidebarContent } from "./侧边栏数据引擎.js";
-import { createItemDetailView } from "../market/资源详情页面组件.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { api, captureRequestSession } from "./网络请求API.js";  // 🔴 编辑模式需调用详情API获取完整数据
 import { CACHE, UI, getBackgroundKey, IS_WEB_MODE } from "./全局配置.js";
@@ -117,6 +112,18 @@ function _onSidebarWindow(event, handler) {
     _sidebarWindowListeners.push({ event, handler });
 }
 
+async function loadDetailFactory() {
+    return (await import('../market/资源详情页面组件.js')).createItemDetailView;
+}
+
+async function loadPublishFactory(kind) {
+    if (kind === 'resource') return (await import('../market/发布内容组件.js')).createPublishView;
+    if (kind === 'task') return (await import('../task/发布任务组件.js')).createPublishTaskView;
+    if (kind === 'post') return (await import('../post/发布帖子组件.js')).createPublishPostView;
+    if (kind === 'prompt') return (await import('../prompt/发布提示词组件.js')).createPublishPromptView;
+    throw new Error('Invalid publish view');
+}
+
 export function buildSidebarDOM() {
     // 🔧 P1修复：重建前先清理上一轮的 window 监听，避免重复注册
     _cleanupSidebarWindowListeners();
@@ -356,77 +363,120 @@ export function buildSidebarDOM() {
 
     _onSidebarWindow("comfy-open-detail", (e) => {
         const { itemData, currentUser } = e.detail;
-        const view = createItemDetailView(itemData, currentUser);
-        showInlineView(view);
+        void openDetailView(itemData, currentUser);
     });
 
-    // 监听进入修改编辑页面的请求
-    // 🔴 修复：编辑时先获取详情API数据，确保 has_private_token 等字段完整（列表缓存可能缺少该字段）
-    _onSidebarWindow("comfy-route-edit-publish", async (e) => {
-        // 📱 Web 模式中央兜底：发布族功能仅本地 ComfyUI 可用
-        if (IS_WEB_MODE) return showToast(t('web.publish_not_supported'), "warning");
-        const { itemData, currentUser } = e.detail;
+    const openInlineViewAfterLoad = async (prepareView, ownerCurrent) => {
         const matchesSession = captureRequestSession();
-        if (!currentUser?.account || topNav.getCurrentUser()?.account !== currentUser.account) return;
-
-        // 先展示加载状态，避免用户感知延迟
-        const loadingView = document.createElement("div");
-        loadingView.style.cssText = "display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#888;font-size:14px;";
-        loadingView.innerHTML = `<div style=\"font-size:24px;margin-bottom:10px;\">⏳</div><div>${t('common.loading')}</div>`;
+        const renderToken = getRenderToken();
+        const loadingView = document.createElement('div');
+        loadingView.className = 'hub-inline-load-state';
+        const loadingMessage = document.createElement('span');
+        loadingMessage.setAttribute('role', 'status');
+        loadingMessage.setAttribute('aria-live', 'polite');
+        loadingMessage.textContent = t('common.loading');
+        const returnButton = document.createElement('button');
+        returnButton.type = 'button';
+        returnButton.className = 'ranking-publish-back';
+        returnButton.textContent = t('common.back');
+        const returnFocus = document.activeElement;
+        loadingView.appendChild(loadingMessage);
+        loadingView.appendChild(returnButton);
+        loadingView._cleanup = () => { returnButton.onclick = null; };
         showInlineView(loadingView);
-
-        const isCurrent = () => matchesSession() && topNav.getCurrentUser()?.account === currentUser.account
+        const isCurrent = () => !sidebarDisposed && matchesSession() && ownerCurrent()
+            && renderToken === getRenderToken()
             && activeInlineView === loadingView && loadingView.isConnected;
-        let enrichedItemData;
+        returnButton.onclick = () => {
+            if (activeInlineView !== loadingView || sidebarDisposed) return;
+            hideInlineView();
+            if (returnFocus?.isConnected) returnFocus.focus();
+        };
         try {
-            const detailRes = await api.getItemById(itemData.id, { noStore: true });
-            if (!isCurrent()) return;
-            const data = detailRes?.data, revision = data?.edit_revision === undefined ? 0 : data.edit_revision;
-            if (detailRes?.status !== 'success' || data?.id !== itemData.id || data?.author !== currentUser.account
-                || !Number.isSafeInteger(revision) || revision < 0) throw new Error('Invalid edit detail');
-            enrichedItemData = { ...data, edit_revision: revision };
-        } catch (_) {
+            const createView = await prepareView(isCurrent);
             if (!isCurrent()) return;
-            loadingView.textContent = t('common.operation_failed');
-            loadingView.setAttribute('role', 'alert');
-            return;
+            const view = createView();
+            if (!isCurrent()) {
+                try { view._cleanup?.(); }
+                catch { console.warn('Unshown inline view cleanup failed'); }
+                try { cleanupImageSandbox(view); }
+                finally { view.remove(); }
+                return;
+            }
+            showInlineView(view);
+        } catch {
+            if (isCurrent()) {
+                loadingMessage.textContent = t('common.operation_failed');
+                loadingMessage.setAttribute('role', 'alert');
+                loadingMessage.setAttribute('aria-live', 'assertive');
+            }
+        } finally {
+            if (activeInlineView === loadingView && !isCurrent()) hideInlineView();
         }
-        if (!isCurrent()) return;
-
-        const publishView = createPublishView(currentUser, 
-            () => hideInlineView(), 
-            () => { hideInlineView(); triggerLoad(true); },
-            enrichedItemData 
-        );
-        showInlineView(publishView);
+    };
+
+    const openDetailView = async (itemData, currentUser) => {
+        const account = currentUser?.account;
+        const ownerCurrent = () => topNav.getCurrentUser()?.account === account;
+        if (!ownerCurrent()) return;
+        await openInlineViewAfterLoad(async () => {
+            const createView = await loadDetailFactory();
+            return () => createView(itemData, currentUser);
+        }, ownerCurrent);
+    };
+
+    const openPublishView = async (kind, currentUser, editData = null, initialType) => {
+        if (IS_WEB_MODE) return showToast(t('web.publish_not_supported'), 'warning');
+        const account = currentUser?.account;
+        const ownerCurrent = () => topNav.getCurrentUser()?.account === account;
+        if (!account || !ownerCurrent()) return;
+        await openInlineViewAfterLoad(async isCurrent => {
+            let preparedData = editData;
+            if (kind === 'resource' && editData) {
+                const itemId = editData.id;
+                const detailRes = await api.getItemById(itemId, { noStore: true });
+                if (!isCurrent()) return;
+                const data = detailRes?.data, revision = data?.edit_revision === undefined ? 0 : data.edit_revision;
+                if (detailRes?.status !== 'success' || data?.id !== itemId || data?.author !== account
+                    || !Number.isSafeInteger(revision) || revision < 0) throw new Error('Invalid edit detail');
+                preparedData = { ...data, edit_revision: revision };
+            }
+            const createView = await loadPublishFactory(kind);
+            if (!isCurrent()) return;
+            return () => {
+                let view;
+                if (kind === 'resource') {
+                    view = createView(currentUser,
+                        () => { if (activeInlineView === view) hideInlineView(); },
+                        () => { if (activeInlineView === view) { hideInlineView(); triggerLoad(true); } },
+                        preparedData, initialType);
+                } else {
+                    view = createView(currentUser, preparedData);
+                }
+                return view;
+            };
+        }, ownerCurrent);
+    };
+
+    _onSidebarWindow("comfy-route-edit-publish", async (e) => {
+        const { itemData, currentUser } = e.detail;
+        await openPublishView('resource', currentUser, itemData);
     });
 
     // 监听进入任务编辑页面的请求
-    _onSidebarWindow("comfy-route-edit-task", (e) => {
-        if (IS_WEB_MODE) return showToast(t('web.publish_not_supported'), "warning");
+    _onSidebarWindow("comfy-route-edit-task", async (e) => {
         const { taskData, currentUser } = e.detail;
-        try {
-            const view = createPublishTaskView(currentUser, taskData);
-            showInlineView(view);
-        } catch (err) {
-            console.error('创建编辑任务视图失败');
-        }
+        await openPublishView('task', currentUser, taskData);
     });
 
-    // 监听进入帖子编辑页面的请求
-    _onSidebarWindow("comfy-route-edit-post", (e) => {
-        if (IS_WEB_MODE) return showToast(t('web.publish_not_supported'), "warning");
+    _onSidebarWindow("comfy-route-edit-post", async (e) => {
         const { postData, currentUser } = e.detail;
-        const view = createPublishPostView(currentUser, postData);
-        showInlineView(view);
+        await openPublishView('post', currentUser, postData);
     });
 
-    // 监听进入提示词编辑页面的请求
-    _onSidebarWindow("comfy-route-edit-prompt", (e) => {
-        if (IS_WEB_MODE) return showToast(t('web.publish_not_supported'), "warning");
+    _onSidebarWindow("comfy-route-edit-prompt", async (e) => {
         const { promptData, currentUser } = e.detail;
-        const view = createPublishPromptView(currentUser, promptData);
-        showInlineView(view);
+        await openPublishView('prompt', currentUser, promptData);
     });
 
     // 🔔 通知跳转：切换到对应Tab并展开指定卡片
@@ -545,33 +595,11 @@ export function buildSidebarDOM() {
         triggerLoad(e.detail?.force ?? false); 
     });
 
-    sortContainer.querySelector("#btn-open-publish").onclick = () => {
+    sortContainer.querySelector("#btn-open-publish").onclick = async () => {
         const currentUser = topNav.getCurrentUser();
-        if (!currentUser) return showToast(t('auth.login_required'), "warning");
-        
-        // 🎯 根据当前Tab打开对应的发布界面
-        if (currentTab === "tasks") {
-            // 任务榜 -> 打开发布任务界面
-            const view = createPublishTaskView(currentUser);
-            showInlineView(view);
-        } else if (currentTab === "posts") {
-            // 讨论区 -> 打开发布帖子界面
-            const view = createPublishPostView(currentUser);
-            showInlineView(view);
-        } else if (currentTab === "prompts") {
-            // 🧩 提示词 -> 打开发布提示词界面
-            const view = createPublishPromptView(currentUser);
-            showInlineView(view);
-        } else {
-            // 工具/Skill/应用/推荐 -> 打开发布内容界面，并自动设置对应类型
-            const publishView = createPublishView(currentUser, 
-                () => hideInlineView(), 
-                () => { hideInlineView(); triggerLoad(true); },
-                null,  // editItemData
-                currentTab  // initialType: tools/skills/apps/recommends
-            );
-            showInlineView(publishView);
-        }
+        if (!currentUser) return showToast(t('auth.login_required'), 'warning');
+        const kind = { tasks: 'task', posts: 'post', prompts: 'prompt' }[currentTab] || 'resource';
+        await openPublishView(kind, currentUser, null, currentTab);
     };
 
     tabs.forEach(tab => {

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

@@ -18,7 +18,7 @@
 // 🌐 API 配置
 // ==========================================
 
-/** @type {{ BASE_URL: string, TIMEOUT: number, VIDEO_UPLOAD_TIMEOUT: number, VIDEO_UPLOAD_RESPONSE_MAX_CHARS: number, LOCAL_CACHE_STATS_TIMEOUT: number, LOCAL_CACHE_CLEAR_TIMEOUT: number, LOCAL_CACHE_RESPONSE_MAX_BYTES: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, PROFILE_RESOURCE_TIMEOUT: number, CREATOR_CHART_SCRIPT_URL: string, BACKGROUND_TIMEOUT: number, BANNER_IMAGE_TIMEOUT: number, BACKGROUND_RETRIES: number, WORKFLOW_DOWNLOAD_TIMEOUT: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string, IMAGE_PROXY_PATH: string, LOCAL_IMAGE_PROXY_PREFIX: string, COMPLETE_IMAGE_QUERY_SUFFIX: string, PRIVATE_GET_PATTERNS: RegExp[], PUBLIC_CONDITIONAL_GET_PATHS: string[], CONDITIONAL_ETAG_PATTERN: RegExp, REQUEST_ID_HEADER: string, REQUEST_ID_PATTERN: RegExp, ENDPOINT_ERROR_SCOPE_HEADER: string, ENDPOINT_ERROR_SCOPE_VALUE: string }} */
+/** @type {{ BASE_URL: string, TIMEOUT: number, VIDEO_UPLOAD_TIMEOUT: number, VIDEO_UPLOAD_RESPONSE_MAX_CHARS: number, LOCAL_CACHE_STATS_TIMEOUT: number, LOCAL_CACHE_CLEAR_TIMEOUT: number, LOCAL_CACHE_RESPONSE_MAX_BYTES: number, SSE_MAX_RESPONSE_BYTES: number, SSE_MAX_LINE_BYTES: number, SSE_MAX_LINES: number, SSE_YIELD_LINES: number, SSE_YIELD_BYTES: number, SSE_YIELD_CHUNKS: number, MAX_RETRIES: number, RETRY_DELAY: number, LIST_RETRIES: number, SEARCH_TIMEOUT: number, SEARCH_RETRIES: number, PROFILE_RESOURCE_TIMEOUT: number, CREATOR_CHART_SCRIPT_URL: string, BACKGROUND_TIMEOUT: number, BANNER_IMAGE_TIMEOUT: number, BACKGROUND_RETRIES: number, WORKFLOW_DOWNLOAD_TIMEOUT: number, CLOUD_DOWN_COOLDOWN: number, SEARCH_COMPONENT_ID: string, IMAGE_PROXY_PATH: string, LOCAL_IMAGE_PROXY_PREFIX: string, COMPLETE_IMAGE_QUERY_SUFFIX: string, PRIVATE_GET_PATTERNS: RegExp[], PUBLIC_CONDITIONAL_GET_PATHS: string[], CONDITIONAL_ETAG_PATTERN: RegExp, REQUEST_ID_HEADER: string, REQUEST_ID_PATTERN: RegExp, ENDPOINT_ERROR_SCOPE_HEADER: string, ENDPOINT_ERROR_SCOPE_VALUE: string }} */
 export const API = {
     REQUEST_ID_HEADER: "X-Ranking-Request-Id",
     REQUEST_ID_PATTERN: /^(?:[a-f0-9]{32}|ERR_[0-9]{10,13}_[a-f0-9]{1,8})$/,
@@ -38,6 +38,13 @@ export const API = {
     LOCAL_CACHE_STATS_TIMEOUT: 10000,
     LOCAL_CACHE_CLEAR_TIMEOUT: 60000,
     LOCAL_CACHE_RESPONSE_MAX_BYTES: 8192,
+    // 工作流终态编码上限为512 MiB，另保留64 MiB进度数据；行预算包含data前缀。
+    SSE_MAX_RESPONSE_BYTES: 576 * 1024 * 1024,
+    SSE_MAX_LINE_BYTES: 512 * 1024 * 1024,
+    SSE_MAX_LINES: 262144,
+    SSE_YIELD_LINES: 256,
+    SSE_YIELD_BYTES: 1024 * 1024,
+    SSE_YIELD_CHUNKS: 256,
 
     // GET 请求重试次数（实际尝试 MAX_RETRIES + 1 次）
     // 🔧 修复：此前本值为 3 且全库无人读取，真正的重试次数硬编码在 网络请求_基础设施.js 中为 2，
@@ -300,6 +307,8 @@ export const UI = {
     },
     // Toast 消息配置
     TOAST: {
+        OFFSET: 50,
+        GAP: 10,
         DURATION: 3000,           // 显示时长（毫秒）
         MAX_VISIBLE: 3,           // 最大同时显示数量
         POSITION: "top-center"    // 位置
@@ -773,3 +782,63 @@ export const PROMPT_LIMITS = Object.freeze({ MAX_PRICE: 10000 });
 
 // 任务定价边界，与云端 task_publication/task_terms 对应。
 export const TASK_LIMITS = Object.freeze({ MAX_PRICE: 2147483647, MAX_REFERENCE_IMAGES: 6, DEPOSIT_RATIOS: Object.freeze([10, 20, 30, 50]), TIP_AMOUNTS: Object.freeze([10, 50, 100, 500]) });
+
+
+export const TYPE_RULES = {
+    tool: {
+        recommendForm: false, resType: { selectable: ['link', 'netdisk'] },
+        privateRepoWhenLink: true, price: true, refund: true, originalRequired: true
+    },
+    skill: {
+        recommendForm: false, resType: { selectable: ['link', 'netdisk'] },
+        privateRepoWhenLink: true, price: true, refund: true, originalRequired: true
+    },
+    app: {
+        recommendForm: false, resType: { fixed: 'json' },
+        privateRepoWhenLink: true, price: true, refund: true, originalRequired: true
+    },
+    recommend: {
+        recommendForm: true, resType: { lockedByForm: true },
+        privateRepoWhenLink: false, price: false, refund: false, originalRequired: false,
+        formToResType: { recommend_tool: 'link', recommend_skill: 'link', recommend_app: 'json', recommend_link: 'netdisk' }
+    }
+};
+
+// 🔧 设置项 localStorage Key
+const SETTINGS_KEY = "ComfyCommunity_Settings";
+
+// 🔧 默认设置值
+const DEFAULT_SETTINGS = {
+    showCreatorBanner: true,  // 创作者卡片显示背景图
+    enableAnimations: true,   // ✨ 榜单切换动画
+    enableSoundEffects: true, // 🔊 动画音效
+    language: 'zh-CN',        // 🌐 界面语言
+    cacheExpireSeconds: 7200, // ⏱️ 缓存刷新间隔（秒），默认2小时
+    // 🚀 后续可扩展更多设置项
+    // compactMode: false,    // 紧凑模式
+    // darkMode: true,        // 深色模式
+};
+
+/**
+ * 📦 获取当前设置
+ */
+export function getSettings() {
+    try {
+        const saved = localStorage.getItem(SETTINGS_KEY);
+        if (saved) {
+            return { ...DEFAULT_SETTINGS, ...JSON.parse(saved) };
+        }
+    } catch (e) {}
+    return { ...DEFAULT_SETTINGS };
+}
+
+/**
+ * 💾 保存设置
+ */
+export function saveSettings(settings) {
+    try {
+        localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+        // 🔔 广播设置变更事件，让其他组件响应
+        window.dispatchEvent(new CustomEvent("comfy-settings-changed", { detail: settings }));
+    } catch (e) {}
+}

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

@@ -702,6 +702,7 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
     let currentIdleTimeout = options.idleTimeout || IDLE_TIMEOUT_DEFAULT;
     let idleTimer = null;
     let finalResult = null;
+    let streamReader = null;
 
     const clearIdleTimer = () => {
         if (idleTimer !== null) {
@@ -727,16 +728,68 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
             throw error;
         }
 
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = "";
+        const reader = streamReader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8', { fatal: true });
+        const decodeSSEChunk = (value, options) => {
+            try {
+                return decoder.decode(value, options);
+            } catch (_) {
+                const error = new Error(t('feedback.stream_invalid_encoding'));
+                error.code = 'invalid_stream_encoding';
+                error.outcomeUnknown = true;
+                throw error;
+            }
+        };
+        let totalBytes = 0, lineBytes = 0, lineCount = 0;
+        let workBytes = 0, workLines = 0, workChunks = 0;
+        const lineParts = [];
+        const limitError = () => {
+            const error = new Error(t('feedback.stream_limit_exceeded'));
+            error.code = 'stream_limit_exceeded';
+            error.outcomeUnknown = true;
+            return error;
+        };
+        const appendLinePart = (part) => {
+            if (!part) return;
+            let level = 0;
+            while (lineParts[level] !== undefined) {
+                part = lineParts[level] + part;
+                lineParts[level++] = undefined;
+            }
+            lineParts[level] = part;
+        };
+        const takeLine = () => {
+            const line = lineParts.slice().reverse().filter(part => part !== undefined).join('');
+            lineParts.length = 0;
+            return line;
+        };
+        const yieldIfNeeded = async () => {
+            if (workBytes >= API.SSE_YIELD_BYTES || workLines >= API.SSE_YIELD_LINES || workChunks >= API.SSE_YIELD_CHUNKS) {
+                workBytes = workLines = workChunks = 0;
+                await new Promise(resolve => setTimeout(resolve, 0));
+            }
+            if (controller.signal.aborted) throw new DOMException('Aborted', 'AbortError');
+        };
+        const checkChunkBudget = (value) => {
+            totalBytes += value.byteLength;
+            if (totalBytes > API.SSE_MAX_RESPONSE_BYTES) throw limitError();
+            let start = 0, end;
+            while ((end = value.indexOf(10, start)) !== -1) {
+                lineBytes += end - start;
+                if (lineBytes > API.SSE_MAX_LINE_BYTES) throw limitError();
+                lineBytes = 0;
+                start = end + 1;
+            }
+            lineBytes += value.byteLength - start;
+            if (lineBytes > API.SSE_MAX_LINE_BYTES) throw limitError();
+        };
         const processSSELine = (line) => {
             if (!line.startsWith("data: ")) return;
             let data;
             try {
                 data = JSON.parse(line.slice(6));
-            } catch (parseError) {
-                console.warn("[SSE] 解析事件失败:", parseError?.name || 'SyntaxError');
+            } catch (_) {
+                console.warn("[SSE] 解析事件失败");
                 return;
             }
             if (!data || typeof data !== "object" || Array.isArray(data)) {
@@ -754,6 +807,22 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
                 console.warn("[SSE] 进度回调失败");
             }
         };
+        const processSSEText = async (text, flush = false) => {
+            let start = 0, end;
+            while ((end = text.indexOf("\n", start)) !== -1) {
+                if (++lineCount > API.SSE_MAX_LINES) throw limitError();
+                appendLinePart(text.slice(start, end));
+                processSSELine(takeLine());
+                start = end + 1;
+                workLines++;
+                await yieldIfNeeded();
+            }
+            appendLinePart(text.slice(start));
+            if (flush && lineParts.length) {
+                if (++lineCount > API.SSE_MAX_LINES) throw limitError();
+                processSSELine(takeLine());
+            }
+        };
         while (true) {
             // 使用 Promise.race 实现空闲超时：reader.read() 与空闲定时器竞争
             const idlePromise = new Promise((_, reject) => {
@@ -773,7 +842,7 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
                     // 如果已收到 finalResult，优先返回它（服务器只是没正确关闭连接）
                     if (finalResult) return finalResult;
                     // 否则返回空闲超时错误
-                    return { status: "error", outcomeUnknown: true, message: "连接超时：30秒未收到数据" };
+                    return { status: "error", outcomeUnknown: true, message: t('feedback.stream_idle_timeout') };
                 }
                 throw e;
             }
@@ -781,19 +850,18 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
 
             const { done, value } = readResult;
             if (done) {
-                buffer += decoder.decode();
-                for (const line of buffer.split("\n")) processSSELine(line);
-                buffer = "";
+                await processSSEText(decodeSSEChunk(), true);
                 break;
             }
 
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split("\n");
-            buffer = lines.pop() || ""; // 保留不完整行
-            for (const line of lines) processSSELine(line);
+            checkChunkBudget(value);
+            workBytes += value.byteLength;
+            workChunks++;
+            await processSSEText(decodeSSEChunk(value, { stream: true }));
+            await yieldIfNeeded();
         }
 
-        return finalResult || { status: "error", outcomeUnknown: true, message: "未收到最终结果" };
+        return finalResult || { status: "error", outcomeUnknown: true, message: t('feedback.stream_missing_final') };
     } catch (err) {
         // 已收到最终事件时，后续连接关闭错误不应覆盖操作结果或触发重复提交。
         if (finalResult) return finalResult;
@@ -802,7 +870,7 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
                 status: "error",
                 outcomeUnknown: true,
                 cancelRequested: !!externalSignal?.aborted,
-                message: externalSignal?.aborted ? t('feedback.request_cancelled') : "连接超时，操作结果暂时无法确认"
+                message: externalSignal?.aborted ? t('feedback.request_cancelled') : t('feedback.stream_timeout_unconfirmed')
             };
         }
         throw err;
@@ -810,6 +878,12 @@ export async function requestSSE(endpoint, body, onProgress, options = {}) {
         clearTimeout(globalTimer);
         clearIdleTimer();
         externalSignal?.removeEventListener("abort", abortFromCaller);
+        try { controller.abort(); } catch (_) {}
+        if (streamReader) {
+            try { Promise.resolve(streamReader.cancel()).catch(() => {}); } catch (_) {}
+            try { streamReader.releaseLock(); } catch (_) {}
+            streamReader = null;
+        }
     }
 }
 

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

@@ -11,12 +11,11 @@
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { createCommentSection } from "../social/评论与互动组件.js";
 import { renderTipLevelHTML, getTipLevelRuleShort } from "../components/打赏等级工具.js";
-import { getBannerCacheKey, PLACEHOLDERS, getCachedProfile, getProfileWithSWR, escapeHtml, CACHE, API } from "../core/全局配置.js";
+import { getBannerCacheKey, PLACEHOLDERS, getCachedProfile, getProfileWithSWR, escapeHtml, CACHE, API, getSettings } from "../core/全局配置.js";
 import { api } from "../core/网络请求_业务API.js";
 import { captureRequestSession, requestCancelManager } from "../core/网络请求_基础设施.js";
 import { getUser, eventBus, EVENTS } from "../core/状态管理.js";
 import { createTaskViewScope, subscribeTaskSessionChanges } from "../task/任务视图生命周期.js";
-import { getSettings } from "../components/全局设置组件.js";
 import { t } from "../components/用户体验增强.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { openTipModal } from "../profile/个人中心_赞赏组件.js";

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

@@ -81,7 +81,7 @@ export function generatePublishHTML(isEditMode, viewTitle, submitBtnText, hasExi
             </label>
             <div id="github-token-container" class="ranking-publish__token" style="display: ${hasExistingToken ? 'block' : 'none'};">
                 <label for="pub-github-token" class="ranking-publish__security-label">🔒 ${escapeHtml(t('publish.pat_label'))} <span class="ranking-publish__required" aria-hidden="true">*</span></label>
-                <div id="publish-pat-hint" class="ranking-publish__hint">${escapeHtml(t('publish.pat_hint'))}</div>
+                <div id="publish-pat-hint" class="ranking-publish__hint">${escapeHtml(t('publish.pat_hint'))} <strong class="ranking-publish__security-emphasis">${escapeHtml(t('publish.pat_privacy'))}</strong></div>
                 <input type="password" id="pub-github-token" value="${escapeHtml(isEditMode ? (safeData.github_token || '') : '')}" placeholder="${hasExistingToken && !safeData.github_token ? escapeHtml(t('publish.token_keep_hint')) : escapeHtml(t('publish.token_placeholder'))}" class="form-input" aria-describedby="publish-pat-hint">
             </div>
         </div>

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

@@ -1,13 +1,12 @@
 import { processImageCore as _processImageCore } from "./有界图片处理.js";
 import { validateImageFile } from "./图片文件检查.js";
-import { IMAGE_PROCESS } from "../core/全局配置.js";
+import { IMAGE_PROCESS, TYPE_RULES } from "../core/全局配置.js";
 // 前端页面/market/发布内容_提交引擎.js
 import { createPublishSubmissionScope } from "./发布提交生命周期.js";
 import { api } from "../core/网络请求API.js";
 import { showToast } from "../components/UI交互提示组件.js";
 import { t } from "../components/用户体验增强.js";
 import { removeCache, removeCacheByPrefix } from "../components/性能优化工具.js";
-import { TYPE_RULES } from "./发布内容组件.js";  // 📋 四榜发布表单声明式规则（与 UI 联动同源）
 
 /**
  * 📋 获取指定主类型的提交规则（校验与字段组装统一读取，与 UI 显隐同源）

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

@@ -6,7 +6,7 @@ import { handlePublishSubmit } from "./发布内容_提交引擎.js";
 import { t } from "../components/用户体验增强.js";
 import { showConfirm, showToast } from "../components/UI交互提示组件.js";
 import { globalModal } from "../components/全局弹窗管理器.js";
-import { escapeHtml } from "../core/全局配置.js";
+import { escapeHtml, TYPE_RULES } from "../core/全局配置.js";
 
 // ==========================================
 // 📌 模块级常量
@@ -14,25 +14,7 @@ import { escapeHtml } from "../core/全局配置.js";
 
 // 📋 四榜发布表单声明式规则：tool 插件榜 / skill Skill榜 / app 工作流 / recommend 推荐榜
 // UI 显隐、联动、校验统一读取此配置，避免类型分支散落多处
-export const TYPE_RULES = {
-    tool: {
-        recommendForm: false, resType: { selectable: ['link', 'netdisk'] },
-        privateRepoWhenLink: true, price: true, refund: true, originalRequired: true
-    },
-    skill: {
-        recommendForm: false, resType: { selectable: ['link', 'netdisk'] },
-        privateRepoWhenLink: true, price: true, refund: true, originalRequired: true
-    },
-    app: {
-        recommendForm: false, resType: { fixed: 'json' },
-        privateRepoWhenLink: true, price: true, refund: true, originalRequired: true
-    },
-    recommend: {
-        recommendForm: true, resType: { lockedByForm: true },
-        privateRepoWhenLink: false, price: false, refund: false, originalRequired: false,
-        formToResType: { recommend_tool: 'link', recommend_skill: 'link', recommend_app: 'json', recommend_link: 'netdisk' }
-    }
-};
+export { TYPE_RULES };
 
 // 封面标签统一样式
 const _COVER_LABEL_STYLE = 'position: absolute; top: 2px; left: 2px; background: #4CAF50; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 2px; pointer-events: none;';

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

@@ -139,6 +139,23 @@ const WORKFLOW_STAGE_KEYS = {
     error: 'workflow.stage_failed'
 };
 
+function _createProgressDiagnostics(stageKeys) {
+    const entries = [], startedAt = Date.now();
+    return {
+        entries,
+        record(event) {
+            const elapsedSeconds = Math.max(0, Math.floor((Date.now() - startedAt) / 1000));
+            const rawStage = typeof event.stage === 'string' ? event.stage : '';
+            entries.push({
+                stageKey: Object.hasOwn(stageKeys, rawStage) ? stageKeys[rawStage] : '',
+                progress: Number.isFinite(event.progress) ? Math.max(0, Math.min(100, event.progress)) : null,
+                time: `${Math.floor(elapsedSeconds / 60)}:${String(elapsedSeconds % 60).padStart(2, '0')}`
+            });
+            if (entries.length > 50) entries.shift();
+        }
+    };
+}
+
 function _getWorkflowErrorMessage(result) {
     if (result?.outcomeUnknown) return t('workflow.connection_uncertain');
     const errorKeys = {
@@ -599,8 +616,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                         const progress = trackProgress();
                         const cancelController = new AbortController();
                         progress.addCancelButton(t('install.cancel_in_progress'), () => cancelController.abort());
-                        const diagnosticEvents = [];
-                        const installStartedAt = Date.now();
+                        const diagnostics = _createProgressDiagnostics(INSTALL_STAGE_KEYS);
 
                         try {
                             // 发起 SSE 流式安装请求
@@ -609,15 +625,8 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                                 { url: itemData.link, id: itemData.id, account, token },
                                 (event) => {
                                     if (!isCurrent()) return;
-                                    const elapsedSeconds = Math.floor((Date.now() - installStartedAt) / 1000);
+                                    diagnostics.record(event);
                                     const rawStage = typeof event.stage === "string" ? event.stage : "";
-                                    diagnosticEvents.push({
-                                        stageKey: Object.hasOwn(INSTALL_STAGE_KEYS, rawStage) ? INSTALL_STAGE_KEYS[rawStage] : "",
-                                        stage: /^[a-z0-9_]{1,40}$/i.test(rawStage) ? rawStage : "",
-                                        progress: Number.isFinite(event.progress) ? Math.max(0, Math.min(100, event.progress)) : null,
-                                        time: `${Math.floor(elapsedSeconds / 60)}:${String(elapsedSeconds % 60).padStart(2, "0")}`
-                                    });
-                                    if (diagnosticEvents.length > 50) diagnosticEvents.shift();
                                     const stageKey = Object.hasOwn(INSTALL_STAGE_KEYS, rawStage) ? INSTALL_STAGE_KEYS[rawStage] : "";
                                     progress.update(event.progress, event.status === "error"
                                         ? _getInstallErrorMessage(event)
@@ -640,7 +649,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                                 phase = "unknown"; btnUse.removeAttribute("aria-busy");
                                 const message = t('install.connection_uncertain');
                                 progress.error(message);
-                                progress.showDiagnostics(diagnosticEvents);
+                                progress.showDiagnostics(diagnostics.entries, result);
                                 showToast(message, "warning");
                                 return;
                             }
@@ -675,7 +684,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                                 if (result?.outcomeUnknown) { phase = "unknown"; btnUse.removeAttribute("aria-busy"); }
                                 const message = _getInstallErrorMessage(result);
                                 progress.error(message);
-                                progress.showDiagnostics(diagnosticEvents);
+                                progress.showDiagnostics(diagnostics.entries, result);
                                 showToast(t('install.failed_for_item', { title: itemData.title, message }), "error");
                             }
                         } catch(err) {
@@ -684,7 +693,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                                 phase = "unknown"; btnUse.removeAttribute("aria-busy");
                                 const message = t('install.connection_uncertain');
                                 progress.error(message);
-                                progress.showDiagnostics(diagnosticEvents);
+                                progress.showDiagnostics(diagnostics.entries, err);
                                 showToast(message, "error");
                                 return;
                             }
@@ -764,6 +773,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                 };
             } else if (isApp) {
                 const progress = trackProgress();
+                const diagnostics = _createProgressDiagnostics(WORKFLOW_STAGE_KEYS);
 
                 // 附带 account 凭证，解决问题 2 (一键鉴权加载)
                 try {
@@ -772,6 +782,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                         { url: itemData.link, id: itemData.id, account, token },
                         (event) => {
                             if (!isCurrent()) return;
+                            diagnostics.record(event);
                             const stageKey = typeof event.stage === "string" && Object.hasOwn(WORKFLOW_STAGE_KEYS, event.stage)
                                 ? WORKFLOW_STAGE_KEYS[event.stage]
                                 : "";
@@ -790,6 +801,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                         if (!graphLoaded) {
                             const message = t('workflow.canvas_load_failed');
                             progress.error(message);
+                            progress.showDiagnostics(diagnostics.entries, result);
                             showToast(message, "error");
                             return;
                         }
@@ -821,8 +833,8 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                         const localizedMessage = result.error_code
                             ? message
                             : t('workflow.failed', { message });
-                        progress.error(message);
-                        inlineStatusBox.innerHTML = `<span class="resource-install__message resource-install__message--error">❌ ${escapeHtml(localizedMessage)}</span>`;
+                        progress.error(localizedMessage);
+                        progress.showDiagnostics(diagnostics.entries, result);
                         showToast(localizedMessage, "error");
                     }
                 } catch(err) {
@@ -831,6 +843,7 @@ export function setupResourceInstall(btnUse, itemData, currentUser, inlineStatus
                         phase = "unknown"; btnUse.removeAttribute("aria-busy");
                         const message = t('workflow.connection_uncertain');
                         progress.error(message);
+                        progress.showDiagnostics(diagnostics.entries, err);
                         showToast(message, "error");
                         return;
                     }

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

@@ -51,16 +51,16 @@ async function renderRefundButton(container, itemData, currentUser, scope, purch
             const hoursLeft = Number(statusRes.refund_hours_left);
             if (!Number.isFinite(hoursLeft) || hoursLeft < 0) throw new Error("Invalid refund hours");
             refundArea.innerHTML = `
-                <div style="margin-top: 12px; padding: 12px; background: rgba(255,152,0,0.1); border: 1px dashed #FF9800; border-radius: 6px;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
-                        <div style="font-size: 12px; color: #FF9800;">
+                <div class="resource-detail__refund-panel">
+                    <div class="resource-detail__refund-header">
+                        <div class="resource-detail__refund-copy">
                             🔄 ${t('item.regret_mode')}${t('item.hours_left', { hours: hoursLeft.toFixed(1) })}
                         </div>
-                        <button id="btn-refund" style="background: #FF5722; color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; transition: 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
+                        <button type="button" id="btn-refund" class="resource-detail__button resource-detail__button--warning">
                             💸 ${t('item.apply_refund')}
                         </button>
                     </div>
-                    <div style="font-size: 11px; color: #888; margin-top: 8px;">
+                    <div class="resource-detail__refund-warning">
                         ⚠️ ${t('item.refund_warning')}
                     </div>
                 </div>
@@ -71,7 +71,7 @@ async function renderRefundButton(container, itemData, currentUser, scope, purch
             };
         } else {
             refundArea.innerHTML = `
-                <div style="margin-top: 12px; padding: 10px; background: rgba(76,175,80,0.1); border: 1px solid rgba(76,175,80,0.3); border-radius: 6px; font-size: 12px; color: #4CAF50;">
+                <div class="resource-detail__refund-expired">
                     ✅ ${t('item.refund_expired')}
                 </div>
             `;
@@ -121,12 +121,7 @@ export function createItemDetailView(itemData, currentUser) {
     itemData = proxyImages(itemData);
     
     const container = document.createElement("div");
-    Object.assign(container.style, {
-        display: "flex", flexDirection: "column", gap: "15px", color: "#ccc", 
-        // 🔧 自适应高度：flex 填充剩余空间，内容超出时在容器内部滚动（与主界面保持一致）
-        fontSize: "14px", padding: "15px", overflowY: "auto", flex: "1", minHeight: "0", boxSizing: "border-box",
-        backgroundColor: "#13151c" 
-    });
+    container.className = "resource-page";
 
     const cachedAuthor = getCachedProfile(itemData.author);
     const authorName = cachedAuthor?.name || itemData.author || t('common.unknown_user');
@@ -138,34 +133,32 @@ export function createItemDetailView(itemData, currentUser) {
     // 🗑️ 判断是否有权限删除
     const showDeleteBtn = canDeleteItem(itemData, currentUser);
     const deleteBtnHtml = showDeleteBtn ? `
-        <button id="btn-delete-item" style="background: #F44336; color: white; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; box-shadow: 0 2px 4px rgba(244,67,54,0.3); transition: 0.2s; margin-left: 10px;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">🗑️ ${t('common.delete')}</button>
+        <button type="button" id="btn-delete-item" class="resource-detail__button resource-detail__button--danger">🗑️ ${t('common.delete')}</button>
     ` : '';
 
     let authorInfoHtml = `
-        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
+        <div class="resource-page__author">
             <div>
                 <strong>${t('item.author')}：</strong> <span id="detail-author-name">${escapeHtml(authorName)}</span>
                 <!-- 原创标识 -->
                 ${itemData.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-left: 8px;">
+                <div class="resource-detail__badge resource-detail__badge--original">
                     🎨 ${t('item.original_notice')}
                 </div>
                 ` : ''}
             </div>
-            <div style="display: flex; align-items: center; gap: 8px;">
-                <button id="btn-tip-item" style="background: #E91E63; color: white; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; box-shadow: 0 2px 4px rgba(233,30,99,0.3); transition: 0.2s;" onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">💰 ${t('item.tip_encourage')}</button>
+            <div class="resource-page__actions">
+                <button type="button" id="btn-tip-item" class="resource-detail__button resource-detail__button--tip">💰 ${t('item.tip_encourage')}</button>
                 ${deleteBtnHtml}
             </div>
         </div>
-        <div style="margin-top: 10px; color: #888;">${escapeHtml(t('item.sponsor_thanks'))}</div>
+        <div class="resource-page__thanks">${escapeHtml(t('item.sponsor_thanks'))}</div>
             
         <!-- 🔄 P7后悔模式：退款区域 -->
-        <div id="refund-area"></div>
+        <div id="refund-area" class="resource-page__refund"></div>
             
-        <div style="margin-top: 15px; border-top: 1px dashed #333; padding-top: 15px;">
-            <div style="font-size: 13px; font-weight: bold; color: #E91E63; margin-bottom: 10px;">💖 ${t('item.tip_board_title')}</div>
+        <div class="resource-page__tips">
+            <div class="resource-detail__heading">💖 ${t('item.tip_board_title')}</div>
             ${boardHtml}
         </div>
     `;
@@ -193,24 +186,23 @@ export function createItemDetailView(itemData, currentUser) {
         actionBtnHtml = `<button type="button" id="btn-use-item" class="resource-install__button resource-install__entry" data-install-state="ready">⬇️ ${t('item.get_now')} <span class="resource-install__price">${isFree ? t('item.free') : escapeHtml(itemData.price) + ' ' + t('common.credits')}</span></button>`;
     }
 
-    // 🚀 返回按钮位置可调整参数：margin-left 控制右移，margin-top 控制下移
     container.innerHTML = `
-        <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); margin-bottom: 15px; width: fit-content; 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)'">
+        <button type="button" id="btn-back-detail" class="resource-detail__button resource-page__back">
             ⬅ ${t('common.back')}
         </button>
 
-        <div style="background: #181b28; border: 1px solid #2d334a; border-radius: 8px; padding: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); margin-bottom: 15px;">
-            <div style="font-size: 16px; font-weight: bold; color: #00bcd4; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
+        <div class="resource-page__section">
+            <div class="resource-page__heading">
                 ⚙️ ${t('item.detail_info')}
             </div>
-            <div style="color: #ddd; line-height: 1.8; font-size: 13px; white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(itemData.fullDesc || itemData.shortDesc)}</div>
+            <div class="resource-page__description">${escapeHtml(itemData.fullDesc || itemData.shortDesc)}</div>
         </div>
 
-        <div style="background: #181b28; border: 1px solid #2d334a; border-radius: 8px; padding: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.2);">
-            <div style="font-size: 16px; font-weight: bold; color: #4CAF50; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
+        <div class="resource-page__section">
+            <div class="resource-page__heading">
                 🎉 ${t('item.other_info')}
             </div>
-            <div style="color: #eee; line-height: 1.6; font-size: 14px;">
+            <div class="resource-page__info">
                 ${authorInfoHtml}
             </div>
         </div>
@@ -231,7 +223,8 @@ export function createItemDetailView(itemData, currentUser) {
     // 🚀 创建安装状态容器
     const inlineStatusBox = document.createElement("div");
     inlineStatusBox.id = "inline-status-box";
-    Object.assign(inlineStatusBox.style, { display: "none", marginTop: "15px", padding: "12px", background: "var(--comfy-menu-bg)", borderRadius: "6px", border: "1px solid var(--border-color, #333)", fontSize: "13px" });
+    inlineStatusBox.className = "resource-detail__status resource-install__status";
+    inlineStatusBox.style.display = "none";
     container.appendChild(inlineStatusBox);
     if (!localVersionStatus.available) {
         inlineStatusBox.style.display = "block";

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

@@ -121,11 +121,13 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
     container.className = 'ranking-settings-form';
     const sessionMatches = captureRequestSession();
     let disposed = false, saving = false;
+    let refreshModerationControls = () => {}, releaseModeration = () => {};
     const readers = new Set(), cropControllers = new Set();
     const current = () => !disposed && container.isConnected && sessionMatches() && (options.isCurrent?.() ?? true);
     container._cleanup = () => {
         if (disposed) return;
         disposed = true;
+        releaseModeration();
         for (const controller of cropControllers) { try { controller.abort(); } catch (_) {} }
         cropControllers.clear();
         for (const reader of readers) { try { reader.abort(); } catch (_) {} }
@@ -243,15 +245,16 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
                     <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>
-                                <div style="font-size: 13px; color: #fff; margin-bottom: 4px;">🖼️ 图像内容审核</div>
-                                <div style="font-size: 11px; color: #888;">启用后上传的图片将自动进行内容安全审核</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>
                             <label class="toggle-switch" style="position: relative; display: inline-block; width: 50px; height: 26px;">
-                                <input type="checkbox" id="admin-image-moderation" style="opacity: 0; width: 0; height: 0;">
+                                <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>
                         </div>
-                        <div id="moderation-status" style="margin-top: 8px; font-size: 11px; color: #666;"></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>
+                        <button id="moderation-retry" type="button" hidden>${escapeHtml(t('common.retry'))}</button>
                     </div>
                 </div>
             </div>
@@ -316,56 +319,87 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         document.head.appendChild(toggleStyles);
     }
     
-    // 🔒 管理员：初始化图像审核开关状态
     if (isAdmin) {
-        setTimeout(async () => {
-            const moderationToggle = container.querySelector('#admin-image-moderation');
-            if (!current()) return;
-            const statusDiv = container.querySelector('#moderation-status');
-            if (!moderationToggle) return;
-            
+        const moderationToggle = container.querySelector('#admin-image-moderation');
+        const statusDiv = container.querySelector('#moderation-status');
+        const retryButton = container.querySelector('#moderation-retry');
+        let ready = false, busy = false;
+        moderationToggle.indeterminate = true;
+        refreshModerationControls = () => {
+            moderationToggle.disabled = saving || busy || !ready;
+            retryButton.disabled = saving || busy;
+            statusDiv.setAttribute('aria-busy', String(busy));
+        };
+        const confirmState = response => {
+            if (response?.status !== 'success' || typeof response?.data?.enabled !== 'boolean') {
+                throw new Error('invalid moderation response');
+            }
+            return response.data.enabled;
+        };
+        const showState = enabled => {
+            ready = true;
+            moderationToggle.indeterminate = false;
+            moderationToggle.checked = enabled;
+            retryButton.hidden = true;
+            statusDiv.textContent = enabled ? t('settings_form.enabled')
+                : `${t('settings_form.disabled')} | ${t('settings_form.moderation_skipped')}`;
+        };
+        const showUnknown = message => {
+            ready = false;
+            moderationToggle.indeterminate = true;
+            statusDiv.textContent = message;
+            retryButton.hidden = false;
+        };
+        const loadState = async () => {
+            if (!current() || saving || busy) return;
+            ready = false; busy = true;
+            retryButton.hidden = true;
+            statusDiv.textContent = t('common.loading');
+            refreshModerationControls();
             try {
-                // 获取当前审核状态
-                const res = await api.getSystemConfig('image_moderation');
+                const response = await api.getSystemConfig('image_moderation');
                 if (!current()) return;
-                const enabled = res?.data?.enabled === true;
-                moderationToggle.checked = enabled;
-                
-                if (statusDiv) {
-                    const quota = res?.data?.quota || {};
-                    statusDiv.innerHTML = enabled
-                        ? `<span style="color: #4CAF50;">✅ ${escapeHtml(t('settings_form.enabled'))}</span> | ${escapeHtml(t('settings_form.moderation_quota', { aliyun: quota.aliyun || 0, tencent: quota.tencent || 0 }))}`
-                        : `<span style="color: #888;">⚪ ${escapeHtml(t('settings_form.disabled'))}</span> | ${escapeHtml(t('settings_form.moderation_skipped'))}`;
-                }
-            } catch (e) {
-                console.warn('获取审核状态失败:', e?.name || 'Error');
+                showState(confirmState(response));
+            } catch (_) {
+                if (current()) showUnknown(t('settings_form.moderation_read_failed'));
+            } finally {
+                busy = false;
+                if (current()) refreshModerationControls();
             }
-            
-            // 开关变化事件
-            moderationToggle.onchange = async () => {
-                if (!current() || moderationToggle.disabled) return;
-                const newState = moderationToggle.checked;
-                moderationToggle.disabled = true;
-                
-                try {
-                    await api.setSystemConfig('image_moderation', { enabled: newState });
-                    if (!current()) return;
-                    showToast(newState ? t('settings_form.moderation_enabled') : t('settings_form.moderation_disabled'), 'success');
-                    
-                    if (statusDiv) {
-                        statusDiv.innerHTML = newState
-                            ? `<span style="color: #4CAF50;">✅ ${escapeHtml(t('settings_form.enabled'))}</span>`
-                            : `<span style="color: #888;">⚪ ${escapeHtml(t('settings_form.disabled'))}</span> | ${escapeHtml(t('settings_form.moderation_skipped'))}`;
-                    }
-                } catch (e) {
-                    if (!current()) return;
-                    showToast(t('settings_form.save_failed'), 'error');
-                    moderationToggle.checked = !newState;  // 回滚
-                } finally {
-                    if (current()) moderationToggle.disabled = false;
-                }
-            };
-        }, 100);
+        };
+        retryButton.onclick = loadState;
+        moderationToggle.onchange = async () => {
+            if (!current() || saving || busy || !ready || moderationToggle.disabled) return;
+            const requested = moderationToggle.checked;
+            ready = false; busy = true;
+            statusDiv.textContent = t('settings_form.moderation_confirming');
+            refreshModerationControls();
+            try {
+                const result = await api.setSystemConfig('image_moderation', { enabled: requested });
+                if (!current()) return;
+                if (result?.status !== 'success') throw new Error('unconfirmed moderation save');
+                const response = await api.getSystemConfig('image_moderation');
+                if (!current()) return;
+                const enabled = confirmState(response);
+                showState(enabled);
+                showToast(enabled === requested
+                    ? t(enabled ? 'settings_form.moderation_enabled' : 'settings_form.moderation_disabled')
+                    : t('settings_form.moderation_changed'), enabled === requested ? 'success' : 'warning');
+            } catch (_) {
+                if (!current()) return;
+                showUnknown(t('settings_form.moderation_unconfirmed'));
+                showToast(t('settings_form.moderation_unconfirmed'), 'warning');
+            } finally {
+                busy = false;
+                if (current()) refreshModerationControls();
+            }
+        };
+        const initialRead = setTimeout(loadState, 100);
+        releaseModeration = () => {
+            clearTimeout(initialRead);
+            moderationToggle.onchange = retryButton.onclick = null;
+        };
+        refreshModerationControls();
     }
 
     // 加载本地界面背景预览（使用账号区分键）
@@ -503,7 +537,7 @@ export function createSettingsForm(initialUserData, onCancelCallback, onSaveSucc
         for (const [control] of lockedControls) control.disabled = true;
         const unlock = () => {
             for (const [control, disabled] of lockedControls) control.disabled = disabled;
-            saving = false; refreshSaveAvailability();
+            saving = false; refreshSaveAvailability(); refreshModerationControls();
         };
 
         try {

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

@@ -95,14 +95,13 @@ function _renderEmptyState() {
 /**
  * 🖼️ 生成头像 HTML 字符串
  */
-function _generateAvatarHtml(avatar, name, size) {
+function _generateAvatarHtml(avatar, name) {
     const initial = (name || 'U')[0].toUpperCase();
     // 🔒 XSS防护：avatar / name 均来自他人可修改的资料（昵称首字母可能是 < ），写入 HTML 前必须转义
     if (avatar) {
-        return `<img class="swr-avatar" alt="" src="${escapeHtml(avatar)}" style="width: ${size}px; height: ${size}px; border-radius: 50%; object-fit: cover; border: 1px solid #444; background: #333;">`;
+        return `<img class="swr-avatar prompt-card__avatar" alt="" src="${escapeHtml(avatar)}">`;
     }
-    const fontSize = Math.max(9, Math.round(size * 0.5));
-    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-card__avatar prompt-card__avatar--initial">${escapeHtml(initial)}</div>`;
 }
 
 /**
@@ -741,15 +740,7 @@ export function createPromptsView(currentUser, keyword = "") {
  */
 function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = () => true, captureNavigation = () => isCurrent) {
     const card = document.createElement("div");
-    card.className = "business-list-card";
-    Object.assign(card.style, {
-        background: "var(--comfy-menu-bg)",
-        borderRadius: "8px",
-        overflow: "hidden",
-        cursor: "pointer",
-        transition: "transform 0.2s, box-shadow 0.2s",
-        border: "1px solid var(--border-color, #333)"
-    });
+    card.className = "business-list-card prompt-card";
 
     // 格式化时间
     const timeStr = formatTime(prompt.created_at);
@@ -757,59 +748,53 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
     // 判断是否为视频封面
     const isVideo = prompt.media_type === "video";
 
-    // 价格徽标：免费绿色 / 💎价格金色
+    // 价格徽标
     const priceHtml = (prompt.price > 0)
-        ? `<span style="background: linear-gradient(135deg, #FFD700, #FFA000); color: #333; font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 10px;">💎 ${escapeHtml(prompt.price)}</span>`
-        : `<span style="background: rgba(76, 175, 80, 0.25); color: #4CAF50; font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(76, 175, 80, 0.5);">${t('prompt.free')}</span>`;
+        ? `<span class="prompt-card__badge prompt-card__badge--paid">💎 ${escapeHtml(prompt.price)}</span>`
+        : `<span class="prompt-card__badge prompt-card__badge--free">${t('prompt.free')}</span>`;
 
     card.innerHTML = `
         <!-- 封面图 -->
-        <div style="position: relative; width: 100%; padding-top: 100%; background: #111;">
-            <img src="${escapeHtml(prompt.cover_image || 'data:image/svg+xml,...')}"
-                 style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;"
-                 alt="">
+        <div class="prompt-card__cover">
+            <img class="prompt-card__image" src="${escapeHtml(prompt.cover_image || 'data:image/svg+xml,...')}" alt="">
             ${isVideo ? `
             <!-- 视频播放按钮 -->
-            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
-                        width: 48px; height: 48px; 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: 16px solid rgba(255,255,255,0.9);
-                            border-top: 10px solid transparent; border-bottom: 10px solid transparent;
-                            margin-left: 4px;"></div>
+            <div class="prompt-card__play">
+                <div class="prompt-card__play-icon"></div>
             </div>
             ` : ''}
             <!-- 价格徽标 -->
-            <div style="position: absolute; top: 8px; right: 8px; pointer-events: none;">
+            <div class="prompt-card__price">
                 ${priceHtml}
             </div>
             <!-- 🔒 付费锁标识 -->
             ${prompt.price > 0 ? `
-            <div style="position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.6); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; pointer-events: none;">🔒</div>
+            <div class="prompt-card__lock">🔒</div>
             ` : ''}
         </div>
-        
+
         <!-- 内容区 -->
-        <div style="padding: 10px;">
+        <div class="prompt-card__body">
             <!-- 标题 -->
             <button type="button" class="business-list-card__title">
                 ${escapeHtml(prompt.title)}
             </button>
-            
+
             <!-- 分类标签 -->
-            <div style="margin-bottom: 6px;">
-                <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: 10px; padding: 2px 8px; border-radius: 10px;">${escapeHtml(_catLabel(prompt.category || ''))}</span>
-                ${(Array.isArray(prompt.tags) && prompt.tags.length) ? prompt.tags.slice(0, 3).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: 10px; padding: 2px 6px; border-radius: 10px; margin-left: 4px;">#${escapeHtml(tag)}</span>`).join('') : ''}
+            <div class="prompt-card__tags">
+                <span class="prompt-card__badge prompt-card__badge--category">${escapeHtml(_catLabel(prompt.category || ''))}</span>
+                ${(Array.isArray(prompt.tags) && prompt.tags.length) ? prompt.tags.slice(0, 3).map(tag => `<span class="prompt-card__badge prompt-card__badge--tag">#${escapeHtml(tag)}</span>`).join('') : ''}
             </div>
-            
+
             <!-- 作者信息（SWR 缓存头像） -->
-            <div class="business-list-card__author" style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px;"></div>
-            
+            <div class="business-list-card__author prompt-card__author"></div>
+
             <!-- 互动数据 -->
-            <div style="display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #888));">
+            <div class="prompt-card__stats">
                 <span>❤️ ${escapeHtml(prompt.likes || 0)}</span>
                 <span>🔖 ${escapeHtml(prompt.favorites || 0)}</span>
                 <span>🔥 ${escapeHtml(prompt.views || 0)}</span>
-                <span style="margin-left: auto; font-size: 10px;">${escapeHtml(timeStr)}</span>
+                <span class="prompt-card__time">${escapeHtml(timeStr)}</span>
             </div>
         </div>
     `;
@@ -826,9 +811,9 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
         const name = cached?.name || account || '';
 
         // 渲染初始头像
-        const avatarHtml = _generateAvatarHtml(avatar, name, 18);
+        const avatarHtml = _generateAvatarHtml(avatar, name);
 
-        authorContainer.innerHTML = `${avatarHtml}<span class="swr-name" style="font-size: 11px; color: var(--rk-muted, var(--descrip-text, #999)); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${escapeHtml(name)}</span>`;
+        authorContainer.innerHTML = `${avatarHtml}<span class="swr-name prompt-card__name">${escapeHtml(name)}</span>`;
 
         // 后台静默校对
         getProfileWithSWR(account, api.getUserProfile, (profile) => {
@@ -839,7 +824,7 @@ function createPromptCard(prompt, currentUser = currentUserCache, isCurrent = ()
                 if (avatarEl.tagName === 'IMG') {
                     avatarEl.src = profile.avatar;
                 } else {
-                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, profile.name || name, 18);
+                    avatarEl.outerHTML = _generateAvatarHtml(profile.avatar, profile.name || name);
                 }
             }
             if (nameEl && profile.name) {

前端页面/social/未读角标工具.js

@@ -1,4 +1,4 @@
-import { captureRequestSession } from "../core/网络请求API.js";
+import { api, captureRequestSession } from "../core/网络请求API.js";
 import { getUser } from "../core/状态管理.js";
 
 const badgeGenerations = new WeakMap();
@@ -25,3 +25,14 @@ export function createUnreadBadgeUpdate(button, selector, account) {
 export function validUnreadCount(value) {
     return Number.isSafeInteger(value) && value >= 0 ? value : 0;
 }
+
+export async function loadUnreadCount(currentUser, bellBtn) {
+    const update = createUnreadBadgeUpdate(bellBtn, '#unread-badge', currentUser?.account);
+    if (!currentUser?.account || !bellBtn?.querySelector("#unread-badge")) return;
+    try {
+        const res = await api.getUnreadCount(currentUser.account);
+        if (res?.status === "success" && Number.isSafeInteger(res.unread_count) && res.unread_count >= 0) {
+            update.render(res.unread_count);
+        }
+    } catch (_) {}
+}

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

@@ -1,5 +1,6 @@
 // 前端页面/social/通知中心组件.js
-import { createUnreadBadgeUpdate } from "./未读角标工具.js";
+import { loadUnreadCount } from "./未读角标工具.js";
+export { loadUnreadCount };
 import { api, captureRequestSession, requestCancelManager } from "../core/网络请求API.js";
 import { openOtherUserProfileModal } from "../profile/个人中心视图.js";
 import { showToast, showConfirm } from "../components/UI交互提示组件.js";
@@ -275,14 +276,3 @@ export async function openNotificationCenter(currentUser, bellBtn) {
     } catch (_) { if (scope.isCurrent() && messages.length === 0) listArea.innerHTML = `<div class="notification-status" role="alert">${t('common.error')}</div>`; }
 
 }
-
-export async function loadUnreadCount(currentUser, bellBtn) {
-    const update = createUnreadBadgeUpdate(bellBtn, '#unread-badge', currentUser?.account);
-    if (!currentUser?.account || !bellBtn?.querySelector("#unread-badge")) return;
-    try {
-        const res = await api.getUnreadCount(currentUser.account);
-        if (res?.status === "success" && Number.isSafeInteger(res.unread_count) && res.unread_count >= 0) {
-            update.render(res.unread_count);
-        }
-    } catch (_) {}
-}

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

@@ -1350,6 +1350,7 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 .ranking-publish__field--wide { flex: 2 1 200px; min-width: 0; }
 .ranking-publish label:not(.ranking-publish__checkbox) { display: block; margin-bottom: 6px; color: inherit; font-weight: 600; overflow-wrap: anywhere; }
 .ranking-publish__required { color: var(--rk-danger, #ef5350); }
+.ranking-publish__security-emphasis { color: var(--rk-danger, #ef5350); }
 .ranking-publish .form-input { display: block; width: 100%; min-width: 0; min-height: 36px; padding: 8px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); border: 1px solid var(--rk-border, var(--border-color, #555)); color: inherit; border-radius: var(--rk-radius-sm, 6px); font: inherit; line-height: 1.5; }
 .ranking-publish .form-input::placeholder { color: var(--rk-muted, var(--descrip-text, #a4a4a4)); opacity: 1; }
 .ranking-publish__panel { min-width: 0; padding: 12px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius-sm, 6px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
@@ -1451,6 +1452,19 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 @media (hover: hover) { .resource-detail__button:hover:not(:disabled) { border-color: var(--rk-focus, #8ab4ff); } }
 @media (prefers-reduced-motion: reduce) { .resource-detail__button { transition: none; } }
 
+.resource-page { display: flex; flex-direction: column; gap: 15px; flex: 1; min-width: 0; min-height: 0; box-sizing: border-box; padding: 15px; overflow-y: auto; color: var(--rk-text, var(--fg-color, #ddd)); background: var(--rk-bg, var(--comfy-menu-bg, #202020)); font-size: 14px; overflow-wrap: anywhere; }
+.resource-page__back { align-self: flex-start; }
+.resource-page__section { min-width: 0; box-sizing: border-box; padding: 15px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: var(--rk-radius, 8px); background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.resource-page__heading { margin-bottom: 15px; font-size: 16px; font-weight: 600; line-height: 1.4; }
+.resource-page__description { line-height: 1.8; font-size: 13px; white-space: pre-wrap; }
+.resource-page__info { line-height: 1.6; }
+.resource-page__author { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
+.resource-page__author > div { min-width: 0; max-width: 100%; }
+.resource-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+.resource-page__thanks { margin-top: 10px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); }
+.resource-page__tips { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--rk-border, var(--border-color, #555)); }
+.resource-page__refund:not(:empty) { margin-top: 12px; }
+
 /* Install engine runtime UI also appears outside list-card details. */
 .resource-install__status { min-width: 0; color: var(--rk-text, var(--fg-color, #ddd)); overflow-wrap: anywhere; }
 .resource-install__confirmation { min-width: 0; }
@@ -1731,3 +1745,41 @@ button.ranking-rating__star { cursor: pointer; min-width: 28px; min-height: 28px
 .comfy-ranking-request-diagnostic button[aria-busy="true"] { opacity: .65; }
 .comfy-ranking-request-diagnostic__feedback { margin: 6px 0 0; overflow-wrap: anywhere; }
 .comfy-ranking-request-diagnostic summary:focus-visible { outline: 2px solid var(--rk-focus); outline-offset: 3px; }
+
+.comfy-ranking-root .hub-inline-load-state {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 16px;
+    flex: 1; min-height: 0; padding: 20px; overflow-wrap: anywhere;
+    color: var(--rk-muted, var(--descrip-text, #a4a4a4));
+}
+
+.ranking-settings-form .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--rk-accent, #64b5f6); outline-offset: 3px; }
+
+.prompt-card { min-width: 0; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 8px; background: var(--rk-panel, var(--comfy-menu-bg, #292929)); color: var(--rk-text, var(--fg-color, #ddd)); overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; }
+.prompt-card__cover { position: relative; width: 100%; padding-top: 100%; background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.prompt-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.prompt-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.prompt-card__play-icon { width: 0; height: 0; border-left: 16px solid white; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
+.prompt-card__price { position: absolute; top: 8px; right: 8px; max-width: calc(100% - 16px); pointer-events: none; }
+.prompt-card__badge { display: inline-block; box-sizing: border-box; min-width: 0; max-width: 100%; padding: 2px 8px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 10px; background: var(--rk-panel, var(--comfy-input-bg, #292929)); color: var(--rk-text, var(--fg-color, #ddd)); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
+.prompt-card__badge--paid { border-color: var(--rk-warning, #d97706); font-weight: bold; }
+.prompt-card__badge--free { border-color: var(--rk-success, #4caf50); font-weight: bold; }
+.prompt-card__badge--category { border-color: var(--rk-accent, #3b82f6); }
+.prompt-card__badge--tag { padding-inline: 6px; }
+.prompt-card__lock { position: absolute; bottom: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 50%; background: var(--rk-panel, var(--comfy-input-bg, #292929)); font-size: 12px; pointer-events: none; }
+.prompt-card__body { padding: 10px; min-width: 0; }
+.prompt-card .business-list-card__title { min-height: 28px; }
+.prompt-card .business-list-card__title:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+.prompt-card__tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin-bottom: 6px; }
+.prompt-card__author { display: flex; align-items: center; gap: 6px; min-width: 0; margin-bottom: 6px; }
+.prompt-card__avatar { box-sizing: border-box; width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid var(--rk-border, var(--border-color, #555)); border-radius: 50%; object-fit: cover; background: var(--rk-panel, var(--comfy-input-bg, #292929)); }
+.prompt-card__avatar--initial { display: flex; align-items: center; justify-content: center; color: var(--rk-text, var(--fg-color, #ddd)); font-size: 9px; font-weight: bold; }
+.prompt-card__name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); }
+.prompt-card__stats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; font-size: 11px; color: var(--rk-muted, var(--descrip-text, #a4a4a4)); overflow-wrap: anywhere; }
+.prompt-card__stats > span { min-width: 0; max-width: 100%; }
+.prompt-card__time { margin-left: auto; font-size: 10px; }
+@media (prefers-reduced-motion: reduce) { .prompt-card { transition: none; } }
+@media (forced-colors: active) {
+    .prompt-card__badge, .prompt-card__lock, .prompt-card__play { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
+    .prompt-card__play-icon { border-left-color: CanvasText; }
+}