@wshiqyuan/elpis
v1.0.5
Published
``` elpis/ ├── app/ # 应用代码目录 │ ├── controller/ # 控制器层 │ ├── extend/ # 扩展功能 │ ├── middleware/ # 中间件 │ ├── pages/ # 前端页面 │ │ ├── dashboard/ # Dashboard页面 │ │ ├── store/
Readme
elpis
一个企业级全栈应用框架。
目录结构
elpis/
├── app/ # 应用代码目录
│ ├── controller/ # 控制器层
│ ├── extend/ # 扩展功能
│ ├── middleware/ # 中间件
│ ├── pages/ # 前端页面
│ │ ├── dashboard/ # Dashboard页面
│ │ ├── store/ # 状态管理
│ │ └── widgets/ # 通用组件
│ ├── public/ # 静态资源
│ ├── router/ # 路由配置
│ ├── router-schema/ # 路由模式定义
│ ├── service/ # 服务层
│ ├── view/ # 视图模板
│ └── webpack/ # Webpack配置
├── config/ # 配置文件
├── elpis-core/ # 核心框架代码
├── model/ # 数据模型
├── index.js # 框架入口文件
└── package.json # 项目依赖配置核心特性
全栈一体化开发
- 统一的前后端开发体验
- 内置 Vue3 + Koa 技术栈
- 自动化的 Webpack 构建流程
模块化架构设计
- 支持多种页面模板类型（Dashboard、IFrame、自定义等）
- Schema 驱动的动态表单和表格组件
- 可复用的业务组件库
灵活的配置系统
- 支持环境差异化配置（开发/测试/生产）
- 继承式的项目配置机制
- 结构化的菜单和路由配置
开箱即用的功能组件
- Schema Table（数据表格组件）
- Schema Form（动态表单组件）
- Schema Search Bar（搜索栏组件）
- Header Container（头部容器）
- Sider Container（侧边栏容器）
快速开始
安装依赖
npm install启动开发服务器
npm run dev构建生产环境
npm run build:dev
or
npm run build:prod框架架构
后端架构
Elpis 后端基于 Koa 框架构建，采用分层架构设计：
请求 -> Middleware -> Router -> Controller -> Service -> Model各层职责：
- Middleware: 请求预处理、权限校验等
- Router: 路由分发
- Controller: 请求处理、参数校验
- Service: 业务逻辑处理
- Model: 数据访问层
前端架构
前端基于 Vue3 Composition API 构建，采用组件化开发模式：
App -> Pages -> Components -> Widgets主要技术栈：
- Vue3 + Pinia 状态管理
- Element Plus UI 组件库
- Webpack 模块打包工具
- Vue Router 路由管理
module 配置
模块配置是 Elpis 框架的核心概念，用于定义应用的结构和行为：
{
mode: 'dashboard';// 模板类型，不同模板类型对应不一样的模板数据结构
name: ''; // 名称
desc: ''; // 描述
icon: ''; // icon
homePage: ''; // 首页(项目配置)
// 头部菜单
menu: [{
key: '', // 菜单唯一描述
name: '', // 菜单名称
menuType: '', // 枚举值, group / module
// 当 menuType == group 时, 可填
subMenu: [{
// 可递归 menuItem
}, ...],
// 当 menuType == module 时, 可填
moduleType: '', // 枚举值：sider/iframe/custom/schema
// 当 moduleType == sider 时, 可填
siderConfig: {
menu: [{
// 可递归 menuItem(除 moduleType === sider)
}, ...]
},
// 当 moduleType == iframe 时, 可填
iframeConfig: {
path: '', // iframe 路径
},
// 当 moduleType == custom 时, 可填
customConfig: {
path: '', // 自定义路由路径
},
// 当 moduleType == schema 时, 可填
schemaConfig: {
api: '', // 数据源API (遵循 RESTFUL 规范)
schema: { // 板块数据结构
type: 'object',
properties: {
key: {
...schema, // 标准 schema 配置
type: '', // 字段类型
label: '', // 字段的中文名
// 字段在 table 中的相关配置
tableOption: {
...elTableColumnConfig, // 标准 el-table-column 配置
toFixed: 0, // 保留小数点后几位
visible: true, // 默认为 true (false时，表示不在表单中显示)
},
// 字段在 search-bar 中的相关配置
searchOption: {
...elComponentConfig, // 标准 el-component 配置
comType: '', // 配置组件类型 input/select/.....
default: '', // 默认值
// comType === 'select' 时
enumList: [], // 下拉框可选项
// comType === 'dynamicSelect' 时
api: '',
},
// 字段在不同动态 component 中的相关配置，前缀对应 componentConfig 中的键值
// 如：componentConfig.createForm, 这里对应 createFormOption
// 字段在 createForm 中相关配置
createFormOption: {
...elComponentConfig, // 标准 el-component 配置
comType: '', // 控件类型 input/select/input-number/.....
visible: true, // 是否展示 (true/false), 默认为 true
disabled: false, // 是否禁用 (true/false), 默认为 false
default: '', // 默认值
// comType === 'select' 时生效
enumList: [] // 枚举列表
},
// 字段在 editForm 表单中的相关配置
editFormOption: {
...elComponentConfig, // 标准 el-component 配置
comType: '', // 控件类型 input/select/input-number/.....
visible: true, // 是否展示 (true/false), 默认为 true
disabled: false, // 是否禁用 (true/false), 默认为 false
default: '', // 默认值
// comType ==='select' 时生效
enumList: [] // 枚举列表
},
detailPanelOption: {
...elComponentConfig // 标准 el-component 配置
}
},
...
},
required: [], // 标记哪些字段是必填项
},
// table 相关配置
tableConfig: {
headerButtons: [{
label: '', // 按钮中文名
eventKey: '', // 按钮事件名
// 按钮事件具体配置
eventOption: {
// 当 eventKey === 'showComponent'
comName: '' // 组件名称
},
...elButtonConfig // 标准 el-button-config 配置
}, ...],
rowButtons: [{
label: '', // 按钮中文名
eventKey: '', // 按钮事件名
eventOption: {
// 当 eventKey === 'showComponent'
comName: '', // 组件名称
// 当 eventKey === 'remove'
params: {
// paramKey = 参数的键值
// rowValueKey = 参数值，格式为 schema::tableKey，到 table 中找相应的字段
paramKey: rowValueKey
}
}, // 按钮事件具体配置
...elButtonConfig // 标准 el-button-config 配置
}, ...]
},
// search-bar 相关配置
searchConfig: {},
// 动态组件 相关配置
componentConfig: {
// create-form 表单相关配置
createFrom: {
title: '', // 表单标题
saveBtnText: '', // 保存按钮文案
},
// edit-form 表单相关配置
editForm: {
mainKey: '', // 表单主键，用于唯一要修改的数据对象
title: '', // 表单标题
saveBtnText: '', // 保存按钮文案
},
// detail-panel 相关配置
detailPanel: {
mainKey: '', // 表单主键，用于唯一要修改的数据对象
title: '', // 表单标题
}
// ....支持用户动态扩展
}
}
}, ...]
}服务端启动
const { serverStart } = require("@wshiqyuan/elpis");
// 启动 elpis 服务
const app = serverStart({
name: "your-app-name",
homePath: "/",
});自定义服务端
支持以下服务端功能的自定义扩展：
- router-schema: 路由模式定义
- router: 路由配置
- controller: 控制器层
- service: 服务层
- extend: 扩展功能
- config: 配置文件
前端构建
const { frontendBuild } = require("@wshiqyuan/elpis");
// 编译构建前端工程
frontendBuild(process.env._ENV);自定义页面扩展
- 在
app/pages/目录下创建入口文件 entry.xxx.js
dashboard / custom-view 自定义页面扩展
- 在
app/pages/dashboard/xxx下写页面
dashboard / schema-view / components 动态组件扩展
- 在
app/pages/dashboard/complex-view/schema-view/components下写组件 - 配置到
app/pages/dashboard/complex-view/schema-view/components/component-config.js
schema-form 控件扩展
- 在
app/pages/widgets/schema-form/complex-view下写控件 - 配置到
app/pages/widgets/schema-form/form-item-config.js
schema-search-bar 控件扩展
- 在
app/pages/widgets/schema-search-bar/complex-view下写控件 - 配置到
app/pages/widgets/schema-search-bar/search-item-config.js
header-container 控件扩展
- 在
app/pages/widgets/header-container/complex-view下写控件 - 配置到
app/pages/widgets/header-container/header-config.js
开发指南
环境配置
支持三种环境配置：
- 开发环境：config.local.js
- 测试环境：config.beta.js
- 生产环境：config.prod.js
数据模型定义
模型文件位于 model/ 目录下，支持模型继承和项目配置覆盖。
路由配置
路由文件位于 app/router/ 目录下，支持 RESTful API 风格的路由定义。
中间件开发
中间件文件位于 app/middleware/ 目录下，可用于请求拦截、权限校验等功能。