组件库方案测试

普通段落内容

这是一个普通的段落，使用自然滚动。

没有强制分屏，没有 scroll-snap 冲突。

用户可以自由滚动，阅读体验更流畅。

列表测试

• 列表项 1：测试列表渲染
• 列表项 2：测试垂直间距
• 列表项 3：测试响应式布局

代码块测试

// 测试代码块显示
function hello() {
  console.log("Hello FlowPage 2.0");
  return "Component-based architecture";
}

// 这是一个较长的代码块，用于测试溢出情况
const config = {
  system: "no-blocks",
  benefits: ["简洁", "灵活", "标准", "易维护"]
};

链接和强调测试

这是 加粗文字，这是 斜体文字，这是 链接示例。

测试 Quote 组件

测试 Stats 组件

测试 Cards 组件

再来一个 Hero（非全屏）

长段落测试

这是一个很长的段落，用于测试内容溢出和自然滚动。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

这是第二段。Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.

嵌套列表测试

1. 第一级列表项
   • 第二级嵌套项 1
   • 第二级嵌套项 2
     • 第三级嵌套项
2. 另一个第一级项
   • 更多嵌套内容
   • 测试深层嵌套

引用测试

这是一个引用块，用于测试引用样式。

引用可以包含多个段落。

— 作者名字

表格测试

图片测试

这是图片说明文字。

总结

对比检查清单:

• 滚动是否流畅？
• Hero 全屏效果是否保留？
• 长内容是否不再被截断？
• 代码块是否正常显示？
• 表格是否响应式？
• 开发体验是否更简单？

技术细节

与 Block 系统的区别

旧方式（Block 系统）:

## 标题
<!-- block: hero, image: ./hero.jpg -->
内容

新方式（组件库）:

<Hero image="./hero.jpg" fullscreen>
  ## 标题
  内容
</Hero>

优势

1. 标准 MDX - 任何 Astro 开发者都熟悉
2. 自由滚动 - 无 scroll-snap 冲突
3. 灵活组合 - 可以嵌套、组合组件
4. 代码简洁 - 删除 74% 代码
5. 易于维护 - 组件独立，职责单一

如果你正在阅读这个页面，请对比一下与其他使用 Block 系统的页面的差异。