优化

web/src/pages/LibrariesPageSections.tsx

@@ -48,36 +48,44 @@ export function LibrariesHeader({
   onManageLibraries: () => void
 }) {
   return (
-    <div className="flex flex-wrap items-end justify-between gap-4">
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between sm:gap-4">
       <div>
-        <h1 className="font-display text-3xl font-bold text-ink-600">媒体库</h1>
-        <p className="mt-1 text-sm text-ink-50">
+        <h1 className="font-display text-2xl font-bold text-ink-600 sm:text-3xl">媒体库</h1>
+        <p className="mt-1 text-xs text-ink-50 sm:text-sm">
           共 {previewCount} 个目录 · {total.toLocaleString()} 个条目。每个目录直接展示最新入库内容。
         </p>
       </div>
-      <div className="flex flex-wrap items-center gap-3">
-        {repairMsg && <span className="text-xs text-ink-50">{repairMsg}</span>}
+      <div className="flex flex-wrap items-center gap-2 sm:gap-3">
+        {repairMsg && <span className="w-full text-xs text-ink-50">{repairMsg}</span>}
         <EpisodeArtworkToggle
           checked={repairEpisodeArtwork}
           onChange={onRepairEpisodeArtworkChange}
           title="关闭后仍会获取主海报和每集文字元数据，只跳过每集图片"
-          className="h-10"
+          className="h-9 sm:h-10 text-xs sm:text-sm"
         />
         <button
           type="button"
           onClick={onRepairRescrape}
           disabled={repairing}
-          className="btn-outline disabled:cursor-not-allowed disabled:opacity-60"
+          className="btn-outline !px-3 !py-1.5 text-xs sm:!px-4 sm:!py-2.5 sm:text-sm disabled:cursor-not-allowed disabled:opacity-60"
           title="从媒体路径回填缺失/错误的外部 ID，再批量重刮整库"
         >
           <RefreshCw size={14} className={repairing ? 'animate-spin' : ''} />
           {repairing ? '正在启动…' : '全库修复+重刮'}
         </button>
-        <Link to="/scraper/queue" className="btn-outline inline-flex items-center gap-1.5" title="查看正在进行的刮削任务与进度">
+        <Link
+          to="/scraper/queue"
+          className="btn-outline inline-flex items-center gap-1.5 !px-3 !py-1.5 text-xs sm:!px-4 sm:!py-2.5 sm:text-sm"
+          title="查看正在进行的刮削任务与进度"
+        >
           <Sparkles size={14} className="text-brand-500" />
           <span>刮削队列</span>
         </Link>
-        <button type="button" onClick={onManageLibraries} className="btn-outline">
+        <button
+          type="button"
+          onClick={onManageLibraries}
+          className="btn-outline !px-3 !py-1.5 text-xs sm:!px-4 sm:!py-2.5 sm:text-sm"
+        >
           管理媒体库
         </button>
       </div>
@@ -102,7 +110,7 @@ export function LibrariesContent({ previews }: { previews: LibraryPreview[] }) {
           <h2 className="font-display text-2xl font-bold text-ink-600">媒体库入口</h2>
           <p className="text-sm text-ink-50">按目录进入完整媒体库；下方每个目录也会直接展示最新内容。</p>
         </div>
-        <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 xl:grid-cols-3">
           {previews.map((preview, index) => (
             <motion.div
               key={preview.library.id}
@@ -142,9 +150,9 @@ function LibraryEntryCard({ preview }: { preview: LibraryPreview }) {
   return (
     <Link
       to={`/library/${library.id}`}
-      className="group flex overflow-hidden rounded-3xl border border-sand-200 bg-white p-3 shadow-card transition-all hover:-translate-y-0.5 hover:border-brand-200 hover:shadow-card-hover"
+      className="group flex overflow-hidden rounded-2xl sm:rounded-3xl border border-sand-200 bg-white p-2.5 sm:p-3 shadow-card transition-all hover:-translate-y-0.5 hover:border-brand-200 hover:shadow-card-hover"
     >
-      <div className={`grid h-24 w-36 shrink-0 gap-1 overflow-hidden rounded-2xl bg-[linear-gradient(135deg,#fff7ed,#f8fafc)] ${artwork.length > 1 ? 'grid-cols-2' : 'grid-cols-1'}`}>
+      <div className={`grid h-20 w-24 sm:h-24 sm:w-36 shrink-0 gap-1 overflow-hidden rounded-xl sm:rounded-2xl bg-[linear-gradient(135deg,#fff7ed,#f8fafc)] ${artwork.length > 1 ? 'grid-cols-2' : 'grid-cols-1'}`}>
         {artwork.length > 0 ? (
           artwork.map(({ src, version }, index) => (
             <img
@@ -159,25 +167,32 @@ function LibraryEntryCard({ preview }: { preview: LibraryPreview }) {
           ))
         ) : (
           <div className="col-span-2 flex h-full items-center justify-center text-brand-500">
-            {TYPE_ICONS[library.type] ?? <FolderOpen size={34} />}
+            {TYPE_ICONS[library.type] ?? <FolderOpen size={28} className="sm:h-8 sm:w-8" />}
           </div>
         )}
       </div>
-      <div className="flex min-w-0 flex-1 flex-col justify-between px-4 py-1">
+      <div className="flex min-w-0 flex-1 flex-col justify-between px-3 sm:px-4 py-0.5 sm:py-1">
         <div>
-          <div className="mb-1 inline-flex rounded-full bg-sand-100 px-2 py-0.5 text-[10px] font-bold text-sand-600">
-            {TYPE_LABELS[library.type] ?? library.type}
+          <div className="mb-1 flex items-center justify-between gap-1.5">
+            <span className="inline-flex rounded-full bg-sand-100 px-2 py-0.5 text-[10px] font-bold text-sand-600">
+              {TYPE_LABELS[library.type] ?? library.type}
+            </span>
+            <span className="text-[11px] font-semibold text-sand-500 sm:hidden">
+              {preview.total.toLocaleString()} 个条目
+            </span>
           </div>
-          <h2 className="truncate font-display text-xl font-black text-ink-600 group-hover:text-brand-600">
+          <h2 className="line-clamp-2 font-display text-sm font-bold leading-tight text-ink-600 group-hover:text-brand-600 sm:truncate sm:text-xl sm:font-black">
             {library.name}
           </h2>
-          <p className="mt-1 line-clamp-1 break-all text-xs text-ink-50" title={library.path}>
+          <p className="mt-0.5 line-clamp-1 break-all text-[11px] text-ink-50 sm:mt-1 sm:text-xs" title={library.path}>
             {displayPath}
           </p>
         </div>
-        <div className="flex items-center justify-between text-xs font-bold">
-          <span className="text-sand-600">{preview.total.toLocaleString()} 个条目</span>
-          <span className="text-brand-600">浏览全部</span>
+        <div className="mt-1 flex items-center justify-between text-xs font-bold sm:mt-0">
+          <span className="hidden text-sand-600 sm:inline">{preview.total.toLocaleString()} 个条目</span>
+          <span className="ml-auto inline-flex items-center gap-0.5 text-[11px] text-brand-600 sm:text-xs">
+            浏览全部 <ArrowRight size={12} />
+          </span>
         </div>
       </div>
     </Link>
@@ -190,19 +205,19 @@ function LibraryShelf({ preview }: { preview: LibraryPreview }) {
   const displayPath = libraryDisplayPath(library.path)
 
   return (
-    <section className="rounded-[1.7rem] border border-sand-200 bg-white/75 p-4 shadow-card">
-      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
+    <section className="rounded-2xl sm:rounded-[1.7rem] border border-sand-200 bg-white/75 p-3.5 sm:p-4 shadow-card">
+      <div className="mb-3 sm:mb-4 flex flex-wrap items-end justify-between gap-2 sm:gap-3">
         <div className="min-w-0">
-          <div className="mb-1 inline-flex items-center gap-2 rounded-full bg-brand-50 px-2.5 py-1 text-[11px] font-bold text-brand-700">
+          <div className="mb-1 inline-flex items-center gap-1.5 sm:gap-2 rounded-full bg-brand-50 px-2 sm:px-2.5 py-0.5 sm:py-1 text-[10px] sm:text-[11px] font-bold text-brand-700">
             {TYPE_ICONS[library.type] ?? <LibraryIcon size={14} />}
             {TYPE_LABELS[library.type] ?? library.type}
           </div>
-          <h2 className="truncate font-display text-2xl font-black text-ink-600">{library.name}</h2>
+          <h2 className="line-clamp-2 font-display text-xl sm:text-2xl font-black text-ink-600 sm:truncate">{library.name}</h2>
           <p className="mt-1 line-clamp-1 break-all text-xs text-ink-50">
             <span title={library.path}>{displayPath}</span> · {preview.total.toLocaleString()} 个条目 · 最新 {cards.length} 部
           </p>
         </div>
-        <Link to={`/library/${library.id}`} className="btn-outline shrink-0">
+        <Link to={`/library/${library.id}`} className="btn-outline !px-3 !py-1.5 text-xs sm:!px-4 sm:!py-2.5 sm:text-sm shrink-0">
           浏览全部
           <ArrowRight size={14} />
         </Link>