@gct-paas/render-web

PaaS 平台 Web 渲染产品层底包。在 @gct-paas/render 引擎之上，提供 Web 页面布局（BasicPage）、卡片视图渲染插件、页面事件 hooks、应用级 MQTT 等运行时能力。

本文档面向后续开发与 AI 模型阅读：说明 Web 渲染扩展点及启动方式。

包信息

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

import { renderWebSetupApp, setupPageEvent, usePageEvent } from '@gct-paas/render-web';

在 monorepo 中的位置

core → core-web → render（引擎）
       │              └── render-web（Web 产品层）
       └── core-components（部分组件）

依赖说明

关键 workspace 依赖

| 包 | 用途 | | --- | --- | | @gct-paas/render | 渲染引擎、RenderNodeRegister | | @gct-paas/core-web | UI、message、表单 | | @gct-paas/core-components | 跨端组件 | | @gct-paas/schema | 类型 | | @gct-paas/core | _gct 全局 |

主要工具依赖

| 依赖 | 用途 | | --- | --- | | ant-design-vue | Web UI | | exceljs | 导出/Excel | | @wangeditor/editor-for-vue | 富文本渲染 | | colord | 颜色处理 |

源码结构

packages/render-web/src/
├── index.ts
├── setup-app.ts              # renderWebSetupApp
├── Event/Events.ts           # setupPageEvent、usePageEvent
├── modules/app-mqtt/         # 应用 MQTT
├── components/               # BasicPage、BasicPageRender、表单字段等
├── plugins/
│   ├── render-card-field/    # 卡片视图字段 provider + 组件
│   └── render-card-view-page/
├── hooks/
└── utils/

与 _gct 的关系

不挂载 _gct 新成员，消费已有能力：

_gct.message.error(/* … */);
_gct.store / _gct.router / _gct.mqtt;
_gct.register.render;  // 来自 @gct-paas/render

renderWebSetupApp 向 RenderNodeRegister 注册 Web card-view 节点（FIELD / PAGE / PAGE_LOWER）。

启动与用法

完整 Web 运行时启动链：

import { setupApp, createAppVue } from '@gct-paas/core';
import { coreWebSetupApp, coreWebCreateAppVue } from '@gct-paas/core-web';
import { renderSetupApp } from '@gct-paas/render';
import { renderWebSetupApp } from '@gct-paas/render-web';

const app = createApp(Root);

await setupApp(app);
await coreWebSetupApp(app);
await renderSetupApp(app);

createAppVue(app);
coreWebCreateAppVue(app);
renderWebSetupApp(app);
// 注册 BasicPage、RenderCardField、card-view RenderNodeRegister

app.mount('#app');

页面事件：

import { setupPageEvent, usePageEvent } from '@gct-paas/render-web';

setupPageEvent(/* … */);
const { /* … */ } = usePageEvent();

主要导出速查

| 类别 | 示例 | | --- | --- | | 启动 | renderWebSetupApp | | 布局 | BasicPage、BasicPageRender | | 事件 | setupPageEvent、usePageEvent、EventsPC | | 模块 | app-mqtt | | 插件 | RenderCardField、RenderCardViewPage 及 provider | | 组件 | components/index 表单/展示组件 |

与 @gct-paas/render 的分工

| 层 | 职责 | | --- | --- | | render | 引擎：controller、Event 核心、register.render、_kit | | render-web | Web 产品：页面壳、card-view、Excel、Web 字段组件、页面事件封装 |

新增 Web 专属渲染节点 → render-web 的 plugins/ + renderWebSetupApp 注册。
新增 跨端渲染能力 → render 引擎层。

给后续模型的约束

1. Card-view 扩展走 RenderNodeRegister + DesignRenderViewPrefix.CARD_VIEW，与 render 引擎 API 一致。
2. 不要在本包重复实现表达式/Event 引擎（用 @gct-paas/render 的 Event）。
3. 需要 _gct.message 时确保已加载 @gct-paas/core-web。
4. renderWebSetupApp 同步注册全局组件，须在 mount 前调用。

本地命令

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