From f984cb6dbd89dbf92ccb4d98d71b66262cbd9a1d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 2 Nov 2025 17:22:38 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91=E4=BF=AE=E5=A4=8D=20diy-editor=20=E7=9A=84=E2=80=9C?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=EF=BC=9A=E8=AE=BE=E8=AE=A1=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=EF=BC=88ComponentContainer=EF=BC=89=E2=80=9D=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/component-library.vue          |  1 -
 .../promotion/components/diy-editor/index.vue | 46 ++++++++++++-------
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 9428a4187..8e6d63154 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -128,7 +128,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    width: 261px;
   }
 
   .component {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index 8d3fda28b..d40749ea6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -339,10 +339,7 @@ onMounted(() => {
           />
         </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <ElContainer
-          class="editor-center page-prop-area"
-          @click="handlePageSelected"
-        >
+        <div class="editor-center page-prop-area" @click="handlePageSelected">
           <!-- 手机顶部 -->
           <div class="editor-design-top">
             <!-- 手机顶部状态栏 -->
@@ -373,7 +370,15 @@ onMounted(() => {
             />
           </div>
           <!-- 手机页面编辑区域 -->
-          <ElScrollbar class="phone-container">
+          <ElScrollbar
+            :view-style="{
+              backgroundColor: pageConfigComponent.property.backgroundColor,
+              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
+            }"
+            height="100%"
+            view-class="phone-container"
+            wrap-class="editor-design-center page-prop-area"
+          >
             <draggable
               v-model="pageComponents"
               :animation="200"
@@ -415,39 +420,45 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group gap-2">
+          <div class="fixed-component-action-group">
             <ElTag
               v-if="showPageConfig"
-              :color="
+              :effect="
                 selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'blue'
-                  : 'default'
+                  ? 'dark'
+                  : 'plain'
+              "
+              :type="
+                selectedComponent?.uid === pageConfigComponent.uid
+                  ? 'primary'
+                  : 'info'
               "
-              :bordered="false"
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
-              <ElText>{{ pageConfigComponent.name }}</ElText>
+              <span>{{ pageConfigComponent.name }}</span>
             </ElTag>
             <template v-for="(component, index) in pageComponents" :key="index">
               <ElTag
                 v-if="component.position === 'fixed'"
-                :color="
-                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
+                :effect="
+                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
+                "
+                :type="
+                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
                 "
-                :bordered="false"
                 closable
                 size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
                 <IconifyIcon :icon="component.icon" :size="12" />
-                <ElText>{{ component.name }}</ElText>
+                <span>{{ component.name }}</span>
               </ElTag>
             </template>
           </div>
-        </ElContainer>
+        </div>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
@@ -457,7 +468,7 @@ onMounted(() => {
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            :bordered="false"
+            shadow="never"
           >
             <!-- 组件名称 -->
             <template #header>
@@ -621,6 +632,7 @@ $phone-width: 375px;
         right: 16px;
         display: flex;
         flex-direction: column;
+        gap: 8px;
 
         :deep(.el-tag) {
           border: none;