From 8550e6f854e1d0d0267b7064836f845aa2b004f9 Mon Sep 17 00:00:00 2001 From: roymondchen Date: Mon, 10 Aug 2026 20:13:06 +0800 Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=A7=BB=E9=99=A4=20removeStyle?= =?UTF-8?q?DisplayConfig=20=E5=B9=B6=E5=8F=96=E6=B6=88=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=20tab=20=E6=87=92=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 对比/只读表单直接返回 getPropsConfig 结果，样式/事件/高级 tab 不再使用 lazy 懒加载。 --- packages/editor/src/hooks/use-compare-form.ts | 5 +- packages/editor/src/utils/props.ts | 32 ----------- .../tests/unit/hooks/use-compare-form.spec.ts | 12 ++-- .../tests/unit/utils/props-config.spec.ts | 55 ++----------------- 4 files changed, 15 insertions(+), 89 deletions(-) diff --git a/packages/editor/src/hooks/use-compare-form.ts b/packages/editor/src/hooks/use-compare-form.ts index 1884f49d..b641775d 100644 --- a/packages/editor/src/hooks/use-compare-form.ts +++ b/packages/editor/src/hooks/use-compare-form.ts @@ -23,7 +23,6 @@ import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/ import type { CompareFormBaseProps } from '@editor/type'; import { getCodeBlockFormConfig } from '@editor/utils/code-block'; -import { removeStyleDisplayConfig } from '@editor/utils/props'; export interface UseCompareFormReturn { config: Ref; @@ -107,9 +106,7 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur if (!props.type) { return []; } - return removeStyleDisplayConfig( - await props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode }), - ); + return props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode }); } case 'data-source': { const config = props.services.dataSourceService.getFormConfig(props.type || 'base'); diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts index b2547fd0..3a15e4d5 100644 --- a/packages/editor/src/utils/props.ts +++ b/packages/editor/src/utils/props.ts @@ -73,7 +73,6 @@ export const getCondOpOptionsByFieldType = (type: string) => { export const styleTabConfig: TabPaneConfig = { title: '样式', - lazy: true, display: ({ services }: any) => !(services?.uiService?.get('showStylePanel') ?? true), items: [ { @@ -146,7 +145,6 @@ export const styleTabConfig: TabPaneConfig = { export const eventTabConfig: TabPaneConfig = { title: '事件', - lazy: true, items: [ { name: 'events', @@ -160,7 +158,6 @@ export const eventTabConfig: TabPaneConfig = { export const advancedTabConfig: TabPaneConfig = { title: '高级', - lazy: true, items: [ { name: NODE_DISABLE_CODE_BLOCK_KEY, @@ -360,32 +357,3 @@ export const fillConfig = ( return [tabConfig]; }; - -/** - * 将属性表单配置中「样式」tab-pane 的 `display` 强制置为 `true`。 - * - * `propsService.getPropsConfig` 返回的样式 tab 默认带有 - * `display: ({ services }) => !(services?.uiService?.get('showStylePanel') ?? true)`， - * 在对比 / 只读展示场景（CompareForm / ViewForm）下并不需要跟随 uiService 状态隐藏， - * 这里统一放开，保证样式 tab 始终可见。 - * - * @param formConfig 组件属性表单配置 - * @returns 处理后的表单配置（不修改入参，返回浅拷贝） - */ -export const removeStyleDisplayConfig = (formConfig: FormConfig): FormConfig => - formConfig.map((item) => { - if (!('type' in item)) return item; - if (item?.type !== 'tab' || !Array.isArray(item.items)) return item; - - return { - ...item, - items: item.items.map((tabPane) => { - if (tabPane?.title !== '样式' || !Array.isArray(tabPane.items)) return tabPane; - - return { - ...tabPane, - display: true, - }; - }), - }; - }); diff --git a/packages/editor/tests/unit/hooks/use-compare-form.spec.ts b/packages/editor/tests/unit/hooks/use-compare-form.spec.ts index 8c3c7ea9..5178177f 100644 --- a/packages/editor/tests/unit/hooks/use-compare-form.spec.ts +++ b/packages/editor/tests/unit/hooks/use-compare-form.spec.ts @@ -81,14 +81,18 @@ describe('useCompareForm', () => { expect(captured.config.value).toEqual([]); }); - test('node 类别加载 props 配置并把「样式」tab display 置为 true', async () => { + test('node 类别加载 props 配置并原样返回 getPropsConfig 结果', async () => { const { captured } = mountHook({ category: 'node', type: 'text', value: { id: 'n1' }, services }); await nextTick(); await nextTick(); expect(propsService.getPropsConfig).toHaveBeenCalledWith('text', { node: { id: 'n1' } }); - const tab = captured.config.value.find((i: any) => i.type === 'tab'); - const stylePane = tab.items.find((p: any) => p.title === '样式'); - expect(stylePane.display).toBe(true); + expect(captured.config.value).toEqual([ + { + type: 'tab', + items: [{ title: '样式', items: [{ type: 'text', name: 'color', display: false }] }], + }, + { type: 'text', name: 'name' }, + ]); }); test('node 类别缺少 type 时返回空配置', async () => { diff --git a/packages/editor/tests/unit/utils/props-config.spec.ts b/packages/editor/tests/unit/utils/props-config.spec.ts index cacd28e5..9d073fe3 100644 --- a/packages/editor/tests/unit/utils/props-config.spec.ts +++ b/packages/editor/tests/unit/utils/props-config.spec.ts @@ -17,7 +17,6 @@ import { fillConfig, getCondOpOptionsByFieldType, numberOptions, - removeStyleDisplayConfig, styleTabConfig, } from '@editor/utils/props'; @@ -66,6 +65,12 @@ describe('props 选项常量', () => { expect(displayTabConfig.title).toBe('显示条件'); }); + test('styleTabConfig / eventTabConfig / advancedTabConfig 不使用 lazy 懒加载', () => { + expect(styleTabConfig.lazy).toBeUndefined(); + expect(eventTabConfig.lazy).toBeUndefined(); + expect(advancedTabConfig.lazy).toBeUndefined(); + }); + test('advancedTabConfig 中包含 created/mounted/display', () => { const names = (advancedTabConfig.items as any[]).map((i) => i.name); expect(names).toEqual(expect.arrayContaining(['created', 'mounted', 'display'])); @@ -169,51 +174,3 @@ describe('fillConfig', () => { }); }); }); - -describe('removeStyleDisplayConfig', () => { - test('将 tab 内「样式」pane 的 display 置为 true', () => { - const config = [ - { - type: 'tab', - items: [ - { title: '属性', items: [{ name: 'a' }] }, - { title: '样式', display: false, items: [{ name: 'color' }] }, - ], - }, - ] as any; - - const result = removeStyleDisplayConfig(config) as any; - const stylePane = result[0].items.find((i: any) => i.title === '样式'); - expect(stylePane.display).toBe(true); - // 非样式 pane 保持不变 - expect(result[0].items.find((i: any) => i.title === '属性').display).toBeUndefined(); - }); - - test('不修改入参，返回浅拷贝', () => { - const stylePane = { title: '样式', display: false, items: [{ name: 'color' }] }; - const config = [{ type: 'tab', items: [stylePane] }] as any; - - const result = removeStyleDisplayConfig(config) as any; - expect(result).not.toBe(config); - expect(result[0]).not.toBe(config[0]); - expect(stylePane.display).toBe(false); - }); - - test('非 tab 项 / 无 items 的项原样返回', () => { - const plain = { name: 'x', type: 'text' }; - const tabWithoutItems = { type: 'tab' }; - const noType = { foo: 'bar' }; - const config = [plain, tabWithoutItems, noType] as any; - - const result = removeStyleDisplayConfig(config) as any; - expect(result[0]).toBe(plain); - expect(result[1]).toBe(tabWithoutItems); - expect(result[2]).toBe(noType); - }); - - test('样式 pane 无 items 数组时不处理', () => { - const config = [{ type: 'tab', items: [{ title: '样式' }] }] as any; - const result = removeStyleDisplayConfig(config) as any; - expect(result[0].items[0].display).toBeUndefined(); - }); -});