可视化页面搭建器实现

页面搭建器：
  组织「多个组件的排列与组合」
  关注布局、层级、位置、样式
  产物是页面元数据

表单引擎：
  组织「一组字段的输入与校验」
  关注显隐、联动、校验、提交
  产物是表单元数据

关系：
  表单本身可以是页面里的一个组件
  页面提供容器，表单提供交互

树结构（嵌套）：
{ "id": "root", "type": "Page", "children": [
    { "id": "a", "type": "Card", "children": [ { "id": "b", "type": "Button" } ] } ] }

扁平结构（归一化）：
{ "rootId": "root", "nodes": {
    "root": { "id": "root", "type": "Page", "children": ["a"] },
    "a":    { "id": "a", "type": "Card", "parent": "root", "children": ["b"] },
    "b":    { "id": "b", "type": "Button", "parent": "a", "children": [] } } }

// 移动节点：只改父节点与两个相关节点，其余引用不变
function moveNode(state: PageState, nodeId: string, newParentId: string, index: number) {
  const nodes = { ...state.nodes };
  const node = nodes[nodeId];
  const oldParent = nodes[node.parent!];
  nodes[node.parent!] = { ...oldParent, children: oldParent.children.filter((c) => c !== nodeId) };
  const newParent = nodes[newParentId];
  const children = [...newParent.children];
  children.splice(index, 0, nodeId);
  nodes[newParentId] = { ...newParent, children };
  nodes[nodeId] = { ...node, parent: newParentId };
  return { ...state, nodes };
}

拖拽三阶段：
  1. dragstart：记录被拖组件，设置拖拽态
  2. dragover：实时计算落点，显示插入指示线
  3. drop：把组件插入落点，提交历史

落点计算：
  遍历画布中所有「可放置容器」的矩形
  找到鼠标位置命中的最深容器
  在容器内按子元素中点计算插入索引

function findDropTarget(point: Point, nodes: PageState['nodes']): DropTarget | null {
  let target: DropTarget | null = null;
  for (const node of Object.values(nodes)) {
    if (!isDroppable(node)) continue;
    const rect = getRect(node.id);
    if (!rect) continue;
    if (contains(rect, point)) {
      // 取最深（面积最小）的容器
      if (!target || area(rect) < area(target.rect)) {
        target = { parentId: node.id, index: computeIndex(node, point), rect };
      }
    }
  }
  return target;
}

{
  "id": "card_1", "type": "Card",
  "layout": { "mode": "flow", "direction": "row", "gap": 16, "padding": 24 },
  "children": ["btn_1", "btn_2"]
}

{
  "id": "banner_1", "type": "Banner",
  "layout": { "mode": "free", "grid": 8, "snap": true },
  "children": [
    { "id": "t_1", "type": "Text", "position": { "x": 40, "y": 24, "w": 320, "h": 48 } }
  ]
}

interface ComponentSchema {
  type: string;
  name: string;                 // 显示名
  group: string;                // 面板分组
  props: PropSchema[];          // 可配置属性
  defaultProps?: Record<string, unknown>;
  acceptsChildren?: boolean;
  droppable?: boolean;
}

interface PropSchema {
  name: string;
  label: string;
  type: 'string' | 'number' | 'boolean' | 'select' | 'color' | 'expr' | 'style';
  options?: Option[];
  defaultValue?: unknown;
  group?: string;               // 属性分组（基础/样式/事件）
}

{
  "type": "Button", "name": "按钮", "group": "基础组件", "acceptsChildren": false,
  "props": [
    { "name": "text", "label": "文案", "type": "string", "defaultValue": "按钮" },
    { "name": "variant", "label": "样式", "type": "select",
      "options": [{"label":"主要","value":"primary"},{"label":"次要","value":"default"}] },
    { "name": "onClick", "label": "点击动作", "type": "expr" }
  ]
}

作用域链：
  页面级变量（page.xxx）
    → 数据源（dataSource.users）
      → 组件级（item in list）
        → 局部变量（local.xxx）

表达式求值时从内向外查找

{
  "dataSources": [
    { "id": "users", "type": "api", "url": "/api/users", "method": "GET" },
    { "id": "stats", "type": "api", "url": "/api/stats" }
  ],
  "variables": [ { "name": "keyword", "type": "string", "default": "" } ]
}

{
  "type": "Table",
  "props": {
    "data": "{{ users.data }}",
    "columns": [
      { "title": "姓名", "field": "name" },
      { "title": "状态", "field": "status",
        "render": "{{ item.status === 'active' ? '启用' : '停用' }}" }
    ],
    "filter": "{{ variables.keyword }}"
  }
}

事件源：onClick / onChange / onLoad / onSubmit
动作类型：
  - 调用接口（api）
  - 设置变量（setVariable）
  - 导航（navigate）
  - 弹窗/抽屉（openModal）
  - 通知（notify）
  - 自定义脚本（script，受限沙箱）

编排方式：
  顺序执行 + 条件分支 + 错误处理

{
  "onClick": {
    "type": "sequence",
    "steps": [
      { "type": "api", "source": "createUser", "params": { "name": "{{ form.name }}" } },
      { "type": "notify", "level": "success", "message": "创建成功" },
      { "type": "setVariable", "name": "refreshKey", "value": "{{ Date.now() }}" }
    ]
  }
}

interface HistoryState {
  past: PageState[];
  present: PageState;
  future: PageState[];
}

function push(history: HistoryState, next: PageState, limit = 100): HistoryState {
  const past = [...history.past, history.present].slice(-limit);
  return { past, present: next, future: [] };
}

function undo(history: HistoryState): HistoryState {
  if (!history.past.length) return history;
  const previous = history.past[history.past.length - 1];
  return {
    past: history.past.slice(0, -1),
    present: previous,
    future: [history.present, ...history.future],
  };
}

三个阶段：
  设计态（Design）：可编辑，带辅助线与选中框
  预览态（Preview）：只读渲染，模拟真实数据
  运行态（Runtime）：部署后由应用壳加载

多端：
  同一份元数据 → 不同端渲染器（PC / H5 / 小程序）
  差异通过「端适配层」处理，而非复制元数据

共享：组件实现、Schema 定义、数据绑定求值、布局计算
差异：设计态额外包一层「编辑外壳」
      （选中框、拖拽手柄、hover 高亮、右键菜单）

实现：
  <NodeRenderer mode="design" | "runtime" node={node} />
  外壳只在 mode === "design" 时渲染

优化手段：
  1. 画布虚拟化：视口外的组件不渲染（或用低精度占位）
  2. 选中态隔离：选中框用绝对定位覆盖层，不重渲染组件
  3. 拖拽时冻结：拖拽中只更新指示线，不重算布局
  4. 属性面板懒加载：只渲染当前选中组件的属性
  5. 元数据不可变 + 结构共享：精确控制重渲染范围