newsui/packages/docs/app/examples/spanning/page.tsx

'use client';

import { Demo } from '@/components/Demo';
import { Layout, Section, Article, Layer } from '@newspaperui/components';
import { Headline, Subhead, BodyText, Quote } from '@newspaperui/components';

export default function SpanningPage() {
  return (
    <div className="prose prose-lg max-w-none">
      <h1>跨栏布局示例</h1>
      <p className="text-xl text-gray-600">
        展示如何使用 NewspaperUI 实现复杂的跨栏报纸布局。
      </p>

      <h2>经典报纸头版布局</h2>
      <p>
        这是一个典型的报纸头版布局，包含主要新闻、次要新闻和浮动拉引。
      </p>

      <Demo
        title="报纸头版"
        description="主新闻占据 16 列，侧边栏占据 8 列，带浮动拉引"
        code={`<Layout columns={24}>
  <Section columns={24}>
    <div style={{ position: 'relative', minHeight: '600px' }}>
      {/* 主新闻 - 16 列 */}
      <Article span={16}>
        <Headline weight="High">重大新闻标题占据主要版面</Headline>
        <Subhead weight="High">
          副标题提供更多背景信息和上下文
        </Subhead>
        <BodyText weight="High">
          这是主要新闻的正文内容。在报纸布局中，最重要的新闻通常占据最大的版面，
          使用最大的字号和最粗的字重。这样的布局能够立即吸引读者的注意力。
        </BodyText>
        <BodyText>
          新闻的后续段落继续详细描述事件的发展。通过合理的跨栏布局，
          我们可以在有限的版面中呈现丰富的内容。
        </BodyText>
      </Article>

      {/* 侧边栏 - 8 列 */}
      <Article span={8}>
        <Headline weight="Medium">次要新闻</Headline>
        <BodyText weight="Medium">
          侧边栏的新闻使用较小的字号，适合放置次要但仍然重要的内容。
        </BodyText>
      </Article>

      {/* 浮动拉引 */}
      <Layer position="absolute" top="100px" right="20px" zIndex={10}>
        <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
          <Quote weight="High">
            "这是一段重要的引用，用于突出文章中的关键观点"
          </Quote>
        </div>
      </Layer>
    </div>
  </Section>
</Layout>`}
      >
        <Layout columns={24}>
          <Section columns={24}>
            <div style={{ position: 'relative', minHeight: '600px' }}>
              <Article span={16}>
                <Headline weight="High">重大新闻标题占据主要版面</Headline>
                <Subhead weight="High">
                  副标题提供更多背景信息和上下文
                </Subhead>
                <BodyText weight="High">
                  这是主要新闻的正文内容。在报纸布局中，最重要的新闻通常占据最大的版面，
                  使用最大的字号和最粗的字重。这样的布局能够立即吸引读者的注意力。
                </BodyText>
                <BodyText>
                  新闻的后续段落继续详细描述事件的发展。通过合理的跨栏布局，
                  我们可以在有限的版面中呈现丰富的内容。
                </BodyText>
              </Article>

              <Article span={8}>
                <Headline weight="Medium">次要新闻</Headline>
                <BodyText weight="Medium">
                  侧边栏的新闻使用较小的字号，适合放置次要但仍然重要的内容。
                </BodyText>
              </Article>

              <Layer position="absolute" top="100px" right="20px" zIndex={10}>
                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 max-w-xs">
                  <Quote weight="High">
                    "这是一段重要的引用，用于突出文章中的关键观点"
                  </Quote>
                </div>
              </Layer>
            </div>
          </Section>
        </Layout>
      </Demo>

      <h2>三栏等宽布局</h2>
      <p>
        将 24 列平均分为三个 8 列的区域，适合展示多个同等重要的内容。
      </p>

      <Demo
        title="三栏布局"
        description="三个 8 列的文章并排显示"
        code={`<Layout columns={24}>
  <Section columns={24}>
    <Article span={8}>
      <Headline weight="Medium">第一栏标题</Headline>
      <BodyText>第一栏的内容...</BodyText>
    </Article>
    <Article span={8}>
      <Headline weight="Medium">第二栏标题</Headline>
      <BodyText>第二栏的内容...</BodyText>
    </Article>
    <Article span={8}>
      <Headline weight="Medium">第三栏标题</Headline>
      <BodyText>第三栏的内容...</BodyText>
    </Article>
  </Section>
</Layout>`}
      >
        <Layout columns={24}>
          <Section columns={24}>
            <Article span={8}>
              <Headline weight="Medium">科技新闻</Headline>
              <BodyText>
                最新的科技动态和创新成果，展示技术发展的最新趋势。
              </BodyText>
            </Article>
            <Article span={8}>
              <Headline weight="Medium">财经要闻</Headline>
              <BodyText>
                市场动态和经济分析，帮助读者了解财经领域的重要信息。
              </BodyText>
            </Article>
            <Article span={8}>
              <Headline weight="Medium">文化艺术</Headline>
              <BodyText>
                文化活动和艺术展览，丰富读者的精神文化生活。
              </BodyText>
            </Article>
          </Section>
        </Layout>
      </Demo>

      <h2>不对称布局</h2>
      <p>
        使用不同的列宽组合创建视觉层次，突出重要内容。
      </p>

      <Demo
        title="12 + 12 列布局"
        description="两个等宽的 12 列区域"
        code={`<Layout columns={24}>
  <Section columns={24}>
    <Article span={12}>
      <Headline weight="High">左侧主要内容</Headline>
      <BodyText weight="High">
        占据 12 列的主要内容区域...
      </BodyText>
    </Article>
    <Article span={12}>
      <Headline weight="High">右侧主要内容</Headline>
      <BodyText weight="High">
        同样占据 12 列的内容区域...
      </BodyText>
    </Article>
  </Section>
</Layout>`}
      >
        <Layout columns={24}>
          <Section columns={24}>
            <Article span={12}>
              <Headline weight="High">深度报道：城市发展</Headline>
              <BodyText weight="High">
                这是一篇深度报道，详细分析城市发展的现状和未来趋势。
                12 列的宽度提供了良好的阅读体验。
              </BodyText>
            </Article>
            <Article span={12}>
              <Headline weight="High">专题调查：环境保护</Headline>
              <BodyText weight="High">
                环境保护专题调查报告，展示环保工作的成果和挑战。
                与左��内容形成对比和呼应。
              </BodyText>
            </Article>
          </Section>
        </Layout>
      </Demo>

      <h2>复杂混合布局</h2>
      <p>
        组合多种列宽，创建丰富的视觉层次和内容结构。
      </p>

      <Demo
        title="混合列宽布局"
        description="6 + 12 + 6 列的组合布局"
        code={`<Layout columns={24}>
  <Section columns={24}>
    <Article span={6}>
      <Headline weight="Low">侧边栏</Headline>
      <BodyText weight="Low">简短内容</BodyText>
    </Article>
    <Article span={12}>
      <Headline weight="High">主要内容</Headline>
      <BodyText>详细的主要内容...</BodyText>
    </Article>
    <Article span={6}>
      <Headline weight="Low">另一侧边栏</Headline>
      <BodyText weight="Low">补充信息</BodyText>
    </Article>
  </Section>
</Layout>`}
      >
        <Layout columns={24}>
          <Section columns={24}>
            <Article span={6}>
              <Headline weight="Low">快讯</Headline>
              <BodyText weight="Low">
                • 新闻 1<br />
                • 新闻 2<br />
                • 新闻 3
              </BodyText>
            </Article>
            <Article span={12}>
              <Headline weight="High">今日焦点</Headline>
              <BodyText>
                主要新闻内容占据中间的 12 列，提供充足的空间展示详细信息。
                两侧的 6 列侧边栏提供补充内容和快讯。
              </BodyText>
            </Article>
            <Article span={6}>
              <Headline weight="Low">相关链接</Headline>
              <BodyText weight="Low">
                • 链接 1<br />
                • 链接 2<br />
                • 链接 3
              </BodyText>
            </Article>
          </Section>
        </Layout>
      </Demo>

      <h2>布局技巧</h2>
      <ul>
        <li>使用较大的 span 值（12-16 列）突出重要内容</li>
        <li>侧边栏使用较小的 span 值（4-8 列）</li>
        <li>保持布局的平衡感，避免过于拥挤或空旷</li>
        <li>使用浮动 Layer 添加视觉亮点</li>
        <li>通过视觉权重系统创建清晰的信息层次</li>
        <li>考虑内容的重要性和阅读顺序</li>
      </ul>

      <h2>注意事项</h2>
      <ul>
        <li>确保所有 Article 的 span 总和不超过 Section 的 columns</li>
        <li>在小屏设备上测试布局的响应式效果</li>
        <li>避免过多的跨栏，保持布局的可读性</li>
        <li>使用一致的列宽比例，如 8:16、6:12:6 等</li>
        <li>浮动元素不要遮挡重要内容</li>
      </ul>
    </div>
  );
}