From db09ef5dcc8d2daadedaf0784d18c63ec0b31280 Mon Sep 17 00:00:00 2001 From: DemonGatanjieu <1027066412@qq.com> Date: Sat, 12 Sep 2026 23:03:40 +0800 Subject: [PATCH] feat(prompt-studio): enhance card tactile affordance and auto-snap drop dock --- ARCHITECTURE.md | 3 +- web/modules/ui_prompt_composer.js | 118 ++++++++++++++++-- web/styles.css | 195 +++++++++++++++++++++++++----- 3 files changed, 278 insertions(+), 38 deletions(-) diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index 1a1af7a..38a3850 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -153,7 +153,7 @@ DOM or live LiteGraph state. features compact vertical spacing with an inline topbar hosting the preset name input (`.anomalous-prompt-name-input`), direct `[💾 保存方案]` button, secondary action dropdown (`[··· 更多]` for new draft, preset tags, and JSON export), and window close button (`[✕]`), completely eliminating bulky standalone metadata strips; in docked sidebar mode (`#anomalous-container.anomalous-docked`) and narrow screen layouts (<860px), adopts a Unified Dual-Zone Flow (上下联动一体流): completely eliminates clumsy tab switching (`[词卡库 | 拼装台 | 全部]`), arranging the Assembler Stage on top (`order: 1`, max-height 54%) and Candidate Cards Deck on bottom (`order: 2`, max-height 50%), both with independent scroll containers to ensure candidate cards and assembled Lego blocks remain simultaneously visible; the Cards Deck hosts candidate prompt cards in a compact 2-column chip grid (`repeat(auto-fill, minmax(130px, 1fr))`) with 1-tap instant assembly (`cardEl.onclick` adds card to the active track with `@keyframes anomalous-just-added` animated feedback) alongside native HTML5 drag-and-drop, - features restrained dark slate backgrounds (`#24262E`) with category-specific left accent borders (Base/Style/Subject/Trigger), + features tactile glassmorphic card styling (dual-layer elevation shadows, top edge highlight, and category glow accents), a physical drag grip (`⠿`), a usage tip banner (`💡 点击词卡或拖拽至右侧拼装台`), monospace prompt snippet chips, and high-visibility `[+ 加入拼装台]` action buttons with instant click feedback, minimalist empty state container (`.anomalous-source-empty`), a streamlined col-header holding a unified action button group (`[🎯 提取]`, `[📥 导入]`, `[➕ 新建]`), one-click canvas node prompt extraction (`🎯 提取`, reading selected ComfyUI text nodes like `CLIPTextEncode` with downstream link connection traversal for accurate negative conditioning detection, auto-generating categorised cards) and one-click Material Library batch sync (`📥 导入`, cancellable fetch scoped to `category=prompts`), plus on-demand persistent card creation @@ -162,6 +162,7 @@ DOM or live LiteGraph state. the Assembler Stage hosts the sequential Lego block track (`anomalous-assembly-track`), compact modular blocks (~52px height) allowing generous top-to-bottom sequence stacking, supports bidirectional drag-and-drop reordering with ghost indicator lines, role-aware up/down swapping, instant A/B bypass toggles (greyscale dimming without deleting), interactive category pills, one-click Smart Sort (`🪄 按分类排序`, Base ➔ Style ➔ Subject ➔ Trigger), + an interactive Auto-snap Dock (`.anomalous-assembly-snap-dock`) positioned at the bottom of the track that magnetically detects dragover across the empty lower track area to auto-snap dragged cards or blocks to the end with animated visual guidance, and a permanently visible sticky Action Dock (`.anomalous-prompt-action-dock`) at the bottom of the assembler stage: displays live synthesis statistics (`✨ X字 · Y块`), quick copy button (`[📋]`), expandable compiled text preview drawer (`[📄 最终文本 ▾]`), insertion position selector (`[在后 ▾] / [在前 ▾]`), and the ComfyUI canvas node direct injection bar (`[#ID 节点名称] [⬇️ 写入正向/负向]`), ensuring canvas node injection is always 1-click away and never buried inside collapsed drawers; `prompt_composition.js` provides bidirectional schema mapping (`planToWorkbenchDraft` and `workbenchDraftToSavedPlan`) ensuring 100% roundtrip data integrity across `anomalous-prompt-plan-v1` and `version: 2`, lossless legacy dual-role splitting and trailing text retention, diff --git a/web/modules/ui_prompt_composer.js b/web/modules/ui_prompt_composer.js index a8dd061..13e1d3c 100644 --- a/web/modules/ui_prompt_composer.js +++ b/web/modules/ui_prompt_composer.js @@ -444,6 +444,15 @@ function buildPromptComposer(owner, container, options = {}) { const newCardForm = text(leftPanel, 'div', '', 'anomalous-workbench-new-card-form'); newCardForm.style.display = 'none'; + // Usage Tip Banner + const tipBanner = text(leftPanel, 'div', '', 'anomalous-workbench-tip-banner'); + tipBanner.innerHTML = ` + + + + ${window.anomalous_browser_lang === 'zh' ? '点击词卡或拖拽至右侧拼装台，自由调换顺序' : 'Click card or drag to right stage to assemble'} + `; + // Source Cards List const sourceCardsList = text(leftPanel, 'div', '', 'anomalous-source-cards-list'); @@ -474,6 +483,47 @@ function buildPromptComposer(owner, container, options = {}) { // Blocks Container & Dropzone const blocksContainer = text(rightPanel, 'div', '', 'anomalous-mixer-blocks-container anomalous-assembly-track'); + blocksContainer.ondragover = (e) => { + e.preventDefault(); + const snapDock = blocksContainer.querySelector('.anomalous-assembly-snap-dock'); + if (snapDock && (e.target === blocksContainer || e.target.closest('.anomalous-assembly-snap-dock'))) { + snapDock.classList.add('is-drag-over'); + blocksContainer.classList.add('is-drag-over-end'); + } + }; + blocksContainer.ondragleave = (e) => { + if (!blocksContainer.contains(e.relatedTarget)) { + const snapDock = blocksContainer.querySelector('.anomalous-assembly-snap-dock'); + snapDock?.classList.remove('is-drag-over'); + blocksContainer.classList.remove('is-drag-over-end'); + } + }; + blocksContainer.ondrop = (e) => { + if (e.target === blocksContainer || e.target.closest('.anomalous-assembly-snap-dock')) { + e.preventDefault(); + const snapDock = blocksContainer.querySelector('.anomalous-assembly-snap-dock'); + snapDock?.classList.remove('is-drag-over'); + blocksContainer.classList.remove('is-drag-over-end'); + const jsonStr = e.dataTransfer.getData('application/json'); + if (jsonStr) { + try { + addSourceCardToMixer(JSON.parse(jsonStr)); + return; + } catch (err) {} + } + if (draggedBlockId) { + const fromIndex = draft.plan.parts.findIndex(p => p.id === draggedBlockId); + if (fromIndex >= 0) { + const [moved] = draft.plan.parts.splice(fromIndex, 1); + draft.plan.parts.push(moved); + syncDraftSynthesizedText(draft); + renderBlocksList(); + updateOutputPreview(); + } + } + } + }; + // Bottom Live Assembled Action Dock (Always visible sticky bar at bottom of assembler) const outputDeck = text(rightPanel, 'div', '', 'anomalous-mixer-deck-output anomalous-prompt-action-dock is-collapsed'); @@ -938,13 +988,7 @@ function buildPromptComposer(owner, container, options = {}) { filtered.forEach(card => { const cardEl = text(sourceCardsList, 'article', '', `anomalous-source-prompt-card is-cat-${card.category}`); cardEl.setAttribute('draggable', 'true'); - cardEl.title = window.anomalous_browser_lang === 'zh' ? '点击直接加入上方拼装台（也可拖拽）' : 'Click to add to mixer above (or drag)'; - - // Instant tap to add card to mixer - cardEl.onclick = (e) => { - if (e.target.closest('button') || e.target.closest('input')) return; - addSourceCardToMixer(card); - }; + cardEl.title = window.anomalous_browser_lang === 'zh' ? '点击直接加入右侧拼装台（也可按住拖拽）' : 'Click to add to stage (or drag)'; // Drag Start -> transfer prompt card payload cardEl.ondragstart = (e) => { @@ -970,6 +1014,9 @@ function buildPromptComposer(owner, container, options = {}) { const header = text(cardEl, 'div', '', 'anomalous-source-card-header'); const meta = CATEGORY_META[card.category] || CATEGORY_META.subject; + const grip = text(header, 'span', '⠿', 'anomalous-source-card-grip'); + grip.title = window.anomalous_browser_lang === 'zh' ? '按住拖拽至拼装台' : 'Drag to assemble'; + const badge = text(header, 'span', window.anomalous_browser_lang === 'zh' ? meta.zh : meta.en, 'anomalous-source-card-badge'); badge.style.color = meta.color; badge.style.backgroundColor = meta.bg; @@ -994,6 +1041,9 @@ function buildPromptComposer(owner, container, options = {}) { // Card Footer Actions const footer = text(cardEl, 'div', '', 'anomalous-source-card-footer'); + const hint = text(footer, 'span', '', 'anomalous-source-card-drag-hint'); + hint.innerHTML = `${window.anomalous_browser_lang === 'zh' ? '点击或拖拽' : 'Click or Drag'}`; + const actions = text(footer, 'div', '', 'anomalous-source-card-actions'); actions.style.marginLeft = 'auto'; @@ -1021,11 +1071,32 @@ function buildPromptComposer(owner, container, options = {}) { } const dockBtn = text(actions, 'button', '', 'anomalous-source-action-btn is-dock'); - dockBtn.innerHTML = `${window.anomalous_browser_lang === 'zh' ? '加入组合' : 'Add to Plan'}`; - dockBtn.title = window.anomalous_browser_lang === 'zh' ? '加入当前拼装组合' : 'Add into mixer track'; + dockBtn.innerHTML = `${window.anomalous_browser_lang === 'zh' ? '加入拼装台' : 'Add to Stage'}`; + dockBtn.title = window.anomalous_browser_lang === 'zh' ? '点击加入当前拼装台（也可直接点击卡片）' : 'Add into mixer track'; + + const handleCardAdd = () => { + cardEl.classList.add('is-clicked'); + setTimeout(() => cardEl.classList.remove('is-clicked'), 500); + const originalHtml = dockBtn.innerHTML; + dockBtn.innerHTML = `✓ ${window.anomalous_browser_lang === 'zh' ? '已加入' : 'Added'}`; + dockBtn.classList.add('is-success'); + setTimeout(() => { + if (dockBtn.isConnected) { + dockBtn.innerHTML = originalHtml; + dockBtn.classList.remove('is-success'); + } + }, 700); + addSourceCardToMixer(card); + }; + + cardEl.onclick = (e) => { + if (e.target.closest('button') || e.target.closest('input')) return; + handleCardAdd(); + }; + dockBtn.onclick = (e) => { e.stopPropagation(); - addSourceCardToMixer(card); + handleCardAdd(); }; }); } @@ -1310,6 +1381,22 @@ function buildPromptComposer(owner, container, options = {}) { updateOutputPreview(); }; }); + + // Interactive Auto-snap Dock at end of track + const snapDock = text(blocksContainer, 'div', '', 'anomalous-assembly-snap-dock'); + snapDock.innerHTML = ` +
+ + + + ${window.anomalous_browser_lang === 'zh' ? '拖拽卡片至此自动贴合至末尾' : 'Drop card here to snap to bottom'} +
+ `; + setupDropzoneListeners(snapDock); + snapDock.onclick = () => { + leftSearch?.focus?.(); + showWorkbenchToast(window.anomalous_browser_lang === 'zh' ? '点击左侧词卡即可直接加入此处' : 'Click any card on left to add here'); + }; } function setupDropzoneListeners(el) { @@ -1327,8 +1414,19 @@ function buildPromptComposer(owner, container, options = {}) { if (jsonStr) { try { addSourceCardToMixer(JSON.parse(jsonStr)); + return; } catch (err) {} } + if (draggedBlockId) { + const fromIndex = draft.plan.parts.findIndex(p => p.id === draggedBlockId); + if (fromIndex >= 0) { + const [moved] = draft.plan.parts.splice(fromIndex, 1); + draft.plan.parts.push(moved); + syncDraftSynthesizedText(draft); + renderBlocksList(); + updateOutputPreview(); + } + } }; } diff --git a/web/styles.css b/web/styles.css index 3565d5e..3066279 100644 --- a/web/styles.css +++ b/web/styles.css @@ -10836,49 +10836,86 @@ dialog.anomalous-gallery-viewer::backdrop { z-index: 1; } -/* Individual Source Prompt Card (Restrained Dark Grey Base with Category Left Border) */ -.anomalous-source-prompt-card { +/* Tip Banner for Prompt Studio Usage Guidance */ +.anomalous-workbench-tip-banner { + display: flex; + align-items: center; + gap: 6px; + padding: 6px 10px; + margin: 2px 0 8px; + background: rgba(56, 189, 248, 0.07); + border: 1px solid rgba(56, 189, 248, 0.2); border-radius: var(--amb-radius-control, 6px); - background: var(--amb-bg-card, #24262E); - border: 1px solid var(--amb-border, rgba(255, 255, 255, 0.08)); - border-left: 3.5px solid #64748b; + font-size: 0.72rem; + color: #93c5fd; + line-height: 1.35; + user-select: none; +} + +.anomalous-workbench-tip-banner .anomalous-tip-icon { + width: 14px; + height: 14px; + flex-shrink: 0; + color: #38bdf8; +} + +/* Individual Source Prompt Card (Tactile Skewed Glassmorphic Card Aesthetics) */ +.anomalous-source-prompt-card { + border-radius: 8px; + background: linear-gradient(180deg, #262935 0%, #1e2029 100%); + border: 1px solid rgba(255, 255, 255, 0.11); + border-left: 4px solid #64748b; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; cursor: grab; user-select: none; - transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); + transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .anomalous-source-prompt-card.is-cat-base { border-left-color: #38bdf8; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(56, 189, 248, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .theme-abyssal-scarlet .anomalous-source-prompt-card.is-cat-base { border-left-color: #dc143c; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(220, 20, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .anomalous-source-prompt-card.is-cat-style { border-left-color: #c084fc; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(192, 132, 252, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .anomalous-source-prompt-card.is-cat-subject { border-left-color: #4ade80; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(74, 222, 128, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .anomalous-source-prompt-card.is-cat-trigger { border-left-color: #fb923c; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), -2px 0 8px -3px rgba(251, 146, 60, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .anomalous-source-prompt-card:hover { - background: var(--amb-bg-card-hover, #2d303a); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.16)); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + background: linear-gradient(180deg, #2e3242 0%, #232633 100%); + border-color: rgba(255, 255, 255, 0.22); + transform: translateY(-2px); + box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .anomalous-source-prompt-card:active { cursor: grabbing; + transform: translateY(0); +} + +.anomalous-source-prompt-card.is-clicked { + transform: scale(0.97); + border-color: #38bdf8 !important; + box-shadow: 0 0 16px rgba(56, 189, 248, 0.45) !important; } .anomalous-source-prompt-card.is-dragging-source { @@ -10892,9 +10929,25 @@ dialog.anomalous-gallery-viewer::backdrop { gap: 6px; } +.anomalous-source-card-grip { + color: #64748b; + font-size: 11px; + line-height: 1; + margin-right: 1px; + letter-spacing: -1px; + cursor: grab; + opacity: 0.5; + transition: opacity 0.15s ease, color 0.15s ease; +} + +.anomalous-source-prompt-card:hover .anomalous-source-card-grip { + opacity: 0.95; + color: #94a3b8; +} + .anomalous-source-card-badge { - padding: 2px 6px; - border-radius: 4px; + padding: 2px 7px; + border-radius: 9999px; font-size: 0.66rem; font-weight: 600; border: 1px solid transparent; @@ -10902,8 +10955,9 @@ dialog.anomalous-gallery-viewer::backdrop { } .anomalous-source-card-title { - font-size: 0.8rem; - color: #e2e8f0; + font-size: 0.82rem; + font-weight: 600; + color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -10911,16 +10965,18 @@ dialog.anomalous-gallery-viewer::backdrop { } .anomalous-source-card-snippet { - font-size: 0.74rem; - color: #94a3b8; - line-height: 1.4; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + font-size: 0.72rem; + color: #cbd5e1; + line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - background: rgba(0, 0, 0, 0.2); - padding: 4px 6px; - border-radius: 4px; + background: rgba(0, 0, 0, 0.32); + border: 1px solid rgba(255, 255, 255, 0.06); + padding: 5px 8px; + border-radius: 5px; } .anomalous-source-card-footer { @@ -10934,7 +10990,10 @@ dialog.anomalous-gallery-viewer::backdrop { .anomalous-source-card-drag-hint { color: #64748b; - font-size: 0.68rem; + font-size: 0.66rem; + display: inline-flex; + align-items: center; + gap: 3px; } .anomalous-source-card-actions { @@ -10960,16 +11019,31 @@ dialog.anomalous-gallery-viewer::backdrop { } .anomalous-source-action-btn.is-dock { - background: rgba(255, 255, 255, 0.06); - border-color: rgba(255, 255, 255, 0.14); - color: var(--amb-text-main, #f1f5f9); - font-weight: 500; + background: rgba(56, 189, 248, 0.12); + border-color: rgba(56, 189, 248, 0.35); + color: #38bdf8; + font-weight: 600; + border-radius: 5px; + padding: 3px 8px; + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 0.7rem; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .anomalous-source-action-btn.is-dock:hover { - background: var(--amb-bg-card-hover, rgba(255, 255, 255, 0.14)); - border-color: var(--amb-border-hover, rgba(255, 255, 255, 0.25)); - color: #ffffff; + background: #38bdf8; + color: #0b1329; + border-color: #38bdf8; + box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); +} + +.anomalous-source-action-btn.is-dock.is-success { + background: #22c55e !important; + border-color: #22c55e !important; + color: #ffffff !important; + box-shadow: 0 0 12px rgba(34, 197, 94, 0.5) !important; } .anomalous-source-action-btn.is-save-lib { @@ -11090,6 +11164,66 @@ dialog.anomalous-gallery-viewer::backdrop { background: rgba(45, 10, 20, 0.6); } +/* Interactive Auto-snap Dock at the bottom of Assembler blocks */ +.anomalous-assembly-snap-dock { + display: flex; + align-items: center; + justify-content: center; + min-height: 44px; + padding: 8px 14px; + border: 1.5px dashed rgba(255, 255, 255, 0.14); + border-radius: 8px; + background: rgba(0, 0, 0, 0.15); + cursor: pointer; + user-select: none; + transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); + margin-top: 6px; + color: #94a3b8; + font-size: 0.74rem; +} + +.anomalous-assembly-snap-dock:hover { + border-color: rgba(255, 255, 255, 0.28); + background: rgba(255, 255, 255, 0.04); + color: #e2e8f0; +} + +.anomalous-assembly-snap-dock.is-drag-over, +.anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock { + border-color: #38bdf8 !important; + background: rgba(56, 189, 248, 0.12) !important; + box-shadow: 0 0 18px rgba(56, 189, 248, 0.25), inset 0 0 10px rgba(56, 189, 248, 0.05) !important; + color: #38bdf8 !important; + transform: scale(1.01); +} + +.theme-abyssal-scarlet .anomalous-assembly-snap-dock.is-drag-over, +.theme-abyssal-scarlet .anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock { + border-color: #dc143c !important; + background: rgba(220, 20, 60, 0.15) !important; + box-shadow: 0 0 18px rgba(220, 20, 60, 0.3) !important; + color: #ff6b81 !important; +} + +.anomalous-snap-dock-content { + display: flex; + align-items: center; + gap: 6px; + font-weight: 500; + pointer-events: none; +} + +.anomalous-snap-icon { + width: 14px; + height: 14px; + transition: transform 0.2s ease; +} + +.anomalous-assembly-snap-dock.is-drag-over .anomalous-snap-icon, +.anomalous-assembly-track.is-drag-over-end .anomalous-assembly-snap-dock .anomalous-snap-icon { + transform: rotate(90deg) scale(1.15); +} + .anomalous-workbench-sub-actions { display: flex; align-items: center; @@ -12290,3 +12424,10 @@ button:hover .anomalous-btn-icon { padding: 1px 4px !important; font-size: 0.68rem !important; } + +#anomalous-container.anomalous-docked .anomalous-assembly-snap-dock { + min-height: 32px !important; + padding: 4px 8px !important; + font-size: 0.68rem !important; + margin-top: 3px !important; +}