@tmagic/editor 1.8.0-beta.10 → 1.8.0-beta.12

package/src/layouts/Framework.vue

@@ -25,9 +25,9 @@
       right-class="m-editor-framework-right"
       :left="hideSidebar ? undefined : columnWidth.left"
       :right="columnWidth.right"
-      :min-left="hideSidebar ? 0 : MIN_LEFT_COLUMN_WIDTH"
-      :min-right="MIN_RIGHT_COLUMN_WIDTH"
-      :min-center="MIN_CENTER_COLUMN_WIDTH"
+      :min-left="hideSidebar ? 0 : minLeftColumnWidth"
+      :min-right="minRightColumnWidth"
+      :min-center="minCenterColumnWidth"
       :width="frameworkRect.width"
       @change="columnWidthChange"
     >
@@ -78,9 +78,6 @@ import { getEditorConfig } from '@editor/utils/config';
 import {
   DEFAULT_LEFT_COLUMN_WIDTH,
   LEFT_COLUMN_WIDTH_STORAGE_KEY,
-  MIN_CENTER_COLUMN_WIDTH,
-  MIN_LEFT_COLUMN_WIDTH,
-  MIN_RIGHT_COLUMN_WIDTH,
   RIGHT_COLUMN_WIDTH_STORAGE_KEY,
 } from '@editor/utils/const';
 
@@ -116,6 +113,10 @@ const showSrc = computed(() => uiService.get('showSrc'));
 
 const columnWidth = computed(() => uiService.get('columnWidth'));
 
+const minLeftColumnWidth = computed(() => uiService.get('minLeftColumnWidth'));
+const minCenterColumnWidth = computed(() => uiService.get('minCenterColumnWidth'));
+const minRightColumnWidth = computed(() => uiService.get('minRightColumnWidth'));
+
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
 });

package/src/layouts/history-list/HistoryDiffDialog.vue

@@ -48,6 +48,7 @@
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
         :services="props.services"
+        :size="props.size"
         height="70vh"
       />
 
@@ -77,7 +78,14 @@
 import { computed, ref, watch } from 'vue';
 import { isEqual } from 'lodash-es';
 
-import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
+import {
+  type FieldSize,
+  TMagicButton,
+  TMagicDialog,
+  TMagicRadioButton,
+  TMagicRadioGroup,
+  TMagicTag,
+} from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
 
 import CompareForm from '@editor/components/CompareForm.vue';
@@ -104,6 +112,8 @@ const props = withDefaults(
      */
     loadConfig?: CompareFormLoadConfig;
     width?: string;
+    /** 差异对比表单内组件的尺寸（透传给 CompareForm 的 `size`），可选 'large' | 'default' | 'small'。 */
+    size?: FieldSize;
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];
@@ -162,11 +172,19 @@ const hasCurrent = computed(() => payload.value?.currentValue !== undefined && p
 /** 是否存在该步「修改后的值」：不存在（如仅删除）时「与修改前对比」无意义，置灰禁用。 */
 const hasValue = computed(() => payload.value?.value !== undefined && payload.value?.value !== null);
 
+/** 指定模式当前是否可用：before 依赖「修改后的值」，current 依赖「当前值」。 */
+const isModeAvailable = (m: DiffMode): boolean => (m === 'current' ? hasCurrent.value : hasValue.value);
+
 /**
  * 计算 open 时的初始对比模式：
- * 没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；否则默认「与修改前对比」。
+ * - 调用方通过 payload.mode 指定且该模式可用时，优先使用指定模式；
+ * - 否则没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；
+ * - 其余情况默认「与修改前对比」。
  */
-const resolveInitialMode = (): DiffMode => (!hasValue.value && hasCurrent.value ? 'current' : 'before');
+const resolveInitialMode = (specified?: DiffMode): DiffMode => {
+  if (specified && isModeAvailable(specified)) return specified;
+  return !hasValue.value && hasCurrent.value ? 'current' : 'before';
+};
 
 /** 左侧（旧/参照）值 */
 const leftValue = computed<Record<string, any>>(() => {
@@ -222,8 +240,8 @@ const targetText = computed(() => {
 const open = (p: DiffDialogPayload) => {
   payload.value = p;
   // 每次打开按 payload 重置对比模式（hasValue / hasCurrent 依赖 payload，需先赋值）：
-  // 无「修改后的值」但有当前值时默认「与当前对比」，否则默认「与修改前对比」
-  mode.value = resolveInitialMode();
+  // 优先使用 payload.mode 指定的模式；不可用或未指定时按数据自动推断。
+  mode.value = resolveInitialMode(p.mode);
   // 默认回到表单对比形态，避免残留上一次选择的源码模式
   viewMode.value = 'form';
   visible.value = true;

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

@@ -94,6 +94,8 @@ const mountHistoryDiffDialog = async (
     loadConfig: options.loadConfig,
     selfDiffFieldTypes: options.selfDiffFieldTypes,
     compareFormState: options.compareFormState,
+    width: options.width,
+    size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
     onClose: options.onClose,
   });
   if (options.appContext) {
@@ -192,7 +194,7 @@ const viewHistoryDiffDialog = async (
 export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services?: Services) => {
   // 自动捕获调用方所在组件的 appContext（在 setup 中调用时），业务方亦可显式覆盖。
   const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-  const { extendState, getPropsPanelFormState } = options;
+  const { extendState, getPropsPanelFormState, dialogWidth } = options;
 
   /** 目标数据已被删除、无法回滚时的统一提示。 */
   const showRevertTargetMissing = () => {
@@ -216,7 +218,14 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
    */
   const runRevert = (payload: DiffDialogPayload | null, extra?: CustomDiffFormOptions): Promise<boolean> => {
     if (payload) {
-      return confirmRevertWithDiffDialog(payload, { appContext, extendState, services, ...extra });
+      return confirmRevertWithDiffDialog(payload, {
+        appContext,
+        extendState,
+        services,
+        ...extra,
+        width: extra?.width ?? dialogWidth,
+        size: extra?.size,
+      });
     }
     return confirmRevert();
   };
@@ -334,6 +343,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
         appContext,
         extendState,
         services,
+        width: dialogWidth,
         compareFormState: getPropsPanelFormState?.(),
       });
     }
@@ -341,12 +351,12 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
 
   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, extendState, 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, extendState, services, width: dialogWidth });
   };
 
   /**
@@ -373,6 +383,8 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     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();
@@ -383,7 +395,15 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
    * 可透传 `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,
+        extendState,
+        services,
+        ...extra,
+        width: extra?.width ?? dialogWidth,
+        size: extra?.size,
+      });
   };
 
   return {

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

@@ -12,6 +12,7 @@
         :size="propsPanelSize"
         :init-values="values"
         :config="config"
+        :type-match-valid="true"
         :extend-state="extendState"
         @change="submit"
         @error="errorHandler"
@@ -46,13 +47,16 @@
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicScrollbar } from '@tmagic/design';
 import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from '@tmagic/form';
 import { MForm } 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 { useServices } from '@editor/hooks/use-services';
+import { validatePropsForm } from '@editor/utils/props';
 
 import CodeEditor from '../CodeEditor.vue';
 
@@ -75,13 +79,15 @@ const props = defineProps<{
 }>();
 
 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;
 
@@ -113,9 +119,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 +136,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;
+  }
+
+  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里另建一个独立的 MForm 实例对最新配置
+  // 做一次静默校验（不复用、也不污染页面上正在展示的表单），并将校验结果（错误信息）随提交
+  // 一并抛给上层记录，使源码保存的错误状态与表单编辑保持一致。
+  try {
+    const error = await validatePropsForm({
+      config: props.config,
+      values: newValues,
+      appContext: internalInstance?.appContext ?? null,
+      services,
+      stage: stage.value,
+      typeMatchValid: true,
+      extendState: props.extendState,
+    });
+
+    if (error) {
+      tMagicMessage({
+        type: 'error',
+        message: formatValidateErrorHtml(error),
+        dangerouslyUseHTMLString: true,
+      });
+    }
+
+    emit('submit', newValues, undefined, error ? new Error(error) : undefined);
+  } catch (e: any) {
+    console.log('validateForm error', e);
+    // 静默校验本身出现异常（如初始化超时）时，退回到不携带错误信息的提交，避免阻塞源码保存
+    emit('submit', newValues);
+  }
 };
 
 defineExpose({ configForm: configFormRef, submit });

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

@@ -9,7 +9,7 @@
       :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"
@@ -27,7 +27,7 @@
       :values="values"
       :disabledShowSrc="disabledShowSrc"
       :extendState="extendState"
-      @submit="submit"
+      @submit="(v, eventData, error) => submit(v, eventData, error, 'style')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
     >
@@ -55,7 +55,7 @@
 </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';
 
@@ -66,9 +66,10 @@ 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';
 
@@ -95,6 +96,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>([]);
@@ -126,7 +129,12 @@ onBeforeUnmount(() => {
   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;
@@ -155,7 +163,13 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
     // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
     const historySource = eventData ? 'props' : 'code';
 
-    editorService.update(newValue, { changeRecords: eventData?.changeRecords, historySource });
+    editorService.update(newValue, {
+      changeRecords: eventData?.changeRecords,
+      historySource,
+      // 启用校验联动时，仅校验失败（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/Sidebar.vue

@@ -132,6 +132,7 @@
         v-model:height="columnLeftHeight"
         :width="columnLeftWidth"
         :title="config.text"
+        :framework-width="frameworkWidth"
         :position="{
           left: floatBoxStates[config.$key].left,
           top: floatBoxStates[config.$key].top,
@@ -221,6 +222,7 @@ const taskLength = computed(() => depService.get('taskLength'));
 const tipsBarVisible = ref(true);
 
 const columnLeftWidth = computed(() => uiService.get('columnWidth')[ColumnLayout.LEFT]);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 const { height: editorContentHeight } = useEditorContentHeight();
 const columnLeftHeight = ref(0);
 

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -121,8 +121,11 @@ const {
   nodeContentMenuHandler,
   menuData: contentMenuData,
   contentMenuHideHandler,
+  getTarget,
 } = useContentMenu((id: string) => {
   codeBlockListRef.value?.deleteCode(id, { historySource: 'tree-contextmenu' });
 });
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(contentMenuData, 'code-block', getTarget),
+);
 </script>

package/src/layouts/sidebar/code-block/useContentMenu.ts

@@ -3,13 +3,21 @@ import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
+import type { ContentMenuTarget, EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = (deleteCode: (id: string) => void) => {
   const eventBus = inject<EventBus>('eventBus');
   const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 
   let selectId = '';
+  let selectData: TreeNodeData | null = null;
+
+  const getTarget = (): ContentMenuTarget | null => {
+    if (!selectId) {
+      return null;
+    }
+    return { id: selectId, data: selectData ?? undefined };
+  };
 
   const menuData: (MenuButton | MenuComponent)[] = [
     {
@@ -65,19 +73,23 @@ export const useContentMenu = (deleteCode: (id: string) => void) => {
       menuRef.value?.show(event);
       if (data.id) {
         selectId = `${data.id}`;
+        selectData = data;
       } else {
         selectId = '';
+        selectData = null;
       }
     }
   };
 
   const contentMenuHideHandler = () => {
     selectId = '';
+    selectData = null;
   };
 
   return {
     menuData,
     nodeContentMenuHandler,
     contentMenuHideHandler,
+    getTarget,
   };
 };

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,9 +1,11 @@
 <template>
   <FloatingBox
+    :body-style="{ padding: '0 16px' }"
     v-model:visible="boxVisible"
     v-model:width="width"
     v-model:height="editorHeight"
     :title="title"
+    :framework-width="frameworkWidth"
     :position="boxPosition"
   >
     <template #body>
@@ -65,6 +67,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);
 
 /** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 provide(

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -171,8 +171,8 @@ eventBus?.on('remove-data-source', (id: string) => {
   removeHandler(id);
 });
 
-const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu();
+const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler, getTarget } = useContentMenu();
 const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
-  props.customContentMenu(contentMenuData, 'data-source'),
+  props.customContentMenu(contentMenuData, 'data-source', getTarget),
 );
 </script>

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -3,13 +3,21 @@ import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
+import type { ContentMenuTarget, EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = () => {
   const eventBus = inject<EventBus>('eventBus');
   const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 
   let selectId = '';
+  let selectData: TreeNodeData | null = null;
+
+  const getTarget = (): ContentMenuTarget | null => {
+    if (!selectId) {
+      return null;
+    }
+    return { id: selectId, data: selectData ?? undefined };
+  };
 
   const menuData: (MenuButton | MenuComponent)[] = [
     {
@@ -63,19 +71,23 @@ export const useContentMenu = () => {
       menuRef.value?.show(event);
       if (data.id) {
         selectId = `${data.id}`;
+        selectData = data;
       } else {
         selectId = '';
+        selectData = null;
       }
     }
   };
 
   const contentMenuHideHandler = () => {
     selectId = '';
+    selectData = null;
   };
 
   return {
     menuData,
     nodeContentMenuHandler,
     contentMenuHideHandler,
+    getTarget,
   };
 };

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

@@ -0,0 +1,57 @@
+<template>
+  <span class="m-editor-layer-node-content" :class="{ 'is-invalid': hasError }">
+    <span class="m-editor-layer-node-label">{{ label }}</span>
+    <TMagicTooltip v-if="hasError" placement="top">
+      <template #content>
+        <span v-html="errorMessage"></span>
+      </template>
+      <MIcon class="m-editor-layer-node-error-icon" :icon="WarningFilled"></MIcon>
+    </TMagicTooltip>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { WarningFilled } from '@element-plus/icons-vue';
+
+import { stripValidateSuggestion, TMagicTooltip } from '@tmagic/design';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useServices } from '@editor/hooks/use-services';
+import type { TreeNodeData } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorLayerNodeContent',
+});
+
+const props = defineProps<{
+  data: TreeNodeData;
+}>();
+
+const { editorService } = useServices();
+
+const label = computed(() => `${props.data.name} (${props.data.id})`);
+
+/** 读取集中存储的校验错误状态，建立响应式依赖 */
+const invalidInfo = computed(() => editorService.get('invalidNodeIds').get(props.data.id));
+
+const hasError = computed(() => Boolean(invalidInfo.value?.props || invalidInfo.value?.style));
+
+/**
+ * 去掉单条校验文案中的「修改建议」部分。
+ *
+ * 错误文案可能是多条错误以 `<br>` 拼接的 HTML，每条本身形如 `主文案\n\n建议`。
+ * 组件树 tooltip 仅展示错误描述，不展示修改建议（建议仅在错误汇总面板展示），
+ * 故先按 `<br>` 拆分，每段用 `stripValidateSuggestion` 截断建议后再拼回。
+ */
+const stripSuggestion = (text?: string): string =>
+  String(text ?? '')
+    .split(/<br\s*\/?>/i)
+    .map((segment) => stripValidateSuggestion(segment))
+    .join('<br>');
+
+/** 合并属性表单与样式表单的错误文案（去掉建议，本身可能仍是含 <br> 的 HTML） */
+const errorMessage = computed(() =>
+  [stripSuggestion(invalidInfo.value?.props), stripSuggestion(invalidInfo.value?.style)].filter(Boolean).join('<br>'),
+);
+</script>

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

@@ -33,7 +33,9 @@
       </template>
 
       <template #tree-node-label="{ data: nodeData }">
-        <slot name="layer-node-label" :data="nodeData"></slot>
+        <slot name="layer-node-label" :data="nodeData">
+          <LayerNodeContent :data="nodeData"></LayerNodeContent>
+        </slot>
       </template>
     </Tree>
 
@@ -69,6 +71,7 @@ import type {
 } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
+import LayerNodeContent from './LayerNodeContent.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
 import { useClick } from './use-click';
 import { useDrag } from './use-drag';

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -8,6 +8,7 @@
     ref="box"
     v-model:visible="visible"
     title="当前位置下的组件"
+    :framework-width="frameworkWidth"
     :position="menuPosition"
   >
     <template #body>
@@ -36,7 +37,9 @@ import { useNodeStatus } from '@editor/layouts/sidebar/layer/use-node-status';
 import type { TreeNodeData } from '@editor/type';
 
 const services = useServices();
-const { editorService } = services;
+const { editorService, uiService } = services;
+
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 const visible = ref(false);
 const buttonVisible = ref(false);