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,67 @@
+import { categoryCount, flattenAppItems, type Category } from '../../data/types'
+import { AppGrid } from './AppGrid'
+import { ArticleGrid } from './ArticleGrid'
+import { PosterGrid } from './PosterGrid'
+import { SectionCard } from './SectionCard'
+
+/**
+ * 首页：把每个分类渲染成一张分区卡片。
+ *
+ * 每个分区只展示前若干条（由分类的 previewLimit 决定），
+ * 右上角 ••• 进入该分类明细，点击卡片 / 海报则进入该条目的详情。
+ */
+type HomeViewProps = {
+  categories: Category[]
+  onOpenDetail: (categoryId: string) => void
+  onOpenItem: (categoryId: string, itemId: string) => void
+}
+
+export function HomeView({ categories, onOpenDetail, onOpenItem }: HomeViewProps) {
+  return (
+    <div className="home-view">
+      {categories.map((category) => (
+        <SectionCard
+          key={category.id}
+          title={category.title}
+          count={categoryCount(category)}
+          barColor={category.barColor}
+          onMore={() => onOpenDetail(category.id)}
+        >
+          {renderPreview(category, onOpenItem)}
+        </SectionCard>
+      ))}
+    </div>
+  )
+}
+
+/** 按分类类型输出对应的预览网格；应用类为空时给出提示文案 */
+function renderPreview(
+  category: Category,
+  onOpenItem: (categoryId: string, itemId: string) => void,
+) {
+  if (category.kind === 'apps') {
+    const items = flattenAppItems(category).slice(0, category.previewLimit ?? 4)
+
+    if (items.length === 0) {
+      return <p className="section-empty">{category.emptyText ?? '暂无内容'}</p>
+    }
+
+    return <AppGrid items={items} onOpen={(itemId) => onOpenItem(category.id, itemId)} />
+  }
+
+  if (category.kind === 'posters') {
+    return (
+      <PosterGrid
+        items={category.items.slice(0, category.previewLimit ?? 6)}
+        onOpen={(itemId) => onOpenItem(category.id, itemId)}
+      />
+    )
+  }
+
+  return (
+    <ArticleGrid
+      items={category.items.slice(0, category.previewLimit ?? 4)}
+      onOpen={(itemId) => onOpenItem(category.id, itemId)}
+    />
+  )
+}