TopBottomPage

说明

与 LeftRightPage 对称的容器型区块，注册在 PageComponents 表下、键为 "top-bottom"、IsContainer 为真（改类名不影响已发布页面 JSON）。按 Block.Settings 的 ratio 键（上区占比，解析后夹在 0.15~0.85、缺省 0.5）把子区块 Children 切成上下两区，纵向以 flex 撑开并交给 PageRenderer 递归渲染。设计态下某区没有子区块时，显示「上方区域」「下方区域」的虚线放置占位，设计画布可继续向容器拖放。Title 作为翻译键本地化，样式集中在框架 web.css 的 .pg-tb / .pg-region / .pg-slot 段。

常见能力：

• 按 Settings 的 ratio 把子区块切成上下两区（夹在 0.15~0.85）
• 两区各由 PageRenderer 递归渲染子区块，可任意嵌套
• 容器组件：设计态空区给出上下放置占位、支持继续拖放
• 经 PageComponents 注册表按键 top-bottom 引用，与已发布页面 JSON 解耦
• 标题本地化、样式随 data-theme 明暗切换

用法

@* 按 ratio 切成上下两区，每区由 PageRenderer 递归渲染 *@
@{ var tb = new PageBlock
{
    Component = "top-bottom",
    Title = "车间看板",
    Settings = { ["ratio"] = "0.5" },
    Children =
    {
        new PageBlock { Component = "chart", Title = "产量",
            Settings = { ["type"] = "bar", ["series"] = "60,72,48,85", ["labels"] = "一,二,三,四" } },
        new PageBlock { Component = "list", Title = "告警记录",
            Settings = { ["count"] = "4" } },
    },
}; }

<TopBottomPage Block="tb" Design="false" />

API 参数

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。