feat(frontend): Ronin Pro blueprint simple-stitch modes and multi input slots

- Stitch mode (vertical/horizontal/blend) and dynamic in1..inN ports; workflow graph v7

- Canvas multi connectors; parseWorkflowGraph keeps numbered ports; mixed-edge validation

- Home: Key S opens Sprite Sheet adjust; default sprite padding 0; misc UI tweaks

Made-with: Cursor

Author: systemchester

frontend/src/App.tsx

@@ -77,7 +77,7 @@ function App() {
   const { lang, setLang, t } = useLanguage()
   const [gemToken, setGemToken] = useState(() => getGemToken())
   const [mode, setMode] = useState<AppMode>(null)
-  /** 首页快捷键进入 RoninPro 子模块（如 R → 自定义缩放） */
+  /** 首页快捷键：R/T RoninPro 子模块、S → Sprite Sheet 调整等 */
   const [roninProDeepLink, setRoninProDeepLink] = useState<string | null>(null)
   const consumeRoninProDeepLink = useCallback(() => setRoninProDeepLink(null), [])
   const [imageSubMode, setImageSubMode] = useState<ImageSubMode | 'select'>('select')
@@ -96,7 +96,7 @@ function App() {
     max_frames: 300,
     target_size: { w: 256, h: 256 },
     transparent: true,
-    padding: 4,
+    padding: 0,
     spacing: 0,
     layout_mode: 'fixed_columns',
     columns: 4,
@@ -218,6 +218,23 @@ function App() {
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [mode])
 
+  /** 首页按 S 进入 Sprite Sheet 调整 */
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (mode !== null) return
+      if (e.code !== 'KeyS') return
+      if (e.ctrlKey || e.metaKey || e.altKey) return
+      const el = document.activeElement
+      const tag = el?.tagName?.toLowerCase()
+      if (tag === 'input' || tag === 'textarea') return
+      if (el instanceof HTMLElement && el.isContentEditable) return
+      e.preventDefault()
+      setMode('spriteadjust')
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [mode])
+
   const wastelandTheme: ThemeConfig = {
     token: {
       colorPrimary: '#b55233',

frontend/src/components/ImagePixelate.tsx

@@ -269,8 +269,8 @@ export default function ImagePixelate() {
   const [originalUrl, setOriginalUrl] = useState<string | null>(null)
   const [pixelSize, setPixelSize] = useState(8)
   const [mergeNearbyStrength, setMergeNearbyStrength] = useState(40)
-  const [advUpscale, setAdvUpscale] = useState(5)
-  const [advColors, setAdvColors] = useState(32)
+  const [advUpscale, setAdvUpscale] = useState(4)
+  const [advColors, setAdvColors] = useState(64)
   const [advScaleResult, setAdvScaleResult] = useState(1)
   const [advTransparent, setAdvTransparent] = useState(false)
   const [advStatusKey, setAdvStatusKey] = useState<string | null>(null)
@@ -517,7 +517,7 @@ export default function ImagePixelate() {
                       onChange={(v) => setAdvUpscale(v as number)}
                       style={{ width: 200, marginRight: 16 }}
                     />
-                    <InputNumber min={2} max={7} value={advUpscale} onChange={(v) => setAdvUpscale(v ?? 5)} style={{ width: 90 }} />
+                    <InputNumber min={2} max={7} value={advUpscale} onChange={(v) => setAdvUpscale(v ?? 4)} style={{ width: 90 }} />
                   </Space>
                   <Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>{t('pixelateAdvancedUpscaleHint')}</Text>
                 </div>
@@ -531,7 +531,7 @@ export default function ImagePixelate() {
                       onChange={setAdvColors}
                       style={{ width: 200, marginRight: 16 }}
                     />
-                    <InputNumber min={4} max={256} value={advColors} onChange={(v) => setAdvColors(v ?? 32)} style={{ width: 90 }} />
+                    <InputNumber min={4} max={256} value={advColors} onChange={(v) => setAdvColors(v ?? 64)} style={{ width: 90 }} />
                   </Space>
                   <Text type="secondary" style={{ fontSize: 12, display: 'block', marginTop: 4 }}>{t('pixelateAdvancedColorsHint')}</Text>
                 </div>

frontend/src/components/ParamsStep.tsx

@@ -537,7 +537,7 @@ export default function ParamsStep({ file, params, onParamsChange }: Props) {
   useEffect(() => {
     if (mattedFrames.length > 0) {
       const cols = Math.min(12, Math.max(4, Math.ceil(Math.sqrt(mattedFrames.length))))
-      form.setFieldsValue({ columns: cols, padding: 4, spacing: 0 })
+      form.setFieldsValue({ columns: cols, padding: 0, spacing: 0 })
     }
   }, [mattedFrames.length, form])
 
@@ -551,7 +551,7 @@ export default function ParamsStep({ file, params, onParamsChange }: Props) {
     if (mattedFrames.length === 0) return
     const targetW = form.getFieldValue('target_w') ?? videoSize?.w ?? 256
     const targetH = form.getFieldValue('target_h') ?? videoSize?.h ?? 256
-    const padding = form.getFieldValue('padding') ?? 4
+    const padding = form.getFieldValue('padding') ?? 0
     const spacing = form.getFieldValue('spacing') ?? 0
     const columns = form.getFieldValue('columns') ?? 4
     const timestamps = selectedFrameIndices.map((idx) => extractedFrames[idx]?.timestamp ?? 0)
@@ -965,7 +965,7 @@ export default function ParamsStep({ file, params, onParamsChange }: Props) {
         target_w: params.target_size?.w ?? 256,
         target_h: params.target_size?.h ?? 256,
         transparent: params.transparent ?? true,
-        padding: params.padding ?? 4,
+        padding: params.padding ?? 0,
         spacing: params.spacing ?? 0,
         layout_mode: params.layout_mode ?? 'fixed_columns',
         columns: params.columns ?? 4,
@@ -981,7 +981,7 @@ export default function ParamsStep({ file, params, onParamsChange }: Props) {
           max_frames: (v.max_frames as number) ?? 300,
           target_size: { w: (v.target_w as number) ?? 256, h: (v.target_h as number) ?? 256 },
           transparent: (v.transparent as boolean) ?? true,
-          padding: (v.padding as number) ?? 4,
+          padding: (v.padding as number) ?? 0,
           spacing: (v.spacing as number) ?? 0,
           layout_mode: (v.layout_mode as 'fixed_columns' | 'auto_square') ?? 'fixed_columns',
           columns: (v.columns as number) ?? 4,

frontend/src/components/RoninProCustomWorkflow.tsx

@@ -22,6 +22,7 @@ import {
   buildDefaultRearrangeGrid,
   computeWorkflowRunStrategy,
   createGraphNode,
+  getStitchInputSlotCount,
   parseWorkflowGraph,
   resizeRearrangeGrid,
   runDagExecution,
@@ -172,6 +173,33 @@ export default function RoninProCustomWorkflow({ onSendToFineProcess }: RoninPro
     )
   }, [])
 
+  const adjustStitchSlotCount = useCallback((id: string, delta: number) => {
+    let nextCount: number | null = null
+    setGraphNodes((list) => {
+      const node = list.find((x) => x.id === id && x.type === 'simpleStitchVertical')
+      if (!node) return list
+      const cur = getStitchInputSlotCount(node)
+      const next = Math.max(2, Math.min(16, cur + delta))
+      if (next === cur) return list
+      nextCount = next
+      return list.map((n) =>
+        n.id === id && n.type === 'simpleStitchVertical'
+          ? { ...n, params: { ...n.params, stitchSlotCount: next } }
+          : n
+      )
+    })
+    if (nextCount !== null) {
+      setGraphEdges((prev) =>
+        prev.filter((ed) => {
+          if (ed.target !== id) return true
+          const m = /^in(\d+)$/.exec(ed.targetPort ?? '')
+          if (!m) return true
+          return parseInt(m[1], 10) <= nextCount!
+        })
+      )
+    }
+  }, [])
+
   const updateCustomRearrangeDimension = useCallback(
     (id: string, key: 'splitCols' | 'splitRows' | 'outRows' | 'outCols', value: number) => {
       setGraphNodes((list) =>
@@ -850,8 +878,46 @@ export default function RoninProCustomWorkflow({ onSendToFineProcess }: RoninPro
               </div>
             </Space>
           )
-        case 'simpleStitchVertical':
-          return <Text style={{ color: '#8b93a5', fontSize: 11 }}>{t('roninProWorkflowSimpleStitchVerticalHint')}</Text>
+        case 'simpleStitchVertical': {
+          const slots = getStitchInputSlotCount(n)
+          return (
+            <Space direction="vertical" style={{ width: '100%' }} size="small">
+              <div>
+                <Text style={{ color: '#9aa3b5', fontSize: 11 }}>{t('roninProWorkflowStitchMode')}</Text>
+                <Select
+                  size="small"
+                  style={{ ...INPUT_FULL, marginTop: 4 }}
+                  value={Math.max(0, Math.min(2, Math.round(p.stitchMode ?? 0)))}
+                  options={[
+                    { value: 0, label: t('roninProWorkflowStitchModeVertical') },
+                    { value: 1, label: t('roninProWorkflowStitchModeHorizontal') },
+                    { value: 2, label: t('roninProWorkflowStitchModeOverlay') },
+                  ]}
+                  onChange={(v) => updateNodeParam(id, 'stitchMode', typeof v === 'number' ? v : 0)}
+                />
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                <Text style={{ color: '#9aa3b5', fontSize: 11 }}>{t('roninProWorkflowStitchInputSlots', { n: slots })}</Text>
+                <Button
+                  type="dashed"
+                  size="small"
+                  icon={<PlusOutlined />}
+                  disabled={slots >= 16}
+                  onClick={() => adjustStitchSlotCount(id, 1)}
+                />
+                <Button
+                  type="default"
+                  size="small"
+                  disabled={slots <= 2}
+                  onClick={() => adjustStitchSlotCount(id, -1)}
+                >
+                  −
+                </Button>
+              </div>
+              <Text style={{ color: '#7a8499', fontSize: 10 }}>{t('roninProWorkflowSimpleStitchVerticalHint')}</Text>
+            </Space>
+          )
+        }
         case 'gridDeleteRow':
         case 'gridDeleteCol':
         case 'gridExpandRow':
@@ -1183,7 +1249,7 @@ export default function RoninProCustomWorkflow({ onSendToFineProcess }: RoninPro
           return null
       }
     },
-    [t, updateNodeParam, updateCustomRearrangeDimension, updateCustomRearrangeCell, fillRearrangeGridAutoSequence, fileItems]
+    [t, updateNodeParam, adjustStitchSlotCount, updateCustomRearrangeDimension, updateCustomRearrangeCell, fillRearrangeGridAutoSequence, fileItems]
   )
 
   return (

frontend/src/components/RoninProUnifySize.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Button, InputNumber, message, Space, Typography, Upload } from 'antd'
 import { DownloadOutlined } from '@ant-design/icons'
-import type { UploadFile } from 'antd'
+import type { UploadFile, UploadProps } from 'antd'
 import { useLanguage } from '../i18n/context'
 import StashableImage from './StashableImage'
 import StashDropZone from './StashDropZone'
@@ -129,6 +129,16 @@ export default function RoninProUnifySize() {
     }
   }
 
+  /** 用 onChange 的 fileList 顺序同步，避免多文件拖拽时 beforeUpload 逐文件追加导致顺序颠倒 */
+  const handleUploadChange: UploadProps['onChange'] = ({ fileList }) => {
+    const next: File[] = []
+    for (const item of fileList) {
+      const o = item.originFileObj
+      if (o instanceof File) next.push(o)
+    }
+    setFiles(next)
+  }
+
   const downloadResult = () => {
     if (!resultUrl) return
     const a = document.createElement('a')
@@ -146,15 +156,17 @@ export default function RoninProUnifySize() {
         <Dragger
           accept={IMAGE_ACCEPT.join(',')}
           multiple
-          fileList={files.map((f, i) => ({ uid: `u-${i}`, name: f.name } as UploadFile))}
-          beforeUpload={(f) => {
-            setFiles((prev) => [...prev, f])
-            return false
-          }}
-          onRemove={(file) => {
-            const idx = files.findIndex((_, i) => `u-${i}` === file.uid)
-            if (idx >= 0) setFiles((prev) => prev.filter((_, i) => i !== idx))
-          }}
+          fileList={files.map(
+            (f, i) =>
+              ({
+                uid: `${f.name}-${f.size}-${f.lastModified}-${i}`,
+                name: f.name,
+                status: 'done',
+                originFileObj: f as UploadFile['originFileObj'],
+              }) as UploadFile,
+          )}
+          beforeUpload={() => false}
+          onChange={handleUploadChange}
         >
           <p className="ant-upload-text">{t('roninProUnifySizeUploadHint')}</p>
         </Dragger>