天工开务 - 网页设计器

天工开务网页设计器 是一个支持零代码开发、兼容 Vue / React 等主流框架的低代码平台。它包含两个核心模块：Designer（设计器）与 Renderer（渲染器）。

从 v3.0 起，全面支持零代码开发与跨端可视化编排。

✨ 特性

• 🎨 支持移动端 + PC 端页面的可视化搭建
• 🧱 支持传统流式布局 & 磁贴布局
• 🔧 支持自定义组件（源码组件 + 低代码组件）
• ⚙️ 内置变量赋值、页面跳转、接口调用、信息提示等零代码动作
• 🌍 支持应用级页面编排与全局数据管理
• 🧩 支持沙箱渲染策略（iframe/auto/normal）
• 🧬 WebComponent 输出，适配 Vue / React 等主流前端框架
• 🪄 插件化架构，支持扩展设计器能力

📦 安装

安装核心引擎

# npm
npm i iss-lowcode-engine

# yarn
yarn add iss-lowcode-engine

# pnpm
pnpm add iss-lowcode-engine

安装插件

Webpack 插件

# npm
npm i iss-plugins-webpack-plugin

# yarn
yarn add iss-plugins-webpack-plugin

# pnpm
pnpm add iss-plugins-webpack-plugin

Webpack 5 配置

const WebDesignerServerPlugin = require('iss-plugins-webpack-plugin');
const { WebDesignerServerMiddleware } = require('iss-plugins-webpack-plugin');

module.exports = {
  devServer: {
    setupMiddlewares: WebDesignerServerMiddleware,
  },
  plugins: [new WebDesignerServerPlugin()],
};

Webpack 4 配置

const WebDesignerServerPlugin = require('iss-plugins-webpack-plugin');
const { WebDesignerServerMiddleware4x } = require('iss-plugins-webpack-plugin');

module.exports = {
  devServer: {
    before: WebDesignerServerMiddleware4x,
  },
  plugins: [new WebDesignerServerPlugin()],
};

Vite 插件

# npm
npm i iss-plugins-vite-plugin

# yarn
yarn add iss-plugins-vite-plugin

# pnpm
pnpm add iss-plugins-vite-plugin

Vite 配置示例（以 Vue 为例）

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import webDesignerPlugin from 'iss-plugins-vite-plugin';

export default defineConfig(() => ({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            tag.startsWith('web-designer') || tag.startsWith('web-renderer'),
        },
      },
    }),
    webDesignerPlugin(),
  ],
}));

🚀 快速开始（Vue 示例）

设计器使用

<script lang="ts" setup>
import 'iss-lowcode-engine';
import { onMounted, ref } from 'vue';

const designerRef = ref<any>(null);
const projectSchema = ref<any>({});

onMounted(() => {
  designerRef.value?.init({
    projectSchema: projectSchema,
    webType: 'PC',
    pluginSaveTemplate: { hide: true },
    pluginCodeGen: { hide: true },
    hideLogo: true,
  });
});

const handleSave = async ({ detail }: any) => {
  const { done, content } = detail;
  try {
    console.log('save', content);
    done(true);
  } catch (error) {
    done(false);
  }
};
</script>

<template>
  <web-designer ref="designerRef" @save="handleSave" />
</template>

渲染器使用

<script lang="ts" setup>
import 'iss-lowcode-engine/dist/js/renderer.js';
import { onMounted, ref } from 'vue';

const rendererRef = ref<any>(null);
const info = ref<any>(null);

onMounted(() => {
  rendererRef.value?.init({
    projectSchema: info.value?.projectSchema,
    packages: info.value?.packages,
    extensions: info.value?.extensions,
  });
});
</script>

<template>
  <div class="renderer-box">
    <web-renderer ref="rendererRef" />
  </div>
</template>

⚙️ 属性配置

设计器 props

| 属性名 | 类型 | 说明 | | ----------------------- | -------------- | ------------------------------------ | | lowcodeComponents | Array | 低代码组件列表 | | resourceComponents | Array | 源码组件（包含 code、pkg 等） | | isComponent | boolean | 是否为低代码组件设计模式 | | webType | 'PC' \| 'MOBILE' | 网页类型（PC 或移动） | | pluginSaveTemplate | Object | 保存模版插件配置（如 {hide:true}） | | pluginCodeGen | Object | 出码插件配置 | | pluginViewManagerPane | Object | 页面管理面板配置 | | showApiList | boolean | 是否显示接口面板 | | apiList | Array | 接口列表 | | dragLock | boolean | 是否禁用拖拽 | | hideLogo | boolean | 是否隐藏 Logo | | scenarioInfo | {logo, href} | 自定义图标和跳转链接 |

渲染器 props

| 属性名 | 类型 | 说明 | | ------------------- | ---------------- | ----------------------------------- | | projectSchema | any | 渲染目标 schema 数据 | | packages | any | 所需依赖包 | | extensions | any | 第三方扩展工具 | | lowcodeComponents | any | 可选，提供运行时低代码组件 | | webType | string | PC 或 MOBILE | | sandbox | 'iframe' \| 'auto' \| 'preview' | 沙箱渲染模式 |

📝 License

本项目遵循 MIT License。

版权所有 © 2024 天工开务。
本项目发布于 npm，源代码暂未公开。

🙏 致谢与开源声明

本项目基于阿里巴巴开源项目 Lowcode Engine 进行扩展开发，遵循其 MIT 协议。

在使用本项目时，请同时遵守原项目的开源协议。

📢 使用声明

本项目仅用于技术学习与学术交流，禁止用于以下用途：

• 任何违法、违规活动；
• 未经授权的商业运营、收费服务或二次分发；
• 未保留原始版权声明的修改版本发布。

如需进一步的功能集成或商业定制，请联系研发团队：天工开务