组件一览
故事组件家族由六个核心成员组成，它们在 Vue 模板中形成清晰的树状结构，恰好映射出你心中的故事框架：
html
<AShell>
<!-- 故事根容器，负责最终调度 -->
<AScene>
<!-- 场景，拥有独立的 id 与名称 -->
<ADialog>
<!-- 一段对话，包含台词、选项或结局 -->
<ALine>...</ALine>
<!-- 一行普通对话 -->
<AOptions>
<!-- 选项容器 -->
<AOption>
<!-- 单个选项 -->
<template #content>选项显示文字</template>
<ALine>选择后的反馈</ALine>
<AEnding desc="..." />
<!-- 结局回调 -->
</AOption>
</AOptions>
</ADialog>
</AScene>
</AShell>所有故事组件都是 renderless（无渲染）的，它们不会在页面上生成任何额外的 DOM 元素，只默默地在幕后完成数据收集与逻辑组织。你的模板最终只输出插槽中的真实内容，这意味着你可以完全掌控页面的结构和样式。
组件树全景
所有故事组件在 Vue 模板中形成清晰的树状结构，恰好映射出你心中的故事框架：
html
<AShell>
<!-- 故事根容器 -->
<AScene>
<!-- 场景 -->
<ADialog>
<!-- 对话 -->
<ALine>...</ALine>
<!-- 台词 -->
<AIf :condition="...">
<!-- 条件分支 -->
<ALine>...</ALine>
</AIf>
<AElse>
<ALine>...</ALine>
</AElse>
<ARun :run="..." />
<!-- 运行时执行 -->
<ACheck :target="10">
<!-- 属性检定 -->
<template #success>成功</template>
<template #fail>失败</template>
</ACheck>
<AOptions>
<!-- 选项 -->
<AOption>
<template #content>选项文字</template>
<ALine>...</ALine>
<AGoto tgt="other_dialog" />
<!-- 跳转 -->
<AEnding desc="..." />
<!-- 结局 -->
</AOption>
</AOptions>
<AEndDialog />
<!-- 提前结束 -->
</ADialog>
</AScene>
</AShell>组件职责速查
| 组件 | 作用 |
|---|---|
AShell | 故事根节点，收集所有场景与对话，统一计算 next 并调用 API |
AScene | 定义一个场景，提供 id 与 name，自动推断子对话的 next |
ADialog | 一段对话的容器，收集其中的台词、选项、结局等，作为整体发送 |
ALine | 一行普通对话，其内容可以是任意 HTML 或组件 |
AOptions | 选项组，将多个 AOption 打包为选项列表 |
AOption | 单个选项，包含显示文字（content 插槽）和选择后执行的对话内容 |
AEnding | 对话结束标记，当执行到时调用 Adv.end() 结束游戏 |
AIf | 条件分支，根据 condition 决定是否执行插槽内容 |
AElif | "否则如果"分支，与 AIf 配合形成多路条件判断 |
AElse | "否则"分支，当所有 AIf/AElif 条件不满足时执行 |
AEndDialog | 提前结束当前对话，跳过后续所有脚本 |
AGoto | 强制跳转到指定的对话或场景 ID |
ARun | 在脚本执行流中嵌入任意自定义代码 |
ACheck | 属性检定组件，封装掷骰、修正、成功/失败分流全流程 |
在接下来的章节中，我们将逐一学习如何用它们编写故事。建议按以下顺序阅读：