一个类LOL带有合成树的装备商店系统文档
精华03/2775 浏览开发心得
可复用于其他需要类似功能的项目，减少沟通的积分消耗，分享给大家：
1. 整体架构equip_defs.lua 数据层 — 装备定义、合成配方、价格、属性、工具函数
equip_shop.lua UI 层 — NanoVG 渲染、交互逻辑、合成树可视化
2.2 装备分类类型值名称说明1武器—2衣甲—3头盔—4腰带—5靴子—6项链—7戒指—8饰品—2.3 阶级体系阶级颜色说明T1灰白 (180,180,180)基础装备，无配方，直接购买T2蓝色 (80,140,255)由 T1 合成，有配方T3金色 (255,180,30)由 T1+T2 合成，有被动效果T0红色 (200,50,50)特殊装备
2.5 工具函数函数参数返回说明GetRecipeCost(equipId)装备IDnumber递归计算合成总价（所有基础材料价格之和）CanCraft(equipId, ownedItems)装备ID, 背包物品数组boolean检查背包中是否有足够的配方材料
3. UI 层功能拆解（equip_shop.lua）3.1 分类标签栏（左侧）
- 9 个标签：全部 + 8 种装备类型
- 选中标签左边有紫色竖线指示器
- 切换标签时重置滚动位置和选中状态
- 按类型过滤商品网格
- 布局：4 列网格，单元格高 42px，间距 3px
- 每个单元格显示：
- 选中态：金色边框 + 深色背景
- 滚动：
- 布局：4 列网格，单元格高 42px，间距 3px
- 每个单元格显示：
- 选中态：金色边框 + 深色背景
- 滚动：
- 递归树形结构：从选中装备向下展开到所有基础材料
- 布局算法：
- 连接线：父节点底部 → 中间折线 → 子节点顶部
- 节点显示：
- 所有权标记：
- 布局：4 列网格，单元格高 42px，间距 3px
- 每个单元格显示：
- 选中态：金色边框 + 深色背景
- 滚动：
- 递归树形结构：从选中装备向下展开到所有基础材料
- 布局算法：
- 连接线：父节点底部 → 中间折线 → 子节点顶部
- 节点显示：
- 所有权标记：
- 递归树形结构：从选中装备向下展开到所有基础材料
- 布局算法：
- 连接线：父节点底部 → 中间折线 → 子节点顶部
- 节点显示：
- 所有权标记：
- 当选中的装备有 upgradesTo 字段时，在合成树上方显示
- 点击目标装备名可跳转到该装备的合成树
- 实现了从低阶到高阶的反向浏览
- 递归树形结构：从选中装备向下展开到所有基础材料
- 布局算法：
- 连接线：父节点底部 → 中间折线 → 子节点顶部
- 节点显示：
- 所有权标记：
- 当选中的装备有 upgradesTo 字段时，在合成树上方显示
- 点击目标装备名可跳转到该装备的合成树
- 实现了从低阶到高阶的反向浏览
- 当选中的装备有 upgradesTo 字段时，在合成树上方显示
- 点击目标装备名可跳转到该装备的合成树
- 实现了从低阶到高阶的反向浏览
- 装备名 + 阶级（阶级颜色）
- 属性行：横排显示所有属性加成
- 被动效果（橙色，支持自动换行）
- 价格信息：
设计模式总结（可复用）模式说明点击矩形注册绘制时 addClick() 注册可点击区域，点击时反向遍历命中测试，解耦渲染和交互递归合成树buildTree() → calcTreeWidth() → layoutTree() 三步完成任意深度树形布局消耗式所有权匹配自底向上遍历树，每匹配一个背包物品就减少计数，避免重复标记剩余费用计算复制所有权计数，递归扣除已拥有材料，得出实际还需金额分类过滤 + 滚动按类型过滤 → 重建 ID 列表 → 网格渲染 + 裁剪不可见单元格暗黑奇幻配色方案深紫背景 + 阶级色系（灰/蓝/金）+ 金色金币 + 绿色拥有标记