From 3b4cdfef82b72957b0645b774e44e8a610e75e51 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 3 Nov 2025 13:34:55 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90?=
 =?UTF-8?q?mall=E3=80=91diy-editor=20=E7=9A=84=20component-library.vue=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20tailwindcss=20=E7=AE=80=E5=8C=96=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/component-library.vue          | 72 ++++++-------------
 1 file changed, 23 insertions(+), 49 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 e87221794..74e114c1d 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
@@ -61,7 +61,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 </script>
 
 <template>
-  <ElAside class="editor-left" width="261px">
+  <ElAside
+    class="editor-left z-[1] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
+    width="261px"
+  >
     <ElScrollbar>
       <ElCollapse v-model="extendGroups">
         <ElCollapseItem
@@ -71,7 +74,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
           :title="group.name"
         >
           <draggable
-            class="component-container"
+            class="flex flex-wrap items-center"
             ghost-class="draggable-ghost"
             item-key="index"
             :list="group.components"
@@ -83,9 +86,18 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
           >
             <template #item="{ element }">
               <div>
-                <div class="drag-placement">组件放置区域</div>
-                <div class="component">
-                  <IconifyIcon :icon="element.icon" :size="32" />
+                <div class="hidden text-white">组件放置区域</div>
+                <div
+                  class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
+                  :style="{
+                    borderColor: 'var(--el-border-color-lighter)',
+                  }"
+                >
+                  <IconifyIcon
+                    :icon="element.icon"
+                    :size="32"
+                    class="mb-1 text-gray-500"
+                  />
                   <span class="mt-1 text-xs">{{ element.name }}</span>
                 </div>
               </div>
@@ -99,11 +111,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 
 <style scoped lang="scss">
 .editor-left {
-  z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
-  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
-
   :deep(.el-collapse) {
     border-top: none;
   }
@@ -124,50 +131,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     border-bottom: none;
   }
 
-  .component-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 86px;
-    height: 86px;
-    cursor: move;
-    border-right: 1px solid var(--el-border-color-lighter);
-    border-bottom: 1px solid var(--el-border-color-lighter);
-
-    .el-icon {
-      margin-bottom: 4px;
-      color: gray;
-    }
-  }
-
+  /* 组件 hover 和 active 状态（需要 CSS 变量）*/
   .component.active,
   .component:hover {
     color: var(--el-color-white);
     background: var(--el-color-primary);
 
-    .el-icon {
+    :deep(.iconify) {
       color: var(--el-color-white);
     }
   }
-
-  .component:nth-of-type(3n) {
-    border-right: none;
-  }
-}
-
-/* 拖拽占位提示，默认不显示 */
-.drag-placement {
-  display: none;
-  color: #fff;
 }
 
+/* 拖拽区域全局样式 */
 .drag-area {
   /* 拖拽到手机区域时的样式 */
   .draggable-ghost {
@@ -203,14 +179,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
       background: #5487df;
     }
 
-    /* 拖拽时隐藏组件 */
     .component {
-      display: none;
+      display: none; /* 拖拽时隐藏组件 */
     }
 
-    /* 拖拽时显示占位提示 */
-    .drag-placement {
-      display: block;
+    .hidden {
+      display: block !important; /* 拖拽时显示占位提示 */
     }
   }
 }

From 27d47c13f2983aa183f779b716931dddde02f9a8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 3 Nov 2025 13:44:40 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90?=
 =?UTF-8?q?mall=E3=80=91diy-editor=20=E7=9A=84=20component-container.vue?=
 =?UTF-8?q?=20=E4=BD=BF=E7=94=A8=20tailwindcss=20=E7=AE=80=E5=8C=96=20styl?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/component-container.vue        | 23 ++++---------------
 1 file changed, 4 insertions(+), 19 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index f5696f8a3..a0321879d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -93,15 +93,11 @@ const handleDeleteComponent = () => {
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
-    <div
-      :style="{
-        ...style,
-      }"
-    >
+  <div class="component relative cursor-move" :class="[{ active }]">
+    <div :style="style">
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -150,19 +146,8 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
       border: $hover-border-width dashed var(--el-color-primary);
@@ -228,7 +213,7 @@ $toolbar-position: -55px;
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 

From f0f738a36802df91f723d14381acaff4649c137f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 3 Nov 2025 13:57:52 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90?=
 =?UTF-8?q?mall=E3=80=91diy-editor=20=E7=9A=84=20index.vue=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20tailwindcss=20=E7=AE=80=E5=8C=96=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../promotion/components/diy-editor/index.vue | 88 +++++--------------
 1 file changed, 21 insertions(+), 67 deletions(-)

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 97fc7aa3a..172bb8d21 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
@@ -304,9 +304,15 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <ElContainer class="editor">
+    <ElContainer class="editor flex h-full flex-col">
       <!-- 顶部：工具栏 -->
-      <ElHeader class="editor-header">
+      <ElHeader
+        class="editor-header flex !h-[42px] items-center justify-between !border-b !p-0"
+        :style="{
+          backgroundColor: 'var(--el-bg-color)',
+          borderBottomColor: 'var(--el-border-color)',
+        }"
+      >
         <!-- 左侧操作区 -->
         <slot name="toolBarLeft"></slot>
         <!-- 中心操作区 -->
@@ -334,7 +340,7 @@ onMounted(() => {
       </ElHeader>
 
       <!-- 中心区域 -->
-      <ElContainer class="editor-container">
+      <ElContainer class="editor-container h-[calc(100vh-135px)]">
         <!-- 左侧：组件库（ComponentLibrary） -->
         <ElAside width="261px" class="editor-left">
           <ComponentLibrary
@@ -344,11 +350,15 @@ onMounted(() => {
           />
         </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <div
+          class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
+          :style="{ backgroundColor: 'var(--app-content-bg-color)' }"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
-          <div class="editor-design-top">
+          <div class="editor-design-top mx-auto flex w-[375px] flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="status-bar" :src="statusBarImg" />
+            <img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -415,7 +425,7 @@ onMounted(() => {
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component cursor-pointer"
+            class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -425,7 +435,9 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group">
+          <div
+            class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
+          >
             <ElTag
               v-if="showPageConfig"
               :effect="
@@ -467,7 +479,7 @@ onMounted(() => {
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
-          class="editor-right"
+          class="editor-right shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
           width="350px"
         >
           <ElCard
@@ -516,22 +528,8 @@ onMounted(() => {
 /* 手机宽度 */
 $phone-width: 375px;
 
-/* 根节点样式 */
 .editor {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  /* 顶部：工具栏 */
   .editor-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 42px;
-    padding: 0;
-    background-color: var(--el-bg-color);
-    border-bottom: solid 1px var(--el-border-color);
-
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
@@ -543,14 +541,8 @@ $phone-width: 375px;
 
   /* 中心操作区 */
   .editor-container {
-    height: calc(100vh - 135px);
-
     /* 右侧属性面板 */
     :deep(.editor-right) {
-      flex-shrink: 0;
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
@@ -579,37 +571,6 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .editor-center {
-      position: relative;
-      display: flex;
-      flex: 1 1 0;
-      flex-direction: column;
-      justify-content: center;
-      width: 100%;
-      margin: 16px 0 0;
-      overflow: hidden;
-      background-color: var(--app-content-bg-color);
-
-      /* 手机顶部 */
-      .editor-design-top {
-        display: flex;
-        flex-direction: column;
-        width: $phone-width;
-        margin: 0 auto;
-
-        /* 手机顶部状态栏 */
-        .status-bar {
-          width: $phone-width;
-          height: 20px;
-          background-color: #fff;
-        }
-      }
-
-      /* 手机底部导航 */
-      .editor-design-bottom {
-        width: $phone-width;
-        margin: 0 auto;
-      }
-
       /* 手机页面编辑区域 */
       :deep(.editor-design-center) {
         width: 100%;
@@ -632,13 +593,6 @@ $phone-width: 375px;
 
       /* 固定布局的组件 操作按钮区 */
       .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-
         :deep(.el-tag) {
           border: none;
           box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);