refactor: split modules and harden scraping workflows

web/src/pages/SearchInputBar.tsx

@@ -0,0 +1,37 @@
+import type { ChangeEvent, FormEvent } from 'react'
+
+type SearchInputBarProps = {
+  aiOn: boolean
+  query: string
+  onQueryChange: (query: string) => void
+  onAISubmit: (event: FormEvent) => void
+}
+
+export function SearchInputBar({ aiOn, query, onQueryChange, onAISubmit }: SearchInputBarProps) {
+  if (aiOn) {
+    return (
+      <form onSubmit={onAISubmit} className="flex flex-wrap gap-2">
+        <input
+          autoFocus
+          className="input-base"
+          placeholder='例如:"2010 年后的科幻电影" / "最近的动漫"'
+          value={query}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onQueryChange(e.target.value)}
+        />
+        <button type="submit" className="neon-button">
+          搜索
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <input
+      autoFocus
+      className="input-base"
+      placeholder="按标题搜索…"
+      value={query}
+      onChange={(e: ChangeEvent<HTMLInputElement>) => onQueryChange(e.target.value)}
+    />
+  )
+}