Labs

这里是本站 demo 的统一入口。从下面选择一个实验，直接打开独立页面，或跳到本页对应的交互示例。

HeroUI Pro 组件文档 · 编写 demo

Demo 列表

React：滚动玻璃胶囊导航

这个技术备份展示完整的滚动胶囊效果：导航在页面顶部保持全宽透明，滚动后收缩为居中的玻璃胶囊。使用内部滚动区域体验，不会改变 Labs 页自身的阅读位置。

HeroUI Pro：选择与评价

InlineSelect 把选择器放进一句话，Rating 用星级表达反馈。试试下拉选项、方向键和评分；变化会立即显示在下方。

HeroUI Pro：完整的消息过程

默认展开一段完整回答，包含演示步骤、消息、来源和复制操作。点击「重新回放」，可以暂停、调速或直接跳到完整结果。

import AgentReplay from './AgentReplay';

<AgentReplay client:visible />

这个示例只回放本地预设数据，不调用 AI 模型或后端服务。

HeroUI：编辑与即时预览

输入框、选择器、开关与卡片组成一个小型编辑器。切换到「样式与状态」，还可以比较按钮、状态标签和折叠面板。

其他框架：Svelte

这个计数器使用 Svelte 的响应式状态与派生值。改变步长后，按钮和派生值会一起更新，React 演示的状态保持独立。

Labs 按组件库和框架组织实验；后续 Vue 或更多 Svelte 示例会沿用各自独立的组件与章节。目前的 Vue 示例尚未接入。

Astro：静态主题组件

普通的 Astro 组件可以直接嵌入 MDX。例如下面的提示框来自 Astro-book，不需要加载 React 运行时：

这段内容由主题的 Notice 组件输出，和文章一起生成静态 HTML。

import Notice from '@tcitry/astro-book/components/Notice';

<Notice variant="info">在文章中补充一条说明。</Notice>

文章的公式和图表

数学公式由 KaTeX 在构建时渲染，Mermaid 图表在页面需要时加载。下面仍然使用普通 Markdown 写法，代码块支持语法高亮与复制。

行内公式 $E = mc^2$ 和块级公式可以继续使用：

flowchart TD
  MDX[MDX 文章] --> HTML[Astro 静态 HTML]
  MDX --> React[React 与 HeroUI]
  MDX --> Svelte[Svelte 组件]
  HTML --> Reader[浏览器]
  React --> Reader
  Svelte --> Reader

组件写一次，使用两次

文章中按需加载同一份组件：

import AgentReplay from '../../components/demos/AgentReplay';

<AgentReplay client:visible />

独立页面复用它，并在页面加载时启动交互：

---
import AgentReplay from '../../components/demos/AgentReplay';
---
<AgentReplay client:load />

本站的交互 MDX 页面放在 src/pages/，组件放在 src/components/。原有 Blog 内容继续通过只读兼容层导入；交互文章目前先在站点仓库中编写。

更多实验可以继续复用阅读布局、章节目录和组件入口。

已有演示，统一构建

Three.js 场景与圆弧时间线的独立页面已收录在顶部 Demo 列表。它们与博客共用开发、构建和部署流程，组件代码保存在本站；圆弧时间线继续保留文章中原有的嵌入地址。

使用与定制

本站由 Astro 7.3.1 静态生成页面，使用 @tcitry/astro-book 提供阅读布局；新增界面优先采用 Tailwind CSS 4.3.3，需要局部样式时再使用 CSS Modules。

交互区域使用 React 19.2.8、HeroUI 3.2.4 与 Svelte 5.57.0。HeroUI Pro 1.0.0-beta.8 由 tcitry-blog 接入；公开主题本身不依赖 React、HeroUI 或商业组件。本站文章与 MDX 的代码块继续使用 HeroUI Pro CodeBlock。

• 主题使用说明（英文）：能力范围、示例和安装方式。
• 入门指南：阅读布局、Markdown / MDX、导航与搜索。
• 公开 API 与定制入口：参数、插槽与组件替换。
• 本站 demo 编写说明：组件复用、局部样式、授权安装与验收。