CCMS

🌏 关于CCMS

CCMS是一套完善、通用的可配置化的方案。通过配置化自动生成中后台（CMS）界面。
CCMS将内容管理系统前端页面抽象为在若干API进行流转的系统。进一步将对后台API的请求按照逻辑类型划分为表单提交、列表展示、查询数据等类型。通过JSON数据格式描述各API请求的接口信息、入参、出参及各种常见校验和简单逻辑，动态渲染前端页面。最终实现零开发搭建内容管理系统。

✨ 特点

• 🛠️ 配置生成CMS后台管理界面
• 📚 通过步骤设计覆盖不同后台业务应用场景
• 🏹 跨页面数据传输、跨组件交互
• 🎏 支持引入不同组件库

工作原理

通过代理组件的属性定义、数据请求、跨组件交互和状态机判断，实现基于组件化的前端页面配置化。

便捷使用

通过配置JSON，定义表单步骤与组件。生成完整的后台管理功能。

组件库接入

参照猎户座组件开发规范，开发者可以提供丰富种类的组件以供自己使用，并可以将组件发布供所用用户选用。

⚙️ 使用

npm install ccms ccms-antd

🌰 示例

import { CCMS } from 'ccms-antd';

const App = () => (
  <>
    <CCMS
      config={config}
      sourceData={data}
      baseRoute={'/'}
      checkPageAuth={async () => true}
      loadPageURL={async (id) => `/url?id=${id}&type=page`}
      loadPageFrameURL={async (id) => `/url?id=${id}&type=open`}
      loadPageList={async () => '#'}
      loadPageConfig={async (page) => newConfig }
      loadDomain={async () => ''}
      handlePageRedirect={() => {xxx}}
      callback={() => {xxx}}
      onMount={() => {xxx}}
    />
  </>
);

📖 API文档

👉 Api文档

参数	说明	类型	默认值	版本
config	配置项，参见附录一	object	-
sourceData	数据项，参见附录二	object	-
baseRoute	页面路由	string	/
checkPageAuth	页面鉴权	function(e)	-
loadPageURL	获取页面的url(用于当前页面打开)	function(pageId)	-
loadPageFrameURL	获取页面的url(用于新Tab页打开)	function(pageId)	-
loadPageList	加载页面列表，选中后可通过执行loadPageConfig获取页面配置项	function()	-
loadPageConfig	加载指定页面配置项	function(pageId)	-
loadDomain	获取域名	function()	-
handlePageRedirect	页面跳转(replace/push)	function(url, replace)	-
callback	回调函数(关闭或提交)	function()	-
onMount	初始化结束，展示界面	function(val)	-

附录一

{
  "steps": [
    { "type": "header"},
    {
      "type": "form",
      "fields": [
        {
          "label": "文本框",
          "field": "text",
          "type": "text"
        },
        {
          "label": "单项框",
          "field": "radio",
          "type": "select_single",
          "mode": "radio",
          "options": {
            "from": "manual",
            "data": [
              {
                "label": "选项1",
                "value": 1
              },
              {
                "label": "选项2",
                "value": 2
              }
            ]
          },
          "required": true
        }
      ],
      "actions": [
        {
          "type": "submit",
          "label": "提交",
          "mode": "primary"
        },
        {
          "type": "cancel",
          "label": "取消",
          "mode": "normal"
        }
      ],
      "defaultValue": {
        "source": "data",
        "field": ""
      }
    },
    {
      "type": "fetch",
      "interface": {
        "url": "",
        "method": "GET",
        "withCredentials": true,
        "condition": {
          "enable": false,
          "field": "code",
          "value": 1000,
          "success": {
            "type": "modal",
            "content": {
              "type": "static",
              "content": "成功"
            }
          },
          "fail": {
            "type": "modal",
            "content": {
              "type": "field",
              "field": "msg"
            }
          }
        }
      },
      "nextStep": false
    }
  ]
}

附录二

{
  "text": "text",
  "radio": 2
}

🧑‍🤝‍🧑 参与共建 配置化内容管理系统 UI库（ant design版）

初始化工程

需要首先初始化ccms工程！

npm install

npm link ccms

sudo npm link

编译

npm run build