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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.21",
+  "version": "1.8.0-beta.23",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -54,29 +54,29 @@
     "events": "^3.3.0",
     "gesto": "^1.19.4",
     "keycon": "^1.4.0",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.18.1",
     "moveable": "^0.53.0",
-    "serialize-javascript": "^7.0.0",
-    "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.21",
-    "@tmagic/form": "1.8.0-beta.21",
-    "@tmagic/stage": "1.8.0-beta.21",
-    "@tmagic/table": "1.8.0-beta.21",
-    "@tmagic/utils": "1.8.0-beta.21"
+    "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"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
-    "@types/lodash-es": "^4.17.4",
+    "@types/lodash-es": "^4.17.12",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.9",
-    "@vue/test-utils": "^2.4.6"
+    "@vue/test-utils": "^2.4.11"
   },
   "peerDependencies": {
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.40",
-    "@tmagic/core": "1.8.0-beta.21"
+    "@tmagic/core": "1.8.0-beta.23"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/StyleSetter/components/Box.vue

@@ -4,7 +4,7 @@
       <span class="help-txt" v-if="item.text">{{ item.text }}</span>
       <span class="next-input">
         <input
-          :model-value="model[item.name]"
+          :value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"

package/src/fields/StyleSetter/components/Position.vue

@@ -3,7 +3,7 @@
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="next-input">
         <input
-          :model-value="model[item.name]"
+          :value="model[item.name]"
           placeholder="0"
           :title="model[item.name]"
           :disabled="disabled"

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

@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
+import { appendValidateSuggestion } from '@tmagic/design';
 import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
@@ -47,6 +48,12 @@ const formConfig = defineFormConfig([
     fieldConfig: {
       type: 'colorPicker',
     },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('背景色应为字符串', '请参考以下示例值："#000000"'),
+      },
+    ],
   },
   {
     name: 'backgroundImage',

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

@@ -17,9 +17,12 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
+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 { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
 defineProps<{
@@ -48,6 +51,12 @@ const formConfig = defineFormConfig([
         fieldConfig: {
           type: 'text',
         },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('字号应为字符串或数字', '请参考以下示例值：24 或 "24"'),
+          },
+        ],
       },
       {
         labelWidth: '68px',
@@ -65,8 +74,10 @@ const formConfig = defineFormConfig([
     text: '字重',
     labelWidth: '68px',
     type: 'data-source-field-select',
+    dataSourceFieldType: ['string', 'number'],
     fieldConfig: {
       type: 'select',
+      allowCreate: true,
       options: ['normal', 'bold']
         .concat(
           Array(7)
@@ -78,6 +89,46 @@ const formConfig = defineFormConfig([
           text: item,
         })),
     },
+    rules: [
+      {
+        typeMatch: false,
+      },
+      {
+        validator: ({ value, callback }, { config, model, prop }, mForm) => {
+          if (value === '' || value === null || value === undefined) {
+            return callback();
+          }
+
+          const result = validateDataSourceFieldSelectValue(
+            value,
+            {
+              fieldType: 'data-source-field-select',
+              mForm,
+              props: { config, model, prop },
+            },
+            {
+              // 字重允许 string（含可创建项）与 number（如 700）
+              validatePlainValue: (plainValue) => {
+                if (typeof plainValue === 'string' || (typeof plainValue === 'number' && !Number.isNaN(plainValue))) {
+                  return undefined;
+                }
+                return '字重应为字符串或数字';
+              },
+            },
+          );
+
+          if (result && typeof (result as Promise<string | undefined>).then === 'function') {
+            (result as Promise<string | undefined>).then(
+              (error) => callback(error),
+              (error) => callback(error),
+            );
+            return;
+          }
+
+          return callback(result);
+        },
+      },
+    ],
   },
   {
     labelWidth: '68px',
@@ -87,6 +138,12 @@ const formConfig = defineFormConfig([
     fieldConfig: {
       type: 'colorPicker',
     },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('颜色应为字符串', '请参考以下示例值："#000000"'),
+      },
+    ],
   },
   {
     name: 'textAlign',

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

@@ -15,6 +15,7 @@
 </template>
 
 <script lang="ts" setup>
+import { appendValidateSuggestion } from '@tmagic/design';
 import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
@@ -66,6 +67,12 @@ const formConfig = defineFormConfig([
         fieldConfig: {
           type: 'text',
         },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('left 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
       },
       {
         name: 'top',
@@ -74,6 +81,12 @@ const formConfig = defineFormConfig([
         fieldConfig: {
           type: 'text',
         },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('top 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
       },
     ],
   },
@@ -89,6 +102,12 @@ const formConfig = defineFormConfig([
         fieldConfig: {
           type: 'text',
         },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('right 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
       },
       {
         name: 'bottom',
@@ -97,6 +116,12 @@ const formConfig = defineFormConfig([
         fieldConfig: {
           type: 'text',
         },
+        rules: [
+          {
+            typeMatch: true,
+            message: appendValidateSuggestion('bottom 应为字符串', '请参考以下示例值："10"'),
+          },
+        ],
       },
     ],
   },
@@ -108,6 +133,12 @@ const formConfig = defineFormConfig([
     fieldConfig: {
       type: 'text',
     },
+    rules: [
+      {
+        typeMatch: true,
+        message: appendValidateSuggestion('zIndex 应为数字', '请参考以下示例值：10'),
+      },
+    ],
   },
 ]);
 

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

@@ -158,14 +158,34 @@ const submit = async (
       v.id = values.value.id;
     }
 
-    const newValue: MNode = {
-      ...v,
-      style: {},
-    };
-
-    if (v.style) {
-      // 空字符串样式值表示「清除该样式」，需保留才能在 doUpdate 的 mergeWith 中覆盖旧值。
-      if (eventData) {
+    // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；
+    // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
+    const historySource = eventData ? 'props' : 'code';
+    // 源码编辑统一走整节点 replace，避免 merge 保留已删除字段。
+    const replace = historySource === 'code';
+
+    let newValue: MNode;
+
+    if (replace) {
+      if (source === 'style') {
+        // 样式面板源码仅提交 { style }：先把新 style 替换到原节点上，再整节点覆盖。
+        newValue = {
+          ...values.value,
+          id: v.id || values.value.id,
+          style: { ...(v.style || {}) },
+        };
+      } else {
+        // 属性面板源码提交完整节点 DSL
+        newValue = { ...v };
+      }
+    } else {
+      newValue = {
+        ...v,
+        style: {},
+      };
+
+      if (v.style) {
+        // 空字符串样式值表示「清除该样式」，需保留才能在 doUpdate 的 mergeWith 中覆盖旧值。
         // 表单编辑：先过滤掉空字符串（避免表单默认空值污染 DSL），
         // 再按 changeRecords 恢复被主动清空的字段。
         Object.entries(v.style).forEach(([key, value]) => {
@@ -174,24 +194,18 @@ const submit = async (
           }
         });
 
-        eventData.changeRecords?.forEach((record) => {
+        eventData?.changeRecords?.forEach((record) => {
           if (record.propPath?.startsWith('style') && record.value === '') {
             setValueByKeyPath(record.propPath, record.value, newValue);
           }
         });
-      } else {
-        // 源码编辑器保存（无 eventData）：style 原样保留，其中的空字符串视为用户主动清除该样式。
-        newValue.style = { ...v.style };
       }
     }
 
-    // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；
-    // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
-    const historySource = eventData ? 'props' : 'code';
-
     editorService.update(newValue, {
       changeRecords: eventData?.changeRecords,
       historySource,
+      replace,
       // 启用校验联动时，仅校验失败（error 存在）才把错误信息随更新传入 editorService 记录；
       // 其余情况（含表单校验成功、CodeEditor 源码保存）不携带 invalidInfo，由 editorService 在执行 update 时统一清除该节点错误。
       ...(enablePropsFormValidate && error ? { invalidInfo: { id: newValue.id, source, error: error?.message } } : {}),

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -71,7 +71,11 @@ const stage = computed(() => editorService.get('stage'));
 const list = computed<ComponentGroup[]>(() =>
   componentListService.getList().map((group: ComponentGroup) => ({
     ...group,
-    items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+    items: group.items.filter((item: ComponentItem) =>
+      `${item.text || ''}${item.desc || ''}${item.type}`
+        .toLocaleLowerCase()
+        .includes(searchText.value.toLocaleLowerCase()),
+    ),
   })),
 );
 

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -120,7 +120,7 @@ const filterNodeMethod = (v: string, data: MNode): boolean => {
     name = 'container';
   }
 
-  return `${data.id}${name}${data.type}`.includes(v);
+  return `${data.id}${name}${data.type || ''}`.toLocaleLowerCase().includes(v.toLocaleLowerCase());
 };
 
 const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);

package/src/services/editor.ts

@@ -720,7 +720,11 @@ class Editor extends BaseService {
 
   public async doUpdate(
     config: MNode,
-    { changeRecords = [], historySource }: { changeRecords?: ChangeRecord[]; historySource?: HistoryOpSource } = {},
+    {
+      changeRecords = [],
+      historySource,
+      replace = false,
+    }: { changeRecords?: ChangeRecord[]; historySource?: HistoryOpSource; replace?: boolean } = {},
   ): Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }> {
     const root = this.get('root');
     if (!root) throw new Error('root为空');
@@ -733,9 +737,14 @@ class Editor extends BaseService {
 
     const node = toRaw(info.node);
 
-    let newConfig = await toggleFixedPosition(toRaw(config), node, info.path, this.getLayout);
+    // replace=true 时跳过 toggleFixedPosition / mergeWith / setChildrenLayout，直接用传入配置整节点替换
+    let newConfig = replace
+      ? cloneDeep(toRaw(config))
+      : await toggleFixedPosition(toRaw(config), node, info.path, this.getLayout);
 
-    newConfig = mergeWith(cloneDeep(node), newConfig, editorNodeMergeCustomizer);
+    if (!replace) {
+      newConfig = mergeWith(cloneDeep(node), newConfig, editorNodeMergeCustomizer);
+    }
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 
@@ -756,10 +765,12 @@ class Editor extends BaseService {
 
     if (!parentNodeItems || typeof index === 'undefined' || index === -1) throw new Error('更新的节点未找到');
 
-    const newLayout = await this.getLayout(newConfig);
-    const layout = await this.getLayout(node);
-    if (Array.isArray(newConfig.items) && newLayout !== layout) {
-      newConfig = setChildrenLayout(newConfig as MContainer, newLayout);
+    if (!replace) {
+      const newLayout = await this.getLayout(newConfig);
+      const layout = await this.getLayout(node);
+      if (Array.isArray(newConfig.items) && newLayout !== layout) {
+        newConfig = setChildrenLayout(newConfig as MContainer, newLayout);
+      }
     }
 
     parentNodeItems[index] = newConfig;
@@ -798,6 +809,7 @@ class Editor extends BaseService {
    * @param data.changeRecordList 多节点 form 端变更记录列表，按 config 数组同序对应每个节点；优先级高于 changeRecords
    * @param data.doNotPushHistory 是否不写入历史记录（默认 false）
    * @param data.historyDescription 入栈时附带的人类可读描述，用于历史面板展示（不影响 undo/redo 行为）
+   * @param data.replace 是否整节点替换：为 true 时跳过 mergeWith / toggleFixedPosition / setChildrenLayout，直接用传入配置覆盖（默认 false）
    * @returns 更新后的节点配置
    */
   public async update(
@@ -808,6 +820,11 @@ class Editor extends BaseService {
       doNotPushHistory?: boolean;
       historyDescription?: string;
       historySource?: HistoryOpSource;
+      /**
+       * 为 true 时不做深合并等变换，直接用传入配置整节点替换现有节点。
+       * 适用于源码编辑、历史整节点快照回放等「完整 DSL」场景；默认 false（局部属性更新走 merge）。
+       */
+      replace?: boolean;
       /**
        * 属性面板提交时携带的校验错误信息，在写入历史记录之前落库，
        * 使历史快照与本次变更对齐，从而 undo/redo 能正确还原错误标记。
@@ -823,6 +840,7 @@ class Editor extends BaseService {
       changeRecords,
       historyDescription,
       historySource,
+      replace = false,
       invalidInfo,
     } = data;
 
@@ -833,7 +851,7 @@ class Editor extends BaseService {
     const updateData = await Promise.all(
       nodes.map((node, index) => {
         const recordsForNode = changeRecordList ? (changeRecordList[index] ?? []) : (changeRecords ?? []);
-        return this.doUpdate(node, { changeRecords: recordsForNode, historySource });
+        return this.doUpdate(node, { changeRecords: recordsForNode, historySource, replace });
       }),
     );
 
@@ -1348,6 +1366,7 @@ class Editor extends BaseService {
       doNotPushHistory?: boolean;
       historyDescription?: string;
       historySource?: HistoryOpSource;
+      replace?: boolean;
     } = {},
   ): Promise<DslOpWithHistoryIdsResult<MNode | MNode[]>> {
     this.lastPushedHistoryId = null;

package/src/utils/dep/collect-worker-client.ts

@@ -12,6 +12,14 @@ export interface CollectWorkerResult {
   nodeIds: Id[];
 }
 
+interface CollectTask {
+  id: number;
+  createRequest: (id: number) => CollectWorkerRequest;
+  resolve: (response: CollectWorkerResponse | null) => void;
+  /** 已被 abort 丢弃：调用方已按 null 结算，结果回来后不再回传 */
+  discarded: boolean;
+}
+
 /**
  * 依赖收集 worker 的主线程客户端
  *
@@ -20,13 +28,20 @@ export interface CollectWorkerResult {
  *
  * 全量收集与增量收集共用一个常驻 worker：增量收集调用频繁（每次节点更新都会触发），
  * 按次创建 worker 的启动开销无法接受，也容易漏掉销毁导致线程泄漏。
+ *
+ * 请求在主线程侧排队后逐个投递（worker 本身也是串行处理），这样 abort 时能直接丢掉尚未投递的请求，
+ * 无需销毁线程：worker 只在真正异常或销毁时才重建。
  */
 export class CollectWorkerClient {
   private worker: Worker | null = null;
 
   private seed = 0;
 
-  private pending = new Map<number, (response: CollectWorkerResponse | null) => void>();
+  /** 等待投递给 worker 的请求 */
+  private queue: CollectTask[] = [];
+
+  /** 已投递、等待 worker 响应的请求，worker 串行处理，同一时刻最多一个 */
+  private inflight: CollectTask | null = null;
 
   public get isSupported() {
     return typeof Worker !== 'undefined';
@@ -53,24 +68,37 @@ export class CollectWorkerClient {
   public terminate() {
     this.worker?.terminate();
     this.worker = null;
-    this.settleAllPending();
+    this.settleAll();
   }
 
   /**
-   * 丢弃在途请求并重建 worker
-   * clearIdleTasks / reset 中断收集时调用，避免已 abort 的长任务继续占着常驻 worker 拖慢后续收集
+   * 丢弃在途请求，但保留常驻 worker
+   *
+   * clearIdleTasks / reset 中断收集时调用。这里不能销毁 worker：worker 重建要重新加载并启动整份收集逻辑，
+   * 而 clearIdleTasks / reset 触发频繁（root 更新、数据源变更、历史回滚等），一旦下一次 abort 落在
+   * 上一个 worker 还没启动完的窗口内，就会陷入「加载中被销毁 → 重建 → 又被销毁」的循环，
+   * 表现为 worker 反复加载且依赖始终收集不完。
+   *
+   * 因此 abort 只做「不要这些结果」：尚未投递的请求直接丢掉，已投递的那一个标记为丢弃，
+   * 结果回来后忽略（不写回主线程），worker 继续复用。
    */
   public abort() {
-    this.terminate();
+    const { queue } = this;
+    this.queue = [];
+
+    for (const task of queue) {
+      task.resolve(null);
+    }
+
+    // 已投递的请求无法从外部打断（worker 忙时收不到取消消息），只能丢弃其结果
+    if (this.inflight && !this.inflight.discarded) {
+      this.inflight.discarded = true;
+      this.inflight.resolve(null);
+    }
   }
 
-  /**
-   * worker 按收到的顺序逐个处理请求，因此请求间不会互相打断，用 id 把结果分发回各自的调用方
-   */
   private request(createRequest: (id: number) => CollectWorkerRequest): Promise<CollectWorkerResponse | null> {
-    const worker = this.getWorker();
-
-    if (!worker) {
+    if (!this.isSupported) {
       return Promise.resolve(null);
     }
 
@@ -78,19 +106,44 @@ export class CollectWorkerClient {
     const id = this.seed;
 
     return new Promise<CollectWorkerResponse | null>((resolve) => {
-      this.pending.set(id, resolve);
-
-      try {
-        // 节点配置中可能存在函数等无法结构化克隆的值，需要先序列化再传递
-        worker.postMessage(createRequest(id));
-      } catch (e) {
-        error('magic editor: 依赖收集 worker 通信失败', e);
-        this.pending.delete(id);
-        resolve(null);
-      }
+      this.queue.push({ id, createRequest, resolve, discarded: false });
+      this.flush();
     });
   }
 
+  /**
+   * 投递队首请求，worker 串行处理，因此同一时刻只投递一个，用 id 把结果分发回各自的调用方
+   */
+  private flush() {
+    if (this.inflight || !this.queue.length) {
+      return;
+    }
+
+    const worker = this.getWorker();
+
+    if (!worker) {
+      this.settleAll();
+      return;
+    }
+
+    const task = this.queue.shift()!;
+    this.inflight = task;
+
+    try {
+      // 节点配置中可能存在函数等无法结构化克隆的值，需要先序列化再传递
+      worker.postMessage(task.createRequest(task.id));
+    } catch (e) {
+      error('magic editor: 依赖收集 worker 通信失败', e);
+      this.inflight = null;
+
+      if (!task.discarded) {
+        task.resolve(null);
+      }
+
+      this.flush();
+    }
+  }
+
   private getWorker() {
     if (!this.isSupported) {
       return null;
@@ -122,28 +175,41 @@ export class CollectWorkerClient {
   }
 
   private handleResponse(response: CollectWorkerResponse) {
-    const resolve = this.pending.get(response?.id);
+    const task = this.inflight;
 
-    if (!resolve) {
+    if (task?.id !== response?.id) {
       return;
     }
 
-    this.pending.delete(response.id);
-    resolve(response.failed ? null : response);
+    this.inflight = null;
+
+    // 被 abort 丢弃的请求已按 null 结算，结果不能再写回主线程
+    if (!task.discarded) {
+      task.resolve(response.failed ? null : response);
+    }
+
+    this.flush();
   }
 
   private handleFatalError() {
     this.worker?.terminate();
     this.worker = null;
-    this.settleAllPending();
+    this.settleAll();
   }
 
-  private settleAllPending() {
-    const resolvers = [...this.pending.values()];
-    this.pending.clear();
+  private settleAll() {
+    const tasks = this.queue;
+    this.queue = [];
 
-    for (const resolve of resolvers) {
-      resolve(null);
+    if (this.inflight) {
+      tasks.push(this.inflight);
+      this.inflight = null;
+    }
+
+    for (const task of tasks) {
+      if (!task.discarded) {
+        task.resolve(null);
+      }
     }
   }
 }