vue组件库的在线主题编辑器的实现思路

let id = 'HUI_PREVIEW_THEME'
let el = document.querySelector('#' + id)
if (el) {
el.innerHTML = data
} else {
el = document.createElement('style')
el.innerHTML = data
el.id = id
document.head.appendChild(el)
}
}

这样就达到了修改变量后实时预览的效果，下载主题也是类似，把当前编辑的主题的数据发送给后端编译完后生成压缩包进行下载。

下载：因为要发送主题变量进行编译下载，所以不能使用get方法，但使用post方法进行下载比较麻烦，所以为了简单起见，下载操作实际是在浏览器端做的。

function downloadTheme(data) {
 axios({
 url: '/api/v1/download',
 method: 'post',
 responseType: 'blob', // important
 data
 }).then((response) => {
 const url = window.URL.createObjectURL(new Blob([response.data]))
 const link = document.createElement('a')
 link.href = url
 link.setAttribute('download', 'theme.zip')
 link.click()
 })
}

至此，主流程已经跑通，接下来是一些提升体验的功能。

1.重置功能：重置理应是重置到某个主题复制来源的那个主题的，但是其实必要性也不是特别大，所以就简单做，直接把当前主题的配置变量清空，即theme.common={}，同时需要重新请求变量数据及请求编译。

2.前进回退功能：前进回退功能说白了就是把每一步操作的数据都克隆一份并存到一个数组里，然后设置一个指针，比如index，指向当前所在的位置，前进就是index++，后退就是index–，然后取出对应数组里的数据替换当前的数据。对于本项目，需要存两个东西，一个是主题数据，一个是变量数据。可以通过对象形式存到一个数组里，也可以向本项目一样搞两个数组。

具体实现：

1.先把初始的主题数据拷贝一份扔进历史数组

themeHistoryLis

t里，请求到变量数据后扔进

variableHistoryList

数组里

2.每次修改后把修改后的变量数据和主题数据都复制一份扔进去，同时指针

historyIndex

加1

3.根据前进还是回退来设置

historyIndex

的值，同时取出对应位置的主题和变量数据替换当前的数据，然后请求编译

需要注意的是在重置和返回主题列表页面时要复位themeHistoryList、variableHistoryList、historyIndex

3.颜色预览组件优化

因为颜色预览组件是需要显示当前颜色和颜色值的，那么就会有一个问题，字体颜色不能写死，否则如果字体写死白色，那么如果这个变量的颜色值又修改成白色，那么将一片白色，啥也看不见，所以需要动态判断是用黑色还是白色，有兴趣详细了解判断算法可阅读：