From ce11f509423e0a71bde647e4b4607ecde9f7e688 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Fri, 30 Oct 2026 09:27:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(pc-decorate):=20=E4=BC=98=E5=8C=96PC?=
 =?UTF-8?q?=E6=A5=BC=E5=B1=82=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E9=AB=98=E5=BA=A6=E3=80=81=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E7=83=AD=E5=8C=BA=E5=9B=BE=E7=BB=98?=
 =?UTF-8?q?=E5=88=B6=E5=8F=8A=E7=BC=96=E8=BE=91=E5=99=A8=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- fix(editor): 修复点击返回页面列表 autoSaveTimer is not defined 运行时错误，优化回退逻辑
- feat(hotzone): PC 端热区图接入可视化组件，支持拖拽画框、拉伸缩放与百分比自适应
- fix(floor-height): 商品宫格、宫格楼层、横幅楼层、商品条等默认行高改为自适应撑开，防止商品溢出截断
- fix(video): 修正视频组件默认行高与播放器高度对齐为 450px，避免底部遮挡
- fix(freelayout): 统一自由排版默认高度与后台画布高度为 450px，消除底部空白
- feat(adaptive): 频道宫格、品牌墙、优惠券等集合类组件支持动态行高与 autoCompTypes 弹性包裹
- refactor(preset): 优化双端 double11Preset 预设模板，清理遗留固定行高
---
 .../components/indexDecorate/RowWrapper.vue   | 33 +++++--
 .../indexDecorate/components/HotZone.vue      | 10 +--
 .../indexDecorate/presets/double11Preset.js   | 20 +++--
 manager/src/components/hotzone/index.vue      |  9 +-
 .../pc/config-panel/PanelHotZone.vue          | 88 +++++++++++++++++--
 .../src/views/page-decoration/pc/config.js    | 27 +++---
 .../src/views/page-decoration/pc/index.vue    | 64 ++++++++++----
 .../pc/presets/double11Preset.js              | 20 +++--
 .../pc/template/TplFreeLayout.vue             |  2 +-
 .../pc/template/TplHotZone.vue                |  8 +-
 10 files changed, 210 insertions(+), 71 deletions(-)

diff --git a/buyer/src/components/indexDecorate/RowWrapper.vue b/buyer/src/components/indexDecorate/RowWrapper.vue
index 69c91ef89..cbebe7e57 100644
--- a/buyer/src/components/indexDecorate/RowWrapper.vue
+++ b/buyer/src/components/indexDecorate/RowWrapper.vue
@@ -12,7 +12,7 @@
 
         class="component-cell"
 
-        :style="getComponentCellStyle(comp.componentStyle, row.rowStyle, row.components ? row.components.length : 1)"
+        :style="getComponentCellStyle(comp.componentStyle, row.rowStyle, row.components ? row.components.length : 1, comp.type)"
 
       >
 
@@ -69,6 +69,10 @@ const props = defineProps({
 
 
 
+const hasAutoComp = computed(() => {
+  return Array.isArray(props.row.components) && props.row.components.some(c => ['goodsGrid', 'gridFloor', 'bannerFloor', 'goodsBar', 'channelFloor', 'goodsList', 'recommendFeed', 'articleContent', 'brandWall', 'channelGrid', 'couponList'].includes(c?.type));
+});
+
 const rowWrapperStyle = computed(() => {
   const s = props.row.rowStyle || {};
   const style = {};
@@ -96,8 +100,12 @@ const rowWrapperStyle = computed(() => {
     const h = String(s.height).trim();
     if (h && Number(h) > 0) {
       const hVal = /^\d+$/.test(h) ? `${h}px` : h;
-      style.height = hVal;
-      style.minHeight = hVal;
+      if (hasAutoComp.value) {
+        style.minHeight = hVal;
+      } else {
+        style.height = hVal;
+        style.minHeight = hVal;
+      }
     }
   }
 
@@ -164,8 +172,12 @@ const rowInnerFlexStyle = computed(() => {
     const h = String(s.height).trim();
     if (h && Number(h) > 0) {
       const hVal = /^\d+$/.test(h) ? `${h}px` : h;
-      styleObj.height = hVal;
-      styleObj.minHeight = hVal;
+      if (hasAutoComp.value) {
+        styleObj.minHeight = hVal;
+      } else {
+        styleObj.height = hVal;
+        styleObj.minHeight = hVal;
+      }
     }
   }
 
@@ -175,7 +187,8 @@ const rowInnerFlexStyle = computed(() => {
 
 
 
-function getComponentCellStyle(style, rowStyle = {}, totalComps = 1) {
+function getComponentCellStyle(style, rowStyle = {}, totalComps = 1, compType = '') {
+  const isAutoHeightComp = compType && ['goodsGrid', 'gridFloor', 'bannerFloor', 'goodsBar', 'channelFloor', 'goodsList', 'recommendFeed', 'articleContent', 'brandWall', 'channelGrid', 'couponList'].includes(compType);
 
   if (!style) return { flex: '1 1 0%' };
 
@@ -185,8 +198,12 @@ function getComponentCellStyle(style, rowStyle = {}, totalComps = 1) {
     const rh = String(rowStyle.height).trim();
     if (rh && Number(rh) > 0) {
       const rhVal = /^\d+$/.test(rh) ? `${rh}px` : rh;
-      s.height = rhVal;
-      s.minHeight = rhVal;
+      if (isAutoHeightComp) {
+        s.minHeight = rhVal;
+      } else {
+        s.height = rhVal;
+        s.minHeight = rhVal;
+      }
     }
   }
   const gap = Number(rowStyle?.gap) || 0;
diff --git a/buyer/src/components/indexDecorate/components/HotZone.vue b/buyer/src/components/indexDecorate/components/HotZone.vue
index a07e304ba..e3910bd1b 100644
--- a/buyer/src/components/indexDecorate/components/HotZone.vue
+++ b/buyer/src/components/indexDecorate/components/HotZone.vue
@@ -7,10 +7,10 @@
         :key="idx"
         class="zone-link"
         :style="{
-          top: `${zone.top || 0}%`,
-          left: `${zone.left || 0}%`,
-          width: `${zone.width || 10}%`,
-          height: `${zone.height || 10}%`
+          top: `${zone.top !== undefined ? zone.top : ((zone.topPer || 0) * 100)}%`,
+          left: `${zone.left !== undefined ? zone.left : ((zone.leftPer || 0) * 100)}%`,
+          width: `${zone.width !== undefined ? zone.width : ((zone.widthPer || 0.1) * 100)}%`,
+          height: `${zone.height !== undefined ? zone.height : ((zone.heightPer || 0.1) * 100)}%`
         }"
         :title="zone.title"
         @click="handleClickZone(zone)"
@@ -68,7 +68,7 @@ const customStyle = computed(() => {
 });
 
 function handleClickZone(zone) {
-  const url = zone?.url ? String(zone.url).trim() : '';
+  const url = (zone?.url || zone?.link) ? String(zone.url || zone.link).trim() : '';
   if (!url) return;
   if (/^https?:\/\//i.test(url)) {
     window.open(url, '_blank');
diff --git a/buyer/src/components/indexDecorate/presets/double11Preset.js b/buyer/src/components/indexDecorate/presets/double11Preset.js
index edb8b6ba9..e5bc34c99 100644
--- a/buyer/src/components/indexDecorate/presets/double11Preset.js
+++ b/buyer/src/components/indexDecorate/presets/double11Preset.js
@@ -724,7 +724,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           0,
           0
         ],
-        "height": 180
+        "height": 220
       },
       "components": [
         {
@@ -901,6 +901,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
             "backgroundColor": "transparent"
           },
           "options": {
+            "height": 450,
             "elements": [
               {
                 "type": "badge",
@@ -979,7 +980,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 560
+        "height": ""
       },
       "components": [
         {
@@ -1061,7 +1062,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 560
+        "height": ""
       },
       "components": [
         {
@@ -1140,7 +1141,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 620
+        "height": ""
       },
       "components": [
         {
@@ -1249,7 +1250,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 420
+        "height": ""
       },
       "components": [
         {
@@ -1404,7 +1405,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 360
+        "height": 450
       },
       "components": [
         {
@@ -1417,6 +1418,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           },
           "options": {
             "videoUrl": "https://vjs.zencdn.net/v/oceans.mp4",
+            "height": 450,
             "coverUrl": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/video/video_cover.png",
             "url": "/goodsList?brand=1",
             "title": "双11全球狂欢发布盛典 · 年度旗舰好物真实开箱测评",
@@ -1481,7 +1483,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 220
+        "height": ""
       },
       "components": [
         {
@@ -1656,7 +1658,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 980
+        "height": ""
       },
       "components": [
         {
@@ -1810,7 +1812,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 1270
+        "height": ""
       },
       "components": [
         {
diff --git a/manager/src/components/hotzone/index.vue b/manager/src/components/hotzone/index.vue
index 041b65fbf..bb45056b0 100644
--- a/manager/src/components/hotzone/index.vue
+++ b/manager/src/components/hotzone/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-model="flag"
-    width="800px"
+    :width="width"
     :close-on-click-modal="false"
     title="绘制热区"
     top="120px"
@@ -26,6 +26,13 @@
 import { ref } from "vue";
 import hotzone from "./components/Hotzone.vue";
 
+const props = defineProps({
+  width: {
+    type: String,
+    default: "800px",
+  },
+});
+
 const emit = defineEmits(["changeZone", "closeFlag"]);
 
 const flag = ref(false);
diff --git a/manager/src/views/page-decoration/pc/config-panel/PanelHotZone.vue b/manager/src/views/page-decoration/pc/config-panel/PanelHotZone.vue
index 5dd0518d7..24e803484 100644
--- a/manager/src/views/page-decoration/pc/config-panel/PanelHotZone.vue
+++ b/manager/src/views/page-decoration/pc/config-panel/PanelHotZone.vue
@@ -29,6 +29,10 @@
       <div class="hotzone-preview-box" v-if="options.imageUrl">
         <img :src="options.imageUrl" alt="hotzone" class="img-preview" />
         <div class="preview-actions-bar">
+          <el-button size="small" type="primary" @click="handleOpenHotzone">
+            <el-icon class="mr-4"><Aim /></el-icon>
+            绘制热区
+          </el-button>
           <el-button size="small" type="primary" plain @click="handleSelectImage">
             <el-icon class="mr-4"><Picture /></el-icon>
             更换底图
@@ -46,6 +50,9 @@
       <div class="section-title flex-between">
         <span>热区列表 ({{ options.zones?.length || 0 }})</span>
         <div class="header-action-group">
+          <el-button type="primary" plain size="small" @click="handleOpenHotzone">
+            <el-icon class="mr-4"><Aim /></el-icon> 绘制热区
+          </el-button>
           <el-button link type="primary" size="small" @click="handleAddZone">
             <el-icon><Plus /></el-icon> 添加热区
           </el-button>
@@ -204,16 +211,25 @@
       </div>
 
       <div class="empty-zones-box" v-else>
-        <span>暂无热区，请点击右上角“添加热区”</span>
+        <span>暂无热区，可点击“绘制热区”在底图上拖拽画热区</span>
+        <div class="mt-8">
+          <el-button type="primary" size="small" @click="handleOpenHotzone">
+            <el-icon class="mr-4"><Aim /></el-icon> 立即绘制热区
+          </el-button>
+        </div>
       </div>
-    </div>
+        </div>
+
+    <!-- 绘制热区弹窗（复用移动端热区绘制器） -->
+    <hotzone ref="hotzoneDialogRef" width="960px" @changeZone="handleChangeZone" />
   </div>
 </template>
 
 <script setup>
-import { inject } from 'vue';
-import { Plus, Delete, Link, Picture, Close, Top, Bottom } from '@element-plus/icons-vue';
-import { ElMessageBox } from 'element-plus';
+import { ref, inject } from 'vue';
+import { Plus, Delete, Link, Picture, Close, Top, Bottom, Aim } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import hotzone from '@/components/hotzone';
 
 const props = defineProps({
   component: {
@@ -298,6 +314,68 @@ function handleAddZone() {
     height: 35
   });
 }
+
+const hotzoneDialogRef = ref(null);
+
+// 绘制热区弹窗打开
+function handleOpenHotzone() {
+  const imgUrl = props.options.imageUrl || '';
+  if (!imgUrl) {
+    ElMessage.warning('请先输入或选择热区底图');
+    return;
+  }
+  const zoneInfo = (props.options.zones || []).map((z, idx) => {
+    const leftPer = z.leftPer !== undefined ? z.leftPer : (Number(z.left) || 0) / 100;
+    const topPer = z.topPer !== undefined ? z.topPer : (Number(z.top) || 0) / 100;
+    const widthPer = z.widthPer !== undefined ? z.widthPer : (Number(z.width) || 20) / 100;
+    const heightPer = z.heightPer !== undefined ? z.heightPer : (Number(z.height) || 20) / 100;
+    const link = z.url || z.link || '';
+
+    return {
+      ...z,
+      leftPer,
+      topPer,
+      widthPer,
+      heightPer,
+      link,
+      title: z.title || `热区 ${idx + 1}`,
+      type: z.type || 'other'
+    };
+  });
+
+  if (hotzoneDialogRef.value) {
+    hotzoneDialogRef.value.open({
+      img: imgUrl,
+      zoneInfo
+    });
+  }
+}
+
+// 热区绘制器变更回调
+function handleChangeZone(zoneList) {
+  if (!Array.isArray(zoneList)) return;
+  props.options.zones = zoneList.map((z, idx) => {
+    const leftVal = z.leftPer !== undefined ? z.leftPer * 100 : (z.left !== undefined ? z.left : 0);
+    const topVal = z.topPer !== undefined ? z.topPer * 100 : (z.top !== undefined ? z.top : 0);
+    const widthVal = z.widthPer !== undefined ? z.widthPer * 100 : (z.width !== undefined ? z.width : 20);
+    const heightVal = z.heightPer !== undefined ? z.heightPer * 100 : (z.height !== undefined ? z.height : 20);
+    const linkVal = z.link || z.url || '';
+    const titleVal = z.title || `热区 ${idx + 1}`;
+
+    return {
+      ...z,
+      title: titleVal,
+      url: linkVal,
+      link: linkVal,
+      left: Math.round(leftVal * 10) / 10,
+      top: Math.round(topVal * 10) / 10,
+      width: Math.round(widthVal * 10) / 10,
+      height: Math.round(heightVal * 10) / 10,
+      type: z.type || 'other'
+    };
+  });
+}
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page-decoration/pc/config.js b/manager/src/views/page-decoration/pc/config.js
index 1d23db8d3..d560cadbd 100644
--- a/manager/src/views/page-decoration/pc/config.js
+++ b/manager/src/views/page-decoration/pc/config.js
@@ -299,7 +299,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'channelGrid',
-    defaultRowHeight: 120,
+    defaultRowHeight: '',
     name: '频道宫格',
     group: 'navigation',
     icon: 'Grid',
@@ -431,7 +431,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'brandWall',
-    defaultRowHeight: 220,
+    defaultRowHeight: '',
     name: '品牌图',
     group: 'media',
     icon: 'Medal',
@@ -513,7 +513,7 @@ export const COMPONENT_DEFINITIONS = [
 
     defaultOptions: {
 
-      height: 320,
+      height: 450,
 
       elements: []
 
@@ -532,7 +532,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'promoGroup',
-    defaultRowHeight: 180,
+    defaultRowHeight: 220,
 
     name: '活动卡组',
 
@@ -567,13 +567,14 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'video',
-    defaultRowHeight: 360,
+    defaultRowHeight: 450,
     name: '视频',
     group: 'media',
     icon: 'VideoCamera',
     description: '品牌宣传与商品视频播放',
     defaultOptions: {
       videoUrl: '',
+      height: 450,
       coverUrl: 'https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/video/video_cover.png',
       url: '',
       autoPlay: false,
@@ -597,7 +598,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'goodsList',
-    defaultRowHeight: 980,
+    defaultRowHeight: '',
 
     name: '商品列表',
 
@@ -727,7 +728,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'gridFloor',
-    defaultRowHeight: 560,
+    defaultRowHeight: '',
 
     name: '宫格楼层',
 
@@ -843,7 +844,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'goodsGrid',
-    defaultRowHeight: 420,
+    defaultRowHeight: '',
     name: '商品宫格',
     group: 'commerce',
     icon: 'Menu',
@@ -922,7 +923,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'bannerFloor',
-    defaultRowHeight: 560,
+    defaultRowHeight: '',
 
     name: '横幅楼层',
 
@@ -964,7 +965,7 @@ export const COMPONENT_DEFINITIONS = [
   {
 
     type: 'goodsBar',
-    defaultRowHeight: 280,
+    defaultRowHeight: '',
 
     name: '商品条',
 
@@ -1001,7 +1002,7 @@ export const COMPONENT_DEFINITIONS = [
   },
 
   {type: 'channelFloor',
-    defaultRowHeight: 620,
+    defaultRowHeight: '',
 
     name: '频道楼层',
 
@@ -1045,7 +1046,7 @@ export const COMPONENT_DEFINITIONS = [
 
   {
     type: 'recommendFeed',
-    defaultRowHeight: 1270,
+    defaultRowHeight: '',
 
     name: '推荐商品',
 
@@ -1120,7 +1121,7 @@ export const COMPONENT_DEFINITIONS = [
   },
   {
     type: 'couponList',
-    defaultRowHeight: 160,
+    defaultRowHeight: '',
 
     name: '优惠券',
 
diff --git a/manager/src/views/page-decoration/pc/index.vue b/manager/src/views/page-decoration/pc/index.vue
index 3fd5d1c6a..b8f133c96 100644
--- a/manager/src/views/page-decoration/pc/index.vue
+++ b/manager/src/views/page-decoration/pc/index.vue
@@ -225,7 +225,7 @@
 
                 :class="{ 'is-row-selected': isCurrentRowSelected(row.id) }"
 
-                :style="getRowWrapperStyle(row.rowStyle)"
+                :style="getRowWrapperStyle(row.rowStyle, row.components)"
 
                 @click.stop="handleSelectRow(row, rIndex)"
 
@@ -289,14 +289,14 @@
                   group="pc-row-components"
                   item-key="id"
                   class="row-components-flex"
-                  :style="getRowFlexStyle(row.rowStyle)"
+                  :style="getRowFlexStyle(row.rowStyle, row.components)"
                   @change="markDirty"
                 >
                   <template #item="{ element: comp, index: cIndex }">
                     <div
                       class="canvas-comp-wrap"
                       :class="{ 'is-selected': selectedCompId === comp.id }"
-                      :style="getCompWrapperStyle(comp.componentStyle, row.rowStyle, row.components ? row.components.length : 1)"
+                      :style="getCompWrapperStyle(comp.componentStyle, row.rowStyle, row.components ? row.components.length : 1, comp.type)"
                       @click.stop="handleSelectComp(row, rIndex, comp)"
                     >
                       <!-- 选中的组件左上角名称标识徽标（万米魔方设计） -->
@@ -800,11 +800,19 @@ function clearSelection() {
 
 function normalizeRows(list) {
   if (!Array.isArray(list)) return [];
+  const autoCompTypes = ['goodsGrid', 'gridFloor', 'bannerFloor', 'goodsBar', 'channelFloor', 'goodsList', 'recommendFeed', 'articleContent', 'brandWall', 'channelGrid', 'couponList'];
+  const legacyHeights = [40, '40', 280, '280', 420, '420', 560, '560', 620, '620', 980, '980', 1270, '1270'];
   const normalized = [];
   list.forEach(r => {
     if (!r) return;
-    if (r.rowStyle && (r.rowStyle.height === 40 || r.rowStyle.height === "40")) {
-      r.rowStyle.height = "";
+    if (r.rowStyle) {
+      if (r.rowStyle.height === 40 || r.rowStyle.height === "40") {
+        r.rowStyle.height = "";
+      }
+      const hasAutoComp = Array.isArray(r.components) && r.components.some(c => autoCompTypes.includes(c?.type));
+      if (hasAutoComp && legacyHeights.includes(r.rowStyle.height)) {
+        r.rowStyle.height = "";
+      }
     }
     normalized.push(r);
   });
@@ -1252,7 +1260,8 @@ function getCompIcon(type) {
 
 // 计算行样式
 
-function getRowWrapperStyle(style) {
+function getRowWrapperStyle(style, components = []) {
+  const hasAutoComp = Array.isArray(components) && components.some(c => ['goodsGrid', 'gridFloor', 'bannerFloor', 'goodsBar', 'channelFloor', 'goodsList', 'recommendFeed', 'articleContent', 'brandWall', 'channelGrid', 'couponList'].includes(c?.type));
   if (!style) return { width: '100%' };
 
   const s = {};
@@ -1280,8 +1289,12 @@ function getRowWrapperStyle(style) {
     const h = String(style.height).trim();
     if (h && Number(h) > 0) {
       const hVal = /^\d+$/.test(h) ? `${h}px` : h;
-      s.height = hVal;
-      s.minHeight = hVal;
+      if (hasAutoComp) {
+        s.minHeight = hVal;
+      } else {
+        s.height = hVal;
+        s.minHeight = hVal;
+      }
     }
   }
 
@@ -1318,7 +1331,8 @@ function getRowWrapperStyle(style) {
   return s;
 }
 
-function getRowFlexStyle(style) {
+function getRowFlexStyle(style, components = []) {
+  const hasAutoComp = Array.isArray(components) && components.some(c => ['goodsGrid', 'gridFloor', 'bannerFloor', 'goodsBar', 'channelFloor', 'goodsList', 'recommendFeed', 'articleContent', 'brandWall', 'channelGrid', 'couponList'].includes(c?.type));
   if (!style) return { display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', width: '100%', height: '100%' };
   const s = {
     display: 'flex',
@@ -1333,8 +1347,12 @@ function getRowFlexStyle(style) {
     const h = String(style.height).trim();
     if (h && Number(h) > 0) {
       const hVal = /^\d+$/.test(h) ? `${h}px` : h;
-      s.height = hVal;
-      s.minHeight = hVal;
+      if (hasAutoComp) {
+        s.minHeight = hVal;
+      } else {
+        s.height = hVal;
+        s.minHeight = hVal;
+      }
     }
   }
   if (style.gap !== undefined && style.gap !== '') {
@@ -1348,7 +1366,8 @@ function getRowFlexStyle(style) {
 
 // 计算组件外层样式
 
-function getCompWrapperStyle(style, rowStyle = {}, totalComps = 1) {
+function getCompWrapperStyle(style, rowStyle = {}, totalComps = 1, compType = '') {
+  const isAutoHeightComp = compType && ['goodsGrid', 'gridFloor', 'bannerFloor', 'goodsBar', 'channelFloor', 'goodsList', 'recommendFeed', 'articleContent', 'brandWall', 'channelGrid', 'couponList'].includes(compType);
 
   if (!style) return {};
 
@@ -1358,8 +1377,12 @@ function getCompWrapperStyle(style, rowStyle = {}, totalComps = 1) {
     const rh = String(rowStyle.height).trim();
     if (rh && Number(rh) > 0) {
       const rhVal = /^\d+$/.test(rh) ? `${rh}px` : rh;
-      s.height = rhVal;
-      s.minHeight = rhVal;
+      if (isAutoHeightComp) {
+        s.minHeight = rhVal;
+      } else {
+        s.height = rhVal;
+        s.minHeight = rhVal;
+      }
     }
   }
   const gap = Number(rowStyle?.gap) || 0;
@@ -1612,7 +1635,11 @@ function goBack() {
 
     } else {
 
-      router.push('/pcFloor');
+      if (window.history.state?.back) {
+        router.go(-1);
+      } else {
+        window.close();
+      }
 
     }
 
@@ -1643,6 +1670,8 @@ function goBack() {
 }
 
 
+let autoSaveTimer = null;
+
 onMounted(() => {
 
   const id = route.query.id;
@@ -1671,7 +1700,10 @@ onMounted(() => {
 
 onUnmounted(() => {
 
-  if (autoSaveTimer) clearInterval(autoSaveTimer);
+  if (autoSaveTimer) {
+    clearInterval(autoSaveTimer);
+    autoSaveTimer = null;
+  }
 
 });
 
diff --git a/manager/src/views/page-decoration/pc/presets/double11Preset.js b/manager/src/views/page-decoration/pc/presets/double11Preset.js
index edb8b6ba9..e5bc34c99 100644
--- a/manager/src/views/page-decoration/pc/presets/double11Preset.js
+++ b/manager/src/views/page-decoration/pc/presets/double11Preset.js
@@ -724,7 +724,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           0,
           0
         ],
-        "height": 180
+        "height": 220
       },
       "components": [
         {
@@ -901,6 +901,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
             "backgroundColor": "transparent"
           },
           "options": {
+            "height": 450,
             "elements": [
               {
                 "type": "badge",
@@ -979,7 +980,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 560
+        "height": ""
       },
       "components": [
         {
@@ -1061,7 +1062,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 560
+        "height": ""
       },
       "components": [
         {
@@ -1140,7 +1141,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 620
+        "height": ""
       },
       "components": [
         {
@@ -1249,7 +1250,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 420
+        "height": ""
       },
       "components": [
         {
@@ -1404,7 +1405,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 360
+        "height": 450
       },
       "components": [
         {
@@ -1417,6 +1418,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           },
           "options": {
             "videoUrl": "https://vjs.zencdn.net/v/oceans.mp4",
+            "height": 450,
             "coverUrl": "https://lilishop-pc.oss-cn-beijing.aliyuncs.com/static/video/video_cover.png",
             "url": "/goodsList?brand=1",
             "title": "双11全球狂欢发布盛典 · 年度旗舰好物真实开箱测评",
@@ -1481,7 +1483,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 220
+        "height": ""
       },
       "components": [
         {
@@ -1656,7 +1658,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 980
+        "height": ""
       },
       "components": [
         {
@@ -1810,7 +1812,7 @@ export const DOUBLE11_PAGE_DOCUMENT = {
           16
         ],
         "borderRadius": "8px",
-        "height": 1270
+        "height": ""
       },
       "components": [
         {
diff --git a/manager/src/views/page-decoration/pc/template/TplFreeLayout.vue b/manager/src/views/page-decoration/pc/template/TplFreeLayout.vue
index 17a2c4be4..7cd67ae8c 100644
--- a/manager/src/views/page-decoration/pc/template/TplFreeLayout.vue
+++ b/manager/src/views/page-decoration/pc/template/TplFreeLayout.vue
@@ -23,7 +23,7 @@ const props = defineProps({
 const customStyle = computed(() => {
   const s = props.componentStyle || {};
   return {
-    height: `${props.options?.height || 260}px`,
+    height: `${props.options?.height || 450}px`,
     backgroundColor: s.backgroundColor || '#f8fafc',
     borderRadius: Array.isArray(s.radius)
       ? `${s.radius[0]}px ${s.radius[1]}px ${s.radius[2]}px ${s.radius[3]}px`
diff --git a/manager/src/views/page-decoration/pc/template/TplHotZone.vue b/manager/src/views/page-decoration/pc/template/TplHotZone.vue
index d8a68dd4f..973371057 100644
--- a/manager/src/views/page-decoration/pc/template/TplHotZone.vue
+++ b/manager/src/views/page-decoration/pc/template/TplHotZone.vue
@@ -7,10 +7,10 @@
         :key="idx"
         class="zone-mask"
         :style="{
-          top: `${zone.top || 0}%`,
-          left: `${zone.left || 0}%`,
-          width: `${zone.width || 10}%`,
-          height: `${zone.height || 10}%`
+          top: `${zone.top !== undefined ? zone.top : ((zone.topPer || 0) * 100)}%`,
+          left: `${zone.left !== undefined ? zone.left : ((zone.leftPer || 0) * 100)}%`,
+          width: `${zone.width !== undefined ? zone.width : ((zone.widthPer || 0.1) * 100)}%`,
+          height: `${zone.height !== undefined ? zone.height : ((zone.heightPer || 0.1) * 100)}%`
         }"
       >
         <span class="zone-label">{{ zone.title || `热区 ${idx + 1}` }}</span>