Pine/newsui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

-

Browse Source
This commit is contained in:
sunzhongyi
2026-05-19 21:09:56 +08:00
commit f3e6b95be9
78 changed files with 10099 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/app/text/page.tsx
+334
View File
@@ -0,0 +1,334 @@
'use client';
import { Demo } from '@/components/Demo';
import { PropsTable } from '@/components/PropsTable';
import { Headline, Subhead, BodyText, Quote, Byline, Caption } from '@newspaperui/components';
export default function TextPage() {
return (
<div className="prose prose-lg max-w-none">
<h1>文本组件</h1>
<p className="text-xl text-gray-600">
NewspaperUI 提供了完整的文本组件体系，支持视觉权重系统，自动映射字体大小和样式。
</p>
<h2>视觉权重系统</h2>
<p>
视觉权重（Visual Weight）是 NewspaperUI 的核心特性之一。
通过 High、Medium、Low 三级权重，组件会自动应用对应的字体大小、粗细、行高和颜色。
</p>
<h2>Headline 组件</h2>
<p>
<code>Headline</code> 是标题组件，支持三级视觉权重。
</p>
<PropsTable
data={[
{
name: 'weight',
type: '"High" | "Medium" | "Low"',
default: '"Medium"',
description: '视觉权重级别',
},
{
name: 'as',
type: '"h1" | "h2" | "h3" | "h4" | "h5" | "h6"',
default: '"h2"',
description: 'HTML 标签类型',
},
{
name: 'className',
type: 'string',
description: '自定义 CSS 类名',
},
{
name: 'children',
type: 'React.ReactNode',
required: true,
description: '标题内容',
},
]}
/>
<Demo
title="标题视觉权重"
description="展示不同权重的标题效果"
code={`<Headline weight="High">High 权重标题</Headline>
<Headline weight="Medium">Medium 权重标题</Headline>
<Headline weight="Low">Low 权重标题</Headline>`}
>
<div className="space-y-4">
<Headline weight="High">High 权重标题 (36-48px, 700)</Headline>
<Headline weight="Medium">Medium 权重标题 (28-34px, 600)</Headline>
<Headline weight="Low">Low 权重标题 (22-26px, 500)</Headline>
</div>
</Demo>
<h2>Subhead 组件</h2>
<p>
<code>Subhead</code> 是副标题组件，用于补充说明主标题。
</p>
<PropsTable
data={[
{
name: 'weight',
type: '"High" | "Medium"',
default: '"Medium"',
description: '视觉权重级别',
},
{
name: 'className',
type: 'string',
description: '自定义 CSS 类名',
},
{
name: 'children',
type: 'React.ReactNode',
required: true,
description: '副标题内容',
},
]}
/>
<Demo
title="副标题示例"
description="标题和副标题的组合使用"
code={`<Headline weight="High">主标题</Headline>
<Subhead weight="High">副标题说明文字</Subhead>
<BodyText>正文内容...</BodyText>`}
>
<div className="space-y-2">
<Headline weight="High">重大新闻事件</Headline>
<Subhead weight="High">详细的副标题说明，提供更多上下文信息</Subhead>
<BodyText>正文内容从这里开始，详细描述新闻事件的来龙去脉...</BodyText>
</div>
</Demo>
<h2>BodyText 组件</h2>
<p>
<code>BodyText</code> 是正文文本组件，用于文章主体内容。
</p>
<PropsTable
data={[
{
name: 'weight',
type: '"High" | "Medium" | "Low"',
default: '"Medium"',
description: '视觉权重级别',
},
{
name: 'className',
type: 'string',
description: '自定义 CSS 类名',
},
{
name: 'children',
type: 'React.ReactNode',
required: true,
description: '正文内容',
},
]}
/>
<Demo
title="正文文本权重"
description="不同权重的正文文本"
code={`<BodyText weight="High">High 权重正文 (16px)</BodyText>
<BodyText weight="Medium">Medium 权重正文 (14-15px)</BodyText>
<BodyText weight="Low">Low 权重正文 (12-14px)</BodyText>`}
>
<div className="space-y-3">
<BodyText weight="High">
High 权重正文文本，字号 16px，适合重要段落或引言。
</BodyText>
<BodyText weight="Medium">
Medium 权重正文文本，字号 14-15px，适合常规正文内容。
</BodyText>
<BodyText weight="Low">
Low 权重正文文本，字号 12-14px，适合次要说明或注释。
</BodyText>
</div>
</Demo>
<h2>Quote 组件</h2>
<p>
<code>Quote</code> 是引用组件，用于突出显示引用内容。
</p>
<PropsTable
data={[
{
name: 'weight',
type: '"High" | "Medium"',
default: '"Medium"',
description: '视觉权重级别',
},
{
name: 'className',
type: 'string',
description: '自定义 CSS 类名',
},
{
name: 'children',
type: 'React.ReactNode',
required: true,
description: '引用内容',
},
]}
/>
<Demo
title="引用文本"
description="在文章中插入引用"
code={`<Quote weight="High">
这是一段重要的引用文字，来自某位专家的观点。
</Quote>`}
>
<Quote weight="High">
这是一段重要的引用文字，来自某位专家的观点。引用组件会自动添加引号样式。
</Quote>
</Demo>
<h2>Byline 和 Caption 组件</h2>
<p>
<code>Byline</code> 用于作者署名，<code>Caption</code> 用于图片说明。
</p>
<PropsTable
data={[
{
name: 'className',
type: 'string',
description: '自定义 CSS 类名',
},
{
name: 'children',
type: 'React.ReactNode',
required: true,
description: '文本内容',
},
]}
/>
<Demo
title="署名和图注"
description="使用 Byline 和 Caption"
code={`<Headline weight="High">文章标题</Headline>
<Byline>作者：张三 | 2024年1月1日</Byline>
<BodyText>文章内容...</BodyText>
<Caption>图1：示例图片的说明文字</Caption>`}
>
<div className="space-y-2">
<Headline weight="High">重要新闻标题</Headline>
<Byline>记者：张三 | 2024年1月1日 | 北京报道</Byline>
<BodyText>文章正文内容从这里开始...</BodyText>
<div className="bg-gray-200 h-32 flex items-center justify-center">
<span className="text-gray-500">图片占位</span>
</div>
<Caption>图1：新闻现场照片，展示事件发生时的情况</Caption>
</div>
</Demo>
<h2>视觉权重映射表</h2>
<p>
以下是完整的视觉权重映射规则（基于 24 列栅格）：
</p>
<div className="my-6 overflow-x-auto">
<table className="w-full border-collapse text-sm">
<thead>
<tr className="border-b-2 border-gray-300">
<th className="text-left py-2 px-3">组件</th>
<th className="text-left py-2 px-3">权重</th>
<th className="text-left py-2 px-3">字号</th>
<th className="text-left py-2 px-3">字重</th>
<th className="text-left py-2 px-3">行高</th>
<th className="text-left py-2 px-3">颜色</th>
</tr>
</thead>
<tbody className="text-sm">
<tr className="border-b border-gray-200">
<td className="py-2 px-3">Headline</td>
<td className="py-2 px-3">High</td>
<td className="py-2 px-3">36-48px</td>
<td className="py-2 px-3">700</td>
<td className="py-2 px-3">1.1</td>
<td className="py-2 px-3">#111</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">Headline</td>
<td className="py-2 px-3">Medium</td>
<td className="py-2 px-3">28-34px</td>
<td className="py-2 px-3">600</td>
<td className="py-2 px-3">1.2</td>
<td className="py-2 px-3">#111</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">Headline</td>
<td className="py-2 px-3">Low</td>
<td className="py-2 px-3">22-26px</td>
<td className="py-2 px-3">500</td>
<td className="py-2 px-3">1.3</td>
<td className="py-2 px-3">#222</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">Subhead</td>
<td className="py-2 px-3">High</td>
<td className="py-2 px-3">20-24px</td>
<td className="py-2 px-3">600</td>
<td className="py-2 px-3">1.25</td>
<td className="py-2 px-3">#222</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">Subhead</td>
<td className="py-2 px-3">Medium</td>
<td className="py-2 px-3">16-18px</td>
<td className="py-2 px-3">500</td>
<td className="py-2 px-3">1.3</td>
<td className="py-2 px-3">#333</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">BodyText</td>
<td className="py-2 px-3">High</td>
<td className="py-2 px-3">16px</td>
<td className="py-2 px-3">400</td>
<td className="py-2 px-3">1.5</td>
<td className="py-2 px-3">#333</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">BodyText</td>
<td className="py-2 px-3">Medium</td>
<td className="py-2 px-3">14-15px</td>
<td className="py-2 px-3">400</td>
<td className="py-2 px-3">1.5</td>
<td className="py-2 px-3">#444</td>
</tr>
<tr className="border-b border-gray-200">
<td className="py-2 px-3">BodyText</td>
<td className="py-2 px-3">Low</td>
<td className="py-2 px-3">12-14px</td>
<td className="py-2 px-3">400</td>
<td className="py-2 px-3">1.4</td>
<td className="py-2 px-3">#555</td>
</tr>
</tbody>
</table>
</div>
<h2>使用建议</h2>
<ul>
<li>主标题使用 Headline High 权重</li>
<li>次要标题使用 Headline Medium 或 Low 权重</li>
<li>正文使用 BodyText Medium 权重</li>
<li>重要段落或引言使用 BodyText High 权重</li>
<li>注释或说明使用 BodyText Low 权重</li>
<li>引用使用 Quote 组件突出显示</li>
<li>作者信息使用 Byline 组件</li>
<li>图片说明使用 Caption 组件</li>
</ul>
</div>
);
}