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,79 @@
+import type { ArticleItem } from '../../data/types'
+import { ArrowLeftIcon } from '../common/Icon'
+
+/**
+ * 文章详情页（对应模板图二）：
+ * 大标题 + [编辑] + 元信息行 + 白色正文卡（段落 / 小标题 / 配图混排）。
+ *
+ * 正文是 block 数组，后端以后可以直接把富文本结构映射过来，
+ * 不用再改渲染层。
+ */
+type ArticleDetailViewProps = {
+  article: ArticleItem
+  categoryTitle: string
+  onBack: () => void
+}
+
+export function ArticleDetailView({ article, categoryTitle, onBack }: ArticleDetailViewProps) {
+  const meta = article.meta ?? ['2 年前', categoryTitle]
+
+  return (
+    <div className="detail-view article-view">
+      <div className="detail-nav card-box">
+        <button type="button" className="detail-back" onClick={onBack}>
+          <ArrowLeftIcon />
+          返回
+        </button>
+        <span className="detail-breadcrumb">{categoryTitle} / 文章</span>
+      </div>
+
+      <header className="article-head">
+        <h2 className="article-heading">
+          {article.title}
+          <button type="button" className="item-edit" disabled title="编辑功能待接入">
+            [编辑]
+          </button>
+        </h2>
+
+        <div className="article-meta">
+          {meta.map((text, index) => (
+            <span className="article-meta-item" key={text}>
+              {index > 0 && <i className="article-meta-dot" aria-hidden="true" />}
+              {text}
+            </span>
+          ))}
+        </div>
+      </header>
+
+      <article className="article-body card-box">
+        {(article.blocks ?? []).map((block, index) => {
+          if (block.type === 'heading') {
+            return (
+              <h3 className="article-body-heading" key={index}>
+                {block.text}
+              </h3>
+            )
+          }
+
+          if (block.type === 'image') {
+            return (
+              <img
+                className="article-body-image"
+                key={index}
+                src={block.src}
+                alt=""
+                loading="lazy"
+              />
+            )
+          }
+
+          return (
+            <p className="article-body-text" key={index}>
+              {block.text}
+            </p>
+          )
+        })}
+      </article>
+    </div>
+  )
+}