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-20 01:30:49 +08:00
parent 7dded89537
commit 610805a374
42 changed files with 3451 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/docs/app/(docs)/examples/responsive/page.tsx
+258
View File
@@ -0,0 +1,258 @@
'use client';
import {
Layout,
Section,
Article,
Headline,
Subhead,
BodyText,
Rule,
} from '@newspaperui/components';
import { CodeBlock } from '@/components/CodeBlock';
export default function ResponsivePage() {
return (
<Layout columns={24} maxWidth="900px" padding="2rem">
<Section columns={24}>
<Article span={24}>
<Headline weight="Medium" as="h1">
响应式设计
</Headline>
<Subhead weight="Medium">
NewspaperUI 的响应式策略完全基于 CSS media query + container query，
不依赖 JavaScript 运行时计算。
</Subhead>
<Headline weight="Low" as="h2">
断点说明
</Headline>
<BodyText>
<p>
三个核心断点覆盖移动、平板、桌面：
</p>
</BodyText>
<div style={{ overflowX: 'auto', margin: '1rem 0 2rem' }}>
<table
style={{
width: '100%',
borderCollapse: 'collapse',
fontFamily: 'var(--font-family-meta)',
fontSize: '13px',
}}
>
<thead>
<tr style={{ borderBottom: '2px solid var(--nui-rule-decorative)' }}>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>断点</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>宽度</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>栏数建议</th>
<th style={{ textAlign: 'left', padding: '0.5rem' }}>说明</th>
</tr>
</thead>
<tbody>
<tr style={{ borderBottom: '1px solid var(--nui-rule-hairline)' }}>
<td style={{ padding: '0.5rem' }}>Mobile</td>
<td style={{ padding: '0.5rem' }}>&lt; 768px</td>
<td style={{ padding: '0.5rem' }}>1 栏（全宽）</td>
<td style={{ padding: '0.5rem' }}>单栏堆叠，BodyText columns=1</td>
</tr>
<tr style={{ borderBottom: '1px solid var(--nui-rule-hairline)', background: 'var(--nui-bg-surface)' }}>
<td style={{ padding: '0.5rem' }}>Tablet</td>
<td style={{ padding: '0.5rem' }}>768px - 1024px</td>
<td style={{ padding: '0.5rem' }}>12 列</td>
<td style={{ padding: '0.5rem' }}>两栏布局，BodyText columns=2</td>
</tr>
<tr style={{ borderBottom: '1px solid var(--nui-rule-hairline)' }}>
<td style={{ padding: '0.5rem' }}>Desktop</td>
<td style={{ padding: '0.5rem' }}>&gt; 1024px</td>
<td style={{ padding: '0.5rem' }}>24 列</td>
<td style={{ padding: '0.5rem' }}>完整多栏布局</td>
</tr>
</tbody>
</table>
</div>
<Headline weight="Low" as="h2">
实施手法
</Headline>
<BodyText>
<p>
NewspaperUI 不再使用 JavaScript responsive 函数。所有响应式行为通过 CSS
media query 和 container query 实现，零运行时开销。
</p>
<p>
Section 的 <code>gridTemplateColumns</code> 是 inline style，因此需要在
消费侧用 CSS 覆盖。推荐做法：
</p>
</BodyText>
<CodeBlock
title="自定义响应式 CSS"
language="css"
code={`/* 在你的 globals.css 或组件 CSS 中 */
@media (max-width: 768px) {
.nui-section {
grid-template-columns: 1fr !important;
}
.nui-article {
grid-column: span 1 !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.nui-section[data-columns="24"] {
grid-template-columns: repeat(12, 1fr) !important;
}
}`}
/>
<BodyText>
<p>
或者使用 container query 让 Section 根据自身宽度自适应：
</p>
</BodyText>
<CodeBlock
title="Container Query 方案"
language="css"
code={`/* 给 Section 添加 container-type */
.nui-section {
container-type: inline-size;
}
@container (max-width: 600px) {
.nui-article {
grid-column: 1 / -1 !important;
}
}`}
/>
<Rule variant="hairline" />
<Headline weight="Low" as="h2">
视口效果预览
</Headline>
<BodyText weight="Low">
<p>
下面三个区块模拟桌面、平板、移动端的视觉效果。实际项目中建议使用浏览器
DevTools 的 responsive mode 进行测试。
</p>
</BodyText>
<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', margin: '1.5rem 0' }}>
<div>
<div
className="nui-small-caps"
style={{
fontFamily: 'var(--font-family-meta)',
fontSize: '11px',
color: 'var(--nui-text-muted)',
letterSpacing: '0.08em',
marginBottom: '0.5rem',
}}
>
Desktop (1024px+) &mdash; 24 列完整布局
</div>
<div
style={{
border: '1px solid var(--nui-rule-hairline)',
padding: '1rem',
background: 'var(--nui-bg-surface)',
}}
>
<Layout columns={24} padding="0" maxWidth="100%">
<Section columns={24}>
<Article span={6}>
<Headline weight="Low" as="h4">Briefing</Headline>
<BodyText weight="Low"><p>Short news items.</p></BodyText>
</Article>
<Article span={12}>
<Headline weight="Medium" as="h4">Lead Story</Headline>
<BodyText><p>Main article content with full detail.</p></BodyText>
</Article>
<Article span={6}>
<Headline weight="Low" as="h4">Markets</Headline>
<BodyText weight="Low"><p>FTSE, gilts, sterling.</p></BodyText>
</Article>
</Section>
</Layout>
</div>
</div>
<div>
<div
className="nui-small-caps"
style={{
fontFamily: 'var(--font-family-meta)',
fontSize: '11px',
color: 'var(--nui-text-muted)',
letterSpacing: '0.08em',
marginBottom: '0.5rem',
}}
>
Tablet (768-1024px) &mdash; 12 列简化
</div>
<div
style={{
border: '1px solid var(--nui-rule-hairline)',
padding: '1rem',
background: 'var(--nui-bg-surface)',
maxWidth: '600px',
}}
>
<Layout columns={12} padding="0" maxWidth="100%">
<Section columns={12}>
<Article span={6}>
<Headline weight="Low" as="h4">Lead Story</Headline>
<BodyText weight="Low"><p>Main article.</p></BodyText>
</Article>
<Article span={6}>
<Headline weight="Low" as="h4">Secondary</Headline>
<BodyText weight="Low"><p>Supporting content.</p></BodyText>
</Article>
</Section>
</Layout>
</div>
</div>
<div>
<div
className="nui-small-caps"
style={{
fontFamily: 'var(--font-family-meta)',
fontSize: '11px',
color: 'var(--nui-text-muted)',
letterSpacing: '0.08em',
marginBottom: '0.5rem',
}}
>
Mobile (&lt;768px) &mdash; 单栏堆叠
</div>
<div
style={{
border: '1px solid var(--nui-rule-hairline)',
padding: '1rem',
background: 'var(--nui-bg-surface)',
maxWidth: '375px',
}}
>
<Layout columns={1} padding="0" maxWidth="100%">
<Section columns={1}>
<Article span={1}>
<Headline weight="Low" as="h4">Lead Story</Headline>
<BodyText weight="Low"><p>Full-width single column.</p></BodyText>
</Article>
<Article span={1}>
<Headline weight="Low" as="h4">Secondary</Headline>
<BodyText weight="Low"><p>Stacked below.</p></BodyText>
</Article>
</Section>
</Layout>
</div>
</div>
</div>
</Article>
</Section>
</Layout>
);
}
packages/docs/app/(docs)/examples/spanning/page.tsx
+236
View File
@@ -0,0 +1,236 @@
'use client';
import {
Layout,
Section,
Article,
Headline,
Subhead,
BodyText,
Rule,
} from '@newspaperui/components';
import { Demo } from '@/components/Demo';
export default function SpanningPage() {
return (
<Layout columns={24} maxWidth="900px" padding="2rem">
<Section columns={24}>
<Article span={24}>
<Headline weight="Medium" as="h1">
跨栏布局示例
</Headline>
<Subhead weight="Medium">
五种常见栏宽组合，演示 24 列栅格的灵活性。
</Subhead>
</Article>
</Section>
<Rule variant="hairline" />
<Section columns={24}>
<Article span={24}>
<Headline weight="Low" as="h2">
8 + 16
</Headline>
</Article>
</Section>
<Demo title="8 + 16" description="短讯 + 主稿。">
<Layout columns={24} padding="0">
<Section columns={24}>
<Article span={8}>
<Headline weight="Low" as="h3">
Briefing
</Headline>
<BodyText weight="Low">
<p>
Markets responded cautiously through the morning session. The pound
traded sideways against the dollar.
</p>
</BodyText>
</Article>
<Article span={16}>
<Headline weight="Medium" as="h3">
Infrastructure Review Tabled
</Headline>
<BodyText>
<p>
Whitehall officials confirmed late Tuesday that the long-anticipated
review of national infrastructure funding will be tabled before the
recess. The 248-page document recommends a recalibration of regional
priorities.
</p>
</BodyText>
</Article>
</Section>
</Layout>
</Demo>
<Section columns={24}>
<Article span={24}>
<Headline weight="Low" as="h2">
6 + 12 + 6
</Headline>
</Article>
</Section>
<Demo title="6 + 12 + 6" description="三栏对称布局，中间主体 + 两侧辅助。">
<Layout columns={24} padding="0">
<Section columns={24}>
<Article span={6}>
<Headline weight="Low" as="h3">
Weather
</Headline>
<BodyText weight="Low">
<p>Partly cloudy, 18C. Wind NW 12 mph. Sunset 20:47.</p>
</BodyText>
</Article>
<Article span={12}>
<Headline weight="Medium" as="h3">
Chancellor Outlines Spending Envelope
</Headline>
<BodyText>
<p>
The chancellor confirmed a three-year spending envelope that prioritizes
rail electrification and regional connectivity. The announcement was
greeted with cautious optimism across the House.
</p>
</BodyText>
</Article>
<Article span={6}>
<Headline weight="Low" as="h3">
Markets
</Headline>
<BodyText weight="Low">
<p>FTSE 100: 7,842 (-0.2%). Gilts +3bp. Sterling flat.</p>
</BodyText>
</Article>
</Section>
</Layout>
</Demo>
<Section columns={24}>
<Article span={24}>
<Headline weight="Low" as="h2">
12 + 12
</Headline>
</Article>
</Section>
<Demo title="12 + 12" description="对称双栏，适合对比报道或并列文章。">
<Layout columns={24} padding="0">
<Section columns={24}>
<Article span={12}>
<Headline weight="Low" as="h3">
View from Westminster
</Headline>
<BodyText>
<p>
Critics inside the cabinet caution that the timing risks overshadowing
the chancellor&rsquo;s autumn statement. The opposition has called for a
full debate before any commitments are made.
</p>
</BodyText>
</Article>
<Article span={12}>
<Headline weight="Low" as="h3">
View from the Regions
</Headline>
<BodyText>
<p>
In Manchester, regional officials greeted the announcement with measured
optimism. The mayor&rsquo;s office is expected to issue a formal response
by week&rsquo;s end.
</p>
</BodyText>
</Article>
</Section>
</Layout>
</Demo>
<Section columns={24}>
<Article span={24}>
<Headline weight="Low" as="h2">
4 + 16 + 4
</Headline>
</Article>
</Section>
<Demo title="4 + 16 + 4" description="窄侧栏 + 宽主体，适合带注释的长文。">
<Layout columns={24} padding="0">
<Section columns={24}>
<Article span={4}>
<BodyText weight="Low">
<p style={{ fontStyle: 'italic', fontSize: '12px' }}>
Editor&rsquo;s note: This report was filed before the evening session.
</p>
</BodyText>
</Article>
<Article span={16}>
<Headline weight="Medium" as="h3">
A Standing Technical Commission
</Headline>
<BodyText>
<p>
Beyond the immediate fiscal arithmetic, the review&rsquo;s most
consequential proposal may be its quietest: a standing technical
commission, modeled on Australia&rsquo;s Infrastructure Australia, to
depoliticize project sequencing.
</p>
</BodyText>
</Article>
<Article span={4}>
<BodyText weight="Low">
<p style={{ fontStyle: 'italic', fontSize: '12px' }}>
Related: &ldquo;How Australia reformed infrastructure planning&rdquo;
&mdash; p. 12
</p>
</BodyText>
</Article>
</Section>
</Layout>
</Demo>
<Section columns={24}>
<Article span={24}>
<Headline weight="Low" as="h2">
24 全宽
</Headline>
</Article>
</Section>
<Demo title="24 全宽" description="单篇全宽文章，适合社论或特稿。">
<Layout columns={24} padding="0">
<Section columns={24}>
<Article span={24}>
<Headline weight="High" as="h3">
The Quiet Revolution in Treasury Forecasting
</Headline>
<BodyText columns={4} dropCap>
<p>
Whitehall officials confirmed late Tuesday that the long-anticipated
review of national infrastructure funding will be tabled before the
recess. The 248-page document, drafted across three departments,
recommends a recalibration of regional priorities and a measured shift
toward rail electrification.
</p>
<p>
Markets responded cautiously through the morning session. The pound
traded sideways against the dollar, gilts firmed by three basis points,
and the FTSE 100 closed marginally lower as defensive sectors absorbed
the day&rsquo;s modest outflows.
</p>
<p>
In Manchester, regional officials greeted the announcement with measured
optimism. The mayor&rsquo;s office is expected to issue a formal response
by week&rsquo;s end, focusing on commitments to the trans-Pennine
corridor and the long-deferred upgrade of suburban tram capacity.
</p>
<p>
Beyond the immediate fiscal arithmetic, the review&rsquo;s most
consequential proposal may be its quietest: a standing technical
commission to depoliticize project sequencing. Whether that body acquires
teeth will be determined by the legislation expected in the spring.
</p>
</BodyText>
</Article>
</Section>
</Layout>
</Demo>
</Layout>
);
}