UI状态面板示例

用 Alert、Chip、P 做只读说明区，输入组件仍然正常取值。

这个示例演示“展示组件 + 输入组件”混排：

Alert、Chip、P 只负责显示，不产生参数值。
Switch 和 NumberInput 会进入 values / UICurrentValue。
展示组件放进 grid 时，也要设置 layout = { span = 12 }，否则可能被挤窄。

lua

-- 引入 UI 构建库。
local ui = require("ui_builder")

-- 创建任务启用开关。
local enable = {
    Switch = {
        -- 取值名，对应 values.enable。
        name = "enable",
        -- 显示文字。
        title = "启用任务",
        -- 默认开启。
        isSelected = true,
        -- 短组件宽度：小屏两列，大屏四列。
        layout = { span = 6, lg = 3 },
    }
}

-- 创建数字输入框。
-- 参数1 "interval"：取值名，对应 values.interval。
-- 参数2 100：默认值。
-- 参数3 "间隔(ms)"：标题。
-- 参数4 10：最小值。
-- 参数5 5000：最大值。
-- 参数6 10：步进。
-- 参数7 "10~5000"：占位提示。
local interval = ui.createNumberInput("interval", 100, "间隔(ms)", 10, 5000, 10, "10~5000")
-- 数字输入框是短组件。
interval.NumberInput.layout = { span = 6, lg = 3 }

-- 创建提示 Alert。
-- 参数1 "提示"：标题。
-- 参数2 "修改参数后点击保存配置。"：说明文字。
-- 参数3 "primary"：颜色。
local tip = ui.createAlert("提示", "修改参数后点击保存配置。", "primary")
-- Alert 是展示组件，放在 grid 中必须设置整行，避免被压窄。
tip.Alert.layout = { span = 12 }

-- 创建 Chip 状态标签区域。
-- 多个 Chip 建议用 Div 包起来，方便横向排列和自动换行。
local chips = {
    Div = {
        -- flex 表示横向排列，flex-wrap 表示空间不够时自动换行，gap-2 表示间距。
        className = "flex flex-wrap items-center gap-2",
        -- Div 作为展示容器，占满整行。
        layout = { span = 12 },
        -- item 是 Div 内部子组件。
        item = {
            {
                -- Chip 参数1：显示文字；参数2：颜色；参数3：样式。
                ui.createChip("运行中", "success", "flat"),
                -- 第二个状态标签。
                ui.createChip("低延迟", "primary", "bordered"),
            }
        }
    }
}

-- 创建状态面板 Group。
local panel = {
    Group = {
        -- 分组标题。
        title = "状态面板",
        -- 分组说明。
        description = "展示组件不产生值，只有输入组件会进入 UICurrentValue。",
        -- 使用 12 栅格。
        direction = "grid",
        -- 一行 12 格。
        columns = 12,
        -- 组件间距。
        gap = 4,
        -- 分组内组件。
        item = {
            -- tip 是整行 Alert。
            { tip },
            -- chips 是整行状态标签容器。
            { chips },
            {
                {
                    P = {
                        -- P 的 text 是显示文字。
                        text = "这里适合放说明、状态、注意事项。",
                        -- className 控制文字样式。
                        className = "text-sm text-default-500",
                        -- P 是说明文字，推荐整行。
                        layout = { span = 12 },
                    }
                }
            },
            -- enable 和 interval 是输入组件，会产生值。
            { enable, interval },
        },
    }
}

-- 构建 UI。
ui.buildUI({ panel }, 1)
-- 显示 UI。
StartUI()

-- 打印输入组件的值。
function onUIChanged(values)
    -- Switch 产生布尔值。
    print("enable =", values.enable)
    -- NumberInput 产生数字。
    print("interval =", values.interval)

    -- 下面这些不会有值，因为它们是展示/布局组件。
    print("Alert =", values.Alert)
    print("Chip =", values.Chip)
    print("P =", values.P)
end

小白改法

想增加状态标签：在 chips 里面继续加 ui.createChip(...)。
想增加说明文字：复制 P = { text = "...", layout = { span = 12 } }。
不要从 values.Alert、values.Chip、values.P 取值，它们本来就是空的。

UI状态面板示例 ​

小白改法 ​

UI状态面板示例

小白改法