zolo

企业级全栈应用框架

model 配置

{
  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（除 menuType === sider 外）
      }]
    },

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

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

    // 当 moduleType === schema 时
    schemaConfig: {
      api: "/api/user", // 数据源API（遵循 RESTFUL 规范）
      schema: { // 板块数据结构
        type: "obejct",
        properties: {
          key: {
            ...schema, // 标准 schema 配置
            type: "", // 字段类型
            label: "", // 字段的中文名
            // 字段在 table 中的相关配置
            tableOptions: {
              ...elTableColumnConfig, // 标准 el-talbe-column 配置
              toFixed: 0, // 保留小数点后几位
              visible: true, // 默认为 true （false 或 不配置时，标识不在表单中显示）
            },
            // 字段在 search-bar 中的相关配置
            searchOptions: {
              ...elComponentConfig, // 标准 el-component-column 配置
              comType: "", // 配置组件类型 input/select/...
              default: "", // 默认值

              // comType === "select"
              enumList: [], // 下拉框可选项

              // comType === "dynamicSelect"
              api: "", // 数据请求接口
            },
            // 字段在不同动态 component 中的相关配置，前缀对应 componentConfig 中的键值
            // 如：componentConfig.createForm，这里对应 createFormOptions
            // 字段在 createForm 中相关配置
            createFormOptions: {
              ...elComponentConfig, // 标准 el-component 配置
              comType: "", // 组件类型 input/select/input-number
              default: "", // 默认值
              visible: true, // 是否显示 默认值为 true，设置为 false 时不显示
              disabled: false, // 是否禁用 默认值为 false，设置为 true 时不显示

              // 当 comType === "select" 时生效
              enumList: [], // 枚举列表
            },
            editFormOptions: {
              ...elComponentConfig, // 标准 el-component 配置
              comType: "", // 组件类型 input/select/input-number
              default: "", // 默认值
              visible: true, // 是否显示 默认值为 true，设置为 false 时不显示
              disabled: false, // 是否禁用 默认值为 false，设置为 true 时不显示

              // 当 comType === "select" 时生效
              enumList: [], // 枚举列表
            },
            detailPanelOptions: {
              ...elComponentConfig, // 标准 el-component 配置
            }
          }, ...
        },
        // 标记哪些字段是必填项
        required: []
      },
      // table 相关配置
      tableConfig: {
        headerButtons: [
          {
            label: "", // 按钮中文名
            eventKey: "", // 按钮事件名
            eventOptions: {
              // 当 eventKey === "showComponent" 时生效
              comName: "", // 组件名称
            }, // 按钮事件具体配置
            ...elButtonConfig // 标准 el-button 配置
          },
          ...
        ],
        rowButtons: [
          {
            label: "", // 按钮中文名
            eventKey: "", // 按钮事件名
            eventOptions: {
              // eventKey === "showComponent" 时生效
              comName: "", // 组件名称

              // 当 eventKey === "remove"
              params: {
                // paramKey = 参数的键名
                // rowvalueKey = 参数值 （当格式为 schema::tableKey 时，到 table 中寻找相应字段）
              }
            }, // 按钮事件具体配置
            ...elButtonConfig // 标准 el-button 配置
          },
          ...
        ]
      },
      searchConfig: {}, // search-bar 相关配置
      // 动态组件模块配置
      componentConfig: {
        // create-form 表单配置
        createForm: {
          title: "", // 表单标题
          saveBtnText: "", // 保存按钮文案
        },
        // edit-form 表单配置
        editForm: {
          mainKey: "", // 表单主键，用于唯一标识要修改的数据对象
          title: "", // 表单标题
          saveBtnText: "", // 保存按钮文案
        },
        detail-panel: {
          mainKey: "", // 表单主键，用于唯一标识要修改的数据对象
          title: "", // 表单标题
        }
        // ...支持用户动态扩展
      },
    },
  }, ...]
}

服务端启动

参数 homePage 可添加添加系统主页

const { serverStart } = require("@jov1an/zolo");

/**
* 启动 zolo 服务器
* @params {object} options 系统配置
*/
const app = serverStart({});

自定义服务端

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

前端构建

const { frontendBuild } = require("@jov1an/zolo");

// 编译构建前端工程
frontendBuild(process.env._ENV)

自定义页面扩展

1. 在 app/pages/**/ 目录下写入口文件 entry.**.js
2. 支持调用框架启动 vue 应用，也可自定义启动入口文件

// 框架启动应用函数
import boot from "$zoloBoot";

// Component: 页面组件实例 routes: 页面路由数组
boot(Component, routes);

dashboard / custom-view 自定义页扩展

支持添加 dashboard 的自定义页面路由，需同时设置 customConfig 的 path 值

// app/pages 目录下添加配置文件 page.config.js 添加页面自定义设置
export default {
  dashboard: {
    router: ({ routes, siderRoutes }) => {
      // dashboard 子页面路由，path："/view/dashboard/**"
      routes.push();

      // dashboard 侧栏页面路由，path: "**"
      siderRoutes.push();
    },
  },
};

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

添加自定义组件到 schema-view 页面中使用，需配合 dsl 配置

// app/pages 目录下添加配置文件 page.config.js 添加页面自定义设置
export default {
  dashboard: {
    components: {
      // comName: 组件名 Component:组件实例
      [comName]: {
        component: [Component],
      },
    },
  },
};

schema-form 控件扩展

添加自定义组件到 schema-form 中使用，需配合 dsl 配置

export default {
  widgets: {
    schemaForm: {
      components: {
        // comName: 组件名 Component:组件实例
        [comName]: {
          component: [Component],
        },
        // ...支持扩展
      },
    },
  },
};

schema-search-bar 控件扩展

添加自定义组件到 schema-search-bar 中使用，需配合 dsl 配置

export default {
  widgets: {
    schemaSearchBar: {
      components: {
        // comName: 组件名 Component:组件实例
        [comName]: {
          component: [Component],
        },
        // ...支持扩展
      },
    },
  },
};

提交规范

• feat：新功能(feature)
• fix：修复bug
• doc： 文档(documentation)
• style：格式（不影响代码运行的变动）
• refactor：重构（即不是新增功能，也不是修改bug的代码变动）
• test：增加测试
• chore：构建过程或辅助工具的变动