@tmagic/editor 1.8.0-manmanyu.8 → 1.8.0

package/src/layouts/history-list/useHistoryRevert.ts

@@ -59,6 +59,7 @@ const buildDiffPayload = (source: DiffPayloadSource, index: number, id?: string
 };
 
 interface MountedDiffDialog {
+  app: ReturnType<typeof createApp>;
   instance: {
     open: (_payload: DiffDialogPayload) => void;
     confirm: (_payload: DiffDialogPayload) => Promise<boolean>;
@@ -73,9 +74,9 @@ interface MountedDiffDialog {
  * 弹窗组件动态 import，避免拖累其它消费者。供「确认回滚」与「查看差异」两种交互共用。
  */
 const mountHistoryDiffDialog = async (
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
-      services: Pick<Services, 'editorService' | 'dataSourceService' | 'codeBlockService' | 'historyService'>;
+      services?: Services;
       isConfirm?: boolean;
       onClose?: () => void;
     },
@@ -89,9 +90,10 @@ const mountHistoryDiffDialog = async (
   const app = createApp(historyDiffDialog, {
     services: options.services,
     isConfirm: options.isConfirm,
-    extendState: options.extendState,
     loadConfig: options.loadConfig,
     selfDiffFieldTypes: options.selfDiffFieldTypes,
+    width: options.width,
+    size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
     onClose: options.onClose,
   });
   if (options.appContext) {
@@ -111,7 +113,7 @@ const mountHistoryDiffDialog = async (
     }, 300);
   };
 
-  return { instance, destroy };
+  return { app, instance, destroy };
 };
 
 /**
@@ -121,9 +123,9 @@ const mountHistoryDiffDialog = async (
  */
 const confirmRevertWithDiffDialog = async (
   payload: DiffDialogPayload,
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
-      services: Pick<Services, 'editorService' | 'dataSourceService' | 'codeBlockService' | 'historyService'>;
+      services?: Services;
     },
 ): Promise<boolean> => {
   const { instance, destroy } = await mountHistoryDiffDialog({
@@ -143,9 +145,9 @@ const confirmRevertWithDiffDialog = async (
  */
 const viewHistoryDiffDialog = async (
   payload: DiffDialogPayload,
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
-      services: Pick<Services, 'editorService' | 'dataSourceService' | 'codeBlockService' | 'historyService'>;
+      services?: Services;
     },
 ): Promise<void> => {
   // onClose 在用户关闭弹窗时才触发，此时 handle.destroy 早已赋值。
@@ -182,19 +184,15 @@ const viewHistoryDiffDialog = async (
  * ```ts
  * import { useHistoryRevert } from '@tmagic/editor';
  *
- * const { onPageRevert, onPageDiff } = useHistoryRevert(editorRef.value); // editorRef.value 即 Editor 暴露的 services
+ * const { onPageRevert, onPageDiff } = useHistoryRevert({}, editorRef.value); // editorRef.value 即 Editor 暴露的 services
  * await onPageRevert(index); // 弹出差异 / 二次确认弹窗后回滚
  * onPageDiff(index); // 弹出只读差异弹窗查看前后值差异
  * ```
  */
-export const useHistoryRevert = (
-  services: Pick<Services, 'editorService' | 'dataSourceService' | 'codeBlockService' | 'historyService'>,
-  options: UseHistoryRevertOptions = {},
-) => {
-  const { editorService, dataSourceService, codeBlockService, historyService } = services;
+export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services?: Services) => {
   // 自动捕获调用方所在组件的 appContext（在 setup 中调用时），业务方亦可显式覆盖。
   const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-  const { extendState } = options;
+  const { dialogWidth } = options;
 
   /** 目标数据已被删除、无法回滚时的统一提示。 */
   const showRevertTargetMissing = () => {
@@ -206,10 +204,7 @@ export const useHistoryRevert = (
    * 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
    * 用户取消时返回 false，调用方据此中止回滚。
    */
-  const confirmRevert = (): Promise<boolean> =>
-    confirmHistoryAction(
-      '确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。',
-    );
+  const confirmRevert = (): Promise<boolean> => confirmHistoryAction('确定回滚该步骤吗？');
 
   /**
    * 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，
@@ -218,7 +213,13 @@ export const useHistoryRevert = (
    */
   const runRevert = (payload: DiffDialogPayload | null, extra?: CustomDiffFormOptions): Promise<boolean> => {
     if (payload) {
-      return confirmRevertWithDiffDialog(payload, { appContext, extendState, services, ...extra });
+      return confirmRevertWithDiffDialog(payload, {
+        appContext,
+        services,
+        ...extra,
+        width: extra?.width ?? dialogWidth,
+        size: extra?.size,
+      });
     }
     return confirmRevert();
   };
@@ -227,8 +228,8 @@ export const useHistoryRevert = (
     buildDiffPayload(
       {
         category: 'node',
-        groups: () => historyService.getHistoryGroups('page', editorService.get('page')?.id),
-        getCurrent: (id) => editorService.getNodeById(id) as Record<string, any> | null,
+        groups: () => services?.historyService.getHistoryGroups('page', services?.editorService.get('page')?.id) ?? [],
+        getCurrent: (id) => services?.editorService.getNodeById(id) as Record<string, any> | null,
         resolveType: (n, o) => n.type || o.type || '',
         resolveLabel: (n, o) => n.name || o.name || n.type || o.type || '',
       },
@@ -239,8 +240,8 @@ export const useHistoryRevert = (
     buildDiffPayload(
       {
         category: 'data-source',
-        groups: () => historyService.getHistoryGroups('dataSource'),
-        getCurrent: (id) => dataSourceService.getDataSourceById(`${id}`) as Record<string, any> | null,
+        groups: () => services?.historyService.getHistoryGroups('dataSource') ?? [],
+        getCurrent: (id) => services?.dataSourceService.getDataSourceById(`${id}`) as Record<string, any> | null,
         resolveType: (n, o) => n.type || o.type || 'base',
         resolveLabel: (n, o, id) => n.title || o.title || `${id}`,
       },
@@ -252,8 +253,8 @@ export const useHistoryRevert = (
     buildDiffPayload(
       {
         category: 'code-block',
-        groups: () => historyService.getHistoryGroups('codeBlock'),
-        getCurrent: (id) => codeBlockService.getCodeContentById(id) as Record<string, any> | null,
+        groups: () => services?.historyService.getHistoryGroups('codeBlock') ?? [],
+        getCurrent: (id) => services?.codeBlockService.getCodeContentById(id) as Record<string, any> | null,
         resolveLabel: (n, o, id) => n.name || o.name || `${id}`,
       },
       index,
@@ -267,17 +268,17 @@ export const useHistoryRevert = (
    * add（回滚即删除）即使目标已不在，也已达成「删除」目的，不视为失败。
    */
   const isPageRevertTargetMissing = (index: number): boolean => {
-    const step = historyService.getStepList('page', editorService.get('page')?.id)[index]?.step;
+    const step = services?.historyService.getStepList('page', services?.editorService.get('page')?.id)[index]?.step;
     if (!step) return false;
     if (step.opType === 'update') {
       return (step.diff ?? []).some((item) => {
         const id = item.newSchema?.id ?? item.oldSchema?.id;
-        return id !== undefined && !editorService.getNodeById(id, false);
+        return id !== undefined && !services?.editorService.getNodeById(id, false);
       });
     }
     if (step.opType === 'remove') {
       return (step.diff ?? []).some(
-        (item) => item.parentId !== undefined && !editorService.getNodeById(item.parentId, false),
+        (item) => item.parentId !== undefined && !services?.editorService.getNodeById(item.parentId, false),
       );
     }
     return false;
@@ -285,14 +286,14 @@ export const useHistoryRevert = (
 
   /** 数据源 update 步骤回滚时，对应数据源必须仍存在（已删除则无处写回旧值）。 */
   const isDataSourceRevertTargetMissing = (id: string | number, index: number): boolean => {
-    const step = historyService.getStepList('dataSource', id)[index]?.step;
-    return Boolean(step?.opType === 'update' && !dataSourceService.getDataSourceById(`${id}`));
+    const step = services?.historyService.getStepList('dataSource', id)[index]?.step;
+    return Boolean(step?.opType === 'update' && !services?.dataSourceService.getDataSourceById(`${id}`));
   };
 
   /** 代码块 update 步骤回滚时，对应代码块必须仍存在（已删除则无处写回旧值）。 */
   const isCodeBlockRevertTargetMissing = (id: string | number, index: number): boolean => {
-    const step = historyService.getStepList('codeBlock', id)[index]?.step;
-    return Boolean(step?.opType === 'update' && !codeBlockService.getCodeContentById(id));
+    const step = services?.historyService.getStepList('codeBlock', id)[index]?.step;
+    return Boolean(step?.opType === 'update' && !services?.codeBlockService.getCodeContentById(id));
   };
 
   const onPageRevert = (index: number) => {
@@ -300,8 +301,8 @@ export const useHistoryRevert = (
       showRevertTargetMissing();
       return Promise.resolve(null);
     }
-    return runRevert(buildPageDiffPayload(index)).then((result) =>
-      result ? editorService.revertPageStep(index) : null,
+    return runRevert(buildPageDiffPayload(index), {}).then((result) =>
+      result ? services?.editorService.revertPageStep(index) : null,
     );
   };
 
@@ -311,7 +312,7 @@ export const useHistoryRevert = (
       return Promise.resolve(null);
     }
     return runRevert(buildDataSourceDiffPayload(id, index)).then((result) =>
-      result ? dataSourceService.revert(id, index) : null,
+      result ? services?.dataSourceService.revert(id, index) : null,
     );
   };
 
@@ -321,7 +322,7 @@ export const useHistoryRevert = (
       return Promise.resolve(null);
     }
     return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) =>
-      result ? codeBlockService.revert(id, index) : null,
+      result ? services?.codeBlockService.revert(id, index) : null,
     );
   };
 
@@ -331,17 +332,23 @@ export const useHistoryRevert = (
    */
   const onPageDiff = (index: number): Promise<void> | void => {
     const payload = buildPageDiffPayload(index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services });
+    if (payload) {
+      return viewHistoryDiffDialog(payload, {
+        appContext,
+        services,
+        width: dialogWidth,
+      });
+    }
   };
 
   const onDataSourceDiff = (id: string | number, index: number): Promise<void> | void => {
     const payload = buildDataSourceDiffPayload(id, index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services });
+    if (payload) return viewHistoryDiffDialog(payload, { appContext, services, width: dialogWidth });
   };
 
   const onCodeBlockDiff = (id: string | number, index: number): Promise<void> | void => {
     const payload = buildCodeBlockDiffPayload(id, index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services });
+    if (payload) return viewHistoryDiffDialog(payload, { appContext, services, width: dialogWidth });
   };
 
   /**
@@ -368,6 +375,8 @@ export const useHistoryRevert = (
     const confirmed = await runRevert(revertOptions.diffPayload ?? null, {
       loadConfig: revertOptions.loadConfig,
       selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
+      width: revertOptions.width,
+      size: revertOptions.size,
     });
     if (!confirmed) return null;
     return await revertOptions.revert();
@@ -378,7 +387,14 @@ export const useHistoryRevert = (
    * 可透传 `loadConfig` / `selfDiffFieldTypes`。payload 为 null（不可对比）时静默返回。
    */
   const viewDiff = (payload: DiffDialogPayload | null, extra?: CustomDiffFormOptions): Promise<void> | void => {
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services, ...extra });
+    if (payload)
+      return viewHistoryDiffDialog(payload, {
+        appContext,
+        services,
+        ...extra,
+        width: extra?.width ?? dialogWidth,
+        size: extra?.size,
+      });
   };
 
   return {

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

@@ -12,7 +12,9 @@
         :size="propsPanelSize"
         :init-values="values"
         :config="config"
-        :extend-state="extendState"
+        :type-match-valid="true"
+        :context="formContext"
+        :validate-on-init="true"
         @change="submit"
         @error="errorHandler"
       ></MForm>
@@ -43,15 +45,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
-import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from '@tmagic/form';
-import { MForm } from '@tmagic/form';
+import { TMagicButton, tMagicMessage, TMagicScrollbar } from '@tmagic/design';
+import type { ContainerChangeEventData, FormConfig, FormValue } from '@tmagic/form';
+import { MForm, validateForm } from '@tmagic/form';
+import { filterXSS } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
+import { ENABLE_PROPS_FORM_VALIDATE } from '@editor/editorProps';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useEditorFormContext } from '@editor/hooks/use-form-context';
 import { useServices } from '@editor/hooks/use-services';
 
 import CodeEditor from '../CodeEditor.vue';
@@ -70,36 +75,31 @@ const props = defineProps<{
   disabledShowSrc?: boolean;
   labelWidth?: string;
   codeValueKey?: string;
-  labelPosition?: string;
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  labelPosition?: 'top' | 'left' | 'right';
 }>();
 
 const emit = defineEmits<{
-  submit: [values: any, eventData?: ContainerChangeEventData];
+  submit: [values: any, eventData?: ContainerChangeEventData, error?: any];
   'submit-error': [e: any];
   'form-error': [e: any];
   mounted: [internalInstance: any];
   unmounted: [];
 }>();
 
+const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+
 const services = useServices();
-const { editorService, uiService } = services;
+const { uiService } = services;
 
 const codeOptions = inject('codeOptions', {});
 
 const showSrc = ref(false);
 const propsPanelSize = computed(() => uiService.get('propsPanelSize') || 'small');
 const { height: editorContentHeight } = useEditorContentHeight();
-const stage = computed(() => editorService.get('stage'));
 
-const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
+const formContext = useEditorFormContext(() => services);
 
-watchEffect(() => {
-  if (configFormRef.value) {
-    configFormRef.value.formState.stage = stage.value;
-    configFormRef.value.formState.services = services;
-  }
-});
+const configFormRef = useTemplateRef<InstanceType<typeof MForm>>('configForm');
 
 const internalInstance = getCurrentInstance();
 onMounted(() => {
@@ -113,9 +113,16 @@ onUnmounted(() => {
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const values = await configFormRef.value?.submitForm();
+    // 校验成功：正常更新节点（第三个参数 error 为空，表示清除该来源的错误记录）
     emit('submit', values, eventData);
   } catch (e: any) {
-    emit('submit-error', e);
+    if (enablePropsFormValidate) {
+      // 启用校验联动：校验失败时仍以当前表单值更新节点，并把错误信息一并抛给上层记录
+      emit('submit', v, eventData, e);
+    } else {
+      // 未启用：保持原行为，校验失败丢弃本次改动
+      emit('submit-error', e);
+    }
   }
 };
 
@@ -123,8 +130,56 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
-const saveCode = (values: any) => {
-  emit('submit', props.codeValueKey ? { [props.codeValueKey]: values } : values);
+/**
+ * 将校验错误文案安全地转为用于弹窗展示的 HTML。
+ *
+ * 文案形如 `字段 -> 主文案\n\n建议`，多条以结构性 `<br>` 拼接。为在保留换行排版的同时
+ * 避免 `${value}`/字段名中可能夹带的 HTML 造成 XSS：先按结构性 `<br>` 拆分，对每段做 HTML
+ * 转义后再把段内换行 `\n` 替换为 `<br>`，最后用 `<br>` 拼回。
+ */
+const formatValidateErrorHtml = (error: string): string =>
+  error
+    .split(/<br\s*\/?>/i)
+    .map((segment) => filterXSS(segment).replaceAll('\n', '<br>'))
+    .join('<br>');
+
+const saveCode = async (values: any) => {
+  const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
+
+  if (!enablePropsFormValidate) {
+    // 未启用校验联动：保持原行为，直接提交源码保存的值
+    emit('submit', newValues);
+    return;
+  }
+
+  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里对最新配置做一次无渲染的静默校验
+  // （不挂载任何组件，也不影响页面上正在展示的表单），并将校验结果（错误信息）随提交
+  // 一并抛给上层记录，使源码保存的错误状态与表单编辑保持一致。
+  //
+  // 配置里的 display / rules 回调会从 formState 上读 services，因此必须带上 context。
+  try {
+    const error = await validateForm({
+      config: props.config,
+      typeMatchValid: true,
+      initValues: newValues,
+      context: formContext.value,
+    });
+
+    if (error) {
+      tMagicMessage({
+        type: 'error',
+        message: formatValidateErrorHtml(error),
+        dangerouslyUseHTMLString: true,
+      });
+    }
+
+    emit('submit', newValues, undefined, error ? new Error(error) : undefined);
+  } catch (e: any) {
+    console.error('validateForm error', e);
+    // 嵌套配置 / initValue 等机制故障不得当成「校验通过」，
+    // 把 error 交给上层记录，同时仍提交源码，避免阻塞保存。
+    emit('submit', newValues, undefined, e instanceof Error ? e : new Error(String(e)));
+  }
 };
 
 defineExpose({ configForm: configFormRef, submit });

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

@@ -8,8 +8,7 @@
       :config="curFormConfig"
       :values="values"
       :disabledShowSrc="disabledShowSrc"
-      :extendState="extendState"
-      @submit="submit"
+      @submit="(v, eventData, error) => submit(v, eventData, error, 'props')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
       @mounted="mountedHandler"
@@ -26,8 +25,7 @@
       :config="styleFormConfig"
       :values="values"
       :disabledShowSrc="disabledShowSrc"
-      :extendState="extendState"
-      @submit="submit"
+      @submit="(v, eventData, error) => submit(v, eventData, error, 'style')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
     >
@@ -55,20 +53,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
 import { type MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
 import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import Resizer from '@editor/components/Resizer.vue';
+import { ENABLE_PROPS_FORM_VALIDATE } from '@editor/editorProps';
 import { useServices } from '@editor/hooks/use-services';
 import { Protocol } from '@editor/services/storage';
-import type { PropsPanelSlots } from '@editor/type';
+import type { NodeInvalidSource, PropsPanelSlots } from '@editor/type';
 import { styleTabConfig } from '@editor/utils';
 import { PROPS_PANEL_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
@@ -83,7 +82,6 @@ defineOptions({
 
 defineProps<{
   disabledShowSrc?: boolean;
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
 const emit = defineEmits<{
@@ -95,6 +93,8 @@ const emit = defineEmits<{
 
 const { editorService, uiService, propsService, storageService } = useServices();
 
+const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+
 const values = ref<FormValue>({});
 // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
 const curFormConfig = ref<any>([]);
@@ -108,14 +108,31 @@ const styleFormConfig = [
   },
 ];
 
+// 用单调递增序号标记每次 init 调用，只让"最新一次"的 await 结果落到 ref 上。
+// 避免节点快速切换时多个 init 并发 + 解析顺序错乱导致 stale config 覆盖最新选中节点，
+// 以及组件已卸载 / FormPanel 正在 remount 的中间态下写 ref 触发 Vue setRef 把 __vnode
+// 设到 null 上的报错（TypeError: Cannot set properties of null (setting '__vnode')）。
+let initSeq = 0;
+let mounted = true;
+
 const init = async () => {
+  initSeq += 1;
+  const seq = initSeq;
+
   if (!node.value) {
+    if (seq !== initSeq || !mounted) return;
     curFormConfig.value = [];
     return;
   }
 
   const type = node.value.type || (node.value.items ? 'container' : 'text');
-  curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
+  const config = await propsService.getPropsConfig(type, { node: node.value });
+
+  // 期间被新一次 init 取代 / 组件已卸载，丢弃本次结果
+  if (seq !== initSeq || !mounted) return;
+  if (!node.value) return;
+
+  curFormConfig.value = config;
   values.value = node.value;
 };
 
@@ -123,39 +140,73 @@ watchEffect(init);
 propsService.on('props-configs-change', init);
 
 onBeforeUnmount(() => {
+  mounted = false;
   propsService.off('props-configs-change', init);
 });
 
-const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
+const submit = async (
+  v: MNode,
+  eventData?: ContainerChangeEventData,
+  error?: any,
+  source: NodeInvalidSource = 'props',
+) => {
   try {
     if (!v.id) {
       v.id = values.value.id;
     }
 
-    const newValue: MNode = {
-      ...v,
-      style: {},
-    };
-
-    if (v.style) {
-      Object.entries(v.style).forEach(([key, value]) => {
-        if (value !== '' && newValue.style) {
-          newValue.style[key] = value;
-        }
-      });
-
-      eventData?.changeRecords?.forEach((record) => {
-        if (record.propPath?.startsWith('style') && record.value === '') {
-          setValueByKeyPath(record.propPath, record.value, newValue);
-        }
-      });
-    }
-
     // 区分操作途径：表单字段编辑（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]) => {
+          if (value !== '' && newValue.style) {
+            newValue.style[key] = value;
+          }
+        });
+
+        eventData?.changeRecords?.forEach((record) => {
+          if (record.propPath?.startsWith('style') && record.value === '') {
+            setValueByKeyPath(record.propPath, record.value, newValue);
+          }
+        });
+      }
+    }
 
-    editorService.update(newValue, { changeRecords: eventData?.changeRecords, historySource });
+    editorService.update(newValue, {
+      changeRecords: eventData?.changeRecords,
+      historySource,
+      replace,
+      // 启用校验联动时，仅校验失败（error 存在）才把错误信息随更新传入 editorService 记录；
+      // 其余情况（含表单校验成功、CodeEditor 源码保存）不携带 invalidInfo，由 editorService 在执行 update 时统一清除该节点错误。
+      ...(enablePropsFormValidate && error ? { invalidInfo: { id: newValue.id, source, error: error?.message } } : {}),
+    });
   } catch (e: any) {
     emit('submit-error', e);
   }

package/src/layouts/props-panel/use-style-panel.ts

@@ -2,7 +2,7 @@ import { computed, type Ref, watch } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
-import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
+import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 export const useStylePanel = (
   { uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>,
@@ -47,8 +47,9 @@ export const useStylePanel = (
     }
 
     if (columnWidth.center < 0) {
-      columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH;
-      columnWidth.center = MIN_CENTER_COLUMN_WIDTH;
+      const minCenterColumnWidth = uiService.get('minCenterColumnWidth');
+      columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+      columnWidth.center = minCenterColumnWidth;
 
       propsPanelWidth.value = columnWidth.right / 2;
     }

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()),
+    ),
   })),
 );
 
@@ -145,6 +149,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.delayedMarkContainer(e);
+  timeout = stage.value.delayedMarkContainer(e, [], true);
 };
 </script>