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;
}
时间就像牙膏,只要挤,总会有的 ~