-

2026-05-20 01:30:49 +08:00
parent 7dded89537
commit 610805a374
42 changed files with 3451 additions and 0 deletions
@@ -0,0 +1,148 @@
+'use client';
+import {
+  Layout,
+  Section,
+  Article,
+  Headline,
+  Subhead,
+  BodyText,
+  Masthead,
+} from '@newspaperui/components';
+import { Demo } from '@/components/Demo';
+import { PropsTable } from '@/components/PropsTable';
+
+export default function MastheadPage() {
+  return (
+    <Layout columns={24} maxWidth="900px" padding="2rem">
+      <Section columns={24}>
+        <Article span={24}>
+          <Headline weight="Medium" as="h1">
+            Masthead 报头
+          </Headline>
+          <Subhead weight="Medium">
+            报头是报纸的门面。三个 variant 覆盖经典双线居中、哥特体、现代左对齐三种风格。
+          </Subhead>
+
+          <Headline weight="Low" as="h2">
+            API
+          </Headline>
+          <PropsTable
+            data={[
+              {
+                name: 'title',
+                type: 'string',
+                required: true,
+                description: '报名文字。',
+              },
+              {
+                name: 'variant',
+                type: "'classic' | 'blackletter' | 'modern'",
+                default: "'classic'",
+                description: '视觉风格。',
+              },
+              {
+                name: 'kicker',
+                type: 'string',
+                description: '报名上方的小标（如 "All the News That\'s Fit to Print"）。',
+              },
+              {
+                name: 'edition',
+                type: 'string',
+                description: '版次（如 "Vol. CLXXII No. 59,678"）。',
+              },
+              {
+                name: 'date',
+                type: 'string',
+                description: '日期（如 "Monday, May 19, 2026"）。',
+              },
+              {
+                name: 'price',
+                type: 'string',
+                description: '售价（如 "$3.00"）。',
+              },
+            ]}
+          />
+
+          <Headline weight="Low" as="h2">
+            Classic
+          </Headline>
+          <Demo
+            title="classic variant"
+            description="双线居中，Cormorant Garamond 衬线。"
+            code={`<Masthead
+  variant="classic"
+  title="The Daily Chronicle"
+  kicker="All the News That's Fit to Print"
+  edition="Vol. CLXXII No. 59,678"
+  date="Monday, May 19, 2026"
+  price="$3.00"
+/>`}
+          >
+            <Masthead
+              variant="classic"
+              title="The Daily Chronicle"
+              kicker="All the News That's Fit to Print"
+              edition="Vol. CLXXII No. 59,678"
+              date="Monday, May 19, 2026"
+              price="$3.00"
+            />
+          </Demo>
+
+          <Headline weight="Low" as="h2">
+            Blackletter
+          </Headline>
+          <Demo
+            title="blackletter variant"
+            description="UnifrakturMaguntia 哥特体，The Times 风格。"
+            code={`<Masthead
+  variant="blackletter"
+  title="The Evening Standard"
+  edition="Late Final Edition"
+  date="Monday, May 19, 2026"
+  price="£2.50"
+/>`}
+          >
+            <Masthead
+              variant="blackletter"
+              title="The Evening Standard"
+              edition="Late Final Edition"
+              date="Monday, May 19, 2026"
+              price="£2.50"
+            />
+          </Demo>
+
+          <Headline weight="Low" as="h2">
+            Modern
+          </Headline>
+          <Demo
+            title="modern variant"
+            description="左对齐 + accent 强调色，适合数字优先的出版物。"
+            code={`<Masthead
+  variant="modern"
+  title="The Observer"
+  kicker="Sunday Edition"
+  date="May 19, 2026"
+/>`}
+          >
+            <Masthead
+              variant="modern"
+              title="The Observer"
+              kicker="Sunday Edition"
+              date="May 19, 2026"
+            />
+          </Demo>
+
+          <Headline weight="Low" as="h2">
+            使用建议
+          </Headline>
+          <BodyText weight="Low">
+            <p>
+              Masthead 默认 <code>gridColumn: 1 / -1</code>，在 Section 内自动全宽。
+              通常放在 Layout 的第一个 Section 中，后接 Rule 分隔线。
+            </p>
+          </BodyText>
+        </Article>
+      </Section>
+    </Layout>
+  );
+}