⛏️ 为 Minecraft 服务器可视化创建 TrMenu 菜单配置
一个现代化的 Web 应用，用于可视化创建和编辑 Minecraft TrMenu 插件的菜单配置文件。无需手写 YAML，通过直观的图形界面即可完成所有配置。
本项目由AI完全编写，我只做了review的操作和重新指导
相关的代码肯定是史，但是我似乎没看到有别的类似项目？
于是我就催AI帮我设计了这么一个网页，同时也是为了帮助别人~
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 访问 http://localhost:3000- 🎨 可视化编辑 - 直观的图形界面，无需手写 YAML
- 🖼️ Minecraft 图标 - 848种物品纹理，实时预览
- 🎨 颜色选择器 - 16种颜色 + 6种格式，点击插入
- 🎯 动作选择器 - 30+种动作类型，带示例和帮助
- 📦 精灵图优化 - 单个请求加载所有图标（106KB）
- 💾 实时预览 - 即时生成 YAML，一键复制/下载
配置菜单的基本属性：
- 菜单标题：支持多行，带颜色选择器
- 标题更新间隔：动态标题刷新频率
- 最小点击延迟：防止误触
- 玩家背包显示：是否显示玩家物品栏
- 依赖变量扩展：PlaceholderAPI 支持
- 绑定命令：打开菜单的命令列表
可视化设计菜单布局：
- 点击格子选择按钮
- 使用
#创建装饰性边框 - 使用空格创建空白位置
- 查看实际物品图标预览
- 动态添加/删除行
创建和编辑菜单按钮：
- 创建按钮：自定义按钮标识符（如 A、B、item1）
- 选择材质：从 848 种 Minecraft 物品中选择
- 编辑名称：支持颜色代码和格式
- 编辑描述：多行描述，支持颜色
- 物品属性：数量、附魔光效
- 槽位配置：指定按钮位置
- 点击动作：配置各种点击类型的动作
配置高级功能：
- 菜单事件：打开/关闭时执行的动作
- 定时任务：周期性执行的任务
- 脚本编辑：JavaScript/Kether 脚本支持
获取最终配置：
- 实时预览 YAML 格式
- 一键复制到剪贴板
- 下载为 .yml 文件
- 16种 Minecraft 标准颜色（&0-&f）
- 6种格式代码：粗体(&l)、斜体(&o)、删除线(&m)、下划线(&n)、随机(&k)、重置(&r)
- 点击插入到光标位置
- 实时预览效果
- 848种 Minecraft 物品纹理
- 按类别分组（方块、工具、装备、食物等）
- 搜索功能
- 分页加载（每页20个）
30+种 TrMenu 动作类型，分为6大类：
基础动作
- command - 玩家执行命令
- console - 控制台执行命令
- op - 临时 OP 执行命令
- message - 发送消息
- broadcast - 全服广播
- actionbar - 动作栏消息
- title - 标题消息
菜单控制
- close - 关闭菜单
- open - 打开其他菜单
- refresh - 刷新菜单
音效特效
- sound - 播放音效
- particle - 播放粒子效果
传送移动
- teleport - 传送玩家
- connect - 连接到其他服务器
条件延迟
- delay - 延迟执行
- condition - 条件判断
- catch - 捕获错误
其他
- js - JavaScript 脚本
- kether - Kether 脚本
- take - 扣除物品/金币
- give - 给予物品/金币
本项目使用精灵图（Sprite Sheet）技术优化 Minecraft 物品纹理的加载性能。
性能对比：
- ❌ 旧方案：800+ 个独立请求，容易 404，加载慢
- ✅ 新方案：1 个请求，稳定可靠，加载快
优势：
- 只需 1 个 HTTP 请求（vs 800+ 个单独请求）
- 文件大小仅 106KB
- 加载速度快，适合 Vercel 部署
- 避免触发带宽限制
技术细节：
- 尺寸：512x432 像素
- 格式：PNG（支持透明度）
- 单个物品：16x16 像素
- 每行物品数：32 个
- 物品总数：848 个
- 压缩级别：9（最高）
- ✅ 所有原版物品（剑、镐、食物等）
- ✅ 所有原版方块（石头、木板、玻璃等）
- ✅ 染色玻璃（16种颜色）
- ✅ 染色玻璃板（16种颜色）
- ✅ 特殊物品（盾牌、箱子、末影箱等）
- ✅ 动画纹理第一帧（指南针、时钟、弩等）
如果需要添加新的物品纹理或更新资源：
确保 public/minecraft_assets/ 目录包含 Minecraft 1.21.4 资源文件：
public/minecraft_assets/
└── assets/
└── minecraft/
└── textures/
├── item/ # 物品纹理
├── block/ # 方块纹理
└── entity/ # 实体纹理
运行脚本复制多纹理方块和特殊物品：
npm run fix-textures这会处理：
- 多纹理方块（如草方块、TNT、工作台等）
- 特殊物品（如盾牌、箱子等）
- 动画纹理（如指南针、时钟、弩等）
运行脚本生成新的精灵图：
npm run generate-sprite输出：
public/minecraft-items-sprite.png- 更新的精灵图public/minecraft-items-map.json- 更新的映射表
启动开发服务器并检查：
npm run dev访问 http://localhost:3000 查看所有图标是否正常显示。
方法 1：从 block 文件夹复制
编辑 scripts/fix-special-items.js，在 commonBlocks 数组中添加方块名称：
const commonBlocks = [
'stone',
'grass_block',
// 添加新方块
'your_new_block',
];方法 2：从其他文件夹复制
在 multiTextureBlocks 数组中添加映射：
const multiTextureBlocks = [
{ from: 'block/your_block_top.png', to: 'your_block.png' },
];方法 3：直接放入 item 文件夹
将 16x16 PNG 文件直接放入：
public/minecraft_assets/assets/minecraft/textures/item/your_item.png
然后重新运行生成脚本。
# 开发
npm run dev # 启动开发服务器（http://localhost:3000）
npm run build # 生产构建
npm run start # 启动生产服务器
npm run lint # 代码检查
# 资源管理
# 请注意，此处的所有修复或相关操作需下载minecraft_assets并放入public文件夹
# 建议：访问 https://github.com/InventivetalentDev/minecraft-assets 下载文件
npm run fix-textures # 修复特殊纹理（草方块、TNT等）
npm run generate-sprite # 生成精灵图和映射表
npm run clean-assets # 清理原始资源（可选，节省空间）# 生产构建
npm run build
# 启动生产服务器
npm run start- 连接 GitHub 仓库
- Vercel 自动检测 Next.js 项目
- 配置：
- Framework: Next.js
- Build Command:
npm run build - Output Directory:
.next
- 点击部署
注意事项：
- ✅ 必须上传
public/minecraft-items-sprite.png和public/minecraft-items-map.json - ❌ 不要上传
public/minecraft_assets/（已在 .gitignore） - ✅ 精灵图仅 106KB，完全适合 Vercel 免费计划
- Node.js 18+
- npm 或 yarn
TrMenu-MenuGenerator/
├── app/ # Next.js 应用目录
│ ├── globals.css # 全局样式（Minecraft 风格）
│ ├── layout.tsx # 根布局
│ └── page.tsx # 主页面（精灵图预加载）
├── components/ # React 组件
│ ├── ActionSelector.tsx # 动作选择器（30+种动作）
│ ├── AdvancedEditor.tsx # 高级选项编辑器
│ ├── BasicSettings.tsx # 基础设置
│ ├── ButtonEditor.tsx # 按钮编辑器
│ ├── ButtonPicker.tsx # 按钮选择器
│ ├── ColoredTextInput.tsx # 彩色文本输入
│ ├── ColorPicker.tsx # 颜色选择器（16色+6格式）
│ ├── LayoutEditor.tsx # 布局编辑器（可视化网格）
│ ├── MaterialPicker.tsx # 材质选择器（848种物品）
│ ├── MenuBuilder.tsx # 菜单构建器（主组件）
│ ├── MinecraftSpriteIcon.tsx # 精灵图图标组件
│ ├── SpriteLoadingIndicator.tsx # 加载指示器
│ └── YamlPreview.tsx # YAML 预览
├── types/ # TypeScript 类型定义
│ └── menu.ts # 菜单数据结构
├── scripts/ # 工具脚本
│ ├── fix-special-items.js # 修复特殊纹理
│ ├── generate-sprite.js # 生成精灵图
│ └── clean-assets.js # 清理原始资源
├── public/ # 静态资源
│ ├── minecraft-items-sprite.png # 精灵图（106KB）
│ ├── minecraft-items-map.json # 坐标映射表
│ └── minecraft_assets/ # 原始资源（.gitignore）
├── .gitignore # Git 忽略配置
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
├── tailwind.config.ts # Tailwind CSS 配置
└── README.md # 本文件
- 框架: Next.js 14 + React 18
- 语言: TypeScript
- 样式: Tailwind CSS
- 图像处理: Sharp
- YAML 生成: js-yaml
- 图标: lucide-react
解决方案：
- 检查
minecraft-items-map.json中是否有该物品 - 确认物品 ID 使用小写（如
diamond_sword而非DIAMOND_SWORD） - 重新运行
npm run generate-sprite
解决方案：
- 检查浏览器控制台错误
- 确认文件路径正确：
/minecraft-items-sprite.png - 清除浏览器缓存并刷新
解决方案：
- 将 16x16 PNG 文件放入
public/minecraft_assets/assets/minecraft/textures/item/ - 文件名使用小写和下划线（如
custom_item.png） - 重新运行
npm run fix-textures和npm run generate-sprite
解决方案：
- 从 Minecraft 1.21.4 客户端提取资源
- 或从备份恢复
minecraft_assets目录 - 运行生成脚本重新创建精灵图
- 首次加载：< 2秒
- 精灵图加载：< 500ms
- 页面大小：< 500KB
- HTTP 请求：< 10个
- Lighthouse 分数：90+
- 添加更多预设模板
- 支持导入现有 YAML 配置
- 添加配置验证功能
- 支持多语言界面
- 添加撤销/重做功能
- 支持拖拽排序按钮
本项目仅供学习和个人使用。
- TrMenu 插件作者
- Minecraft 社区
- Next.js 团队
- 所有贡献者
版本: 1.0.0
Minecraft: 1.21.4
TrMenu: 3.x+
最后更新: 2026-01-31