优化阅读功能

web/src/components/LayoutReaderModeToggle.tsx

@@ -0,0 +1,37 @@
+import { BookOpen, Clapperboard } from 'lucide-react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { useReaderSettingsStore } from '../stores/readerSettings'
+
+// 顶栏的「影视 / 阅读」切换：只显示当前模式的图标（影视 / 阅读），点一下切到另一个模块。
+// 模式只作用于首页（`/`），所以不在首页时顺带跳回首页，避免点了没反应。
+export function LayoutReaderModeToggle() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const homeMode = useReaderSettingsStore((s) => s.homeMode)
+  const setHomeMode = useReaderSettingsStore((s) => s.setHomeMode)
+
+  const reading = homeMode === 'reading'
+  const label = reading ? '当前是阅读模式，点击切换到影视' : '当前是影视模式，点击切换到阅读'
+
+  const toggle = () => {
+    setHomeMode(reading ? 'media' : 'reading')
+    if (location.pathname !== '/') navigate('/')
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      title={label}
+      aria-label={label}
+      className={`shrink-0 rounded-xl border p-2.5 transition-colors ${
+        reading
+          ? 'border-brand-500/60 bg-brand-500/10 text-brand-600 hover:bg-brand-500/20'
+          : 'border-[var(--app-border)] text-[var(--app-muted)] hover:bg-[var(--app-hover)] hover:text-[var(--app-text)]'
+      }`}
+    >
+      {reading ? <BookOpen size={18} /> : <Clapperboard size={18} />}
+    </button>
+  )
+}