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