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,49 @@
+import type { AppItem } from '../../data/types'
+
+/**
+ * 应用卡片：逐项复刻 Alright 主题「推荐作者」条目的结构。
+ *
+ * 对应主题的：
+ *   .flex-avatar  > img.avatar-48 + span.avatar-badge.badge_5
+ *   .item-content > h3.font-title.text-md（名字 + span.item-badge.hot）
+ *                 + div.text-xs.text-muted.h-1x（单行描述）
+ *
+ * 热门条目才会同时出现头像角标和 HOT 徽标，普通条目两者都没有。
+ */
+type AppCardProps = {
+  item: AppItem
+  onOpen?: (itemId: string) => void
+}
+
+export function AppCard({ item, onOpen }: AppCardProps) {
+  return (
+    <a
+      className="app-card"
+      href={item.href}
+      title={item.name}
+      onClick={(event) => {
+        if (onOpen === undefined) return
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+        event.preventDefault()
+        onOpen(item.id)
+      }}
+    >
+      <span className="app-card-avatar" aria-hidden="true">
+        {item.cover !== undefined ? (
+          <img src={item.cover} alt="" loading="lazy" />
+        ) : (
+          <span className="app-card-letter">{item.icon}</span>
+        )}
+        {item.hot === true && <span className="app-card-verify" />}
+      </span>
+
+      <span className="app-card-info">
+        <span className="app-card-title">
+          <span className="app-card-name">{item.name}</span>
+          {item.hot === true && <span className="app-card-badge" />}
+        </span>
+        <span className="app-card-desc">{item.desc}</span>
+      </span>
+    </a>
+  )
+}