报刊排印专属组件系统展示与全链路测试

<Seal text="墨痕" variant="relief" shape="square" size="md" />
<Seal text="听雨" variant="intaglio" shape="round" size="md" />
<Seal text="核对备查" variant="stamp" shape="rect" size="md" />
<Seal text="文卷" variant="wax" shape="round" size="md" />

<Badge variant="primary">主笔推荐</Badge>
<Badge variant="secondary">考据档案</Badge>
<Badge variant="outline">朱砂印标</Badge>
<Badge variant="pill">特刊专栏</Badge>

按 <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> 唤起搜索。
悬浮查看刮开信息：<Spoiler>这是一段被朱墨涂盖的保密考证文字</Spoiler>。

<Notebook title="随行横格工作手记 · 卷一" date="2026-09-20" paperType="ruled" hasRedMargin={true} stamp="RULED NOTE">
  **律动法则**：正文行高与下划横格严格对齐（32px Grid），形成规整的手写记事韵律。  
  **装订边线**：左侧保留 48px 朱砂红垂直边线，复刻经典复古活页纸与手帐版式。  
  **书卷呼吸**：顶部配有复古皮纸脊条与手工走线，底部附带防伪归档印记。
</Notebook>

<Notebook title="排版工作手记 · 卷二" date="2026-09-20" paperType="grid" hasRedMargin={true} stamp="GRID NOTE">
  **设计法则一**：正文文字应克制沉静，以炭墨（`#1a1a1a`）为基底，纸底微暖（`#fbfbf9`）。  
  **设计法则二**：朱砂红（`#9e2a2b`）仅用于点睛之笔、印章题跋与重点批注，不可大面积滥用。  
  **设计法则三**：边框以极细发丝线（1px Hairline）为界，保持纯净的书卷翻阅呼吸感。
</Notebook>

<PullQuote author="汉斯·鲁道夫·楚茨" cite="《平面设计网格系统》">
  网格系统是一种视觉思考的工具，它不仅赋予设计秩序与逻辑，更使读者在翻阅长篇叙事时能够获得舒适与安心。
</PullQuote>

这里是一段正文长文阅读演示<Sidenote id="sn-grid-rule" label="①">边注提供深度的历史考证背景与扩展释义，桌面端浮现于边栏，移动端可折叠为随身卡片。</Sidenote>，在现代出版物排印中，边注比底部的脚注更能带来不打断心流的浸润式阅读体验。

<Poetry title="题破山寺后禅院" author="常建（唐）" cols={2}>
清晨入古寺，初日照高林。
竹径通幽处，禅房花木深。
山光悦鸟性，潭影空人心。
万籁此都寂，但余钟磬音。
</Poetry>

<!-- 极简调用：无需传 role、sealChar、kicker、date，仅需说话人和 type 即可 -->
<Chat title="日常读者答疑">
  <Dialogue speaker="读者小陈" type="q">
    博主你好！请问这套排版组件在手机移动端的阅读体验怎么样？
  </Dialogue>

  <Dialogue speaker="主理人" type="a">
    你好！所有组件都经过专门的响应式断点适配...
  </Dialogue>
</Chat>

<!-- 进阶调用：装配 role（头衔标签）、sealChar（单字印章）、kicker 与 date 考据时间 -->
<Chat title="关于出版物排印系统现代化的对话" kicker="访谈记录" date="2026-09-20 14:30">
  <Dialogue speaker="采访者" role="特约记者" type="q">
    请问在将传统出版物的美学移植到数字网页时，最核心的难点是什么？
  </Dialogue>

  <Dialogue speaker="主理人" role="博客作者" type="a" sealChar="倪">
    最难的是在数字屏幕的高对比度与纸质书籍的柔和触感之间找到平衡。我们通过暖白纸底、深炭墨字、细微墨渗边缘与金石印章，还原了翻阅实体书刊时的宁静质感。
  </Dialogue>
</Chat>

<!-- 1. 社论与主理人手记 (editorial) -->
<Note type="editorial" title="设计手札 · 主理人案">
  本博客所有排版组件皆由原生 CSS 变量系统与主题色令牌驱动...
</Note>

<!-- 2. 阅读建议与操作指引 (tip) -->
<Note type="tip" title="阅读与交互建议">
  在宽屏显示器上，侧边栏与随文即时侧注将舒展出最适宜阅读的黄金比例...
</Note>

<!-- 3. 注意与避坑提示 (warning) -->
<Note type="warning" title="字体加载防闪烁避坑">
  引入中文字体切片包时，建议优先配置 font-display: swap...
</Note>

<!-- 4. 警示与禁止操作 (danger) -->
<Note type="danger" title="样式全局隔离禁忌">
  请勿在局部组件中直接向 body 或全局选择器强制注入破坏性属性...
</Note>

<!-- 5. 文献考证与历史归档 (archive) -->
<Note type="archive" title="现代排印学文献引注">
  引自约瑟夫·米勒-布罗克曼《平面设计中的网格系统》第四章...
</Note>

<!-- 6. 哲思与灵感观察 (insight) -->
<Note type="insight" title="数字化纸墨哲思">
  数字介质绝非传统纸书的简单投屏，而是借助现代屏幕的高刷新率与微交互...
</Note>

<Note
  type="editorial"
  title="自定义角标与防伪底印"
  badge="特约专栏"
  seal="主笔核验"
  code="GAZETTE-SPEC-2026"
>
  此处的左上角徽标被定制为「特约专栏」，右下角金石印章被定制为「主笔核验」，右上角档案序列号指定为「GAZETTE-SPEC-2026」。
</Note>

<!-- 若需隐藏右上角编号或右下角印章： -->
<Note type="tip" title="极简便签" code={false} seal={false}>
  纯粹便签正文，不显示编号与底章。
</Note>

<!-- 默认自动按顺序递增 PHASE 01, PHASE 02, PHASE 03 -->
<Steps>
  <Step title="引入本地切片字体">
    采用 Noto Serif SC、Noto Sans SC 与 JetBrains Mono 现代 woff2 规范。
  </Step>
  <Step title="统合色彩系统">
    建立深炭墨、宣纸底、朱砂红的核心 Token 并向所有组件渗透。
  </Step>
  <Step title="移植出版物组件">
    27 款专业排印组件全链路对齐新主题规范。
  </Step>
</Steps>

<!-- 各处文字均可按需自定义：
     1. 父级 <Steps prefix="工序">：一键全局将 PHASE 替换为中文“工序 01 / 工序 02”；
     2. step="壹" / step="★"：自定义左侧方框印章内容；
     3. phase="第一阶段 · 筹备"：完全重写顶部红框小标签（或 phase={false} 隐藏）；
     4. status="已就绪" / date="2026-09-20" / subtitle="..."：追加状态标、日期与副标题。
-->
<Steps prefix="工序">
  <Step
    step="壹"
    phase="第一阶段 · 筹备"
    status="已就绪"
    title="字型与纸墨基底构建"
    subtitle="确立思源宋体、思源黑体与 Inter 混排基线"
  >
    左侧印章指定为汉字「壹」，顶部标签完全自定义为「第一阶段 · 筹备」...
  </Step>

  <Step
    step="贰"
    phase="第二阶段 · 统合"
    status="进行中"
    date="2026-09-20"
    title="色彩系统渗透"
  >
    左侧印章指定为「贰」，顶部标签指定为「第二阶段 · 统合」...
  </Step>

  <Step
    step="★"
    phase={false}
    title="极简步骤（隐藏 PHASE 标签）"
  >
    通过设置 phase={false} 完全隐藏红框小标签，左侧印章自定义为星芒符号「★」。
  </Step>
</Steps>

<Tabs items={['设计理念', '色彩规范', '字体分工']}>
  <Tab label="设计理念">
    融合 20 世纪中叶瑞士现代主义理性网格与东方传统木活字金石出版物美学。
  </Tab>
  <Tab label="色彩规范">
    纸底 `#fbfbf9`、深炭墨 `#1a1a1a`、朱砂红 `#9e2a2b`，高雅克制。
  </Tab>
  <Tab label="字体分工">
    宋体承载文学长篇叙事，黑体主导功能界面指引，等宽代码标定时间档案。
  </Tab>
</Tabs>

<Plate
  src="https://picsum.photos/seed/editorialshowcase/800/400"
  fig="图 1.1"
  caption="近代报章排印与手工铅字印样局部细节"
/>

<Button href="https://github.com" variant="seal">朱砂金石印签</Button>
<Button href="https://astro.build" variant="outline">双线出版按纽</Button>
<Button variant="primary">沉墨重磅出版</Button>
<Button variant="ghost">隐式文字按纽</Button>

<!-- 默认自带复古出版物顶栏与底部归档印章 -->
<Timeline>
  <TimeNode date="2026-09-18" title="视觉重构立项">
    确立以 Works in Progress 与 Stripe Press 为参考的成熟报刊出版物美学标准。
  </TimeNode>
  <TimeNode date="2026-09-19" title="字体与基础体系">
    将中文字体（思源宋体、思源黑体）与等宽字体打包进博客本地，切断对外源依赖。
  </TimeNode>
  <TimeNode date="2026-09-20" title="27 款组件全链路交付">
    全套出版物组件无缝融入现有系统，保持 DOM 结构零变动。
  </TimeNode>
</Timeline>

<!-- 自由自定义顶栏文字、副标题、底部封印文字及各节点的符号与标签 -->
<Timeline
  kicker="重构纪实"
  title="出版物设计规范落成记"
  subtitle="2026 秋季技术复盘"
  finial="— 本阶段开发目标全部达成 · 验讫 —"
>
  <TimeNode
    date="2026-09-18"
    symbol="★"
    status="已交付"
    title="立项与审美框架对齐"
    subtitle="确立深炭墨、宣纸底与朱砂红主视觉"
  >
    完成了对标国际一流独立刊物排版的色彩规范与网格系统...
  </TimeNode>

  <TimeNode
    date="2026-09-19"
    symbol="✦"
    tag="核心突破"
    title="切片字体本地化"
  >
    将思源黑体、思源宋体与 JetBrains Mono 进行高效切片打包...
  </TimeNode>

  <TimeNode
    date="2026-09-20"
    symbol={false}
    status="进行中"
    title="交互组件细节抛光"
  >
    通过设置 symbol={false} 移除了日期前的节符，纯粹呈现时间戳...
  </TimeNode>
</Timeline>

<!-- 若需完全隐藏顶栏或底部署名： -->
<!-- <Timeline header={false} finial={false}> ... </Timeline> -->

<Declassified summary="解密档案：组件系统移植对照明细表" code="DOSSIER-SPEC-001">
  本篇演示涵盖印章、徽章、随行笔记本、引言、边注、诗词排印、对话实录、折叠解密、多维便签、步骤指示、标签页、时间轴、智能外链与外链卡片。所有组件与全站朱砂墨韵主题色深度契合。
</Declassified>

| 版型规格 | 基准栅格 | 主导字重 | 适用场景 |
| :--- | :--- | :--- | :--- |
| 八开大报 (Broadsheet) | 6 栏网格 / 24px 基线 | 800 (特黑) | 新闻头条、社论评析 |
| 随行手记 (Notebook) | 16px 方格 / 32px 横线 | 400 (正规) | 便签札记、即兴思考 |
| 典籍诗笺 (Verse Slip) | 中轴对称 / 偶句合辙 | 700 (标宋) | 律诗古体、箴言绝句 |

- [x] 全面梳理 27 款出版物组件并无缝移植
- [x] 重构暗色模式适配器（深炭微温灰、朱砂高亮、冷金点缀）
- [x] 集成快捷检索弹窗（`Ctrl + K`）全站键盘交互
- [x] 增强代码视窗终端顶栏与一键复制反馈
- [ ] 持续优化移动设备上的超宽表格横向滚动体验

<SmartLink href="https://github.com">GitHub 开源仓库</SmartLink> · 
<SmartLink href="https://astro.build">Astro 官方框架</SmartLink> · 
<SmartLink href="https://bilibili.com">Bilibili 视频</SmartLink>

<LinkCard
  title="Astro 现代化内容驱动建站框架"
  desc="The web framework for content-driven websites. Powerful, lightweight, and fast."
  url="https://astro.build"
  badge="推荐框架"
/>

<!-- 1. 全功能视频卡片（含 16:9 封面、播放键、时长、UP 主与播放数据） -->
<LinkCard
  type="bilibili"
  url="https://www.bilibili.com/video/BV1GJ411x7h7"
  title="【纪录片】华北浪革 · 独立出版与活字印刷漫游记"
  desc="探访老牌活字铸造所与手工纸作坊，记录从铅字压印到现代屏幕像素排版的跨时空对话。"
  author="华北浪革工作室"
  cover="https://picsum.photos/seed/bili-doc/800/450"
  duration="16:42"
  views="18.2万"
  danmaku="2480"
/>

<!-- 2. 轻量级视频卡片（直接填入 bvid，展示复古小电视图标，无需封面） -->
<LinkCard
  bvid="BV1xx411c7mD"
  title="【双语】现代前端设计系统与排印哲学演进"
  desc="如何平衡屏幕高刷新率与纸质出版物的沉静质感？"
  author="GNIX_Studio"
/>

<CodeBlock
  title="typography.rs"
  language="rust"
  code={`// 这是一个用思源黑体渲染的中文注释
fn render_editorial_typesetting() -> Result<(), &'static str> {
    let font_sans = "Inter + Noto Sans SC (思源黑体)";
    let font_mono = "JetBrains Mono + 思源黑体中文回退";
    println!("出版物排版引擎就绪：西文成熟，中文典雅！");
    Ok(())
}`}
/>

```typescript
interface GazetteArticle {
  title: string;          // 篇目题名
  pubDate: string;        // 2026-09-20 (Inter 优雅排版数字)
  wordCount: number;      // 3,820 字
  isVerified: boolean;    // 校订状态：已核验
}
```