From 3c21f45e88dfe7c61552c704bd9cbd09215017fe Mon Sep 17 00:00:00 2001 From: roymondchen Date: Fri, 3 Jul 2026 19:44:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=94=AF=E6=8C=81=E9=80=9A?= =?UTF-8?q?=E8=BF=87=20uiService=20=E9=85=8D=E7=BD=AE=E5=88=97=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E6=9C=80=E5=B0=8F=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将左侧、中间、右侧列的最小宽度从硬编码常量改为 UiState 配置项，便于业务侧自定义编辑器布局约束。 --- packages/editor/src/layouts/Framework.vue | 13 +++++++------ .../src/layouts/props-panel/use-style-panel.ts | 7 ++++--- packages/editor/src/services/ui.ts | 6 ++++++ packages/editor/src/type.ts | 6 ++++++ .../layouts/props-panel/use-style-panel.spec.ts | 2 ++ 5 files changed, 25 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue index e5f2518a..1efbcae0 100644 --- a/packages/editor/src/layouts/Framework.vue +++ b/packages/editor/src/layouts/Framework.vue @@ -25,9 +25,9 @@ right-class="m-editor-framework-right" :left="hideSidebar ? undefined : columnWidth.left" :right="columnWidth.right" - :min-left="hideSidebar ? 0 : MIN_LEFT_COLUMN_WIDTH" - :min-right="MIN_RIGHT_COLUMN_WIDTH" - :min-center="MIN_CENTER_COLUMN_WIDTH" + :min-left="hideSidebar ? 0 : minLeftColumnWidth" + :min-right="minRightColumnWidth" + :min-center="minCenterColumnWidth" :width="frameworkRect.width" @change="columnWidthChange" > @@ -78,9 +78,6 @@ import { getEditorConfig } from '@editor/utils/config'; import { DEFAULT_LEFT_COLUMN_WIDTH, LEFT_COLUMN_WIDTH_STORAGE_KEY, - MIN_CENTER_COLUMN_WIDTH, - MIN_LEFT_COLUMN_WIDTH, - MIN_RIGHT_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY, } from '@editor/utils/const'; @@ -116,6 +113,10 @@ const showSrc = computed(() => uiService.get('showSrc')); const columnWidth = computed(() => uiService.get('columnWidth')); +const minLeftColumnWidth = computed(() => uiService.get('minLeftColumnWidth')); +const minCenterColumnWidth = computed(() => uiService.get('minCenterColumnWidth')); +const minRightColumnWidth = computed(() => uiService.get('minRightColumnWidth')); + watch(pageLength, () => { splitViewRef.value?.updateWidth(); }); diff --git a/packages/editor/src/layouts/props-panel/use-style-panel.ts b/packages/editor/src/layouts/props-panel/use-style-panel.ts index 057477b5..9fdfc539 100644 --- a/packages/editor/src/layouts/props-panel/use-style-panel.ts +++ b/packages/editor/src/layouts/props-panel/use-style-panel.ts @@ -2,7 +2,7 @@ import { computed, type Ref, watch } from 'vue'; import { Protocol } from '@editor/services/storage'; import { Services } from '@editor/type'; -import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const'; +import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const'; export const useStylePanel = ( { uiService, storageService }: Pick, @@ -47,8 +47,9 @@ export const useStylePanel = ( } if (columnWidth.center < 0) { - columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH; - columnWidth.center = MIN_CENTER_COLUMN_WIDTH; + const minCenterColumnWidth = uiService.get('minCenterColumnWidth'); + columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth; + columnWidth.center = minCenterColumnWidth; propsPanelWidth.value = columnWidth.right / 2; } diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts index bc5fa497..38c65254 100644 --- a/packages/editor/src/services/ui.ts +++ b/packages/editor/src/services/ui.ts @@ -27,6 +27,9 @@ import { DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, LEFT_COLUMN_WIDTH_STORAGE_KEY, + MIN_CENTER_COLUMN_WIDTH, + MIN_LEFT_COLUMN_WIDTH, + MIN_RIGHT_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY, } from '@editor/utils/const'; @@ -54,6 +57,9 @@ const state = shallowReactive({ storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) || DEFAULT_RIGHT_COLUMN_WIDTH, }, + minLeftColumnWidth: MIN_LEFT_COLUMN_WIDTH, + minCenterColumnWidth: MIN_CENTER_COLUMN_WIDTH, + minRightColumnWidth: MIN_RIGHT_COLUMN_WIDTH, showGuides: true, hasGuides: false, showRule: true, diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts index 84b64d91..38e7263d 100644 --- a/packages/editor/src/type.ts +++ b/packages/editor/src/type.ts @@ -296,6 +296,12 @@ export interface UiState { stageRect: StageRect; /** 编辑器列布局每一列的宽度，分为左中右三列 */ columnWidth: GetColumnWidth; + /** 编辑器列布局左侧列最小宽度 */ + minLeftColumnWidth: number; + /** 编辑器列布局中间列最小宽度 */ + minCenterColumnWidth: number; + /** 编辑器列布局右侧列最小宽度 */ + minRightColumnWidth: number; /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */ showGuides: boolean; /** 画布上是否存在参考线 */ diff --git a/packages/editor/tests/unit/layouts/props-panel/use-style-panel.spec.ts b/packages/editor/tests/unit/layouts/props-panel/use-style-panel.spec.ts index 5df24397..7f71fc48 100644 --- a/packages/editor/tests/unit/layouts/props-panel/use-style-panel.spec.ts +++ b/packages/editor/tests/unit/layouts/props-panel/use-style-panel.spec.ts @@ -7,12 +7,14 @@ import { beforeEach, describe, expect, test, vi } from 'vitest'; import { nextTick, reactive, ref } from 'vue'; import { useStylePanel } from '@editor/layouts/props-panel/use-style-panel'; +import { MIN_CENTER_COLUMN_WIDTH } from '@editor/utils/const'; const mkServices = (storageInit?: any) => { const uiState: Record = reactive({ frameworkRect: { width: 1280 }, showStylePanel: true, columnWidth: { right: 400, center: 800, left: 200 }, + minCenterColumnWidth: MIN_CENTER_COLUMN_WIDTH, }); const uiService = { get: vi.fn((k: string) => uiState[k]),