Katheryne/Frontend/Components/GrammarHelp.razor

<Modal Title="DSL语法说明"
       Visible="@_helpVisible"
       OnOk="@(() => _helpVisible = false)"
       OnCancel="@(() => _helpVisible = false)">
    <div>
        <Title Level="3">语法说明</Title>
        <Paragraph>
            凯瑟琳DSL使用和<Text Code>YAML</Text>类似的语法来编写逻辑。语法通过规定机器人的多个阶段和在阶段之间的
            迁移关系来描述聊天机器人的聊天过程。机器人在启动时处在一个特定的阶段，通过正则表达式匹配用户的输入迁移到下一个阶段
            并输出对应的内容。
        </Paragraph>

        <Paragraph>
            文法拥有三个顶级属性：

            <ul>
                <li>
                    <Text Code>robotName</Text> 字符串类型，规定了机器人的名称；
                </li>

                <li>
                    <Text Code>stages</Text> Stage类型的数组，规定了机器人的各个阶段；
                </li>

                <li>
                    <Text Code>beginStageName</Text> 字符串类型，规定了机器人初始阶段，会自动输出该阶段的输出内容。
                </li>
            </ul>
        </Paragraph>

        <Paragraph>
            Stage类型拥有三个属性：

            <ul>
                <li>
                    <Text Code>name</Text> 阶段的名称，是阶段<b>唯一的标识符</b>；
                </li>
                <li>
                    <Text Code>transformers</Text> Transformer类型的数组，指定该阶段的迁移规则；
                </li>
                <li>
                    <Text Code>answer</Text> 该阶段的输出内容。
                </li>
            </ul>
        </Paragraph>

        <Paragraph>
            Transformer类型拥有两个属性：

            <ul>
                <li>
                    <Text Code>pattern</Text> 匹配用户输入的正则表达式；
                </li>
                <li>
                    <Text Code>nextStageName</Text> 匹配成功之后需要迁移到的阶段名。
                </li>
            </ul>
        </Paragraph>

        <Paragraph>
            在<Text Code>Stage</Text>类型的<Text Code>answer</Text>属性中支持两种特殊的语法：

            <ul>
                <li>
                    利用上文中设置的迁移正则表达式中提取用户的输入作为输出的一部分，使用<Text Code>$number</Text>
                    作为标识符指定提取到的信息应当插入在何处，<Text Code>number</Text>是匹配成功的列表索引。<br/>

                    例如，使用正则表达式<Text Code>(.*?)</Text>迁移到拥有如下
                    <Text Code>answer: 感谢冒险家完成了“$1”, 这是你的奖励。</Text>属性的阶段，
                    会将用户的输入完全替换到<Text Code>$1</Text>所在的位置。
                </li>

                <li>
                    调用系统中预先定义的API作为回答，使用<Text Code>@@module/method</Text>调用。<br/>
                    例如：利用<Text Code>@@weather/text</Text>调用weather模块的text方法获得当前北京的天气信息。
                </li>
            </ul>
        </Paragraph>

        <Paragraph>
            当前程序中提供的API模块有：

            <ul>
                <li>
                    Weather: <br/>
                    text: 获得当前天气文本 <br/>
                    temp: 获得当前温度
                </li>
            </ul>
        </Paragraph>

        <Paragraph>
            在编译阶段编译器会执行如下检查：

            <ul>
                <li>
                    <Text Code>transformers</Text> 中的 <Text Code>nextStageName</Text>指定的阶段是否定义；
                </li>

                <li>
                    <Text Code>beginStageName</Text> 指定的阶段是否定义。
                </li>

                <li>
                    调用的模块和方法是否存在。
                </li>
            </ul>
        </Paragraph>
    </div>
</Modal>

@code {
    private bool _helpVisible;

    public void Show()
    {
        _helpVisible = true;
        StateHasChanged();
    }
}