# visual-design

**Repository Path**: NBegin/visual-design

## Basic Information

- **Project Name**: visual-design
- **Description**: 构建一个企业级智能可视化开发平台前端，旨在通过可视化配置和AI增强能力，快速构建包含财务系统、ERP、WMS、进销存、数字孪生、企业内控、活动推广、企业门户、博客、社区、数据管理、业务流程、移动应用等在内的业务系统前端部分。平台采用元数据驱动架构，支持可视化页面设计、表单设计、打印设计、流程设计、报表设计、大屏设计、在线Excel复杂报表配置、应用流程化创建等核心能力。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 智能可视化开发平台·卓越版

## 项目简介

构建一个企业级智能可视化开发平台前端，旨在通过可视化配置和AI增强能力，快速构建包含财务系统、ERP、WMS、进销存、数字孪生、企业内控、活动推广、企业门户、博客、社区、数据管理、业务流程、移动应用等在内的业务系统前端部分。平台采用元数据驱动架构，支持可视化页面设计、表单设计、打印设计、流程设计、报表设计、大屏设计、在线Excel复杂报表配置、应用流程化创建等核心能力。

## 核心架构

### 元数据驱动
所有设计产物均以标准JSON元数据描述，核心引擎负责元数据解析、渲染、代码生成。

### 设计器集群
每个设计器独立为模块，通过共享内核（core + shared）实现能力复用。

### AI协同层
内置多Agent智能体，支持自然语言生成、草图识别、代码优化等AI增强功能。

### 模块化发布
每个设计器可独立打包发布至NPM，支持整体平台集成或独立使用。

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **UI组件库**: Ant Design Vue（版本4.x）
- **状态管理**: Pinia
- **HTTP客户端**: Axios
- **模拟数据**: Mock.js
- **CSS预处理器**: Less
- **禁止使用TypeScript**，全部采用JavaScript

## 项目结构

项目采用monorepo结构（使用pnpm + changesets管理），包组织如下：

| 包名 | 职责 | 依赖 |
|------|------|------|
| @platform/core | 核心引擎：元数据解析、渲染器、插件注册、事件总线 | 无 |
| @platform/designer-shared | 设计器通用组件与工具（拖拽基类、属性面板基类、历史管理器） | @platform/core |
| @platform/runtime | 运行时渲染引擎（用于预览和生产） | @platform/core |
| @platform/ai-agent | AI协同层多Agent框架 | @platform/core |
| @platform/page-designer | 可视化页面设计器 | @platform/designer-shared, @platform/ai-agent |
| @platform/form-designer | 可视化表单设计器 | @platform/designer-shared, @platform/ai-agent |
| @platform/flow-designer | 可视化流程设计器（基于bpmn-js） | @platform/designer-shared, @platform/ai-agent |
| @platform/report-designer | 可视化报表设计器（基于ECharts、Luckysheet） | @platform/designer-shared, @platform/ai-agent |
| @platform/screen-designer | 可视化大屏设计器（基于Three.js、ECharts、gridstack） | @platform/designer-shared, @platform/ai-agent |
| @platform/excel-designer | 在线Excel复杂报表配置（基于Luckysheet） | @platform/designer-shared, @platform/ai-agent |
| @platform/print-designer | 可视化打印设计器 | @platform/designer-shared, @platform/ai-agent |
| @platform/app-wizard | 应用流程化创建向导 | @platform/core, @platform/ai-agent |

## 快速开始

### 环境准备

- Node.js >= 16.0.0
- pnpm >= 8.0.0

### 安装依赖

```bash
# 安装根项目依赖
pnpm install

# 安装所有子包依赖
pnpm -r install
```

### 开发模式

```bash
# 启动开发服务器
pnpm dev
```

### 构建项目

```bash
# 构建根项目
pnpm build

# 构建所有子包
pnpm -r build
```

### 发布包

```bash
# 发布所有包
pnpm publish -r
```

## 核心模块说明

### 1. 核心引擎 (@platform/core)

- **MetadataEngine**: 提供DSL与JSON Schema的双向转换，支持扩展自定义类型，增强的元数据验证机制
- **RenderEngine**: 动态组件加载器，根据元数据递归渲染组件，支持多种布局类型和性能优化
- **PluginRegistry**: 全局插件注册中心，支持物料插件、属性编辑器插件、数据源插件
- **EventBus**: 跨模块事件通信，支持命名空间、异步事件
- **I18nManager**: 国际化支持，内置中英文语言包
- **ThemeManager**: 主题管理，支持动态切换主题色
- **CodeGenerator**: 支持生成Vue SFC、API接口代码、数据库脚本
- **ExpressionEngine**: 表达式解析与执行引擎，支持复杂表达式绑定
- **AuthManager**: 权限管理，支持组件级权限控制
- **PerformanceMonitor**: 性能监控，收集渲染和组件性能数据

### 2. 设计器共享库 (@platform/designer-shared)

- **DragManager**: 处理拖拽行为的核心逻辑
- **CommandManager**: 基于命令模式实现撤销/重做功能
- **PropertyEditor**: 动态渲染属性面板，支持复杂属性配置
- **Draggable**: 基础拖拽组件
- **PropertyPanel**: 属性面板容器组件
- **CommonCanvas**: 通用画布组件，支持网格、对齐辅助线
- **CommonToolbar**: 通用工具栏组件
- **ComponentLibraryPanel**: 组件库面板
- **HistoryManager**: 历史记录管理

### 3. 页面设计器 (@platform/page-designer)

- 物料面板：展示内置布局组件、基础组件等
- 画布：实时渲染组件，支持选中、移动、调整大小、删除
- 属性面板：选中组件后展示可编辑属性
- 大纲树：展示页面组件树，支持拖拽排序、层级调整
- 历史记录：支持撤销/重做
- 预览模式：在iframe中预览真实页面
- 导出元数据：生成页面描述的JSON文件
- 响应式设计：支持多设备预览和自适应布局
- 主题切换：支持明暗主题和自定义主题

### 4. 表单设计器 (@platform/form-designer)

- 丰富的表单控件库（文本、数字、日期、选择、上传等）
- 可视化表单布局设计
- 表单验证规则配置
- 动态表单支持（条件显示、动态添加字段）
- 表单数据绑定和事件配置
- 子表单和表单列表支持

### 5. 流程设计器 (@platform/flow-designer)

- 基于BPMN 2.0标准的流程设计
- 可视化流程绘制界面
- 流程节点配置（开始、结束、任务、网关等）
- 流程属性和事件配置
- 流程预览和导出
- 自定义流程节点支持

### 6. 报表设计器 (@platform/report-designer)

- 基于ECharts的图表设计
- 表格设计和数据绑定
- 报表布局和样式配置
- 数据源配置和数据过滤
- 报表预览和导出

### 7. 大屏设计器 (@platform/screen-designer)

- 基于Three.js和ECharts的大屏设计
- 可视化大屏布局
- 丰富的大屏组件库
- 数据实时更新支持
- 3D效果和动画配置
- 多设备适配

### 8. Excel设计器 (@platform/excel-designer)

- 基于Luckysheet的在线Excel编辑
- 复杂报表配置
- 公式支持和数据计算
- 图表插入和编辑
- 数据导入导出

### 9. 打印设计器 (@platform/print-designer)

- 可视化打印模板设计
- 打印布局和样式配置
- 数据源绑定
- 打印预览和导出

### 10. 应用向导 (@platform/app-wizard)

- 应用流程化创建
- 模板选择和配置
- 应用生成和部署
- 应用管理和维护

### 11. 运行时引擎 (@platform/runtime)

- 元数据渲染引擎，用于生产环境
- 组件动态加载和渲染
- 性能优化和缓存机制
- 错误处理和容错机制

### 12. AI智能体 (@platform/ai-agent)

- 多Agent智能体框架
- 自然语言生成组件和页面
- 草图识别与转换
- 代码优化建议
- 智能设计辅助

## 使用示例

### 安装页面设计器

```bash
pnpm add @platform/page-designer
```

### 在Vue项目中使用

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import PageDesigner from '@platform/page-designer'
import '@platform/page-designer/dist/style.css'

const app = createApp(App)
app.use(PageDesigner)
app.mount('#app')
```

```vue
<template>
  <div id="app">
    <page-designer />
  </div>
</template>
```

## 开发指南

### 新增设计器

1. 在`packages`目录下创建新的设计器目录
2. 创建`package.json`文件，配置包信息和依赖
3. 创建`src`目录，实现设计器核心功能
4. 创建`vite.config.js`文件，配置构建选项
5. 在根目录的`pnpm-workspace.yaml`中添加新包

### 开发流程

1. 克隆代码仓库
2. 安装依赖
3. 启动开发服务器
4. 进行开发和测试
5. 提交代码
6. 构建并发布

## 贡献指南

1. Fork本仓库
2. 创建特性分支
3. 提交代码
4. 创建Pull Request

## 许可证

MIT

## 联系方式

如有问题或建议，请通过以下方式联系：

- 项目地址：https://github.com/your-org/low-code-platform
- 邮箱：contact@example.com

## 更新日志

### v1.0.2 (2026-03-11)

- 为所有设计器添加返回列表功能，包括：
  - Flow设计器
  - Form设计器
  - Page设计器
  - Print设计器
  - Report设计器
  - Excel设计器
  - Screen设计器
- 修复FlowRenderer组件缺少必需prop的警告
- 修复ExcelDesigner组件导入路径错误导致的500内部服务器错误
- 优化样式导入，避免重复导入设计令牌文件

### v1.0.1 (2026-03-10)

- 实现表单设计器，包含丰富的表单控件库
- 实现流程设计器，基于BPMN 2.0标准
- 实现报表设计器，基于ECharts和表格设计
- 实现大屏设计器，支持3D效果和实时数据
- 实现Excel设计器，基于Luckysheet的在线编辑
- 实现打印设计器，可视化打印模板设计
- 实现应用向导，流程化创建应用
- 增强核心引擎功能，添加ExpressionEngine、AuthManager和PerformanceMonitor
- 优化渲染引擎，支持多种布局和性能优化
- 完善设计器共享库，添加更多通用组件
- 实现AI智能体，支持多Agent协作
- 优化项目结构和构建配置

### v1.0.0 (2026-03-04)

- 初始化项目结构
- 实现核心引擎模块
- 实现设计器共享库
- 实现页面设计器
- 配置构建和发布流程