@gct-paas/design-web

PaaS 平台 Web 设计器产品薄层。在 @gct-paas/design 引擎之上，补充 Web 端表单字段设计组件（FieldSelect、FieldRadio、FieldCheckbox 等）。注意：package.json description 误写为「移动端」，实际职责为 Web 设计器层。

本文档面向后续开发与 AI 模型阅读：说明与 design 的分工及薄层扩展方式。

包信息

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

import '@gct-paas/design-web';
export * from '@gct-paas/design-web'; // form-component 等

在 monorepo 中的位置

core → core-web → design（引擎 + register.designer）
                      └── design-web（Web 专属 form-component 薄层）

规划中：design-mobile / design-pad 为对等端侧薄层（仓库暂未包含）。

依赖说明

| 包 | 用途 | | --- | --- | | @gct-paas/design | 设计器引擎、_gct.register.designer | | @gct-paas/core-web | Web UI、编辑器注册 | | @gct-paas/schema | 字段/widget 类型 | | @gct-paas/core | _gct.store 等运行时 | | ant-design-vue | 表单控件 UI |

本包无独立重量级 runtime 依赖，以薄层组件为主。

源码结构

packages/design-web/src/
├── index.ts                    # Vue install 占位 + 导出 components
├── components/
│   └── form-component/         # Web 设计态表单字段
│       ├── FieldSelect.tsx
│       ├── FieldRadio.tsx
│       ├── FieldCheckbox.tsx
│       ├── field-readonly.vue
│       └── field-label/        # 标签/Tag 设计展示
└── loader.ts

与 _gct 的关系

不挂载 _gct。 组件内消费 _gct.store、platform 配置等（需宿主已加载 core + core-web + design）。

无 onInit()，不写入 register.*。

启动与用法

宿主应用需先完成 design 全链路启动，再引入本包组件：

// 1. 完整 design 启动链（见 @gct-paas/design README）
await setupApp(app);
await coreWebSetupApp(app);
await designSetupApp(app);
createAppVue(app);
coreWebCreateAppVue(app);
designCreateAppVue(app);

// 2. 使用 design-web 组件（由 design 注册或业务路由引入）
import { FieldSelect, FieldRadio } from '@gct-paas/design-web';

当前 install() 为占位（console.log），主要消费方式为直接 import 组件。

主要导出速查

| 导出 | 说明 | | --- | --- | | form-component/* | Web 设计态字段组件 | | components/index | 组件聚合导出 | | default install | Vue 插件占位 |

与 @gct-paas/design 的分工

| 层 | 职责 | | --- | --- | | design | 设计器引擎：画布、物料、注册中心、controller、保存/历史 | | design-web | Web 专属字段 UI：设计态下 Select/Radio/Checkbox 等展示与交互 |

新增 Web 设计态字段组件 → 放 design-web；新增通用 widget 类型/注册 → 放 design + schema。

给后续模型的约束

1. 勿将本包当作「移动端设计器」；Mobile 应对等新建 design-mobile（规划中）。
2. 不在本包挂载 _gct 或重复 register.designer。
3. 组件需兼容 design 设计树数据格式，类型引用 @gct-paas/schema。
4. 保持薄层：复杂逻辑下沉 design，本包只做 Web 呈现差异。

本地命令

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