@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

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/components/ViewForm.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="m-editor-view-form-wrapper" :style="wrapperStyle">
+    <MForm
+      v-if="config.length"
+      ref="form"
+      class="m-editor-view-form"
+      :config="config"
+      :init-values="currentValues"
+      :disabled="disabled"
+      :label-width="labelWidth"
+      :context="formContext"
+      :size="size"
+    ></MForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type Ref, type ShallowRef } from 'vue';
+
+import { type FormConfig, MForm } from '@tmagic/form';
+
+import { useCompareForm } from '@editor/hooks/use-compare-form';
+import type { CompareFormBaseProps } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorViewForm',
+});
+
+const props = withDefaults(
+  defineProps<
+    CompareFormBaseProps & {
+      /** 是否禁用表单（默认只读展示）。 */
+      disabled?: boolean;
+    }
+  >(),
+  {
+    category: 'node',
+    labelWidth: '120px',
+    disabled: true,
+  },
+);
+
+const { config, currentValues, wrapperStyle, formContext, loadConfig, formRef } = useCompareForm(props);
+
+defineExpose<{
+  form: ShallowRef<InstanceType<typeof MForm> | null>;
+  config: Ref<FormConfig>;
+  reload: () => Promise<void>;
+}>({
+  form: formRef,
+  config,
+  reload: loadConfig,
+});
+</script>

package/src/editorProps.ts

@@ -1,5 +1,7 @@
+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 type { FormConfig } from '@tmagic/form';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -26,15 +28,16 @@ import type {
   TreeNodeData,
 } from './type';
 
+/**
+ * 「属性配置表单校验」联动能力的 provide/inject 注入键。
+ * 使用 Symbol 避免与其它字符串键冲突，供 PropsPanel / FormPanel 注入判断校验失败时是否仍更新节点并记录错误。
+ */
+export const ENABLE_PROPS_FORM_VALIDATE: InjectionKey<boolean> = Symbol('enablePropsFormValidate');
+
 export interface EditorProps {
-  /**
-   * 主题名称：对应 `packages/editor/src/theme/themes/<theme>/index.scss` 的目录名。
-   *
-   * 设置后会在编辑器根元素上追加 `m-editor--<theme>` 修饰类，配合按需引入
-   * `@tmagic/editor/dist/themes/<theme>.css` 即可启用主题样式。
-   *
-   * 例如：`<MEditor theme="magic-admin" />` + `import '@tmagic/editor/dist/themes/magic-admin.css'`。
-   */
+  /** 是否是大屏模拟器容器，大屏容器时，左侧属性面板会扩展为两列（正常3列），颜色表单不扩展两列等 */
+  isLargeStageContainer?: boolean;
+
   theme?: string;
   /** 页面初始值 */
   modelValue?: MApp;
@@ -79,6 +82,11 @@ export interface EditorProps {
   containerHighlightDuration?: number;
   /** 拖入画布中容器时，识别容器的操作类型 */
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   /** 画布大小 */
   stageRect?: StageRect;
   /** monaco editor 的配置 */
@@ -100,6 +108,11 @@ export interface EditorProps {
   disabledFlashTip?: boolean;
   /** 禁用双击在浮层中单独编辑选中组件 */
   disabledStageOverlay?: boolean;
+  /**
+   * 是否启用「属性配置表单校验」联动能力：开启后属性/样式表单校验失败时仍更新节点，
+   * 并把错误信息集中记录到 editorService，用于组件树标红提示与保存拦截；默认 false（关闭）。
+   */
+  enablePropsFormValidate?: boolean;
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
   /** 禁用数据源 */
@@ -136,7 +149,6 @@ export interface EditorProps {
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
   /** 组件树节点双击前的钩子函数，返回 false 则阻止默认的双击行为 */
   beforeLayerNodeDblclick?: (event: MouseEvent, data: TreeNodeData) => Promise<boolean | void> | boolean | void;
-  extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 历史记录面板的自定义扩展 tab，追加在内置的页面/数据源/代码块 tab 之后 */
   historyListExtraTabs?: HistoryListExtraTab[];
   /** 页面顺序拖拽配置参数 */
@@ -155,6 +167,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  containerHighlightAddOnly: false,
   disabledShowSrc: false,
   disabledDataSource: false,
   disabledCodeBlock: false,

package/src/fields/Code.vue

@@ -19,7 +19,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import type { CodeConfig, FieldProps } from '@tmagic/form';
+import { type CodeConfig, type FieldProps } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 

package/src/fields/CodeSelect.vue

@@ -1,36 +1,29 @@
 <template>
   <div class="m-fields-code-select" :class="config.className">
-    <TMagicCard :flat="config.flat">
-      <MContainer
-        :config="codeConfig"
-        :size="size"
-        class="code-select-content"
-        :prop="prop"
-        :disabled="disabled"
-        :is-compare="isCompareMode"
-        :last-values="lastValues?.[name]"
-        :model="model[name]"
-        @change="changeHandler"
-      >
-      </MContainer>
-      <TMagicButton class="create-button fullWidth" :icon="Plus" :size="size" :disabled="disabled" @click="newHandler()"
-        >添加{{ config.text }}</TMagicButton
-      >
-    </TMagicCard>
+    <MContainer
+      :config="codeConfig"
+      :size="size"
+      class="code-select-content"
+      :prop="prop"
+      :disabled="disabled"
+      :is-compare="isCompareMode"
+      :last-values="lastValues?.[name]"
+      :model="model[name]"
+      :label-position="config.labelPosition"
+      :label-width="config.labelWidth"
+      @change="changeHandler"
+    >
+    </MContainer>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, watch } from 'vue';
-import { Plus } from '@element-plus/icons-vue';
-import { isEmpty } from 'lodash-es';
 
-import { HookCodeType, HookType } from '@tmagic/core';
-import { TMagicButton, TMagicCard } from '@tmagic/design';
-import type { CodeSelectConfig, ContainerChangeEventData, FieldProps, GroupListConfig } from '@tmagic/form';
+import type { CodeSelectConfig, ContainerChangeEventData, FieldProps } from '@tmagic/form';
 import { MContainer } from '@tmagic/form';
 
-import { useServices } from '@editor/hooks/use-services';
+import { createCodeSelectConfig, normalizeCodeSelectValue } from '@editor/fields/configs/codeSelect';
 
 defineOptions({
   name: 'MFieldsCodeSelect',
@@ -40,8 +33,6 @@ const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
 }>();
 
-const { dataSourceService, codeBlockService } = useServices();
-
 const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
 
 /**
@@ -58,98 +49,14 @@ const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
  * 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
  */
 const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
-const newHandler = () => {
-  const defaultCode = {
-    codeType: HookCodeType.CODE,
-    codeId: '',
-  };
-  const name = props.config.name || '';
-  const hookData = props.model[name]?.hookData || [];
-  emit('change', defaultCode, {
-    modifyKey: `hookData.${hookData.length}`,
-  });
-};
-const codeConfig = computed<GroupListConfig>(() => ({
-  type: 'group-list',
-  name: 'hookData',
-  enableToggleMode: false,
-  expandAll: true,
-  flat: true,
-  addable: () => false,
-  title: (mForm, { model, index }: any) => {
-    if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
-      if (Array.isArray(model.codeId)) {
-        if (model.codeId.length < 2) {
-          return index;
-        }
-
-        const ds = dataSourceService.getDataSourceById(model.codeId[0]);
-        return `${ds?.title} / ${model.codeId[1]}`;
-      }
-
-      return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
-    }
-
-    const codeContent = codeBlockService.getCodeContentById(model.codeId);
 
-    if (codeContent) {
-      return codeContent.name;
-    }
-
-    return model.codeId || index;
-  },
-  titlePrefix: props.config.name === undefined ? undefined : String(props.config.name),
-  items: [
-    {
-      text: '代码类型',
-      type: 'select',
-      name: 'codeType',
-      labelPosition: 'right',
-      options: [
-        { value: HookCodeType.CODE, text: '代码块' },
-        { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
-      ],
-      defaultValue: 'code',
-      onChange: (_mForm, v: HookCodeType, { setModel }) => {
-        if (v === HookCodeType.DATA_SOURCE_METHOD) {
-          setModel('codeId', []);
-        } else {
-          setModel('codeId', '');
-        }
-        return v;
-      },
-    },
-    {
-      type: 'code-select-col',
-      name: 'codeId',
-      text: '代码块',
-      display: (_mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-      notEditable: () => !codeBlockService.getEditStatus(),
-    },
-    {
-      type: 'data-source-method-select',
-      name: 'codeId',
-      text: '数据源字段',
-      display: (_mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-      notEditable: () => !dataSourceService.get('editable'),
-    },
-  ],
-}));
+const codeConfig = computed(() => createCodeSelectConfig(props.config));
 
+// 挂载时的归一化由 applyMountValueEffects → code-select 的 effect 完成，这里只兜运行期被置空
 watch(
   () => props.model[props.name],
-  (value) => {
-    // 兼容旧的数据结构
-    if (isEmpty(value)) {
-      // 空值或者空数组
-      props.model[props.name] = {
-        hookType: HookType.CODE,
-        hookData: [],
-      };
-    }
-  },
-  {
-    immediate: true,
+  () => {
+    normalizeCodeSelectValue(props.model, props.name);
   },
 );
 

package/src/fields/CodeSelectCol.vue

@@ -84,7 +84,7 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const { codeBlockService, uiService } = useServices();
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
 }>();

package/src/fields/CondOpSelect.vue

@@ -31,9 +31,10 @@ import { computed } from 'vue';
 
 import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
+import { removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
-import { arrayOptions, eqOptions, getFieldType, numberOptions } from '@editor/utils';
+import { getCondOpOptionsByFieldType, getFieldType } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsCondOpSelect',
@@ -50,32 +51,10 @@ const props = defineProps<FieldProps<CondOpSelectConfig>>();
 const optionComponent = getDesignConfig('components')?.option;
 
 const options = computed(() => {
-  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
-
-  const ds = dataSourceService.getDataSourceById(id);
-
+  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...(props.model.field || [])];
+  const ds = id ? dataSourceService.getDataSourceById(removeDataSourceFieldPrefix(id)) : undefined;
   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/DataSourceFieldSelect/FieldSelect.vue

@@ -118,13 +118,13 @@ const emit = defineEmits<{
   change: [v: string[]];
 }>();
 
-const modelValue = defineModel<string[] | any>('modelValue', { default: [] });
+const modelValue = defineModel<string[] | any>('modelValue', { default: () => [] });
 
 const optionComponent = getDesignConfig('components')?.option;
 
 const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const allDataSources = computed(() => dataSourceService.get('dataSources') || []);
 

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -141,7 +141,10 @@ const checkStrictly = computed(() => {
   if (typeof props.config.checkStrictly !== 'function') {
     value = props.config.checkStrictly;
   } else {
-    const dsId = removeDataSourceFieldPrefix(props.model[0]);
+    const fieldValue = props.model[props.name];
+    // 指定了 dataSourceId 时取值里只有字段名，数据源 id 只能取自 config
+    const rawDsId = props.config.dataSourceId ?? (Array.isArray(fieldValue) ? fieldValue[0] : fieldValue);
+    const dsId = removeDataSourceFieldPrefix(`${rawDsId}`);
     const dataSource = dataSources.value.find((ds) => ds.id === dsId);
 
     value = props.config.checkStrictly(mForm, {

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>
@@ -85,7 +89,6 @@ const emit = defineEmits<{
 
 const { uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));
 
@@ -358,6 +361,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

@@ -30,10 +30,10 @@
     <template #suffix>
       <Icon :icon="Coin" />
     </template>
-    <template #default="{ item }">
+    <template #default="slotProps">
       <div style="display: flex; flex-direction: column; line-height: 1.2em">
-        <div>{{ item.text }}</div>
-        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
+        <div>{{ slotProps?.item?.text || '' }}</div>
+        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ slotProps?.item?.value || '' }}</span>
       </div>
     </template>
   </component>
@@ -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/DataSourceMethodSelect.vue

@@ -67,7 +67,7 @@ defineOptions({
 
 const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const emit = defineEmits(['change']);
 

package/src/fields/DataSourceMethods.vue

@@ -26,7 +26,12 @@ import { cloneDeep } from 'lodash-es';
 
 import type { CodeBlockContent } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps, FormState } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type DataSourceMethodsConfig,
+  type FieldProps,
+  type FormState,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -43,7 +48,6 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
 const emit = defineEmits(['change']);
 
 const mForm = inject<FormState | undefined>('mForm');
-
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));
 

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/DataSourceSelect.vue

@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
 
 const mForm = inject<FormState | undefined>('mForm');
 const { dataSourceService, uiService } = useServices();
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const dataSources = computed(() => dataSourceService.get('dataSources'));