interactive-artifact

Interactive Artifact 的目标是生成一个可直接在浏览器打开的单一 HTML 文件。查看者通过点击、筛选或展开来探索内容，而不是单纯阅读。

一、设计原则

1. 单一视图，按需展示细节。先呈现整体全貌，点击某个元素后，在可折叠的侧边栏中展示细节，不把信息分散到多个页面或标签页中。

2. 最大化内容区域。填满视口（height: 100vh，使用 flex column 布局）。导航和详情采用可折叠侧边栏，通过宽度过渡实现，而不是固定的页头或浮层。内容区域占据剩余全部空间。

3. 默认浅色模式并提供切换。颜色由 CSS 自定义属性驱动。通过在 <html> 上添加 .dark 类来切换深色模式。工具栏中包含一个 ☀/🌙 按钮。

4. 静态实现，无需构建步骤。使用 CDN <script> 标签。只有一个 HTML 文件，不需要 npm，也不需要打包器。

5. 适配手机。采用响应式布局，支持触摸平移/双指缩放，点击目标不小于 44px。

resources/layout-and-theme.md 中提供了所有交互模式共用的具体布局、主题和移动端模式。

二、交互模式

当信息具有关系或流程时，默认使用 Mermaid 图表。当数据用其他模式呈现更合适时，则选择相应模式：

• 可探索图表：适用于依赖关系、流程、系统图，参见 resources/explorable-diagram.md。

• 数据表格：适用于带可排序/可筛选列的记录，参见 resources/data-table.md。

• 数据图表：适用于数量、趋势、分布，参见 resources/data-chart.md。

• 时间线：适用于带细节的时间顺序事件，参见 resources/timeline.md。

• 树形/目录：适用于层级导航、文档大纲，参见 resources/tree-and-toc.md。

• 卡片网格：适用于带摘要和可展开详情的条目，参见 resources/card-grid.md。

• 差异/对比：适用于前后对比、版本差异，参见 resources/diff-view.md。

如果需要在图形上实现 Mermaid 之外的定制节点渲染、拖拽或实时筛选，可参考 resources/experimental-react-flow.md。

三、适用场景

适合把结构化的信息（如依赖关系、流程、记录、趋势、时间线、层级结构、对比等）整理成一个可交互浏览的独立 HTML 文件，并希望在桌面和手机上都能直接打开使用。

四、限制

资料未提供关于收费、价格、平台支持范围、具体效果或详细使用步骤的信息，暂未提供。