fix(manager): 修复楼层装修审查发现的问题

- PanelArticle 文章分类字段名改为后端的 articleCategoryName
- blank/line/richText 预览组件补默认值兜底，避免拼出 undefinedpx
- 画布未知组件渲染可点击删除的占位条并 console.warn

manager/src/views/page-decoration/wap/config-panel/PanelArticle.vue

@@ -72,7 +72,7 @@ const DEFAULT_ITEM = { title: "文章列表", categoryId: "", count: 3 };
 function flattenCategories(tree, level = 0) {
   const result = [];
   (tree || []).forEach((node) => {
-    result.push({ id: node.id, name: "　".repeat(level) + node.name });
+    result.push({ id: node.id, name: "　".repeat(level) + node.articleCategoryName });
     if (node.children && node.children.length) {
       result.push(...flattenCategories(node.children, level + 1));
     }

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

@@ -51,6 +51,13 @@
                   :is="templates[element.type]"
                   :res="element.options"
                 ></component>
+                <div
+                  v-else
+                  class="component unknown-component"
+                  @click="handleUnknownComponent(element, index)"
+                >
+                  未知组件「{{ element.type }}」已下线，点击删除
+                </div>
                 <el-icon
                   v-if="selected == index"
                   @click="closeComponent(index)"
@@ -210,6 +217,11 @@ export default {
       this.selected = index;
       this["decorateData"] = val;
     },
+    // 已下线的未知组件：点击占位条直接删除
+    handleUnknownComponent(element, index) {
+      console.warn(`[page-decoration] 未知组件类型: ${element.type}`);
+      this.closeComponent(index);
+    },
     // 右侧栏回调
     handleDrawer(val) {
       let newIndex = this.selected;

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

@@ -92,6 +92,15 @@
   top: 10px;
   z-index: 99;
 }
+.unknown-component {
+  padding: 16px 10px;
+  background: #fff2f0;
+  border: 1px dashed #ffccc7;
+  color: #cf1322;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+}
 
 .model-btn {
   > * {

manager/src/views/page-decoration/wap/template/tpl_blank.vue

@@ -2,9 +2,9 @@
   <div
     class="tpl-blank"
     :style="{
-      background: res.bgColor,
+      background: res.bgColor ?? '#f5f5f5',
-      height: res.height + 'px',
+      height: (res.height ?? 10) + 'px',
-      margin: `0 ${res.paddingX}px ${res.pageGap}px`,
+      margin: `0 ${res.paddingX ?? 0}px ${res.pageGap ?? 10}px`,
     }"
   ></div>
 </template>

manager/src/views/page-decoration/wap/template/tpl_line.vue

@@ -2,14 +2,14 @@
   <div
     class="tpl-line"
     :style="{
-      background: res.bgColor,
+      background: res.bgColor ?? '#FFFFFF',
-      padding: `0 ${res.paddingX}px`,
+      padding: `0 ${res.paddingX ?? 0}px`,
-      marginBottom: res.pageGap + 'px',
+      marginBottom: (res.pageGap ?? 10) + 'px',
     }"
   >
     <div
       :style="{
-        borderTop: `${res.lineHeight}px ${res.lineStyle} ${res.lineColor}`,
+        borderTop: `${res.lineHeight ?? 1}px ${res.lineStyle ?? 'dashed'} ${res.lineColor ?? '#979797'}`,
       }"
     ></div>
   </div>

manager/src/views/page-decoration/wap/template/tpl_rich_text.vue

@@ -2,14 +2,14 @@
   <div
     class="tpl-rich-text"
     :style="{
-      background: res.bgColor,
+      background: res.bgColor ?? '#FFFFFF',
-      padding: `0 ${res.paddingX}px`,
+      padding: `0 ${res.paddingX ?? 12}px`,
-      marginBottom: res.pageGap + 'px',
+      marginBottom: (res.pageGap ?? 10) + 'px',
-      borderRadius: res.borderRadius + 'px',
+      borderRadius: (res.borderRadius ?? 0) + 'px',
       overflow: 'hidden',
     }"
   >
-    <div class="rich-content" v-html="res.content"></div>
+    <div class="rich-content" v-html="res.content ?? ''"></div>
   </div>
 </template>