feat(manager): 装修组件面板三类分组，移除促销活动组件，画布对未知类型增加守卫

manager/src/views/page-decoration/wap/config.js

@@ -6,12 +6,14 @@
  * notLink: true 没有链接功能
  * notImg: true 没有选择图片功能
  * close:true 右侧关闭按钮
+ * group: 'base' | 'marketing' | 'tools'  组件面板分组（无 group 的条目不在面板显示，仅供抽屉使用）
  */
 export const modelData = [
 
   {
     type: "flexOne",
     name: "图片",
+    group: "base",
     // drawer: true,
     notAdd: true,
     onlyImg: true,
@@ -31,6 +33,7 @@ export const modelData = [
   {
     type: "carousel",
     name: "轮播图",
+    group: "base",
     img: "md-image",
     // onlyImg: true,
     notTitle: false,
@@ -98,6 +101,7 @@ export const modelData = [
   {
     type: "title",
     name: "标题栏",
+    group: "tools",
     img: "md-image",
     // notTitle:true,
     notAdd: true,
@@ -366,6 +370,7 @@ export const modelData = [
   {
     type: "textPicture",
     name: "文字图片",
+    group: "base",
     drawer: true,
     notAdd: true,
 
@@ -411,6 +416,7 @@ export const modelData = [
   {
     type: "tpl_ad_list",
     name: "广告魔方",
+    group: "base",
     img: "md-image",
     options: {
       list: [
@@ -425,6 +431,7 @@ export const modelData = [
   {
     type: "menu",
     name: "宫格导航",
+    group: "base",
     img: "md-image",
     close: true,
     options: {
@@ -475,6 +482,7 @@ export const modelData = [
   {
     type: "search",
     name: "搜索",
+    group: "base",
     img: "md-image",
     notAdd: true,
     notLink: true,
@@ -490,6 +498,7 @@ export const modelData = [
   {
     type: "goods",
     name: "商品分类",
+    group: "base",
     img: "md-image",
     notAdd: true,
     notLink: true,
@@ -556,6 +565,7 @@ export const modelData = [
   {
     type: "notice",
     name: "公告",
+    group: "base",
     img: "md-image",
     notAdd: false,
     notLink: true,
@@ -572,23 +582,12 @@ export const modelData = [
       ]
     }
   },
-  {
-    type: "promotions",
-    name: "促销活动",
-    img: "md-image",
-    notAdd: true,
-    notLink: true,
-    notImg: true,
-    close: true,
-    options: {
-      list: []
-    }
-  },
   {
     notAdd: true,
     notImg: true,
     notLink: true,
     drawerPromotions: true,
+    group: "marketing",
     type: "promotionDetail",
     promotionsType: "PINTUAN",
     name: "拼团活动",
@@ -605,6 +604,7 @@ export const modelData = [
     notImg: true,
     notLink: true,
     drawerPromotions: true,
+    group: "marketing",
     type: "promotionDetail",
     promotionsType: "LIVE",
     name: "直播活动",
@@ -621,6 +621,7 @@ export const modelData = [
     notImg: true,
     notLink: true,
     drawerPromotions: true,
+    group: "marketing",
     type: "promotionDetail",
     promotionsType: "SECKILL",
     name: "秒杀活动",
@@ -637,6 +638,7 @@ export const modelData = [
     notImg: true,
     notLink: true,
     drawerPromotions: true,
+    group: "marketing",
     type: "promotionDetail",
     promotionsType: "KANJIA",
     name: "砍价活动",
@@ -651,6 +653,7 @@ export const modelData = [
   {
     type: "video",
     name: "视频",
+    group: "base",
     img: "md-image",
     notAdd: true,
     notImg: true,

manager/src/views/page-decoration/wap/decorate.vue

@@ -20,7 +20,7 @@
         style="margin-left: 20px"
         size="small"
         plain
-        v-if="res.type == 'promotions' || res.drawerPromotions"
+        v-if="res.drawerPromotions"
         type="primary"
         @click="selectPromotions()"
         >选择促销活动</el-button
@@ -95,9 +95,7 @@
     <div
       class="decorate-list"
       v-if="
-        (res.type != 'tpl_ad_list' &&
-          res.type != 'tpl_activity_list' &&
-          res.type != 'promotions') ||
+        (res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') ||
         res.drawer ||
         res.drawerPromotions
       "

manager/src/views/page-decoration/wap/index.vue

@@ -3,26 +3,30 @@
     <!-- 拖拽栏 ，展示栏  -->
     <div class="model-view">
       <div class="model-view-menu">
-        <draggable
-          class="model-view-menu-item"
-          :list="modelData"
-          :item-key="getModelKey"
-          :clone="cloneModel"
-          :move="handleMove"
-          :group="{ name: 'model', pull: 'clone', put: false, animation: 150 }"
-          :sort="false"
-          ghost-class="ghost"
+        <div
+          v-for="grp in modelGroups"
+          :key="grp.key"
+          class="model-group"
         >
-          <template #item="{ element: model }">
-            <li
-              v-if="!model.drawer && !model.drawerPromotions"
-              class="model-item"
-            >
-              <img src alt />
-              <span>{{ model.name }}</span>
-            </li>
-          </template>
-        </draggable>
+          <div class="model-group-title">{{ grp.title }}</div>
+          <draggable
+            class="model-view-menu-item"
+            :list="grp.list"
+            :item-key="getModelKey"
+            :clone="cloneModel"
+            :move="handleMove"
+            :group="{ name: 'model', pull: 'clone', put: false, animation: 150 }"
+            :sort="false"
+            ghost-class="ghost"
+          >
+            <template #item="{ element: model }">
+              <li class="model-item">
+                <img src alt />
+                <span>{{ model.name }}</span>
+              </li>
+            </template>
+          </draggable>
+        </div>
       </div>
 
       <div class="model-view-content">
@@ -40,6 +44,7 @@
             <template #item="{ element, index }">
               <div class="list">
                 <component
+                  v-if="templates[element.type]"
                   class="component"
                   :class="{ active: selected == index }"
                   @click="handleComponent(element, index)"
@@ -108,6 +113,20 @@ export default {
       deep: true,
     },
   },
+  computed: {
+    // 组件面板三类分组（无 group 的条目仅供抽屉使用，不进面板）
+    modelGroups() {
+      const groups = [
+        { key: "base", title: "基础组件" },
+        { key: "marketing", title: "营销组件" },
+        { key: "tools", title: "工具组件" },
+      ];
+      return groups.map((g) => ({
+        ...g,
+        list: this.modelData.filter((m) => m.group === g.key),
+      }));
+    },
+  },
   mounted() {
     this.init();
   },
@@ -150,7 +169,10 @@ export default {
       API_Other.getHomeData(this.$route.query.id).then((res) => {
         this.contentData = JSON.parse(res.result.pageData);
 
-        this.handleComponent(this.contentData.list[0], 0);
+        const first = this.contentData.list[0];
+        if (first && this.templates[first.type]) {
+          this.handleComponent(first, 0);
+        }
       });
 
     },

manager/src/views/page-decoration/wap/style.scss

@@ -3,11 +3,20 @@
   .model-view-menu {
     flex: 1.5;
     min-width: 250px;
-    > .model-view-menu-item {
+    .model-view-menu-item {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
     }
+    .model-group-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: #303133;
+      margin: 10px 5px 8px;
+    }
+    .model-group:first-child .model-group-title {
+      margin-top: 0;
+    }
   }
   .model-config {
     flex: 2.5;