feat：【mall】diy editor 恢复中间，宽度还有点问题

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -49,9 +49,8 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
- * 组件样式
- */
+
+/** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -78,24 +77,17 @@ const style = computed(() => {
   };
 });
 
-/**
- * 移动组件
- * @param direction 移动方向
- */
+/** 移动组件 */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
- * 复制组件
- */
+/** 复制组件 */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
- * 删除组件
- */
+/** 删除组件 */
 const handleDeleteComponent = () => {
   emits('delete');
 };

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -14,16 +14,15 @@ import { componentConfigs } from './mobile/index';
 /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
 defineOptions({ name: 'ComponentLibrary' });
 
-// 组件列表
+/** 组件列表 */
 const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
-// 组件分组
-const groups = reactive<any[]>([]);
-// 展开的折叠面板
-const extendGroups = reactive<string[]>([]);
 
-// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+const groups = reactive<any[]>([]); // 组件分组
+const extendGroups = reactive<string[]>([]); // 展开的折叠面板
+
+/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
@@ -53,7 +52,7 @@ watch(
   },
 );
 
-// 克隆组件
+/** 克隆组件 */
 const handleCloneComponent = (component: DiyComponent<any>) => {
   const instance = cloneDeep(component);
   instance.uid = Date.now();

apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue

@@ -595,18 +595,22 @@ $phone-width: 375px;
       }
 
       /* 手机页面编辑区域 */
-      .phone-container {
-        position: relative;
-        width: $phone-width;
-        height: 100%;
-        margin: 0 auto;
-        overflow-x: hidden;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
+      :deep(.editor-design-center) {
+        width: 100%;
 
-        .drag-area {
-          width: 100%;
+        /* 主体内容 */
+        .phone-container {
+          position: relative;
+          width: $phone-width;
           height: 100%;
+          margin: 0 auto;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+
+          .drag-area {
+            width: 100%;
+            height: 100%;
+          }
         }
       }