@tmagic/editor 1.8.0-beta.13 → 1.8.0-beta.15

package/src/utils/const.ts

@@ -5,10 +5,11 @@ export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 
-export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+export const DEFAULT_LEFT_COLUMN_WIDTH = 345;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-export const MIN_LEFT_COLUMN_WIDTH = 200;
+// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为 345
+export const MIN_LEFT_COLUMN_WIDTH = 345;
 export const MIN_CENTER_COLUMN_WIDTH = 400;
 export const MIN_RIGHT_COLUMN_WIDTH = 300;
 

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

@@ -243,7 +243,7 @@ export const resolveFieldByPath = (
   fields: DataSchema[] | undefined,
   fieldNames: string[],
   options: { skipNumberIndices?: boolean } = {},
-): { ok: boolean; field?: DataSchema; fields: DataSchema[] } => {
+): { ok: boolean; field?: DataSchema; fields: DataSchema[]; failedName?: string } => {
   let currentFields = fields || [];
   let field: DataSchema | undefined;
 
@@ -252,11 +252,11 @@ export const resolveFieldByPath = (
       continue;
     }
     if (!currentFields.length) {
-      return { ok: false, fields: currentFields };
+      return { ok: false, fields: currentFields, failedName: name };
     }
     field = currentFields.find((item) => item.name === name);
     if (!field) {
-      return { ok: false, fields: currentFields };
+      return { ok: false, fields: currentFields, failedName: name };
     }
     currentFields = field.fields || [];
   }

package/src/utils/props.ts

@@ -180,6 +180,7 @@ export const advancedTabConfig: TabPaneConfig = {
       name: NODE_DISABLE_CODE_BLOCK_KEY,
       text: '禁用代码块',
       type: 'switch',
+      labelPosition: 'left',
       defaultValue: false,
       extra: '开启后，配置的代码块将不会被执行',
     },
@@ -187,15 +188,16 @@ export const advancedTabConfig: TabPaneConfig = {
       name: NODE_DISABLE_DATA_SOURCE_KEY,
       text: '禁用数据源',
       type: 'switch',
+      labelPosition: 'left',
       defaultValue: false,
       extra: '开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效',
     },
     {
       name: 'created',
-      text: 'created',
+      text: 'Created',
       labelPosition: 'top',
       type: 'code-select',
-      extra: '组件初始化时执行',
+      titleExtra: '组件初始化时执行',
       rules: [
         { typeMatch: true, trigger: 'change' },
         {
@@ -210,10 +212,10 @@ export const advancedTabConfig: TabPaneConfig = {
     },
     {
       name: 'mounted',
-      text: 'mounted',
+      text: 'Mounted',
       labelPosition: 'top',
       type: 'code-select',
-      extra: '组件挂载到dom时执行',
+      titleExtra: '组件挂载到dom时执行',
       rules: [
         { typeMatch: true, trigger: 'change' },
         {
@@ -228,8 +230,8 @@ export const advancedTabConfig: TabPaneConfig = {
     },
     {
       name: 'display',
-      text: 'display',
-      extra: '控制组件是否渲染，关系的代码块返回值为false时不渲染',
+      text: 'Display',
+      titleExtra: '控制组件是否渲染，关系的代码块返回值为false时不渲染',
       labelPosition: 'top',
       type: 'code-select',
       rules: [
@@ -263,10 +265,17 @@ export const displayTabConfig: TabPaneConfig<DisplayCondsConfig> = {
       extra: (_state, { model }) =>
         `条件成立时${model[NODE_CONDS_RESULT_KEY] ? '隐藏' : '显示'}，不成立时${model[NODE_CONDS_RESULT_KEY] ? '显示' : '隐藏'}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`,
     },
+    {
+      text: '条件组配置',
+      static: true,
+      className: 'display-conds-title',
+    },
     {
       type: 'display-conds',
       name: NODE_CONDS_KEY,
       titlePrefix: '条件组',
+      fixed: 'right',
+      operateColWidth: 112,
       defaultValue: [],
       rules: [{ typeMatch: true }],
     },
@@ -303,10 +312,13 @@ export const fillConfig = (
       name: 'id',
       text: 'ID',
       type: 'text',
-      disabled: true,
+      // 走纯文本渲染，避免出现 disabled 的灰底输入框；append 仍正常显示。
+      static: true,
+
       append: {
-        type: 'button',
-        text: '复制',
+        type: 'icon',
+        text: 'https://vip.image.video.qpic.cn/vupload/20260615/36cf7e1781493669935.svg',
+        extra: '复制',
         handler: (vm, { model }) => {
           navigator.clipboard
             .writeText(`${model.id}`)
@@ -339,6 +351,7 @@ export const fillConfig = (
   const tabConfig: TabConfig = {
     type: 'tab',
     labelWidth,
+    className: 'magic-right-panel-tabs-top',
     items: [
       {
         title: '属性',

package/src/utils/type-match-rules.ts

@@ -20,6 +20,7 @@ import type { DataSourceFieldType, DataSourceSchema, Id } from '@tmagic/core';
 import { NodeType } from '@tmagic/core';
 import { appendValidateSuggestion } from '@tmagic/design';
 import type { TypeMatchValidateContext, TypeMatchValidator } from '@tmagic/form';
+import { validateTypeMatch } from '@tmagic/form';
 import {
   DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
   DATA_SOURCE_SET_DATA_METHOD_NAME,
@@ -261,16 +262,20 @@ const validateDataSourceFieldPath = (
 
   const ds = findDataSource(`${dsId}`);
   if (!ds) {
-    return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
+    return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
   }
 
   if (!fieldNames.length) {
     return undefined;
   }
 
-  const { field, ok } = resolveFieldByPath(ds.fields, fieldNames);
+  const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
   if (!ok) {
-    return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
+    return defaultMessage(
+      options.message,
+      `数据源字段(${failedName})不存在`,
+      listSuggestion(fields.map((item) => item.name)),
+    );
   }
 
   const allowedTypes = options.dataSourceFieldType || ['any'];
@@ -471,11 +476,12 @@ const isDataSourceFieldPathValue = (value: any, config: any): value is string[]
   return `${value[0]}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX);
 };
 
-const validateDataSourceFieldSelect: TypeMatchValidator = (value, { message, props }) => {
+const validateDataSourceFieldSelect: TypeMatchValidator = (value, { mForm, message, props }) => {
   const config = props.config || {};
 
   if (config.fieldConfig && !isDataSourceFieldPathValue(value, config)) {
-    return undefined;
+    // 值不是数据源字段路径时，按 fieldConfig 的类型校验（与表单项自身 typeMatch 行为一致）
+    return validateTypeMatch(value, mForm, { ...props, config: { name: config.name, ...config.fieldConfig } }, message);
   }
 
   if (!Array.isArray(value) || value.some((item) => typeof item !== 'string')) {