chore: 更新活动编辑器页

chore: 更新活动编辑页Ui

chore(demo): 更新活动编辑器页，添加移动页面

chore(demo): 优化活动编辑器代码，简化配置

chore(demo): 活动编辑器移动端添加一个分类板块

chore: 更新活动编辑器完成移动端页面

Author: lljj-x

packages/demo/src/vue-editor/router/routes/index.js

@@ -7,10 +7,18 @@ const routes = [
         },
         component: () => import('../../views/editor/Editor.vue'),
     },
+    {
+        path: '/editor-m',
+        name: 'editorM',
+        meta: {
+            title: 'Vue Editor Mobile'
+        },
+        component: () => import('../../views/editor/EditorM.vue'),
+    },
     {
         path: '*',
         hidden: true,
-        redirect: { name: 'editor' }
+        redirect: { name: 'editorM' }
     }
 ];
 

packages/demo/src/vue-editor/views/editor/Editor.vue

@@ -31,6 +31,7 @@
                 <EditorToolBar
                     :current-use-component-num="currentUseComponentNum"
                     :drag-group="dragOptions.group"
+                    :config-tools="configTools"
                     @onFilter="$message.error('该组件添加数目已达上限！')"
                 >
                 </EditorToolBar>
@@ -52,8 +53,7 @@
                                  :class="{
                                      draggableSlot: item.$$slot,
                                      draggableItem: !item.$$slot,
-                                     [`draggableSlot_${item.$$slot}`]: item.$$slot,
-                                     [$style.viewComponentItem]: true
+                                     [`draggableSlot_${item.$$slot}`]: item.$$slot
                                  }"
                             >
                                 <ViewComponentWrap
@@ -124,15 +124,18 @@
     import configTools from './config/tools';
     import configDefaultItems from './config/defaultItems';
 
-    import { getComponentsConfig } from './common/utils';
+    import { getComponentsAndInitToolsConfig } from './common/utils';
 
     import { generateEditorItem } from './common/editorData';
     import './common/registerExtraElementComponent';
 
+    // 工具栏配置的组件
+    const components = getComponentsAndInitToolsConfig(configTools);
+
     export default {
         name: 'Editor',
         components: {
-            ...getComponentsConfig(configTools),
+            ...components,
             VueElementForm,
             Draggable,
             EditorToolBar,
@@ -143,6 +146,7 @@
             return {
                 loading: false,
                 isPreview: false,
+                configTools,
                 scale: 70,
                 editComponentList: [],
                 editHeaderComponentList: [], // 兼容header slot ，插件内部实现导致必须分割多分数据
@@ -441,8 +445,9 @@
                 transform: translate(-50%, 0);
                 cursor: auto;
                 box-shadow: none;
-                &:hover, &:active{
-                    box-shadow: none;
+                &:after {
+                    display: none;
+                    content: none;
                 }
             }
         }
@@ -582,11 +587,6 @@
             }
         }
     }
-    .viewComponentItem {
-        &+.viewComponentItem {
-            margin-top: 10px;
-        }
-    }
     .ghost {
         opacity: 0.5;
     }

packages/demo/src/vue-editor/views/editor/EditorHeader.vue

@@ -4,6 +4,10 @@
             <h1>Vue Editor</h1>
         </div>
         <div :class="$style.btns">
+            <el-select v-model="platform" placeholder="请选择" :class="$style.selectPlatform">
+                <el-option label="PC" value="editor"></el-option>
+                <el-option label="M" value="editorM"></el-option>
+            </el-select>
             <el-button icon="el-icon-minus"
                        :disabled="disabledMinus"
                        :class="$style.scaleBtn"
@@ -45,6 +49,16 @@
             }
         },
         computed: {
+            platform: {
+                get() {
+                    return this.$route.name;
+                },
+                set(routerName) {
+                    this.$router.replace({
+                        name: routerName
+                    });
+                }
+            },
             disabledMinus() {
                 return this.value <= this.minScale;
             },
@@ -79,6 +93,8 @@
         background: var(--color-white);
         display: flex;
         justify-content: space-between;
+        align-items: center;
+        box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
     }
     .logo {
         display: flex;
@@ -90,9 +106,8 @@
             text-transform: uppercase;
         }
     }
-    .scaleBtn {
-        &.disabled {
-
-        }
+    .selectPlatform {
+        width: 100px;
+        margin-right: 20px;
     }
 </style>