设计方案：菜品名字编辑 + 菜品配图选择

05/056 浏览

一、菜品名字可编辑

改动范围：仅 Leaderboard.lua 的做菜 UI 第三步面板

项设计

交互菜品预览区的名字改为 UI.TextInput，默认值 = CookingSystem.MakeDishName(...) 自动生成的名字

字数限制 1-8 个字

空值处理提交时若为空，回退到自动生成名

数据流用户输入的名字覆盖 dish.dishName 和 dish.name 字段

改动点单一：Leaderboard.lua 中第三步面板的 UI.Label（显示菜品名）→ UI.TextInput，Cook() 调用后用用户输入覆盖 dishName。

二、菜品配图选择（从 NPC 编辑器数据）

这个更复杂，分几层：

2.1 数据来源

NPC 编辑器已有完整的数据链：

本地文件：npc_sprites/{name}.json（稀疏像素格式）

云端：clientCloud key "npc_{name}"

索引：npc_sprites/index.json / 云端 "npc_index"（名称列表）

像素格式：{ "row,col": [r,g,b,a] }，gridSize 32×32

不需要新的存储设计，直接读取现有 NPC 数据。

2.2 选择器 UI

点击"菜品配图"区域

→ 弹出 NPC 图鉴选择面板（Modal）

├── 标题："选择菜品配图"

├── 网格布局（每行 3-4 个）

│ ├── [缩略图 64×64] + NPC名字

│ └── ...

├── 每个格子 = idle 动画第 1 帧的像素渲染（复用 PixelCanvas.RenderPreview）

└── 底部："取消" 按钮

缩略图渲染问题：选择器面板是 UI 组件，但像素缩略图需要 NanoVG 渲染。两种方案：

方案优点缺点

A: 纯 UI 方案 — 先将每个 NPC idle 帧导出为 PNG 临时文件，再用 UI.Image 显示标准 UI 交互，点击可靠每次打开选择器需生成临时 PNG

B: NanoVG 叠加 — UI 负责布局和点击，NanoVG 叠绘像素缩略图不需要临时文件，直接渲染需要协调 UI 与 NanoVG 层级

建议用方案 A——现有代码中 Image:SetPixel/SavePNG + nvgCreateImage 链路已验证可用（NPC 导出功能就是这么做的），用 UI.Image 展示更可靠。

8.9