看板设计平台

1.需求

• 能自定义组件供内部人员使用
• 打通前端后的数据对接

2.难点

• 如何新增组件
• 组件代码怎么写
• 相关配置怎么配，在哪里配
• 各个数据配置间怎么关联
• 数据如何和后台对接

3.组件菜单

• 可选的组件展示在页面头部，代码位置：/src/page/group/top.vue
• 可选组件的数据来源：/public/config.js -> baseList字段，里面包含了该组件的各个信息，包括组件本身的代码文件，组件参数(表单)的代码文件等

4.当前组件列表

• 当前看板已经添加的组件，以列表形式存储到全局数据中，字段的定义位置：/src/page/build.vue -> nav字段
• 顶级组件通过 provide 的形式(mixins)，将自身暴漏给所有下级组件
• 下级组件通过 inject 接收 contain ，并通过 this.contain.nav 进行访问

5.看板配置

• 如果选中渲染的空白区域，则右侧展示看板配置
• 这个配置不涉及核心需求，暂不梳理

6.组件配置

• 如果选中渲染的组件，则右侧展示组件配置，一共有5个tab选项
• 配置：固定展示，主要配置组件的内部参数，例如样式之类的，静态数据等
• 数据：需要在 /src/option/config -> dicOption.dataList 字段,这个字段表示需要数据选项的组件列表，用于对接动态数据
• 交互：需要在 /src/option/config -> dicOption.eventList 字段,这个字段表示需要交互选项的组件列表，用于组件嵌套时的数据交互，暂时用不上
• 事件：一般情况下默认展示，用于配置事件，暂时用不上
• 参数：固定展示：主要配置组件的外部参数，例如尺寸，位置，缩放，旋转信息等

7.组件本身

• 组件代码文件的位置：/src/echart/packages/组件名称/index.vue
• 如果组件是echarts组件，还需配置：/src/echart/config -> echart
• 组件代码有固定的代码结构，自带众多逻辑和字段，以下是一些常见的

字段名	类型	说明
dataChart	属性	组件数据，指向菜单配置的option.data
option	属性	组件配置，指向菜单配置的option.option
mappingValue	计算属性	处理后的最终数据
updateChart	方法	用于更新图表，数据刷新后会自动调用

8.组件自定义配置

• 用于配置组件的内部参数，文件位置：option/components/组件名称
• 新增组件时，需要通过 inject 的形式引入全局数据，并通过 main.activeOption 进行表单绑定，该数据最终指向 /public/config.js -> baseList字段，也就是说，表单字段需要在源头进行定义，这个组件指负责绑定修改

/public/config.js -> baseList -> activeOption -> option/components/组件名称 -> main.activeOption 表单绑定