Add files via upload

2026-01-02 01:30:24 +08:00
parent ca62c39543
commit 9734ca28e4
5 changed files with 456 additions and 429 deletions
--- a/modules/fourth-wall/fourth-wall.html
+++ b/modules/fourth-wall/fourth-wall.html
@@ -858,7 +858,7 @@ function renderContent(text) {
    if (!text) return '';
    let html = String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

-    html = html.replace(/\[(?:image|图片)\s*:\s*([^\]]+)\]/gi, (_, inner) => {
+    html = html.replace(/\[(?:img|图片)\s*:\s*([^\]]+)\]/gi, (_, inner) => {
        const tags = parseImageToken(inner);
        if (!tags) return _;
        return `<div class="fw-img-slot" data-raw="${encodeURIComponent(inner)}"></div>`;
@@ -900,6 +900,7 @@ function renderContent(text) {
    return html;
 }

+
 function renderMessages() {
    const container = document.getElementById('messages');
    const { history, isStreaming, editingIndex } = state;
--- a/modules/fourth-wall/fw-image.js
+++ b/modules/fourth-wall/fw-image.js
@@ -272,9 +272,9 @@ export async function handleGenerate(data, postToFrame) {

 export const IMG_GUIDELINE = `## 模拟图片
 如果需要发图、照片给对方时，可以在聊天文本中穿插以下格式行，进行图片模拟：
-[image: Subject, Appearance, Background, Atmosphere, Extra descriptors]
+[img: Subject, Appearance, Background, Atmosphere, Extra descriptors]
 - tag必须为英文，用逗号分隔，使用Danbooru风格的tag，5-15个tag
 - 第一个tag须固定为人物数量标签，如: 1girl, 1boy, 2girls, solo, etc.
- 可以多张照片: 每行一张 [image: ...]
+- 可以多张照片: 每行一张 [img: ...]
 - 当需要发送的内容尺度较大时加上nsfw相关tag
 - image部分也需要在<msg>内`;
--- a/modules/fourth-wall/fw-message-enhancer.js
+++ b/modules/fourth-wall/fw-message-enhancer.js
@@ -25,6 +25,7 @@ const CSS_INJECTED_KEY = 'xb-me-css-injected';

 let currentAudio = null;
 let imageObserver = null;
+let domObserver = null;  // ▼ 新增

 // ════════════════════════════════════════════════════════════════════════════
 // 初始化与清理
@@ -39,6 +40,7 @@ export async function initMessageEnhancer() {
    injectStyles();
    await loadVoices();
    initImageObserver();
+    initDomObserver();  // ▼ 新增
    
    events.on(event_types.CHAT_CHANGED, () => {
        clearQueue();
@@ -65,12 +67,99 @@ export function cleanupMessageEnhancer() {
        imageObserver = null;
    }
    
+    // ▼ 新增
+    if (domObserver) {
+        domObserver.disconnect();
+        domObserver = null;
+    }
+    
    if (currentAudio) {
        currentAudio.pause();
        currentAudio = null;
    }
 }

+// ════════════════════════════════════════════════════════════════════════════
+// DOM 变化观察器（新增）
+// ════════════════════════════════════════════════════════════════════════════
+
+function initDomObserver() {
+    if (domObserver) return;
+    
+    const chatContainer = document.getElementById('chat');
+    if (!chatContainer) {
+        // 如果 chat 容器还没加载，延迟重试
+        setTimeout(initDomObserver, 500);
+        return;
+    }
+    
+    // 用于防抖处理
+    let pendingTexts = new Set();
+    let debounceTimer = null;
+    
+    domObserver = new MutationObserver((mutations) => {
+        const settings = extension_settings[EXT_ID];
+        if (!settings?.fourthWall?.enabled) return;
+        
+        for (const mutation of mutations) {
+            let mesText = null;
+            
+            if (mutation.type === 'childList') {
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+                    
+                    if (node.classList?.contains('mes_text')) {
+                        mesText = node;
+                    } else if (node.classList?.contains('mes')) {
+                        mesText = node.querySelector('.mes_text');
+                    } else {
+                        mesText = node.querySelector?.('.mes_text');
+                    }
+                    
+                    if (mesText && hasUnrenderedPlaceholders(mesText)) {
+                        pendingTexts.add(mesText);
+                    }
+                }
+            }
+            
+            if (mutation.target?.classList?.contains('mes_text')) {
+                if (hasUnrenderedPlaceholders(mutation.target)) {
+                    pendingTexts.add(mutation.target);
+                }
+            } else if (mutation.target?.closest?.('.mes_text')) {
+                const target = mutation.target.closest('.mes_text');
+                if (hasUnrenderedPlaceholders(target)) {
+                    pendingTexts.add(target);
+                }
+            }
+        }
+        
+        if (pendingTexts.size > 0 && !debounceTimer) {
+            debounceTimer = setTimeout(() => {
+                pendingTexts.forEach(mesText => {
+                    if (document.contains(mesText)) {
+                        enhanceMessageContent(mesText);
+                    }
+                });
+                pendingTexts.clear();
+                debounceTimer = null;
+            }, 50);
+        }
+    });
+    
+    domObserver.observe(chatContainer, {
+        childList: true,
+        subtree: true,
+    });
+}
+
+function hasUnrenderedPlaceholders(mesText) {
+    if (!mesText) return false;
+    const html = mesText.innerHTML;
+    return /\[(?:img|图片)\s*:\s*[^\]]+\]/i.test(html) ||
+           /\[(?:voice|语音)\s*:[^\]]+\]/i.test(html);
+}
+
 // ════════════════════════════════════════════════════════════════════════════
 // 事件处理
 // ════════════════════════════════════════════════════════════════════════════
@@ -271,7 +360,7 @@ function enhanceMessageContent(container) {
    let enhanced = html;
    let hasChanges = false;
    
-    enhanced = enhanced.replace(/\[(?:image|图片)\s*:\s*([^\]]+)\]/gi, (match, inner) => {
+    enhanced = enhanced.replace(/\[(?:img|图片)\s*:\s*([^\]]+)\]/gi, (match, inner) => {
        const tags = parseImageToken(inner);
        if (!tags) return match;
        hasChanges = true;
--- a/modules/novel-draw/gallery-cache.js
+++ b/modules/novel-draw/gallery-cache.js
--- a/modules/novel-draw/novel-draw.js
+++ b/modules/novel-draw/novel-draw.js
@@ -1545,7 +1545,74 @@ async function removePlaceholder(container) {
    container.remove();
    showToast('占位符已移除');
 }
-
+// ═══════════════════════════════════════════════════════════════════════════
+// 图片懒加载
+// ═══════════════════════════════════════════════════════════════════════════
+let slotObserver = null;
+function initSlotObserver() {
+    if (slotObserver) return;
+    
+    slotObserver = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (!entry.isIntersecting) return;
+            const slot = entry.target;
+            if (slot.dataset.loaded === '1' || slot.dataset.loading === '1') return;
+            slot.dataset.loading = '1';
+            loadSlotImage(slot);
+        });
+    }, { rootMargin: '200px 0px', threshold: 0.01 });
+}
+async function loadSlotImage(slot) {
+    const slotId = slot.dataset.slotId;
+    const messageId = parseInt(slot.dataset.mesid);
+    
+    try {
+        const displayData = await getDisplayPreviewForSlot(slotId);
+        
+        if (displayData.isFailed) {
+            slot.outerHTML = buildFailedPlaceholderHtml({
+                slotId, messageId,
+                tags: displayData.failedInfo?.tags || '',
+                positive: displayData.failedInfo?.positive || '',
+                errorType: displayData.failedInfo?.errorType || ErrorType.CACHE_LOST.label,
+                errorMessage: displayData.failedInfo?.errorMessage || ErrorType.CACHE_LOST.desc
+            });
+        } else if (displayData.hasData && displayData.preview) {
+            const url = displayData.preview.savedUrl || `data:image/png;base64,${displayData.preview.base64}`;
+            slot.outerHTML = buildImageHtml({
+                slotId,
+                imgId: displayData.preview.imgId,
+                url,
+                tags: displayData.preview.tags,
+                positive: displayData.preview.positive,
+                messageId,
+                state: displayData.preview.savedUrl ? ImageState.SAVED : ImageState.PREVIEW,
+                historyCount: displayData.historyCount,
+                currentIndex: 0
+            });
+        } else {
+            slot.outerHTML = buildFailedPlaceholderHtml({ 
+                slotId, messageId, tags: '', positive: '', 
+                errorType: ErrorType.CACHE_LOST.label, 
+                errorMessage: ErrorType.CACHE_LOST.desc 
+            });
+        }
+    } catch (e) {
+        slot.dataset.loading = '';
+    }
+}
+function buildLoadingPlaceholderHtml(slotId, messageId) {
+    return `<div class="xb-nd-img xb-nd-loading-slot" data-slot-id="${slotId}" data-mesid="${messageId}" style="margin:0.8em 0;text-align:center;padding:20px;background:rgba(0,0,0,0.03);border:1px dashed rgba(255,255,255,0.1);border-radius:14px;">
+        <div style="color:rgba(255,255,255,0.4);font-size:12px;">📷 滚动加载</div>
+    </div>`;
+}
+function hydrateSlots(container) {
+    initSlotObserver();
+    container.querySelectorAll('.xb-nd-loading-slot:not([data-observed])').forEach(slot => {
+        slot.dataset.observed = '1';
+        slotObserver.observe(slot);
+    });
+}
 // ═══════════════════════════════════════════════════════════════════════════
 // 预览渲染
 // ═══════════════════════════════════════════════════════════════════════════
@@ -1560,59 +1627,25 @@ async function renderPreviewsForMessage(messageId) {
    
    const $mesText = $(`#chat .mes[mesid="${messageId}"] .mes_text`);
    if (!$mesText.length) return;
+    
    let html = $mesText.html();
    let replaced = false;
    
    for (const slotId of slotIds) {
        if (html.includes(`data-slot-id="${slotId}"`)) continue;
        
-        const displayData = await getDisplayPreviewForSlot(slotId);
        const placeholder = createPlaceholder(slotId);
        const escapedPlaceholder = placeholder.replace(/[[\]]/g, '\\$&');
        if (!new RegExp(escapedPlaceholder).test(html)) continue;
        
-        let imgHtml;
-        if (displayData.isFailed) {
-            imgHtml = buildFailedPlaceholderHtml({
-                slotId,
-                messageId,
-                tags: displayData.failedInfo?.tags || '',
-                positive: displayData.failedInfo?.positive || '',
-                errorType: displayData.failedInfo?.errorType || ErrorType.CACHE_LOST.label,
-                errorMessage: displayData.failedInfo?.errorMessage || ErrorType.CACHE_LOST.desc
-            });
-        } else if (displayData.hasData && displayData.preview) {
-            const url = displayData.preview.savedUrl || `data:image/png;base64,${displayData.preview.base64}`;
-            const allPreviews = await getPreviewsBySlot(slotId);
-            const successPreviews = allPreviews.filter(p => p.status !== 'failed' && p.base64);
-            const currentIndex = successPreviews.findIndex(p => p.imgId === displayData.preview.imgId);
-            imgHtml = buildImageHtml({
-                slotId,
-                imgId: displayData.preview.imgId,
-                url,
-                tags: displayData.preview.tags,
-                positive: displayData.preview.positive,
-                messageId,
-                state: displayData.preview.savedUrl ? ImageState.SAVED : ImageState.PREVIEW,
-                historyCount: displayData.historyCount,
-                currentIndex: currentIndex >= 0 ? currentIndex : 0
-            });
-        } else {
-            imgHtml = buildFailedPlaceholderHtml({ 
-                slotId, 
-                messageId, 
-                tags: '', 
-                positive: '', 
-                errorType: ErrorType.CACHE_LOST.label, 
-                errorMessage: ErrorType.CACHE_LOST.desc 
-            });
-        }
-        html = html.replace(new RegExp(escapedPlaceholder, 'g'), imgHtml);
+        const loadingHtml = buildLoadingPlaceholderHtml(slotId, messageId);
+        html = html.replace(new RegExp(escapedPlaceholder, 'g'), loadingHtml);
        replaced = true;
    }
    
    if (replaced && !isMessageBeingEdited(messageId)) {
        $mesText.html(html);
+        hydrateSlots($mesText[0]);
    }
 }

@@ -1620,7 +1653,9 @@ async function renderAllPreviews() {
    const ctx = getContext();
    const chat = ctx.chat || [];
    for (let i = 0; i < chat.length; i++) {
-        if (extractSlotIds(chat[i]?.mes).size > 0) await renderPreviewsForMessage(i);
+        if (extractSlotIds(chat[i]?.mes).size > 0) {
+            await renderPreviewsForMessage(i);
+        }
    }
 }

@@ -1630,7 +1665,7 @@ async function handleMessageRendered(data) {
 }

 async function handleChatChanged() {
-    await new Promise(r => setTimeout(r, 200));
+    await new Promise(r => setTimeout(r, 50));
    await renderAllPreviews();
 }

@@ -1642,6 +1677,20 @@ async function handleMessageModified(data) {
    await renderPreviewsForMessage(messageId);
 }

+function handleVisibilityChange() {
+    if (document.visibilityState === 'visible' && moduleInitialized) {
+        document.querySelectorAll('.xb-nd-loading-slot[data-observed="1"]').forEach(slot => {
+            if (slot.dataset.loaded !== '1' && slot.dataset.loading !== '1') {
+                const rect = slot.getBoundingClientRect();
+                if (rect.bottom >= 0 && rect.top <= window.innerHeight + 200) {
+                    slot.dataset.loading = '1';
+                    loadSlotImage(slot);
+                }
+            }
+        });
+    }
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
 // 多图生成
 // ═══════════════════════════════════════════════════════════════════════════
@@ -2375,6 +2424,8 @@ export async function initNovelDraw() {
    events.on(event_types.MESSAGE_SWIPED, handleMessageModified);
    events.on(event_types.GENERATION_ENDED, async () => { try { await autoGenerateForLastAI(); } catch (e) { console.error('[NovelDraw]', e); } });

+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
    window.xiaobaixNovelDraw = {
        getSettings,
        saveSettings,
@@ -2416,7 +2467,14 @@ export async function cleanupNovelDraw() {
    destroyGalleryCache();
    overlayCreated = false;
    frameReady = false;
+    
+    if (slotObserver) {
+        slotObserver.disconnect();
+        slotObserver = null;
+    }
+    
    window.removeEventListener('message', handleFrameMessage);
+    document.removeEventListener('visibilitychange', handleVisibilityChange);
    document.getElementById('xiaobaix-novel-draw-overlay')?.remove();

    const { destroyFloatingPanel } = await import('./floating-panel.js');