chore: group plugins

ly525
1 parent 9ce21af3
Showing 2 changed files with 117 additions and 27 deletions
front-end/h5/src/components/core/editor.js
front-end/h5/src/views/Editor.vue
@@ -40,6 +40,70 @@ export default {
       this.mixinPluginCustomComponents2Editor()
     },
     /**
+     * 在左侧或顶部导航上显示可用的组件快捷方式，用户点击之后，即可将其添加到中间画布上
+     * @param {Object} group: {children, title, icon}
+     */
+    renderPluginShortcut (group) {
+      return group.children.length === 1
+        ? this.renderSinglePluginShortcut(group)
+        : this.renderMultiPluginShortcuts(group)
+    },
+    /**
+     * 渲染多个插件的快捷方式
+     * @param {Object} group: {children, title, icon}
+     */
+    renderMultiPluginShortcuts (group) {
+      const plugins = group.children
+      return <el-popover
+        placement="bottom"
+        width="400"
+        trigger="hover">
+        {
+          plugins.sort().map(item => (
+            <el-button
+              class='ma-0 no-border-radius'
+              onClick={this.clone.bind(this, item)}
+            >
+              <i
+                class={['fa', `fa-${item.icon}`]}
+                aria-hidden='true'
+                style='display: block;font-size: 16px;margin-bottom: 10px;'
+              />
+              <span>{ item.title }</span>
+            </el-button>
+          ))
+        }
+        <el-button slot="reference" class='ma-0 no-border-radius'>
+          <i
+            class={['fa', `fa-${group.icon}`]}
+            aria-hidden='true'
+            style='display: block;font-size: 16px;margin-bottom: 10px;'
+          />
+          <span class="plugin-item__text">{group.title}</span>
+        </el-button>
+      </el-popover>
+    },
+    /**
+     * #!zh: 渲染单个插件的快捷方式
+     * #!en: render shortcut for single plugin
+     * @param {Object} group: {children, title, icon}
+     */
+    renderSinglePluginShortcut ({ children }) {
+      const [plugin] = children
+      return <el-button
+        class='ma-0 no-border-radius'
+        style={{ width: '100%' }}
+        onClick={this.clone.bind(this, plugin)}
+      >
+        <i
+          class={['fa', `fa-${plugin.icon}`]}
+          aria-hidden='true'
+          style='display: block;font-size: 16px;margin-bottom: 10px;'
+        />
+        <span class="plugin-item__text">{ plugin.title }</span>
+      </el-button>
+    },
+    /**
      * #!zh: renderCanvas 渲染中间画布
      * elements
      * @param {*} h
@@ -85,21 +149,15 @@ export default {
         <el-tabs tab-position="left" class="lb-tabs">
           <el-tab-pane label='组件列表'>
             <div class="full-height">
-              {this.visiblePluginList.sort().map(item => {
-                return (
-                  <el-button
-                    class='plugin-item ma-0 no-border-radius'
-                    onClick={this.clone.bind(this, item)}
-                  >
-                    <i
-                      class={['fa', `fa-${item.icon}`]}
-                      aria-hidden='true'
-                      style='display: block;font-size: 16px;margin-bottom: 10px;'
-                    />
-                    <span>{ item.title }</span>
-                  </el-button>
-                )
-              })}
+              <el-row gutter={20}>
+                {
+                  this.groups.sort().map(group => (
+                    <el-col span={12} style={{ marginTop: '10px' }}>
+                      {this.renderPluginShortcut(group)}
+                    </el-col>
+                  ))
+                }
+              </el-row>
             </div>
           </el-tab-pane>
           <el-tab-pane label='页面管理'>
@@ -11,14 +11,53 @@ const PluginList = [
     icon: 'hand-pointer-o',
     component: LbpButton,
     visible: true,
-    name: 'lbp-button'
+    name: 'lbp-button',
+    children: [
+      {
+        title: '按钮',
+        icon: 'hand-pointer-o',
+        component: LbpButton,
+        visible: true,
+        name: 'lbp-button'
+      }
+    ]
   },
   {
     title: '图片',
     icon: 'image',
     component: LbpPicture,
     visible: true,
-    name: 'lbp-picture'
+    name: 'lbp-picture',
+    children: [
+      {
+        title: '图片',
+        icon: 'image',
+        component: LbpPicture,
+        visible: true,
+        name: 'lbp-picture'
+      }
+    ]
+  },
+  {
+    title: '表单',
+    icon: 'wpforms',
+    visible: true,
+    children: [
+      {
+        title: '按钮',
+        icon: 'hand-pointer-o',
+        component: LbpButton,
+        visible: true,
+        name: 'lbp-button'
+      },
+      {
+        title: '图片',
+        icon: 'image',
+        component: LbpPicture,
+        visible: true,
+        name: 'lbp-picture'
+      }
+    ]
   }
 ]
  
@@ -28,6 +67,9 @@ export default {
     // !#zh 显示在侧边栏或顶部的 可用组件列表
     visiblePluginList () {
       return PluginList.filter(p => p.visible)
+    },
+    groups () {
+      return PluginList.filter(p => p.visible)
     }
   },
   methods: {
@@ -57,16 +99,6 @@ $designerWidthHalf: $designerWidth / 2;
  
 }
  
-.plugin-item {
-  border: 1px solid #f1efef;
-  width: 49%;
-  padding: 12px 12px;
-
-  &:nth-child(even) {
-    margin: 4px 0 4px 2% !important;
-  }
-}
-
 .canvas-wrapper {
   position: relative;
   top: 5%;