@gct-paas/design

PaaS 平台设计器引擎底包。提供页面/表单设计视图、物料面板、属性编辑器、设计树 controller/provider 及 widget schema 配置。挂载 _gct.register.designer，供 design-web 及未来 mobile/pad 设计器消费。

本文档面向后续开发与 AI 模型阅读：说明设计器注册机制与启动流程。

包信息

| 项 | 值 | | --- | --- | | 包名 | @gct-paas/design | | 入口 | es/index.mjs（类型：es/index.d.ts） | | 全局类型 | @gct-paas/design/types | | peer | @gct-paas/api、core、core-web、schema、scss、vue>=3 |

import { designSetupApp, designCreateAppVue } from '@gct-paas/design';
import { DesignerRegister } from '@gct-paas/design';
// 引入即 onInit() → _gct.register.designer

在 monorepo 中的位置

core → core-web → design（设计器引擎）
                      └── design-web（Web 设计器薄层）

规划中：design-mobile / design-pad 将复用本包 register.designer.mobile|pad。

依赖说明

关键 workspace 依赖

| 包 | 用途 | | --- | --- | | @gct-paas/core | _gct、store、工具 | | @gct-paas/core-web | 表单/表格编辑器、message、openUtil | | @gct-paas/schema | widget/modal/design 类型契约 | | @gct-paas/scss | 设计器样式 |

主要工具依赖

| 依赖 | 用途 | | --- | --- | | @babel/standalone + esprima-next | 表达式/脚本解析与生成 | | vue3-dnd | 设计画布拖拽 | | @jsplumb/browser-ui | 关系/连线 | | ant-design-vue | 设计器 UI |

源码结构

packages/design/src/
├── index.ts              # onInit → register.designer
├── setup-app.ts          # designSetupApp
├── create-app-vue.ts     # designCreateAppVue
├── register/             # DesignerRegister、PropsEditorRegister、Material/Node
├── components/           # 画布、物料、面板、field-transfer
├── controller/           # 设计视图 controller
├── provider/             # 节点 provider
├── hooks/                # useDesignSave、useDesignHistory、usePropEditor…
├── schema/               # widget 默认 schema、common-config
├── editor/               # 属性编辑器（样式、字段等）
├── data/                 # 设计节点数据结构
└── utils/                # designInterceptors、widget-info 初始化

与 _gct 的关系

引入时自动挂载设计器注册中心（防重复）：

_gct.register.designer = {
  web: new DesignerRegister(),
  mobile: new DesignerRegister(),   // 预留，待 design-mobile 实现
  pad: new DesignerRegister(),      // 预留，待 design-pad 实现
  propsEditor: new PropsEditorRegister(),
};

若已存在 register.designer，打印警告，避免重复引入设计器包。

设计器运行时还依赖 core-web 挂载的：

• _gct.message / confirm / openUtil
• _gct.register.editor / formItem / tableEditor

启动与用法

import { setupApp, createAppVue } from '@gct-paas/core';
import { coreWebSetupApp, coreWebCreateAppVue } from '@gct-paas/core-web';
import { designSetupApp, designCreateAppVue } from '@gct-paas/design';

const app = createApp(Root);

await setupApp(app);
await coreWebSetupApp(app);
await designSetupApp(app);
// designSetupApp：locale、widget-info 初始化、designInterceptors、loadAppInfo

createAppVue(app);
coreWebCreateAppVue(app);
designCreateAppVue(app);   // 注册设计器 Components + Editor

app.mount('#app');

注册 widget / 物料示例：

_gct.register.designer.web.registerWidget(/* … */);

具体 API 见 DesignerRegister、MaterialRegister、NodeRegister。

主要导出速查

| 类别 | 示例 | | --- | --- | | 启动 | designSetupApp、designCreateAppVue | | 注册 | DesignerRegister、PropsEditorRegister、MaterialRegister | | 组件 | components/ 设计画布、物料、面板 | | Controller/Provider | 设计视图控制与节点渲染扩展 | | Hooks | useDesignSave、useDesignHistory、usePropEditor | | Schema | schema/ 下各 widget 默认配置 |

给后续模型的约束

1. 新增设计器 widget：在 register + schema + provider 链路扩展，类型同步 @gct-paas/schema。
2. 不要绕过 _gct.register.designer 直接注册组件到 Vue 全局（除非 designCreateAppVue 已覆盖）。
3. HTTP 扩展用 designInterceptors，在 designSetupApp 中已 HttpUtil.use。
4. mobile/pad 设计器应使用 register.designer.mobile|pad，勿与 web 混用同一 Register 实例。

本地命令

cd packages/design
npm run dev
npm run build        # lint + vue-tsc + 双 Vite 构建