GridPage

说明

容器型区块，注册在 PageComponents 表下、键为 "grid"、IsContainer 为真（改类名不影响已发布的页面 JSON）。与按 ratio 二分的左右 / 上下布局不同，栅格把 Children 里的每个子区块都当作一格、统统铺进同一 CSS 网格，交给 PageRenderer 逐格递归渲染，因而一屏可同时并列任意多个区块而不止两区。列数取自 Block.Settings 的 columns 键：为正整数时按 repeat(n, minmax(0, 1fr)) 等宽排布，留空或非法则回退 repeat(auto-fit, minmax(280px, 1fr)) 依容器宽度自适应铺满、每格最小 280px。设计态且尚无子区块时给出「栅格区域」虚线放置占位，画布可继续向容器拖放。Title 作为翻译键本地化，样式集中在框架 web.css 的 .pg-grid-wrap / .pg-cells 段，随 data-theme 明暗自动切换。运行时页面布局（Schema.layout = "grid"）即由本容器承载各 schema-* 数据块。

常见能力：

• 每个子区块即一格，全部并置于同一 CSS 网格（不止两区）
• columns 键指定等宽列数，留空按 minmax(280px) 自适应铺满
• 各格由 PageRenderer 递归渲染，可混排表格 / 列表 / 图表 / 指标等
• 容器组件：设计态空网格给出放置占位、支持继续拖放
• 经 PageComponents 注册表按键 grid 引用，与已发布页面 JSON 解耦
• 标题本地化、样式随 data-theme 明暗切换

用法

@* 每个子区块一格；columns=2 时两列等宽，留空自适应铺满 *@
@{ var grid = new PageBlock
{
    Component = "grid",
    Title = "经营看板",
    Settings = { ["columns"] = "2" },
    Children =
    {
        new PageBlock { Component = "table", Title = "订单",
            Settings = { ["columns"] = "单号,客户,金额", ["rows"] = "3" } },
        new PageBlock { Component = "chart", Title = "按状态",
            Settings = { ["type"] = "pie", ["series"] = "42,68,55", ["labels"] = "待办,进行,完成" } },
        new PageBlock { Component = "list", Title = "最新动态",
            Settings = { ["count"] = "4" } },
    },
}; }

<GridPage Block="grid" Design="false" />

API 参数

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