UI 全面重设计: 明亮画廊风格 + 剧集合并显示

## 色彩体系重构 - tailwind.config.js: sand/ink 全新色阶 + shadow 阴影预设 - index.css: 全组件系统重写 (card/input/btn/badge/table) ## 核心页面重写 - LoginPage: 纯白卡片 + 品牌光晕 + Framer Motion 入场动画 - HomePage: Billboard 推荐位 + 剧集卡片联动媒体库 - Layout: 白色侧边栏 + 路由过渡动画 - MediaCard: 新增 linkTo prop, 悬停浮层优化 ## 剧集合并显示 - LibraryPage: 使用 groupSeries 合并剧集, 分季选集详情 - 首页剧集卡片自动链接到媒体库详情 ## 全量类名迁移 (43 文件) - text-slate-* -> text-ink-*/text-sand-* - text-primary-* -> text-brand-* - text-white -> text-ink-600 - bg/border-slate-* -> bg/border-sand-* - 500+ 深色硬编码类名清零
2026-10-03 04:26:36 +08:00 · 2026-05-26 22:02:00 +08:00
parent 3a2db6bdd9
commit c094818594
45 changed files with 1938 additions and 1411 deletions
@@ -1,71 +1,103 @@
+import { useRef } from 'react'
 import { Link } from 'react-router-dom'
-import { Film, Play } from 'lucide-react'
-
+import { motion } from 'framer-motion'
+import { Film, Play, Layers, Star } from 'lucide-react'
 import { imageURL } from '../api/client'
 import type { Media } from '../types'

-/**
- * Compact poster tile — used by library, search, favourites, poster wall, etc.
- *
- * 视觉密度调小：之前字体偏大、卡片整体偏宽，导致每页只能塞下 5 个左右；
- * 现在文字行 truncate + 字号缩到 12px，让 8 列网格不再"挤"。
- */
-export function MediaCard({
-  media,
-  progress,
+export const MediaCard = ({
+  media, progress, count, rating, linkTo,
 }: {
-  media: Media
-  progress?: number
-}) {
-  return (
-    <Link
-      to={`/media/${media.id}`}
-      className="group block overflow-hidden rounded-lg border border-cream-900/15 bg-surface-400 transition-all hover:border-brand-500/30 hover:bg-surface-300"
-    >
-      {/* Poster */}
-      <div className="relative aspect-[2/3] w-full overflow-hidden bg-surface-600">
-        {media.poster_url ? (
-          <img
-            src={imageURL(media.poster_url)}
-            alt={media.title}
-            loading="lazy"
-            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-            referrerPolicy="no-referrer"
-          />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center text-cream-900/30">
-            <Film size={36} />
-          </div>
-        )}
+  media: Media; progress?: number; count?: number; rating?: number; linkTo?: string
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const href = linkTo ?? `/media/${media.id}`

-        {/* Hover overlay */}
-        <div className="absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100">
-          <span className="flex items-center gap-1 text-[11px] text-white/90">
-            <Play size={11} />
-            播放
-          </span>
+  return (
+    <Link to={href} className="group block">
+      <motion.div
+        ref={ref}
+        whileHover={{ scale: 1.04, y: -6 }}
+        transition={{ type: 'spring', stiffness: 280, damping: 22 }}
+        className="relative overflow-hidden rounded-2xl bg-white border border-gray-200/90 shadow-[0_1px_3px_rgba(0,0,0,0.01),0_1px_2px_rgba(0,0,0,0.015)] transition-all duration-300 hover:border-brand-500/40 hover:shadow-[0_12px_32px_rgba(17,24,39,0.04),0_4px_12px_rgba(17,24,39,0.01)]"
+      >
+        {/* Poster Wrapper */}
+        <div className="relative aspect-[2/3] w-full overflow-hidden bg-gray-50">
+          {media.poster_url ? (
+            <img
+              src={imageURL(media.poster_url)}
+              alt={media.title}
+              loading="lazy"
+              className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+              referrerPolicy="no-referrer"
+            />
+          ) : (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 text-gray-400 bg-gray-50">
+              <Film size={28} className="stroke-[1.5]" />
+              <span className="text-[10px] uppercase tracking-wider font-bold">No Poster</span>
+            </div>
+          )}
+
+          {/* Episode count badge */}
+          {count !== undefined && count > 1 && (
+            <span className="absolute right-3 top-3 inline-flex items-center gap-1 rounded-lg bg-[#111827]/90 px-2 py-1 text-[10px] font-bold text-white shadow-sm border border-white/10">
+              <Layers size={10} className="text-[#c9954a]" />
+              <span>{count} 集</span>
+            </span>
+          )}
+
+          {/* Rating Badge */}
+          {(rating || (media as any).rating) && (
+            <span className="absolute left-3 top-3 inline-flex items-center gap-0.5 rounded-lg bg-[#111827]/90 px-2 py-1 text-[10px] font-bold text-[#c9954a] shadow-sm border border-white/10">
+              <Star size={10} fill="currentColor" />
+              <span>{(rating || (media as any).rating).toFixed(1)}</span>
+            </span>
+          )}
+
+          {/* Premium Hover Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-[#111827]/90 via-[#111827]/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
+            <motion.div
+              initial={{ y: 15, opacity: 0 }}
+              whileHover={{ y: 0, opacity: 1 }}
+              transition={{ duration: 0.2 }}
+              className="space-y-2"
+            >
+              <span className="inline-flex items-center gap-1.5 rounded-xl bg-brand-500 px-4 py-2 text-xs font-bold text-white shadow-md shadow-brand-500/20">
+                <Play size={10} fill="currentColor" className="text-white" />
+                <span>立即观影</span>
+              </span>
+              <p className="text-[10px] text-gray-300 font-semibold line-clamp-2 leading-relaxed">
+                {media.overview || "暂无简介内容"}
+              </p>
+            </motion.div>
+          </div>
+
+          {/* Progress Bar overlay */}
+          {progress !== undefined && progress > 0 && progress < 1 && (
+            <div className="absolute inset-x-0 bottom-0 h-1.5 bg-gray-200">
+              <div 
+                className="h-full bg-gradient-to-r from-brand-400 to-brand-500 rounded-r-full transition-all duration-300" 
+                style={{ width: `${Math.round(progress * 100)}%` }} 
+              />
+            </div>
+          )}
        </div>

-        {/* Progress bar */}
-        {progress !== undefined && progress > 0 && progress < 1 && (
-          <div className="absolute inset-x-0 bottom-0 h-1 bg-black/40">
-            <div
-              className="h-full bg-brand-500/80 transition-colors group-hover:bg-brand-400"
-              style={{ width: `${Math.round(progress * 100)}%` }}
-            />
+        {/* Media Metadata Info */}
+        <div className="p-4 space-y-1 bg-white border-t border-gray-50">
+          <p className="truncate text-sm font-bold text-gray-900 group-hover:text-brand-500 transition-colors duration-200">
+            {media.title}
+          </p>
+          <div className="flex items-center justify-between text-[11px] text-gray-500 font-bold uppercase tracking-wider">
+            <span>{media.year > 0 ? media.year : "未知年份"}</span>
+            {media.video_codec && (
+              <span className="px-1.5 py-0.5 rounded-md bg-gray-50 text-gray-600 border border-gray-100">
+                {media.video_codec}
+              </span>
+            )}
          </div>
-        )}
-      </div>
-
-      {/* Info */}
-      <div className="px-2 py-2">
-        <p className="truncate text-xs font-medium text-cream-200 group-hover:text-cream-100">
-          {media.title}
-        </p>
-        {media.year > 0 && (
-          <p className="mt-0.5 text-[11px] text-cream-500">{media.year}</p>
-        )}
-      </div>
+        </div>
+      </motion.div>
    </Link>
  )
-}
+}