# 天工开务 - 网页设计器

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

---

## ✨ 特性

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

---

## 📦 安装

### 安装核心引擎

```bash
# npm
npm i iss-lowcode-engine

# yarn
yarn add iss-lowcode-engine

# pnpm
pnpm add iss-lowcode-engine
```

---

### 安装插件

#### Webpack 插件

```bash
# npm
npm i iss-plugins-webpack-plugin

# yarn
yarn add iss-plugins-webpack-plugin

# pnpm
pnpm add iss-plugins-webpack-plugin
```

##### Webpack 5 配置

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

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

##### Webpack 4 配置

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

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

---

#### Vite 插件

```bash
# npm
npm i iss-plugins-vite-plugin

# yarn
yarn add iss-plugins-vite-plugin

# pnpm
pnpm add iss-plugins-vite-plugin
```

##### Vite 配置示例（以 Vue 为例）

```ts
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 示例）

### 设计器使用

```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>
```

---

### 渲染器使用

```vue
<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](./LICENSE)。

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

---

## 🙏 致谢与开源声明

本项目基于阿里巴巴开源项目 [Lowcode Engine](https://github.com/alibaba/lowcode-engine) 进行扩展开发，遵循其 MIT 协议。

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

---

## 📢 使用声明

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

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

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