【前端界面】婚戒锻造台：材料预览与成功率刻度的界面实现

实战应用：用在哪里

婚戒锻造消耗三枚宝石与一枚戒托，成功率随材料品质浮动。锻造台界面要完成三件事：材料格实时预览、成功率环动态刷新、锻造结果回执提示。界面全部用前端控件搭建，数据经网络消息与服务端互通。面板整体按分辨率适配，低端机上隐藏进度环动画只保留数值文本，保证操作流畅。

锻造台界面的控件搭建

面板用 Node 承载，三个 ItemBox 展示材料槽，标题文案与锻造按钮依次排布。按钮按下后收集材料格数据发给服务端，界面在回执到达前锁定按钮防连点。

local panel = GUI:Node_Create(nil, "ForgePanel", 0, 0)
for i = 1, 3 do
    GUI:ItemBox_Create(panel, "Mat" .. i, 40 + i * 90, 120)
end
local btn = GUI:Button_Create(panel, "ForgeBtn", 160, 260, "ui/forbtn")
GUI:Button_loadTextures(btn, "ui/forbtn_n", "ui/forbtn_p", "ui/forbtn_d")

成功率刻度与结果回执

成功率用进度环表达，服务端返回概率后指针平滑转动。回执走 RegisterLuaNetMsg，成功换金色文案并播放音效，失败给灰色文案同时提示当前保底进度。

local ring = GUI:ProgressTimer_Create(panel, "RateRing", 320, 150)
SL:RegisterLuaNetMsg(function(sid, a, b, c, str)
    GUI:ProgressTimer_progressTo(ring, a * 3.6, 0.5)
    if b == 1 then
        SL:ShowSystemTips("锻造成功，婚戒已绑定双方姓名")
        SL:PlayAudio("ui_forge_ok")
    else
        SL:ShowSystemTips("锻造未成，保底进度加一")
    end
end, 9217)

验证与监控

三材料格的空格、满格、混品质各验一轮；成功率环从零到满转一遍核对刻度角度与动画时长；断线重连后回执消息不丢。埋点统计界面打开到锻造点击的转化率，卡点集中在材料格刷新缓慢的场景。不同分辨率下按钮与材料格的锚点各截一轮图核对，避免机型适配错位；锻造请求发出后按钮置灰的时长与回执超时上限保持一致，超时即解锁并提示重试。

踩坑记录

ItemBox 的格子被拖拽后会改变父节点，重开界面时旧控件残留，每次进入先移除再重建。ProgressTimer 的角度参数范围是零到三百六十，概率值直接传入只画小半圈，要乘 3.6 换算。回执消息号与其他界面撞号时出现双弹提示，消息号统一登记在常量表里管理。按钮禁用态贴图忘记配置，材料不足时按钮看着能点，点了没有反应被当成卡死投诉。音效播放没有做通道占用处理，连续锻造时音效叠音发炸，播放前补了一个通道检测。