From 059473f81d7bab60e33ad83ee83f808c2e108de6 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Tue, 12 May 2026 19:36:58 +0800
Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20useHintToo?=
 =?UTF-8?q?ltip=20hook=20=E7=BB=9F=E4=B8=80=20tooltip=20=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 InputBar 中 5 组重复的 hint 状态（compression、moderation、size、
quality、nLimit）及其对应的 timer ref、show/hide/clear/startTouch 函数
替换为统一的 useHintTooltip hook 调用，减少约 90 行样板代码。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 221 +++++++-----------------------------
 src/hooks/useHintTooltip.ts |  54 +++++++++
 2 files changed, 98 insertions(+), 177 deletions(-)
 create mode 100644 src/hooks/useHintTooltip.ts

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index c12acf2d..3678558a 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -12,6 +12,7 @@ import { getSafeBoundingClientRect } from '../lib/domRect'
 import Select from './Select'
 import SizePickerModal from './SizePickerModal'
 import ViewportTooltip from './ViewportTooltip'
+import { useHintTooltip } from '../hooks/useHintTooltip'
 
 
 function getMentionTagTextLength(el: Element) {
@@ -409,10 +410,6 @@ export default function InputBar() {
   const [isDragging, setIsDragging] = useState(false)
   const [submitHover, setSubmitHover] = useState(false)
   const [attachHover, setAttachHover] = useState(false)
-  const [compressionHintVisible, setCompressionHintVisible] = useState(false)
-  const [moderationHintVisible, setModerationHintVisible] = useState(false)
-  const [sizeHintVisible, setSizeHintVisible] = useState(false)
-  const [qualityHintVisible, setQualityHintVisible] = useState(false)
   const [imageHintId, setImageHintId] = useState<string | null>(null)
   const [mobileCollapsed, setMobileCollapsed] = useState(false)
   const [showSizePicker, setShowSizePicker] = useState(false)
@@ -435,18 +432,12 @@ export default function InputBar() {
   const [cursorPos, setCursorPos] = useState(0)
   const [menuLeft, setMenuLeft] = useState(0)
   const maskConflictNoticeShownRef = useRef(false)
-  const compressionHintTimerRef = useRef<number | null>(null)
-  const moderationHintTimerRef = useRef<number | null>(null)
-  const sizeHintTimerRef = useRef<number | null>(null)
-  const qualityHintTimerRef = useRef<number | null>(null)
   const imageHintTimerRef = useRef<number | null>(null)
-  const nLimitHintTimerRef = useRef<number | null>(null)
   const [outputCompressionInput, setOutputCompressionInput] = useState(
     params.output_compression == null ? '' : String(params.output_compression),
   )
   const [nInput, setNInput] = useState(String(params.n))
   const [nInputFocused, setNInputFocused] = useState(false)
-  const [nLimitHintVisible, setNLimitHintVisible] = useState(false)
   const dragCounter = useRef(0)
   const isMobile = useIsMobile()
 
@@ -488,6 +479,13 @@ export default function InputBar() {
         { label: 'high', value: 'high' },
       ]
   const atImageLimit = inputImages.length >= API_MAX_IMAGES
+
+  const compressionHint = useHintTooltip()
+  const moderationHint = useHintTooltip({ enabled: () => moderationDisabled })
+  const sizeHint = useHintTooltip({ enabled: () => isFalTextToImage })
+  const qualityHint = useHintTooltip({ enabled: () => settings.codexCli || isFalProvider })
+  const nLimitHint = useHintTooltip({ autoHideMs: 2000 })
+
   const maskTargetImage = maskDraft
     ? inputImages.find((img) => img.id === maskDraft.targetImageId) ?? null
     : null
@@ -566,25 +564,10 @@ export default function InputBar() {
   }, [inputImages.length, params, effectiveSettings, setParams])
 
   useEffect(() => () => {
-    if (compressionHintTimerRef.current != null) {
-      window.clearTimeout(compressionHintTimerRef.current)
-    }
-    if (moderationHintTimerRef.current != null) {
-      window.clearTimeout(moderationHintTimerRef.current)
-    }
-    if (qualityHintTimerRef.current != null) {
-      window.clearTimeout(qualityHintTimerRef.current)
-    }
-    if (sizeHintTimerRef.current != null) {
-      window.clearTimeout(sizeHintTimerRef.current)
-    }
     if (imageHintTimerRef.current != null) {
       window.clearTimeout(imageHintTimerRef.current)
     }
     imageHintReleaseRef.current?.()
-    if (nLimitHintTimerRef.current != null) {
-      window.clearTimeout(nLimitHintTimerRef.current)
-    }
   }, [])
 
   useEffect(() => {
@@ -625,47 +608,24 @@ export default function InputBar() {
   }, [outputCompressionInput, params.output_compression, setParams])
 
   const commitN = useCallback(() => {
-    setNLimitHintVisible(false)
-    if (nLimitHintTimerRef.current != null) {
-      window.clearTimeout(nLimitHintTimerRef.current)
-      nLimitHintTimerRef.current = null
-    }
+    nLimitHint.hide()
     const nextValue = Number(nInput)
     const normalizedValue =
       nInput.trim() === '' ? DEFAULT_PARAMS.n : Number.isNaN(nextValue) ? params.n : nextValue
     const clampedValue = Math.min(outputImageLimit, Math.max(1, normalizedValue))
     setNInput(String(clampedValue))
     setParams({ n: clampedValue })
-  }, [nInput, outputImageLimit, params.n, setParams])
-
-  const showNLimitHint = useCallback(() => {
-    setNLimitHintVisible(true)
-    if (nLimitHintTimerRef.current != null) {
-      window.clearTimeout(nLimitHintTimerRef.current)
-    }
-    nLimitHintTimerRef.current = window.setTimeout(() => {
-      setNLimitHintVisible(false)
-      nLimitHintTimerRef.current = null
-    }, 2000)
-  }, [])
-
-  const hideNLimitHint = useCallback(() => {
-    setNLimitHintVisible(false)
-    if (nLimitHintTimerRef.current != null) {
-      window.clearTimeout(nLimitHintTimerRef.current)
-      nLimitHintTimerRef.current = null
-    }
-  }, [])
+  }, [nInput, outputImageLimit, params.n, setParams, nLimitHint])
 
   const handleNInputChange = useCallback((value: string) => {
     setNInput(value)
     const nextValue = Number(value)
     if (!Number.isNaN(nextValue) && nextValue > outputImageLimit) {
-      showNLimitHint()
+      nLimitHint.show()
     } else {
-      hideNLimitHint()
+      nLimitHint.hide()
     }
-  }, [hideNLimitHint, outputImageLimit, showNLimitHint])
+  }, [outputImageLimit, nLimitHint])
 
   const handleNLimitIncreaseAttempt = useCallback((preventDefault: () => void) => {
     const currentValue = Number(nInput)
@@ -673,101 +633,8 @@ export default function InputBar() {
     if (!nInputFocused || effectiveValue < outputImageLimit) return
 
     preventDefault()
-    showNLimitHint()
-  }, [nInput, nInputFocused, outputImageLimit, params.n, showNLimitHint])
-
-  const showModerationHint = () => {
-    if (moderationDisabled) setModerationHintVisible(true)
-  }
-
-  const hideModerationHint = () => {
-    setModerationHintVisible(false)
-    clearModerationHintTimer()
-  }
-
-  const clearModerationHintTimer = () => {
-    if (moderationHintTimerRef.current != null) {
-      window.clearTimeout(moderationHintTimerRef.current)
-      moderationHintTimerRef.current = null
-    }
-  }
-
-  const startModerationHintTouch = () => {
-    if (!moderationDisabled) return
-    moderationHintTimerRef.current = window.setTimeout(() => {
-      setModerationHintVisible(true)
-      moderationHintTimerRef.current = null
-    }, 450)
-  }
-
-  const showCompressionHint = () => setCompressionHintVisible(true)
-
-  const hideCompressionHint = () => {
-    setCompressionHintVisible(false)
-    clearCompressionHintTimer()
-  }
-
-  const clearCompressionHintTimer = () => {
-    if (compressionHintTimerRef.current != null) {
-      window.clearTimeout(compressionHintTimerRef.current)
-      compressionHintTimerRef.current = null
-    }
-  }
-
-  const startCompressionHintTouch = () => {
-    compressionHintTimerRef.current = window.setTimeout(() => {
-      setCompressionHintVisible(true)
-      compressionHintTimerRef.current = null
-    }, 450)
-  }
-
-  const showQualityHint = () => {
-    if (settings.codexCli || isFalProvider) setQualityHintVisible(true)
-  }
-
-  const showSizeHint = () => {
-    if (isFalTextToImage) setSizeHintVisible(true)
-  }
-
-  const hideSizeHint = () => {
-    setSizeHintVisible(false)
-    clearSizeHintTimer()
-  }
-
-  const clearSizeHintTimer = () => {
-    if (sizeHintTimerRef.current != null) {
-      window.clearTimeout(sizeHintTimerRef.current)
-      sizeHintTimerRef.current = null
-    }
-  }
-
-  const startSizeHintTouch = () => {
-    if (!isFalTextToImage) return
-    sizeHintTimerRef.current = window.setTimeout(() => {
-      setSizeHintVisible(true)
-      sizeHintTimerRef.current = null
-    }, 450)
-  }
-
-  const hideQualityHint = () => {
-    setQualityHintVisible(false)
-    clearQualityHintTimer()
-  }
-
-  const clearQualityHintTimer = () => {
-    if (qualityHintTimerRef.current != null) {
-      window.clearTimeout(qualityHintTimerRef.current)
-      qualityHintTimerRef.current = null
-    }
-  }
-
-  const startQualityHintTouch = () => {
-    if (!settings.codexCli && !isFalProvider) return
-    qualityHintTimerRef.current = window.setTimeout(() => {
-      setQualityHintVisible(true)
-      qualityHintTimerRef.current = null
-    }, 450)
-  }
+    nLimitHint.show()
+  }, [nInput, nInputFocused, outputImageLimit, params.n, nLimitHint])
 
   const clearImageHintTimer = () => {
     if (imageHintTimerRef.current != null) {
@@ -1463,12 +1330,12 @@ export default function InputBar() {
     <div className={`grid ${cols} gap-2 text-xs flex-1`}>
       <label
         className="relative flex flex-col gap-0.5"
-        onMouseEnter={showSizeHint}
-        onMouseLeave={hideSizeHint}
-        onTouchStart={startSizeHintTouch}
-        onTouchEnd={clearSizeHintTimer}
-        onTouchCancel={hideSizeHint}
-        onClick={showSizeHint}
+        onMouseEnter={sizeHint.show}
+        onMouseLeave={sizeHint.hide}
+        onTouchStart={sizeHint.startTouch}
+        onTouchEnd={sizeHint.clearTimer}
+        onTouchCancel={sizeHint.hide}
+        onClick={sizeHint.show}
       >
         <span className="text-gray-400 dark:text-gray-500 ml-1">尺寸</span>
         <button
@@ -1480,18 +1347,18 @@ export default function InputBar() {
           {displaySize}
         </button>
         <ButtonTooltip
-          visible={isFalTextToImage && sizeHintVisible}
+          visible={isFalTextToImage && sizeHint.visible}
           text={<>fal.ai 的文生图模式不支持 <code className="rounded bg-white/10 px-1 py-0.5 font-mono">auto</code> 参数</>}
         />
       </label>
       <label
         className="relative flex flex-col gap-0.5"
-        onMouseEnter={showQualityHint}
-        onMouseLeave={hideQualityHint}
-        onTouchStart={startQualityHintTouch}
-        onTouchEnd={clearQualityHintTimer}
-        onTouchCancel={hideQualityHint}
-        onClick={showQualityHint}
+        onMouseEnter={qualityHint.show}
+        onMouseLeave={qualityHint.hide}
+        onTouchStart={qualityHint.startTouch}
+        onTouchEnd={qualityHint.clearTimer}
+        onTouchCancel={qualityHint.hide}
+        onClick={qualityHint.show}
       >
         <span className="text-gray-400 dark:text-gray-500 ml-1">质量</span>
         <Select
@@ -1506,7 +1373,7 @@ export default function InputBar() {
             : selectClass}
         />
         <ButtonTooltip
-          visible={(settings.codexCli || isFalProvider) && qualityHintVisible}
+          visible={(settings.codexCli || isFalProvider) && qualityHint.visible}
           text={isFalProvider ? <>fal.ai 不支持 <code className="rounded bg-white/10 px-1 py-0.5 font-mono">auto</code> 质量参数</> : 'Codex CLI 不支持质量参数'}
         />
       </label>
@@ -1525,12 +1392,12 @@ export default function InputBar() {
       </label>
       <label
         className="relative flex flex-col gap-0.5"
-        onMouseEnter={showCompressionHint}
-        onMouseLeave={hideCompressionHint}
-        onTouchStart={startCompressionHintTouch}
-        onTouchEnd={clearCompressionHintTimer}
-        onTouchCancel={hideCompressionHint}
-        onClick={showCompressionHint}
+        onMouseEnter={compressionHint.show}
+        onMouseLeave={compressionHint.hide}
+        onTouchStart={compressionHint.startTouch}
+        onTouchEnd={compressionHint.clearTimer}
+        onTouchCancel={compressionHint.hide}
+        onClick={compressionHint.show}
       >
         <span className="text-gray-400 dark:text-gray-500 ml-1">压缩率</span>
         <input
@@ -1549,18 +1416,18 @@ export default function InputBar() {
             }`}
         />
         <ButtonTooltip
-          visible={compressionHintVisible}
+          visible={compressionHint.visible}
           text={isFalProvider ? 'fal.ai 不支持压缩率参数' : '仅 JPEG 和 WebP 支持压缩率'}
         />
       </label>
       <label
         className="relative flex flex-col gap-0.5"
-        onMouseEnter={showModerationHint}
-        onMouseLeave={hideModerationHint}
-        onTouchStart={startModerationHintTouch}
-        onTouchEnd={clearModerationHintTimer}
-        onTouchCancel={hideModerationHint}
-        onClick={showModerationHint}
+        onMouseEnter={moderationHint.show}
+        onMouseLeave={moderationHint.hide}
+        onTouchStart={moderationHint.startTouch}
+        onTouchEnd={moderationHint.clearTimer}
+        onTouchCancel={moderationHint.hide}
+        onClick={moderationHint.show}
       >
         <span className="text-gray-400 dark:text-gray-500 ml-1">审核</span>
         <Select
@@ -1578,7 +1445,7 @@ export default function InputBar() {
             : selectClass}
         />
         <ButtonTooltip
-          visible={moderationDisabled && moderationHintVisible}
+          visible={moderationDisabled && moderationHint.visible}
           text={isFalProvider ? 'fal.ai 不支持审核参数' : 'Responses API 不支持审核参数'}
         />
       </label>
@@ -1607,7 +1474,7 @@ export default function InputBar() {
           max={outputImageLimit}
           className="px-3 py-1.5 rounded-xl border border-gray-200/60 dark:border-white/[0.08] bg-white/50 dark:bg-white/[0.03] focus:outline-none text-xs transition-all duration-200 shadow-sm"
         />
-        <ButtonTooltip visible={nLimitHintVisible} text={nLimitHintText} />
+        <ButtonTooltip visible={nLimitHint.visible} text={nLimitHintText} />
       </label>
     </div>
   )
diff --git a/src/hooks/useHintTooltip.ts b/src/hooks/useHintTooltip.ts
new file mode 100644
index 00000000..021e540a
--- /dev/null
+++ b/src/hooks/useHintTooltip.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { onDismissTooltips } from '../lib/tooltipDismiss'
+
+interface UseHintTooltipOptions {
+  enabled?: () => boolean
+  autoHideMs?: number
+  touchDelayMs?: number
+}
+
+export function useHintTooltip(options: UseHintTooltipOptions = {}) {
+  const { autoHideMs, touchDelayMs = 450 } = options
+  const [visible, setVisible] = useState(false)
+  const timerRef = useRef<number | null>(null)
+  const enabledRef = useRef(options.enabled)
+  enabledRef.current = options.enabled
+
+  const clearTimer = useCallback(() => {
+    if (timerRef.current != null) {
+      window.clearTimeout(timerRef.current)
+      timerRef.current = null
+    }
+  }, [])
+
+  const hide = useCallback(() => {
+    setVisible(false)
+    clearTimer()
+  }, [clearTimer])
+
+  const show = useCallback(() => {
+    if (enabledRef.current && !enabledRef.current()) return
+    clearTimer()
+    setVisible(true)
+    if (autoHideMs != null) {
+      timerRef.current = window.setTimeout(() => {
+        setVisible(false)
+        timerRef.current = null
+      }, autoHideMs)
+    }
+  }, [autoHideMs, clearTimer])
+
+  const startTouch = useCallback(() => {
+    if (enabledRef.current && !enabledRef.current()) return
+    clearTimer()
+    timerRef.current = window.setTimeout(() => {
+      setVisible(true)
+      timerRef.current = null
+    }, touchDelayMs)
+  }, [touchDelayMs, clearTimer])
+
+  useEffect(() => () => { clearTimer() }, [clearTimer])
+  useEffect(() => onDismissTooltips(hide), [hide])
+
+  return { visible, show, hide, clearTimer, startTouch }
+}

From 65697917654fcac59772a75c635814f206688ce9 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Tue, 12 May 2026 19:48:01 +0800
Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=E7=AE=80=E5=8C=96=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=20UI=20=E6=A0=8F=E5=B8=83=E5=B1=80=EF=BC=8C=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E6=A1=8C=E9=9D=A2/=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除桌面端和移动端分离的两套按钮行，统一为单行布局
- 参数设置改为弹窗模态框（齿轮按钮触发）
- 尺寸选择器独立为固定宽度按钮，放置在提交键左侧
- 所有按钮统一 h-10 高度并居中对齐
- ButtonTooltip 添加 wrapper span 修复 overflow-hidden 裁剪问题

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 229 +++++++++++++++++-------------------
 1 file changed, 106 insertions(+), 123 deletions(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 3678558a..14fae570 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -12,6 +12,8 @@ import { getSafeBoundingClientRect } from '../lib/domRect'
 import Select from './Select'
 import SizePickerModal from './SizePickerModal'
 import ViewportTooltip from './ViewportTooltip'
+import { useCloseOnEscape } from '../hooks/useCloseOnEscape'
+import { usePreventBackgroundScroll } from '../hooks/usePreventBackgroundScroll'
 import { useHintTooltip } from '../hooks/useHintTooltip'
 
 
@@ -251,9 +253,11 @@ function ButtonTooltip({ visible, text }: { visible: boolean; text: ReactNode })
   if (!visible) return null
 
   return (
-    <ViewportTooltip visible className="z-10 whitespace-nowrap">
-      {text}
-    </ViewportTooltip>
+    <span className="absolute left-1/2 top-0 -translate-x-1/2">
+      <ViewportTooltip visible className="z-10 whitespace-nowrap">
+        {text}
+      </ViewportTooltip>
+    </span>
   )
 }
 
@@ -413,6 +417,7 @@ export default function InputBar() {
   const [imageHintId, setImageHintId] = useState<string | null>(null)
   const [mobileCollapsed, setMobileCollapsed] = useState(false)
   const [showSizePicker, setShowSizePicker] = useState(false)
+  const [showParamsModal, setShowParamsModal] = useState(false)
   const [maskPreviewUrl, setMaskPreviewUrl] = useState('')
   const [imageDragIndex, setImageDragIndex] = useState<number | null>(null)
   const [imageDragOverIndex, setImageDragOverIndex] = useState<number | null>(null)
@@ -440,6 +445,8 @@ export default function InputBar() {
   const [nInputFocused, setNInputFocused] = useState(false)
   const dragCounter = useRef(0)
   const isMobile = useIsMobile()
+  useCloseOnEscape(showParamsModal, () => setShowParamsModal(false))
+  usePreventBackgroundScroll(showParamsModal)
 
   const currentActiveProfile = useMemo(() => getActiveApiProfile(settings), [settings])
   const activeProfile = useMemo(() => (
@@ -1328,29 +1335,6 @@ export default function InputBar() {
 
   const renderParams = (cols: string) => (
     <div className={`grid ${cols} gap-2 text-xs flex-1`}>
-      <label
-        className="relative flex flex-col gap-0.5"
-        onMouseEnter={sizeHint.show}
-        onMouseLeave={sizeHint.hide}
-        onTouchStart={sizeHint.startTouch}
-        onTouchEnd={sizeHint.clearTimer}
-        onTouchCancel={sizeHint.hide}
-        onClick={sizeHint.show}
-      >
-        <span className="text-gray-400 dark:text-gray-500 ml-1">尺寸</span>
-        <button
-          type="button"
-          onClick={() => { dismissAllTooltips(); setShowSizePicker(true) }}
-          className="px-3 py-1.5 rounded-xl border border-gray-200/60 dark:border-white/[0.08] bg-white/50 dark:bg-white/[0.03] hover:bg-white dark:hover:bg-white/[0.06] focus:outline-none text-xs text-left transition-all duration-200 shadow-sm font-mono"
-          title="选择尺寸"
-        >
-          {displaySize}
-        </button>
-        <ButtonTooltip
-          visible={isFalTextToImage && sizeHint.visible}
-          text={<>fal.ai 的文生图模式不支持 <code className="rounded bg-white/10 px-1 py-0.5 font-mono">auto</code> 参数</>}
-        />
-      </label>
       <label
         className="relative flex flex-col gap-0.5"
         onMouseEnter={qualityHint.show}
@@ -1524,6 +1508,31 @@ export default function InputBar() {
         />
       )}
 
+      {showParamsModal && (
+        <div className="fixed inset-0 z-[70] flex items-center justify-center p-4" onMouseDown={() => setShowParamsModal(false)}>
+          <div className="absolute inset-0 bg-black/30 backdrop-blur-sm animate-overlay-in" />
+          <div
+            className="relative z-10 w-full max-w-sm rounded-3xl border border-white/50 bg-white/95 p-5 shadow-2xl ring-1 ring-black/5 animate-modal-in dark:border-white/[0.08] dark:bg-gray-900/95 dark:ring-white/10"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            <div className="mb-4 flex items-center justify-between">
+              <h3 className="text-sm font-medium text-gray-700 dark:text-gray-200">参数设置</h3>
+              <button
+                type="button"
+                onClick={() => setShowParamsModal(false)}
+                className="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-white/[0.06] dark:hover:text-gray-300"
+                aria-label="关闭参数设置"
+              >
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            {renderParams('grid-cols-2')}
+          </div>
+        </div>
+      )}
+
       <div data-input-bar className="fixed bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 z-30 w-full max-w-4xl px-3 sm:px-4 transition-all duration-300">
         {selectedTaskIds.length > 0 && (
           <div className="flex justify-center mb-3">
@@ -1702,108 +1711,82 @@ export default function InputBar() {
             />
           </div>
 
-          {/* 参数 + 按钮 */}
-          <div className="mt-3">
-            {/* 桌面端布局 */}
-            <div className="hidden sm:flex items-end justify-between gap-3">
-              {renderParams('grid-cols-6')}
-
-              <div className="flex gap-2 flex-shrink-0 mb-0.5">
-                <div
-                  className="relative"
-                  onMouseEnter={() => setAttachHover(true)}
-                  onMouseLeave={() => setAttachHover(false)}
+          {/* 按钮行 */}
+          <div className="mt-3 flex items-center justify-between gap-2">
+            <div className="flex min-w-0 items-center gap-2">
+              <div
+                className="relative"
+                onMouseEnter={sizeHint.show}
+                onMouseLeave={sizeHint.hide}
+                onTouchStart={sizeHint.startTouch}
+                onTouchEnd={sizeHint.clearTimer}
+                onTouchCancel={sizeHint.hide}
+              >
+                <ButtonTooltip
+                  visible={isFalTextToImage && sizeHint.visible}
+                  text={<>fal.ai 的文生图模式不支持 <code className="rounded bg-white/10 px-1 py-0.5 font-mono">auto</code> 参数</>}
+                />
+                <button
+                  type="button"
+                  onClick={() => { dismissAllTooltips(); setShowSizePicker(true) }}
+                  className="h-10 w-[104px] rounded-xl border border-gray-200/60 bg-white text-xs font-mono text-gray-600 shadow-sm transition-all hover:bg-gray-50 hover:shadow dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-gray-300 dark:hover:bg-white/[0.1]"
+                  title="选择尺寸"
                 >
-                  <ButtonTooltip visible={atImageLimit && attachHover} text={`参考图数量已达上限（${API_MAX_IMAGES} 张），无法继续添加`} />
-                  <button
-                    onClick={() => !atImageLimit && fileInputRef.current?.click()}
-                    className={`p-2.5 rounded-xl transition-all shadow-sm ${
-                      atImageLimit
-                        ? 'bg-gray-200 dark:bg-white/[0.04] text-gray-300 dark:text-gray-500 cursor-not-allowed'
-                        : 'bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow'
-                    }`}
-                    title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '添加参考图'}
-                  >
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                    </svg>
-                  </button>
-                </div>
-                <div
-                  className="relative"
-                  onMouseEnter={() => setSubmitHover(true)}
-                  onMouseLeave={() => setSubmitHover(false)}
+                  {displaySize}
+                </button>
+              </div>
+              <div
+                className="relative"
+                onMouseEnter={() => setAttachHover(true)}
+                onMouseLeave={() => setAttachHover(false)}
+              >
+                <ButtonTooltip visible={atImageLimit && attachHover} text={`参考图数量已达上限（${API_MAX_IMAGES} 张），无法继续添加`} />
+                <button
+                  onClick={() => !atImageLimit && fileInputRef.current?.click()}
+                  className={`h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm ${
+                    atImageLimit
+                      ? 'bg-gray-200 dark:bg-white/[0.04] text-gray-300 dark:text-gray-500 cursor-not-allowed'
+                      : 'bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow'
+                  }`}
+                  title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '添加参考图'}
                 >
-                  <ButtonTooltip visible={!hasSubmitApiConfig && submitHover} text="尚未完成 API 配置，请在右上角设置中进行" />
-                  <button
-                    onClick={() => hasSubmitApiConfig ? submitTask() : setShowSettings(true)}
-                    disabled={hasSubmitApiConfig ? !canSubmit : false}
-                    className={`p-2.5 rounded-xl transition-all shadow-sm hover:shadow ${
-                      !hasSubmitApiConfig
-                        ? 'bg-gray-300 dark:bg-white/[0.06] text-white cursor-pointer'
-                        : 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-white/[0.04] disabled:opacity-50 disabled:cursor-not-allowed'
-                    }`}
-                    title={hasSubmitApiConfig ? (maskDraft ? '遮罩编辑 (Ctrl+Enter)' : '生成 (Ctrl+Enter)') : '请先配置 API'}
-                  >
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                    </svg>
-                  </button>
-                </div>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                  </svg>
+                </button>
               </div>
+              <button
+                type="button"
+                onClick={() => setShowParamsModal(true)}
+                className="h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow"
+                title="参数设置"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                </svg>
+              </button>
             </div>
-
-            {/* 移动端布局 */}
-            <div className="sm:hidden flex flex-col gap-2">
-              <div className={`collapse-section${mobileCollapsed ? ' collapsed' : ''}`}>
-                <div className="collapse-inner">
-                  {renderParams('grid-cols-2')}
-                  <div className="h-2" />
-                </div>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <div
-                  className="relative"
-                  onMouseEnter={() => setAttachHover(true)}
-                  onMouseLeave={() => setAttachHover(false)}
-                >
-                  <ButtonTooltip visible={atImageLimit && attachHover} text={`参考图数量已达上限（${API_MAX_IMAGES} 张），无法继续添加`} />
-                  <button
-                    onClick={() => !atImageLimit && fileInputRef.current?.click()}
-                    className={`p-2.5 rounded-xl transition-all shadow-sm flex-shrink-0 ${
-                      atImageLimit
-                        ? 'bg-gray-200 dark:bg-white/[0.04] text-gray-300 dark:text-gray-500 cursor-not-allowed'
-                        : 'bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300'
-                    }`}
-                    title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '添加参考图'}
-                  >
-                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                    </svg>
-                  </button>
-                </div>
-                <div
-                  className="relative flex-1"
-                  onMouseEnter={() => setSubmitHover(true)}
-                  onMouseLeave={() => setSubmitHover(false)}
+            <div className="flex items-center gap-2 flex-shrink-0">
+              <div
+                className="relative"
+                onMouseEnter={() => setSubmitHover(true)}
+                onMouseLeave={() => setSubmitHover(false)}
+              >
+                <ButtonTooltip visible={!hasSubmitApiConfig && submitHover} text="尚未完成 API 配置，请在右上角设置中进行" />
+                <button
+                  onClick={() => hasSubmitApiConfig ? submitTask() : setShowSettings(true)}
+                  disabled={hasSubmitApiConfig ? !canSubmit : false}
+                  className={`h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm hover:shadow ${
+                    !hasSubmitApiConfig
+                      ? 'bg-gray-300 dark:bg-white/[0.06] text-white cursor-pointer'
+                      : 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-white/[0.04] disabled:opacity-50 disabled:cursor-not-allowed'
+                  }`}
+                  title={hasSubmitApiConfig ? (maskDraft ? '遮罩编辑 (Ctrl+Enter)' : '生成 (Ctrl+Enter)') : '请先配置 API'}
                 >
-                  <ButtonTooltip visible={!hasSubmitApiConfig && submitHover} text="尚未完成 API 配置，请在右上角设置中进行" />
-                  <button
-                    onClick={() => hasSubmitApiConfig ? submitTask() : setShowSettings(true)}
-                    disabled={hasSubmitApiConfig ? !canSubmit : false}
-                    className={`w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-sm font-medium transition-all shadow-sm ${
-                      !hasSubmitApiConfig
-                        ? 'bg-gray-300 dark:bg-white/[0.06] text-white cursor-pointer'
-                        : 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-white/[0.04] disabled:opacity-50 disabled:cursor-not-allowed'
-                    }`}
-                  >
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                    </svg>
-                    {maskDraft ? '遮罩编辑' : '生成图像'}
-                  </button>
-                </div>
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                  </svg>
+                </button>
               </div>
             </div>
           </div>

From 785b72249bef7f0aa5da3a1469f9f40ca8371118 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Tue, 12 May 2026 20:05:21 +0800
Subject: [PATCH 3/8] =?UTF-8?q?copy:=20=E7=AE=80=E5=8C=96=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=8F=90=E7=A4=BA=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InputBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 14fae570..c819988c 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -1706,7 +1706,7 @@ export default function InputBar() {
 
                 syncMentionTagSelection(el)
               }}
-              data-placeholder="描述你想生成的图片，可输入 @ 指定当前参考图..."
+              data-placeholder="描述你想生成的图片……"
               className="min-h-[42px] w-full whitespace-pre-wrap break-words rounded-2xl border border-gray-200/60 bg-white/50 px-4 py-3 text-sm leading-relaxed shadow-sm outline-none transition-[border-color,box-shadow] duration-200 focus:ring-1 focus:ring-blue-300/40 empty:before:pointer-events-none empty:before:text-gray-400 empty:before:content-[attr(data-placeholder)] dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-100 dark:focus:ring-blue-500/30 dark:empty:before:text-gray-500"
             />
           </div>

From 43620756daa3c8558708e3cb6052d8f6e5d6b2a3 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Wed, 13 May 2026 11:17:55 +0800
Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=BE=93=E5=85=A5=E6=A1=86=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 useKeyboardVisible hook，兼容 visualViewport / focusin / window.resize 三种检测方式
- 键盘弹出时隐藏拖动条和参数栏，收起后带 fade-in-up 过渡动画
- 参数设置改为横向滚动 chip 样式，点击弹出底部 action sheet 选择
- 新增相机按钮（cameraInputRef），支持直接拍照上传
- 点击输入栏外部自动收起键盘
- 桌面端和移动端输入区域分离为独立渲染路径
- 新增 scrollbar-hide、animate-slide-up、pb-safe 等 CSS 工具类

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 611 ++++++++++++++++++++++++++----------
 src/index.css               |  28 ++
 2 files changed, 479 insertions(+), 160 deletions(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index c819988c..7d5e2020 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -263,6 +263,7 @@ function ButtonTooltip({ visible, text }: { visible: boolean; text: ReactNode })
 
 /** API 支持的最大参考图数量 */
 const API_MAX_IMAGES = 16
+const MOBILE_INPUT_ROW_H = 32
 
 function useIsMobile() {
   const [isMobile, setIsMobile] = useState(window.innerWidth < 640)
@@ -274,6 +275,67 @@ function useIsMobile() {
   return isMobile
 }
 
+const KEYBOARD_THRESHOLD = 0.75
+
+function useKeyboardVisible() {
+  const [visible, setVisible] = useState(false)
+  useEffect(() => {
+    let fromViewport = false
+    let fromFocus = false
+    const initialHeight = window.innerHeight
+    let focusOutTimer: ReturnType<typeof setTimeout> | null = null
+    const update = () => setVisible(fromViewport || fromFocus)
+
+    const vv = window.visualViewport
+    const onVVResize = () => {
+      if (vv) {
+        fromViewport = vv.height < window.innerHeight * KEYBOARD_THRESHOLD
+        update()
+      }
+    }
+
+    const onWindowResize = () => {
+      const curr = window.innerHeight
+      if (curr > initialHeight * 0.85) {
+        fromFocus = false
+        update()
+      } else if (curr < initialHeight * KEYBOARD_THRESHOLD) {
+        fromFocus = true
+        update()
+      }
+    }
+
+    const onFocusIn = (e: FocusEvent) => {
+      const t = e.target as HTMLElement | null
+      if (t && (t.isContentEditable || t.tagName === 'INPUT' || t.tagName === 'TEXTAREA')) {
+        fromFocus = true
+        update()
+      }
+    }
+    const onFocusOut = (e: FocusEvent) => {
+      const related = e.relatedTarget as HTMLElement | null
+      if (related && (related.isContentEditable || related.tagName === 'INPUT' || related.tagName === 'TEXTAREA')) {
+        return
+      }
+      fromFocus = false
+      focusOutTimer = setTimeout(update, 100)
+    }
+
+    if (vv) vv.addEventListener('resize', onVVResize)
+    window.addEventListener('resize', onWindowResize)
+    document.addEventListener('focusin', onFocusIn)
+    document.addEventListener('focusout', onFocusOut)
+    return () => {
+      if (vv) vv.removeEventListener('resize', onVVResize)
+      window.removeEventListener('resize', onWindowResize)
+      document.removeEventListener('focusin', onFocusIn)
+      document.removeEventListener('focusout', onFocusOut)
+      if (focusOutTimer) clearTimeout(focusOutTimer)
+    }
+  }, [])
+  return visible
+}
+
 export default function InputBar() {
   const prompt = useStore((s) => s.prompt)
   const setPrompt = useStore((s) => s.setPrompt)
@@ -406,6 +468,7 @@ export default function InputBar() {
   const moveInputImage = useStore((s) => s.moveInputImage)
 
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const cameraInputRef = useRef<HTMLInputElement>(null)
   const textareaRef = useRef<HTMLDivElement>(null)
   const cardRef = useRef<HTMLDivElement>(null)
   const imagesRef = useRef<HTMLDivElement>(null)
@@ -418,6 +481,7 @@ export default function InputBar() {
   const [mobileCollapsed, setMobileCollapsed] = useState(false)
   const [showSizePicker, setShowSizePicker] = useState(false)
   const [showParamsModal, setShowParamsModal] = useState(false)
+  const [mobileParamSheet, setMobileParamSheet] = useState<'quality' | 'format' | 'moderation' | null>(null)
   const [maskPreviewUrl, setMaskPreviewUrl] = useState('')
   const [imageDragIndex, setImageDragIndex] = useState<number | null>(null)
   const [imageDragOverIndex, setImageDragOverIndex] = useState<number | null>(null)
@@ -445,6 +509,22 @@ export default function InputBar() {
   const [nInputFocused, setNInputFocused] = useState(false)
   const dragCounter = useRef(0)
   const isMobile = useIsMobile()
+  const keyboardVisible = useKeyboardVisible()
+
+  useEffect(() => {
+    if (!isMobile) return
+    const onTouchStart = (e: TouchEvent) => {
+      const target = e.target as HTMLElement
+      if (target.closest('[data-input-bar]')) return
+      const active = document.activeElement as HTMLElement | null
+      if (active && (active.isContentEditable || active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+        active.blur()
+      }
+    }
+    document.addEventListener('touchstart', onTouchStart, { passive: true })
+    return () => document.removeEventListener('touchstart', onTouchStart)
+  }, [isMobile])
+
   useCloseOnEscape(showParamsModal, () => setShowParamsModal(false))
   usePreventBackgroundScroll(showParamsModal)
 
@@ -891,7 +971,7 @@ export default function InputBar() {
     el.style.height = '0'
     el.style.overflowY = 'hidden'
     const scrollH = el.scrollHeight
-    const minH = 42
+    const minH = isMobile ? MOBILE_INPUT_ROW_H : 42
     const desired = Math.max(scrollH, minH)
     const targetH = desired > maxH ? maxH : desired
 
@@ -905,7 +985,7 @@ export default function InputBar() {
     el.style.overflowY = desired > maxH ? 'auto' : 'hidden'
 
     prevHeightRef.current = targetH
-  }, [])
+  }, [isMobile])
 
   // 将 prompt 同步渲染到 contentEditable（含胶囊 tag）
   useEffect(() => {
@@ -1463,6 +1543,90 @@ export default function InputBar() {
     </div>
   )
 
+  const mobileChipClass = 'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-medium border border-gray-200/60 dark:border-white/[0.08] bg-white/80 dark:bg-white/[0.06] text-gray-600 dark:text-gray-300 shadow-sm active:scale-95 transition-all whitespace-nowrap'
+
+  const renderMobileParamChips = () => (
+    <div className="flex items-center gap-1.5 overflow-x-auto scrollbar-hide pb-2">
+      <button type="button" onClick={() => { dismissAllTooltips(); setShowSizePicker(true) }} className={mobileChipClass}>
+        <span className="text-gray-400 dark:text-gray-500">尺寸</span>
+        <span>{displaySize}</span>
+      </button>
+      <button
+        type="button"
+        onClick={() => !settings.codexCli && setMobileParamSheet('quality')}
+        className={`${mobileChipClass} ${settings.codexCli ? 'opacity-50' : ''}`}
+      >
+        <span className="text-gray-400 dark:text-gray-500">质量</span>
+        <span>{settings.codexCli ? 'auto' : isFalProvider && params.quality === 'auto' ? 'high' : params.quality}</span>
+      </button>
+      <button type="button" onClick={() => setMobileParamSheet('format')} className={mobileChipClass}>
+        <span className="text-gray-400 dark:text-gray-500">格式</span>
+        <span>{params.output_format.toUpperCase()}</span>
+      </button>
+      <button
+        type="button"
+        onClick={() => !moderationDisabled && setMobileParamSheet('moderation')}
+        className={`${mobileChipClass} ${moderationDisabled ? 'opacity-50' : ''}`}
+      >
+        <span className="text-gray-400 dark:text-gray-500">审核</span>
+        <span>{moderationDisabled ? 'auto' : params.moderation}</span>
+      </button>
+    </div>
+  )
+
+  const renderMobileActionSheet = () => {
+    if (!mobileParamSheet) return null
+    const configs = {
+      quality: {
+        title: '质量',
+        options: qualityOptions,
+        value: settings.codexCli ? 'auto' : isFalProvider && params.quality === 'auto' ? 'high' : params.quality,
+        onChange: (val: string) => setParams({ quality: val as any }),
+      },
+      format: {
+        title: '格式',
+        options: [{ label: 'PNG', value: 'png' }, { label: 'JPEG', value: 'jpeg' }, { label: 'WebP', value: 'webp' }],
+        value: params.output_format,
+        onChange: (val: string) => setParams({ output_format: val as any }),
+      },
+      moderation: {
+        title: '审核',
+        options: [{ label: 'auto', value: 'auto' }, { label: 'low', value: 'low' }],
+        value: params.moderation,
+        onChange: (val: string) => setParams({ moderation: val as any }),
+      },
+    }
+    const cfg = configs[mobileParamSheet]
+    return (
+      <div className="fixed inset-0 z-[70]" onMouseDown={() => setMobileParamSheet(null)} onTouchEnd={() => setMobileParamSheet(null)}>
+        <div className="absolute inset-0 bg-black/20 backdrop-blur-sm animate-overlay-in" />
+        <div
+          className="absolute bottom-0 left-0 right-0 rounded-t-2xl bg-white dark:bg-gray-900 border-t border-gray-200/50 dark:border-white/[0.08] p-5 pb-safe animate-slide-up"
+          onMouseDown={(e) => e.stopPropagation()}
+          onTouchEnd={(e) => e.stopPropagation()}
+        >
+          <div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-3">{cfg.title}</div>
+          <div className="flex flex-wrap gap-2">
+            {cfg.options.map((opt) => (
+              <button
+                key={opt.value}
+                type="button"
+                onClick={() => { cfg.onChange(opt.value); setMobileParamSheet(null) }}
+                className={`px-4 py-2 rounded-full text-sm transition-all ${
+                  cfg.value === opt.value
+                    ? 'bg-blue-500 text-white shadow-sm'
+                    : 'bg-gray-100 dark:bg-white/[0.06] text-gray-700 dark:text-gray-300 active:scale-95'
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <>
       {/* 全屏拖拽遮罩 */}
@@ -1533,6 +1697,8 @@ export default function InputBar() {
         </div>
       )}
 
+      {renderMobileActionSheet()}
+
       <div data-input-bar className="fixed bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 z-30 w-full max-w-4xl px-3 sm:px-4 transition-all duration-300">
         {selectedTaskIds.length > 0 && (
           <div className="flex justify-center mb-3">
@@ -1604,13 +1770,15 @@ export default function InputBar() {
         )}
         <div ref={cardRef} className="bg-white/70 dark:bg-gray-900/70 backdrop-blur-2xl border border-white/50 dark:border-white/[0.08] shadow-[0_8px_30px_rgb(0,0,0,0.08)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.3)] rounded-2xl sm:rounded-3xl p-3 sm:p-4 ring-1 ring-black/5 dark:ring-white/10">
           {/* 移动端拖动条 */}
-          <div
-            ref={handleRef}
-            className="sm:hidden flex justify-center pt-0.5 pb-2 -mt-1 cursor-pointer touch-none"
-            onClick={() => setMobileCollapsed((v) => !v)}
-          >
-            <div className={`w-10 h-1 rounded-full bg-gray-300 dark:bg-white/[0.06] transition-transform duration-200 ${mobileCollapsed ? 'scale-x-75' : ''}`} />
-          </div>
+          {!keyboardVisible && (
+            <div
+              ref={handleRef}
+              className="sm:hidden flex justify-center pt-0.5 pb-2 -mt-1 cursor-pointer touch-none animate-fade-in-up"
+              onClick={() => setMobileCollapsed((v) => !v)}
+            >
+              <div className={`w-10 h-1 rounded-full bg-gray-300 dark:bg-white/[0.06] transition-transform duration-200 ${mobileCollapsed ? 'scale-x-75' : ''}`} />
+            </div>
+          )}
 
           {/* 输入图片行（移动端可折叠） */}
           {inputImages.length > 0 && (
@@ -1632,164 +1800,279 @@ export default function InputBar() {
             )
           )}
 
-          {/* 输入框 */}
-          <div className="relative">
-            {showAtImageMenu && (
-              <div style={{ left: `${menuLeft}px` }} className="absolute bottom-full z-50 mb-2 w-64 overflow-hidden rounded-2xl border border-gray-200/70 bg-white/95 p-1.5 shadow-xl ring-1 ring-black/5 backdrop-blur-xl dark:border-white/[0.08] dark:bg-gray-900/95 dark:ring-white/10">
-                <div className="px-2 pb-1 pt-0.5 text-[11px] text-gray-400 dark:text-gray-500">选择当前参考图</div>
-                <div className="max-h-56 overflow-y-auto custom-scrollbar">
-                  {atImageOptions.map(({ img, index }, optionIndex) => (
+          {/* 输入框 + 按钮 */}
+          {isMobile ? (
+            <>
+              {!keyboardVisible && <div className="animate-fade-in-up">{renderMobileParamChips()}</div>}
+              <div className="relative">
+                {showAtImageMenu && (
+                  <div style={{ left: `${menuLeft}px` }} className="absolute bottom-full z-50 mb-2 w-64 overflow-hidden rounded-2xl border border-gray-200/70 bg-white/95 p-1.5 shadow-xl ring-1 ring-black/5 backdrop-blur-xl dark:border-white/[0.08] dark:bg-gray-900/95 dark:ring-white/10">
+                    <div className="px-2 pb-1 pt-0.5 text-[11px] text-gray-400 dark:text-gray-500">选择当前参考图</div>
+                    <div className="max-h-56 overflow-y-auto custom-scrollbar">
+                      {atImageOptions.map(({ img, index }, optionIndex) => (
+                        <button
+                          key={img.id}
+                          type="button"
+                          onMouseDown={(e) => { e.preventDefault(); selectAtImageOption(index) }}
+                          className={`flex w-full items-center gap-2 rounded-xl px-2 py-1.5 text-left text-xs transition-colors ${
+                            optionIndex === atImageMenuIndex
+                              ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300'
+                              : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/[0.06]'
+                          }`}
+                        >
+                          <span className="h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-gray-200/70 dark:border-white/[0.08]">
+                            <img src={img.dataUrl} className="h-full w-full object-cover" alt="" />
+                          </span>
+                          <span className="min-w-0 flex-1 truncate font-medium">{getImageMentionLabel(index)}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                <div className="flex items-center gap-2 rounded-2xl bg-gray-100/80 dark:bg-white/[0.06] px-2 py-1.5">
+                  <button
+                    type="button"
+                    onClick={() => !atImageLimit && cameraInputRef.current?.click()}
+                    style={{ width: MOBILE_INPUT_ROW_H, height: MOBILE_INPUT_ROW_H }}
+                    className={`flex-shrink-0 flex items-center justify-center rounded-full transition-all ${
+                      atImageLimit
+                        ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
+                        : 'text-gray-500 dark:text-gray-400 active:bg-gray-200 dark:active:bg-white/[0.1]'
+                    }`}
+                    title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '添加参考图'}
+                  >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={1.8} viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" />
+                    </svg>
+                  </button>
+                  <div
+                    ref={textareaRef}
+                    contentEditable
+                    suppressContentEditableWarning
+                    onInput={(e) => {
+                      isUserInputRef.current = true
+                      const el = e.currentTarget
+                      const range = getContentEditableSelection(el)
+                      setCursorPos(range.start)
+                      syncMentionTagSelection(el)
+                      const text = getContentEditablePlainText(el)
+                      setPrompt(text)
+                      setAtImageMenuIndex(0)
+                      setAtImageMenuDismissed(false)
+                    }}
+                    onSelect={(e) => {
+                      const el = e.currentTarget
+                      const range = getContentEditableSelection(el)
+                      setCursorPos(range.start)
+                      syncMentionTagSelection(el)
+                      setAtImageMenuIndex(0)
+                      setAtImageMenuDismissed(false)
+                    }}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePromptPaste}
+                    onCopy={handlePromptCopy}
+                    onClick={(e) => {
+                      const el = textareaRef.current
+                      if (!el) return
+                      const target = e.target as HTMLElement
+                      if (target.classList.contains('mention-tag')) {
+                        const sel = window.getSelection()
+                        if (sel) {
+                          const range = document.createRange()
+                          range.selectNode(target)
+                          sel.removeAllRanges()
+                          sel.addRange(range)
+                          syncMentionTagSelection(el)
+                        }
+                        return
+                      }
+                      syncMentionTagSelection(el)
+                    }}
+                    data-placeholder="描述你想生成的图片……"
+                    style={{ lineHeight: `${MOBILE_INPUT_ROW_H}px` }}
+                    className="flex-1 min-w-0 max-h-[120px] overflow-y-auto whitespace-pre-wrap break-words bg-transparent px-1 text-sm outline-none empty:before:pointer-events-none empty:before:text-gray-400 empty:before:content-[attr(data-placeholder)] dark:text-gray-100 dark:empty:before:text-gray-500"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => hasSubmitApiConfig ? submitTask() : setShowSettings(true)}
+                    disabled={hasSubmitApiConfig ? !canSubmit : false}
+                    style={{ width: MOBILE_INPUT_ROW_H, height: MOBILE_INPUT_ROW_H }}
+                    className={`flex-shrink-0 flex items-center justify-center rounded-full transition-all ${
+                      !hasSubmitApiConfig
+                        ? 'bg-gray-300 dark:bg-white/[0.08] text-white'
+                        : 'bg-blue-500 text-white active:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-white/[0.06] disabled:opacity-50 disabled:cursor-not-allowed'
+                    }`}
+                    title={hasSubmitApiConfig ? (maskDraft ? '遮罩编辑' : '生成') : '请先配置 API'}
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              {/* 桌面端输入框 */}
+              <div className="relative">
+                {showAtImageMenu && (
+                  <div style={{ left: `${menuLeft}px` }} className="absolute bottom-full z-50 mb-2 w-64 overflow-hidden rounded-2xl border border-gray-200/70 bg-white/95 p-1.5 shadow-xl ring-1 ring-black/5 backdrop-blur-xl dark:border-white/[0.08] dark:bg-gray-900/95 dark:ring-white/10">
+                    <div className="px-2 pb-1 pt-0.5 text-[11px] text-gray-400 dark:text-gray-500">选择当前参考图</div>
+                    <div className="max-h-56 overflow-y-auto custom-scrollbar">
+                      {atImageOptions.map(({ img, index }, optionIndex) => (
+                        <button
+                          key={img.id}
+                          type="button"
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            selectAtImageOption(index)
+                          }}
+                          onMouseEnter={() => setAtImageMenuIndex(optionIndex)}
+                          className={`flex w-full items-center gap-2 rounded-xl px-2 py-1.5 text-left text-xs transition-colors ${
+                            optionIndex === atImageMenuIndex
+                              ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300'
+                              : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/[0.06]'
+                          }`}
+                        >
+                          <span className="h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-gray-200/70 dark:border-white/[0.08]">
+                            <img src={img.dataUrl} className="h-full w-full object-cover" alt="" />
+                          </span>
+                          <span className="min-w-0 flex-1 truncate font-medium">{getImageMentionLabel(index)}</span>
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                <div
+                  ref={textareaRef}
+                  contentEditable
+                  suppressContentEditableWarning
+                  onInput={(e) => {
+                    isUserInputRef.current = true
+                    const el = e.currentTarget
+                    const range = getContentEditableSelection(el)
+                    setCursorPos(range.start)
+                    syncMentionTagSelection(el)
+                    const text = getContentEditablePlainText(el)
+                    setPrompt(text)
+                    setAtImageMenuIndex(0)
+                    setAtImageMenuDismissed(false)
+                  }}
+                  onSelect={(e) => {
+                    const el = e.currentTarget
+                    const range = getContentEditableSelection(el)
+                    setCursorPos(range.start)
+                    syncMentionTagSelection(el)
+                    setAtImageMenuIndex(0)
+                    setAtImageMenuDismissed(false)
+                  }}
+                  onKeyDown={handleKeyDown}
+                  onPaste={handlePromptPaste}
+                  onCopy={handlePromptCopy}
+                  onClick={(e) => {
+                    const el = textareaRef.current
+                    if (!el) return
+                    const target = e.target as HTMLElement
+                    if (target.classList.contains('mention-tag')) {
+                      const sel = window.getSelection()
+                      if (sel) {
+                        const range = document.createRange()
+                        range.selectNode(target)
+                        sel.removeAllRanges()
+                        sel.addRange(range)
+                        syncMentionTagSelection(el)
+                      }
+                      return
+                    }
+                    syncMentionTagSelection(el)
+                  }}
+                  data-placeholder="描述你想生成的图片……"
+                  className="min-h-[42px] w-full whitespace-pre-wrap break-words rounded-2xl border border-gray-200/60 bg-white/50 px-4 py-3 text-sm leading-relaxed shadow-sm outline-none transition-[border-color,box-shadow] duration-200 focus:ring-1 focus:ring-blue-300/40 empty:before:pointer-events-none empty:before:text-gray-400 empty:before:content-[attr(data-placeholder)] dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-100 dark:focus:ring-blue-500/30 dark:empty:before:text-gray-500"
+                />
+              </div>
+
+              {/* 桌面端按钮行 */}
+              <div className="mt-3 flex items-center justify-between gap-2">
+                <div className="flex min-w-0 items-center gap-2">
+                  <div
+                    className="relative"
+                    onMouseEnter={sizeHint.show}
+                    onMouseLeave={sizeHint.hide}
+                    onTouchStart={sizeHint.startTouch}
+                    onTouchEnd={sizeHint.clearTimer}
+                    onTouchCancel={sizeHint.hide}
+                  >
+                    <ButtonTooltip
+                      visible={isFalTextToImage && sizeHint.visible}
+                      text={<>fal.ai 的文生图模式不支持 <code className="rounded bg-white/10 px-1 py-0.5 font-mono">auto</code> 参数</>}
+                    />
                     <button
-                      key={img.id}
                       type="button"
-                      onMouseDown={(e) => {
-                        e.preventDefault()
-                        selectAtImageOption(index)
-                      }}
-                      onMouseEnter={() => setAtImageMenuIndex(optionIndex)}
-                      className={`flex w-full items-center gap-2 rounded-xl px-2 py-1.5 text-left text-xs transition-colors ${
-                        optionIndex === atImageMenuIndex
-                          ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300'
-                          : 'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/[0.06]'
+                      onClick={() => { dismissAllTooltips(); setShowSizePicker(true) }}
+                      className="h-10 w-[104px] rounded-xl border border-gray-200/60 bg-white text-xs font-mono text-gray-600 shadow-sm transition-all hover:bg-gray-50 hover:shadow dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-gray-300 dark:hover:bg-white/[0.1]"
+                      title="选择尺寸"
+                    >
+                      {displaySize}
+                    </button>
+                  </div>
+                  <div
+                    className="relative"
+                    onMouseEnter={() => setAttachHover(true)}
+                    onMouseLeave={() => setAttachHover(false)}
+                  >
+                    <ButtonTooltip visible={atImageLimit && attachHover} text={`参考图数量已达上限（${API_MAX_IMAGES} 张），无法继续添加`} />
+                    <button
+                      onClick={() => !atImageLimit && fileInputRef.current?.click()}
+                      className={`h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm ${
+                        atImageLimit
+                          ? 'bg-gray-200 dark:bg-white/[0.04] text-gray-300 dark:text-gray-500 cursor-not-allowed'
+                          : 'bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow'
                       }`}
+                      title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '添加参考图'}
                     >
-                      <span className="h-9 w-9 shrink-0 overflow-hidden rounded-lg border border-gray-200/70 dark:border-white/[0.08]">
-                        <img src={img.dataUrl} className="h-full w-full object-cover" alt="" />
-                      </span>
-                      <span className="min-w-0 flex-1 truncate font-medium">{getImageMentionLabel(index)}</span>
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                      </svg>
                     </button>
-                  ))}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => setShowParamsModal(true)}
+                    className="h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow"
+                    title="参数设置"
+                  >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                    </svg>
+                  </button>
+                </div>
+                <div className="flex items-center gap-2 flex-shrink-0">
+                  <div
+                    className="relative"
+                    onMouseEnter={() => setSubmitHover(true)}
+                    onMouseLeave={() => setSubmitHover(false)}
+                  >
+                    <ButtonTooltip visible={!hasSubmitApiConfig && submitHover} text="尚未完成 API 配置，请在右上角设置中进行" />
+                    <button
+                      onClick={() => hasSubmitApiConfig ? submitTask() : setShowSettings(true)}
+                      disabled={hasSubmitApiConfig ? !canSubmit : false}
+                      className={`h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm hover:shadow ${
+                        !hasSubmitApiConfig
+                          ? 'bg-gray-300 dark:bg-white/[0.06] text-white cursor-pointer'
+                          : 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-white/[0.04] disabled:opacity-50 disabled:cursor-not-allowed'
+                      }`}
+                      title={hasSubmitApiConfig ? (maskDraft ? '遮罩编辑 (Ctrl+Enter)' : '生成 (Ctrl+Enter)') : '请先配置 API'}
+                    >
+                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
               </div>
-            )}
-            <div
-              ref={textareaRef}
-              contentEditable
-              suppressContentEditableWarning
-              onInput={(e) => {
-                isUserInputRef.current = true
-                const el = e.currentTarget
-                const range = getContentEditableSelection(el)
-                setCursorPos(range.start)
-                syncMentionTagSelection(el)
-                const text = getContentEditablePlainText(el)
-                setPrompt(text)
-                setAtImageMenuIndex(0)
-                setAtImageMenuDismissed(false)
-              }}
-              onSelect={(e) => {
-                const el = e.currentTarget
-                const range = getContentEditableSelection(el)
-                setCursorPos(range.start)
-                syncMentionTagSelection(el)
-                setAtImageMenuIndex(0)
-                setAtImageMenuDismissed(false)
-              }}
-              onKeyDown={handleKeyDown}
-              onPaste={handlePromptPaste}
-              onCopy={handlePromptCopy}
-              onClick={(e) => {
-                const el = textareaRef.current
-                if (!el) return
-                const target = e.target as HTMLElement
-                if (target.classList.contains('mention-tag')) {
-                  const sel = window.getSelection()
-                  if (sel) {
-                    const range = document.createRange()
-                    range.selectNode(target)
-                    sel.removeAllRanges()
-                    sel.addRange(range)
-                    syncMentionTagSelection(el)
-                  }
-                  return
-                }
-
-                syncMentionTagSelection(el)
-              }}
-              data-placeholder="描述你想生成的图片……"
-              className="min-h-[42px] w-full whitespace-pre-wrap break-words rounded-2xl border border-gray-200/60 bg-white/50 px-4 py-3 text-sm leading-relaxed shadow-sm outline-none transition-[border-color,box-shadow] duration-200 focus:ring-1 focus:ring-blue-300/40 empty:before:pointer-events-none empty:before:text-gray-400 empty:before:content-[attr(data-placeholder)] dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-gray-100 dark:focus:ring-blue-500/30 dark:empty:before:text-gray-500"
-            />
-          </div>
-
-          {/* 按钮行 */}
-          <div className="mt-3 flex items-center justify-between gap-2">
-            <div className="flex min-w-0 items-center gap-2">
-              <div
-                className="relative"
-                onMouseEnter={sizeHint.show}
-                onMouseLeave={sizeHint.hide}
-                onTouchStart={sizeHint.startTouch}
-                onTouchEnd={sizeHint.clearTimer}
-                onTouchCancel={sizeHint.hide}
-              >
-                <ButtonTooltip
-                  visible={isFalTextToImage && sizeHint.visible}
-                  text={<>fal.ai 的文生图模式不支持 <code className="rounded bg-white/10 px-1 py-0.5 font-mono">auto</code> 参数</>}
-                />
-                <button
-                  type="button"
-                  onClick={() => { dismissAllTooltips(); setShowSizePicker(true) }}
-                  className="h-10 w-[104px] rounded-xl border border-gray-200/60 bg-white text-xs font-mono text-gray-600 shadow-sm transition-all hover:bg-gray-50 hover:shadow dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-gray-300 dark:hover:bg-white/[0.1]"
-                  title="选择尺寸"
-                >
-                  {displaySize}
-                </button>
-              </div>
-              <div
-                className="relative"
-                onMouseEnter={() => setAttachHover(true)}
-                onMouseLeave={() => setAttachHover(false)}
-              >
-                <ButtonTooltip visible={atImageLimit && attachHover} text={`参考图数量已达上限（${API_MAX_IMAGES} 张），无法继续添加`} />
-                <button
-                  onClick={() => !atImageLimit && fileInputRef.current?.click()}
-                  className={`h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm ${
-                    atImageLimit
-                      ? 'bg-gray-200 dark:bg-white/[0.04] text-gray-300 dark:text-gray-500 cursor-not-allowed'
-                      : 'bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow'
-                  }`}
-                  title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '添加参考图'}
-                >
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                  </svg>
-                </button>
-              </div>
-              <button
-                type="button"
-                onClick={() => setShowParamsModal(true)}
-                className="h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm bg-gray-200 dark:bg-white/[0.06] hover:bg-gray-300 dark:hover:bg-white/[0.1] text-gray-500 dark:text-gray-300 hover:shadow"
-                title="参数设置"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
-                </svg>
-              </button>
-            </div>
-            <div className="flex items-center gap-2 flex-shrink-0">
-              <div
-                className="relative"
-                onMouseEnter={() => setSubmitHover(true)}
-                onMouseLeave={() => setSubmitHover(false)}
-              >
-                <ButtonTooltip visible={!hasSubmitApiConfig && submitHover} text="尚未完成 API 配置，请在右上角设置中进行" />
-                <button
-                  onClick={() => hasSubmitApiConfig ? submitTask() : setShowSettings(true)}
-                  disabled={hasSubmitApiConfig ? !canSubmit : false}
-                  className={`h-10 w-10 flex items-center justify-center rounded-xl transition-all shadow-sm hover:shadow ${
-                    !hasSubmitApiConfig
-                      ? 'bg-gray-300 dark:bg-white/[0.06] text-white cursor-pointer'
-                      : 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 dark:disabled:bg-white/[0.04] disabled:opacity-50 disabled:cursor-not-allowed'
-                  }`}
-                  title={hasSubmitApiConfig ? (maskDraft ? '遮罩编辑 (Ctrl+Enter)' : '生成 (Ctrl+Enter)') : '请先配置 API'}
-                >
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-          </div>
+            </>
+          )}
 
           <input
             ref={fileInputRef}
@@ -1799,6 +2082,14 @@ export default function InputBar() {
             className="hidden"
             onChange={handleFileUpload}
           />
+          <input
+            ref={cameraInputRef}
+            type="file"
+            accept="image/*"
+            capture="environment"
+            className="hidden"
+            onChange={handleFileUpload}
+          />
         </div>
       </div>
     </>
diff --git a/src/index.css b/src/index.css
index 27b614ec..60cf5d0a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -296,3 +296,31 @@ input[type="number"] {
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
   }
 }
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.animate-slide-up {
+  animation: slide-up 0.25s ease-out;
+}
+@keyframes slide-up {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+.pb-safe {
+  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.25s ease-out;
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}

From 79334b3b6c708b049696d0ce4f1afbf7b73528e1 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Wed, 13 May 2026 11:18:11 +0800
Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9B=B8=E5=86=8C=E5=85=A5=E5=8F=A3=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=EF=BC=8C=E9=94=AE=E7=9B=98=E5=BC=B9=E5=87=BA=E6=97=B6?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E9=99=84=E4=BB=B6=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在相机按钮前新增 + 号按钮，点击打开相册（fileInputRef）
- 用 keyboardVisible 条件包裹两个按钮，键盘弹出时自动隐藏

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 7d5e2020..e58e235a 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -1830,6 +1830,22 @@ export default function InputBar() {
                   </div>
                 )}
                 <div className="flex items-center gap-2 rounded-2xl bg-gray-100/80 dark:bg-white/[0.06] px-2 py-1.5">
+                  {!keyboardVisible && <div className="flex items-center flex-shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => !atImageLimit && fileInputRef.current?.click()}
+                    style={{ width: MOBILE_INPUT_ROW_H, height: MOBILE_INPUT_ROW_H }}
+                    className={`flex-shrink-0 flex items-center justify-center rounded-full transition-all ${
+                      atImageLimit
+                        ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
+                        : 'text-gray-500 dark:text-gray-400 active:bg-gray-200 dark:active:bg-white/[0.1]'
+                    }`}
+                    title={atImageLimit ? `已达上限 ${API_MAX_IMAGES} 张` : '从相册选择'}
+                  >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                  </button>
                   <button
                     type="button"
                     onClick={() => !atImageLimit && cameraInputRef.current?.click()}
@@ -1846,6 +1862,7 @@ export default function InputBar() {
                       <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z" />
                     </svg>
                   </button>
+                  </div>}
                   <div
                     ref={textareaRef}
                     contentEditable

From 0f96ec2802985c5e2a9a6e40ada7fb495a6a9f6d Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Wed, 13 May 2026 10:52:46 +0800
Subject: [PATCH 6/8] =?UTF-8?q?style:=20=E6=94=B6=E7=B4=A7=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=8F=82=E8=80=83=E5=9B=BE=E6=A0=8F=E9=97=B4?=
 =?UTF-8?q?=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index e58e235a..3e670498 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -1396,7 +1396,7 @@ export default function InputBar() {
   const renderImageThumbs = () => {
     return (
       <div ref={imagesRef}>
-        <div className="grid grid-cols-[repeat(auto-fill,52px)] justify-between gap-x-2 gap-y-3 mb-3">
+        <div className={`grid grid-cols-[repeat(auto-fill,52px)] justify-between mb-3 ${isMobile ? 'gap-x-1 gap-y-2' : 'gap-x-2 gap-y-3'}`}>
           {inputImages.map((img, idx) => renderImageThumb(img, idx))}
           {renderClearAllButton()}
         </div>

From 46c4d4d10cb10a175863671008848c77621f8418 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Wed, 13 May 2026 10:58:54 +0800
Subject: [PATCH 7/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E9=94=AE=E7=9B=98?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=E5=9F=BA=E5=87=86=E6=BC=82=E7=A7=BB=E5=8F=8A?=
 =?UTF-8?q?=E8=B7=A8=E6=96=AD=E7=82=B9=E5=88=87=E6=8D=A2=E5=86=85=E5=AE=B9?=
 =?UTF-8?q?=E4=B8=A2=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useKeyboardVisible 改用 screen.height 作为稳定基准，避免 PWA 全屏切换时判断失准
- prompt 同步 effect 加入 isMobile 依赖，确保跨 640px 断点切换时内容正确恢复

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 3e670498..3bd43bc9 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -282,24 +282,24 @@ function useKeyboardVisible() {
   useEffect(() => {
     let fromViewport = false
     let fromFocus = false
-    const initialHeight = window.innerHeight
+    const baseHeight = window.screen?.height || window.innerHeight
     let focusOutTimer: ReturnType<typeof setTimeout> | null = null
     const update = () => setVisible(fromViewport || fromFocus)
 
     const vv = window.visualViewport
     const onVVResize = () => {
       if (vv) {
-        fromViewport = vv.height < window.innerHeight * KEYBOARD_THRESHOLD
+        fromViewport = vv.height < baseHeight * KEYBOARD_THRESHOLD
         update()
       }
     }
 
     const onWindowResize = () => {
       const curr = window.innerHeight
-      if (curr > initialHeight * 0.85) {
+      if (curr > baseHeight * 0.85) {
         fromFocus = false
         update()
-      } else if (curr < initialHeight * KEYBOARD_THRESHOLD) {
+      } else if (curr < baseHeight * KEYBOARD_THRESHOLD) {
         fromFocus = true
         update()
       }
@@ -1007,7 +1007,7 @@ export default function InputBar() {
     if (el.innerHTML !== html) {
       el.innerHTML = html
     }
-  }, [prompt, inputImages])
+  }, [prompt, inputImages, isMobile])
 
   useEffect(() => {
     adjustTextareaHeight()

From 43aee4e12c5034315ff0a3fc3a6152cf8a093bc4 Mon Sep 17 00:00:00 2001
From: avelli <reasonilly@foxmail.com>
Date: Wed, 13 May 2026 11:55:57 +0800
Subject: [PATCH 8/8] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B7=A8=E6=96=AD?=
 =?UTF-8?q?=E7=82=B9=E5=88=87=E6=8D=A2=E6=97=B6=E8=BE=93=E5=85=A5=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E6=B3=84=E6=BC=8F=E5=88=B0=E6=8C=89=E9=92=AE=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为移动端/桌面端输入区域添加 Fragment key，强制 React 卸载重建而非就地协调
- isMobile 变化时重置 prevHeightRef，新元素跳过动画直接设置正确高度

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/InputBar.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/InputBar.tsx b/src/components/InputBar.tsx
index 3bd43bc9..2662a2a0 100644
--- a/src/components/InputBar.tsx
+++ b/src/components/InputBar.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useCallback, useState, useMemo, type ReactNode } from 'react'
+import { Fragment, useRef, useEffect, useCallback, useState, useMemo, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { useStore, submitTask, addImageFromFile, updateTaskInStore, removeMultipleTasks, getCachedImage, ensureImageCached } from '../store'
 import { DEFAULT_PARAMS } from '../types'
@@ -975,11 +975,19 @@ export default function InputBar() {
     const desired = Math.max(scrollH, minH)
     const targetH = desired > maxH ? maxH : desired
 
-    // 2. 将高度设回上一次的实际高度，强制重绘，准备开始动画
+    // 2. 如果元素刚挂载（无历史高度），跳过动画直接设置
+    if (prevHeightRef.current === 0) {
+      el.style.height = targetH + 'px'
+      el.style.overflowY = desired > maxH ? 'auto' : 'hidden'
+      prevHeightRef.current = targetH
+      return
+    }
+
+    // 3. 将高度设回上一次的实际高度，强制重绘，准备开始动画
     el.style.height = prevHeightRef.current + 'px'
     void el.offsetHeight
 
-    // 3. 恢复平滑过渡，并设置目标高度
+    // 4. 恢复平滑过渡，并设置目标高度
     el.style.transition = 'height 150ms ease, border-color 200ms, box-shadow 200ms'
     el.style.height = targetH + 'px'
     el.style.overflowY = desired > maxH ? 'auto' : 'hidden'
@@ -987,6 +995,10 @@ export default function InputBar() {
     prevHeightRef.current = targetH
   }, [isMobile])
 
+  useEffect(() => {
+    prevHeightRef.current = 0
+  }, [isMobile])
+
   // 将 prompt 同步渲染到 contentEditable（含胶囊 tag）
   useEffect(() => {
     const el = textareaRef.current
@@ -1802,7 +1814,7 @@ export default function InputBar() {
 
           {/* 输入框 + 按钮 */}
           {isMobile ? (
-            <>
+            <Fragment key="mobile">
               {!keyboardVisible && <div className="animate-fade-in-up">{renderMobileParamChips()}</div>}
               <div className="relative">
                 {showAtImageMenu && (
@@ -1928,9 +1940,9 @@ export default function InputBar() {
                   </button>
                 </div>
               </div>
-            </>
+            </Fragment>
           ) : (
-            <>
+            <Fragment key="desktop">
               {/* 桌面端输入框 */}
               <div className="relative">
                 {showAtImageMenu && (
@@ -2088,7 +2100,7 @@ export default function InputBar() {
                   </div>
                 </div>
               </div>
-            </>
+            </Fragment>
           )}
 
           <input