From 1e7e78a8411def2dbc0954d9eb53d88965482949 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Mon, 12 Oct 2026 11:01:19 +0800
Subject: [PATCH] =?UTF-8?q?fix(manager):=20=E4=BF=AE=E5=A4=8D=E6=A5=BC?=
 =?UTF-8?q?=E5=B1=82=E8=A3=85=E4=BF=AE=E5=AE=A1=E6=9F=A5=E5=8F=91=E7=8E=B0?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PanelArticle 文章分类字段名改为后端的 articleCategoryName
- blank/line/richText 预览组件补默认值兜底，避免拼出 undefinedpx
- 画布未知组件渲染可点击删除的占位条并 console.warn
---
 .../wap/config-panel/PanelArticle.vue                |  2 +-
 manager/src/views/page-decoration/wap/index.vue      | 12 ++++++++++++
 manager/src/views/page-decoration/wap/style.scss     |  9 +++++++++
 .../views/page-decoration/wap/template/tpl_blank.vue |  6 +++---
 .../views/page-decoration/wap/template/tpl_line.vue  |  8 ++++----
 .../page-decoration/wap/template/tpl_rich_text.vue   | 10 +++++-----
 6 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/manager/src/views/page-decoration/wap/config-panel/PanelArticle.vue b/manager/src/views/page-decoration/wap/config-panel/PanelArticle.vue
index e6f14132c..a94284b51 100644
--- a/manager/src/views/page-decoration/wap/config-panel/PanelArticle.vue
+++ b/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));
     }
diff --git a/manager/src/views/page-decoration/wap/index.vue b/manager/src/views/page-decoration/wap/index.vue
index 74c1359d2..1db5d69a9 100644
--- a/manager/src/views/page-decoration/wap/index.vue
+++ b/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;
diff --git a/manager/src/views/page-decoration/wap/style.scss b/manager/src/views/page-decoration/wap/style.scss
index 68c0b4e9f..1482d9a55 100644
--- a/manager/src/views/page-decoration/wap/style.scss
+++ b/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 {
   > * {
diff --git a/manager/src/views/page-decoration/wap/template/tpl_blank.vue b/manager/src/views/page-decoration/wap/template/tpl_blank.vue
index 38caac412..554942aa1 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_blank.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_blank.vue
@@ -2,9 +2,9 @@
   <div
     class="tpl-blank"
     :style="{
-      background: res.bgColor,
-      height: res.height + 'px',
-      margin: `0 ${res.paddingX}px ${res.pageGap}px`,
+      background: res.bgColor ?? '#f5f5f5',
+      height: (res.height ?? 10) + 'px',
+      margin: `0 ${res.paddingX ?? 0}px ${res.pageGap ?? 10}px`,
     }"
   ></div>
 </template>
diff --git a/manager/src/views/page-decoration/wap/template/tpl_line.vue b/manager/src/views/page-decoration/wap/template/tpl_line.vue
index 1851f6845..dbf7383c5 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_line.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_line.vue
@@ -2,14 +2,14 @@
   <div
     class="tpl-line"
     :style="{
-      background: res.bgColor,
-      padding: `0 ${res.paddingX}px`,
-      marginBottom: res.pageGap + 'px',
+      background: res.bgColor ?? '#FFFFFF',
+      padding: `0 ${res.paddingX ?? 0}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>
diff --git a/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue b/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue
index 1be5d5617..10c04bd02 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_rich_text.vue
@@ -2,14 +2,14 @@
   <div
     class="tpl-rich-text"
     :style="{
-      background: res.bgColor,
-      padding: `0 ${res.paddingX}px`,
-      marginBottom: res.pageGap + 'px',
-      borderRadius: res.borderRadius + 'px',
+      background: res.bgColor ?? '#FFFFFF',
+      padding: `0 ${res.paddingX ?? 12}px`,
+      marginBottom: (res.pageGap ?? 10) + '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>