@dickpy/dsh-imagegen 1.5.5 → 1.5.6

package/src/client/CanvasWorkspace.tsx

@@ -9,16 +9,19 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, ty
 import type { CanvasAssetRef, CanvasConnection, CanvasDocument, CanvasNode, GenerateRequest, GenerationTask, HistoryEntry } from '../protocol.ts'
 import type { ImageGenApi } from './api.ts'
 import { tt } from './helpers.ts'
+import { TemplateLibrary } from './TemplateLibrary.tsx'
 import css from './canvas-workspace.module.css'
 
 type CanvasTool = 'select' | 'pan'
+type BackgroundMode = CanvasDocument['background']
 
 const MIN_SCALE = 0.05
 const MAX_SCALE = 5
 const GRID_SIZE = 48
 const IMAGE_NODE_SIZE = { width: 320, height: 320 }
 const TEXT_NODE_SIZE = { width: 280, height: 150 }
-const CONFIG_NODE_SIZE = { width: 240, height: 96 }
+const CONFIG_NODE_SIZE = { width: 320, height: 190 }
+const LEGACY_CONFIG_NODE_SIZE = { width: 240, height: 96 }
 const HISTORY_LIMIT = 60
 const WORLD_PAD = 12000
 
@@ -151,6 +154,16 @@ function nodesBounds(nodes: CanvasNode[]): { minX: number; minY: number; maxX: n
   }), { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity })
 }
 
+/** Enlarge config nodes still stored at the pre-expansion default so the
+ * roomier layout applies to existing canvases too. */
+function normalizeConfigNodeSizes(document: CanvasDocument): CanvasDocument {
+  const nodes = document.nodes.map(node => node.type === 'config'
+    && node.width === LEGACY_CONFIG_NODE_SIZE.width && node.height === LEGACY_CONFIG_NODE_SIZE.height
+    ? { ...node, width: CONFIG_NODE_SIZE.width, height: CONFIG_NODE_SIZE.height }
+    : node)
+  return nodes === document.nodes ? document : { ...document, nodes }
+}
+
 function summaryOf(document: CanvasDocument): ProjectSummary {
   return {
     id: document.id,
@@ -185,10 +198,10 @@ function nodeAnchor(node: CanvasNode, side: 'left' | 'right'): Point {
   return { x: side === 'right' ? node.x + node.width : node.x, y: node.y + node.height / 2 }
 }
 
-type ToolbarIconName = 'new' | 'select' | 'pan' | 'image' | 'text' | 'trash' | 'undo' | 'redo' | 'fit' | 'minimap' | 'background' | 'download' | 'duplicate' | 'sparkle' | 'send' | 'close' | 'deleteProject'
+type ToolbarIconName = 'new' | 'select' | 'pan' | 'image' | 'text' | 'trash' | 'undo' | 'redo' | 'fit' | 'minimap' | 'background' | 'template' | 'download' | 'duplicate' | 'sparkle' | 'send' | 'close' | 'deleteProject'
 
-function ToolbarIcon({ name }: { name: ToolbarIconName }): React.JSX.Element {
-  const common = { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.35, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, 'aria-hidden': true }
+function ToolbarIcon({ name, size = 16 }: { name: ToolbarIconName; size?: number }): React.JSX.Element {
+  const common = { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.35, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, 'aria-hidden': true }
   if (name === 'new') return <svg {...common}><path d="M8 3v10M3 8h10" /></svg>
   if (name === 'select') return <svg {...common}><path d="M3 2.5l9.3 6.2-4 1.1-1.5 3.7L3 2.5z" /></svg>
   if (name === 'pan') return <svg {...common}><path d="M8 2v12M2 8h12M5 5l3-3 3 3M5 11l3 3 3-3" /></svg>
@@ -199,7 +212,8 @@ function ToolbarIcon({ name }: { name: ToolbarIconName }): React.JSX.Element {
   if (name === 'redo') return <svg {...common}><path d="M13 7a5 5 0 1 0-1.5 4M13 3v4h-4" /></svg>
   if (name === 'fit') return <svg {...common}><path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" /></svg>
   if (name === 'minimap') return <svg {...common}><rect x="2" y="3" width="12" height="10" rx="1.5" /><path d="M5 6h3v4H5zM10 8h2v3h-2" /></svg>
-  if (name === 'background') return <svg {...common}><circle cx="8" cy="8" r="5.5" /><path d="M8 2.5v11M2.5 8h11M4 4.3c2.4 1.9 5.6 1.9 8 0M4 11.7c2.4-1.9 5.6-1.9 8 0" /></svg>
+  if (name === 'background') return <svg {...common}><rect x="2" y="4.5" width="10.5" height="9" rx="1.5" /><path d="M4.5 2h10a1.5 1.5 0 0 1 1.5 1.5V11M4.5 10.5l2.6-2.8 2.1 2.2 2.3-2.4 1.5 1.5" /></svg>
+  if (name === 'template') return <svg {...common}><path d="M8 3.6C6.9 2.5 5 2 2.5 2v10.6c2.5 0 4.4.5 5.5 1.6 1.1-1.1 3-1.6 5.5-1.6V2C11 2 9.1 2.5 8 3.6zM8 3.6V14" /></svg>
   if (name === 'download') return <svg {...common}><path d="M8 2.5v8M5 7.5l3 3 3-3M3 13.5h10" /></svg>
   if (name === 'duplicate') return <svg {...common}><rect x="5.5" y="5.5" width="8" height="8" rx="1.2" /><path d="M10.5 3h-7a.5.5 0 0 0-.5.5v7" /></svg>
   if (name === 'send') return <svg {...common}><path d="M14 2L7 9M14 2L9.5 14l-2.5-5L2 6.5 14 2z" /></svg>
@@ -208,8 +222,27 @@ function ToolbarIcon({ name }: { name: ToolbarIconName }): React.JSX.Element {
   return <svg {...common}><path d="M8 2l1.2 4.2L13.5 8l-4.3 1.8L8 14l-1.2-4.2L2.5 8l4.3-1.8L8 2z" /></svg>
 }
 
-function IconButton(props: { name: ToolbarIconName; label: string; active?: boolean; disabled?: boolean; onClick?: () => void }): React.JSX.Element {
-  return <button type="button" className={css.iconButton} data-active={props.active ? '' : undefined} aria-label={props.label} title={props.label} disabled={props.disabled} onClick={props.onClick}><ToolbarIcon name={props.name} /></button>
+function IconButton(props: {
+  name: ToolbarIconName
+  label: string
+  active?: boolean
+  disabled?: boolean
+  size?: number
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void
+  onMouseLeave?: () => void
+}): React.JSX.Element {
+  return <button
+    type="button"
+    className={css.iconButton}
+    data-active={props.active ? '' : undefined}
+    aria-label={props.label}
+    title={props.label}
+    disabled={props.disabled}
+    onClick={props.onClick}
+    onMouseEnter={props.onMouseEnter}
+    onMouseLeave={props.onMouseLeave}
+  ><ToolbarIcon name={props.name} size={props.size} /></button>
 }
 
 export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element {
@@ -228,6 +261,30 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
   const [createMenu, setCreateMenu] = useState<{ screen: Point; world: Point } | null>(null)
   const [minimapOpen, setMinimapOpen] = useState(true)
   const [pickerOpen, setPickerOpen] = useState(false)
+  const [backgroundMenu, setBackgroundMenu] = useState<Point | null>(null)
+  const [imageMenu, setImageMenu] = useState<Point | null>(null)
+  const menuCloseTimer = useRef<number | null>(null)
+  const clearMenuCloseTimer = (): void => {
+    if (menuCloseTimer.current !== null) { window.clearTimeout(menuCloseTimer.current); menuCloseTimer.current = null }
+  }
+  const scheduleMenuClose = useCallback((): void => {
+    clearMenuCloseTimer()
+    menuCloseTimer.current = window.setTimeout(() => { setBackgroundMenu(null); setImageMenu(null) }, 280)
+  }, [])
+  /** Open one dock menu anchored to its button (root-relative) and close the
+   *  other: the two menus are mutually exclusive. */
+  const openDockMenu = useCallback((kind: 'image' | 'background', button: HTMLElement): void => {
+    clearMenuCloseTimer()
+    const bounds = button.getBoundingClientRect()
+    const rootRect = rootRef.current?.getBoundingClientRect()
+    const screen: Point = { x: bounds.left + bounds.width / 2 - (rootRect?.left ?? 0), y: bounds.top - (rootRect?.top ?? 0) }
+    if (kind === 'image') { setImageMenu(screen); setBackgroundMenu(null) }
+    else { setBackgroundMenu(screen); setImageMenu(null) }
+  }, [])
+  const [libraryOpen, setLibraryOpen] = useState(false)
+  const [pickerTab, setPickerTab] = useState<'upload' | 'history' | 'gallery' | 'generate'>('upload')
+  const backgroundFileRef = useRef<HTMLInputElement>(null)
+  const imageFileRef = useRef<HTMLInputElement>(null)
   const [renamingTitle, setRenamingTitle] = useState(false)
   const [confirmDeleteProject, setConfirmDeleteProject] = useState(false)
   const [saveState, setSaveState] = useState<'loading' | 'saved' | 'saving' | 'error'>('loading')
@@ -242,6 +299,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
   const [composerCount, setComposerCount] = useState(1)
   const [composerBusy, setComposerBusy] = useState(false)
 
+  const rootRef = useRef<HTMLElement>(null)
   const viewportRef = useRef<HTMLDivElement>(null)
   const documentRef = useRef<CanvasDocument | null>(null)
   const selectedIdsRef = useRef<Set<string>>(selectedIds)
@@ -482,16 +540,25 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
     setComposerBusy(true)
     try {
       let image: string | undefined
+      let images: string[] | undefined
       let refName: string | undefined
       if (baseAsset !== undefined) {
         image = await assetToDataUrl(baseAsset)
         refName = 'canvas-reference.png'
+        const extras: string[] = []
+        for (const reference of referenceImages.slice(1, 4)) {
+          const asset = usableAsset(reference)
+          if (asset === undefined) continue
+          try { extras.push(await assetToDataUrl(asset)) } catch { /* skip unreadable reference */ }
+        }
+        if (extras.length > 0) images = extras
       }
       const footprint = nodeSizeFromRatio(composerSize, IMAGE_NODE_SIZE)
       const request: GenerateRequest = {
         mode: image === undefined ? 'text' : 'edit', model, prompt, size: composerSize, quality: composerQuality, n: count, detail: '',
         ...(defaultChannelId === undefined ? {} : { channelId: defaultChannelId }),
         ...(image === undefined ? {} : { image, refName }),
+        ...(images === undefined ? {} : { images }),
         canvas: {
           canvasId: current.id,
           ...(target === null ? {} : { sourceNodeId: referenceImages[0]?.id ?? target.id, parentNodeId: target.id, placement: 'right' as const }),
@@ -543,15 +610,24 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
     const baseAsset = references[0] !== undefined ? usableAsset(references[0]!) : undefined
     try {
       let image: string | undefined
+      let images: string[] | undefined
       let refName: string | undefined
       if (baseAsset !== undefined) {
         image = await assetToDataUrl(baseAsset)
         refName = 'canvas-reference.png'
+        const extras: string[] = []
+        for (const reference of references.slice(1, 4)) {
+          const asset = usableAsset(reference)
+          if (asset === undefined) continue
+          try { extras.push(await assetToDataUrl(asset)) } catch { /* skip unreadable reference */ }
+        }
+        if (extras.length > 0) images = extras
       }
       const request: GenerateRequest = {
         mode: image === undefined ? 'text' : 'edit', model, prompt, size: metadata.size ?? 'auto', quality: metadata.quality ?? 'auto', n: 1, detail: '',
         ...(defaultChannelId === undefined ? {} : { channelId: defaultChannelId }),
         ...(image === undefined ? {} : { image, refName }),
+        ...(images === undefined ? {} : { images }),
         canvas: { canvasId: current.id, sourceNodeId: references[0]?.id ?? sourceId, parentNodeId: node.id, placement: 'right' as const },
       }
       const task = await api.taskSubmit(request)
@@ -693,7 +769,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
       const first = list[0] === undefined ? await api.canvasCreate(tt('canvas.untitled')) : await api.canvasRead(list[0].id)
       if (disposed) return
       setProjects(list[0] === undefined ? [summaryOf(first)] : list)
-      setDocument(first)
+      setDocument(normalizeConfigNodeSizes(first))
       syncedRef.current = JSON.stringify(first)
       setSaveState('saved')
     }).catch(caught => { if (!disposed) { setError(caught instanceof Error ? caught.message : String(caught)); setSaveState('error') } })
@@ -770,7 +846,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
       if (documentRef.current === null) return
       const mod = event.ctrlKey || event.metaKey
       if (event.key === 'Escape') {
-        setContextMenu(null); setCreateMenu(null)
+        setContextMenu(null); setCreateMenu(null); setBackgroundMenu(null); setImageMenu(null)
         if (!isEditingTarget(event.target)) { setSelectedIds(new Set()); setSelectedConnectionId(null) }
         return
       }
@@ -847,6 +923,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
   const onViewportPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {
     const target = event.target instanceof Element ? event.target : null
     setContextMenu(null); setCreateMenu(null)
+    if (!target?.closest('[data-canvas-no-zoom]')) { setBackgroundMenu(null); setImageMenu(null) }
     const isBackground = target?.closest('[data-node-id],[data-connection-hit]') === null
     const shouldPan = event.button === 1 || (event.button === 0 && (tool === 'pan' || temporaryPanTool) && isBackground)
     if (shouldPan) {
@@ -1133,7 +1210,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
   const selectProject = useCallback(async (id: string): Promise<void> => {
     try {
       const next = await api.canvasRead(id)
-      setDocument(next); setSelectedIds(new Set()); setSelectedConnectionId(null)
+      setDocument(normalizeConfigNodeSizes(next)); setSelectedIds(new Set()); setSelectedConnectionId(null)
       syncedRef.current = JSON.stringify(next); setSaveState('saved')
       pastRef.current = []; futureRef.current = []; setHistoryVersion(version => version + 1)
     } catch (caught) { setError(caught instanceof Error ? caught.message : String(caught)) }
@@ -1175,10 +1252,52 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
   const cursorClass = tool === 'pan' || isSpaceOrCtrl ? css.panCursor : css.selectCursor
 
   const backgroundMode = document?.background ?? 'dots'
-  const cycleBackground = useCallback((): void => {
-    mutate(previous => ({ ...previous, background: previous.background === 'dots' ? 'lines' : previous.background === 'lines' ? 'blank' : 'dots' }))
+  const setBackgroundMode = useCallback((mode: BackgroundMode): void => {
+    mutate(previous => ({
+      ...previous,
+      background: mode,
+      ...(mode === 'image' ? {} : { backgroundImage: undefined }),
+    }))
+    setBackgroundMenu(null)
   }, [mutate])
 
+  const uploadBackgroundImage = useCallback(async (file: File): Promise<void> => {
+    try {
+      const dataUrl = await new Promise<string>((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result)); reader.onerror = () => reject(new Error('读取图片失败')); reader.readAsDataURL(file) })
+      const dimensions = await readImageSize(dataUrl)
+      const asset = await api.canvasUpload(dataUrl, dimensions.width, dimensions.height, { origin: 'upload', originId: 'canvas-background' })
+      mutate(previous => ({ ...previous, background: 'image', backgroundImage: asset.url }))
+      setBackgroundMenu(null)
+      setError(null)
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : String(caught))
+    }
+  }, [api, mutate])
+
+  const removeBackgroundImage = useCallback((): void => {
+    mutate(previous => ({ ...previous, background: 'dots', backgroundImage: undefined }))
+    setBackgroundMenu(null)
+  }, [mutate])
+
+  const applyTemplate = useCallback((prompt: string): void => {
+    const center = canvasCenter()
+    const config = createConfigNode(center)
+    const text = createTextNode()
+    const placed: CanvasNode = {
+      ...text,
+      x: Math.round(config.x - TEXT_NODE_SIZE.width - 80),
+      y: Math.round(config.y + (config.height - TEXT_NODE_SIZE.height) / 2),
+      metadata: { text: prompt, fontSize: 14 },
+    }
+    mutate(previous => ({
+      ...previous,
+      nodes: [...previous.nodes, placed, config],
+      connections: [...previous.connections, { id: newId('edge'), fromNodeId: placed.id, toNodeId: config.id }],
+    }))
+    setSelectedIds(new Set([config.id])); setSelectedConnectionId(null)
+    setLibraryOpen(false)
+  }, [canvasCenter, createConfigNode, createTextNode, mutate])
+
   const gridSize = GRID_SIZE * (document?.viewport.k ?? 1)
   const gridOffsetX = (document?.viewport.x ?? 0) % gridSize
   const gridOffsetY = (document?.viewport.y ?? 0) % gridSize
@@ -1227,13 +1346,21 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
             onChange={event => patchNode(node.id, { text: event.target.value })}
           />
         : <div className={css.nodeBody}>
+            {hasImage ? <div aria-hidden="true">
+              {metadata.model !== undefined && metadata.model !== ''
+                ? <span className={`${css.imageInfo} ${css.imageInfoLeft}`}>{metadata.model}</span>
+                : asset.origin === 'gallery' || asset.origin === 'history'
+                  ? <span className={`${css.imageInfo} ${css.imageInfoLeft}`}>{asset.origin === 'gallery' ? tt('canvas.fromGallery') : tt('canvas.fromHistory')}</span>
+                  : null}
+              {asset !== undefined && asset.width > 1 ? <span className={`${css.imageInfo} ${css.imageInfoRight}`}>{asset.width}×{asset.height}</span> : null}
+            </div> : null}
             {isGenerating
               ? <div className={css.nodeState}><span className={css.spinner} aria-hidden="true" /><span>{tt('canvas.generatingNode')}</span></div>
               : isError
                 ? <div className={css.nodeStateError}>{metadata.error ?? tt('canvas.generateFailed')}<button type="button" onClick={() => { void retryGeneration(node) }}>{tt('canvas.retry')}</button></div>
                 : hasImage
                   ? <img src={asset.url} alt={node.title} draggable={false} onDragStart={event => event.preventDefault()} />
-                  : <button type="button" className={css.nodeEmpty} onClick={() => setPickerOpen(true)}><ToolbarIcon name="image" /><span>{tt('canvas.emptyImageNode')}</span></button>}
+                  : <button type="button" className={css.nodeEmpty} onClick={() => imageFileRef.current?.click()}><ToolbarIcon name="image" /><span>{tt('canvas.emptyImageNode')}</span></button>}
           </div>}
       {isSelected
         ? <div className={css.resizeHandle} onPointerDown={event => handleResizeStart(event, node, 'bottom-right')} title={tt('canvas.resizeHint')} />
@@ -1300,11 +1427,12 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
     if (!composerVisible || document === null || composerTarget === null) return null
     const linkedCount = composerReferenceCount + composerTextCount
     const k = document.viewport.k
-    const centerX = document.viewport.x + (composerTarget.x + composerTarget.width / 2) * k
+    const topOffset = viewportRef.current?.offsetTop ?? 0
+    const centerX = topOffset * 0 + document.viewport.x + (composerTarget.x + composerTarget.width / 2) * k
     const clampedX = Math.min(Math.max(centerX, 292), Math.max(292, viewportSize.width - 292))
-    const belowY = document.viewport.y + (composerTarget.y + composerTarget.height) * k + 14
-    const top = belowY > viewportSize.height - 170
-      ? Math.max(64, document.viewport.y + composerTarget.y * k - 158)
+    const belowY = topOffset + document.viewport.y + (composerTarget.y + composerTarget.height) * k + 14
+    const top = belowY > viewportSize.height + topOffset - 170
+      ? Math.max(64, topOffset + document.viewport.y + composerTarget.y * k - 158)
       : belowY
     return <div className={css.composer} data-canvas-no-zoom="" style={{ left: clampedX - 280, top }}>
       <textarea
@@ -1449,7 +1577,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
     return { left: x1, top: y1, width: x2 - x1, height: y2 - y1 }
   })()
 
-  return <section className={css.root} data-canvas-workspace="">
+  return <section ref={rootRef} className={css.root} data-canvas-workspace="">
     <header className={css.topBar} data-canvas-no-zoom="">
       <select className={css.projectSelect} value={document?.id ?? ''} onChange={event => { void selectProject(event.target.value) }} aria-label={tt('canvas.project')}>
         {projects.map(project => <option key={project.id} value={project.id}>{project.title}</option>)}
@@ -1470,9 +1598,6 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
           />
         : <button type="button" className={css.titleButton} onDoubleClick={() => setRenamingTitle(true)} title={tt('canvas.renameHint')}>{document?.title ?? ''}</button>}
       <span className={css.topBarSpacer} />
-      <IconButton name="background" label={tt('canvas.background')} onClick={cycleBackground} />
-      <IconButton name="undo" label={tt('canvas.undo')} disabled={pastRef.current.length === 0} onClick={undo} />
-      <IconButton name="redo" label={tt('canvas.redo')} disabled={futureRef.current.length === 0} onClick={redo} />
       <span className={css.saveState} data-state={saveState}>{saveState === 'saving' ? tt('canvas.saving') : saveState === 'saved' ? tt('canvas.saved') : saveState === 'error' ? tt('canvas.saveFailed') : tt('canvas.loading')}</span>
     </header>
 
@@ -1496,7 +1621,16 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
       onDragOver={event => event.preventDefault()}
       onDrop={onDrop}
     >
-      <div className={css.grid} style={{ backgroundSize: `${gridSize}px ${gridSize}px`, backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px` }} data-mode={backgroundMode} aria-hidden="true" />
+      <div
+        className={css.grid}
+        style={backgroundMode === 'image' && document?.backgroundImage
+          ? { backgroundImage: `url(${document.backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center' }
+          : { backgroundSize: `${gridSize}px ${gridSize}px`, backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px` }}
+        data-mode={backgroundMode}
+        aria-hidden="true"
+      >
+        {backgroundMode === 'image' ? <div className={css.gridScrim} /> : null}
+      </div>
       <div className={css.world} style={{ transform: `translate(${document?.viewport.x ?? 0}px, ${document?.viewport.y ?? 0}px) scale(${document?.viewport.k ?? 1})` }}>
         {renderConnections()}
         {document?.nodes.map(renderNode)}
@@ -1505,17 +1639,123 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
       {emptyState}
     </div>
 
-    <div className={`${css.dock} ${cursorClass}`} data-canvas-no-zoom="">
-      <IconButton name="select" label={tt('canvas.toolSelect')} active={tool === 'select'} onClick={() => setTool('select')} />
-      <IconButton name="pan" label={tt('canvas.toolPan')} active={tool === 'pan'} onClick={() => setTool('pan')} />
+    <div
+      className={`${css.dock} ${cursorClass}`}
+      data-canvas-no-zoom=""
+      onPointerMove={event => {
+        const dock = event.currentTarget
+        const buttons = [...dock.querySelectorAll<HTMLButtonElement>('.iconButton')]
+        for (const button of buttons) {
+          const rect = button.getBoundingClientRect()
+          const distance = Math.abs(event.clientX - (rect.left + rect.width / 2)) / 40
+          button.style.setProperty('--dock-lift', `${Math.max(0, 4 - distance * 1.5)}px`)
+        }
+      }}
+      onPointerLeave={event => {
+        for (const button of event.currentTarget.querySelectorAll<HTMLButtonElement>('.iconButton')) button.style.removeProperty('--dock-lift')
+      }}
+    >
+      <IconButton name="select" size={18} label={tt('canvas.toolSelect')} active={tool === 'select'} onClick={() => setTool('select')} />
+      <IconButton name="pan" size={18} label={tt('canvas.toolPan')} active={tool === 'pan'} onClick={() => setTool('pan')} />
       <span className={css.dockDivider} />
-      <IconButton name="image" label={tt('canvas.addImage')} onClick={() => setPickerOpen(true)} />
-      <IconButton name="text" label={tt('canvas.addText')} onClick={() => placeNewNode(createTextNode())} />
-      <IconButton name="sparkle" label={tt('canvas.addConfigNode')} onClick={() => placeNewNode(createConfigNode())} />
+      <IconButton
+        name="image"
+        size={18}
+        label={tt('canvas.addImage')}
+        active={imageMenu !== null}
+        onClick={event => openDockMenu('image', event.currentTarget)}
+        onMouseEnter={event => openDockMenu('image', event.currentTarget)}
+        onMouseLeave={scheduleMenuClose}
+      />
+      <IconButton name="text" size={18} label={tt('canvas.addText')} onClick={() => placeNewNode(createTextNode())} />
+      <IconButton name="sparkle" size={18} label={tt('canvas.addConfigNode')} onClick={() => placeNewNode(createConfigNode())} />
+      <IconButton name="template" size={18} label={tt('canvas.templateLibrary')} active={libraryOpen} onClick={() => setLibraryOpen(previous => !previous)} />
+      <span className={css.dockDivider} />
+      <IconButton
+        name="background"
+        size={18}
+        label={tt('canvas.background')}
+        active={backgroundMenu !== null}
+        onClick={event => openDockMenu('background', event.currentTarget)}
+        onMouseEnter={event => openDockMenu('background', event.currentTarget)}
+        onMouseLeave={scheduleMenuClose}
+      />
+      <IconButton name="undo" size={18} label={tt('canvas.undo')} disabled={pastRef.current.length === 0} onClick={undo} />
+      <IconButton name="redo" size={18} label={tt('canvas.redo')} disabled={futureRef.current.length === 0} onClick={redo} />
       <span className={css.dockDivider} />
-      <IconButton name="trash" label={tt('canvas.delete')} disabled={selectedIds.size === 0 && selectedConnectionId === null} onClick={deleteSelection} />
+      <IconButton name="trash" size={18} label={tt('canvas.delete')} disabled={selectedIds.size === 0 && selectedConnectionId === null} onClick={deleteSelection} />
     </div>
 
+    {imageMenu !== null ? <div
+      className={css.backgroundMenu}
+      style={{ left: imageMenu.x, top: imageMenu.y - 10 }}
+      data-canvas-no-zoom=""
+      role="menu"
+      onMouseEnter={clearMenuCloseTimer}
+      onMouseLeave={scheduleMenuClose}
+    >
+      <button type="button" role="menuitem" onClick={() => { imageFileRef.current?.click(); setImageMenu(null) }}><ToolbarIcon name="image" size={16} />{tt('canvas.imageMenuUpload')}</button>
+      <button type="button" role="menuitem" onClick={() => { setPickerTab('gallery'); setPickerOpen(true); setImageMenu(null) }}><ToolbarIcon name="template" size={16} />{tt('canvas.imageMenuAssets')}</button>
+      <button type="button" role="menuitem" onClick={() => { setPickerTab('history'); setPickerOpen(true); setImageMenu(null) }}><ToolbarIcon name="undo" size={16} />{tt('canvas.imageMenuHistory')}</button>
+      <button type="button" role="menuitem" onClick={() => { setPickerTab('generate'); setPickerOpen(true); setImageMenu(null) }}><ToolbarIcon name="sparkle" size={16} />{tt('canvas.imageMenuGenerate')}</button>
+    </div> : null}
+    <input
+      ref={imageFileRef}
+      type="file"
+      accept="image/png,image/jpeg,image/webp,image/gif"
+      multiple
+      hidden
+      onChange={event => {
+        const files = [...(event.target.files ?? [])].filter(file => file.type.startsWith('image/'))
+        event.target.value = ''
+        if (files.length === 0) return
+        const world = canvasCenter()
+        void Promise.all(files.map(async file => {
+          const dataUrl = await new Promise<string>((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(String(reader.result)); reader.onerror = () => reject(new Error('读取图片失败')); reader.readAsDataURL(file) })
+          const dimensions = await readImageSize(dataUrl)
+          return api.canvasUpload(dataUrl, dimensions.width, dimensions.height, { origin: 'upload', originId: file.name })
+        })).then(assets => {
+          const current = documentRef.current
+          const selectedId = selectedIdsRef.current.size === 1 ? [...selectedIdsRef.current][0] : undefined
+          const selectedNode = current?.nodes.find(node => node.id === selectedId)
+          if (selectedNode?.type === 'image' && usableAsset(selectedNode) === undefined && assets[0] !== undefined) {
+            mutate(previous => ({ ...previous, nodes: previous.nodes.map(node => node.id === selectedNode.id ? { ...node, width: sizeForAsset(assets[0]!).width, height: sizeForAsset(assets[0]!).height, metadata: { ...nodeMetadata(node), asset: assets[0], status: 'success' as const, error: undefined } } : node) }))
+            if (assets.length > 1) addAssets(assets.slice(1), world)
+          } else addAssets(assets, world)
+        }).catch(caught => setError(caught instanceof Error ? caught.message : String(caught)))
+      }}
+    />
+    {backgroundMenu !== null ? <div
+      className={css.backgroundMenu}
+      style={{ left: backgroundMenu.x, top: backgroundMenu.y - 10 }}
+      data-canvas-no-zoom=""
+      role="menu"
+      onMouseEnter={clearMenuCloseTimer}
+      onMouseLeave={scheduleMenuClose}
+    >
+      {([
+        ['dots', tt('canvas.backgroundDots')],
+        ['lines', tt('canvas.backgroundLines')],
+        ['diagonal', tt('canvas.backgroundDiagonal')],
+        ['checker', tt('canvas.backgroundChecker')],
+        ['blank', tt('canvas.backgroundBlank')],
+      ] as const).map(([mode, label]) => <button key={mode} type="button" role="menuitem" data-active={backgroundMode === mode ? '' : undefined} onClick={() => setBackgroundMode(mode)}>{label}</button>)}
+      <span className={css.backgroundMenuDivider} />
+      <button type="button" role="menuitem" data-active={backgroundMode === 'image' ? '' : undefined} onClick={() => backgroundFileRef.current?.click()}>{tt('canvas.backgroundUpload')}</button>
+      {backgroundMode === 'image' && document?.backgroundImage ? <button type="button" role="menuitem" onClick={removeBackgroundImage}>{tt('canvas.backgroundRemove')}</button> : null}
+      <input
+        ref={backgroundFileRef}
+        type="file"
+        accept="image/png,image/jpeg,image/webp,image/gif"
+        hidden
+        onChange={event => {
+          const file = event.target.files?.[0]
+          if (file !== undefined) void uploadBackgroundImage(file)
+          event.target.value = ''
+        }}
+      />
+    </div> : null}
+
     <div className={css.zoomDock} data-canvas-no-zoom="">
       <IconButton name="minimap" label={minimapOpen ? tt('canvas.minimapClose') : tt('canvas.minimapOpen')} active={minimapOpen} onClick={() => setMinimapOpen(previous => !previous)} />
       <IconButton name="fit" label={tt('canvas.fitView')} onClick={fitView} />
@@ -1534,6 +1774,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
     {minimapOpen ? renderMinimap() : null}
     {renderComposer()}
     {renderContextMenu()}
+    {libraryOpen ? <TemplateLibrary api={api} onClose={() => setLibraryOpen(false)} onUse={applyTemplate} /> : null}
 
     {error !== null ? <div className={css.errorToast} role="status" data-canvas-no-zoom="">{error}<button type="button" aria-label={tt('canvas.dismiss')} onClick={() => setError(null)}><ToolbarIcon name="close" /></button></div> : null}
 
@@ -1545,6 +1786,7 @@ export function CanvasWorkspace(props: CanvasWorkspaceProps): React.JSX.Element
       defaultChannelId={defaultChannelId}
       canvasId={document?.id ?? ''}
       connected={connected}
+      initialTab={pickerTab}
       onClose={() => setPickerOpen(false)}
       onAssets={assets => { addAssets(assets); setPickerOpen(false) }}
       onTask={task => {
@@ -1572,12 +1814,13 @@ function ImagePicker(props: {
   defaultChannelId?: string
   canvasId: string
   connected: boolean
+  initialTab?: 'upload' | 'history' | 'gallery' | 'generate'
   onClose: () => void
   onAssets: (assets: CanvasAssetRef[]) => void
   onTask: (task: GenerationTask) => void
 }): React.JSX.Element {
   const { api, history, gallery, imageModels, defaultChannelId, canvasId, connected, onClose, onAssets } = props
-  const [tab, setTab] = useState<'upload' | 'history' | 'gallery' | 'generate'>('upload')
+  const [tab, setTab] = useState<'upload' | 'history' | 'gallery' | 'generate'>(props.initialTab ?? 'upload')
   const [selected, setSelected] = useState<string[]>([])
   const [dimensions, setDimensions] = useState<Record<string, { width: number; height: number }>>({})
   const [prompt, setPrompt] = useState('')