epx-frame 5.2.7 → 5.3.0-beta

package/README.md

@@ -1,108 +1,234 @@
-# 卡片容器
-## module容器
-moduleRouters存储跳转记录，如果不存在则显示主模块
-## moduleIndex 菜单容器
-具有左侧菜单，在module容器内部，menuRouters存储菜单路由，如果不存在则显示module容器页面
-## 跳转方式处理
-如果是新标签页方式，则以路由跳转的方式打开新模块，其他情况则调用容器跳转方式，在menu容器内部使用menuRouters跳转，否则使用moduleRouters
-## 容器销毁后清空routers
+# EPX Frame - 低代码开发平台
 
+## 项目简介
+
+EPX Frame 是一个基于 Vue 2.7 的低代码开发平台，通过代码和页面组件配置相结合的方式，实现快速构建企业级应用。平台采用配置驱动的架构，开发者可以通过可视化配置页面和组件，无需编写大量重复代码即可构建完整的业务系统。
+
+## 技术栈
+
+- **前端框架**: Vue 2.7
+- **状态管理**: Vuex 3.6
+- **路由管理**: Vue Router 3.6
+- **UI 框架**: 
+  - Element UI 2.15 (PC 端)
+  - Vant 2.12 (移动端)
+- **构建工具**: Webpack 4
+- **其他核心库**:
+  - BPMN.js (流程设计)
+  - X6 (流程图)
+  - CodeMirror (代码编辑器)
+  - Canvas Editor (富文本编辑器)
 
-## ~~创建新页面方法~~
-createpage
-## ~~返回上一级方法~~
+## 核心架构
 
-## ~~修改页面跳转方法 和 页面参数获取方式~~
+### 1. 配置驱动机制
 
+平台采用**配置驱动**的开发模式，页面和组件通过 JSON 配置来定义：
 
-## list模板问题
-* 筛选pc端
-* clickFlag配置
-* ID默认为隐藏?
-* 按钮显示问题  
+- **页面配置**: 存储在数据库中，通过 API 获取，包含组件列表、布局、样式、事件等
+- **组件配置**: 每个组件都有独立的配置项，支持属性、样式、事件等配置
+- **动态渲染**: 根据配置动态加载和渲染组件，支持组件嵌套和动态组合
 
-## ~~默认打开模块页面~~
+**配置示例**:
+```javascript
+{
+  component: "entity-list",  // 组件类型
+  configs: {                 // 组件配置
+    metaId: "FM_USER",
+    searchFields: [...],
+    keywords: "name"
+  },
+  items: [...]              // 子组件列表
+}
+```
 
+### 2. 组件系统
 
-## ~~组件路径和文件名~~
+#### 2.1 组件包 (packages)
+位于 `src/frame/packages/`，包含丰富的预定义组件：
+
+- **数据组件**: `entity-list` (列表), `entity-form` (表单), `entity-tree` (树形)
+- **布局组件**: `dashboard` (仪表盘), `grid` (网格), `tabs` (标签页)
+- **业务组件**: `approval-index` (审批), `task-list` (任务列表)
+- **容器组件**: `page` (页面), `component` (组件容器)
+
+#### 2.2 组件核心机制
+- **Component Mixin**: 所有组件都通过 `src/utils/mixins/component.js` 提供统一的基础能力
+- **配置注入**: 组件配置通过 `compConfigs` prop 注入，支持动态更新
+- **事件系统**: 支持自定义事件和 JS 事件配置
+- **样式隔离**: 支持组件级 CSS，通过动态注入实现样式隔离
+
+### 3. 容器系统
+
+平台采用**容器化**的页面管理机制，支持多层级容器嵌套：
+
+#### 3.1 Module 容器 (模块容器)
+- **功能**: 管理模块级别的页面路由
+- **路由存储**: `moduleRouters` 存储跳转记录
+- **默认行为**: 如果不存在路由记录，则显示主模块页面
+- **实现位置**: `src/frame/views/Module.vue`
+
+#### 3.2 Menu 容器 (菜单容器)
+- **功能**: 在 Module 容器内部提供左侧菜单导航
+- **路由存储**: `menuRouters` 存储菜单路由记录
+- **默认行为**: 如果不存在路由记录，则显示 Module 容器页面
+- **实现位置**: `src/frame/packages/menu-index/`
+
+#### 3.3 路由跳转机制
+- **新标签页方式**: 使用 Vue Router 进行路由跳转
+- **容器内跳转**: 
+  - Menu 容器内使用 `menuRouters` 管理
+  - Module 容器内使用 `moduleRouters` 管理
+- **容器销毁**: 容器销毁时自动清空对应的路由记录
+
+### 4. 页面设计器 (Page Designer)
+
+位于 `src/frame/page-designer/`，提供可视化页面设计能力：
+
+- **组件库**: 提供可拖拽的组件库
+- **属性配置**: 可视化配置组件属性
+- **样式编辑**: CSS 编辑器支持自定义样式
+- **JS 事件**: 支持编写 JS 事件处理逻辑
+- **模板库**: 支持保存和复用页面模板
+
+### 5. 状态管理 (Vuex)
+
+#### 5.1 核心模块
+
+- **page**: 页面配置管理 (`src/store/modules/page.js`)
+  - 页面配置缓存
+  - 模板库管理
+  - 组件库管理
+
+- **router**: 路由状态管理 (`src/store/modules/router.js`)
+  - Module 路由管理
+  - Menu 路由管理
+  - 全局参数管理
+
+- **meta**: 对象元数据管理 (`src/store/modules/meta.js`)
+  - 对象定义缓存
+  - 字段配置管理
+
+- **config**: 系统配置管理 (`src/store/modules/config.js`)
+  - 系统配置
+  - 应用配置
+  - 菜单管理
+
+### 6. 参数传递机制
+
+#### 6.1 参数类型
+
+- **当前页面参数**: 页面 props → menuRoute → moduleRoute
+- **全局参数**: globalQuery (存储在 Vuex 中)
+
+#### 6.2 动态参数
+
+支持动态参数替换，使用 `#{variable}` 语法：
+
+- `#{user.id}`: 获取当前登录用户 ID
+- `#{query.moduleId}`: 从查询参数获取 moduleId
+- `#{meta.field}`: 从对象元数据获取字段值
+
+参数解析逻辑：解析符合 `/#{.+}/` 格式的参数，替换为真实变量值
+
+## 目录结构
+
+```
+src/
+├── api/                    # API 接口定义
+├── assets/                 # 静态资源
+├── frame/                  # 核心框架代码
+│   ├── base/              # 基础页面组件
+│   ├── components/        # 通用组件
+│   ├── packages/          # 组件包 (核心组件库)
+│   │   ├── entity-list/   # 列表组件
+│   │   ├── form/          # 表单组件
+│   │   ├── page/          # 页面组件
+│   │   ├── menu-index/    # 菜单容器
+│   │   └── ...            # 其他组件
+│   ├── page-designer/     # 页面设计器
+│   └── views/             # 视图页面
+├── plugins/               # 插件配置
+├── router/                # 路由配置
+├── store/                 # Vuex 状态管理
+│   └── modules/           # 状态模块
+├── styles/                # 全局样式
+├── utils/                 # 工具函数
+│   └── mixins/            # Mixin (组件核心逻辑)
+└── main.js                # 入口文件
+```
 
+## 核心概念
+
+### 页面 (Page)
+- 页面的基本容器，通过 `epx-page` 组件加载
+- 支持通过 `pageId` 或 `metaId + flag` 加载配置
+- 支持嵌套和动态加载
+
+### 组件 (Component)
+- 可配置的页面元素
+- 通过 `epx-component` 动态渲染
+- 支持嵌套组合，形成复杂的页面结构
+
+### 对象 (Meta)
+- 业务对象的元数据定义
+- 包含字段定义、验证规则等
+- 支持关联、子集等复杂关系
+
+### 模板 (Template)
+- 可复用的页面模板
+- 支持保存和加载模板配置
+- 用于快速创建相似页面
 
-## ~~导出组件名称~~
-
-## ~~登录页面返回到最近页面~~
-
-
-## 头部显示逻辑（后续开发）
-
-## 打包发布
-
-## 页面设置
-
-## 对象设置
-
-## 列表
-* 关键词搜索  
-* ~~操作列~~
-* 筛选项
-* ~~按钮组配置~~
-
-## 表单
-* ~~子集操作~~
-* 对齐方式
-* ~~单行显示模板~~
-
-## 页面显示
-
-## ~~增加审核流程显示~~
-## ~~增加意见输入~~
-
-# 配置跳转 动态传递参数
-
-# ~~全局query参数 存放当前页面的参数~~
-
-## ~~参数传递~~
-`#{user.id}`, 获取登录user的id
-`#{query.moduleId}` 从参数获取moduleId
-
-## ~~动态获取参数逻辑~~
-解析符合 /#{.+}/的参数替换为真实变量 
-
-## ~~同步方法~~
-
-## ~~增加对象树类型~~
-
-## 查询对象树类型可多选
-
-## ~~容器~~
-
-## ~~返回逻辑- 是否需要改变~~
-
-
-## 筛选模板
-
-
-
-## 参数传递 
-* 当前页面参数- 页面props-> menuRoute -> moduleRoute
-* 全局参数 - globalQuery 
-
-## 子集列表、子集新增模板调整
-
-
-## ~~返回逻辑~~
-## ~~新疆大学打包~~
-
-
-## 子集新增编辑组件传递
-
-## 报表组件 + 高基报表组件
-
-## 容器修改 /多个容器嵌套
-* 页面在容器展示
-* 打开页面在容器打开
-* 该容器没有页面会被销毁
-
-
-## 新增模板修改
+## 开发指南
 
+### 启动项目
+
+```bash
+# 安装依赖
+yarn install
+
+# 开发环境
+yarn serve
 
+# 构建生产版本
+yarn build:prd
+```
+
+### 创建新组件
+
+1. 在 `src/frame/packages/` 下创建组件目录
+2. 实现组件逻辑，使用 `component` mixin
+3. 定义组件配置项
+4. 在组件库中注册
+
+### 配置页面
+
+1. 使用页面设计器可视化配置
+2. 或直接编辑 JSON 配置
+3. 配置保存到数据库
+4. 运行时动态加载渲染
+
+## 特性说明
+
+### 容器系统特性
+- ✅ 支持 Module 容器和 Menu 容器嵌套
+- ✅ 容器内页面路由管理
+- ✅ 容器销毁自动清理路由
+- ✅ 支持新标签页和容器内跳转
+
+### 参数传递特性
+- ✅ 支持多层级参数传递
+- ✅ 动态参数替换
+- ✅ 全局参数管理
+
+### 组件系统特性
+- ✅ 丰富的预定义组件库
+- ✅ 组件配置驱动
+- ✅ 支持组件嵌套
+- ✅ 样式隔离
+- ✅ 事件系统
+
+## 版本信息
+
+当前版本: **5.2.0-beta**