magic-page-designer/src/library/index.ts

magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w

import { PageDom } from './page-object'
import { mpdComponentLibrary } from '../store/page-config'
import ant from './ant'
import element from './element'
import _ from 'lodash'
import layout from './layout'
import text from './text'
import { ComponentGroupInfo } from './page-object'
export * from './page-object'

const data: Array<ComponentGroupInfo> = [layout, text]
// 所有组件的map集合
const dataMap: { [key: string]: PageDom } = {}

// 初始化组件库数据
function initData(): void {
  let flag = false
  if (mpdComponentLibrary.length > 0) {
    const tmpLibrary: Array<ComponentGroupInfo> = _.cloneDeep(mpdComponentLibrary)
    // 合并配置项
    tmpLibrary.forEach(item => {
      let flag = true
      data.forEach(element => {
        if (element.id === item.id) {
          const tmpMap: { [key: string]: PageDom } = {}
          item.list.forEach(itemElement => {
            tmpMap[itemElement.id] = itemElement
          })
          element.list.forEach((listElement: PageDom) => {
            if (tmpMap.hasOwnProperty(listElement.id)) {
              const tmpItem: PageDom = tmpMap[listElement.id]
              for (const key in tmpItem) {
                listElement[key] = tmpItem[key]
              }
              delete tmpMap[listElement.id]
            }
          })
          for (const key in tmpMap) {
            element.list.push(tmpMap[key])
          }
          flag = false
        }
      })
      if (flag) {
        data.push(item)
      }
    })
    mpdComponentLibrary.splice(0, mpdComponentLibrary.length)
    flag = true
  }
  if (flag || Object.keys(dataMap).length === 0) {
    data.forEach((dataItem: ComponentGroupInfo) => {
      dataItem.list.forEach((listItem: PageDom) => {
        listItem.ext = listItem.ext || {}
        dataMap[listItem.id] = listItem
      })
    })
  }
}

// 获取组件库数据
export function getLibraryData(): Array<ComponentGroupInfo> {
  initData()
  return data
}

// 获取组件库map数据
export function getLibraryDataMap(key: string | undefined): PageDom | { [key: string]: PageDom } {
  initData()
  if (key) {
    return dataMap[key]
  }
  return dataMap
}

// 获得ant的配置
export function getAntConfig() {
  return ant
}
// 获得element的配置
export function getElementConfig() {
  return element
}

export default {
  // 获取组件库数据
  getLibraryData,
  // 获取组件库map数据
  getLibraryDataMap,
  // 获得ant的配置
  getAntConfig,
  // 获得element的配置
  getElementConfig
}