1. 项目需求：
(1)按照IOS已上架应用Skylander IPAD版本功能对应开发功能一样的WEB版
(2)核心功能：节目编辑、节目控制
2. IOS项目部分预览图：
3.当前开发页面为节目控制页面：
(1)需要开发页面：节目控制页面、模块编辑页面、资源选择页面、素材排版页面
(2)节目控制页面：事件（时间）控制组件、模板选择组件、资源选择组件、节目总预览组件
(3)模块编辑页面：插件选择组件 、编辑器组件
(4)资源选择页面：略
(5)素材排版页面：略
4.具体控制逻辑：
通过以时间为主体，选择不同的模板，进入不同的模板编辑器，选择图片插件、文本、模板位置等进行：拖拽移动、拖拽放大、位置选定、该位置素材添加等操作，最后格式化统一的数据，发送给后端、后端再推送给安卓盒子，实时响应节目在后台管理的推送功能
5.具体核心组件开发：
6.时间选择组件：（ src/base/time-list/time-list.vue ）
7.模板选择组件：（ src/base/template-list/template-list.vue ）
8.资源选择组件 （ src/base/source-select/source-select.vue ）
9.节目总预览组件（ src/base/histogram/histogram.vue ）
10.插件选择组件 （ src/base/interactive-select/interactive-select.vue ）
11.节目编辑组件 （ src/base/interactive-box/interactive-box.vue ）
12.其上组件之间之间通信交互均采用VUEX完成，其核心状态树 :
（1）state.js
const state = {
//...
timeList: [], //时间列表组（包括对应文件）
timelist_cid: -1,
current_temp_type: 2,
select_model_id: -1,
dragBoxs:[], //可拖拽编辑元素
getAllDragBoxData: [] //获取所有当前可编辑元素的宽高位置类型等数据
}（2）getter.js
export const timelist_cid = function(state){
return state.timelist_cid;
}
export const current_temp_type = function(state){
return state.current_temp_type;
}
export const select_model_id = function(state){
return state.select_model_id;
}
export const getDragData = function(state){
return state.dragBoxs;
}
export const getAllDragData = function(state){
return state.getAllDragBoxData;
} （3）mutation-types.js :
export const TIME_LIST = 'timeList'
export const CURRENT_TIME_LIST_INDEX = 'timelist_cid'
export const CURRENT_TEMP_TYPE = 'current_temp_type'
export const SELECT_MODEL_ID = 'select_model_id'
export const SET_DRAG_BOXS = 'dragBoxs'
export const SET_DRAG_DATAS = 'getAllDragBoxData'
（4）mutations.js
[types.TIME_LIST]: (state,data) => {
state.timeList = data;
},
[types.CURRENT_TIME_LIST_INDEX]: (state,data)=>{
state.timelist_cid = data;
},
[types.CURRENT_TEMP_TYPE]: (state,value)=>{
state.current_temp_type = value;
},
[types.SELECT_MODEL_ID]: (state,id) => {
state.select_model_id = id;
},
[types.SET_DRAG_BOXS]: (state,arr) => {
state.dragBoxs = arr;
},
[types.SET_DRAG_DATAS]: (state,arr) => {
state.getAllDragBoxData = arr;
}时间就像牙膏，只要挤，总会有的 ~