feat(web): 对齐 Alright 主题视觉规范（配色/字体/图标/背景/动效），并补充设计规范文档

stash-web/src/components/content/PosterCard.tsx

@@ -0,0 +1,36 @@
+import type { PosterItem } from '../../data/types'
+
+/**
+ * 竖版海报卡：2:3 封面 + 底部渐变遮罩上的标题。
+ * 传入 onOpen 时整张卡变成按钮，点击进入该电影的详情页。
+ */
+type PosterCardProps = {
+  item: PosterItem
+  onOpen?: (itemId: string) => void
+}
+
+export function PosterCard({ item, onOpen }: PosterCardProps) {
+  const content = (
+    <>
+      <img className="poster-cover" src={item.cover} alt={item.title} loading="lazy" />
+      <span className="poster-caption">
+        <span className="poster-title">{item.title}</span>
+      </span>
+    </>
+  )
+
+  if (onOpen === undefined) {
+    return <figure className="poster-card">{content}</figure>
+  }
+
+  return (
+    <button
+      type="button"
+      className="poster-card"
+      title={item.title}
+      onClick={() => onOpen(item.id)}
+    >
+      {content}
+    </button>
+  )
+}