优化

web/src/pages/MediaDetailMetadata.tsx

@@ -9,6 +9,10 @@ type MediaDetailMetadataProps = {
 export function MediaDetailMetadata({ media }: MediaDetailMetadataProps) {
   const heading = media.episode_title?.trim() || media.title
   const showTitleContext = Boolean(media.episode_title?.trim() && media.title && media.title !== heading)
+  const genres = parseCSV(media.genres)
+  const languages = parseCSV(media.languages)
+  const countries = parseCSV(media.countries)
+  const hasTaxonomy = genres.length > 0 || languages.length > 0 || countries.length > 0
 
   return (
     <>
@@ -21,26 +25,26 @@ export function MediaDetailMetadata({ media }: MediaDetailMetadataProps) {
             {media.title}
           </p>
         )}
-        <div className="flex flex-wrap items-center gap-2.5 text-xs text-gray-500 font-bold tracking-wide uppercase">
+        <div className="flex flex-wrap items-center gap-2">
           {media.year > 0 && (
-            <span className="inline-flex items-center gap-1 bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-xl text-gray-700">
+            <span className="inline-flex h-7 items-center rounded-lg border border-gray-200/60 bg-gray-100 px-2.5 text-2xs font-bold uppercase tracking-wide gap-1.5 text-gray-700">
               <Calendar size={13} className="text-brand-500" />
               <span>{media.year} 年</span>
             </span>
           )}
-          {media.width > 0 && (
-            <span className="inline-flex items-center gap-1 bg-brand-50 text-brand-700 border border-brand-100/50 px-2.5 py-1 rounded-xl">
+          {media.width > 0 && media.height > 0 && (
+            <span className="inline-flex h-7 items-center rounded-lg border border-brand-100/50 bg-brand-50 px-2.5 text-2xs font-bold uppercase tracking-wide text-brand-700">
               <span>{media.width} × {media.height}</span>
             </span>
           )}
-          <span className="bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-xl text-gray-700">
-            {fmtSize(media.size_bytes)}
-          </span>
-          <span className="bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-xl text-gray-700">
-            {fmtDuration(media.duration_sec)}
-          </span>
+          {media.size_bytes > 0 && (
+            <span className="inline-flex h-7 items-center rounded-lg border border-gray-200/60 bg-gray-100 px-2.5 text-2xs font-bold uppercase tracking-wide text-gray-700">{fmtSize(media.size_bytes)}</span>
+          )}
+          {media.duration_sec > 0 && (
+            <span className="inline-flex h-7 items-center rounded-lg border border-gray-200/60 bg-gray-100 px-2.5 text-2xs font-bold uppercase tracking-wide text-gray-700">{fmtDuration(media.duration_sec)}</span>
+          )}
           {media.container && (
-            <span className="bg-gray-100 border border-gray-200/50 px-2.5 py-1 rounded-xl text-gray-700 font-mono">
+            <span className="inline-flex h-7 items-center rounded-lg border border-gray-200/60 bg-gray-100 px-2.5 text-2xs font-bold uppercase tracking-wide text-gray-700 font-mono">
               {media.container}
             </span>
           )}
@@ -56,24 +60,44 @@ export function MediaDetailMetadata({ media }: MediaDetailMetadataProps) {
         </div>
       )}
 
-      <div className="space-y-4">
-        <MetadataTags label="类型流派" values={parseCSV(media.genres)} primary />
-        <MetadataTags label="语言" values={parseCSV(media.languages)} />
-        <MetadataTags label="国家/地区" values={parseCSV(media.countries)} />
-      </div>
+      {hasTaxonomy && (
+        <div className="space-y-3">
+          <MetadataRow label="类型流派" values={parseCSV(media.genres)} tone="brand" />
+          <MetadataRow label="语言" values={parseCSV(media.languages)} />
+          <MetadataRow label="国家/地区" values={parseCSV(media.countries)} />
+          </div>
+      )}
     </>
   )
 }
 
-function MetadataTags({ label, values, primary = false }: { label: string; values: string[]; primary?: boolean }) {
+/**
+ * One "label - values" row of the taxonomy block.
+ *
+ * All rows share the same label gutter, so every value column starts on the
+ * same vertical line. Pills keep one geometry and differ by tone only.
+ */
+function MetadataRow({
+  label,
+  values,
+  tone = 'neutral',
+}: {
+  label: string
+  values: string[]
+  tone?: 'neutral' | 'brand'
+}) {
   if (values.length === 0) return null
-  const tagClass = primary
-    ? 'rounded-full bg-brand-50 text-brand-700 border border-brand-100/30 px-3 py-1 text-2xs font-bold uppercase tracking-wider'
-    : 'rounded-xl bg-gray-100 text-gray-600 border border-gray-200/40 px-2.5 py-1 text-2xs font-semibold'
+  const tagClass = [
+    'inline-flex items-center rounded-lg border px-2.5 py-1 text-2xs font-bold uppercase tracking-wide',
+    tone === 'brand'
+      ? 'border-brand-100/50 bg-brand-50 text-brand-700'
+      : 'border-gray-200/60 bg-gray-100 text-gray-600',
+  ].join(' ')
+
   return (
-    <div className="flex flex-wrap items-center gap-3">
-      <span className="text-xs font-bold text-gray-500 w-16 uppercase tracking-wider">{label}</span>
-      <div className="flex flex-wrap gap-2">
+    <div className="grid grid-cols-[4.5rem_1fr] items-start gap-2 sm:grid-cols-[5.5rem_1fr]">
+      <span className="pt-1 text-xs font-semibold text-gray-500">{label}</span>
+      <div className="flex flex-wrap gap-1.5">
         {values.map((value) => (
           <span key={value} className={tagClass}>
             {value}