牌堆生成编辑器（网页）

牌堆生成与编辑工具，支持权重（含骰子表达式）、跨牌堆引用、抽取预览与概率可视化。数据可本地保存、导入导出，并提供移动端优化。

访问地址

正式版（落后更新）：单击此处访问
测试版（实时更新，建议使用）：单击此处访问

主要功能

牌堆管理：新建、删除、重命名、排序（上移/下移）、搜索。
牌面编辑：添加/删除、上下移动、内容编辑、权重模式。
权重支持：
- 普通数字权重（默认权重为 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，清理缓存或更换设备会导致数据丢失。
若首次使用或无保存数据，系统会自动加载示例牌堆。

牌堆生成编辑器（网页）

访问地址

主要功能

使用说明

创建与编辑牌堆

权重模式

引用语法

抽取与概率图

JSON 预览/编辑

导入导出与清除

页面结构

键盘与辅助功能

技术栈

项目结构

数据格式示例

注意事项

预览截图