@microi.net/cli 6.0.1 → 6.0.2

package/skills/page-engine/SKILL.md

@@ -1,227 +1,231 @@
----
-name: page-engine
-description: 生成和审查 Microi 界面引擎 Page Engine 页面 JSON。用于创建仪表盘、图表、表格、地图、组件、页面布局，或校验 mic_page formData JSON。
----
-
-> **Microi吾码基础规范（强制）：** 任何 AI 模型与宿主每次新建或接续吾码任务，先完整读取 `../workspace-conventions/SKILL.md`，必须执行版本播报、`@microi.net/cli` 后台自动升级、Skills/MCP 同步和进度播报。安装与诊断读取 `../microi-codex-installer/SKILL.md`；更新失败延后重试，不阻断当前工作。
-
-# Microi 界面引擎（Page Engine）页面 JSON 生成
-
-MCP 的生成/保存入口包含 `microi_build_page_design` 与 `microi_save_page_design`；版本治理入口见下文。保存工具写入后仍需回读 `mic_page`，不能把生成成功当作持久化成功。
-
-## 完整 AI 开发默认报表（强制）
-
-完整系统开发必须按需求主动设计基于界面引擎的业务统计、老板经营与领导管理报表，
-先把相应入口纳入菜单骨架，再接通真实数据并验收。详细范围与菜单切换流程读取
-[菜单先行与经营报表增补要求](../microi-system-delivery/references/progressive-01-标准工作流.md#菜单先行与经营报表增补要求强制)。
-局部修改只覆盖相关页面/指标，只读分析不创建页面。用户明确的范围优先。
-
-- 每个报表服务明确角色与决策任务；业务运营覆盖状态、趋势、效率与异常，经营视角覆盖
-  有真实来源的规模、收支/利润、回款及风险，管理视角覆盖部门/人员、任务进展、待办/逾期、
-  利用与达成。不存在数据来源的指标标为不适用并说明，不能编造成本、利润或业绩。
-- 每个指标定义来源、公式、单位/精度、状态、时间字段/时区/边界、比较基期、维度与角色。
-  当前租户真实数据通过服务端批量聚合，时间/维度筛选和用户数据权限必须在接口中生效。
-  禁止演示值、本页合计冒充全量或前端拉取全量明细再统计。
-- 页面包含周期/维度筛选、加载、零/空、无权限和失败状态；请求失败不能显示为正常零值。
-  指标/图表穿透到同一口径的授权明细并对账。界面引擎负责看板和图表，分页查询/导出明细
-  配合 `report-engine`；列表汇总、Hero 和角标不能替代决策报表。
-- 保存后回读 `mic_page`、菜单绑定、数据源/接口；以管理员、经营/管理角色、普通与无权限
-  角色验证时间边界、筛选、隔离、零/空/失败和明细对账，完成电脑/移动、明暗主题截图。
-  先从已授权候选入口独立预验收，再以回读后的真实页面 Id 切换同一菜单并按打开方式设置标记，
-  保留菜单身份与权限；从原 URL 最终验收，失败精确恢复本菜单原绑定并记录未完成。
-
-## 紧凑报表与平台主题
-
-需要“主指标 + 多行次指标 + 图表 + 排行表 + 资讯”布局时，可读取 [examples/compact-dashboard.json](examples/compact-dashboard.json) 作为原生组件示例。示例数值仅用于视觉排版，交付业务报表前必须替换为当前租户的真实数据源。
-
-默认使用 `formConfig.themeMode="system"`、`density="compact"`，卡片背景使用 `var(--el-bg-color)`、页面背景使用 `var(--el-bg-color-page)`，正文使用平台文字变量。不要因为“驾驶舱/大屏”字样就强制深色。显式指定浅色或深色时才使用 `light/dark`。
-
-运行容器默认 `wrapperOption.heightMode="content"`，`height` 只保留设计器布局尺寸。仅需固定图形画布时设为 `fixed`；图表自身可以设置 240–320px 高度。不要为一行指标、标题、三行表格预留 200–400px 空容器。紧凑布局的卡片间距建议 10–16px，面板内边距 8–16px；统计组件 `widgetParams[24].value` 支持 `summary`（图标和大数字）、`detail`（多行小指标）及兼容的 `cards`。
-
-用户提供参考截图时，先拆出面板行列比例、指标主次、图表与表格高度、标题/筛选位置，再用原生 pannel/statistic/chart/tabel/list 组合配置。不能把所有指标替换成一排大色块，也不能用模板假数据声称已接通客户业务。必须用同一视口截图检查浅色和平台深色，检查页面缩放后的断行与纵向空白；布局接近度和真实数据绑定分别验收。
-
-### 平台智能工作首页
-
-保留 `aiengine` 原生 AI 创作中心，与 `homeoverview` 工作概览组成桌面首行 14/10 栅格；任务、月历与公告放在下一行，移动端自动切为 24 栅格。不能把任务的完整 15 行列表或未配置日程的大空白块直接堆在首屏。
-
-- `homeoverview.widgetParams[0]` 为真实个人统计接口 `platform-home-overview`，`[1].value="compact"` 启用紧凑指标、常用应用与趋势；所有数据仍受当前用户权限过滤。
-- `workcenter.widgetParams` 按索引依次为视图、工作菜单、流程菜单、公告菜单、日历菜单、分页条数；`[5].value=5` 用于首页任务，范围 5–20，不能影响独立“我的工作”页面。
-- `diycalendar.widgetParams[0].value` 应绑定当前账号可访问、关联 `microi_calendar` 的真实模块 Id；`[1].value="compact"` 只压缩月历密度，仍须支持点击日期新增及事件编辑、删除。备注字段为 `Remark`。隐藏菜单也可以是授权入口，旧模块可能没有 `DiyTableName`，此时必须显式绑定实际模块，不把只读日期回退当作日程验收成功。无模块时展示本月日期并明确提示未配置，不伪造任务。
-- `diytable.widgetParams[4].value="NoticeList"` 以只读公告列表展示真实授权公告；表、菜单仍在 `[0]/[1]`，模块缺失时使用 `referencePolicy.onMissing="RemoveWidget"` 移除可选组件及空容器。
-- 修改已有首页前通过 MCP 读取页面及历史 `CurrentHash`，保存传 `expectedCurrentHash`，再回读 JSON 和历史，保留可恢复版本。
-
-你正在为 Microi 吾码平台生成界面引擎页面的 JSON 数据。界面引擎页面由 `formData` 对象描述，用户导入 JSON 即可使用。
-
-<!-- microi-progressive:begin -->
-<!-- microi-progressive:chunk id=page-engine-000 sha256=5b79a31a8484bf0a618c2810e66c0ab542fd86ceeb76e7a5cd07a86284c4f6ac -->
-## 设计器源码事件
-
-只有在扩展界面引擎设计器源码时才使用全局事件总线。用
-`EventBus.on(eventName, handler)` 监听保存、日期选择或组件跳转等事件，并在
-组件卸载时逐项调用 `EventBus.off(eventName)`。重复挂载不解绑会造成一次操作
-触发多次；普通页面 JSON 生成不需要注册事件总线。
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-001 sha256=53cf1992d4adcf8126f4d0a04d373d685d539b38c5d74840ba07905e9cbe4589 -->
-## 核心数据结构
-
-```
-formData（页面）
-├── Id: string                  // 页面唯一ID（GUID）
-├── Title: string               // 页面标题
-├── Number: string              // 页面编号（如 PAGE1）
-├── Desc: string                // 页面描述
-└── JsonObj
-    ├── formConfig              // 页面全局配置
-    └── wrapperList[]           // 容器列表
-        ├── wrapperOption       // 容器配置
-        └── widgetList[]        // 组件列表
-            ├── widgetOption    // 组件通用配置
-            └── widgetParams[]  // 组件私有参数
-```
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-002 sha256=227ecf87086231eee28a9d91fde6a178a437e9196dd8f2ef1d14d53e5c5858df -->
-## formConfig 页面全局配置
-
-```json
-{
-  "gutter": 0, "mask": true, "drag": true, "left": true,
-  "hover": true, "shadow": true, "link": false, "watermark": false,
-  "mobile": false, "dark": false, "autoRefresh": 0, "lastRefreshTime": "",
-  "watermarkStyle": {
-    "content": "Microi吾码",
-    "font": { "fontSize": 16, "color": "rgba(255, 0, 0, 0.15)" },
-    "rotate": -22
-  },
-  "dynamicStyle": { "padding": "4px", "backgroundColor": "", "opacity": 1 }
-}
-```
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-003 sha256=7bb7cb860f9330002f60748e93de3c639b157cddfd77b63ac8b19f0535306e65 -->
-## 容器类型
-
-| type | label | 说明 |
-|------|-------|------|
-| `pannel` | 卡片 | 标准容器，包含一个 `widgetList` |
-| `tabs` | 选项卡 | 多标签页容器，使用 `tabWidgetMap` 存储每个 tab 的组件 |
-
-### 卡片容器（pannel）关键字段
-
-```json
-{
-  "type": "pannel",
-  "label": "卡片",
-  "hidden": false,
-  "wrapperOption": {
-    "number": 10001,               // 随机5位整数，页面内唯一
-    "span": 12,                    // 栅格宽度（1-24，24=满宽）
-    "height": 300,                 // 容器高度（px）
-    "margin": "0px 10px 10px 0px",
-    "dynamicStyle": { "padding": "10px", "backgroundColor": "" },
-    "titleOption": {
-      "hidden": true,              // true=隐藏标题
-      "title": "未命名",
-      "dynamicStyle": { "textAlign": "left", "padding": "0px", "height": "20px", "lineHeight": "20px", "fontSize": "14px", "color": "" },
-      "moreOption": { "hidden": true, "icon": "More", "iconShow": false, "text": "更多", "linkurl": "/", "linktype": "router", "refresh": "0", "datetime": "0", "autotime": false, "autotimeval": 1, "dynamicStyle": { "color": "", "fontSize": "12px" } }
-    }
-  },
-  "widgetList": []
-}
-```
-
-### 选项卡容器（tabs）
-
-组件放在 `tabWidgetMap[tabKey][]` 中，**不**放在 `widgetList` 中。
-
-```json
-{
-  "type": "tabs",
-  "wrapperOption": {
-    "number": 10002, "span": 24, "height": 400,
-    "tabType": "",            // '' | 'card' | 'border-card'
-    "tabPosition": "top",     // 'top' | 'right' | 'bottom' | 'left'
-    "tabs": [
-      { "key": "tab_1", "label": "标签页1" },
-      { "key": "tab_2", "label": "标签页2" }
-    ],
-    "activeTab": "tab_1"
-  },
-  "tabWidgetMap": { "tab_1": [], "tab_2": [] },
-  "widgetList": []
-}
-```
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-004 sha256=66261254d94455648441bf3519a5c810ede60c64f341dce035f931e284f762ba -->
-## 组件通用结构
-
-```json
-{
-  "type": "bar",
-  "label": "柱状图",
-  "category": 0,
-  "show": 1,
-  "widgetOption": {
-    "number": 20001,           // 随机5位整数，页面内唯一
-    "wrapperNumber": 10001,    // 必须等于所在容器的 wrapperOption.number
-    "span": 24,
-    "height": 280,
-    "dynamicStyle": { "padding": "8px", "backgroundColor": "" }
-  },
-  "widgetParams": []
-}
-```
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-005 sha256=e9667b97462c9089a72d2a407cfde00e873afe7d64593bf33ad49a523255b38d -->
-## widgetParams 参数类型
-
-| type | 说明 | value 类型 |
-|------|------|-----------|
-| `textarea` | 多行文本（数据来源） | `string` |
-| `input` | 单行文本 | `string` |
-| `number` | 数字 | `number` |
-| `switch` | 开关 | `boolean` |
-| `slider` | 滑块 | `number` |
-| `color` | 颜色选择 | `string` |
-| `select` | 下拉选择 | `string` |
-| `radio` | 单选组 | `string` |
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-006 sha256=7347b2b4290db41ae8c3ef128acc9854a5e17290268b8e274e771de47b8f752a -->
-## 数据来源（widgetParams[0]）
-
-大多数组件的第一个参数（sort=0）是"数据来源"：
-- **静态数据**：`value` 为空，数据在 `typeOptions.dataJson` 中
-- **动态接口**：`value` 设为接口地址，运行时请求替换 `dataJson`
-
-**接口引擎地址格式：**
-```
-$ApiBase$/apiengine/{ApiEngineKey}
-```
-
-<!-- /microi-progressive:chunk -->
-<!-- microi-progressive:chunk id=page-engine-007 sha256=5f2ed06aa1e0abbc5f968f026602d92f22f01836d76fdf502fd91ca0f945509b -->
-## 运行态布局与滚动规范
-
-- 页面只保留一个主滚动容器：仪表盘、首页和嵌套界面优先继承最外层页面滚动；单个 `pannel`、`workcenter`、`diytable`、`diycalendar`、嵌套 `pageengine` 在运行态默认使用内容自适应高度和 `overflow: visible`，不得无条件设置 `overflow: auto`。
-- 经典桌面主滚动容器为路由内容区，导航与 Tab 留在视口内；移动端继续保留外层文档滚动。图表在异步挂载后绑定尺寸观察器，切换导航、收缩侧栏及改变窗口宽度都应重新测量，禁止仅隐藏溢出而保留错误画布宽度。真实回归覆盖两种导航、两种桌面宽度，以及日程创建后刷新、备注编辑和删除。
-- 固定高度只用于设计器拖拽预览、图表画布或确有虚拟滚动需求的组件。设计态可按 `widgetOption.height` 提供滚动，运行态必须先验证内容能完整展开；不能用双滚动条掩盖容器高度不足。
-- 表格型容器通常按 15 条数据验收，表头、工具栏、全部数据行和分页区应同时可见；首页紧凑表格可通过 `diy-table` 的 `PageSizeList` 追加 `[10]`，并在 `sys_menu.DefaultPageSize` 为空时默认选择候选页码中的最小值。空间不足时先压缩统计卡、工具栏、行高和间距，再考虑增加外层页面长度，不隐藏分页、不在卡片内部滚动。
-- 同一行的容器使用一致的左右边距、内边距、标题高度和顶部基线；同层卡片间距必须相同，左右边缘、标题、工具栏和内容区应形成稳定对齐线。推荐使用统一的 8px 基础间距和 8/12/16px 倍数。
-- 成对容器应设置相同的最小高度；内容较少的组件通过内容居中、合理留白或自适应布局消化空间，不能在底部留下明显的大块无意义空白。内容较多时允许容器自然增高并由页面继续向下滚动。
-- 日历和公告应完整展示工具栏、主体和底部操作区；日历优先使用 `height: auto` / `contentHeight: auto`，公告优先使用标准表单引擎分页与权限按钮。
-- 运行态移动端必须按实际视口自动切为 24 栅格，不能只依赖保存 JSON 中的 `formConfig.mobile`；窗口旋转或宽度变化时也要同步。嵌入的 `diytable` 不得渲染独立列表页的固定返回栏和全局 FAB，新增、页面按钮、批量操作应留在当前容器工具栏内；容器标题操作区允许紧凑换行，但不能绝对定位覆盖标题或其它卡片。
-- `aiengine` 在移动端嵌入首页时应使用内容自适应高度和外层页面滚动，指标卡与快捷入口优先两列紧凑排布，避免 4 个指标和全部快捷入口单列堆叠造成超长首屏；输入区和模型/推理设置必须保持可见且不横向溢出。
-- 交付前必须在真实运行页检查：是否存在内部纵向/横向滚动条、15 条表格分页是否可见、同排容器是否对齐、四周边距是否一致、组件底部是否有异常空白。仅检查设计器画布不算验收完成。
-
-<!-- /microi-progressive:chunk -->
-## 详细参考路由（渐进披露）
-
-仅在当前任务涉及对应主题时读取；下列文件合计保留了原 SKILL.md 的全部详细知识。
-
-- [references/progressive-01-所有组件类型.md](references/progressive-01-所有组件类型.md)：所有组件类型；Office/PDF 在线预览自然语言生成规则；searchData 查询条件通用结构
-- [references/progressive-02-版本历史-并发保存与回滚.md](references/progressive-02-版本历史-并发保存与回滚.md)：版本历史、并发保存与回滚；本地撤销、Vue 源码桥与资产包；生成 JSON 注意事项；经营看板周期筛选与布局规则
-<!-- microi-progressive:end -->
+---
+name: page-engine
+description: 生成和审查 Microi 界面引擎 Page Engine 页面 JSON。用于创建仪表盘、图表、表格、地图、组件、页面布局，或校验 mic_page formData JSON。
+---
+
+> **Microi吾码基础规范（强制）：** 任何 AI 模型与宿主每次新建或接续吾码任务，先完整读取 `../workspace-conventions/SKILL.md`，必须执行版本播报、`@microi.net/cli` 后台自动升级、Skills/MCP 同步和进度播报。安装与诊断读取 `../microi-codex-installer/SKILL.md`；更新失败延后重试，不阻断当前工作。
+
+# Microi 界面引擎（Page Engine）页面 JSON 生成
+
+MCP 的生成/保存入口包含 `microi_build_page_design` 与 `microi_save_page_design`；版本治理入口见下文。保存工具写入后仍需回读 `mic_page`，不能把生成成功当作持久化成功。
+
+## 完整 AI 开发默认报表（强制）
+
+完整系统开发必须按需求主动设计基于界面引擎的业务统计、老板经营与领导管理报表，
+先把相应入口纳入菜单骨架，再接通真实数据并验收。详细范围与菜单切换流程读取
+[菜单先行与经营报表增补要求](../microi-system-delivery/references/progressive-01-标准工作流.md#菜单先行与经营报表增补要求强制)。
+局部修改只覆盖相关页面/指标，只读分析不创建页面。用户明确的范围优先。
+
+- 每个报表服务明确角色与决策任务；业务运营覆盖状态、趋势、效率与异常，经营视角覆盖
+  有真实来源的规模、收支/利润、回款及风险，管理视角覆盖部门/人员、任务进展、待办/逾期、
+  利用与达成。不存在数据来源的指标标为不适用并说明，不能编造成本、利润或业绩。
+- 每个指标定义来源、公式、单位/精度、状态、时间字段/时区/边界、比较基期、维度与角色。
+  当前租户真实数据通过服务端批量聚合，时间/维度筛选和用户数据权限必须在接口中生效。
+  禁止演示值、本页合计冒充全量或前端拉取全量明细再统计。
+- 页面包含周期/维度筛选、加载、零/空、无权限和失败状态；请求失败不能显示为正常零值。
+  指标/图表穿透到同一口径的授权明细并对账。界面引擎负责看板和图表，分页查询/导出明细
+  配合 `report-engine`；列表汇总、Hero 和角标不能替代决策报表。
+- 保存后回读 `mic_page`、菜单绑定、数据源/接口；以管理员、经营/管理角色、普通与无权限
+  角色验证时间边界、筛选、隔离、零/空/失败和明细对账，完成电脑/移动、明暗主题截图。
+  先从已授权候选入口独立预验收，再以回读后的真实页面 Id 切换同一菜单并按打开方式设置标记，
+  保留菜单身份与权限；从原 URL 最终验收，失败精确恢复本菜单原绑定并记录未完成。
+
+## 紧凑报表与平台主题
+
+需要“主指标 + 多行次指标 + 图表 + 排行表 + 资讯”布局时，可读取 [examples/compact-dashboard.json](examples/compact-dashboard.json) 作为原生组件示例。示例数值仅用于视觉排版，交付业务报表前必须替换为当前租户的真实数据源。
+
+默认使用 `formConfig.themeMode="system"`、`density="compact"`，卡片背景使用 `var(--el-bg-color)`、页面背景使用 `var(--el-bg-color-page)`，正文使用平台文字变量。不要因为“驾驶舱/大屏”字样就强制深色。显式指定浅色或深色时才使用 `light/dark`。
+
+运行容器默认 `wrapperOption.heightMode="content"`，`height` 只保留设计器布局尺寸。仅需固定图形画布时设为 `fixed`；图表自身可以设置 240–320px 高度。不要为一行指标、标题、三行表格预留 200–400px 空容器。紧凑布局的卡片间距建议 10–16px，面板内边距 8–16px；统计组件 `widgetParams[24].value` 支持 `summary`（图标和大数字）、`detail`（多行小指标）及兼容的 `cards`。
+
+用户提供参考截图时，先拆出面板行列比例、指标主次、图表与表格高度、标题/筛选位置，再用原生 pannel/statistic/chart/tabel/list 组合配置。不能把所有指标替换成一排大色块，也不能用模板假数据声称已接通客户业务。必须用同一视口截图检查浅色和平台深色，检查页面缩放后的断行与纵向空白；布局接近度和真实数据绑定分别验收。
+
+### 平台智能工作首页
+
+保留 `aiengine` 原生 AI 创作中心，与 `homeoverview` 工作概览组成桌面首行 14/10 栅格；任务、月历与公告放在下一行，移动端自动切为 24 栅格。不能把任务的完整 15 行列表或未配置日程的大空白块直接堆在首屏。
+
+- `homeoverview.widgetParams[0]` 为真实个人统计接口 `platform-home-overview`，`[1].value="compact"` 启用紧凑指标、常用应用与趋势；所有数据仍受当前用户权限过滤。
+- `workcenter.widgetParams` 按索引依次为视图、工作菜单、流程菜单、公告菜单、日历菜单、分页条数；`[5].value=5` 用于首页任务，范围 5–20，不能影响独立“我的工作”页面。
+- `diycalendar.widgetParams[0].value` 应绑定当前账号可访问、关联 `microi_calendar` 的真实模块 Id；`[1].value="compact"` 只压缩月历密度，仍须支持点击日期新增及事件编辑、删除。备注字段为 `Remark`。隐藏菜单也可以是授权入口，旧模块可能没有 `DiyTableName`，此时必须显式绑定实际模块，不把只读日期回退当作日程验收成功。无模块时展示本月日期并明确提示未配置，不伪造任务。
+- `diytable.widgetParams[4].value="NoticeList"` 以只读公告列表展示真实授权公告；表、菜单仍在 `[0]/[1]`，模块缺失时使用 `referencePolicy.onMissing="RemoveWidget"` 移除可选组件及空容器。
+- 修改已有首页前通过 MCP 读取页面及历史 `CurrentHash`，保存传 `expectedCurrentHash`，再回读 JSON 和历史，保留可恢复版本。
+
+你正在为 Microi 吾码平台生成界面引擎页面的 JSON 数据。界面引擎页面由 `formData` 对象描述，用户导入 JSON 即可使用。
+
+<!-- microi-progressive:begin -->
+<!-- microi-progressive:chunk id=page-engine-000 sha256=44233416e71cc6ff3712347308dadd26e55b14938b81b8a2401478c6bc14921b -->
+## 设计器源码事件
+
+设计器选中事件只能在 `isDesignMode` 为真时执行 `preventDefault/stopPropagation` 和选中状态写入。运行和预览页面必须保留 HTML 链接、按钮与键盘激活的浏览器默认行为。链接使用实际授权菜单路由，保存后逐一点击验证，不以 JSON 中存在 href 代替跳转验收；回归入口为 `Microi.Client/tests/page-engine-runtime-click.spec.mjs`。
+
+每个顶层运行路由必须创建并 provide 独立的 `PAGE_ENGINE_STORE_KEY`，其子组件通过 `usePageEngineStore` 使用当前渲染树的状态。不能让多个 KeepAlive 页面共用应用级 `formData`，否则迟到响应和页面激活会导致错页；验收需覆盖地图与看板往返、迟到响应、移动布局和主题隔离。
+
+只有在扩展界面引擎设计器源码时才使用全局事件总线。用
+`EventBus.on(eventName, handler)` 监听保存、日期选择或组件跳转等事件，并在
+组件卸载时逐项调用 `EventBus.off(eventName)`。重复挂载不解绑会造成一次操作
+触发多次；普通页面 JSON 生成不需要注册事件总线。
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-001 sha256=57717991f9c7de557b524ec36fc9bdd716080b71b682439f1b6662b0b9b2f45c -->
+## 核心数据结构
+
+```
+formData（页面）
+├── Id: string                  // 页面唯一ID（GUID）
+├── Title: string               // 页面标题
+├── Number: string              // 页面编号（如 PAGE1）
+├── Desc: string                // 页面描述
+└── JsonObj
+    ├── formConfig              // 页面全局配置
+    └── wrapperList[]           // 容器列表
+        ├── wrapperOption       // 容器配置
+        └── widgetList[]        // 组件列表
+            ├── widgetOption    // 组件通用配置
+            └── widgetParams[]  // 组件私有参数
+```
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-002 sha256=6a1a85b40bcb5f8be694b0aad73a805083acd0d6fcd9cba36278dc9b51d24dcb -->
+## formConfig 页面全局配置
+
+```json
+{
+  "gutter": 0, "mask": true, "drag": true, "left": true,
+  "hover": true, "shadow": true, "link": false, "watermark": false,
+  "mobile": false, "dark": false, "autoRefresh": 0, "lastRefreshTime": "",
+  "watermarkStyle": {
+    "content": "Microi吾码",
+    "font": { "fontSize": 16, "color": "rgba(255, 0, 0, 0.15)" },
+    "rotate": -22
+  },
+  "dynamicStyle": { "padding": "4px", "backgroundColor": "", "opacity": 1 }
+}
+```
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-003 sha256=8afb75b0e4d85ab9f56a7ba018e1cc50f758d3e604683d8c38d5f0a45d53f135 -->
+## 容器类型
+
+| type | label | 说明 |
+|------|-------|------|
+| `pannel` | 卡片 | 标准容器，包含一个 `widgetList` |
+| `tabs` | 选项卡 | 多标签页容器，使用 `tabWidgetMap` 存储每个 tab 的组件 |
+
+### 卡片容器（pannel）关键字段
+
+```json
+{
+  "type": "pannel",
+  "label": "卡片",
+  "hidden": false,
+  "wrapperOption": {
+    "number": 10001,               // 随机5位整数，页面内唯一
+    "span": 12,                    // 栅格宽度（1-24，24=满宽）
+    "height": 300,                 // 容器高度（px）
+    "margin": "0px 10px 10px 0px",
+    "dynamicStyle": { "padding": "10px", "backgroundColor": "" },
+    "titleOption": {
+      "hidden": true,              // true=隐藏标题
+      "title": "未命名",
+      "dynamicStyle": { "textAlign": "left", "padding": "0px", "height": "20px", "lineHeight": "20px", "fontSize": "14px", "color": "" },
+      "moreOption": { "hidden": true, "icon": "More", "iconShow": false, "text": "更多", "linkurl": "/", "linktype": "router", "refresh": "0", "datetime": "0", "autotime": false, "autotimeval": 1, "dynamicStyle": { "color": "", "fontSize": "12px" } }
+    }
+  },
+  "widgetList": []
+}
+```
+
+### 选项卡容器（tabs）
+
+组件放在 `tabWidgetMap[tabKey][]` 中，**不**放在 `widgetList` 中。
+
+```json
+{
+  "type": "tabs",
+  "wrapperOption": {
+    "number": 10002, "span": 24, "height": 400,
+    "tabType": "",            // '' | 'card' | 'border-card'
+    "tabPosition": "top",     // 'top' | 'right' | 'bottom' | 'left'
+    "tabs": [
+      { "key": "tab_1", "label": "标签页1" },
+      { "key": "tab_2", "label": "标签页2" }
+    ],
+    "activeTab": "tab_1"
+  },
+  "tabWidgetMap": { "tab_1": [], "tab_2": [] },
+  "widgetList": []
+}
+```
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-004 sha256=9c7c85bb0d25267d07e45d9abeb5691c2f0ffd9da233351cf2f448a9b848cea5 -->
+## 组件通用结构
+
+```json
+{
+  "type": "bar",
+  "label": "柱状图",
+  "category": 0,
+  "show": 1,
+  "widgetOption": {
+    "number": 20001,           // 随机5位整数，页面内唯一
+    "wrapperNumber": 10001,    // 必须等于所在容器的 wrapperOption.number
+    "span": 24,
+    "height": 280,
+    "dynamicStyle": { "padding": "8px", "backgroundColor": "" }
+  },
+  "widgetParams": []
+}
+```
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-005 sha256=c1e31dede775f14761182fc197cf428d494806c4503a622ffdad3d16d091d3e0 -->
+## widgetParams 参数类型
+
+| type | 说明 | value 类型 |
+|------|------|-----------|
+| `textarea` | 多行文本（数据来源） | `string` |
+| `input` | 单行文本 | `string` |
+| `number` | 数字 | `number` |
+| `switch` | 开关 | `boolean` |
+| `slider` | 滑块 | `number` |
+| `color` | 颜色选择 | `string` |
+| `select` | 下拉选择 | `string` |
+| `radio` | 单选组 | `string` |
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-006 sha256=2c021e43f4f0d730da1f5a5cf6a2d314589435e2bb9ff573148c787538a8cc86 -->
+## 数据来源（widgetParams[0]）
+
+大多数组件的第一个参数（sort=0）是"数据来源"：
+- **静态数据**：`value` 为空，数据在 `typeOptions.dataJson` 中
+- **动态接口**：`value` 设为接口地址，运行时请求替换 `dataJson`
+
+**接口引擎地址格式：**
+```
+$ApiBase$/apiengine/{ApiEngineKey}
+```
+
+<!-- /microi-progressive:chunk -->
+<!-- microi-progressive:chunk id=page-engine-007 sha256=4170c6e274fc773427057d8606c4800a5bbd5fabd62d63e931aaa388262a51e9 -->
+## 运行态布局与滚动规范
+
+- 页面只保留一个主滚动容器：仪表盘、首页和嵌套界面优先继承最外层页面滚动；单个 `pannel`、`workcenter`、`diytable`、`diycalendar`、嵌套 `pageengine` 在运行态默认使用内容自适应高度和 `overflow: visible`，不得无条件设置 `overflow: auto`。
+- 经典桌面主滚动容器为路由内容区，导航与 Tab 留在视口内；移动端继续保留外层文档滚动。图表在异步挂载后绑定尺寸观察器，切换导航、收缩侧栏及改变窗口宽度都应重新测量，禁止仅隐藏溢出而保留错误画布宽度。真实回归覆盖两种导航、两种桌面宽度，以及日程创建后刷新、备注编辑和删除。
+- 固定高度只用于设计器拖拽预览、图表画布或确有虚拟滚动需求的组件。设计态可按 `widgetOption.height` 提供滚动，运行态必须先验证内容能完整展开；不能用双滚动条掩盖容器高度不足。
+- 表格型容器通常按 15 条数据验收，表头、工具栏、全部数据行和分页区应同时可见；首页紧凑表格可通过 `diy-table` 的 `PageSizeList` 追加 `[10]`，并在 `sys_menu.DefaultPageSize` 为空时默认选择候选页码中的最小值。空间不足时先压缩统计卡、工具栏、行高和间距，再考虑增加外层页面长度，不隐藏分页、不在卡片内部滚动。
+- 同一行的容器使用一致的左右边距、内边距、标题高度和顶部基线；同层卡片间距必须相同，左右边缘、标题、工具栏和内容区应形成稳定对齐线。推荐使用统一的 8px 基础间距和 8/12/16px 倍数。
+- 成对容器应设置相同的最小高度；内容较少的组件通过内容居中、合理留白或自适应布局消化空间，不能在底部留下明显的大块无意义空白。内容较多时允许容器自然增高并由页面继续向下滚动。
+- 日历和公告应完整展示工具栏、主体和底部操作区；日历优先使用 `height: auto` / `contentHeight: auto`，公告优先使用标准表单引擎分页与权限按钮。
+- 运行态移动端必须按实际视口自动切为 24 栅格，不能只依赖保存 JSON 中的 `formConfig.mobile`；窗口旋转或宽度变化时也要同步。嵌入的 `diytable` 不得渲染独立列表页的固定返回栏和全局 FAB，新增、页面按钮、批量操作应留在当前容器工具栏内；容器标题操作区允许紧凑换行，但不能绝对定位覆盖标题或其它卡片。
+- `aiengine` 在移动端嵌入首页时应使用内容自适应高度和外层页面滚动，指标卡与快捷入口优先两列紧凑排布，避免 4 个指标和全部快捷入口单列堆叠造成超长首屏；输入区和模型/推理设置必须保持可见且不横向溢出。
+- 交付前必须在真实运行页检查：是否存在内部纵向/横向滚动条、15 条表格分页是否可见、同排容器是否对齐、四周边距是否一致、组件底部是否有异常空白。仅检查设计器画布不算验收完成。
+
+<!-- /microi-progressive:chunk -->
+## 详细参考路由（渐进披露）
+
+仅在当前任务涉及对应主题时读取；下列文件合计保留了原 SKILL.md 的全部详细知识。
+
+- [references/progressive-01-所有组件类型.md](references/progressive-01-所有组件类型.md)：所有组件类型；Office/PDF 在线预览自然语言生成规则；searchData 查询条件通用结构
+- [references/progressive-02-版本历史-并发保存与回滚.md](references/progressive-02-版本历史-并发保存与回滚.md)：版本历史、并发保存与回滚；本地撤销、Vue 源码桥与资产包；生成 JSON 注意事项；经营看板周期筛选与布局规则
+<!-- microi-progressive:end -->