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

2026-10-22 20:27:10 +08:00
parent e522a98f6f
commit 386c0f77c7
50 changed files with 6344 additions and 1094 deletions
@@ -0,0 +1,37 @@
+import type { ArticleItem } from '../../data/types'
+
+/**
+ * 明细页图文卡：上图下文的白卡。
+ * 传入 onOpen 时整张卡变成按钮，点击进入文章详情。
+ */
+type CesCardProps = {
+  item: ArticleItem
+  onOpen?: (itemId: string) => void
+}
+
+export function CesCard({ item, onOpen }: CesCardProps) {
+  const content = (
+    <>
+      <img className="ces-cover" src={item.cover} alt={item.title} loading="lazy" />
+      <span className="ces-body">
+        <span className="ces-title">{item.title}</span>
+        <span className="ces-desc">{item.desc}</span>
+      </span>
+    </>
+  )
+
+  if (onOpen === undefined) {
+    return <article className="ces-card">{content}</article>
+  }
+
+  return (
+    <button
+      type="button"
+      className="ces-card"
+      title={item.title}
+      onClick={() => onOpen(item.id)}
+    >
+      {content}
+    </button>
+  )
+}