牌堆生成编辑器（网页）
牌堆生成与编辑工具，支持权重（含骰子表达式）、跨牌堆引用、抽取预览与概率可视化。数据可本地保存、导入导出，并提供移动端优化。
访问地址
主要功能
- 牌堆管理：新建、删除、重命名、排序（上移/下移）、搜索。
- 牌面编辑：添加/删除、上下移动、内容编辑、权重模式。
- 权重支持：
- 普通数字权重（默认权重为 1）。
- 骰子表达式，如
2d6+3（随机计算得到权重）。
- 引用语法：
{牌堆名}：不放回引用（抽取后该牌面不可重复）。{%牌堆名}：放回引用（可重复抽取）。- 支持嵌套解析，直到无可解析的引用为止。
- 抽取预览：选择牌堆并抽取单张牌面，显示结果。
- 概率分布：使用饼图（Chart.js）可视化当前牌堆的权重比例。
- JSON 数据：支持预览、编辑与全屏查看；编辑后可一键应用到界面。
- 导入导出：支持上传 JSON 文件或粘贴 JSON 文本导入，支持导出当前数据为 JSON。
- 移动端优化：提供悬浮快速操作（导入/导出/保存/清除）。
- 友好提示：顶部弹出轻量通知（保存、清除等操作反馈）。
使用说明
创建与编辑牌堆
- 点击“新建牌堆”后，在左侧列表中选择该牌堆。
- 在中间编辑区添加牌面、编辑内容、上下移动或删除。
- 牌堆可重命名；牌堆列表支持搜索与排序。
权重模式
- 点击“权重模式”显示每个牌面的权重输入框。
- 可输入数字（如
5）或骰子表达式（如 2d6+3）。
- 保存格式为
::权重::内容，当权重为空或为 1 时不写入权重前缀。
- 无法解析的表达式默认按权重
1 处理。
引用语法
- 不放回引用：在牌面内容中使用
{牌堆名}。
- 放回引用：在牌面内容中使用
{%牌堆名}。
- 支持多层嵌套引用，会递归解析直到无引用为止。
- 隐藏牌堆：以
_ 开头的牌堆不会出现在抽取选择中，但仍可通过引用使用（示例：{_%隐藏牌堆}）。
抽取与概率图
- 在右侧选择要抽取的牌堆，点击“抽取牌面”查看结果。
- 概率图根据每个牌面的权重动态计算并显示比例（饼图）。
JSON 预览/编辑
- 在右侧切换“编辑模式”，直接编辑 JSON 数据。
- 点击“应用更改”将 JSON 更新到界面。
- 支持“全屏”查看与编辑，便于长数据处理。
导入导出与清除
- 导入：点击“导入”，上传 JSON 文件或直接粘贴 JSON 文本。
- 导出：点击“导出”，下载当前牌堆数据的 JSON 文件。
- 清除：点击“清除”，弹出二次确认后将清空所有牌堆数据（不可恢复）。
页面结构
- 顶部栏：“导入”、“导出”、“保存”、“清除”。
- 工具栏：“新建牌堆”、“删除牌堆”、“添加牌面”、“移除牌面”、“权重模式”、“隐藏牌堆”、“引用牌堆”。
- 左侧：牌堆列表（支持搜索）与牌堆信息（名称、牌面数量）。
- 中间：牌面编辑器（内容与权重输入、牌面排序、删除）。
- 右侧：JSON 数据（预览/编辑/全屏）、抽取预览（选择牌堆与抽取按钮）、概率分布（饼图）。
键盘与辅助功能
- 快捷键：
Alt + R 打开引用菜单。
- 提示与可访问性：关键区域具备
aria-* 属性与状态提示；界面交互有过渡与动画效果。
技术栈
- Tailwind CSS：布局与样式。
- Chart.js：概率分布图表。
- Font Awesome：图标。
- 原生 JavaScript +
localStorage：数据与交互逻辑。
项目结构
visualizing_draw/
├── index.html
├── css/
│ └── style.css
└── js/
└── main.js
数据格式示例
{
"示例牌堆": [
"牌面内容1",
"::5::权重为5的牌面",
"{另一个牌堆} - 引用（不放回）",
"{%另一个牌堆} - 引用（放回）"
],
"_隐藏牌堆示例": [
"这个牌堆在抽取列表中会被隐藏",
"但仍然可以通过{_隐藏牌堆示例}引用它"
]
}
注意事项
- 权重表达式（如
NdM±K）在抽取时计算为具体数值；无法解析时按 1 处理。
- 嵌套引用可能改变最终抽取的内容与整体概率分布。
- 清除操作不可恢复，请谨慎使用。
- 数据保存在浏览器
localStorage，清理缓存或更换设备会导致数据丢失。
- 若首次使用或无保存数据，系统会自动加载示例牌堆。
预览截图
