计划中

交互式实验模板

用于验证 Lab 模块的 MDX 导入与原生交互组件挂载方式；它不是实际算法实验。

  • MDX
  • 交互
  • 模板
全部实验
说明：Lab 实验页可能包含客户端交互组件；实验正文和说明仍由静态 HTML 输出，交互代码与普通文章结构解耦。

这个页面的用途是验证 Lab 的工程边界：内容用 MDX 编写，交互组件从 src/components/lab/ 导入，普通文章页面不加载这些代码。当前状态是规划中，下面只有一个用于确认挂载流程的计数组件，不是真实的算法、AI 或网络实验。

交互组件挂载

Lab 交互占位

原生 JavaScript 计数

下面的计数只用于确认 MDX 能导入 Lab 专属的 Astro 组件并执行原生 JavaScript，不代表真实实验。

0

组件通过普通的 <script> 监听事件，没有使用 client:* 指令，也没有引入 React、Vue 或 Svelte。Astro 会为这个交互脚本生成客户端资源，而普通文章不会引用它。

新增实验时的结构

  1. 在 src/content/lab/ 新建 .mdx 文件，填写 title、description、status 等 frontmatter；
  2. 在 src/components/lab/ 创建只被 Lab 使用的组件；
  3. 在 MDX 中 import 并渲染组件；
  4. 如果实验需要大量计算，把计算移到 Web Worker，避免阻塞主线程；
  5. 在本地测试键盘操作、窄屏布局和 prefers-reduced-motion。
---
title: "实验名称"
description: "实验解决的问题"
tags: ["算法"]
date: "2026-11-08"
updatedDate: "2026-11-08"
status: "in-progress"
featured: false
---

import Demo from "../../components/lab/Demo.astro";

<Demo />

设计边界

Lab 复用全站布局和设计 Token，但不把实验组件放进 components/common/ 或 components/blog/。组件与内容一起演进，只有被证明可以复用的部分才提升为公共组件。

重计算、流式数据或需要复杂状态管理的实验，会在具体需求出现后再决定是否引入框架；当前不预装任何前端框架依赖。

相关文档