├── canvas-main                // 核心画布组件内容
│   ├── dv-transform           // 组件外侧transform容器，主要用于处理位置、旋转、缩放、大小等。
│   ├── mark-line              // 对齐线，开启吸附时进行渲染吸附对齐线。
│   ├── ruler                  // 画布标尺内容
├── components-panel           // 组件列表部分
├── config-panel               // 配置面板信息
│   ├── components             // 配置面板基础组件，如基础setting（尺寸旋转等），配置标题，数据编辑器，显示api状态等。
│   ├── data-center-panel      // 数据中心面板，包括静态数据及动态数据
│   ├── setting-panel          // 设置面板，不同组件设置的加载器
│   ├── page-config.vue        // 全局page页面配置面板，配置页面信息参数
│   ├── index.vue              // 设置面板入口
├── context-menu               // 右键菜单组件
├── footer-panel               // git 忽略项
├── header-bar                 // 头部工具条
├── layer-panel                // 图层面板
├── toolbox-panel              // 画布工具箱
└── index.vue                  // screen-editor入口

├── config.js                  // 组件配置文件js
├── config.vue                 // 组件配置面板config
├── main.vue                   // 组件渲染主组件内容
├── index.js                   // 组件导出入口

export const mainTitleConfig = {
  alias: '通用标题', // 组件别名
  icon: 'file-word', // 组件的显示图标
  type: ComType.com, // 组件的类型 （暂时都是默认为com）
  attr: { w: 300, h: 48 }, // 组件初始的宽高数据
  config: { title: '我是标题数据' }, // 组件独有的配置项，完全自定义，在组件渲染的`main.vue` 和`config.vue`中进行配置操作
  apiData: initApiData({}), // 组件的数据存储配置，如无需数据则为{}，通常数据需要调用此函数进行初始化。具体参考下方详细说明。
  events: {}, // 组件事件配置项
}

const basicBarConfig = {
  //...
  apiData: initApiData({ staticPath: 'bar/basic-bar' }),
  //...
}

// result
source = {
  comId: 'BasicLine_4353',
  id: 'api_2631',
  config: { data: '[{"x":"上海","y":23}]', seriesCount: 1 },
  type: 'static',
  staticPath: 'line/basic-line',
}

组件面板点击->在`screen-editor/screencomponents-panel`中会调用`toAddCom`函数，创建对应组件，并添加至`vuex/schema/comps`中
组件拖拽至面板->在`screen-editor/canvas-main`中会调用`dropToAddCom`函数，创建对应组件，并添加至`vuex/schema/comps`中

// 如是静态数据，且存在staticPath，则填充一次数据
if (com.apiData && com.apiData.type === ApiType.static && com.apiData.staticPath) {
  const { data } = await getStaticData(com.id, com.apiData.staticPath)
  selectedCom.value.apiData.config.data = JSON.stringify(data)
}

// config 配置项（必须）
const config = computed(() => props.data.config)
// attr 属性用于渲染容器宽高等（必须）
const attr = computed(() => props.data.attr)
const { dvData, dvEmit } = useDataCenter(props.data)

// 监听数据变更，如apis配置变化了或数据配置项apiData.source.config中修改了，则需要重新设置数据
watch(
  [() => apiData.value.type, apiData.value.config],
  async () => {
    await setDvData()
  },
  { deep: true, immediate: true },
)

const setDvData = async () => {
  const { type, config } = apiData.value
  $store.commit('schema/setLoading', true)
  try {
    // 获取源数据
    if (type === ApiType.static) {
      dvData.value = toJson(config.data, {})
    } else {
      // todo: 动态api，获取数据
      dvData.value = {}
    }
  } catch (e) {
    throwError('useDataCenter/setDvData', e)
  }
  setTimeout(() => {
    $store.commit('schema/setLoading', false)
  }, 800)
}

1、初始化loading状态
2、根据静态还是api进行数据填充，填充至dvData 对象中去，再根据不同组件的需求进行解析使用即可

// data-cetner
const { dvData, dvEmit } = useDataCenter(props.data)
// config 配置项
const config = computed(() => props.data.config)
// attr 属性
const attr = computed(() => props.data.attr)
// 容器style，自定义，根据不同的组件进行编写
const wrapperStyle = computed(() => ({ width: `${attr.value.w}px`, height: `${attr.value.h}px` }))
// 图表数据，自定义，根据不同图表或者实际需求进行编写
const chartData = computed(() => ({
  xData: dvData.value.xData ?? [],
  yData: dvData.value.yData ?? [],
}))

//...

// 自定义，图表类型，系列数量是动态更新的，隐藏需要额外设置此项。设置seriesCount
watch(
  () => dvData.value,
  val => {
    props.data.apiData.config.seriesCount = val.yData ? val.yData.length : 0
  },
)
// 图表类型的组件可选，后续需要做成动态监听的。注册事件
onMounted(() => {
  chartRef.value && chartRef.value.getInstance().on('click', onClick)
})