@tmagic/editor 1.8.0-beta.23 → 1.8.0-beta.25

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.23",
+  "version": "1.8.0-beta.25",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.7",
     "sortablejs": "^1.15.7",
-    "@tmagic/design": "1.8.0-beta.23",
-    "@tmagic/stage": "1.8.0-beta.23",
-    "@tmagic/utils": "1.8.0-beta.23",
-    "@tmagic/table": "1.8.0-beta.23",
-    "@tmagic/form": "1.8.0-beta.23"
+    "@tmagic/design": "1.8.0-beta.25",
+    "@tmagic/stage": "1.8.0-beta.25",
+    "@tmagic/utils": "1.8.0-beta.25",
+    "@tmagic/table": "1.8.0-beta.25",
+    "@tmagic/form": "1.8.0-beta.25"
   },
   "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.40",
-    "@tmagic/core": "1.8.0-beta.23"
+    "vue": "^3.5.41",
+    "@tmagic/core": "1.8.0-beta.25"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/CodeSelectCol.vue

@@ -15,7 +15,7 @@
         :prop="prop"
       ></MFormContainer>
       <MSelect
-        v-else
+        v-else-if="!silentMode"
         class="select"
         :config="selectConfig"
         :name="name"
@@ -27,7 +27,7 @@
 
       <!-- 查看/编辑按钮：对比模式为只读，不展示 -->
       <TMagicButton
-        v-if="!isCompareMode && model[name] && hasCodeBlockSidePanel"
+        v-if="!isCompareMode && !silentMode && model[name] && hasCodeBlockSidePanel"
         class="m-fields-select-action-button"
         :size="size"
         @click="editCode(model[name])"
@@ -65,6 +65,7 @@ import {
   createValues,
   type FieldProps,
   filterFunction,
+  FORM_SILENT_MODE_KEY,
   type FormItemConfig,
   type FormState,
   MContainer as MFormContainer,
@@ -83,6 +84,7 @@ defineOptions({
 });
 
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 const { codeBlockService, uiService } = useServices();
 const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits<{

package/src/fields/CondOpSelect.vue

@@ -31,6 +31,7 @@ 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 { getCondOpOptionsByFieldType, getFieldType } from '@editor/utils';
@@ -50,8 +51,8 @@ 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);
   return getCondOpOptionsByFieldType(type);
 });

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -6,7 +6,7 @@
     }"
   >
     <FieldSelect
-      v-if="isSelectValid"
+      v-if="isSelectValid && !silentMode"
       :model-value="model[name]"
       :disabled="disabled"
       :size="size"
@@ -18,7 +18,7 @@
     ></FieldSelect>
 
     <component
-      v-else
+      v-else-if="!silentMode"
       :is="tagName"
       :config="config.fieldConfig"
       :model="model"
@@ -33,7 +33,7 @@
     ></component>
 
     <TMagicTooltip
-      v-if="config.fieldConfig && !disabledDataSource && !mForm?.isCompare"
+      v-if="!silentMode && config.fieldConfig && !disabledDataSource && !mForm?.isCompare"
       :disabled="showDataSourceFieldSelect"
       content="选择数据源"
     >
@@ -57,6 +57,7 @@ import {
   type ContainerChangeEventData,
   type DataSourceFieldSelectConfig,
   type FieldProps,
+  FORM_SILENT_MODE_KEY,
   type FormState,
   getFormField,
 } from '@tmagic/form';
@@ -104,6 +105,7 @@ watch(
 
 const { dataSourceService, propsService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 
 const dataSources = computed(() => dataSourceService.get('dataSources') || []);
 const disabledDataSource = computed(() => propsService.getDisabledDataSource());
@@ -141,7 +143,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,6 +8,7 @@
     </div>
 
     <FloatingBox
+      v-if="!silentMode"
       :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
@@ -30,6 +31,7 @@
     </FloatingBox>
 
     <FloatingBox
+      v-if="!silentMode"
       :body-style="{ padding: '0 16px' }"
       v-model:visible="addFromJsonDialogVisible"
       v-model:width="width"
@@ -60,6 +62,7 @@ import {
   type ContainerChangeEventData,
   type DataSourceFieldsConfig,
   type FieldProps,
+  FORM_SILENT_MODE_KEY,
   type FormConfig,
   type FormState,
   MFormBox,
@@ -89,6 +92,7 @@ const emit = defineEmits<{
 
 const { uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));
@@ -379,6 +383,8 @@ provide(
 );
 
 onMounted(() => {
+  if (silentMode) return;
+
   const path = editingFieldPath.value;
   if (!path.length) return;
 

package/src/fields/DataSourceMethodSelect.vue

@@ -2,6 +2,7 @@
   <div class="m-fields-data-source-method-select">
     <div class="data-source-method-select-container">
       <MCascader
+        v-if="!silentMode"
         class="select"
         :config="cascaderConfig"
         :model="model"
@@ -13,7 +14,7 @@
       ></MCascader>
 
       <TMagicTooltip
-        v-if="model[name] && isCustomMethod && dataSourceSidePanel && !isCompare"
+        v-if="!silentMode && model[name] && isCustomMethod && dataSourceSidePanel && !isCompare"
         :content="notEditable ? '查看' : '编辑'"
       >
         <TMagicButton class="m-fields-select-action-button" :size="size" @click="editCodeHandler">
@@ -48,6 +49,7 @@ import {
   type DataSourceMethodSelectConfig,
   type FieldProps,
   filterFunction,
+  FORM_SILENT_MODE_KEY,
   type FormItemConfig,
   type FormState,
   MCascader,
@@ -67,6 +69,7 @@ defineOptions({
 
 const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 const eventBus = inject<EventBus>('eventBus');
 
 const emit = defineEmits(['change']);

package/src/fields/DataSourceMethods.vue

@@ -9,7 +9,7 @@
     </div>
 
     <CodeBlockEditor
-      v-if="codeConfig"
+      v-if="codeConfig && !silentMode"
       ref="codeBlockEditor"
       :disabled="disabled"
       :content="codeConfig"
@@ -26,7 +26,13 @@ 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,
+  FORM_SILENT_MODE_KEY,
+  type FormState,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -43,6 +49,7 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
 const emit = defineEmits(['change']);
 
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));
@@ -170,6 +177,8 @@ const editingMethodName = inject<ComputedRef<string | undefined>>(
 );
 
 onMounted(() => {
+  if (silentMode) return;
+
   const methodName = editingMethodName.value;
   if (!methodName) return;
 

package/src/fields/DataSourceMocks.vue

@@ -7,6 +7,7 @@
     </div>
 
     <FloatingBox
+      v-if="!silentMode"
       :body-style="{ padding: '0 16px' }"
       v-model:visible="addDialogVisible"
       v-model:width="width"
@@ -34,7 +35,14 @@ import { computed, inject, Ref, ref } from 'vue';
 
 import type { MockSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type DataSourceMocksConfig, type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import {
+  type DataSourceMocksConfig,
+  type FieldProps,
+  FORM_SILENT_MODE_KEY,
+  type FormConfig,
+  type FormState,
+  MFormBox,
+} from '@tmagic/form';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
@@ -57,6 +65,7 @@ const emit = defineEmits(['change']);
 
 const { uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 
 /** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));

package/src/fields/DisplayConds.vue

@@ -25,6 +25,7 @@ import {
   type GroupListConfig,
   MGroupList,
 } from '@tmagic/form';
+import { removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
 import { getCascaderOptionsFromFields, getFieldType } from '@editor/utils';
@@ -46,9 +47,14 @@ const mForm = inject<FormState | undefined>('mForm');
 
 const parentFields = computed(() => filterFunction<string[]>(mForm, props.config.parentFields, props) || []);
 
+const resolveFieldPath = (path: string[]) => {
+  const [id, ...fieldNames] = path;
+  const ds = id ? dataSourceService.getDataSourceById(removeDataSourceFieldPrefix(`${id}`)) : undefined;
+  return { ds, fieldNames };
+};
+
 const fieldOnChange = (_formState: FormState | undefined, v: string[], { model }: { model: Record<string, any> }) => {
-  const [id, ...fieldNames] = [...parentFields.value, ...v];
-  const ds = dataSourceService.getDataSourceById(id);
+  const { ds, fieldNames } = resolveFieldPath([...parentFields.value, ...v]);
   const type = getFieldType(ds, fieldNames);
   if (type === 'number') {
     model.value = Number(model.value);
@@ -82,14 +88,13 @@ const config = computed<GroupListConfig>(() => ({
           ? {
               type: 'cascader',
               options: () => {
-                const [dsId, ...keys] = parentFields.value;
-                const ds = dataSourceService.getDataSourceById(dsId);
+                const { ds, fieldNames } = resolveFieldPath(parentFields.value);
                 if (!ds) {
                   return [];
                 }
 
                 let fields = ds.fields || [];
-                keys.forEach((key) => {
+                fieldNames.forEach((key) => {
                   const field = fields.find((f) => f.name === key);
                   fields = field?.fields || [];
                 });
@@ -139,8 +144,7 @@ const config = computed<GroupListConfig>(() => ({
             {
               name: 'value',
               type: (_mForm, { model }) => {
-                const [id, ...fieldNames] = [...parentFields.value, ...model.field];
-                const ds = dataSourceService.getDataSourceById(id);
+                const { ds, fieldNames } = resolveFieldPath([...parentFields.value, ...(model.field || [])]);
                 const type = getFieldType(ds, fieldNames);
 
                 if (type === 'number') {

package/src/fields/EventSelect.vue

@@ -85,7 +85,7 @@ import { Delete } from '@element-plus/icons-vue';
 import { Plus } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
-import { ActionType } from '@tmagic/core';
+import { ActionType, MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type {
   CodeSelectColConfig,
@@ -327,8 +327,8 @@ const tableConfig = computed(
           name: 'method',
           label: '动作',
           type: compActionConfig.value.type,
-          options: (mForm: FormState, { model }: any) => {
-            const node = editorService.getNodeById(model.to);
+          options: (mForm: FormState, { model, formValue }: any) => {
+            const node = editorService.getNodeById(model.to) || (formValue as MNode);
             if (!node?.type) return [];
 
             return eventsService.getMethod(node.type, { targetId: model.to, node }).map((option: any) => ({

package/src/fields/KeyValue.vue

@@ -44,7 +44,7 @@
     </div>
 
     <MagicCodeEditor
-      v-if="config.advanced && showCode"
+      v-if="config.advanced && showCode && !silentMode"
       editor-custom-type="m-fields-key-value"
       language="javascript"
       :init-values="model[name]"
@@ -60,7 +60,7 @@
     ></MagicCodeEditor>
 
     <TMagicButton
-      v-if="config.advanced && !isCompare"
+      v-if="config.advanced && !isCompare && !silentMode"
       size="default"
       :disabled="disabled"
       link
@@ -75,7 +75,7 @@ import { computed, inject, ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormState, KeyValueConfig } from '@tmagic/form';
+import { type FieldProps, FORM_SILENT_MODE_KEY, type FormState, type KeyValueConfig } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -93,6 +93,7 @@ const emit = defineEmits<{
 }>();
 
 const mForm = inject<FormState | undefined>('mForm');
+const silentMode = inject(FORM_SILENT_MODE_KEY, false);
 
 /** 对比模式下隐藏增删/代码切换等操作按钮，仅保留只读展示。 */
 const isCompare = computed(() => Boolean(mForm?.isCompare));

package/src/fields/StyleSetter/pro/Font.vue

@@ -21,7 +21,7 @@ import { appendValidateSuggestion } from '@tmagic/design';
 import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import { validateDataSourceFieldSelectValue } from '@editor/utils/type-match-rules';
+import { validateDataSourceFieldSelect } from '@editor/utils/type-match-rules';
 
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
@@ -99,7 +99,7 @@ const formConfig = defineFormConfig([
             return callback();
           }
 
-          const result = validateDataSourceFieldSelectValue(
+          const result = validateDataSourceFieldSelect(
             value,
             {
               fieldType: 'data-source-field-select',

package/src/hooks/use-compare-form.ts

@@ -23,7 +23,6 @@ import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/
 
 import type { CompareFormBaseProps } from '@editor/type';
 import { getCodeBlockFormConfig } from '@editor/utils/code-block';
-import { removeStyleDisplayConfig } from '@editor/utils/props';
 
 export interface UseCompareFormReturn {
   config: Ref<FormConfig>;
@@ -107,9 +106,7 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur
         if (!props.type) {
           return [];
         }
-        return removeStyleDisplayConfig(
-          await props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode }),
-        );
+        return props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode });
       }
       case 'data-source': {
         const config = props.services.dataSourceService.getFormConfig(props.type || 'base');

package/src/plugin.ts

@@ -21,7 +21,7 @@ import { type App } from 'vue';
 import type { DesignPluginOptions } from '@tmagic/design';
 import designPlugin from '@tmagic/design';
 import type { FormInstallOptions } from '@tmagic/form';
-import formPlugin, { registerTypeMatchRules } from '@tmagic/form';
+import formPlugin, { registerSilentLeafFieldTypes, registerTypeMatchRules } from '@tmagic/form';
 import tablePlugin from '@tmagic/table';
 
 import Code from './fields/Code.vue';
@@ -68,6 +68,14 @@ export default {
     app.use(formPlugin, opt || {});
     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);