feat: bootstrap MediaStationGo (Go + React rewrite of MediaStation)

Adopt the cropflre/nowen-video tech stack and rebuild the project from
scratch:

  - Backend: Go 1.25 + Gin + GORM + SQLite (WAL) + JWT + WebSocket hub.
    Layered packages config / database / model / repository / service /
    middleware / handler. Default admin (admin/admin123) seeded on first
    run; /api routes for auth, libraries, media, stream and admin
    panels. WebSocket scan-progress events at /api/ws.
  - Frontend: React 18 + Vite 5 + Tailwind 3.4 + Zustand + axios +
    react-router 6 + lucide-react + framer-motion + hls.js. Pages for
    Login / Home / Library / Search / MediaDetail / Player / Admin
    (Library, Users, Settings tabs).
  - Distribution: multi-arch Dockerfile (frontend -> backend -> Alpine
    runtime), docker-compose.yml, GitHub Actions for CI and GHCR
    publish, Makefile, env-prefixed config (MEDIASTATION_*).
  - Docs: README, CONTRIBUTING, .env.example, config.example.yaml.

Backend builds, vets and tests pass. Frontend builds via tsc -b && vite
build (250 kB JS / 16 kB CSS, gzipped 84 / 4 kB).

web/src/components/Layout.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react'
+import { Link, NavLink, Outlet, useNavigate } from 'react-router-dom'
+import {
+  Film,
+  Home,
+  LogOut,
+  Search,
+  Settings,
+  Library as LibraryIcon,
+} from 'lucide-react'
+import clsx from 'clsx'
+
+import { libraryAPI } from '../api/library'
+import { useAuthStore } from '../stores/auth'
+import type { Library } from '../types'
+
+// Top-level chrome: a fixed left rail + scrollable content area.
+export function Layout() {
+  const navigate = useNavigate()
+  const user = useAuthStore((s) => s.user)
+  const logout = useAuthStore((s) => s.logout)
+  const [libraries, setLibraries] = useState<Library[]>([])
+
+  useEffect(() => {
+    libraryAPI.list().then(setLibraries).catch(() => undefined)
+  }, [])
+
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <div className="flex min-h-full">
+      <aside className="hidden w-64 shrink-0 flex-col border-r border-white/5 bg-surface-900/80 px-4 py-6 backdrop-blur md:flex">
+        <Link to="/" className="mb-8 flex items-center gap-2 px-2">
+          <Film className="h-6 w-6 text-primary-400" />
+          <span className="font-display text-xl font-bold tracking-wide text-white">
+            MediaStationGo
+          </span>
+        </Link>
+
+        <nav className="flex-1 space-y-1">
+          <SidebarLink to="/" icon={<Home size={18} />} label="首页" end />
+          <SidebarLink to="/search" icon={<Search size={18} />} label="搜索" />
+
+          <div className="mt-6 px-2 text-xs uppercase tracking-wider text-slate-500">
+            媒体库
+          </div>
+          {libraries.length === 0 && (
+            <div className="px-2 py-1 text-sm text-slate-500">暂无媒体库</div>
+          )}
+          {libraries.map((lib) => (
+            <SidebarLink
+              key={lib.id}
+              to={`/library/${lib.id}`}
+              icon={<LibraryIcon size={18} />}
+              label={lib.name}
+            />
+          ))}
+
+          {user?.role === 'admin' && (
+            <>
+              <div className="mt-6 px-2 text-xs uppercase tracking-wider text-slate-500">
+                管理
+              </div>
+              <SidebarLink to="/admin" icon={<Settings size={18} />} label="管理后台" />
+            </>
+          )}
+        </nav>
+
+        <button
+          onClick={handleLogout}
+          className="mt-4 flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-400 transition hover:bg-white/5 hover:text-white"
+        >
+          <LogOut size={16} />
+          退出登录 ({user?.username})
+        </button>
+      </aside>
+
+      <main className="flex-1 overflow-y-auto px-6 py-8">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
+
+function SidebarLink({
+  to,
+  icon,
+  label,
+  end,
+}: {
+  to: string
+  icon: React.ReactNode
+  label: string
+  end?: boolean
+}) {
+  return (
+    <NavLink
+      to={to}
+      end={end}
+      className={({ isActive }) =>
+        clsx(
+          'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition',
+          isActive
+            ? 'bg-primary-400/10 text-primary-400'
+            : 'text-slate-300 hover:bg-white/5 hover:text-white',
+        )
+      }
+    >
+      {icon}
+      <span className="truncate">{label}</span>
+    </NavLink>
+  )
+}

web/src/components/MediaCard.tsx

@@ -0,0 +1,33 @@
+import { Link } from 'react-router-dom'
+import { Film } from 'lucide-react'
+
+import type { Media } from '../types'
+
+// Compact poster tile used by every listing surface (home / library / search).
+export function MediaCard({ media }: { media: Media }) {
+  return (
+    <Link
+      to={`/media/${media.id}`}
+      className="group block overflow-hidden rounded-xl border border-white/5 bg-surface-800/60 transition hover:border-primary-400/50 hover:shadow-lg hover:shadow-primary-400/20"
+    >
+      <div className="aspect-[2/3] w-full bg-surface-900">
+        {media.poster_url ? (
+          <img
+            src={media.poster_url}
+            alt={media.title}
+            loading="lazy"
+            className="h-full w-full object-cover transition group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center text-slate-600">
+            <Film size={48} />
+          </div>
+        )}
+      </div>
+      <div className="px-3 py-2">
+        <p className="truncate text-sm font-medium text-white">{media.title}</p>
+        {media.year > 0 && <p className="text-xs text-slate-400">{media.year}</p>}
+      </div>
+    </Link>
+  )
+}

web/src/components/RequireAuth.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react'
+import { Navigate, useLocation } from 'react-router-dom'
+
+import { useAuthStore } from '../stores/auth'
+
+// Route guard: redirects to /login when no token is present.
+export function RequireAuth({ children }: { children: ReactNode }) {
+  const token = useAuthStore((s) => s.token)
+  const location = useLocation()
+  if (!token) {
+    return <Navigate to="/login" replace state={{ from: location }} />
+  }
+  return <>{children}</>
+}
+
+// Route guard: only allows users with role === "admin".
+export function RequireAdmin({ children }: { children: ReactNode }) {
+  const user = useAuthStore((s) => s.user)
+  if (user?.role !== 'admin') {
+    return <Navigate to="/" replace />
+  }
+  return <>{children}</>
+}