}
}
复制主题即把要复制的主题的
theme.common数据复制到新主题上即可。需要注意的就是新建主题时要判断主题名称是否重复，因为数据结构里并没有类似id的字段。另外还有一个小问题是当预览官方主题时修改的话会自动生成新主题，所以还需要自动生成可用的主题名，实现如下：
const USER_THEME_NAME_PREFIX = '自定义主题-';
function getNextUserThemeName() {
let index = 1
// 获取已经存在的自定义主题列表
let list = getUserThemesFromStore()
let name = USER_THEME_NAME_PREFIX + index
let exist = () => {
return list.some((item) => {
return item.name === name
})
}
// 循环检测主题名称是否重复
while (exist()) {
index++
name = USER_THEME_NAME_PREFIX + index
}
return name
}界面效果如下：
因为涉及到几个页面及不同组件间的互相通信，所以vuex是必须要使用的，vuex的state要存储的内容如下：
const state = {
// 官方主题列表
officialThemeList: [],
// 自定义主题列表
themeList: [],
// 当前编辑中的主题id
editingTheme: null,
// 当前编辑的变量类型
editingActionType: 'Color',
// 可编辑的变量列表数据
variableList: [],
// 操作历史数据
historyIndex: 0,
themeHistoryList: [],
variableHistoryList: []}
editingTheme是代表当前正在编辑的名字，主题编辑时依靠这个值来修改对应主题的数据，这个值也会在localstorage里存一份。editingActionType是代表当前正在编辑中的变量所属组件类型，主要作用是在切换要修改的组件类型后预览列表滚动到对应的组件位置及用来渲染对应主题变量对应的编辑控件，如下：
页面在vue实例化前先获取官方主题、自定义主题、最后一次编辑的主题名称，设置到vuex的store里。
编辑预览页面
编辑预览页面主要分两部分，左侧是组件列表，右侧是编辑区域，界面效果如下：
组件预览区域
组件预览区域很简单，无脑罗列出所有组件库里的组件，就像这样：
<div class="list">
<Color></Color>
<Button></Button>
<Radio></Radio>
<Checkbox></Checkbox>
<Inputer></Inputer>
<Autocomplete></Autocomplete>
