Function SearchInput

src/renderer/src/components/panels/Search/SearchInput.tsx:8–107

()

import { useLayoutStore } from '../../../stores/layoutStore'

export function SearchInput(): React.JSX.Element {
  const { query, setQuery, options, setOptions, clearSearch, triggerSearch, focusRequestKey } =
    useGlobalSearchStore()
  const activePanel = useLayoutStore((state) => state.activePanel)
  const inputRef = useRef<InputRef>(null)

  // 当切换到搜索面板或收到快捷键请求时自动聚焦并全选
  useEffect(() => {
    if (activePanel !== 'search') {
      return undefined
    }

    const timer = setTimeout(() => {
      inputRef.current?.focus()
      inputRef.current?.select()
    }, 50)

    return () => clearTimeout(timer)
  }, [activePanel, focusRequestKey])

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setQuery(e.target.value)
    },
    [setQuery]
  )

  const handleClear = useCallback(() => {
    clearSearch()
    inputRef.current?.focus()
  }, [clearSearch])

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === 'Escape') {
        handleClear()
      } else if (e.key === 'Enter') {
        e.preventDefault()
        triggerSearch()
      }
    },
    [handleClear, triggerSearch]
  )

  const toggleOption = useCallback(
    (key: 'matchCase' | 'useRegex' | 'matchWholeWord') => {
      setOptions({ [key]: !options[key] })
    },
    [options, setOptions]
  )

  return (
    <div className="search-input-container">
      <Input
        ref={inputRef}
        value={query}
        onChange={handleChange}
        onKeyDown={handleKeyDown}