@tmagic/editor 1.8.0-beta.24 → 1.8.0-beta.26

package/src/layouts/props-panel/FormPanel.vue

@@ -13,7 +13,7 @@
         :init-values="values"
         :config="config"
         :type-match-valid="true"
-        :extend-state="extendState"
+        :context="formContext"
         :validate-on-init="true"
         @change="submit"
         @error="errorHandler"
@@ -45,17 +45,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import { TMagicButton, tMagicMessage, TMagicScrollbar } from '@tmagic/design';
-import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from '@tmagic/form';
+import type { ContainerChangeEventData, FormConfig, FormValue } from '@tmagic/form';
 import { MForm, validateForm } from '@tmagic/form';
 import { filterXSS } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import { ENABLE_PROPS_FORM_VALIDATE } from '@editor/editorProps';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useEditorFormContext } from '@editor/hooks/use-form-context';
 import { useServices } from '@editor/hooks/use-services';
 
 import CodeEditor from '../CodeEditor.vue';
@@ -74,8 +75,7 @@ const props = defineProps<{
   disabledShowSrc?: boolean;
   labelWidth?: string;
   codeValueKey?: string;
-  labelPosition?: string;
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  labelPosition?: 'top' | 'left' | 'right';
 }>();
 
 const emit = defineEmits<{
@@ -89,23 +89,17 @@ const emit = defineEmits<{
 const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
 
 const services = useServices();
-const { editorService, uiService } = services;
+const { uiService } = services;
 
 const codeOptions = inject('codeOptions', {});
 
 const showSrc = ref(false);
 const propsPanelSize = computed(() => uiService.get('propsPanelSize') || 'small');
 const { height: editorContentHeight } = useEditorContentHeight();
-const stage = computed(() => editorService.get('stage'));
 
-const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
+const formContext = useEditorFormContext(() => services);
 
-watchEffect(() => {
-  if (configFormRef.value) {
-    configFormRef.value.formState.stage = stage.value;
-    configFormRef.value.formState.services = services;
-  }
-});
+const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 
 const internalInstance = getCurrentInstance();
 onMounted(() => {
@@ -158,23 +152,17 @@ const saveCode = async (values: any) => {
     return;
   }
 
-  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里另建一个独立的 MForm 实例对最新配置
-  // 做一次静默校验（不复用、也不污染页面上正在展示的表单），并将校验结果（错误信息）随提交
+  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里对最新配置做一次无渲染的静默校验
+  // （不挂载任何组件，也不影响页面上正在展示的表单），并将校验结果（错误信息）随提交
   // 一并抛给上层记录，使源码保存的错误状态与表单编辑保持一致。
+  //
+  // 配置里的 display / rules 回调会从 formState 上读 services，因此必须带上 context。
   try {
     const error = await validateForm({
       config: props.config,
       typeMatchValid: true,
       initValues: newValues,
-      // 将当前组件实例的 provides（含 Editor 顶层的 services / codeOptions 等组件级 provide）
-      // 合入 appContext，使临时 MForm 中的编辑器字段组件（DataSourceInput 等）能正常 inject
-      appContext: internalInstance?.appContext ? { ...internalInstance?.appContext, provides: { services } } : null,
-      extendState: (state) => {
-        if (configFormRef.value?.formState) {
-          return { ...(configFormRef.value?.formState || {}) };
-        }
-        return props.extendState?.(state) || {};
-      },
+      context: formContext.value,
     });
 
     if (error) {
@@ -187,9 +175,10 @@ const saveCode = async (values: any) => {
 
     emit('submit', newValues, undefined, error ? new Error(error) : undefined);
   } catch (e: any) {
-    console.log('validateForm error', e);
-    // 静默校验本身出现异常（如初始化超时）时，退回到不携带错误信息的提交，避免阻塞源码保存
-    emit('submit', newValues);
+    console.error('validateForm error', e);
+    // 嵌套配置 / initValue 等机制故障不得当成「校验通过」，
+    // 把 error 交给上层记录，同时仍提交源码，避免阻塞保存。
+    emit('submit', newValues, undefined, e instanceof Error ? e : new Error(String(e)));
   }
 };
 

package/src/layouts/props-panel/PropsPanel.vue

@@ -8,7 +8,6 @@
       :config="curFormConfig"
       :values="values"
       :disabledShowSrc="disabledShowSrc"
-      :extendState="extendState"
       @submit="(v, eventData, error) => submit(v, eventData, error, 'props')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
@@ -26,7 +25,6 @@
       :config="styleFormConfig"
       :values="values"
       :disabledShowSrc="disabledShowSrc"
-      :extendState="extendState"
       @submit="(v, eventData, error) => submit(v, eventData, error, 'style')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
@@ -61,7 +59,7 @@ import type { OnDrag } from 'gesto';
 
 import { type MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
 import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -84,7 +82,6 @@ defineOptions({
 
 defineProps<{
   disabledShowSrc?: boolean;
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -82,7 +82,7 @@ const props = defineProps<{
   customContentMenu: CustomContentMenuFunction;
 }>();
 
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const { codeBlockService } = useServices();
 

package/src/layouts/sidebar/code-block/useContentMenu.ts

@@ -6,7 +6,7 @@ import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ContentMenuTarget, EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = (deleteCode: (id: string) => void) => {
-  const eventBus = inject<EventBus>('eventBus');
+  const eventBus = inject<EventBus | null>('eventBus', null);
   const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 
   let selectId = '';

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -75,7 +75,7 @@ const props = defineProps<{
   customContentMenu: CustomContentMenuFunction;
 }>();
 
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 const { dataSourceService } = useServices();
 
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -6,7 +6,7 @@ import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ContentMenuTarget, EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = () => {
-  const eventBus = inject<EventBus>('eventBus');
+  const eventBus = inject<EventBus | null>('eventBus', null);
   const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 
   let selectId = '';

package/src/plugin.ts

@@ -20,8 +20,8 @@ import { type App } from 'vue';
 
 import type { DesignPluginOptions } from '@tmagic/design';
 import designPlugin from '@tmagic/design';
-import type { FormInstallOptions } from '@tmagic/form';
-import formPlugin, { registerSilentLeafFieldTypes, registerTypeMatchRules } from '@tmagic/form';
+import type { FieldOptions, FormInstallOptions } from '@tmagic/form';
+import formPlugin, { mergeFieldOptions } from '@tmagic/form';
 import tablePlugin from '@tmagic/table';
 
 import Code from './fields/Code.vue';
@@ -38,13 +38,13 @@ import DataSourceMocks from './fields/DataSourceMocks.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
 import DisplayConds from './fields/DisplayConds.vue';
 import EventSelect from './fields/EventSelect.vue';
+import { editorFields } from './fields/headless-validation';
 import KeyValue from './fields/KeyValue.vue';
 import PageFragmentSelect from './fields/PageFragmentSelect.vue';
 import StyleSetter from './fields/StyleSetter/Index.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setEditorConfig } from './utils/config';
-import { editorTypeMatchRules } from './utils/type-match-rules';
 import Editor from './Editor.vue';
 import type { EditorInstallOptions } from './type';
 
@@ -60,44 +60,43 @@ const defaultInstallOpt: EditorInstallOptions = {
   flat: false,
 };
 
+const editorFieldVue: Record<string, Pick<FieldOptions, 'component' | 'container'>> = {
+  'vs-code': { component: Code },
+  'ui-select': { component: uiSelect },
+  'cond-op-select': { component: CondOpSelect },
+  'page-fragment-select': { component: PageFragmentSelect },
+  'data-source-select': { component: DataSourceSelect },
+  'data-source-input': { component: DataSourceInput },
+  'code-link': { component: CodeLink },
+  'key-value': { component: KeyValue },
+  'code-select-col': { component: CodeSelectCol },
+  'data-source-fields': { component: DataSourceFields },
+  'data-source-mocks': { component: DataSourceMocks },
+  'data-source-methods': { component: DataSourceMethods },
+  'data-source-method-select': { component: DataSourceMethodSelect },
+  'data-source-field-select': { component: DataSourceFieldSelect },
+  'code-select': { component: CodeSelect },
+  'display-conds': { component: DisplayConds },
+  'event-select': { component: EventSelect },
+  'style-setter': { container: StyleSetter },
+};
+
 export default {
   install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>): void => {
-    const option = Object.assign(defaultInstallOpt, opt || {});
+    const incoming = opt || {};
+    const option = { ...defaultInstallOpt, ...incoming };
+    const formOpt = incoming as FormInstallOptions;
 
-    app.use(designPlugin, opt || {});
-    app.use(formPlugin, opt || {});
+    app.use(designPlugin, incoming);
+    app.use(formPlugin, {
+      ...formOpt,
+      fields: mergeFieldOptions(editorFields, editorFieldVue, formOpt.fields),
+    });
     app.use(tablePlugin);
-    registerTypeMatchRules(editorTypeMatchRules);
-    registerSilentLeafFieldTypes([
-      'vs-code',
-      'ui-select',
-      'cond-op-select',
-      'page-fragment-select',
-      'data-source-select',
-      'data-source-input',
-    ]);
 
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);
     app.component(`${Editor.name || 'MEditor'}`, Editor);
     app.component('magic-code-editor', CodeEditor);
-    app.component('m-fields-ui-select', uiSelect);
-    app.component('m-fields-code-link', CodeLink);
-    app.component('m-fields-vs-code', Code);
-    app.component('m-fields-code-select', CodeSelect);
-    app.component('m-fields-code-select-col', CodeSelectCol);
-    app.component('m-fields-event-select', EventSelect);
-    app.component('m-fields-data-source-fields', DataSourceFields);
-    app.component('m-fields-data-source-mocks', DataSourceMocks);
-    app.component('m-fields-key-value', KeyValue);
-    app.component('m-fields-data-source-input', DataSourceInput);
-    app.component('m-fields-data-source-select', DataSourceSelect);
-    app.component('m-fields-data-source-methods', DataSourceMethods);
-    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
-    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
-    app.component('m-fields-page-fragment-select', PageFragmentSelect);
-    app.component('m-fields-display-conds', DisplayConds);
-    app.component('m-fields-cond-op-select', CondOpSelect);
-    app.component('m-form-style-setter', StyleSetter);
   },
 };

package/src/theme/code-block.scss

@@ -1,40 +1,3 @@
 .m-fields-code-select {
   width: 100%;
-  > .el-card.tmagic-design-card--flat {
-    background-color: transparent;
-    margin-bottom: 10px;
-    > .el-card__body {
-      padding-left: 0;
-      .code-select-content {
-        > .m-fields-group-list {
-          > .tmagic-design-card--flat.el-card {
-            padding-left: 16px;
-            padding-right: 16px;
-            margin-bottom: 10px;
-            border: 0 !important;
-          }
-        }
-      }
-    }
-  }
-  .el-card__body {
-    .tmagic-design-form-item {
-      margin-bottom: 16px;
-    }
-  }
-  .code-select-content {
-    > .m-fields-group-list {
-      > .tmagic-design-card--flat {
-        > .el-card__header {
-          padding: 16px 0;
-        }
-      }
-    }
-  }
-  .create-button {
-    &.fullWidth {
-      width: 100%;
-      margin: 0 0 16px 0;
-    }
-  }
 }

package/src/theme/display-conds.scss

@@ -1,3 +1,7 @@
+.m-fields-display-conds {
+  width: 100%;
+}
+
 .m-container-text.display-conds-title {
   .tmagic-design-form-item {
     .el-form-item__label {

package/src/theme/event.scss

@@ -1,49 +1,45 @@
 .m-fields-event-select {
   width: 100%;
+
   .fullWidth {
     width: 100%;
     box-sizing: border-box;
-    &.create-button {
-      width: 100%;
-    }
     &.m-container-ui-event {
       width: calc(100% - 32px);
     }
   }
+
   .event-select-container {
     padding: 0 16px;
-    > .el-card.tmagic-design-card--flat {
-      > .el-card__header {
+
+    > .m-fields-group-list
+      > .m-fields-group-list-item.tmagic-design-card--flat {
+      > .el-card__header,
+      > .t-card__header {
         border-bottom: 1px solid #ebeef5;
       }
-      > .el-card__body {
+
+      > .el-card__body,
+      > .t-card__body {
         padding-bottom: 16px;
-        .m-fields-group-list-footer {
-          div {
-            justify-content: flex-start !important;
-          }
-        }
-        .el-card.tmagic-design-card--flat {
-          > .el-card__header {
+
+        .el-card.tmagic-design-card--flat,
+        .t-card.tmagic-design-card--flat {
+          > .el-card__header,
+          > .t-card__header {
             padding: 16px 0;
           }
         }
       }
     }
   }
+
   .event-select-code {
     margin-left: 20px;
     width: auto;
   }
-
-  .m-form-panel {
-    margin: 10px 0px;
-  }
-
-  .el-card.is-always-shadow {
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
-  }
 }
+
 .m-fields-code-select-col,
 .m-fields-data-source-method-select {
   width: 100%;
@@ -63,10 +59,6 @@
   }
 }
 
-.event-select-container {
-  padding: 0 16px;
-}
-
 .event-select-header {
   display: flex;
   align-items: center;
@@ -79,28 +71,13 @@
     line-height: 24px;
   }
 }
+
 .event-item-header {
-  position: relative;
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .event-item-title {
-    color: #0f1113;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 24px;
-    margin-bottom: 8px;
-  }
-  .event-item-delete-button {
-    color: #0f1113;
+  .tmagic-design-form-item {
+    margin-bottom: 0;
   }
-
-  .el-form-item {
-    .el-form-item {
-      &.is-error {
-        margin-bottom: 18px;
-      }
-    }
+  .el-form-item .el-form-item.is-error {
+    margin-bottom: 18px;
   }
 }

package/src/theme/props-panel.scss

@@ -125,14 +125,28 @@
 .m-editor-props-form-panel-form {
   padding-right: 10px;
   padding-left: 10px;
+  // 吸顶标题避开绝对定位的 tabs header
+  --m-group-list-header-sticky-top: var(
+    --el-tabs-header-height,
+    var(--td-comp-size-xxl, 48px)
+  );
 
   > .m-container-tab {
     > .tmagic-design-tabs {
-      > .el-tabs__content {
-        margin-top: var(--el-tabs-header-height);
+      > .el-tabs__content,
+      > .t-tabs__content {
+        margin-top: var(--el-tabs-header-height, var(--td-comp-size-xxl, 48px));
         padding-top: 15px;
+        // 允许吸底按钮相对属性面板滚动容器定位（tabs 默认 overflow:hidden 会截断 sticky）
+        overflow: visible;
+
+        > .el-tab-pane,
+        > .t-tab-panel {
+          overflow: visible;
+        }
       }
-      > .el-tabs__header.is-top {
+      > .el-tabs__header.is-top,
+      > .t-tabs__header {
         position: absolute;
         top: 0;
         width: 100%;

package/src/theme/themes/magic-admin/index.scss

@@ -137,7 +137,8 @@
   .m-editor-props-form-panel-form {
     > .m-container-tab {
       > .tmagic-design-tabs {
-        > .el-tabs__content {
+        > .el-tabs__content,
+        > .t-tabs__content {
           background-color: #fafafa;
           border-radius: 8px;
           padding-left: 16px;
@@ -146,6 +147,16 @@
       }
     }
   }
+
+  .m-fields-group-list-footer.is-sticky-full {
+    --m-group-list-footer-bg: #fafafa;
+    background-color: #fafafa;
+  }
+
+  .m-fields-group-list-item .m-fields-group-list-footer.is-sticky-full {
+    --m-group-list-footer-bg: #fff;
+    background-color: #fff;
+  }
 }
 
 .m-editor.m-theme--magic-admin {

package/src/type.ts

@@ -34,7 +34,7 @@ import type {
   MPageFragment,
 } from '@tmagic/core';
 import type { FieldSize } from '@tmagic/design';
-import type { ChangeRecord, FormConfig, FormState, TableColumnConfig, TypeFunction } from '@tmagic/form';
+import type { ChangeRecord, FormConfig, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   CanDropIn,
@@ -172,6 +172,15 @@ export interface Services {
 }
 // #endregion Services
 
+declare module '@tmagic/form-schema' {
+  interface FormContext {
+    /** 编辑器服务集合（由 Editor / FormPanel provide） */
+    services?: Services;
+    /** 当前画布 Stage 实例（由 Editor / FormPanel provide） */
+    stage?: any;
+  }
+}
+
 export interface StageOptions {
   runtimeUrl?: string;
   autoScrollIntoView?: boolean;
@@ -598,18 +607,6 @@ export interface CompareFormBaseProps {
    * 避免 dialog / 面板使用方需要自行处理滚动。可传任意 CSS 长度，例如 `60vh` / `400px` / `100%`。
    */
   height?: string;
-  /**
-   * 用户自定义注入到 MForm.formState 的扩展字段，与 Editor 顶层的 `extendFormState`、
-   * PropsPanel 的 `extend-state` 语义一致。表单 item 的 `display` / `disabled` 等
-   * filterFunction 经常依赖这里注入的字段（如 stage、自定义业务上下文等），
-   * 因此在对比 / 展示场景下也需要透传，避免出现 `formState.xxx is undefined` 的运行时错误。
-   */
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
-  /**
-   * 外部透传的基础 formState（通常来自 PropsPanel 主属性表单）。
-   * 组件会提取其中的扩展字段覆盖到自己的 formState，保证 filterFunction 上下文一致。
-   */
-  baseFormState?: FormState;
   /**
    * 表单内组件的尺寸（透传给 MForm 的 `size`），可选 'large' | 'default' | 'small'。
    * 缺省时使用 MForm 内置默认尺寸。
@@ -1558,17 +1555,6 @@ export interface UseHistoryRevertOptions {
    * （`getCurrentInstance()?.appContext`）。业务方若在组件 setup 之外调用，需手动传入（如 `editorApp._context`）。
    */
   appContext?: AppContext | null;
-  /**
-   * 透传给差异确认弹窗的 `extendState`（即 Editor 的 `extendFormState`），
-   * 使对比表单中依赖业务上下文的 `display` / `disabled` 等 filterFunction 正常工作。
-   */
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
-  /**
-   * 返回 PropsPanel 主属性表单（FormPanel -> MForm）的 formState。
-   * 仅页面历史「查看差异 / 回滚确认」场景会使用该 formState 覆盖 CompareForm 中同名扩展字段，
-   * 以保证两处 filterFunction 读取到一致的运行态上下文。
-   */
-  getPropsPanelFormState?: () => FormState | undefined;
   /**
    * 内置页面 / 数据源 / 代码块的差异 / 回滚确认弹窗默认宽度（透传给 TMagicDialog 的 `width`），
    * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
@@ -1590,11 +1576,6 @@ export interface CustomDiffFormOptions {
   loadConfig?: CompareFormLoadConfig;
   /** 需要走 self diff 的字段类型（如模块的 mod-cond）。 */
   selfDiffFieldTypes?: string[];
-  /**
-   * 可选：外部提供的 formState（通常来自 PropsPanel 主表单），
-   * 对比弹窗会用它覆盖 CompareForm 中同名扩展字段，避免上下文不一致。
-   */
-  compareFormState?: FormState;
   /**
    * 差异 / 确认回滚弹窗宽度（透传给 HistoryDiffDialog 的 TMagicDialog `width`），
    * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。

package/src/utils/data-source/index.ts

@@ -37,6 +37,7 @@ const dataSourceFormConfig: TabConfig = {
           name: 'events',
           src: 'datasource',
           type: 'event-select',
+          defaultValue: [],
         },
       ],
     },

package/src/utils/props.ts

@@ -151,6 +151,7 @@ export const eventTabConfig: TabPaneConfig = {
       src: 'component',
       labelWidth: '100px',
       type: 'event-select',
+      defaultValue: [],
       rules: [{ typeMatch: true }],
     },
   ],
@@ -163,7 +164,6 @@ export const advancedTabConfig: TabPaneConfig = {
       name: NODE_DISABLE_CODE_BLOCK_KEY,
       text: '禁用代码块',
       type: 'switch',
-      labelPosition: 'left',
       defaultValue: false,
       extra: '开启后，配置的代码块将不会被执行',
     },
@@ -171,7 +171,6 @@ export const advancedTabConfig: TabPaneConfig = {
       name: NODE_DISABLE_DATA_SOURCE_KEY,
       text: '禁用数据源',
       type: 'switch',
-      labelPosition: 'left',
       defaultValue: false,
       extra: '开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效',
     },
@@ -257,8 +256,6 @@ export const displayTabConfig: TabPaneConfig<DisplayCondsConfig> = {
       type: 'display-conds',
       name: NODE_CONDS_KEY,
       titlePrefix: '条件组',
-      fixed: 'right',
-      operateColWidth: 112,
       defaultValue: [],
       rules: [{ typeMatch: true }],
     },