vue組件庫的在線主題編輯器的實(shí)現(xiàn)思路

{
 name: '官方主題-1', // 主題名稱
 by: 'by hui', // 來源
 description: '默認(rèn)主題', // 描述
 theme: {
 // 主題改動(dòng)點(diǎn)列表
 common: {
 '$--color-brand': '#e72528'
 }
 }
}

{
 name: name, // 主題名稱
 update: Date.now(), // 最后一次修改時(shí)間
 theme: { // 主題改動(dòng)點(diǎn)列表
 common: {
 //...
 }
 }
}

const USER_THEME_NAME_PREFIX = '自定義主題-';
function getNextUserThemeName() {
 let index = 1
 // 獲取已經(jīng)存在的自定義主題列表
 let list = getUserThemesFromStore()
 let name = USER_THEME_NAME_PREFIX + index
 let exist = () => {
 return list.some((item) => {
 return item.name === name
 })
 }
 // 循環(huán)檢測(cè)主題名稱是否重復(fù)
 while (exist()) {
 index++
 name = USER_THEME_NAME_PREFIX + index
 }
 return name
}

const state = {
 // 官方主題列表
 officialThemeList: [],
 // 自定義主題列表
 themeList: [],
 // 當(dāng)前編輯中的主題id
 editingTheme: null,
 // 當(dāng)前編輯的變量類型
 editingActionType: 'Color',
 // 可編輯的變量列表數(shù)據(jù)
 variableList: [],
 // 操作歷史數(shù)據(jù)
 historyIndex: 0,
 themeHistoryList: [],
 variableHistoryList: []
}

<div class="list">
 <Color></Color>
 <Button></Button>
 <Radio></Radio>
 <Checkbox></Checkbox>
 <Inputer></Inputer>
 <Autocomplete></Autocomplete>
 <InputNumber></InputNumber>
 //...
</div>

<script>
{
 watch: {
 '$store.state.editingActionType'(newVal) {
 this.scrollTo(newVal)
 }
 },
 methods:{
 scrollTo(id) {
 switch (id) {
 case 'Input':
  id = 'Inputer'
  break;
 default:
  break;
 }
 let component = this.$children.find((item) =>{
 return item.$options._componentTag === id
 })
 if (component) {
 let el = component._vnode.elm
 let top = el.getBoundingClientRect().top + document.documentElement.scrollTop
 document.documentElement.scrollTop = top - 20
 }
 }
 }
}
</script>

{
 "name": "Color",// 組件類型/類別
 "config": [{// 配置列表
 "type": "color",// 變量類型，根據(jù)此字段渲染對(duì)應(yīng)類型的控件
 "key": "$--color-brand",// sass變量名
 "value": "#e72528",// sass變量對(duì)應(yīng)的值，可以是具體的值，也可以是sass變量名
 "category": "Brand Color"http:// 列表，用來分組進(jìn)行顯示
 }]
}

// Editor組件
async getVariable() {
 try {
 // 獲取變量列表，res.data就是變量列表，數(shù)據(jù)結(jié)構(gòu)上面已經(jīng)提到了
 let res = await api.getVariable()
 // 和當(dāng)前主題變量進(jìn)行合并
 let curTheme = store.getUserThemeByNameFromStore(this.$store.state.editingTheme) || {}
 let list = []
 // 合并
 list = this.merge(res.data, curTheme.theme)

 // 變量進(jìn)行替換處理，因?yàn)槟壳按嬖谠撉闆r的只有顏色類型的變量，所以為了執(zhí)行效率加上該過濾條件
 list = store.replaceVariable(list, ['color'])

 // 排序
 list = this.sortVariable(list)

 this.variableList = list

 // 存儲(chǔ)到vuex
 this.$store.commit('updateVariableList', this.variableList)
 } catch (error) {
 console.log(error)
 }
}

function replaceVariable(data, types) {
 // 遍歷整體變量列表
 for(let i = 0; i < data.length; i++) {
 let arr = data[i].config
 // 遍歷某個(gè)類別下的變量列表
 for(let j = 0; j < arr.length; j++) {
 // 如果不在替換類型范圍內(nèi)的和值不是變量的話就跳過
 if (!types.includes(arr[j].type) || !checkVariable(arr[j].value)) {
 continue
 }
 // 替換處理
 arr[j].value = findVariableReplaceValue(data, arr[j].value) || arr[j].value
 }
 }
 return data
}

function findVariableReplaceValue(data, value) {
 for(let i = 0; i < data.length; i++) {
 let arr = data[i].config
 for(let j = 0; j < arr.length; j++) {
 if (arr[j].key === value) {
 // 如果不是變量的話就是最終的值，返回就好了
 if (!checkVariable(arr[j].value)) {
 return arr[j].value
 } else {// 如果還是變量的話就遞歸查找
 return findVariableReplaceValue(data, arr[j].value)
 }
 }
 }
 }
}

// Editor組件
<template>
 <div class="editorContainer">
 <div class="editorBlock" v-for="items in data" :key="items.name">
 <div class="editorBlockTitle">{{items.name}}</div>
 <ul class="editorList">
 <li class="editorItem" v-for="item in items.list" :key="item.key">
 <div class="editorItemTitle">{{parseName(item.key)}}</div>
 <Control :data="item" @change="valueChange"></Control>
 </li>
 </ul>
 </div>
 </div>
</template>

{
 computed: {
 data() {
 // 找出當(dāng)前編輯中的變量類別
 let _data = this.$store.state.variableList.find(item => {
 return item.name === this.$store.state.editingActionType
 })
 if (!_data) {
 return []
 }
 let config = _data.config
 // 進(jìn)行分組
 let categorys = []
 config.forEach(item => {
 let category = categorys.find(c => {
  return c.name === item.category
 })
 if (!category) {
  categorys.push({
  name: item.category,
  list: [item]
  })
  return false
 }
 category.list.push(item)
 })
 return categorys
 }
 }
}

// Control組件
<template>
 <div class="controlContainer">
 <component :is="showComponent" :data="data" :value="data.value" @change="emitChange" :extraColorList="extraColors"></component>
 </div>
</template>
<script>
// 控件類型映射
const componentMap = {
 color: 'ColorPicker',
 select: 'Selecter',
 input: 'Inputer',
 shadow: 'Shadow',
 fontSize: 'Selecter',
 fontWeight: 'Selecter',
 fontLineHeight: 'Selecter',
 borderRadius: 'Selecter',
 height: 'Inputer',
 padding: 'Inputer',
 width: 'Inputer'
}
{
 computed: {
 showComponent() {
 // 根據(jù)變量類型來顯示對(duì)應(yīng)的控件
 return componentMap[this.data.type]
 }
 }
}
</script>

// 解析css陰影數(shù)據(jù)
// 因?yàn)閞gb顏色值內(nèi)也存在逗號(hào)，所以就不能簡(jiǎn)單的用逗號(hào)進(jìn)行切割解析
function parse() {
 if (!this.value) {
 return false
 }
 // 解析成復(fù)合值數(shù)組
 // let value = "0 0 2px 0 #666,0 0 2px 0 #666, 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 hlsa(0, 0, 0, 0.12),0 2px 4px 0 #sdf, 0 2px 4px 0 hlsa(0, 0, 0, 0.12), 0 2px 0 hlsa(0, 0, 0, 0.12), 0 2px hlsa(0, 0, 0, 0.12), 0 2px 4px 0 hlsa(0, 0, 0, 0.12)"
 // 根據(jù)右括號(hào)來進(jìn)行分割成數(shù)組
 let arr = this.value.split(/\)\s*,\s*/gim)
 arr = arr.map(item => {
 // 補(bǔ)上右括號(hào)
 if (item.includes('(') && !item.includes(')')) {
 return item + ')'
 } else {// 非rgb顏色值的直接返回
 return item
 }
 })
 let farr = []
 arr.forEach(item => {
 let quene = []
 let hasBrackets = false
 // 逐個(gè)字符進(jìn)行遍歷
 for (let i = 0; i < item.length; i++) {
 // 遇到非顏色值內(nèi)的逗號(hào)直接拼接目前隊(duì)列里的字符添加到數(shù)組
 if (item[i] === ',' && !hasBrackets) {
 farr.push(quene.join('').trim())
 quene = []
 } else if (item[i] === '(') {//遇到顏色值的左括號(hào)修改標(biāo)志位
 hasBrackets = true
 quene.push(item[i])
 } else if (item[i] === ')') {//遇到右括號(hào)重置標(biāo)志位
 hasBrackets = false
 quene.push(item[i])
 } else {// 其他字符直接添加到隊(duì)列里
 quene.push(item[i])
 }
 }
 // 添加隊(duì)列剩余的數(shù)據(jù)
 farr.push(quene.join('').trim())
 })
 // 解析出單個(gè)屬性
 let list = []
 farr.forEach(item => {
 let colorRegs = [/#[a-zA-Z0-9]{3,6}$/, /rgba?\([^()]+\)$/gim, /hlsa?\([^()]+\)$/gim, /\s+[a-zA-z]+$/]
 let last = ''
 let color = ''
 for (let i = 0; i < colorRegs.length; i++) {
 let reg = colorRegs[i]
 let result = reg.exec(item)
 if (result) {
 color = result[0]
 last = item.slice(0, result.index)
 break
 }
 }
 let props = last.split(/\s+/)
 list.push({
 xpx: parseInt(props[0]),
 ypx: parseInt(props[1]),
 spread: parseInt(props[2]) || 0,
 blur: parseInt(props[3]) || 0,
 color
 })
 })
 this.list = list
}

// data是變量里config數(shù)組里的一項(xiàng)，value就是修改后的值
function valueChange(data, value) {
 // 更新當(dāng)前變量對(duì)應(yīng)key的值
 let cloneData = JSON.parse(JSON.stringify(this.$store.state.variableList))
 let tarData = cloneData.find((item) => {
 return item.name === this.$store.state.editingActionType
 })
 tarData.config.forEach((item) => {
 if (item.key === data.key) {
 item.value = value
 }
 })
 // 因?yàn)槭侵С诸伾敌薷臑槟承┳兞康?，所以要重新進(jìn)行變量替換處理
 cloneData = store.replaceVariable(cloneData, ['color'])
 this.$store.commit('updateVariableList', cloneData)
 // 更新當(dāng)前主題
 let curTheme = store.getUserThemeByNameFromStore(this.$store.state.editingTheme, true)
 if (!curTheme) {// 當(dāng)前是官方主題則創(chuàng)建新主題
 let theme = store.createNewUserTheme('', {
 [data.key]: value
 })
 this.$store.commit('updateEditingTheme', theme.name)
 } else {// 修改的是自定義主題
 curTheme.theme.common = {
 ...curTheme.theme.common,
 [data.key]: value
 }
 store.updateUserTheme(curTheme.name, {
 theme: curTheme.theme
 })
 }
 // 請(qǐng)求編譯
 this.updateVariable()
}

async function updateVariable() {
 let curTheme = store.getUserThemeByNameFromStore(this.$store.state.editingTheme, true, true)
 try {
 let res = await api.updateVariable(curTheme.theme)
 this.replaceTheme(res.data)
 } catch (error) {
 console.log(error)
 }
}

function replaceTheme(data) {
 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)
 }
}

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()
 })
}

function const getContrastYIQ = (hexcolor) => {
 hexcolor = colorToHEX(hexcolor).substring(1)
 let r = parseInt(hexcolor.substr(0, 2), 16)
 let g = parseInt(hexcolor.substr(2, 2), 16)
 let b = parseInt(hexcolor.substr(4, 2), 16)
 let yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000
 return (yiq >= 128) ? 'black' : 'white'
}

module.exports = app => {
 const { router, controller } = app

 // 獲取官方主題列表
 router.get(`${BASE_URL}/getOfficialThemes`, controller.index.getOfficialThemes)

 // 返回變量數(shù)據(jù)
 router.get(`${BASE_URL}/getVariable`, controller.index.getVariable)

 // 編譯scss
 router.post(`${BASE_URL}/updateVariable`, controller.index.updateVariable)

 // 下載
 router.post(`${BASE_URL}/download`, controller.index.download)
}

{
 contents: `
 h2 {
 font-size: 40px;
 }
 `
}

npm install -g node-gyp
npm install --global --production windows-build-tools
npm install node-sass --save-dev

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass

function(data) {
 // 前端傳遞過來的數(shù)據(jù)
 let updates = data.common
 // 兩個(gè)文件的路徑
 let commonScssPath = path.join(process.cwd(), 'node_modules/hui/packages/theme/common/var-common.scss')
 let varScssPath = path.join(process.cwd(), 'node_modules/hui/packages/theme/common/var.scss')
 // 讀取兩個(gè)文件的內(nèi)容
 let commonScssContent = fs.readFileSync(commonScssPath, {encoding: 'utf8'})
 let varScssContent = fs.readFileSync(varScssPath, {encoding: 'utf8'})
 // 遍歷要修改的變量數(shù)據(jù)
 Object.keys(updates).forEach((key) => {
 let _key = key
 // 正則匹配及替換
 key = key.replace('$', '\\$')
 let reg = new RegExp('(' +key + '\\s*:\\s*)([^:]+)(;)', 'img')
 commonScssContent = commonScssContent.replace(reg, `$1${updates[_key]}$3`)
 varScssContent = varScssContent.replace(reg, `$1${updates[_key]}$3`)
 })
 // 修改路徑為絕對(duì)路徑，否則會(huì)報(bào)錯(cuò)
 let mixinsPath = path.resolve(process.cwd(), 'node_modules/hui/packages/theme/mixins/_color-helpers.scss')
 mixinsPath = mixinsPath.split('\\').join('/')
 commonScssContent = commonScssContent.replace(`@import '../mixins/_color-helpers'`, `@import '${mixinsPath}'`)
 let huiScssPath = path.join(process.cwd(), 'node_modules/hui/packages/theme/index.scss')
 // 編譯scss
 let result = sass.renderSync({
 file: huiScssPath,
 importer: [
 function (url) {
 if (url.includes('var-common')) {
  return {
  contents: commonScssContent
  }
 }else if (url.includes('var')) {
  return {
  contents: varScssContent
  }
 } else {
  return null
 }
 }
 ]
 })
 return result.css.toString()
}

async createThemeZip(data) {
 let zip = new JSZip()
 // 配置源文件
 zip.file('config.json', JSON.stringify(data.common, null, 2))
 // 編譯后的css主題包
 let theme = zip.folder('theme')
 let fontPath = 'node_modules/hui/packages/theme/fonts'
 let fontsFolder = theme.folder('fonts')
 // 遍歷添加字體文件
 let loopAdd = (_path, folder) => {
 fs.readdirSync(_path).forEach((file) => {
 let curPath = path.join(_path, file)
 if (fs.statSync(curPath).isDirectory()) {
 let newFolder = folder.folder(file)
 loopAdd(curPath, newFolder)
 } else {
 folder.file(file, fs.readFileSync(curPath))
 }
 })
 }
 loopAdd(fontPath, fontsFolder)
 // 編譯后的css
 let css = await huiComplier(data)
 theme.file('index.css', css)
 // 壓縮
 let result = await zip.generateAsync({
 type: 'nodebuffer'
 })
 // 保存到本地
 // fs.writeFileSync('theme.zip', result, (err) => {
 // if (err){
 // this.ctx.logger.warn('壓縮失敗', err)
 // }
 // this.ctx.logger.info('壓縮完成')
 // })
 return result
 }