@tmagic/editor 1.4.6 → 1.4.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.6",
+  "version": "1.4.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -50,8 +50,8 @@
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "@tmagic/dep": "1.4.6",
-    "@tmagic/table": "1.4.6"
+    "@tmagic/dep": "1.4.7",
+    "@tmagic/table": "1.4.7"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -72,12 +72,12 @@
     "monaco-editor": "^0.48.0",
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/form": "1.4.6",
-    "@tmagic/schema": "1.4.6",
-    "@tmagic/design": "1.4.6",
-    "@tmagic/core": "1.4.6",
-    "@tmagic/utils": "1.4.6",
-    "@tmagic/stage": "1.4.6"
+    "@tmagic/core": "1.4.7",
+    "@tmagic/design": "1.4.7",
+    "@tmagic/form": "1.4.7",
+    "@tmagic/schema": "1.4.7",
+    "@tmagic/stage": "1.4.7",
+    "@tmagic/utils": "1.4.7"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/TreeNode.vue

@@ -114,7 +114,9 @@ const selected = computed(() => nodeStatus.value.selected);
 const visible = computed(() => nodeStatus.value.visible);
 const draggable = computed(() => nodeStatus.value.draggable);
 
-const hasChildren = computed(() => props.data.items?.some((item) => props.nodeStatusMap.get(item.id)?.visible));
+const hasChildren = computed(
+  () => Array.isArray(props.data.items) && props.data.items.some((item) => props.nodeStatusMap.get(item.id)?.visible),
+);
 
 const handleDragStart = (event: DragEvent) => {
   treeEmit?.('node-dragstart', event, props.data);

package/src/editorProps.ts

@@ -1,5 +1,4 @@
 import type { EventOption } from '@tmagic/core';
-import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
@@ -70,12 +69,6 @@ export interface EditorProps {
   codeOptions?: { [key: string]: any };
   /** 禁用鼠标左键按下时就开始拖拽，需要先选中再可以拖拽 */
   disabledDragStart?: boolean;
-  /** 自定义依赖收集器，复制组件时会将关联组件一并复制 */
-  collectorOptions?: CustomTargetOptions;
-  /** 自定义依赖收集器，复制组件时会将关联代码块一并复制 */
-  collectorOptionsForCode?: CustomTargetOptions;
-  /** 自定义依赖收集器，复制组件时会将关联数据源一并复制 */
-  collectorOptionsForDataSource?: CustomTargetOptions;
   /** 标尺配置 */
   guidesOptions?: Partial<GuidesOptions>;
   /** 禁止多选 */

package/src/fields/DataSourceInput.vue

@@ -54,6 +54,7 @@ import { Coin } from '@element-plus/icons-vue';
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
+import { isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
@@ -209,7 +210,7 @@ const fieldQuerySearch = (
   const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
 
   // 可能是xx.xx.xx，存在链式调用
-  const keys = dsKey.split('.');
+  const keys = dsKey.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
 
   // 最前的是数据源id
   const dsId = keys.shift();
@@ -224,6 +225,11 @@ const fieldQuerySearch = (
   // 后面这些是字段
   let key = keys.shift();
   while (key) {
+    if (isNumber(key)) {
+      key = keys.shift();
+      continue;
+    }
+
     for (const field of fields) {
       if (field.name === key) {
         fields = field.fields || [];

package/src/fields/EventSelect.vue

@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <MContainer
+          <MFormContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></MContainer>
+          ></MFormContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -55,13 +55,13 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, FieldProps, FormState, PanelConfig } from '@tmagic/form';
-import { MContainer, MPanel } from '@tmagic/form';
-import { ActionType } from '@tmagic/schema';
+import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
+import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields } from '@editor/utils';
+import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -80,13 +80,20 @@ const codeBlockService = services?.codeBlockService;
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
-  const fieldType = props.config.src === 'component' ? 'select' : 'cascader';
-  const defaultEventNameConfig = {
+  const defaultEventNameConfig: ChildConfig = {
     name: 'name',
     text: '事件',
-    type: fieldType,
+    type: (mForm, { formValue }: any) => {
+      if (
+        props.config.src !== 'component' ||
+        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
+      ) {
+        return 'cascader';
+      }
+      return 'select';
+    },
     labelWidth: '40px',
-    checkStrictly: true,
+    checkStrictly: () => props.config.src !== 'component',
     valueSeparator: '.',
     options: (mForm: FormState, { formValue }: any) => {
       let events: EventOption[] | CascaderOption[] = [];
@@ -95,11 +102,39 @@ const eventNameConfig = computed(() => {
 
       if (props.config.src === 'component') {
         events = eventsService.getEvent(formValue.type);
+
+        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+          const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+          if (pageFragment) {
+            events = [
+              {
+                label: pageFragment.name || '迭代器容器',
+                value: pageFragment.id,
+                children: events,
+              },
+            ];
+            pageFragment.items.forEach((node) => {
+              traverseNode<MComponent | MContainer>(node, (node) => {
+                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
+
+                events.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeEvents,
+                });
+              });
+            });
+
+            return events;
+          }
+        }
+
         return events.map((option) => ({
           text: option.label,
           value: option.value,
         }));
       }
+
       if (props.config.src === 'datasource') {
         // 从数据源类型中获取到相关事件
         events = dataSourceService.getFormEvent(formValue.type);
@@ -163,24 +198,63 @@ const targetCompConfig = computed(() => {
     text: '联动组件',
     type: 'ui-select',
     display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    onChange: (MForm: FormState, v: string, { model }: any) => {
+      model.method = '';
+      return v;
+    },
   };
   return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
 });
 
 // 联动组件动作配置
 const compActionConfig = computed(() => {
-  const defaultCompActionConfig = {
+  const defaultCompActionConfig: ChildConfig = {
     name: 'method',
     text: '动作',
-    type: 'select',
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
+    type: (mForm, { model }: any) => {
+      const to = editorService?.getNodeById(model.to);
+
+      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
+        return 'cascader';
+      }
+
+      return 'select';
+    },
+    checkStrictly: () => props.config.src !== 'component',
+    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
     options: (mForm: FormState, { model }: any) => {
       const node = editorService?.getNodeById(model.to);
       if (!node?.type) return [];
 
-      return eventsService?.getMethod(node.type).map((option: any) => ({
-        text: option.label,
-        value: option.value,
+      let methods: EventOption[] | CascaderOption[] = [];
+
+      methods = eventsService?.getMethod(node.type) || [];
+
+      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+        const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+        if (pageFragment) {
+          methods = [];
+          pageFragment.items.forEach((node: MComponent | MContainer) => {
+            traverseNode<MComponent | MContainer>(node, (node) => {
+              const nodeMethods = (node.type && eventsService?.getMethod(node.type)) || [];
+
+              if (nodeMethods.length) {
+                methods.push({
+                  label: `${node.name}_${node.id}`,
+                  value: `${node.id}`,
+                  children: nodeMethods,
+                });
+              }
+            });
+          });
+
+          return methods;
+        }
+      }
+
+      return methods.map((method) => ({
+        text: method.label,
+        value: method.value,
       }));
     },
   };

package/src/initService.ts

@@ -7,12 +7,11 @@ import {
   createDataSourceCondTarget,
   createDataSourceMethodTarget,
   createDataSourceTarget,
-  createRelatedTargetForCopy,
   DepTargetType,
   Target,
 } from '@tmagic/dep';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
-import { getNodes } from '@tmagic/utils';
+import { getNodes, isPage } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { EditorProps } from './editorProps';
@@ -268,17 +267,12 @@ export const initServiceEvents = (
     }
   };
 
-  const depUpdateHandler = (node: MNode) => {
-    updateNodeWhenDataSourceChange([node]);
-  };
-
   const collectedHandler = (nodes: MNode[]) => {
     updateNodeWhenDataSourceChange(nodes);
   };
 
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
-  depService.on('dep-update', depUpdateHandler);
   depService.on('collected', collectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
@@ -307,7 +301,9 @@ export const initServiceEvents = (
     });
 
     if (Array.isArray(value.items)) {
-      depService.collect(value.items, true);
+      value.items.forEach((page) => {
+        depService.collectIdle([page], { pageId: page.id }, true);
+      });
     } else {
       depService.clear();
       delete value.dataSourceDeps;
@@ -334,14 +330,28 @@ export const initServiceEvents = (
     }
   };
 
+  const collectIdle = (nodes: MNode[], deep: boolean) => {
+    nodes.forEach((node) => {
+      let pageId: Id | undefined;
+
+      if (isPage(node)) {
+        pageId = node.id;
+      } else {
+        const info = editorService.getNodeInfo(node.id);
+        pageId = info.page?.id;
+      }
+      depService.collectIdle([node], { pageId }, deep);
+    });
+  };
+
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
-    depService.collect(nodes);
+    collectIdle(nodes, true);
   };
 
   // 节点更新，收集依赖
   const nodeUpdateHandler = (nodes: MNode[]) => {
-    depService.collect(nodes);
+    collectIdle(nodes, false);
   };
 
   // 节点删除，清除对齐的依赖收集
@@ -351,7 +361,7 @@ export const initServiceEvents = (
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    depService.collect([page], true);
+    depService.collectIdle([page], { pageId: page.id }, true);
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -386,7 +396,9 @@ export const initServiceEvents = (
     removeDataSourceTarget(config.id);
     initDataSourceDepTarget(config);
 
-    depService.collect(root?.items || [], true);
+    (root?.items || []).forEach((page) => {
+      depService.collectIdle([page], { pageId: page.id }, true);
+    });
 
     const targets = depService.getTargets(DepTargetType.DATA_SOURCE);
 
@@ -410,25 +422,9 @@ export const initServiceEvents = (
   dataSourceService.on('update', dataSourceUpdateHandler);
   dataSourceService.on('remove', dataSourceRemoveHandler);
 
-  // 初始化复制组件相关的依赖收集器
-  if (props.collectorOptions && !depService.hasTarget(DepTargetType.RELATED_COMP_WHEN_COPY)) {
-    depService.addTarget(createRelatedTargetForCopy(props.collectorOptions, DepTargetType.RELATED_COMP_WHEN_COPY));
-  }
-  if (props.collectorOptionsForCode && !depService.hasTarget(DepTargetType.RELATED_CODE_WHEN_COPY)) {
-    depService.addTarget(
-      createRelatedTargetForCopy(props.collectorOptionsForCode, DepTargetType.RELATED_CODE_WHEN_COPY),
-    );
-  }
-  if (props.collectorOptionsForDataSource && !depService.hasTarget(DepTargetType.RELATED_DS_WHEN_COPY)) {
-    depService.addTarget(
-      createRelatedTargetForCopy(props.collectorOptionsForDataSource, DepTargetType.RELATED_DS_WHEN_COPY),
-    );
-  }
-
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
-    depService.off('dep-update', depUpdateHandler);
     depService.off('collected', collectedHandler);
 
     editorService.off('history-change', historyChangeHandler);

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

@@ -58,26 +58,44 @@ const { codeBlockService, depService, editorService } = services || {};
 
 // 代码块列表
 const codeList = computed<TreeNodeData[]>(() =>
-  Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
+  Object.entries(codeBlockService?.getCodeDsl() || {}).map(([codeId, code]) => {
+    const target = depService?.getTarget(codeId, DepTargetType.CODE_BLOCK);
+
+    // 按页面分类显示
+    const pageList: TreeNodeData[] =
+      editorService?.get('root')?.items.map((page) => ({
+        name: page.devconfig?.tabName || page.name,
+        type: 'node',
+        id: `${codeId}_${page.id}`,
+        key: page.id,
+        items: [],
+      })) || [];
+
     // 组件节点
-    const compNodes: TreeNodeData[] = Object.entries(target.deps).map(([id, dep]) => ({
-      name: dep.name,
-      type: 'node',
-      id: `${target.id}_${id}`,
-      key: id,
-      items: dep.keys.map((key) => {
-        const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
-        return data;
-      }),
-    }));
+    if (target) {
+      Object.entries(target.deps).forEach(([id, dep]) => {
+        const page = pageList.find((page) => page.key === dep.data?.pageId);
+        page?.items?.push({
+          name: dep.name,
+          type: 'node',
+          id: `${page.id}_${id}`,
+          key: id,
+          items: dep.keys.map((key) => {
+            const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
+            return data;
+          }),
+        });
+      });
+    }
 
     const data: TreeNodeData = {
-      id: target.id,
-      key: target.id,
-      name: target.name,
+      id: codeId,
+      key: codeId,
+      name: code.name,
       type: 'code',
-      codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-      items: compNodes,
+      codeBlockContent: codeBlockService?.getCodeContentById(codeId),
+      // 只有一个页面不显示页面分类
+      items: pageList.length > 1 ? pageList.filter((page) => page.items?.length) : pageList[0]?.items || [],
     };
 
     return data;

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

@@ -81,16 +81,19 @@ const getNodeTreeConfig = (id: string, dep: DepData[string], type?: string, pare
  * @param deps 依赖
  * @param type 依赖类型
  */
-const mergeChildren = (dsId: Id, items: any[], deps: DepData, type?: string) => {
+const mergeChildren = (dsId: Id, pageItems: any[], deps: DepData, type?: string) => {
   Object.entries(deps).forEach(([id, dep]) => {
+    // 按页面分类显示
+    const page = pageItems.find((page) => page.key === dep.data?.pageId);
+
     // 已经生成过的节点
-    const nodeItem = items.find((item) => item.key === id);
+    const nodeItem = page?.items.find((item: any) => item.key === id);
     // 节点存在，则追加依赖的key
     if (nodeItem) {
       nodeItem.items = nodeItem.items.concat(getKeyTreeConfig(dep, type, nodeItem.key));
     } else {
       // 节点不存在，则生成
-      items.push(getNodeTreeConfig(id, dep, type, dsId));
+      page?.items.push(getNodeTreeConfig(id, dep, type, page.id));
     }
   });
 };
@@ -101,7 +104,15 @@ const list = computed(() =>
     const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
     const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
 
-    const items: any[] = [];
+    const items =
+      editorService?.get('root')?.items.map((page) => ({
+        name: page.devconfig?.tabName || page.name,
+        type: 'node',
+        id: `${ds.id}_${page.id}`,
+        key: page.id,
+        items: [],
+      })) || [];
+
     // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示
     mergeChildren(ds.id, items, dsDeps);
     mergeChildren(ds.id, items, dsMethodDeps, 'method');
@@ -112,7 +123,8 @@ const list = computed(() =>
       key: ds.id,
       name: ds.title,
       type: 'ds',
-      items,
+      // 只有一个页面不显示页面分类
+      items: items.length > 1 ? items.filter((page) => page.items.length) : items[0]?.items || [],
     };
   }),
 );

package/src/services/codeBlock.ts

@@ -20,11 +20,10 @@ import { reactive } from 'vue';
 import { cloneDeep, get, keys, pick } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import { DepTargetType } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { ColumnConfig } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MNode } from '@tmagic/schema';
 
-import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
 import storageService, { Protocol } from '@editor/services/storage';
 import type { AsyncHookPlugin, CodeState } from '@editor/type';
@@ -258,17 +257,21 @@ class CodeBlock extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  public copyWithRelated(config: MNode | MNode[]): void {
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
-    // 关联的代码块也一并复制
-    depService.clearByType(DepTargetType.RELATED_CODE_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_CODE_WHEN_COPY);
-    const customTarget = depService.getTarget(
-      DepTargetType.RELATED_CODE_WHEN_COPY,
-      DepTargetType.RELATED_CODE_WHEN_COPY,
-    );
     const copyData: CodeBlockDSL = {};
-    if (customTarget) {
+
+    if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
+      const customTarget = new Target({
+        ...collectorOptions,
+      });
+
+      const coperWatcher = new Watcher();
+
+      coperWatcher.addTarget(customTarget);
+
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+
       Object.keys(customTarget.deps).forEach((nodeId: Id) => {
         const node = editorService.getNodeById(nodeId);
         if (!node) return;

package/src/services/dataSource.ts

@@ -3,12 +3,11 @@ import { cloneDeep, get } from 'lodash-es';
 import { Writable } from 'type-fest';
 
 import type { EventOption } from '@tmagic/core';
-import { DepTargetType } from '@tmagic/dep';
+import { Target, type TargetOptions, Watcher } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema, Id, MNode } from '@tmagic/schema';
 import { guid, toLine } from '@tmagic/utils';
 
-import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
 import storageService, { Protocol } from '@editor/services/storage';
 import type { DatasourceTypeOption, SyncHookPlugin } from '@editor/type';
@@ -163,13 +162,21 @@ class DataSource extends BaseService {
    * @param config 组件节点配置
    * @returns
    */
-  public copyWithRelated(config: MNode | MNode[]): void {
+  public copyWithRelated(config: MNode | MNode[], collectorOptions?: TargetOptions): void {
     const copyNodes: MNode[] = Array.isArray(config) ? config : [config];
-    depService.clearByType(DepTargetType.RELATED_DS_WHEN_COPY);
-    depService.collect(copyNodes, true, DepTargetType.RELATED_DS_WHEN_COPY);
-    const customTarget = depService.getTarget(DepTargetType.RELATED_DS_WHEN_COPY, DepTargetType.RELATED_DS_WHEN_COPY);
     const copyData: DataSourceSchema[] = [];
-    if (customTarget) {
+
+    if (collectorOptions && typeof collectorOptions.isTarget === 'function') {
+      const customTarget = new Target({
+        ...collectorOptions,
+      });
+
+      const coperWatcher = new Watcher();
+
+      coperWatcher.addTarget(customTarget);
+
+      coperWatcher.collect(copyNodes, {}, true, collectorOptions.type);
+
       Object.keys(customTarget.deps).forEach((nodeId: Id) => {
         const node = editorService.getNodeById(nodeId);
         if (!node) return;