@xinight/elpis NPM

elpis

一个企业级应用，通过全栈实现

项目介绍

这是一个灵活的仪表盘配置模型系统，提供了一个完整的菜单和数据模型配置方案。该系统支持多种模块类型和丰富的界面组件配置，主要特点包括：

核心功能

🎯 支持多种模块类型：
- Sidebar 侧边栏模式
- IFrame 嵌入模式
- Custom 自定义模式
- Schema 数据模型模式
📊 强大的 Schema 配置能力：
- 完整的数据结构定义
- 灵活的表格配置
- 可自定义的表单组件
- 丰富的搜索条件配置
🎨 丰富的 UI 组件支持：
- 支持多种表单控件类型
- 可配置的表格列
- 自定义按钮和事件处理
- 动态数据源集成

技术特点

基于 JSON Schema 标准
RESTful API 集成
可扩展的组件系统
灵活的配置模型

配置示例

系统支持多种控件类型：

input（输入框）
select（选择器）
date（日期选择）
time（时间选择）
datetime（日期时间选择）
number（数字输入）
switch（开关）
checkbox（复选框）
radio（单选框）
textarea（文本域）
color（颜色选择器）
rate（评分）
upload（上传）

model 配置

{
  mode: "dashboard", // 模板类型：不同的模板类型对应不同的模板数据结构
  name: "", // 模板名称
  description: "", // 模板描述
  icon: "", // 模板图标
  homePage: "", // 首页路由路径
  // 头部菜单
  menu: [
    {
      key: "", // 菜单项唯一标识
      name: "", // 菜单项名称
      icon: "", // 菜单项图标
      menuType: "", // 菜单项类型：枚举值：group / module
      // 当 menuType === group 时，subMenu 为子菜单项数组
      // 当 menuType === module 时，path 为路由路径
      subMenu: [
        {
          // 可递归menuItem结构
          key: "", // 子菜单项唯一标识
          name: "", // 子菜单项名称
          icon: "", // 子菜单项图标
          path: "", // 子菜单项路由路径
        },
        //... 其他子菜单项
      ],

      // 当 menuType === module 时，moduleType 为模块类型：枚举值：sidebar / iframe / custom / schema
      moduleType: "", // 模块类型：枚举值：iframe / custom / schema

      // 当 moduleType === siderbar 时
      sidebarConfig: {
        menu: [
          {
            // 可递归menuItem结构 (除 moduleType 为 sidebar 的菜单项外)
            key: "", // 子菜单项唯一标识
            name: "", // 子菜单项名称
            icon: "", // 子菜单项图标
            path: "", // 子菜单项路由路径
          },
          //... 其他子菜单项
        ],
      },

      // 当 moduleType === iframe 时
      iframeConfig: {
        path: "", // 路由路径
      },

      // 当 moduleType === custom 时
      customConfig: {
        path: "", // 路由路径
      },

      // 当 moduleType === schema 时
      schemaConfig: {
        api: "", // 数据源API （遵循 RESTFUL 规范）
        schema: {
          $id: "https://g-anoq2086.coding.net/login?redirect=https%3A%2F%2Fg-anoq2086.coding.net%2Fp%2Felpis%2Fd%2Felpis%2Fgit%2Ftree%2Ffeature%252Fcomponent%2Fdocs%2Fschemas%2Fdashboard-model.json", // JSON Schema: Schema的唯一标识符
          $schema: "http://json-schema.org/draft-07/schema#", // JSON Schema: 使用的Schema版本
          type: "object", // JSON Schema: 定义这是一个对象类型
          title: "数据模型", // JSON Schema: 数据模型的标题
          description: "定义数据结构和字段配置的模型", // JSON Schema: 数据模型的描述
          properties: {
            // 字段定义
            key: {
              ...schema, // 标准 schema 定义
              type: "", // 字段类型
              label: "", // 字段名称
              // 字段在 table 中的相关配置
              tableOption: {
                ...elTableColumnConfig, // 标准 el-table-column 配置
                toFixed: 0, // 保留位数
                visible: true, // 是否显示在表格中 (默认 true)
              },
              // 字段在 search-bar 中的相关配置
              searchOption: {
                ...elComponentConfig, // 标准 el-component 配置
                comType: "", // 配置控件类型 input/select/date/time/datetime/number/switch/checkbox/radio/textarea/color/rate/upload/rate
                default: "", // 默认值
                // comType 为 select 时，enumList 为选项数组
                enumList: [],
                // comType 为 dynamicSelect 时，api 为上游数据源API （遵循 RESTFUL 规范）
                api: "",
              },
              // 字段在不同动态 component 中的相关配置，前缀对应 componentConfig 的 key
              // 如：component.createForm，这里对应 createFormOption
              // 字段在 createForm 中的相关配置
              createFormOption: {
                ...elComponentConfig, // 标准 el-component 配置
                comType: "", // 配置控件类型 input/select/date/time/datetime/number/switch/checkbox/radio/textarea/color/rate/upload/rate
                default: "", // 默认值
                visible: true, // 是否显示在表单中 (默认 true)
                // comType 为 select 时，enumList 为选项数组
                enumList: [],
                // comType 为 dynamicSelect 时，api 为上游数据源API （遵循 RESTFUL 规范）
                api: "",
              },
              // 字段在 editForm 中的相关配置
              editFormOption: {
                ...elComponentConfig, // 标准 el-component 配置
                comType: "", // 配置控件类型 input/select/date/time/datetime/number/switch/checkbox/radio/textarea/color/rate/upload/rate
                default: "", // 默认值
                visible: true, // 是否显示在表单中 (默认 true)
                // comType 为 select 时，enumList 为选项数组
                enumList: [],
                // comType 为 dynamicSelect 时，api 为上游数据源API （遵循 RESTFUL 规范）
                api: "",
              },
              // 字段在 detailPannel 中的相关配置
              detailPanelOption: {
                ...elComponentConfig, // 标准 el-component 配置
              },
            },

            // ... 其他字段定义
          },
          required: [], // 必填字段
        }, // 数据结构定义
        tableConfig: {
          headerButtons: [
            {
              label: "", // 按钮名称
              eventKey: "", // 按钮事件名称
              eventOption: {}, // 按钮事件配置项
              ...elButtonConfig, // 标准 el-button 配置
            },
          ],
          rowButtons: [
            {
              label: "", // 按钮名称
              eventKey: "", // 按钮事件名称
              eventOption: {
                // 当 evntKey 为 remove 时
                params: {
                  // paramsKey = 参数的键值
                  paramKey: rowValueKey, // 当前行的 key 值 = 参数值(格式为 schema::tableKey ，到 table 中找相应的字段)
                },
              }, // 按钮事件配置项
              ...elButtonConfig, // 标准 el-button 配置
            },
          ],
        }, // 表格配置
        searchConfig: {}, // 搜索配置
        componentConfig: {
          // 组件配置
          comName: {
            title: "", // 组件标题
            saveBtnText: "", // 保存按钮文本
          },
          // 例：
          createForm: {
            title: "", // 组件标题
            saveBtnText: "", // 保存按钮文本
          },
          editForm: {
            mainKey: "", // 表单主键，用于唯一标识
            title: "", // 组件标题
            saveBtnText: "", // 保存按钮文本
          },
          detailPanel: {
            mainKey: "", // 表单主键，用于唯一标识
            title: "", // 组件标题
          },
        }, // 表单配置
      },
    },

    //... 其他菜单项
  ],
}

### 服务启动

```javascript
const { serverStart } = require("@bitcreate/elpis");

// 启动 elpis 服务
const app = serverStart({});

服务端启动

const { serverStart } = require("@xinight/elpis");

// 启动 elpis 服务
const app = serverStart({
  // 自定义服务端配置
});
```

### 自定义服务端

- router-schema
- router
- controller
- service
- extend
- config

### 前端构建

```javascript
const { frontendBuild } = require("@xinight/elpis");

// 编译构建前端工程
frontendBuild(process.env_ENV);

webpack 扩展

配置在 app/webpack.config.js

自定义页面扩展

在 app/pages/ 目录下写入口 entry.xxx.js

dashboard / custom-view 自定义页面扩展

在 app/pages/dashboard/xxx 下写页面

dashboard / schema-view / component 动态组件扩展

在 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