# 模式一：单 HTML 模式 — 完整工作流
# 版本：1.0.0 | 更新日期：2026-06-09
# 适用：零前端基础的开发者
# 产物：index.html + guide.dimsum.json
# 耗时：约 5-30 分钟
================================================================
模式一概述
================================================================
本模式适用于完全没有前端开发经验的用户。只需要：
- 一个文本编辑器（记事本即可）
- 复制粘贴代码
- 无需安装任何开发工具
最终产出两个文件：index.html 和 guide.dimsum.json，
放入主程序的 Widgets 目录即可运行。
================================================================
完整工作流（AI Agent 必须逐步执行）
================================================================
--- 第 1 步：确定应用名称 ---
AI Agent：帮开发者确定应用名称，建议格式：作者-主题-年份-类型
例如：user-danmaku-2026-danmaku
使用小写字母、数字和连字符，不要用中文或空格。
--- 第 2 步：了解需求 ---
AI Agent：确认开发者想显示什么类型的消息：
- 只要弹幕（comment）
- 弹幕 + 礼物（comment + gift）
- 弹幕 + 礼物 + 点赞（comment + gift + like）
- 更多类型
默认提供全类型支持的模板。
--- 第 3 步：生成 guide.dimsum.json ---
AI Agent：根据应用名称生成配置文件，填入正确的内容。
模板：
```json
{
"name": "应用显示名称",
"version": "1.0.0",
"base": "/你的应用名称/",
"description": "简要描述这个应用做什么",
"pages": [
{
"name": "弹幕",
"path": "index.html",
"width": 1920,
"height": 1080,
"description": "弹幕显示页面"
}
]
}
```
--- 第 4 步：生成 index.html ---
AI Agent：生成完整的 index.html。以下是完整模板：
```html
应用名称
```
--- 第 5 步：指导开发者创建文件 ---
AI Agent：按以下步骤指导开发者：
1. 在主程序的 Widgets 目录下创建文件夹，名称为你的应用名称（即 base 中去掉 / 的部分）
路径示例：%AppData%/MiegoLive/DimSumChat/Widgets/你的应用名称/
2. 在该文件夹中创建 guide.dimsum.json，填入第 3 步的配置
3. 在该文件夹中创建 index.html，填入第 4 步的代码
--- 第 6 步：测试 ---
AI Agent：告诉开发者如何测试：
1. 打开点心 Chat 主程序
2. 在「我的应用」中找到你的应用
3. 连接一个直播间
4. 在浏览器中打开：http://localhost:13500/你的应用名称/index.html
5. 观察弹幕是否正常显示
--- 第 7 步：常见问题排查 ---
如果应用不工作，按以下顺序排查：
1. 文件夹名是否与 guide.dimsum.json 的 base 一致？
→ base 是 "/foo/" 则文件夹必须是 "foo"
2. 主程序是否在运行？
→ 检查系统托盘中是否有点心 Chat 图标
3. 浏览器控制台是否有错误？
→ 按 F12 打开开发者工具，查看 Console 标签
4. CDN 是否可访问？
→ 如果加载缓慢或失败，尝试用：
https://cdn.jsdelivr.net/npm/dimsum-chat@0/+esm
5. 是否从 file:// 打开？
→ 必须通过 http://localhost:13500/ 访问，不能直接双击 HTML 文件
================================================================
模式一扩展：可选增强
================================================================
开发者熟悉基本流程后，可以自行修改以下内容：
- 颜色和样式：修改