添加所有组件文件

2026-08-25 19:14:01 +08:00
parent 98df6841e2
commit 3246b5cce3
4 changed files with 241 additions and 0 deletions
@@ -0,0 +1,62 @@
+import React from 'react';
+
+export default function MovieCard({ imdbId }) {
+  const CARD_WIDTH = 190;
+  const CARD_HEIGHT = 330;
+
+  // 直接生成本地图片路径
+  const posterUrl = `/img/posters/${imdbId}.jpg`;
+
+  // 简单判断图片是否存在（通过 onError 回调处理）
+  const [hasError, setHasError] = React.useState(false);
+
+  if (hasError) {
+    return (
+      <div
+        style={{
+          width: CARD_WIDTH,
+          height: CARD_HEIGHT,
+          background: '#f8f8f8',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: '#bbb',
+          fontSize: '12px',
+          flexShrink: 0,
+        }}
+      >
+        无海报
+      </div>
+    );
+  }
+
+  return (
+    <a
+      href={`https://www.imdb.com/title/${imdbId}/`}
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: CARD_WIDTH,
+        height: CARD_HEIGHT,
+        textDecoration: 'none',
+        flexShrink: 0,
+        overflow: 'hidden',
+      }}
+    >
+      <img
+        src={posterUrl}
+        alt="电影海报"
+        style={{
+          width: '100%',
+          height: '100%',
+          objectFit: 'scale-down',
+          display: 'block',
+        }}
+        onError={() => setHasError(true)}
+      />
+    </a>
+  );
+}