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,12 +595,15 @@ $phone-width: 375px;
       }
 
       /* 手机页面编辑区域 */
+      :deep(.editor-design-center) {
+        width: 100%;
+
+        /* 主体内容 */
         .phone-container {
           position: relative;
           width: $phone-width;
           height: 100%;
           margin: 0 auto;
-        overflow-x: hidden;
           background-repeat: no-repeat;
           background-size: 100% 100%;
 
@@ -609,6 +612,7 @@ $phone-width: 375px;
             height: 100%;
           }
         }
+      }
 
       /* 固定布局的组件 操作按钮区 */
       .fixed-component-action-group {