+
+
+
+ 📊
+ 结果
+ -
+
+
+ 💡
+ 原因
+ -
+
+
+ ⏱
+ 耗时
+ -
+
+
+
+
`;
- document.body.appendChild(floatEl);
- cacheDOM();
- applyPosition();
- bindEvents();
-
- window.addEventListener('resize', applyPosition);
+ return el;
}
-function bindEvents() {
- const capsule = $cache.capsule;
- if (!capsule) return;
+function cacheDOM(panelData) {
+ const el = panelData.root;
+ if (!el) return;
- capsule.addEventListener('pointerdown', onPointerDown, { passive: false });
- capsule.addEventListener('pointermove', onPointerMove, { passive: false });
- capsule.addEventListener('pointerup', onPointerUp, { passive: false });
- capsule.addEventListener('pointercancel', onPointerUp, { passive: false });
+ panelData.$cache = {
+ statusIcon: el.querySelector('.nd-status-icon'),
+ statusText: el.querySelector('.nd-status-text'),
+ result: el.querySelector('.nd-result'),
+ errorRow: el.querySelector('.nd-error-row'),
+ error: el.querySelector('.nd-error'),
+ time: el.querySelector('.nd-time'),
+ presetSelect: el.querySelector('.nd-preset-select'),
+ sizeSelect: el.querySelector('.nd-size-select'),
+ autoToggle: el.querySelector('.nd-auto-toggle'),
+ };
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 状态管理（每个面板独立）
+// ═══════════════════════════════════════════════════════════════════════════
+
+function setState(messageId, state, data = {}) {
+ const panelData = panelMap.get(messageId);
+ if (!panelData?.root) return;
- $cache.presetSelect?.addEventListener('change', handlePresetChange);
- $cache.sizeSelect?.addEventListener('change', handleSizeChange);
- $cache.autoToggle?.addEventListener('click', handleAutoToggle);
+ const el = panelData.root;
+ panelData.state = state;
- floatEl.querySelector('#nd-settings-btn')?.addEventListener('click', () => {
- floatEl.classList.remove('expanded');
+ // 清除旧定时器
+ if (panelData.autoResetTimer) {
+ clearTimeout(panelData.autoResetTimer);
+ panelData.autoResetTimer = null;
+ }
+ if (state !== FloatState.COOLDOWN && panelData.cooldownRafId) {
+ cancelAnimationFrame(panelData.cooldownRafId);
+ panelData.cooldownRafId = null;
+ panelData.cooldownEndTime = 0;
+ }
+
+ // 移除状态类
+ el.classList.remove('working', 'cooldown', 'success', 'partial', 'error', 'show-detail');
+
+ const { statusIcon, statusText } = panelData.$cache;
+
+ switch (state) {
+ case FloatState.IDLE:
+ panelData.result = { success: 0, total: 0, error: null, startTime: 0 };
+ break;
+ case FloatState.LLM:
+ el.classList.add('working');
+ panelData.result.startTime = Date.now();
+ if (statusIcon) { statusIcon.textContent = '⏳'; statusIcon.className = 'nd-status-icon nd-spin'; }
+ if (statusText) statusText.textContent = '分析';
+ break;
+ case FloatState.GEN:
+ el.classList.add('working');
+ if (statusIcon) { statusIcon.textContent = '🎨'; statusIcon.className = 'nd-status-icon nd-spin'; }
+ if (statusText) statusText.textContent = `${data.current || 0}/${data.total || 0}`;
+ panelData.result.total = data.total || 0;
+ break;
+ case FloatState.COOLDOWN:
+ el.classList.add('cooldown');
+ if (statusIcon) { statusIcon.textContent = '⏳'; statusIcon.className = 'nd-status-icon nd-spin'; }
+ startCooldownTimer(panelData, data.duration);
+ break;
+ case FloatState.SUCCESS:
+ el.classList.add('success');
+ if (statusIcon) { statusIcon.textContent = '✓'; statusIcon.className = 'nd-status-icon'; }
+ if (statusText) statusText.textContent = `${data.success}/${data.total}`;
+ panelData.result.success = data.success;
+ panelData.result.total = data.total;
+ panelData.autoResetTimer = setTimeout(() => setState(messageId, FloatState.IDLE), AUTO_RESET_DELAY);
+ break;
+ case FloatState.PARTIAL:
+ el.classList.add('partial');
+ if (statusIcon) { statusIcon.textContent = '⚠'; statusIcon.className = 'nd-status-icon'; }
+ if (statusText) statusText.textContent = `${data.success}/${data.total}`;
+ panelData.result.success = data.success;
+ panelData.result.total = data.total;
+ panelData.autoResetTimer = setTimeout(() => setState(messageId, FloatState.IDLE), AUTO_RESET_DELAY);
+ break;
+ case FloatState.ERROR:
+ el.classList.add('error');
+ if (statusIcon) { statusIcon.textContent = '✗'; statusIcon.className = 'nd-status-icon'; }
+ if (statusText) statusText.textContent = data.error?.label || '错误';
+ panelData.result.error = data.error;
+ panelData.autoResetTimer = setTimeout(() => setState(messageId, FloatState.IDLE), AUTO_RESET_DELAY);
+ break;
+ }
+}
+
+function startCooldownTimer(panelData, duration) {
+ panelData.cooldownEndTime = Date.now() + duration;
+
+ function tick() {
+ if (!panelData.cooldownEndTime) return;
+ const remaining = Math.max(0, panelData.cooldownEndTime - Date.now());
+ const statusText = panelData.$cache?.statusText;
+ if (statusText) {
+ statusText.textContent = `${(remaining / 1000).toFixed(1)}s`;
+ statusText.className = 'nd-status-text nd-countdown';
+ }
+ if (remaining <= 0) {
+ panelData.cooldownRafId = null;
+ panelData.cooldownEndTime = 0;
+ return;
+ }
+ panelData.cooldownRafId = requestAnimationFrame(tick);
+ }
+
+ panelData.cooldownRafId = requestAnimationFrame(tick);
+}
+
+function updateProgress(messageId, current, total) {
+ const panelData = panelMap.get(messageId);
+ if (!panelData?.root || panelData.state !== FloatState.GEN) return;
+ const statusText = panelData.$cache?.statusText;
+ if (statusText) statusText.textContent = `${current}/${total}`;
+}
+
+function updateDetailPopup(messageId) {
+ const panelData = panelMap.get(messageId);
+ if (!panelData?.root) return;
+
+ const { result: resultEl, errorRow, error: errorEl, time: timeEl } = panelData.$cache;
+ const { result, state } = panelData;
+
+ const elapsed = result.startTime
+ ? ((Date.now() - result.startTime) / 1000).toFixed(1)
+ : '-';
+
+ if (state === FloatState.SUCCESS || state === FloatState.PARTIAL) {
+ if (resultEl) {
+ resultEl.textContent = `${result.success}/${result.total} 成功`;
+ resultEl.className = `nd-detail-value ${state === FloatState.SUCCESS ? 'success' : 'warning'}`;
+ }
+ if (errorRow) errorRow.style.display = state === FloatState.PARTIAL ? 'flex' : 'none';
+ if (errorEl && state === FloatState.PARTIAL) {
+ errorEl.textContent = `${result.total - result.success} 张失败`;
+ }
+ } else if (state === FloatState.ERROR) {
+ if (resultEl) {
+ resultEl.textContent = '生成失败';
+ resultEl.className = 'nd-detail-value error';
+ }
+ if (errorRow) errorRow.style.display = 'flex';
+ if (errorEl) errorEl.textContent = result.error?.desc || '未知错误';
+ }
+
+ if (timeEl) timeEl.textContent = `${elapsed}s`;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 事件处理
+// ═══════════════════════════════════════════════════════════════════════════
+
+async function handleDrawClick(messageId) {
+ const panelData = panelMap.get(messageId);
+ if (!panelData || panelData.state !== FloatState.IDLE) return;
+
+ try {
+ await generateAndInsertImages({
+ messageId,
+ onStateChange: (state, data) => {
+ switch (state) {
+ case 'llm': setState(messageId, FloatState.LLM); break;
+ case 'gen': setState(messageId, FloatState.GEN, data); break;
+ case 'progress': setState(messageId, FloatState.GEN, data); break;
+ case 'cooldown': setState(messageId, FloatState.COOLDOWN, data); break;
+ case 'success':
+ if (data.aborted && data.success === 0) {
+ setState(messageId, FloatState.IDLE);
+ } else if (data.aborted || data.success < data.total) {
+ setState(messageId, FloatState.PARTIAL, data);
+ } else {
+ setState(messageId, FloatState.SUCCESS, data);
+ }
+ break;
+ }
+ }
+ });
+ } catch (e) {
+ console.error('[NovelDraw]', e);
+ if (e.message === '已取消') {
+ setState(messageId, FloatState.IDLE);
+ } else {
+ setState(messageId, FloatState.ERROR, { error: classifyError(e) });
+ }
+ }
+}
+
+async function handleAbort(messageId) {
+ try {
+ const { abortGeneration } = await import('./novel-draw.js');
+ if (abortGeneration()) {
+ setState(messageId, FloatState.IDLE);
+ toastr?.info?.('已中止');
+ }
+ } catch (e) {
+ console.error('[NovelDraw] 中止失败:', e);
+ }
+}
+
+function bindPanelEvents(panelData) {
+ const { messageId, root: el } = panelData;
+
+ el.querySelector('.nd-btn-draw')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ handleDrawClick(messageId);
+ });
+
+ el.querySelector('.nd-btn-menu')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ el.classList.remove('show-detail');
+ if (!el.classList.contains('expanded')) {
+ refreshPresetSelect(messageId);
+ refreshSizeSelect(messageId);
+ }
+ el.classList.toggle('expanded');
+ });
+
+ el.querySelector('.nd-layer-active')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const state = panelData.state;
+ if ([FloatState.LLM, FloatState.GEN, FloatState.COOLDOWN].includes(state)) {
+ handleAbort(messageId);
+ } else if ([FloatState.SUCCESS, FloatState.PARTIAL, FloatState.ERROR].includes(state)) {
+ updateDetailPopup(messageId);
+ el.classList.toggle('show-detail');
+ }
+ });
+
+ panelData.$cache.presetSelect?.addEventListener('change', (e) => {
+ const settings = getSettings();
+ settings.selectedParamsPresetId = e.target.value;
+ saveSettings(settings);
+ updateAllPresetSelects();
+ });
+
+ panelData.$cache.sizeSelect?.addEventListener('change', (e) => {
+ const settings = getSettings();
+ settings.overrideSize = e.target.value;
+ saveSettings(settings);
+ updateAllSizeSelects();
+ });
+
+ panelData.$cache.autoToggle?.addEventListener('click', () => {
+ const settings = getSettings();
+ settings.mode = settings.mode === 'auto' ? 'manual' : 'auto';
+ saveSettings(settings);
+ updateAutoModeUI();
+ });
+
+ el.querySelector('.nd-settings-btn')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ el.classList.remove('expanded');
openNovelDrawSettings();
});
- document.addEventListener('click', handleOutsideClick, { passive: true });
+ const closeMenu = (e) => {
+ if (!el.contains(e.target)) {
+ el.classList.remove('expanded', 'show-detail');
+ }
+ };
+ document.addEventListener('click', closeMenu, { passive: true });
+
+ panelData._cleanup = () => {
+ document.removeEventListener('click', closeMenu);
+ };
}
-function handleOutsideClick(e) {
- if (floatEl && !floatEl.contains(e.target)) {
- floatEl.classList.remove('expanded', 'show-detail');
+// ═══════════════════════════════════════════════════════════════════════════
+// 全局更新
+// ═══════════════════════════════════════════════════════════════════════════
+
+function updateAllPresetSelects() {
+ const settings = getSettings();
+ const presets = settings.paramsPresets || [];
+ const currentId = settings.selectedParamsPresetId;
+ const options = presets.map(p => ({
+ value: p.id,
+ label: p.name || 'Unnamed',
+ }));
+ panelMap.forEach((data) => {
+ const select = data.$cache?.presetSelect;
+ fillSelectOptions(select, options, currentId);
+ });
+}
+
+function updateAllSizeSelects() {
+ const settings = getSettings();
+ const current = settings.overrideSize || 'default';
+ const options = SIZE_OPTIONS.map(opt => ({ value: opt.value, label: opt.label }));
+ panelMap.forEach((data) => {
+ const select = data.$cache?.sizeSelect;
+ fillSelectOptions(select, options, current);
+ });
+}
+
+export function updateAutoModeUI() {
+ const isAuto = getSettings().mode === 'auto';
+ panelMap.forEach((data) => {
+ if (!data.root) return;
+ data.root.classList.toggle('auto-on', isAuto);
+ data.$cache.autoToggle?.classList.toggle('on', isAuto);
+ });
+}
+
+function refreshPresetSelect(messageId) {
+ const data = panelMap.get(messageId);
+ const select = data?.$cache?.presetSelect;
+ if (select) {
+ const settings = getSettings();
+ const presets = settings.paramsPresets || [];
+ const currentId = settings.selectedParamsPresetId;
+ const options = presets.map(p => ({
+ value: p.id,
+ label: p.name || 'Unnamed',
+ }));
+ fillSelectOptions(select, options, currentId);
}
}
+function refreshSizeSelect(messageId) {
+ const data = panelMap.get(messageId);
+ const select = data?.$cache?.sizeSelect;
+ if (select) {
+ const settings = getSettings();
+ const current = settings.overrideSize || 'default';
+ const options = SIZE_OPTIONS.map(opt => ({ value: opt.value, label: opt.label }));
+ fillSelectOptions(select, options, current);
+ }
+}
+
+export function refreshPresetSelectAll() {
+ updateAllPresetSelects();
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 面板挂载（懒加载）
+// ═══════════════════════════════════════════════════════════════════════════
+
+function mountPanel(messageEl, messageId) {
+ if (panelMap.has(messageId)) {
+ const existing = panelMap.get(messageId);
+ if (existing.root?.isConnected) return existing;
+ existing._cleanup?.();
+ panelMap.delete(messageId);
+ }
+
+ injectStyles();
+
+ const panelData = createPanelData(messageId);
+ const panel = createPanelElement(messageId);
+ panelData.root = panel;
+
+ const success = registerToToolbar(messageId, panel, {
+ position: 'right',
+ id: `novel-draw-${messageId}`
+ });
+
+ if (!success) {
+ return null;
+ }
+
+ cacheDOM(panelData);
+ bindPanelEvents(panelData);
+
+ panelMap.set(messageId, panelData);
+ return panelData;
+}
+
+function setupObserver() {
+ if (observer) return;
+
+ observer = new IntersectionObserver((entries) => {
+ const toMount = [];
+
+ for (const entry of entries) {
+ if (!entry.isIntersecting) continue;
+
+ const el = entry.target;
+ const mid = Number(el.getAttribute('mesid'));
+
+ if (pendingCallbacks.has(mid)) {
+ toMount.push({ el, mid });
+ pendingCallbacks.delete(mid);
+ observer.unobserve(el);
+ }
+ }
+
+ if (toMount.length > 0) {
+ requestAnimationFrame(() => {
+ for (const { el, mid } of toMount) {
+ mountPanel(el, mid);
+ }
+ });
+ }
+ }, { rootMargin: '300px' });
+}
+
+/**
+ * 确保面板存在
+ * @param {HTMLElement} messageEl - 消息元素
+ * @param {number} messageId - 消息 ID
+ * @param {Object} options
+ * @param {boolean} options.force - 强制立即挂载，跳过懒加载
+ */
+export function ensureNovelDrawPanel(messageEl, messageId, options = {}) {
+ const { force = false } = options;
+
+ injectStyles();
+
+ if (panelMap.has(messageId)) {
+ const existing = panelMap.get(messageId);
+ if (existing.root?.isConnected) return existing;
+ existing._cleanup?.();
+ panelMap.delete(messageId);
+ }
+
+ if (force) {
+ return mountPanel(messageEl, messageId);
+ }
+
+ const rect = messageEl.getBoundingClientRect();
+ if (rect.top < window.innerHeight + 500 && rect.bottom > -500) {
+ return mountPanel(messageEl, messageId);
+ }
+
+ setupObserver();
+ pendingCallbacks.set(messageId, true);
+ observer.observe(messageEl);
+
+ return null;
+}
+
+/**
+ * 为指定消息设置面板状态
+ * @param {number} messageId - 消息 ID
+ * @param {string} state - 状态
+ * @param {Object} data - 附加数据
+ */
+export function setStateForMessage(messageId, state, data = {}) {
+ let panelData = panelMap.get(messageId);
+
+ if (!panelData?.root?.isConnected) {
+ const messageEl = document.querySelector(`.mes[mesid="${messageId}"]`);
+ if (messageEl) {
+ panelData = ensureNovelDrawPanel(messageEl, messageId, { force: true });
+ }
+ }
+
+ if (!panelData) {
+ console.warn(`[NovelDraw] 无法为消息 ${messageId} 设置状态`);
+ return;
+ }
+
+ setState(messageId, state, data);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 清理
+// ═══════════════════════════════════════════════════════════════════════════
+
export function destroyFloatingPanel() {
- clearCooldownTimer();
+ panelMap.forEach((data, messageId) => {
+ if (data.autoResetTimer) clearTimeout(data.autoResetTimer);
+ if (data.cooldownRafId) cancelAnimationFrame(data.cooldownRafId);
+ data._cleanup?.();
+ if (data.root) removeFromToolbar(messageId, data.root);
+ });
+ panelMap.clear();
+ pendingCallbacks.clear();
- if (autoResetTimer) {
- clearTimeout(autoResetTimer);
- autoResetTimer = null;
- }
-
- window.removeEventListener('resize', applyPosition);
- document.removeEventListener('click', handleOutsideClick);
-
- floatEl?.remove();
- floatEl = null;
- dragState = null;
- currentState = FloatState.IDLE;
- $cache = {};
+ observer?.disconnect();
+ observer = null;
}
// ═══════════════════════════════════════════════════════════════════════════
// 导出
// ═══════════════════════════════════════════════════════════════════════════
-export { FloatState, setState, updateProgress, refreshPresetSelect, SIZE_OPTIONS };
+export {
+ FloatState,
+ updateProgress,
+ refreshPresetSelectAll as refreshPresetSelect,
+ SIZE_OPTIONS,
+};
diff --git a/modules/novel-draw/novel-draw.html b/modules/novel-draw/novel-draw.html
index 443f2d7..ff9eee6 100644
--- a/modules/novel-draw/novel-draw.html
+++ b/modules/novel-draw/novel-draw.html
@@ -662,7 +662,7 @@ select.input { cursor: pointer; }
diff --git a/modules/novel-draw/novel-draw.js b/modules/novel-draw/novel-draw.js
index 8e43133..cc71b60 100644
--- a/modules/novel-draw/novel-draw.js
+++ b/modules/novel-draw/novel-draw.js
@@ -43,7 +43,7 @@ const CONFIG_VERSION = 4;
const MAX_SEED = 0xFFFFFFFF;
const API_TEST_TIMEOUT = 15000;
const PLACEHOLDER_REGEX = /\[image:([a-z0-9\-_]+)\]/gi;
-const INITIAL_RENDER_MESSAGE_LIMIT = 10;
+const INITIAL_RENDER_MESSAGE_LIMIT = 1;
const events = createModuleEvents(MODULE_KEY);
@@ -103,6 +103,7 @@ let settingsCache = null;
let settingsLoaded = false;
let generationAbortController = null;
let messageObserver = null;
+let ensureNovelDrawPanelRef = null;
// ═══════════════════════════════════════════════════════════════════════════
// 样式
@@ -177,6 +178,13 @@ function ensureStyles() {
.xb-nd-edit-input:focus{border-color:rgba(212,165,116,0.5);outline:none}
.xb-nd-edit-input.scene{border-color:rgba(212,165,116,0.3)}
.xb-nd-edit-input.char{border-color:rgba(147,197,253,0.3)}
+.xb-nd-live-btn{position:absolute;bottom:10px;right:10px;z-index:5;padding:4px 8px;background:rgba(0,0,0,0.75);border:none;border-radius:12px;color:rgba(255,255,255,0.7);font-size:10px;font-weight:700;letter-spacing:0.5px;cursor:pointer;opacity:0.7;transition:all 0.2s;user-select:none}
+.xb-nd-live-btn:hover{opacity:1;background:rgba(0,0,0,0.85)}
+.xb-nd-live-btn.active{background:rgba(62,207,142,0.9);color:#fff;opacity:1;box-shadow:0 0 10px rgba(62,207,142,0.5)}
+.xb-nd-live-btn.loading{pointer-events:none;opacity:0.5}
+.xb-nd-img.mode-live .xb-nd-img-wrap>img{opacity:0!important;pointer-events:none}
+.xb-nd-live-canvas{border-radius:10px;overflow:hidden}
+.xb-nd-live-canvas canvas{display:block;border-radius:10px}
`;
document.head.appendChild(style);
}
@@ -770,6 +778,7 @@ function buildImageHtml({ slotId, imgId, url, tags, positive, messageId, state =
${displayVersion} / ${historyCount}
`;
+ const liveBtn = `
`;
const menuBusy = isBusy ? ' busy' : '';
const menuHtml = `