From 04d7725db97aab9dfb6c9fae0333d1b07666e98c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 18 May 2022 17:29:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E5=B1=9E=E6=80=A7=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E5=A4=A7=E5=B0=8F=E9=85=8D=E7=BD=AE=EF=BC=9B=E8=AE=B0?=
 =?UTF-8?q?=E4=BD=8F=E7=BC=96=E8=BE=91=E5=99=A8=E5=88=86=E6=A0=8F=E5=AE=BD?=
 =?UTF-8?q?=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/PropsPanel.vue |  5 ++--
 packages/editor/src/services/ui.ts         | 32 ++++++++++++++++++----
 packages/editor/src/theme/props-panel.scss | 20 ++++++++------
 packages/editor/src/type.ts                |  2 ++
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 4328291d..f7b4c50a 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -1,9 +1,9 @@
 <template>
   <m-form
-    class="m-editor-props-panel"
+    :class="`m-editor-props-panel ${propsPanelSize}`"
     popper-class="m-editor-props-panel-popper"
     ref="configForm"
-    size="small"
+    :size="propsPanelSize"
     :init-values="values"
     :config="curFormConfig"
     @change="submit"
@@ -55,6 +55,7 @@ export default defineComponent({
       values,
       configForm,
       curFormConfig,
+      propsPanelSize: computed(() => services?.uiService.get('propsPanelSize') || 'small'),
 
       async submit() {
         try {
diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts
index f0bc96c4..bfa23fb2 100644
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@@ -28,6 +28,14 @@ import BaseService from './BaseService';
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
+const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
+
+const defaultColumnWidth = {
+  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
+  right: DEFAULT_RIGHT_COLUMN_WIDTH,
+};
+
 const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
@@ -40,13 +48,10 @@ const state = reactive<UiState>({
     width: 375,
     height: 817,
   },
-  columnWidth: {
-    left: DEFAULT_LEFT_COLUMN_WIDTH,
-    center: globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH,
-    right: DEFAULT_RIGHT_COLUMN_WIDTH,
-  },
+  columnWidth: defaultColumnWidth,
   showGuides: true,
   showRule: true,
+  propsPanelSize: 'small',
 });
 
 class Ui extends BaseService {
@@ -57,6 +62,16 @@ class Ui extends BaseService {
         center: 'auto',
       });
     });
+
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        this.setColumnWidth(columnWidthCache);
+      } catch (e) {
+        console.error(e);
+      }
+    }
   }
 
   public set<T = any>(name: keyof UiState, value: T) {
@@ -112,10 +127,17 @@ class Ui extends BaseService {
     if (!center || center === 'auto') {
       const bodyWidth = globalThis.document.body.clientWidth;
       columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+      if (columnWidth.center <= 0) {
+        columnWidth.left = defaultColumnWidth.left;
+        columnWidth.center = defaultColumnWidth.center;
+        columnWidth.right = defaultColumnWidth.right;
+      }
     } else {
       columnWidth.center = center;
     }
 
+    globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
+
     state.columnWidth = columnWidth;
   }
 
diff --git a/packages/editor/src/theme/props-panel.scss b/packages/editor/src/theme/props-panel.scss
index 9540b76b..12c593cf 100644
--- a/packages/editor/src/theme/props-panel.scss
+++ b/packages/editor/src/theme/props-panel.scss
@@ -1,18 +1,20 @@
 .m-editor-props-panel {
   padding: 0 10px;
 
-  .el-form-item__label {
-    font-size: 12px;
-  }
-
-  .m-fieldset {
-    legend {
+  &.small {
+    .el-form-item__label {
       font-size: 12px;
     }
-  }
 
-  .el-tabs__item {
-    font-size: 12px;
+    .m-fieldset {
+      legend {
+        font-size: 12px;
+      }
+    }
+
+    .el-tabs__item {
+      font-size: 12px;
+    }
   }
 
   .el-input__wrapper {
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 283eaf83..d2d4cfaa 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -99,6 +99,8 @@ export interface UiState {
   showGuides: boolean;
   /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
   showRule: boolean;
+  /** 用于控制该属性配置表单内组件的尺寸 */
+  propsPanelSize: 'large' | 'default' | 'small';
 }
 
 export interface EditorNodeInfo {