@tmagic/editor 1.8.0-beta.10 → 1.8.0-beta.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.10",
+  "version": "1.8.0-beta.12",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.10",
-    "@tmagic/form": "1.8.0-beta.10",
-    "@tmagic/table": "1.8.0-beta.10",
-    "@tmagic/utils": "1.8.0-beta.10",
-    "@tmagic/stage": "1.8.0-beta.10"
+    "@tmagic/stage": "1.8.0-beta.12",
+    "@tmagic/design": "1.8.0-beta.12",
+    "@tmagic/utils": "1.8.0-beta.12",
+    "@tmagic/form": "1.8.0-beta.12",
+    "@tmagic/table": "1.8.0-beta.12"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -75,8 +75,8 @@
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
-    "vue": "^3.5.38",
-    "@tmagic/core": "1.8.0-beta.10"
+    "vue": "^3.5.40",
+    "@tmagic/core": "1.8.0-beta.12"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -158,7 +158,7 @@ import stageOverlayService from './services/stageOverlay';
 import storageService from './services/storage';
 import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
-import { defaultEditorProps, EditorProps } from './editorProps';
+import { defaultEditorProps, EditorProps, ENABLE_PROPS_FORM_VALIDATE } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
 import type { TreeNodeData } from './type';
 import type { EditorSlots, EventBus, Services, StageOptions } from './type';
@@ -233,6 +233,8 @@ provide('services', services);
 
 provide('codeOptions', props.codeOptions);
 provide('stageOptions', stageOptions);
+/** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
+provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
 /**
  * 把顶层 `extendFormState` 提供给非 PropsPanel 链路上的组件使用（例如历史差异对话框 HistoryDiffDialog
  * 内部的 CompareForm）。这样所有依赖业务上下文的表单 filterFunction 都能拿到一致的扩展状态，

package/src/components/CodeBlockEditor.vue

@@ -4,7 +4,9 @@
     v-model:visible="boxVisible"
     v-model:width="width"
     v-model:height="codeBlockEditorHeight"
+    :body-style="{ padding: '0 16px' }"
     :title="content.name ? `${disabled ? '查看' : '编辑'}${content.name}` : '新增代码'"
+    :framework-width="frameworkWidth"
     :position="boxPosition"
     :before-close="beforeClose"
   >
@@ -206,6 +208,7 @@ const closedHandler = () => {
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 watch(boxVisible, (visible) => {
   nextTick(() => {

package/src/components/CompareForm.vue

@@ -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)
      * 取配置逻辑，调用方可根据业务自行返回（或异步返回）表单配置。可通过

package/src/components/FloatingBox.vue

@@ -1,6 +1,12 @@
 <template>
   <Teleport to="body" v-if="visible">
-    <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
+    <div
+      ref="target"
+      class="m-editor-float-box"
+      v-bind="$attrs"
+      :style="{ ...style, zIndex: curZIndex }"
+      @mousedown="nextZIndex"
+    >
       <div ref="title" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
@@ -9,7 +15,7 @@
           <TMagicButton link size="small" @click="closeHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
         </div>
       </div>
-      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
+      <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px`, ...bodyStyle }">
         <slot name="body"></slot>
       </div>
     </div>
@@ -17,14 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
+import { computed, type CSSProperties, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
 import { TMagicButton, useZIndex } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
-import { useServices } from '@editor/hooks/use-services';
 
 interface Position {
   left: number;
@@ -39,11 +44,18 @@ const props = withDefaults(
   defineProps<{
     position?: Position;
     title?: string;
+    bodyStyle?: CSSProperties;
+    /** 浮窗初始样式，会与内部计算样式合并，外部传入优先 */
+    initialStyle?: CSSProperties;
+    /** 用于约束浮窗 left 的容器宽度，传入时按宽度收敛 left，避免超出右边界；默认取视窗宽度 */
+    frameworkWidth?: number;
     beforeClose?: (_done: (_cancel?: boolean) => void) => void;
   }>(),
   {
     title: '',
     position: () => ({ left: 0, top: 0 }),
+    initialStyle: () => ({}),
+    frameworkWidth: 0,
   },
 );
 
@@ -66,12 +78,11 @@ const bodyHeight = computed(() => {
   return 'auto';
 });
 
-const { uiService } = useServices();
-const frameworkWidth = computed(() => uiService.get('frameworkRect').width || 0);
 const style = computed(() => {
   let { left } = props.position;
-  if (width.value) {
-    left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+  const frameworkWidth = props.frameworkWidth || globalThis.window?.innerWidth || 0;
+  if (width.value && frameworkWidth) {
+    left = left + width.value > frameworkWidth ? frameworkWidth - width.value : left;
   }
 
   return {
@@ -79,11 +90,60 @@ const style = computed(() => {
     top: `${props.position.top}px`,
     width: width.value ? `${width.value}px` : 'auto',
     height: height.value ? `${height.value}px` : 'auto',
+    ...props.initialStyle,
   };
 });
 
 let moveable: VanillaMoveable | null = null;
 
+// 拖拽/缩放时用于覆盖 iframe 的遮罩，防止鼠标进入 iframe 区域后事件被 iframe 吞掉导致拖拽丢失
+let dragMask: HTMLDivElement | null = null;
+let dragMaskVisible = false;
+
+// 兜底：正常情况下遮罩由 moveable 的 dragEnd/resizeEnd 移除；但某些极端场景
+// （拖拽中鼠标移出窗口后松开、alt-tab 切走窗口失焦、标签页被隐藏等）结束事件不会触发，
+// 会导致全屏透明遮罩残留、整个编辑器无法点击。这里挂全局 pointerup/blur/visibilitychange 强制收尾。
+const bindDragMaskSafety = () => {
+  globalThis.window?.addEventListener('pointerup', hideDragMask, true);
+  globalThis.window?.addEventListener('blur', hideDragMask);
+  globalThis.document?.addEventListener('visibilitychange', hideDragMask);
+};
+
+const unbindDragMaskSafety = () => {
+  globalThis.window?.removeEventListener('pointerup', hideDragMask, true);
+  globalThis.window?.removeEventListener('blur', hideDragMask);
+  globalThis.document?.removeEventListener('visibilitychange', hideDragMask);
+};
+
+const showDragMask = () => {
+  if (dragMaskVisible) {
+    return;
+  }
+  if (!dragMask) {
+    dragMask = globalThis.document.createElement('div');
+    dragMask.className = 'm-editor-float-box-drag-mask';
+  }
+  globalThis.document.body.appendChild(dragMask);
+  dragMaskVisible = true;
+  bindDragMaskSafety();
+
+  // 拖拽标题时，root 上的 @mousedown="nextZIndex" 会把浮窗 z-index 抬高，
+  // 若此时才读取会拿到旧值导致遮罩被浮窗（及其内部 iframe）盖住，故用 nextTick 在 z-index 稳定后再设置到浮窗之上
+  const setMaskZIndex = () => {
+    if (dragMask) {
+      dragMask.style.zIndex = `${curZIndex.value + 1}`;
+    }
+  };
+  setMaskZIndex();
+  nextTick(setMaskZIndex);
+};
+
+const hideDragMask = () => {
+  unbindDragMaskSafety();
+  dragMask?.parentNode?.removeChild(dragMask);
+  dragMaskVisible = false;
+};
+
 const initMoveable = () => {
   moveable = new VanillaMoveable(globalThis.document.body, {
     className: 'm-editor-floating-box-moveable',
@@ -101,6 +161,14 @@ const initMoveable = () => {
     bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
   });
 
+  // 仅在真正发生拖拽/缩放位移时插入遮罩：moveable 的 dragStart/resizeStart 在 mousedown 时即触发，
+  // 若此时就盖遮罩，会盖住浮窗本身导致 mouseup 落在遮罩上、关闭按钮的 click 无法触发（点击关闭不了）。
+  // 改为在 drag/resize（实际位移）时才显示，纯点击不再触发遮罩。
+  moveable.on('drag', showDragMask);
+  moveable.on('resize', showDragMask);
+  moveable.on('dragEnd', hideDragMask);
+  moveable.on('resizeEnd', hideDragMask);
+
   moveable.on('drag', (e) => {
     e.target.style.transform = e.transform;
   });
@@ -115,6 +183,7 @@ const initMoveable = () => {
 };
 
 const destroyMoveable = () => {
+  hideDragMask();
   moveable?.destroy();
   moveable = null;
 };

package/src/components/ScrollBar.vue

@@ -87,70 +87,3 @@ const scrollBy = (delta: number) => {
   }
 };
 </script>
-
-<style lang="scss">
-.m-editor-scroll-bar {
-  position: absolute;
-  background-color: transparent;
-  opacity: 0.3;
-  transition:
-    background-color 0.2s linear,
-    opacity 0.2s linear;
-
-  .m-editor-scroll-bar-thumb {
-    background-color: #aaa;
-    border-radius: 6px;
-    position: absolute;
-  }
-
-  &.horizontal {
-    width: 100%;
-    height: 15px;
-    bottom: 0;
-
-    .m-editor-scroll-bar-thumb {
-      height: 6px;
-      transition:
-        background-color 0.2s linear,
-        height 0.2s ease-in-out;
-      bottom: 2px;
-    }
-  }
-
-  &.vertical {
-    height: 100%;
-    width: 15px;
-    right: 5px;
-
-    .m-editor-scroll-bar-thumb {
-      width: 6px;
-      transition:
-        background-color 0.2s linear,
-        width 0.2s ease-in-out;
-      right: 2px;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background-color: #eee;
-    opacity: 0.9;
-
-    .m-editor-scroll-bar-thumb {
-      background-color: #999;
-    }
-
-    &.horizontal {
-      .m-editor-scroll-bar-thumb {
-        height: 11px;
-      }
-    }
-
-    &.vertical {
-      .m-editor-scroll-bar-thumb {
-        width: 11px;
-      }
-    }
-  }
-}
-</style>

package/src/editorProps.ts

@@ -1,3 +1,5 @@
+import type { InjectionKey } from 'vue';
+
 import type { DataSourceSchema, EventOption, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
 import type { FormConfig, FormState } from '@tmagic/form';
 import StageCore, {
@@ -26,6 +28,12 @@ import type {
   TreeNodeData,
 } from './type';
 
+/**
+ * 「属性配置表单校验」联动能力的 provide/inject 注入键。
+ * 使用 Symbol 避免与其它字符串键冲突，供 PropsPanel / FormPanel 注入判断校验失败时是否仍更新节点并记录错误。
+ */
+export const ENABLE_PROPS_FORM_VALIDATE: InjectionKey<boolean> = Symbol('enablePropsFormValidate');
+
 export interface EditorProps {
   /** 页面初始值 */
   modelValue?: MApp;
@@ -91,6 +99,11 @@ export interface EditorProps {
   disabledFlashTip?: boolean;
   /** 禁用双击在浮层中单独编辑选中组件 */
   disabledStageOverlay?: boolean;
+  /**
+   * 是否启用「属性配置表单校验」联动能力：开启后属性/样式表单校验失败时仍更新节点，
+   * 并把错误信息集中记录到 editorService，用于组件树标红提示与保存拦截；默认 false（关闭）。
+   */
+  enablePropsFormValidate?: boolean;
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
   /** 禁用数据源 */

package/src/fields/CodeSelect.vue

@@ -93,7 +93,8 @@ const codeConfig = computed<GroupListConfig>(() => ({
             { value: HookCodeType.CODE, text: '代码块' },
             { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
           ],
-          defaultValue: 'code',
+          rules: [{ typeMatch: true, trigger: 'change' }],
+          defaultValue: HookCodeType.CODE,
           onChange: (_mForm, v: HookCodeType, { setModel }) => {
             if (v === HookCodeType.DATA_SOURCE_METHOD) {
               setModel('codeId', []);
@@ -111,6 +112,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           labelWidth: 0,
           display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !codeBlockService.getEditStatus(),
+          rules: [{ typeMatch: true, trigger: 'change' }],
         },
         {
           type: 'data-source-method-select',
@@ -119,6 +121,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           labelWidth: 0,
           display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
           notEditable: () => !dataSourceService.get('editable'),
+          rules: [{ typeMatch: true, trigger: 'change' }],
         },
       ],
     },

package/src/fields/CondOpSelect.vue

@@ -33,7 +33,7 @@ import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
 
 import { useServices } from '@editor/hooks/use-services';
-import { arrayOptions, eqOptions, getFieldType, numberOptions } from '@editor/utils';
+import { getCondOpOptionsByFieldType, getFieldType } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsCondOpSelect',
@@ -51,31 +51,9 @@ const optionComponent = getDesignConfig('components')?.option;
 
 const options = computed(() => {
   const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
-
   const ds = dataSourceService.getDataSourceById(id);
-
   const type = getFieldType(ds, fieldNames);
-
-  if (type === 'array') {
-    return arrayOptions;
-  }
-
-  if (type === 'boolean' || type === 'null') {
-    return [
-      { text: '是', value: 'is' },
-      { text: '不是', value: 'not' },
-    ];
-  }
-
-  if (type === 'number') {
-    return [...eqOptions, ...numberOptions];
-  }
-
-  if (type === 'string') {
-    return [...arrayOptions, ...eqOptions];
-  }
-
-  return [...arrayOptions, ...eqOptions, ...numberOptions];
+  return getCondOpOptionsByFieldType(type);
 });
 
 const fieldChangeHandler = (v: string) => {

package/src/fields/DataSourceFields.vue

@@ -8,10 +8,12 @@
     </div>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       :title="fieldTitle"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -28,10 +30,12 @@
     </FloatingBox>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addFromJsonDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       title="快速添加数据定义"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -358,6 +362,7 @@ const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 /**
  * 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。

package/src/fields/DataSourceInput.vue

@@ -79,11 +79,11 @@ import { Coin } from '@element-plus/icons-vue';
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
 import { getDesignConfig, TMagicAutocomplete, TMagicInput, TMagicTag } from '@tmagic/design';
 import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
-import { getKeysArray, isNumber } from '@tmagic/utils';
+import { getKeysArray } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
-import { getDisplayField } from '@editor/utils/data-source';
+import { getDisplayField, resolveFieldByPath } from '@editor/utils/data-source';
 
 defineOptions({
   name: 'MFieldsDataSourceInput',
@@ -251,34 +251,16 @@ const fieldQuerySearch = (
     return;
   }
 
-  let fields = ds.fields || [];
-
-  // 后面这些是字段
-  let key = keys.shift();
-  while (key) {
-    if (isNumber(key)) {
-      key = keys.shift();
-      continue;
-    }
-
-    for (const field of fields) {
-      if (field.name === key) {
-        fields = field.fields || [];
-        key = keys.shift();
-        break;
-      }
-    }
-  }
+  const { fields } = resolveFieldByPath(ds.fields, keys, { skipNumberIndices: true });
 
   if (curCharIsDot(dotIndex)) {
     // 当前输入的是.
-    result = fields || [];
+    result = fields;
   } else if (dotIndex > -1) {
     const queryName = queryString.substring(dotIndex + 1).toLowerCase();
-    result =
-      fields.filter(
-        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
-      ) || [];
+    result = fields.filter(
+      (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
+    );
   }
 
   cb(

package/src/fields/DataSourceMocks.vue

@@ -7,10 +7,12 @@
     </div>
 
     <FloatingBox
+      :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
       v-model:height="editorHeight"
       :title="drawerTitle"
+      :framework-width="frameworkWidth"
       :position="boxPosition"
     >
       <template #body>
@@ -254,4 +256,5 @@ const addDialogVisible = defineModel<boolean>('visible', { default: false });
 const { height: editorHeight } = useEditorContentHeight();
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 </script>

package/src/fields/DisplayConds.vue

@@ -98,6 +98,11 @@ const config = computed<GroupListConfig>(() => ({
               label: '字段',
               checkStrictly: false,
               onChange: fieldOnChange,
+              defaultValue: () => [],
+              rules: [
+                { required: true, trigger: 'blur', message: '请选择字段' },
+                { typeMatch: true, trigger: 'change' },
+              ],
             }
           : {
               type: 'data-source-field-select',
@@ -107,6 +112,11 @@ const config = computed<GroupListConfig>(() => ({
               checkStrictly: false,
               dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
               onChange: fieldOnChange,
+              defaultValue: () => [],
+              rules: [
+                { required: true, trigger: 'blur', message: '请选择字段' },
+                { typeMatch: true, trigger: 'change' },
+              ],
             },
         {
           type: 'cond-op-select',
@@ -114,6 +124,10 @@ const config = computed<GroupListConfig>(() => ({
           label: '条件',
           width: 140,
           name: 'op',
+          rules: [
+            { required: true, trigger: 'blur', message: '请选择条件' },
+            { typeMatch: true, trigger: 'change' },
+          ],
         },
         {
           label: '值',