@tmagic/editor 1.8.0-manmanyu.8 → 1.8.0

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,
@@ -154,7 +155,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
-import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { Box, Close, Coin, EditPen, Finished } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -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);
 
@@ -251,7 +253,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     [SideItemKey.COMPONENT_LIST]: {
       $key: SideItemKey.COMPONENT_LIST,
       type: 'component',
-      icon: Goods,
+      icon: Box,
       text: '组件',
       component: ComponentListPanel,
       slots: {},
@@ -259,7 +261,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     layer: {
       $key: SideItemKey.LAYER,
       type: 'component',
-      icon: List,
+      icon: Finished,
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,

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

@@ -82,7 +82,7 @@ const props = defineProps<{
   customContentMenu: CustomContentMenuFunction;
 }>();
 
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 
 const { codeBlockService } = useServices();
 
@@ -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 eventBus = inject<EventBus | null>('eventBus', null);
   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

@@ -75,7 +75,7 @@ const props = defineProps<{
   customContentMenu: CustomContentMenuFunction;
 }>();
 
-const eventBus = inject<EventBus>('eventBus');
+const eventBus = inject<EventBus | null>('eventBus', null);
 const { dataSourceService } = useServices();
 
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
@@ -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 eventBus = inject<EventBus | null>('eventBus', null);
   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/LayerMenu.vue

@@ -6,7 +6,7 @@
 import { computed, markRaw, useTemplateRef } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { isPageOrFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -101,7 +101,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         type: 'button',
         text: '全部折叠',
         icon: FolderMinusIcon,
-        display: () => isPage(node.value) || isPageFragment(node.value),
+        display: () => isPageOrFragment(node.value),
         handler: () => {
           emit('collapse-all');
         },

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';
@@ -117,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/layouts/sidebar/layer/use-click.ts

@@ -2,7 +2,7 @@ import { computed, type ComputedRef, nextTick, type Ref, type ShallowRef } from
 import { throttle } from 'lodash-es';
 
 import { Id, MNode } from '@tmagic/core';
-import { getElById, isPage, isPageFragment } from '@tmagic/utils';
+import { getElById, isPageOrFragment } from '@tmagic/utils';
 
 import type { LayerNodeStatus, Services, TreeNodeData } from '@editor/type';
 import { UI_SELECT_MODE_EVENT_NAME } from '@editor/utils/const';
@@ -36,7 +36,7 @@ export const useClick = (
   };
 
   const multiSelect = async (data: MNode) => {
-    if (isPage(data) || isPageFragment(data)) {
+    if (isPageOrFragment(data)) {
       return;
     }
 
@@ -50,7 +50,7 @@ export const useClick = (
         return;
       }
 
-      if (isPage(node) || isPageFragment(node)) {
+      if (isPageOrFragment(node)) {
         return;
       }
 

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,7 +1,7 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
 import type { Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
+import { getNodePath, isPageOrFragment, traverseNode } from '@tmagic/utils';
 
 import type { LayerNodeStatus, Services } from '@editor/type';
 import { updateStatus } from '@editor/utils/tree';
@@ -136,7 +136,7 @@ export const useNodeStatus = ({ editorService }: Services) => {
 
   const addHandler = (newNodes: MNode[]) => {
     newNodes.forEach((node) => {
-      if (isPage(node) || isPageFragment(node)) return;
+      if (isPageOrFragment(node)) return;
 
       traverseNode(node, (node: MNode) => {
         nodeStatusMap.value?.set(node.id, {

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);

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

@@ -56,7 +56,14 @@ import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks';
 import { useStage } from '@editor/hooks/use-stage';
-import type { CustomContentMenuFunction, MenuButton, MenuComponent, StageOptions, StageSlots } from '@editor/type';
+import type {
+  AddMNode,
+  CustomContentMenuFunction,
+  MenuButton,
+  MenuComponent,
+  StageOptions,
+  StageSlots,
+} from '@editor/type';
 import { DragType, Layout } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
@@ -270,11 +277,56 @@ const resizeObserver = new globalThis.ResizeObserver((entries) => {
   }
 });
 
+const parseDSL = getEditorConfig('parseDSL');
+
+/**
+ * 本次拖拽是否由编辑器文档内部发起
+ *
+ * drop 的 text/json 里可能带函数（组件配置的事件、钩子等），还原只能交给 parseDSL，
+ * 而 parseDSL 的默认实现是 eval；HTML 拖放又允许其他源的页面在 DataTransfer 中投递
+ * 自定义 MIME 数据，跨源页面只要诱导用户拖拽一次，就能让 eval 执行任意脚本。
+ *
+ * 跨源页面既不会在本文档触发 dragstart，也无法往本文档创建的 DataTransfer 中写数据，
+ * 因此只有起源于本文档的拖拽才交给 parseDSL 还原。
+ * 同源拖拽源写入的 text/json 由业务保证可信。
+ */
+let isInternalDrag = false;
+let internalDragSession = 0;
+let clearInternalDragTimer: ReturnType<typeof setTimeout> | undefined;
+
+const documentDragStartHandler = () => {
+  internalDragSession += 1;
+  isInternalDrag = true;
+  if (clearInternalDragTimer !== undefined) {
+    globalThis.clearTimeout(clearInternalDragTimer);
+    clearInternalDragTimer = undefined;
+  }
+};
+
+const documentDragEndHandler = () => {
+  // WebKit 可能先 dragend 再 drop；推迟到下一个宏任务再清标志，
+  // 让同一次拖拽的 drop 仍能消费。session 防止误清掉下一次 dragstart。
+  const session = internalDragSession;
+  if (clearInternalDragTimer !== undefined) {
+    globalThis.clearTimeout(clearInternalDragTimer);
+  }
+  clearInternalDragTimer = globalThis.setTimeout(() => {
+    clearInternalDragTimer = undefined;
+    if (session === internalDragSession) {
+      isInternalDrag = false;
+    }
+  }, 0);
+};
+
 onMounted(() => {
   if (stageWrapRef.value?.container) {
     resizeObserver.observe(stageWrapRef.value.container);
     keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
   }
+
+  // 用捕获阶段监听，确保拖拽源自身的 dragstart 无论是否阻止冒泡都能被记录
+  globalThis.document.addEventListener('dragstart', documentDragStartHandler, true);
+  globalThis.document.addEventListener('dragend', documentDragEndHandler, true);
 });
 
 onBeforeUnmount(() => {
@@ -283,9 +335,15 @@ onBeforeUnmount(() => {
   resizeObserver.disconnect();
   editorService.set('stage', null);
   keybindingService.unregisterEl('stage');
-});
 
-const parseDSL = getEditorConfig('parseDSL');
+  if (clearInternalDragTimer !== undefined) {
+    globalThis.clearTimeout(clearInternalDragTimer);
+    clearInternalDragTimer = undefined;
+  }
+
+  globalThis.document.removeEventListener('dragstart', documentDragStartHandler, true);
+  globalThis.document.removeEventListener('dragend', documentDragEndHandler, true);
+});
 
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
@@ -299,15 +357,27 @@ const dragoverHandler = (e: DragEvent) => {
 };
 
 const dropHandler = async (e: DragEvent) => {
+  // 画布上的任意 drop 都消费本次内部拖拽标记（含空 text/json），避免残留到下一次 drop
+  const allowed = isInternalDrag;
+  isInternalDrag = false;
+
   if (!e.dataTransfer) return;
 
   const data = e.dataTransfer.getData('text/json');
 
-  if (!data) return;
+  // 外部源投递的拖拽数据不可信，不能交给 parseDSL(默认实现为 eval)
+  if (!data || !allowed) return;
+
+  let config: { dragType?: string; data?: AddMNode } | undefined;
+  try {
+    config = parseDSL(`(${data})`);
+  } catch {
+    return;
+  }
 
-  const config = parseDSL(`(${data})`);
+  if (!config || config.dragType !== DragType.COMPONENT_LIST || !config.data) return;
 
-  if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
+  const dragData = config.data;
 
   e.preventDefault();
 
@@ -349,7 +419,7 @@ const dropHandler = async (e: DragEvent) => {
 
     const containerRect = stageContainerEl.value.getBoundingClientRect();
     const { scrollTop, scrollLeft } = stage.mask!;
-    const { style = {} } = config.data;
+    const { style = {} } = dragData;
 
     let top = 0;
     let left = 0;
@@ -371,16 +441,16 @@ const dropHandler = async (e: DragEvent) => {
       }
     }
 
-    config.data.style = {
+    dragData.style = {
       ...style,
       position,
       top: calcValueByFontsize(doc, top / zoom.value),
       left: calcValueByFontsize(doc, left / zoom.value),
     };
 
-    config.data.inputEvent = e;
+    dragData.inputEvent = e;
 
-    editorService.add(config.data, parent, { historySource: 'component-panel' });
+    editorService.add(dragData, parent, { historySource: 'component-panel' });
   }
 };
 </script>

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

@@ -7,7 +7,7 @@ import { computed, markRaw, ref, useTemplateRef, watch } from 'vue';
 import { Bottom, Top } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { isPageOrFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -59,14 +59,14 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         direction: 'horizontal',
         display: () => {
           if (!node.value) return false;
-          return !isPage(node.value) && !isPageFragment(node.value);
+          return !isPageOrFragment(node.value);
         },
       },
       {
         type: 'button',
         text: '上移一层',
         icon: markRaw(Top),
-        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService.moveLayer(1, { historySource: 'stage-contextmenu' });
         },
@@ -75,7 +75,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         type: 'button',
         text: '下移一层',
         icon: markRaw(Bottom),
-        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService.moveLayer(-1, { historySource: 'stage-contextmenu' });
         },
@@ -84,7 +84,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         type: 'button',
         text: '置顶',
         icon: markRaw(Top),
-        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService.moveLayer(LayerOffset.TOP, { historySource: 'stage-contextmenu' });
         },
@@ -93,7 +93,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         type: 'button',
         text: '置底',
         icon: markRaw(Bottom),
-        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
         handler: () => {
           editorService.moveLayer(LayerOffset.BOTTOM, { historySource: 'stage-contextmenu' });
         },
@@ -102,7 +102,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
       {
         type: 'divider',
         direction: 'horizontal',
-        display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+        display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
       },
       useDeleteMenu('stage-contextmenu'),
       {