文章页功能全量演示：一篇用来验收所有阅读细节的文章

这篇文章不是为了讲一个真实故事，而是为了让文章详情页的能力一次性显现出来。它会有足够长的正文、足够多的标题层级、可以点击放大的图片、可以复制的代码块，以及常见内容元素。发布后可以从文章列表进入，也可以直接访问详情页。

阅读前的验收清单

这篇文章应该能触发页面上的这些能力：

• 顶部封面使用半屏英雄图布局，并让导航栏进入透明叠加状态。
• 正文右侧生成目录，目录项来自二级、三级、四级标题。
• 图片可以点击打开灯箱，灯箱支持滚轮缩放和双击缩放。
• 代码块会被包装成带语言标签和复制按钮的代码面板。
• 段落、链接、粗体、行内代码、引用、列表、表格、分割线都能被正常排版。
• 长文滚动时目录高亮会随着当前章节变化。

一眼看到的页面状态

文章标题、摘要、slug、发布状态会出现在封面上方。正文区域会进入卡片化阅读面板，右侧目录只在宽屏显示。可以在这一段里确认普通段落的行高、字重和颜色是否舒服。

四级标题也应该进入目录

这里是一个四级标题。目录生成逻辑会收集二级、三级和四级标题，并给每个标题生成锚点。

图片与灯箱

下面这张图使用站点已有的封面资源。点击图片后，应该打开图片预览层。打开后可以滚轮缩放，也可以双击图片切换放大状态。

图片之后继续保留正文，方便观察图片和段落之间的间距。图片本身应该带圆角、边框和阴影，并且鼠标悬停时能看出它可以被点击。

第二张图片用于测试连续图片

连续出现多张图片时，每张图片都应该独立绑定灯箱事件。关闭第一张后，再点击第二张，预览图应该更新。

文本元素

普通文本里可以混合 加粗文本、行内代码 contentKey、以及内部链接：返回文章列表。外部链接也应该保持同样的下划线交互，例如 Nuxt 文档。

引用块用于强调文章中的关键句。这里应该有左侧强调线、浅色背景、圆角和更明显的阅读节奏。

分割线用于切换语义段落：

分割线之后的段落应该和前一块内容保持合理距离，不应该粘连。

列表与任务状态

无序列表用于测试普通项目符号：

• 封面图存在时，详情页应优先使用文章封面。
• 摘要为空时，列表页和详情页要保持可读。
• 文章置顶后，文章列表应显示置顶标识。

有序列表用于测试步骤内容：

1. 打开文章详情页。
2. 滚动到目录区域。
3. 点击目录里的章节锚点。
4. 点击图片进入灯箱。
5. 点击代码块右上角复制按钮。

任务列表用于观察 Markdown 扩展渲染：

• 顶部英雄图
• 目录锚点
• 图片灯箱
• 代码复制
• 视觉截图复核

表格

表格用于测试横向内容和单元格排版。即使当前样式没有做强定制，也应该能被 Markdown 正常渲染。

代码块：TypeScript

下面的 TypeScript 代码块用于测试语言识别。代码面板顶部应该显示 TS，并出现复制按钮。

interface ArticleFeatureCheck {
  title: string
  enabled: boolean
  note: string
}

const checks: ArticleFeatureCheck[] = [
  { title: '目录', enabled: true, note: '来自 h2 到 h4 标题' },
  { title: '灯箱', enabled: true, note: '来自正文图片' },
  { title: '复制按钮', enabled: true, note: '来自代码块增强' },
]

function getEnabledTitles(items: ArticleFeatureCheck[]) {
  return items
    .filter(item => item.enabled)
    .map(item => item.title)
}

console.log(getEnabledTitles(checks).join(', '))

代码块：Shell

第二个代码块用于测试多个代码面板连续出现时的复制按钮状态。

pnpm exec eslint app/components/posts/PostArticleDetail.vue app/components/posts/ArticleReadingEnhancer.vue
pnpm exec nuxi build

长文滚动测试

这一节开始放入更多段落，方便验证右侧目录的 active 状态。滚动时，当前可见章节应该更新高亮。标题的 scroll margin 也应该让锚点跳转后不会被顶部导航遮住。

第一段滚动内容

舞台开始前，屏幕只保留一层低亮度的蓝色。观众还没有听见鼓点，但页面已经能通过封面和摘要说明这篇文章的状态。对于详情页来说，这一段文字只是长文排版的压力测试。

第二段滚动内容

当正文进入中段，读者会频繁看到小标题、段落、列表和图片交替出现。文章页需要保证这些元素不互相抢视觉层级，目录也不能因为滚动而丢失当前位置。

第三段滚动内容

如果在移动端查看，右侧目录会隐藏，正文卡片会占满主要宽度。图片灯箱仍然应该可以打开，触摸缩放逻辑也应该保留基本可用性。

第四段滚动内容

如果在桌面端查看，目录卡片会固定在右侧。点击目录中的任何章节，页面应该滚动到对应标题，并保留舒适的顶部间距。

搜索关键词验证

为了测试快捷搜索，这里刻意放入一些唯一关键词：灯箱验收、代码复制验收、目录高亮验收、英雄封面验收。搜索这些词时，应该能命中这篇文章，并展示正文摘录。

收尾检查

读到这里时，文章已经覆盖了详情页的主要阅读功能。最后再放一个短列表作为尾部排版检查：

• 标题层级没有断裂。
• 图片点击事件仍然有效。
• 代码复制按钮不会重复插入。
• 目录项数量足够，且锚点不会冲突。
• 文章内容足够长，可以观察滚动状态。