feat(ui): 新增 EntryRow / EntryTile，收掉应用里两套手写内容卡

- EntryRow：头像 + 标题（可带角标）+ 单行描述，整行可点；点击语义内置（无修饰键接管，按住 Ctrl/Cmd/Shift/Alt 保留浏览器默认） - EntryTile：上图下文白卡，由 Card padding=none hoverable + Cover 拼成 - 展示页 #cards 补两个示例与 props，COMPONENTS.md 补契约与 changelog 兼容性：纯新增；应用侧的旧类名（.app-card / .ces-card / .ces-body）随之删除
2026-11-01 16:08:39 +08:00
parent 50056a7154
commit 17a09f22b6
7 changed files with 247 additions and 1 deletions
@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react'
+import { Avatar } from './Avatar'
+import { Text } from './Typography'
+import styles from './EntryRow.module.css'
+
+/**
+ * 条目行：头像 + 标题（可带角标）+ 单行描述，整行可点。
+ *
+ * 点击语义跟站点里的其它卡片一致：不带修饰键时接管点击（走 SPA 路由），
+ * 按住 Ctrl/Cmd/Shift/Alt 时保留浏览器默认行为（新标签打开原始链接）。
+ */
+export type EntryRowProps = {
+  title: string
+  description?: string
+  /** 不带修饰键点击时跳转的地址 */
+  href?: string
+  /** 头像图片；不传时用 fallback 首字 */
+  avatar?: string
+  fallback?: string
+  /** 头像右下角的认证勾 */
+  verified?: boolean
+  /** 标题右侧的角标，例如 `<ItemBadge tone="hot">HOT</ItemBadge>` */
+  badge?: ReactNode
+  /** 接管点击；不传则保持普通链接行为 */
+  onOpen?: () => void
+  className?: string
+}
+
+export function EntryRow({
+  title,
+  description,
+  href = '#',
+  avatar,
+  fallback,
+  verified = false,
+  badge,
+  onOpen,
+  className,
+}: EntryRowProps) {
+  return (
+    <a
+      className={[styles.root, className].filter(Boolean).join(' ')}
+      href={href}
+      title={title}
+      onClick={(event) => {
+        if (onOpen === undefined) return
+        if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return
+        event.preventDefault()
+        onOpen()
+      }}
+    >
+      <Avatar size="lg" tone="primary" src={avatar} fallback={fallback} verified={verified} />
+
+      <span className={styles.info}>
+        <span className={styles.titleRow}>
+          <Text strong truncate className={styles.title}>
+            {title}
+          </Text>
+          {badge}
+        </span>
+        {description !== undefined && description !== '' && (
+          <Text size="xs" tone="muted" truncate>
+            {description}
+          </Text>
+        )}
+      </span>
+    </a>
+  )
+}