@tmagic/editor 1.8.0-manmanyu.8 → 1.8.0

package/src/utils/event.ts

@@ -0,0 +1,237 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { EventOption, Id, MComponent, MContainer, MNode } from '@tmagic/core';
+import type { CascaderOption } from '@tmagic/form';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
+
+import dataSourceService from '@editor/services/dataSource';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import { getCascaderOptionsFromFields } from '@editor/utils/data-source';
+
+export const EVENT_NAME_VALUE_SEPARATOR = '.';
+
+export type EventNameSelectOption = { text: string; value: string };
+export type EventNameOption = EventOption | CascaderOption | EventNameSelectOption;
+
+/** 与 EventSelect 中 checkStrictly 一致：component 为 false，其余为 true */
+export const isEventNameCheckStrictly = (src?: string) => src !== 'component';
+
+/** 将动作 method 值规范为与 collectEventNameOptionValues 一致的字符串（cascader 无 valueSeparator 时存数组） */
+export const normalizeCompActionValue = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+  }
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  return `${value}`;
+};
+
+/**
+ * 组装事件名称下拉/级联 options，与 EventSelect 默认 eventNameConfig.options 逻辑一致。
+ */
+export const getEventNameOptions = (
+  src: string | undefined,
+  formValue: Record<string, any> = {},
+): EventNameOption[] => {
+  if (!formValue.type) {
+    return [];
+  }
+
+  if (src === 'component') {
+    const sourceNode = editorService.getNodeById(formValue.id) || (formValue as MNode);
+    let events: EventOption[] | CascaderOption[] = eventsService.getEvent(formValue.type, { node: sourceNode }) || [];
+
+    if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+      const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+      if (!pageFragment) {
+        return [];
+      }
+
+      events = [
+        {
+          label: pageFragment.name || '页面片容器',
+          value: pageFragment.id,
+          children: events,
+        },
+      ];
+
+      (pageFragment.items || []).forEach((item) => {
+        traverseNode<MComponent | MContainer>(item, (current) => {
+          if (!current.type) {
+            return;
+          }
+
+          const node = editorService.getNodeById(current.id) || current;
+          const nodeEvents = eventsService.getEvent(current.type, { node }) || [];
+          (events as CascaderOption[]).push({
+            label: `${current.name}_${current.id}`,
+            value: `${current.id}`,
+            children: nodeEvents,
+          });
+        });
+      });
+
+      return events;
+    }
+
+    return (events as EventOption[]).map((option) => ({
+      text: option.label,
+      value: option.value,
+    }));
+  }
+
+  if (src === 'datasource') {
+    const events: EventNameOption[] = dataSourceService.getFormEvent(formValue.type) || [];
+    const dataSource = dataSourceService.getDataSourceById(formValue.id);
+    const fields = dataSource?.fields || [];
+
+    if (fields.length > 0) {
+      return [
+        ...events,
+        {
+          label: '数据变化',
+          value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+          children: getCascaderOptionsFromFields(fields),
+        },
+      ];
+    }
+
+    return events;
+  }
+
+  return [];
+};
+
+/** 将 select / cascader options 展平为最终写入 name 的字符串集合（cascader 用 `.` 拼接） */
+export const collectEventNameOptionValues = (
+  options: EventNameOption[],
+  checkStrictly: boolean,
+  prefix: any[] = [],
+  result: Set<string> = new Set(),
+): Set<string> => {
+  options.forEach((option) => {
+    if (typeof option?.value === 'undefined') {
+      return;
+    }
+
+    const path = [...prefix, option.value];
+    const joined = path.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+    const children = 'children' in option ? option.children : undefined;
+
+    if (Array.isArray(children) && children.length) {
+      if (checkStrictly) {
+        result.add(joined);
+      }
+      collectEventNameOptionValues(children as EventNameOption[], checkStrictly, path, result);
+      return;
+    }
+
+    result.add(joined);
+  });
+
+  return result;
+};
+
+/**
+ * 解析 event-select 允许的 name 集合。
+ * 自定义 eventNameConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getEventNameAllowedValues = (
+  config: { src?: string; eventNameConfig?: { options?: unknown } } = {},
+  formValue: Record<string, any> = {},
+): Set<string> | null => {
+  if (typeof config.eventNameConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  if (config.src !== 'component' && config.src !== 'datasource') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getEventNameOptions(config.src, formValue), isEventNameCheckStrictly(config.src));
+};
+
+/**
+ * 组装联动组件动作下拉/级联 options，与 EventSelect 默认 compActionConfig.options 逻辑一致。
+ */
+export const getCompActionOptions = (toId?: Id): EventNameOption[] => {
+  if (typeof toId === 'undefined' || toId === null || toId === '') {
+    return [];
+  }
+
+  const node = editorService.getNodeById(toId);
+  if (!node?.type) {
+    return [];
+  }
+
+  let methods: EventOption[] | CascaderOption[] = eventsService.getMethod(node.type, { targetId: toId, node }) || [];
+
+  if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+    const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+    if (!pageFragment) {
+      return [];
+    }
+
+    methods = [];
+    (pageFragment.items || []).forEach((item: MComponent | MContainer) => {
+      traverseNode<MComponent | MContainer>(item, (current) => {
+        const node = editorService.getNodeById(current.id) || current;
+
+        if (!current.type) {
+          return;
+        }
+
+        const nodeMethods = eventsService.getMethod(current.type, { targetId: current.id, node }) || [];
+        if (!nodeMethods.length) {
+          return;
+        }
+
+        (methods as CascaderOption[]).push({
+          label: `${current.name}_${current.id}`,
+          value: `${current.id}`,
+          children: nodeMethods,
+        });
+      });
+    });
+
+    return methods;
+  }
+
+  return (methods as EventOption[]).map((method) => ({
+    text: method.label,
+    value: method.value,
+  }));
+};
+
+/**
+ * 解析 event-select 联动组件动作允许的 method 集合。
+ * 自定义 compActionConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getCompActionAllowedValues = (
+  config: { src?: string; compActionConfig?: { options?: unknown } } = {},
+  model: { to?: Id } = {},
+): Set<string> | null => {
+  if (typeof config.compActionConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getCompActionOptions(model.to), isEventNameCheckStrictly(config.src));
+};

package/src/utils/index.ts

@@ -30,4 +30,6 @@ export * from './undo-redo';
 export * from './indexed-db';
 export * from './history';
 export * from './const';
+export * from './type-match-rules';
+export * from './event';
 export { default as loadMonaco } from './monaco-editor';

package/src/utils/monaco-editor.ts

@@ -1,7 +1,34 @@
 let cached: Promise<typeof import('monaco-editor')> | undefined;
 
+// 是否为 Monaco 内部抛出的取消错误（Canceled）
+// 销毁编辑器时，WordHighlighter 内部挂起的 Delayer 会被取消，
+// 取消时 reject 出的 Canceled 错误没有 catch，会变成 "Uncaught (in promise) Canceled"，
+// 该错误本身无害，这里做一次性、全局的兜底处理，仅吞掉这类取消错误。
+const isMonacoCanceledError = (reason: any): boolean => {
+  if (!reason) return false;
+  if (reason instanceof Error) {
+    return reason.name === 'Canceled' || reason.message === 'Canceled';
+  }
+  return reason === 'Canceled';
+};
+
+let canceledRejectionHandlerInstalled = false;
+const installCanceledRejectionHandler = () => {
+  if (canceledRejectionHandlerInstalled || typeof globalThis.addEventListener !== 'function') return;
+  canceledRejectionHandlerInstalled = true;
+
+  globalThis.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
+    if (isMonacoCanceledError(event.reason)) {
+      // 阻止其冒泡到控制台，避免无意义的报错噪音
+      event.preventDefault();
+    }
+  });
+};
+
 export default () => {
   if (!cached) {
+    installCanceledRejectionHandler();
+
     cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
       const { emmetHTML, emmetCSS } = emmet;
       emmetHTML(monaco);

package/src/utils/operator.ts

@@ -3,7 +3,7 @@ import { isEmpty } from 'lodash-es';
 
 import type { Id, MContainer, MNode } from '@tmagic/core';
 import { NodeType } from '@tmagic/core';
-import { calcValueByFontsize, getElById, isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, getElById, isPage, isPageOrFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import propsService from '@editor/services/props';
@@ -58,7 +58,7 @@ export const beforePaste = (position: PastePosition, config: MNode[], doc?: Docu
       };
     }
     const root = editorService.get('root');
-    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+    if (isPageOrFragment(pasteConfig) && root) {
       pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
     }
     return pasteConfig as MNode;

package/src/utils/props.ts

@@ -16,8 +16,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 import {
+  HookType,
   NODE_CONDS_KEY,
   NODE_CONDS_RESULT_KEY,
   NODE_DISABLE_CODE_BLOCK_KEY,
@@ -45,10 +45,35 @@ export const numberOptions = [
   { text: '不在范围内', value: 'not_between' },
 ];
 
+export const booleanOptions = [
+  { text: '是', value: 'is' },
+  { text: '不是', value: 'not' },
+];
+
+/** 按字段类型返回条件运算符选项（UI 与 typeMatch 校验共用） */
+export const getCondOpOptionsByFieldType = (type: string) => {
+  if (type === 'array') {
+    return arrayOptions;
+  }
+
+  if (type === 'boolean' || type === 'null') {
+    return booleanOptions;
+  }
+
+  if (type === 'number') {
+    return [...eqOptions, ...numberOptions];
+  }
+
+  if (type === 'string') {
+    return [...arrayOptions, ...eqOptions];
+  }
+
+  return [...arrayOptions, ...eqOptions, ...numberOptions];
+};
+
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
-  lazy: true,
-  display: ({ services }: any) => !(services.uiService.get('showStylePanel') ?? true),
+  display: ({ services }: any) => !(services?.uiService?.get('showStylePanel') ?? true),
   items: [
     {
       name: 'style',
@@ -120,171 +145,87 @@ export const styleTabConfig: TabPaneConfig = {
 
 export const eventTabConfig: TabPaneConfig = {
   title: '事件',
-  lazy: true,
   items: [
     {
       name: 'events',
       src: 'component',
       labelWidth: '100px',
       type: 'event-select',
+      defaultValue: [],
+      rules: [{ typeMatch: true }],
     },
   ],
 };
 
-const getReportTypeConfig = ({ reportType }: { reportType: 'click' | 'expose' }) => {
-  const reportLabel = {
-    click: '点击',
-    expose: '曝光',
-  };
-  const label = reportLabel[reportType];
-  return {
-    name: reportType,
-    style: {
-      backgroundColor: '#fff',
-      borderRadius: '4px',
-      padding: '16px',
-      marginBottom: '10px',
-    },
-    items: [
-      {
-        text: label,
-        static: true,
-        labelPosition: 'left',
-        labelWidth: '200px',
-        className: 'm-fields-title-container',
-      },
-      {
-        name: 'f_module',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-        checkStrictly: false,
-        dataSourceFieldType: ['string'],
-        disabled: (_vm: any, { formValue }: any) => !formValue?.report?.custom,
-        text: 'f_module',
-        labelPosition: 'left',
-      },
-      {
-        name: 'f_resource',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-        checkStrictly: false,
-        dataSourceFieldType: ['string'],
-        disabled: (_vm: any, { formValue }: any) => !formValue?.report?.custom,
-        text: 'f_resource',
-        labelPosition: 'left',
-      },
-      {
-        name: 'f_type',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-        checkStrictly: false,
-        dataSourceFieldType: ['string', 'number'],
-        disabled: (_vm: any, { formValue }: any) => !formValue?.report?.custom,
-        text: 'f_type',
-        labelPosition: 'left',
-      },
-    ],
-  };
-};
-
 export const advancedTabConfig: TabPaneConfig = {
   title: '高级',
-  lazy: true,
   items: [
-    {
-      type: 'link',
-      displayText: '点击查看配置指南',
-      href: 'https://iwiki.woa.com/pages/viewpage.action?pageId=827749220',
-      css: 'color: #F56C6C;font-weight: bold',
-    } as any,
     {
       name: NODE_DISABLE_CODE_BLOCK_KEY,
       text: '禁用代码块',
       type: 'switch',
-      labelPosition: 'left',
       defaultValue: false,
       extra: '开启后，配置的代码块将不会被执行',
-      style: {
-        padding: '0 22px',
-      },
     },
     {
       name: NODE_DISABLE_DATA_SOURCE_KEY,
       text: '禁用数据源',
       type: 'switch',
-      labelPosition: 'left',
       defaultValue: false,
       extra: '开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效',
-      style: {
-        padding: '0 22px',
-      },
     },
     {
       name: 'created',
       text: 'Created',
-      flat: true,
       labelPosition: 'top',
       type: 'code-select',
       titleExtra: '组件初始化时执行',
-      style: {
-        padding: '0 22px',
-      },
+      rules: [
+        { typeMatch: true, trigger: 'change' },
+        {
+          validator: ({ value, callback }: any) => {
+            if (value && value.hookType !== HookType.CODE) {
+              return callback('hookType 必须是 code');
+            }
+            callback();
+          },
+        },
+      ],
     },
     {
       name: 'mounted',
       text: 'Mounted',
       labelPosition: 'top',
-      flat: true,
-
       type: 'code-select',
       titleExtra: '组件挂载到dom时执行',
-      style: {
-        padding: '0 22px',
-      },
+      rules: [
+        { typeMatch: true, trigger: 'change' },
+        {
+          validator: ({ value, callback }: any) => {
+            if (value && value.hookType !== HookType.CODE) {
+              return callback('hookType 必须是 code');
+            }
+            callback();
+          },
+        },
+      ],
     },
     {
       name: 'display',
       text: 'Display',
-      flat: true,
       titleExtra: '控制组件是否渲染，关系的代码块返回值为false时不渲染',
       labelPosition: 'top',
       type: 'code-select',
-      style: {
-        padding: '0 22px',
-      },
-    },
-    {
-      type: 'fieldset',
-      legend: '上报',
-      labelWidth: '80px',
-      name: 'report',
-      className: 'no-border-fieldset',
-      style: {
-        paddingTop: '10px',
-      },
-      items: [
+      rules: [
+        { typeMatch: true, trigger: 'change' },
         {
-          type: 'row',
-          items: [
-            {
-              type: 'switch',
-              name: 'custom',
-              labelPosition: 'left',
-              defaultValue: false,
-              labelWidth: '120px',
-              text: '开启自定义',
-              extra: '开启自定义后可以手动修改上报内容，关闭后会自动生成上报内容',
-            },
-          ],
+          validator: ({ value, callback }: any) => {
+            if (value && value.hookType !== HookType.CODE) {
+              return callback('hookType 必须是 code');
+            }
+            callback();
+          },
         },
-        getReportTypeConfig({ reportType: 'click' }),
-        getReportTypeConfig({ reportType: 'expose' }) as any,
       ],
     },
   ],
@@ -315,10 +256,8 @@ export const displayTabConfig: TabPaneConfig<DisplayCondsConfig> = {
       type: 'display-conds',
       name: NODE_CONDS_KEY,
       titlePrefix: '条件组',
-      flat: true,
-      fixed: 'right',
-      operateColWidth: 112,
       defaultValue: [],
+      rules: [{ typeMatch: true }],
     },
   ],
 };