feat: add shortcutProps to support shortcut themes; !#zh: 增加 shortcutProps 以支持快捷面板定制化/主题化

Author: ly525

front-end/h5/src/components/core/editor/index.js

@@ -148,11 +148,16 @@ export default {
      * !#zh 点击插件，copy 其基础数据到组件树（中间画布）
      * #!en click the plugin shortcut, create new Element with the plugin's meta data
      * pluginInfo {Object}: 插件列表中的基础数据, {name}=pluginInfo
+     *
+     * shortcutItem: PluginListItem = {
+      name: String,
+      shortcutProps: {}
+     }
      */
-    clone ({ name }) {
+    clone (shortcutItem) {
       this.elementManager({
         type: 'add',
-        value: { name }
+        value: shortcutItem
       })
     },
     /**

front-end/h5/src/components/core/models/element.js

@@ -53,12 +53,12 @@ class Element {
     if (typeof ele.pluginProps === 'object') {
       return cloneObj({ ...ele.pluginProps, uuid: this.uuid })
     }
-    return this.getDefaultPluginProps(ele.props || {})
+    return this.getDefaultPluginProps(ele.props, ele.shortcutProps)
   }
 
   // init prop of plugin
-  getDefaultPluginProps (props) {
-    const pluginProps = {
+  getDefaultPluginProps (props = {}, shortcutProps) {
+    let pluginProps = {
       uuid: this.uuid
     }
     Object.keys(props).forEach(key => {
@@ -70,6 +70,12 @@ class Element {
       const defaultValue = props[key].default
       pluginProps[key] = typeof defaultValue === 'function' ? defaultValue() : defaultValue
     })
+
+    pluginProps = {
+      ...pluginProps,
+      ...shortcutProps
+    }
+
     return pluginProps
   }
 

front-end/h5/src/store/modules/element.js

@@ -40,6 +40,7 @@ export const mutations = {
     switch (type) {
       case 'add':
         const vm = getVM(value.name)
+        vm.$options.shortcutProps = value.shortcutProps
         const element = new Element(vm.$options)
         elements.push(element)
         break