refactor: split modules and harden scraping workflows

web/src/components/LayoutThemeToggle.tsx

@@ -0,0 +1,48 @@
+import { Monitor, Moon, Sun } from 'lucide-react'
+import clsx from 'clsx'
+
+import type { ThemeMode } from './useThemeMode'
+
+type LayoutThemeToggleProps = {
+  mode: ThemeMode
+  onChange: (mode: ThemeMode) => void
+}
+
+const options: Array<{
+  mode: ThemeMode
+  label: string
+  icon: typeof Sun
+}> = [
+  { mode: 'light', label: '白天模式', icon: Sun },
+  { mode: 'dark', label: '夜晚模式', icon: Moon },
+  { mode: 'system', label: '跟随系统', icon: Monitor },
+]
+
+export function LayoutThemeToggle({ mode, onChange }: LayoutThemeToggleProps) {
+  return (
+    <div className="flex items-center rounded-full border border-[var(--app-border)] bg-[var(--app-control-bg)] p-1 shadow-sm">
+      {options.map((option) => {
+        const Icon = option.icon
+        const active = mode === option.mode
+        return (
+          <button
+            key={option.mode}
+            type="button"
+            title={option.label}
+            aria-label={option.label}
+            aria-pressed={active}
+            className={clsx(
+              'inline-flex h-8 w-8 items-center justify-center rounded-full transition-all duration-200',
+              active
+                ? 'bg-[var(--app-command-bg)] text-[var(--app-command-text)] shadow-sm'
+                : 'text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]',
+            )}
+            onClick={() => onChange(option.mode)}
+          >
+            <Icon size={15} />
+          </button>
+        )
+      })}
+    </div>
+  )
+}