营销：优化装修编辑器样式

src/components/DiyEditor/components/ComponentContainer.vue

@@ -1,8 +1,7 @@
 <template>
   <div
     :style="{
-      ...style,
+      ...style
-      background: property.bgType === 'color' ? property.bgColor : `url(${property.bgImg})`
     }"
   >
     <slot></slot>
@@ -18,7 +17,7 @@ import { ComponentStyle } from '@/components/DiyEditor/util'
  */
 defineOptions({ name: 'ComponentContainer' })
 
-const props = defineProps<{ property: ComponentStyle }>()
+const props = defineProps<{ property: ComponentStyle | undefined }>()
 
 const style = computed(() => {
   if (!props.property) {
@@ -37,7 +36,9 @@ const style = computed(() => {
     borderTopRightRadius: `${props.property.borderTopRightRadius || 0}px`,
     borderBottomRightRadius: `${props.property.borderBottomRightRadius || 0}px`,
     borderBottomLeftRadius: `${props.property.borderBottomLeftRadius || 0}px`,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    background:
+      props.property.bgType === 'color' ? props.property.bgColor : `url(${props.property.bgImg})`
   }
 })
 </script>

src/components/DiyEditor/components/ComponentLibrary.vue

@@ -11,6 +11,7 @@
           <draggable
             class="component-container"
             ghost-class="draggable-ghost"
+            item-key="index"
             :list="group.components"
             :sort="false"
             :group="{ name: 'component', pull: 'clone', put: false }"

src/components/DiyEditor/components/mobile/SearchBar/index.vue

@@ -42,7 +42,6 @@ defineProps<{ property: SearchProperty }>()
 
 <style scoped lang="scss">
 .search-bar {
-  width: 375px;
   /* 搜索框 */
   .inner {
     position: relative;

src/components/DiyEditor/index.vue

@@ -33,7 +33,6 @@
       <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
       <!-- 中心设计区域 -->
       <div class="editor-center page-prop-area" @click="handlePageSelected">
-        <div class="editor-design">
         <!-- 手机顶部 -->
         <div class="editor-design-top">
           <!-- 手机顶部状态栏 -->
@@ -51,10 +50,11 @@
           />
         </div>
         <!-- 手机页面编辑区域 -->
-          <el-scrollbar class="editor-design-center" height="100%" view-class="page-prop-area">
+        <el-scrollbar
-            <div
+          height="100%"
-              class="phone-container"
+          wrap-class="editor-design-center page-prop-area"
-              :style="{
+          view-class="phone-container"
+          :view-style="{
             backgroundColor: pageConfigComponent.property.backgroundColor,
             backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
           }"
@@ -71,7 +71,16 @@
             @change="handleComponentChange"
           >
             <template #item="{ element, index }">
-                  <div class="component-container" @click="handleComponentSelected(element, index)">
+              <div class="component" @click="handleComponentSelected(element, index)">
+                <!-- 组件内容区 -->
+                <ComponentContainer :property="element.property.style">
+                  <component
+                    :is="element.id"
+                    :property="element.property"
+                    :data-type="element.id"
+                  />
+                </ComponentContainer>
+                <div :class="['component-wrap', { active: selectedComponentIndex === index }]">
                   <!-- 左侧组件名 -->
                   <div
                     :class="['component-name', { active: selectedComponentIndex === index }]"
@@ -79,14 +88,6 @@
                   >
                     {{ element.name }}
                   </div>
-                    <!-- 组件内容区 -->
-                    <div :class="['component', { active: selectedComponentIndex === index }]">
-                      <component
-                        :is="element.id"
-                        :property="element.property"
-                        :data-type="element.id"
-                      />
-                    </div>
                   <!-- 左侧：组件操作工具栏 -->
                   <div
                     class="component-toolbar"
@@ -122,9 +123,9 @@
                     </el-button-group>
                   </div>
                 </div>
+              </div>
             </template>
           </draggable>
-            </div>
         </el-scrollbar>
         <!-- 手机底部导航 -->
         <div
@@ -139,7 +140,6 @@
           <TabBar :property="tabBarComponent.property" @click="handleTabBarSelected" />
         </div>
       </div>
-      </div>
       <!-- 右侧属性面板 -->
       <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
         <el-card
@@ -383,6 +383,7 @@ onMounted(() => setDefaultSelectedComponent())
 <style lang="scss" scoped>
 /* 手机宽度 */
 $phone-width: 375px;
+$toolbar-height: 42px;
 /* 根节点样式 */
 .editor {
   height: 100%;
@@ -394,7 +395,7 @@ $phone-width: 375px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: auto;
+    height: $toolbar-height;
     padding: 0;
     border-bottom: solid 1px var(--el-border-color);
     background-color: var(--el-bg-color);
@@ -416,12 +417,14 @@ $phone-width: 375px;
   /* 中心操作区 */
   .editor-container {
     height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
+        $toolbar-height
     );
     /* 右侧属性面板 */
     .editor-right {
       flex-shrink: 0;
       box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
+      overflow: hidden;
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
@@ -440,29 +443,24 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .editor-center {
+      position: relative;
       flex: 1 1 0;
-      padding: 16px 0;
       background-color: var(--app-content-bg-color);
       display: flex;
-      justify-content: center;
-      /* 中心设计区域 */
-      .editor-design {
-        position: relative;
-        height: 100%;
-        width: 100%;
-        display: flex;
       flex-direction: column;
-        align-items: center;
+      justify-content: center;
+      margin: 16px 0 0 0;
       overflow: hidden;
+      width: 100%;
 
       /* 组件 */
       .component {
-          border: 1px solid #fff;
         width: $phone-width;
         cursor: move;
         /* 鼠标放到组件上时 */
         &:hover {
           border: 1px dashed var(--el-color-primary);
+          box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
         }
       }
       /* 组件选中 */
@@ -472,6 +470,7 @@ $phone-width: 375px;
       /* 手机顶部 */
       .editor-design-top {
         width: $phone-width;
+        margin: 0 auto;
         /* 手机顶部状态栏 */
         .status-bar {
           height: 20px;
@@ -482,33 +481,42 @@ $phone-width: 375px;
       /* 手机底部导航 */
       .editor-design-bottom {
         width: $phone-width;
+        margin: 0 auto;
       }
       /* 手机页面编辑区域 */
-        .editor-design-center {
+      :deep(.editor-design-center) {
         width: 100%;
-          flex: 1 1 0;
-
-          :deep(.el-scrollbar__view) {
-            height: 100%;
-          }
 
         /* 主体内容 */
         .phone-container {
-            height: 100%;
-            box-sizing: border-box;
           position: relative;
           background-repeat: no-repeat;
           background-size: 100% 100%;
+          height: 100%;
           width: $phone-width;
           margin: 0 auto;
           .drag-area {
             height: 100%;
+            width: 100%;
           }
 
-            /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
+          .component {
-            .component-container {
-              width: 100%;
             position: relative;
+            cursor: move;
+
+            .component-wrap {
+              display: none;
+              position: absolute;
+              left: -2px;
+              top: 0;
+              width: 100%;
+              height: 100%;
+
+              &.active {
+                display: block;
+                border: 2px solid var(--el-color-primary);
+                box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
+              }
               /* 左侧：组件名称 */
               .component-name {
                 position: absolute;
@@ -518,7 +526,7 @@ $phone-width: 375px;
                 height: 25px;
                 background: #fff;
                 font-size: 12px;
-                left: -85px;
+                left: -88px;
                 top: 0;
                 box-shadow:
                   0 0 4px #00000014,
@@ -548,7 +556,7 @@ $phone-width: 375px;
               .component-toolbar {
                 position: absolute;
                 top: 0;
-                right: -57px;
+                right: -55px;
                 /* 左侧小三角 */
                 &:before {
                   position: absolute;