1301 lines
38 KiB
Lua
1301 lines
38 KiB
Lua
---@type RuntimeUi
|
||
local runtime_ui = runtime.import("runtime_ui")
|
||
---@type RuntimeWidgets
|
||
local widgets = runtime.import("runtime_widgets")
|
||
local theme = runtime.import("theme")
|
||
local styles = runtime.import("styles")
|
||
local state = runtime.import("state")
|
||
local examples = runtime.import("examples")
|
||
local i18n = runtime.import("i18n")
|
||
|
||
---@class ShowcaseUi
|
||
local ui = {}
|
||
|
||
local base_preview_ids = {
|
||
"sample_rect",
|
||
"sample_circle",
|
||
"sample_line",
|
||
"sample_image_node",
|
||
"sample_sprite_node",
|
||
"sample_progress",
|
||
"widget_progress_label",
|
||
"widget_progress"
|
||
}
|
||
|
||
local text_preview_ids = {
|
||
"text_plain_title",
|
||
"text_plain_body",
|
||
"text_style_badge",
|
||
"text_rich_note"
|
||
}
|
||
|
||
local button_preview_ids = {
|
||
"button_hint",
|
||
"button_primary",
|
||
"button_secondary",
|
||
"button_disabled",
|
||
"button_state_text"
|
||
}
|
||
|
||
local button_image_preview_ids = {
|
||
"image_button_hint",
|
||
"image_button_normal",
|
||
"image_button_toggle",
|
||
"image_button_disabled",
|
||
"image_button_state_text"
|
||
}
|
||
|
||
local sprite_preview_ids = {
|
||
"sprite_image_demo",
|
||
"sprite_sprite_demo",
|
||
"sprite_frame_demo",
|
||
"sprite_label_demo"
|
||
}
|
||
|
||
local layout_preview_ids = {
|
||
"layout_canvas",
|
||
"layout_chip_1",
|
||
"layout_chip_2",
|
||
"layout_chip_3",
|
||
"layout_chip_4",
|
||
"layout_label"
|
||
}
|
||
|
||
local radio_preview_ids = {
|
||
"radio_title",
|
||
"radio_audio_dot",
|
||
"radio_audio_label",
|
||
"radio_spine_dot",
|
||
"radio_spine_label",
|
||
"radio_lua_dot",
|
||
"radio_lua_label",
|
||
"radio_value_text"
|
||
}
|
||
|
||
local list_preview_ids = {
|
||
"list_panel",
|
||
"list_row_1",
|
||
"list_row_2",
|
||
"list_row_3",
|
||
"list_row_4",
|
||
"list_row_5",
|
||
"list_row_1_text",
|
||
"list_row_2_text",
|
||
"list_row_3_text",
|
||
"list_row_4_text",
|
||
"list_row_5_text",
|
||
"list_value_text"
|
||
}
|
||
|
||
local particle_preview_ids = {
|
||
"particle_burst",
|
||
"particle_trail",
|
||
"particle_snow",
|
||
"particle_label"
|
||
}
|
||
|
||
local responsive_preview_ids = {
|
||
"responsive_info",
|
||
"responsive_device",
|
||
"responsive_sidebar",
|
||
"responsive_content"
|
||
}
|
||
|
||
---@return table
|
||
local function metrics()
|
||
local screen_w = theme.screen_width
|
||
local screen_h = theme.screen_height
|
||
local margin = 20
|
||
local gap = 16
|
||
local header_h = 82
|
||
local status_h = 30
|
||
local content_h = screen_h - header_h - status_h - margin
|
||
local compact = screen_w < 640
|
||
local menu_w = compact and 188 or 220
|
||
local detail_w = screen_w - margin * 2 - gap - menu_w
|
||
local content_y = header_h
|
||
local preview_h = 148
|
||
local action_y = content_y + content_h - preview_h - 54
|
||
local preview_y = content_y + content_h - preview_h - 10
|
||
local code_h = action_y - content_y - 150
|
||
if code_h < 128 then
|
||
code_h = 128
|
||
end
|
||
|
||
return {
|
||
screen_w = screen_w,
|
||
screen_h = screen_h,
|
||
margin = margin,
|
||
gap = gap,
|
||
compact = compact,
|
||
menu_x = margin,
|
||
menu_y = content_y,
|
||
menu_w = menu_w,
|
||
detail_x = margin + menu_w + gap,
|
||
detail_y = content_y,
|
||
detail_w = detail_w,
|
||
content_h = content_h,
|
||
action_y = action_y,
|
||
preview_y = preview_y,
|
||
preview_h = preview_h,
|
||
code_h = code_h,
|
||
status_y = screen_h - status_h - 8
|
||
}
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@return boolean
|
||
local function preview_mode(example)
|
||
if example.id == "text_demo" then
|
||
return "text"
|
||
end
|
||
if example.id == "buttons" then
|
||
return "buttons"
|
||
end
|
||
if example.id == "button_images" then
|
||
return "button_images"
|
||
end
|
||
if example.id == "sprites" then
|
||
return "sprites"
|
||
end
|
||
if example.id == "layout_demo" then
|
||
return "layout"
|
||
end
|
||
if example.id == "radio_group" then
|
||
return "radio"
|
||
end
|
||
if example.id == "list_view" then
|
||
return "list"
|
||
end
|
||
if example.id == "particles" then
|
||
return "particle"
|
||
end
|
||
if example.id == "responsive" then
|
||
return "responsive"
|
||
end
|
||
return "base"
|
||
end
|
||
|
||
---@param nodes RuntimeNode[]
|
||
---@param text string
|
||
---@param y number
|
||
---@param m table
|
||
local function append_menu_group(nodes, text, y, m)
|
||
table.insert(nodes, widgets.label("group_" .. tostring(y), {
|
||
text = text,
|
||
x = 16,
|
||
y = y,
|
||
w = m.menu_w - 32,
|
||
h = 18,
|
||
parent = "example_list_panel",
|
||
color = theme.muted,
|
||
fontSize = 11,
|
||
layer = 30
|
||
}))
|
||
end
|
||
|
||
---@param nodes RuntimeNode[]
|
||
---@param example ShowcaseExample
|
||
---@param y number
|
||
---@param m table
|
||
local function append_menu_item(nodes, example, y, m)
|
||
local selected = example.id == state.selected_example
|
||
table.insert(nodes, widgets.list_item("example_" .. example.id, {
|
||
text = i18n.example_label(example),
|
||
x = 14,
|
||
y = y,
|
||
w = m.menu_w - 28,
|
||
h = 27,
|
||
handler = "select_example",
|
||
parent = "example_list_panel",
|
||
selected = selected,
|
||
activeColor = theme.primary,
|
||
inactiveColor = "#ff1e293b",
|
||
radius = 10,
|
||
fontSize = 11,
|
||
layer = 31
|
||
}))
|
||
end
|
||
|
||
---@param selected ShowcaseExample
|
||
---@param m table
|
||
---@return RuntimeNode[]
|
||
local function detail_action_nodes(selected, m)
|
||
local actions = {}
|
||
for index = 1, 3 do
|
||
local action = selected.actions[index]
|
||
actions[index] = {
|
||
id = "detail_action_" .. index,
|
||
text = action ~= nil and i18n.action_text(action) or "",
|
||
handler = action ~= nil and action.handler or "noop",
|
||
visible = action ~= nil,
|
||
color = index == 1 and "#ff2563eb" or "#ff334155"
|
||
}
|
||
end
|
||
return widgets.action_row("detail_action", actions, {
|
||
x = m.detail_x + 20,
|
||
y = m.action_y,
|
||
width = m.detail_w - 40,
|
||
itemHeight = 34,
|
||
gap = 12,
|
||
radius = 10,
|
||
fontSize = 12,
|
||
layer = 35
|
||
})
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@return string
|
||
local function detail_body(example)
|
||
if state.detail_tab == "params" then
|
||
return i18n.example_params(example)
|
||
end
|
||
return example.code
|
||
end
|
||
|
||
---@return string
|
||
local function detail_copy_text()
|
||
if state.detail_tab == "params" then
|
||
return i18n.t("copy_params")
|
||
end
|
||
return i18n.t("copy_code")
|
||
end
|
||
|
||
---@param text string
|
||
---@return integer
|
||
local function line_count(text)
|
||
local value = text or ""
|
||
local count = 1
|
||
local start = 1
|
||
while true do
|
||
local index = string.find(value, "\n", start, true)
|
||
if index == nil then
|
||
return count
|
||
end
|
||
count = count + 1
|
||
start = index + 1
|
||
end
|
||
end
|
||
|
||
local detail_text_y
|
||
|
||
local detail_padding_left = 14
|
||
local detail_padding_top = 12
|
||
local detail_padding_right = 14
|
||
local detail_padding_bottom = 12
|
||
|
||
---@param m table
|
||
---@return number
|
||
local function detail_viewport_width(m)
|
||
return m.detail_w - 40 - detail_padding_left - detail_padding_right
|
||
end
|
||
|
||
---@param m table
|
||
---@return number
|
||
local function detail_viewport_height(m)
|
||
return m.code_h + 18 - detail_padding_top - detail_padding_bottom
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@return number
|
||
local function detail_text_height(example)
|
||
return line_count(detail_body(example)) * 16 + 8
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@param m table
|
||
---@return number
|
||
local function detail_content_height(example, m)
|
||
local estimated = detail_text_y(example, m) + detail_text_height(example) + 18
|
||
local viewport_h = detail_viewport_height(m)
|
||
if estimated < viewport_h then
|
||
return viewport_h
|
||
end
|
||
return estimated
|
||
end
|
||
|
||
---@param m table
|
||
---@return number
|
||
local function detail_content_width(m)
|
||
local viewport_w = detail_viewport_width(m)
|
||
if state.detail_tab == "params" then
|
||
return viewport_w
|
||
end
|
||
if line_count(detail_body(examples.find(state.selected_example))) <= 7 then
|
||
return viewport_w
|
||
end
|
||
return viewport_w * 1.45
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@param m table
|
||
---@return number
|
||
local function detail_text_width(example, m)
|
||
local viewport_w = detail_viewport_width(m)
|
||
if state.detail_tab == "params" then
|
||
return viewport_w * 0.78
|
||
end
|
||
local content_w = detail_content_width(m) - 28
|
||
local centered_w = viewport_w * 0.78
|
||
if line_count(detail_body(example)) <= 7 then
|
||
return centered_w
|
||
end
|
||
return content_w
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@param m table
|
||
---@return number
|
||
local function detail_text_x(example, m)
|
||
local viewport_w = detail_viewport_width(m)
|
||
local width = detail_text_width(example, m)
|
||
if state.detail_tab == "code" and width > viewport_w then
|
||
return 14
|
||
end
|
||
local x = (viewport_w - width) / 2
|
||
if x < 0 then
|
||
return 0
|
||
end
|
||
return x
|
||
end
|
||
|
||
---@param example ShowcaseExample
|
||
---@param m table
|
||
---@return number
|
||
detail_text_y = function(example, m)
|
||
return 0
|
||
end
|
||
|
||
---@return string
|
||
local function responsive_text()
|
||
local scale = state.viewport_scale or 1
|
||
local width = state.screen_width or theme.screen_width
|
||
local height = state.screen_height or theme.screen_height
|
||
local viewport_w = state.viewport_width or theme.screen_width
|
||
local viewport_h = state.viewport_height or theme.screen_height
|
||
return i18n.t("responsive_design") .. ": " .. tostring(theme.screen_width) .. "x" .. tostring(theme.screen_height)
|
||
.. " | " .. i18n.t("responsive_screen") .. ": " .. tostring(math.floor(width)) .. "x" .. tostring(math.floor(height))
|
||
.. " | " .. i18n.t("responsive_viewport") .. ": " .. tostring(math.floor(viewport_w)) .. "x" .. tostring(math.floor(viewport_h))
|
||
.. " @" .. string.format("%.2f", scale)
|
||
end
|
||
|
||
---@return number
|
||
local function responsive_device_width()
|
||
if state.responsive_mode == "phone" then
|
||
return 92
|
||
end
|
||
if state.responsive_mode == "tablet" then
|
||
return 124
|
||
end
|
||
return 148
|
||
end
|
||
|
||
---@param nodes RuntimeNode[]
|
||
---@param selected ShowcaseExample
|
||
local function append_preview_nodes(nodes, selected)
|
||
local mode = preview_mode(selected)
|
||
local base_visible = mode == "base"
|
||
local text_visible = mode == "text"
|
||
local button_visible = mode == "buttons"
|
||
local button_image_visible = mode == "button_images"
|
||
local sprite_visible = mode == "sprites"
|
||
local layout_visible = mode == "layout"
|
||
local radio_visible = mode == "radio"
|
||
local list_visible = mode == "list"
|
||
local particle_visible = mode == "particle"
|
||
local responsive_visible = mode == "responsive"
|
||
|
||
table.insert(nodes, runtime_ui.rect("sample_rect", 16, 48, 70, 44, {
|
||
parent = "preview_panel",
|
||
color = theme.primary,
|
||
radius = 8,
|
||
layer = 25,
|
||
visible = base_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.circle("sample_circle", 104, 42, 54, {
|
||
parent = "preview_panel",
|
||
color = theme.success,
|
||
interactive = true,
|
||
onTap = "demo_anim",
|
||
layer = 25,
|
||
visible = base_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.line("sample_line", 176, 70, 82, 0, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
strokeWidth = 4,
|
||
layer = 25,
|
||
visible = base_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.image("sample_image_node", "sample_image", 278, 42, 48, 48, {
|
||
parent = "preview_panel",
|
||
layer = 25,
|
||
visible = base_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.sprite("sample_sprite_node", "sample_image", 340, 42, 48, 48, {
|
||
parent = "preview_panel",
|
||
layer = 25,
|
||
visible = base_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.progress("sample_progress", 16, 112, 180, 16, state.progress, {
|
||
parent = "preview_panel",
|
||
color = theme.success,
|
||
radius = 8,
|
||
layer = 25,
|
||
visible = base_visible
|
||
}))
|
||
local progress_nodes = widgets.labeled_progress("widget_progress", "Widget Progress", 220, 98, 170, 12, state.progress, {
|
||
parent = "preview_panel",
|
||
labelStyle = { parent = "preview_panel", color = theme.muted, fontSize = 12, layer = 25, visible = base_visible },
|
||
color = theme.primary,
|
||
layer = 25,
|
||
visible = base_visible
|
||
})
|
||
runtime_ui.append_all(nodes, progress_nodes)
|
||
|
||
table.insert(nodes, runtime_ui.text("text_plain_title", state.text_variant == "plain" and "Text: 纯文本组件" or "Text: 样式已切换", 16, 46, 260, 24, {
|
||
parent = "preview_panel",
|
||
color = state.text_variant == "plain" and theme.text or theme.warning,
|
||
fontSize = state.text_variant == "plain" and 18 or 20,
|
||
layer = 25,
|
||
visible = text_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("text_plain_body", "字段：text / color / fontSize / alpha", 16, 78, 310, 20, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 12,
|
||
layer = 25,
|
||
visible = text_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("text_style_badge", 16, 108, 92, 24, {
|
||
parent = "preview_panel",
|
||
color = state.text_variant == "plain" and theme.primary or theme.purple,
|
||
radius = 8,
|
||
layer = 25,
|
||
visible = text_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("text_rich_note", "富文本：当前未支持 richText/spans", 124, 111, 240, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
fontSize = 12,
|
||
layer = 26,
|
||
visible = text_visible
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.text("button_hint", "button: text + background + onTap", 16, 44, 240, 20, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 12,
|
||
layer = 25,
|
||
visible = button_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.button("button_primary", "主按钮", 16, 76, 108, 34, "demo_button_primary", {
|
||
parent = "preview_panel",
|
||
color = state.button_active and theme.primary or "#ff475569",
|
||
radius = 10,
|
||
fontSize = 13,
|
||
layer = 26,
|
||
visible = button_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.button("button_secondary", "次按钮", 138, 76, 108, 34, "demo_button_primary", {
|
||
parent = "preview_panel",
|
||
color = "#ff334155",
|
||
radius = 10,
|
||
fontSize = 13,
|
||
layer = 26,
|
||
visible = button_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.button("button_disabled", "禁用态", 260, 76, 108, 34, "noop", {
|
||
parent = "preview_panel",
|
||
color = "#ff1f2937",
|
||
radius = 10,
|
||
fontSize = 13,
|
||
alpha = 0.55,
|
||
interactive = false,
|
||
layer = 26,
|
||
visible = button_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("button_state_text", state.button_active and "状态：可点击" or "状态：已置灰", 16, 118, 220, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
fontSize = 12,
|
||
layer = 26,
|
||
visible = button_visible
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.text("image_button_hint", "button image: normal / pressed / disabled", 16, 44, 300, 20, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 12,
|
||
layer = 25,
|
||
visible = button_image_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.button("image_button_normal", {
|
||
text = "按住 Pressed",
|
||
x = 16,
|
||
y = 76,
|
||
w = 116,
|
||
h = 40,
|
||
handler = "demo_button_image_tap",
|
||
parent = "preview_panel",
|
||
asset = "button_normal",
|
||
pressedAsset = "button_pressed",
|
||
disabledAsset = "button_disabled",
|
||
radius = 10,
|
||
fontSize = 12,
|
||
layer = 26,
|
||
visible = button_image_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.button("image_button_toggle", {
|
||
text = state.button_image_enabled and "可切换" or "已禁用",
|
||
x = 144,
|
||
y = 76,
|
||
w = 116,
|
||
h = 40,
|
||
handler = "demo_button_image_tap",
|
||
parent = "preview_panel",
|
||
asset = "button_normal",
|
||
pressedAsset = "button_pressed",
|
||
disabledAsset = "button_disabled",
|
||
radius = 10,
|
||
fontSize = 12,
|
||
interactive = state.button_image_enabled,
|
||
layer = 26,
|
||
visible = button_image_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.button("image_button_disabled", {
|
||
text = "Disabled",
|
||
x = 272,
|
||
y = 76,
|
||
w = 116,
|
||
h = 40,
|
||
handler = "noop",
|
||
parent = "preview_panel",
|
||
asset = "button_normal",
|
||
pressedAsset = "button_pressed",
|
||
disabledAsset = "button_disabled",
|
||
radius = 10,
|
||
fontSize = 12,
|
||
interactive = false,
|
||
layer = 26,
|
||
visible = button_image_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("image_button_state_text", state.button_image_enabled and "中间按钮：interactive=true" or "中间按钮：interactive=false，显示 disabledAsset", 16, 122, 360, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
fontSize = 12,
|
||
layer = 26,
|
||
visible = button_image_visible
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.image("sprite_image_demo", "sample_image", 24, 54, 64, 64, {
|
||
parent = "preview_panel",
|
||
layer = 25,
|
||
visible = sprite_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.sprite("sprite_sprite_demo", "sample_image", 118, 54, 64, 64, {
|
||
parent = "preview_panel",
|
||
layer = 26,
|
||
visible = sprite_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("sprite_frame_demo", 212, 54, 64, 64, {
|
||
parent = "preview_panel",
|
||
color = state.sprite_variant == "image" and theme.primary or theme.purple,
|
||
radius = 8,
|
||
layer = 25,
|
||
visible = sprite_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("sprite_label_demo", "image / sprite 都通过 manifest key 加载", 20, 120, 300, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 12,
|
||
layer = 26,
|
||
visible = sprite_visible
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.panel("layout_canvas", 16, 42, 360, 86, {
|
||
parent = "preview_panel",
|
||
color = "#ff111827",
|
||
radius = 10,
|
||
layer = 24,
|
||
visible = layout_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("layout_chip_1", 34, 70, 58, 28, {
|
||
parent = "preview_panel",
|
||
color = theme.primary,
|
||
radius = 8,
|
||
layer = 26,
|
||
visible = layout_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("layout_chip_2", 108, 70, 58, 28, {
|
||
parent = "preview_panel",
|
||
color = theme.success,
|
||
radius = 8,
|
||
layer = 26,
|
||
visible = layout_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("layout_chip_3", 182, 70, 58, 28, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
radius = 8,
|
||
layer = 26,
|
||
visible = layout_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("layout_chip_4", 256, 70, 58, 28, {
|
||
parent = "preview_panel",
|
||
color = theme.purple,
|
||
radius = 8,
|
||
layer = 26,
|
||
visible = layout_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("layout_label", "layout.row：gap + align + margin", 28, 112, 280, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 12,
|
||
layer = 26,
|
||
visible = layout_visible
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.text("radio_title", "RadioGroup: Lua 组合单选项", 16, 44, 260, 20, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 12,
|
||
layer = 25,
|
||
visible = radio_visible
|
||
}))
|
||
local radio_options = {
|
||
{ key = "audio", label = "Audio", y = 72 },
|
||
{ key = "spine", label = "Spine", y = 96 },
|
||
{ key = "Lua", label = "Lua", y = 120 }
|
||
}
|
||
for _, option in ipairs(radio_options) do
|
||
local selected_radio = state.radio_selected == option.key
|
||
table.insert(nodes, runtime_ui.circle("radio_" .. string.lower(option.key) .. "_dot", 18, option.y, 14, {
|
||
parent = "preview_panel",
|
||
color = selected_radio and theme.primary or "#ff475569",
|
||
layer = 25,
|
||
visible = radio_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("radio_" .. string.lower(option.key) .. "_label", option.label, 42, option.y - 2, 120, 18, {
|
||
parent = "preview_panel",
|
||
color = selected_radio and theme.text or theme.muted,
|
||
fontSize = 12,
|
||
layer = 25,
|
||
visible = radio_visible
|
||
}))
|
||
end
|
||
table.insert(nodes, runtime_ui.text("radio_value_text", "当前选择：" .. state.radio_selected, 190, 96, 160, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
fontSize = 12,
|
||
layer = 25,
|
||
visible = radio_visible
|
||
}))
|
||
|
||
local list_horizontal = state.list_axis == "horizontal"
|
||
table.insert(nodes, runtime_ui.list_view("list_panel", 16, 42, 320, 72, {
|
||
parent = "preview_panel",
|
||
color = "#ff111827",
|
||
radius = 10,
|
||
contentWidth = list_horizontal and 650 or 430,
|
||
contentHeight = list_horizontal and 90 or 150,
|
||
scrollX = state.list_scroll_x,
|
||
scrollY = state.list_scroll_y,
|
||
virtualized = true,
|
||
cacheExtent = 24,
|
||
inertia = true,
|
||
onScroll = "demo_list_scrolled",
|
||
scrollbarThumbColor = theme.warning,
|
||
scrollbarTrackColor = "#33475569",
|
||
scrollbarThickness = 6,
|
||
layer = 24,
|
||
visible = list_visible
|
||
}))
|
||
local list_items = {
|
||
{ key = "Lua", label = "Lua 脚本层" },
|
||
{ key = "Runtime", label = "Runtime 协议层" },
|
||
{ key = "Flame", label = "Flame 渲染层" },
|
||
{ key = "Diff", label = "Diff 更新流" },
|
||
{ key = "Command", label = "Command 动作流" }
|
||
}
|
||
for index, item in ipairs(list_items) do
|
||
local selected_item = state.list_selected == item.key
|
||
local row_x = list_horizontal and (8 + (index - 1) * 126) or 8
|
||
local row_y = list_horizontal and 18 or (8 + (index - 1) * 28)
|
||
local row_w = list_horizontal and 116 or 292
|
||
table.insert(nodes, runtime_ui.button("list_row_" .. index, "", row_x, row_y, row_w, 24, "demo_list_pick_" .. index, {
|
||
parent = "list_panel",
|
||
color = selected_item and theme.primary or "#ff1e293b",
|
||
radius = 7,
|
||
layer = 25,
|
||
visible = list_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("list_row_" .. index .. "_text", item.label, 12, 4, 180, 16, {
|
||
parent = "list_row_" .. index,
|
||
color = theme.text,
|
||
fontSize = 11,
|
||
textAlign = "left",
|
||
layer = 26,
|
||
visible = list_visible
|
||
}))
|
||
end
|
||
table.insert(nodes, runtime_ui.text("list_value_text", state.list_axis .. " scrollX=" .. tostring(state.list_scroll_x) .. " scrollY=" .. tostring(state.list_scroll_y), 16, 120, 300, 16, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
fontSize = 11,
|
||
layer = 26,
|
||
visible = list_visible
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.particle("particle_burst", 32, 42, 120, 92, {
|
||
parent = "preview_panel",
|
||
preset = "burst",
|
||
count = 42,
|
||
duration = 0.85,
|
||
color = "#ffffcc33",
|
||
colorTo = "#00ffcc33",
|
||
radius = 2.8,
|
||
speedMin = 60,
|
||
speedMax = 180,
|
||
gravityY = 90,
|
||
spread = 360,
|
||
autoRemove = false,
|
||
layer = 26,
|
||
visible = particle_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.particle("particle_trail", 168, 46, 120, 86, {
|
||
parent = "preview_panel",
|
||
preset = "trail",
|
||
count = 24,
|
||
duration = 0.7,
|
||
color = "#ff38bdf8",
|
||
radius = 2.2,
|
||
speedMin = 20,
|
||
speedMax = 80,
|
||
autoRemove = false,
|
||
layer = 26,
|
||
visible = particle_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.particle("particle_snow", 304, 34, 120, 104, {
|
||
parent = "preview_panel",
|
||
preset = "snow",
|
||
count = 56,
|
||
duration = 8,
|
||
color = "#ccffffff",
|
||
radius = 1.5,
|
||
autoRemove = false,
|
||
fadeOut = false,
|
||
layer = 26,
|
||
visible = particle_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("particle_label", "particle: burst / trail / snow", 16, 120, 280, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.warning,
|
||
fontSize = 11,
|
||
layer = 27,
|
||
visible = particle_visible
|
||
}))
|
||
|
||
local width = responsive_device_width()
|
||
table.insert(nodes, runtime_ui.text("responsive_info", responsive_text(), 16, 112, 390, 18, {
|
||
parent = "preview_panel",
|
||
color = theme.muted,
|
||
fontSize = 10,
|
||
layer = 26,
|
||
visible = responsive_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("responsive_device", 172, 44, width, 62, {
|
||
parent = "preview_panel",
|
||
color = "#ff1d4ed8",
|
||
radius = 10,
|
||
layer = 26,
|
||
visible = responsive_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("responsive_sidebar", 184, 56, width * 0.26, 38, {
|
||
parent = "preview_panel",
|
||
color = theme.primary,
|
||
radius = 6,
|
||
layer = 27,
|
||
visible = responsive_visible
|
||
}))
|
||
table.insert(nodes, runtime_ui.rect("responsive_content", 192 + width * 0.26, 56, width * 0.56, 38, {
|
||
parent = "preview_panel",
|
||
color = theme.success,
|
||
radius = 6,
|
||
layer = 27,
|
||
visible = responsive_visible
|
||
}))
|
||
end
|
||
|
||
---@return RuntimeNode[]
|
||
function ui.create_nodes()
|
||
local nodes = {}
|
||
local selected = examples.find(state.selected_example)
|
||
local m = metrics()
|
||
|
||
table.insert(nodes, runtime_ui.rect("app_bg", 0, 0, theme.screen_width, theme.screen_height, {
|
||
color = theme.background,
|
||
layer = 0
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("app_title", i18n.t("app_title"), 24, 18, 360, 34, styles.title))
|
||
table.insert(nodes, runtime_ui.text("app_subtitle", i18n.t("app_subtitle"), 24, 52, 660, 24, styles.label))
|
||
|
||
table.insert(nodes, runtime_ui.panel("example_list_panel", m.menu_x, m.menu_y, m.menu_w, m.content_h, styles.card))
|
||
table.insert(nodes, widgets.section_title("example_list_title", {
|
||
text = i18n.t("examples_title"),
|
||
x = 16,
|
||
y = 14,
|
||
w = m.menu_w - 32,
|
||
h = 24,
|
||
parent = "example_list_panel",
|
||
color = theme.text,
|
||
fontSize = 20,
|
||
layer = 25
|
||
}))
|
||
local menu_y = 44
|
||
local last_group = nil
|
||
for _, example in ipairs(examples.all()) do
|
||
local group = i18n.example_group(example)
|
||
if group ~= last_group then
|
||
append_menu_group(nodes, group, menu_y, m)
|
||
menu_y = menu_y + 15
|
||
last_group = group
|
||
end
|
||
append_menu_item(nodes, example, menu_y, m)
|
||
menu_y = menu_y + 32
|
||
end
|
||
|
||
table.insert(nodes, runtime_ui.panel("detail_panel", m.detail_x, m.detail_y, m.detail_w, m.content_h, styles.card))
|
||
runtime_ui.append_all(nodes, widgets.panel_header("detail", {
|
||
eyebrow = i18n.example_group(selected) .. " / " .. i18n.example_field(selected, "category"),
|
||
title = i18n.example_field(selected, "title"),
|
||
summary = i18n.example_field(selected, "summary"),
|
||
x = 20,
|
||
y = 16,
|
||
w = m.detail_w - 40,
|
||
parent = "detail_panel",
|
||
layer = 25,
|
||
gap = 4,
|
||
eyebrowHeight = 20,
|
||
titleHeight = 30,
|
||
summaryHeight = 24,
|
||
eyebrowId = "detail_category",
|
||
titleId = "detail_title",
|
||
summaryId = "detail_summary",
|
||
eyebrowStyle = { color = theme.primary, fontSize = 13 },
|
||
titleStyle = { color = theme.text, fontSize = 21 },
|
||
summaryStyle = { color = theme.muted, fontSize = 12 }
|
||
}))
|
||
|
||
runtime_ui.append_all(nodes, widgets.tabs("detail_tab", {
|
||
{ id = "detail_tab_code", key = "code", text = i18n.t("tab_code"), handler = "detail_tab_code" },
|
||
{ id = "detail_tab_params", key = "params", text = i18n.t("tab_params"), handler = "detail_tab_params" }
|
||
}, {
|
||
x = m.detail_x + 20,
|
||
y = m.detail_y + 104,
|
||
itemWidth = 72,
|
||
itemHeight = 24,
|
||
gap = 6,
|
||
selected = state.detail_tab,
|
||
activeColor = theme.primary,
|
||
inactiveColor = "#ff334155",
|
||
radius = 8,
|
||
fontSize = 11,
|
||
interactive = true,
|
||
layer = 90
|
||
}))
|
||
table.insert(nodes, widgets.text_button("detail_copy", {
|
||
text = detail_copy_text(),
|
||
x = m.detail_x + m.detail_w - 116,
|
||
y = m.detail_y + 104,
|
||
w = 96,
|
||
h = 24,
|
||
handler = "copy_detail",
|
||
color = "#ff475569",
|
||
radius = 8,
|
||
fontSize = 11,
|
||
interactive = true,
|
||
layer = 90
|
||
}))
|
||
|
||
table.insert(nodes, runtime_ui.list_view("code_panel", m.detail_x + 20, m.detail_y + 132, m.detail_w - 40, m.code_h + 18, {
|
||
color = "#ff020617",
|
||
radius = 12,
|
||
contentWidth = detail_content_width(m),
|
||
contentHeight = detail_content_height(selected, m),
|
||
scrollX = 0,
|
||
scrollY = 0,
|
||
paddingLeft = detail_padding_left,
|
||
paddingTop = detail_padding_top,
|
||
paddingRight = detail_padding_right,
|
||
paddingBottom = detail_padding_bottom,
|
||
virtualized = false,
|
||
inertia = true,
|
||
scrollbarThumbColor = theme.primary,
|
||
scrollbarTrackColor = "#33475569",
|
||
scrollbarThickness = 5,
|
||
layer = 20
|
||
}))
|
||
table.insert(nodes, runtime_ui.text("detail_code", detail_body(selected), detail_text_x(selected, m), detail_text_y(selected, m), detail_text_width(selected, m), detail_text_height(selected), {
|
||
parent = "code_panel",
|
||
color = "#ffe2e8f0",
|
||
fontSize = 11,
|
||
textAlign = "left",
|
||
layer = 25
|
||
}))
|
||
|
||
runtime_ui.append_all(nodes, detail_action_nodes(selected, m))
|
||
|
||
table.insert(nodes, runtime_ui.panel("preview_panel", m.detail_x + 20, m.preview_y, m.detail_w - 40, m.preview_h, {
|
||
color = "#ff0b1120",
|
||
radius = 12,
|
||
layer = 20
|
||
}))
|
||
table.insert(nodes, widgets.section_title("preview_title", {
|
||
text = i18n.t("preview_title"),
|
||
x = 14,
|
||
y = 10,
|
||
w = 220,
|
||
h = 22,
|
||
parent = "preview_panel",
|
||
color = theme.text,
|
||
fontSize = 15,
|
||
layer = 25
|
||
}))
|
||
append_preview_nodes(nodes, selected)
|
||
|
||
table.insert(nodes, runtime_ui.text("status_text", state.status, 24, m.status_y, theme.screen_width - 48, 26, {
|
||
color = theme.warning,
|
||
fontSize = 14,
|
||
layer = 50
|
||
}))
|
||
|
||
return nodes
|
||
end
|
||
|
||
---@param text string
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.status_updates(text)
|
||
state.status = text
|
||
return { runtime_ui.text_update("status_text", text) }
|
||
end
|
||
|
||
---@param selected ShowcaseExample
|
||
---@return RuntimeNodeUpdate[]
|
||
local function preview_visibility_updates(selected)
|
||
local updates = {}
|
||
local mode = preview_mode(selected)
|
||
local groups = {
|
||
{ ids = base_preview_ids, visible = mode == "base" },
|
||
{ ids = text_preview_ids, visible = mode == "text" },
|
||
{ ids = button_preview_ids, visible = mode == "buttons" },
|
||
{ ids = button_image_preview_ids, visible = mode == "button_images" },
|
||
{ ids = sprite_preview_ids, visible = mode == "sprites" },
|
||
{ ids = layout_preview_ids, visible = mode == "layout" },
|
||
{ ids = radio_preview_ids, visible = mode == "radio" },
|
||
{ ids = list_preview_ids, visible = mode == "list" },
|
||
{ ids = particle_preview_ids, visible = mode == "particle" },
|
||
{ ids = responsive_preview_ids, visible = mode == "responsive" }
|
||
}
|
||
for _, group in ipairs(groups) do
|
||
for _, id in ipairs(group.ids) do
|
||
table.insert(updates, runtime_ui.visible_update(id, group.visible))
|
||
end
|
||
end
|
||
return updates
|
||
end
|
||
|
||
---@param selected ShowcaseExample
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.example_updates(selected)
|
||
local m = metrics()
|
||
local updates = {
|
||
runtime_ui.text_update("detail_category", i18n.example_group(selected) .. " / " .. i18n.example_field(selected, "category")),
|
||
runtime_ui.text_update("detail_title", i18n.example_field(selected, "title")),
|
||
runtime_ui.text_update("detail_summary", i18n.example_field(selected, "summary")),
|
||
runtime_ui.text_update("detail_code", detail_body(selected)),
|
||
runtime_ui.update("detail_code", {
|
||
x = detail_text_x(selected, m),
|
||
y = detail_text_y(selected, m),
|
||
width = detail_text_width(selected, m),
|
||
height = detail_text_height(selected),
|
||
textAlign = "left"
|
||
}),
|
||
runtime_ui.update("code_panel", {
|
||
contentWidth = detail_content_width(m),
|
||
contentHeight = detail_content_height(selected, m),
|
||
scrollX = 0,
|
||
scrollY = 0
|
||
}),
|
||
runtime_ui.update("detail_tab_code", {
|
||
text = i18n.t("tab_code"),
|
||
onTap = "detail_tab_code",
|
||
interactive = true,
|
||
layer = 90,
|
||
color = state.detail_tab == "code" and theme.primary or "#ff334155"
|
||
}),
|
||
runtime_ui.update("detail_tab_params", {
|
||
text = i18n.t("tab_params"),
|
||
onTap = "detail_tab_params",
|
||
interactive = true,
|
||
layer = 90,
|
||
color = state.detail_tab == "params" and theme.primary or "#ff334155"
|
||
}),
|
||
runtime_ui.update("detail_copy", {
|
||
text = detail_copy_text(),
|
||
onTap = "copy_detail",
|
||
interactive = true,
|
||
layer = 90
|
||
}),
|
||
runtime_ui.text_update("status_text", i18n.t("selected_prefix") .. i18n.example_field(selected, "title"))
|
||
}
|
||
|
||
for _, example in ipairs(examples.all()) do
|
||
table.insert(updates, runtime_ui.update("example_" .. example.id, {
|
||
text = i18n.example_label(example),
|
||
color = example.id == selected.id and theme.primary or "#ff1e293b"
|
||
}))
|
||
end
|
||
|
||
for index = 1, 3 do
|
||
local action = selected.actions[index]
|
||
if action ~= nil then
|
||
table.insert(updates, runtime_ui.update("detail_action_" .. index, {
|
||
text = i18n.action_text(action),
|
||
onTap = action.handler,
|
||
visible = true,
|
||
color = index == 1 and "#ff2563eb" or "#ff334155"
|
||
}))
|
||
else
|
||
table.insert(updates, runtime_ui.update("detail_action_" .. index, {
|
||
text = "",
|
||
onTap = "noop",
|
||
visible = false
|
||
}))
|
||
end
|
||
end
|
||
|
||
local preview_updates = preview_visibility_updates(selected)
|
||
for _, update in ipairs(preview_updates) do
|
||
table.insert(updates, update)
|
||
end
|
||
table.insert(updates, runtime_ui.update("status_text", { width = m.screen_w - 48 }))
|
||
return updates
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.locale_updates()
|
||
local selected = examples.find(state.selected_example)
|
||
local updates = {
|
||
runtime_ui.text_update("app_title", i18n.t("app_title")),
|
||
runtime_ui.text_update("app_subtitle", i18n.t("app_subtitle")),
|
||
runtime_ui.text_update("example_list_title", i18n.t("examples_title")),
|
||
runtime_ui.text_update("preview_title", i18n.t("preview_title")),
|
||
runtime_ui.text_update("responsive_info", responsive_text())
|
||
}
|
||
local detail_updates = ui.example_updates(selected)
|
||
for _, update in ipairs(detail_updates) do
|
||
table.insert(updates, update)
|
||
end
|
||
return updates
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.responsive_updates()
|
||
local width = responsive_device_width()
|
||
return {
|
||
runtime_ui.text_update("responsive_info", responsive_text()),
|
||
runtime_ui.update("responsive_device", { width = width }),
|
||
runtime_ui.update("responsive_sidebar", { width = width * 0.26 }),
|
||
runtime_ui.update("responsive_content", {
|
||
x = 192 + width * 0.26,
|
||
width = width * 0.56
|
||
})
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.text_updates()
|
||
return {
|
||
runtime_ui.update("text_plain_title", {
|
||
text = state.text_variant == "plain" and "Text: 纯文本组件" or "Text: 样式已切换",
|
||
color = state.text_variant == "plain" and theme.text or theme.warning,
|
||
fontSize = state.text_variant == "plain" and 18 or 20
|
||
}),
|
||
runtime_ui.update("text_style_badge", {
|
||
color = state.text_variant == "plain" and theme.primary or theme.purple
|
||
})
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.radio_updates()
|
||
local updates = {
|
||
runtime_ui.text_update("radio_value_text", "当前选择：" .. state.radio_selected)
|
||
}
|
||
local options = { "audio", "spine", "lua" }
|
||
for _, key in ipairs(options) do
|
||
local value = key == "lua" and "Lua" or key
|
||
local selected = state.radio_selected == value
|
||
table.insert(updates, runtime_ui.update("radio_" .. key .. "_dot", {
|
||
color = selected and theme.primary or "#ff475569"
|
||
}))
|
||
table.insert(updates, runtime_ui.update("radio_" .. key .. "_label", {
|
||
color = selected and theme.text or theme.muted
|
||
}))
|
||
end
|
||
return updates
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.list_updates()
|
||
local horizontal = state.list_axis == "horizontal"
|
||
local updates = {
|
||
runtime_ui.update("list_panel", {
|
||
contentWidth = horizontal and 650 or 430,
|
||
contentHeight = horizontal and 90 or 150,
|
||
scrollX = state.list_scroll_x,
|
||
scrollY = state.list_scroll_y
|
||
}),
|
||
runtime_ui.text_update("list_value_text", state.list_axis .. " scrollX=" .. tostring(state.list_scroll_x) .. " scrollY=" .. tostring(state.list_scroll_y))
|
||
}
|
||
local items = { "Lua", "Runtime", "Flame", "Diff", "Command" }
|
||
for index, key in ipairs(items) do
|
||
local row_x = horizontal and (8 + (index - 1) * 126) or 8
|
||
local row_y = horizontal and 18 or (8 + (index - 1) * 28)
|
||
local row_w = horizontal and 116 or 292
|
||
table.insert(updates, runtime_ui.update("list_row_" .. index, {
|
||
x = row_x,
|
||
y = row_y,
|
||
width = row_w,
|
||
color = state.list_selected == key and theme.primary or "#ff1e293b"
|
||
}))
|
||
table.insert(updates, runtime_ui.update("list_row_" .. index .. "_text", {
|
||
textAlign = "left"
|
||
}))
|
||
end
|
||
return updates
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.button_updates()
|
||
return {
|
||
runtime_ui.update("button_primary", {
|
||
color = state.button_active and theme.primary or "#ff475569",
|
||
alpha = state.button_active and 1 or 0.65
|
||
}),
|
||
runtime_ui.text_update("button_state_text", state.button_active and "状态：可点击" or "状态：已置灰")
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.button_image_updates()
|
||
return {
|
||
runtime_ui.update("image_button_toggle", {
|
||
text = state.button_image_enabled and "可切换" or "已禁用",
|
||
interactive = state.button_image_enabled
|
||
}),
|
||
runtime_ui.text_update("image_button_state_text", state.button_image_enabled and "中间按钮：interactive=true" or "中间按钮：interactive=false，显示 disabledAsset")
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.sprite_updates()
|
||
return {
|
||
runtime_ui.update("sprite_frame_demo", {
|
||
color = state.sprite_variant == "image" and theme.primary or theme.purple,
|
||
rotation = state.sprite_variant == "image" and 0 or 0.12
|
||
}),
|
||
runtime_ui.text_update("sprite_label_demo", state.sprite_variant == "image" and "当前：image 原图节点" or "当前：sprite 可动画节点")
|
||
}
|
||
end
|
||
|
||
---@param mode string
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.layout_updates(mode)
|
||
if mode == "column" then
|
||
return {
|
||
runtime_ui.update("layout_chip_1", { x = 44, y = 46 }),
|
||
runtime_ui.update("layout_chip_2", { x = 44, y = 74 }),
|
||
runtime_ui.update("layout_chip_3", { x = 44, y = 102 }),
|
||
runtime_ui.update("layout_chip_4", { x = 44, y = 130 }),
|
||
runtime_ui.text_update("layout_label", "layout.column：纵向排列 + gap")
|
||
}
|
||
end
|
||
if mode == "box" then
|
||
return {
|
||
runtime_ui.update("layout_chip_1", { x = 44, y = 54 }),
|
||
runtime_ui.update("layout_chip_2", { x = 116, y = 54 }),
|
||
runtime_ui.update("layout_chip_3", { x = 44, y = 90 }),
|
||
runtime_ui.update("layout_chip_4", { x = 116, y = 90 }),
|
||
runtime_ui.text_update("layout_label", "layout.box：2 行 × 2 列网格")
|
||
}
|
||
end
|
||
return {
|
||
runtime_ui.update("layout_chip_1", { x = 34, y = 70 }),
|
||
runtime_ui.update("layout_chip_2", { x = 108, y = 70 }),
|
||
runtime_ui.update("layout_chip_3", { x = 182, y = 70 }),
|
||
runtime_ui.update("layout_chip_4", { x = 256, y = 70 }),
|
||
runtime_ui.text_update("layout_label", "layout.row：横向排列 + gap")
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.progress_updates()
|
||
return {
|
||
runtime_ui.update("sample_progress", { value = state.progress }),
|
||
runtime_ui.update("widget_progress", { value = state.progress })
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNodeUpdate[]
|
||
function ui.visibility_updates()
|
||
return {
|
||
runtime_ui.visible_update("sample_rect", state.visible),
|
||
runtime_ui.alpha_update("sample_circle", state.visible and 1 or 0.35)
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNode[]
|
||
function ui.dialog_nodes()
|
||
return widgets.dialog("sample_dialog", "Widget Dialog", "这是 Lua 侧组合组件：overlay + card + text + button。输出仍然只是普通 RuntimeNode。", 150, 190, 420, 230, {
|
||
screenWidth = theme.screen_width,
|
||
screenHeight = theme.screen_height,
|
||
buttons = {
|
||
{ text = "播放音效", handler = "demo_sound" },
|
||
{ text = "关闭", handler = "close_dialog", color = theme.danger }
|
||
}
|
||
})
|
||
end
|
||
|
||
---@return { id: string }[]
|
||
function ui.dialog_removes()
|
||
return {
|
||
{ id = "sample_dialog_overlay" },
|
||
{ id = "sample_dialog" },
|
||
{ id = "sample_dialog_title" },
|
||
{ id = "sample_dialog_message" },
|
||
{ id = "sample_dialog_button_1" },
|
||
{ id = "sample_dialog_button_2" }
|
||
}
|
||
end
|
||
|
||
---@return RuntimeNode[]
|
||
function ui.temp_nodes()
|
||
local m = metrics()
|
||
return {
|
||
runtime_ui.rect("temp_node", m.detail_x + 270, m.preview_y + 98, 90, 28, {
|
||
color = theme.warning,
|
||
radius = 8,
|
||
layer = 45
|
||
}),
|
||
runtime_ui.text("temp_node_text", "临时节点", m.detail_x + 284, m.preview_y + 103, 72, 18, {
|
||
color = "#ff111827",
|
||
fontSize = 13,
|
||
layer = 46
|
||
})
|
||
}
|
||
end
|
||
|
||
return ui
|