mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-07-06 17:31:11 +08:00
feat(editor): 支持自定义历史对比/回滚弹窗内表单组件的尺寸
This commit is contained in:
parent
90492ad3ea
commit
605f07c8fe
@ -13,6 +13,7 @@
|
||||
:extend-state="mergedExtendState"
|
||||
:show-diff="showDiff"
|
||||
:self-diff-field-types="selfDiffFieldTypes"
|
||||
:size="size"
|
||||
></MForm>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,6 +23,7 @@ import { computed, inject, provide, type Ref, ref, type ShallowRef, useTemplateR
|
||||
import { isEqual } from 'lodash-es';
|
||||
|
||||
import { type CodeBlockContent, type DataSourceSchema, HookType, type MNode } from '@tmagic/core';
|
||||
import { type FieldSize } from '@tmagic/design';
|
||||
import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/form';
|
||||
|
||||
import type { CompareCategory, CompareFormLoadConfig, Services } from '@editor/type';
|
||||
@ -68,6 +70,11 @@ const props = withDefaults(
|
||||
baseFormState?: FormState;
|
||||
/** 需要走 self diff 的字段类型(例如 mod-cond)。 */
|
||||
selfDiffFieldTypes?: string[];
|
||||
/**
|
||||
* 表单内组件的尺寸(透传给 MForm 的 `size`),可选 'large' | 'default' | 'small'。
|
||||
* 缺省时使用 MForm 内置默认尺寸。
|
||||
*/
|
||||
size?: FieldSize;
|
||||
/**
|
||||
* 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category`(node/data-source/code-block)
|
||||
* 取配置逻辑,调用方可根据业务自行返回(或异步返回)表单配置。可通过
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
:load-config="loadConfig"
|
||||
:self-diff-field-types="selfDiffFieldTypes"
|
||||
:services="props.services"
|
||||
:size="props.size"
|
||||
height="70vh"
|
||||
/>
|
||||
|
||||
@ -77,7 +78,14 @@
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { isEqual } from 'lodash-es';
|
||||
|
||||
import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
|
||||
import {
|
||||
type FieldSize,
|
||||
TMagicButton,
|
||||
TMagicDialog,
|
||||
TMagicRadioButton,
|
||||
TMagicRadioGroup,
|
||||
TMagicTag,
|
||||
} from '@tmagic/design';
|
||||
import type { FormState } from '@tmagic/form';
|
||||
|
||||
import CompareForm from '@editor/components/CompareForm.vue';
|
||||
@ -104,6 +112,8 @@ const props = withDefaults(
|
||||
*/
|
||||
loadConfig?: CompareFormLoadConfig;
|
||||
width?: string;
|
||||
/** 差异对比表单内组件的尺寸(透传给 CompareForm 的 `size`),可选 'large' | 'default' | 'small'。 */
|
||||
size?: FieldSize;
|
||||
isConfirm?: boolean;
|
||||
onConfirm?: () => void;
|
||||
selfDiffFieldTypes?: string[];
|
||||
|
||||
@ -95,6 +95,7 @@ const mountHistoryDiffDialog = async (
|
||||
selfDiffFieldTypes: options.selfDiffFieldTypes,
|
||||
compareFormState: options.compareFormState,
|
||||
width: options.width,
|
||||
size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
|
||||
onClose: options.onClose,
|
||||
});
|
||||
if (options.appContext) {
|
||||
@ -223,6 +224,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
|
||||
services,
|
||||
...extra,
|
||||
width: extra?.width ?? dialogWidth,
|
||||
size: extra?.size,
|
||||
});
|
||||
}
|
||||
return confirmRevert();
|
||||
@ -382,6 +384,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
|
||||
loadConfig: revertOptions.loadConfig,
|
||||
selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
|
||||
width: revertOptions.width,
|
||||
size: revertOptions.size,
|
||||
});
|
||||
if (!confirmed) return null;
|
||||
return await revertOptions.revert();
|
||||
@ -399,6 +402,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
|
||||
services,
|
||||
...extra,
|
||||
width: extra?.width ?? dialogWidth,
|
||||
size: extra?.size,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -33,6 +33,7 @@ import type {
|
||||
MPage,
|
||||
MPageFragment,
|
||||
} from '@tmagic/core';
|
||||
import type { FieldSize } from '@tmagic/design';
|
||||
import type { ChangeRecord, FormConfig, FormState, TableColumnConfig, TypeFunction } from '@tmagic/form';
|
||||
import type StageCore from '@tmagic/stage';
|
||||
import type {
|
||||
@ -1453,6 +1454,11 @@ export interface CustomDiffFormOptions {
|
||||
* 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度(900px)。
|
||||
*/
|
||||
width?: string;
|
||||
/**
|
||||
* 差异 / 确认回滚弹窗内 form 表单的尺寸(透传给 CompareForm 的 `size`),
|
||||
* 可选 `'large' | 'default' | 'small'`,缺省时使用表单内置默认尺寸。
|
||||
*/
|
||||
size?: FieldSize;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user