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,47 @@
+import type { ReactNode } from 'react'
+import { CountBadge } from '../common/CountBadge'
+import { MoreIcon } from '../common/Icon'
+
+/**
+ * 首页分区卡片：白底圆角容器，组成「色条 + 标题 + 角标 + 更多按钮 + 内容」。
+ * 内容由调用方传入，因此同一容器可以承载应用网格、海报网格或图文网格。
+ */
+type SectionCardProps = {
+  title: string
+  count: number
+  /** 标题左侧色条颜色，不同分类用不同颜色区分 */
+  barColor?: string
+  /** 点击右上角 ••• 进入该分类的明细视图 */
+  onMore?: () => void
+  children: ReactNode
+}
+
+export function SectionCard({ title, count, barColor, onMore, children }: SectionCardProps) {
+  return (
+    <section className="section-card">
+      <header className="section-header">
+        <div className="section-title-wrapper">
+          <span className="section-bar" style={{ backgroundColor: barColor }} aria-hidden="true" />
+          <span className="section-title-box">
+            <h2 className="section-title">{title}</h2>
+            <CountBadge count={count} />
+          </span>
+        </div>
+
+        {onMore !== undefined && (
+          <button
+            type="button"
+            className="section-more"
+            title={`查看${title}全部`}
+            aria-label={`查看${title}全部`}
+            onClick={onMore}
+          >
+            <MoreIcon />
+          </button>
+        )}
+      </header>
+
+      {children}
+    </section>
+  )
+}