refactor(editor): ui-slect事件名使用常量

packages/editor/src/fields/UISelect.vue

@@ -49,7 +49,7 @@ import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
-import type { Services } from '@editor/type';
+import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
   name: 'MEditorUISelect',
@@ -68,7 +68,7 @@ const cancelHandler = () => {
   if (!services?.uiService) return;
   services.uiService.set('uiSelectMode', false);
   uiSelectMode.value = false;
-  globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
+  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
 const clickHandler = ({ detail }: Event & { detail: any }) => {
@@ -92,7 +92,7 @@ const startSelect = () => {
   if (!services?.uiService) return;
   services.uiService.set('uiSelectMode', true);
   uiSelectMode.value = true;
-  globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
+  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
 const deleteHandler = () => {

packages/editor/src/hooks/use-stage.ts

@@ -5,7 +5,12 @@ import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData
 
 import editorService from '@editor/services/editor';
 import uiService from '@editor/services/ui';
-import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '@editor/type';
+import {
+  H_GUIDE_LINE_STORAGE_KEY,
+  StageOptions,
+  UI_SELECT_MODE_EVENT_NAME,
+  V_GUIDE_LINE_STORAGE_KEY,
+} from '@editor/type';
 import { getGuideLineFromCache } from '@editor/utils/editor';
 
 const root = computed(() => editorService.get('root'));
@@ -30,7 +35,7 @@ export const useStage = (stageOptions: StageOptions) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select
       if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
-        document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
+        document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
         return stop();
       }
 

packages/editor/src/layouts/sidebar/layer/LayerNode.vue

@@ -62,7 +62,7 @@ import type { Id, MContainer, MNode } from '@tmagic/schema';
 import { isPage } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { LayerNodeSlots, LayerNodeStatus, Services } from '@editor/type';
+import { LayerNodeSlots, LayerNodeStatus, Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 import LayerNodeTool from './LayerNodeTool.vue';
 import { useDrag } from './use-drag';
@@ -128,7 +128,7 @@ const nodeClickHandler = () => {
   if (!nodeStatusMap?.value) return;
 
   if (uiService?.get('uiSelectMode')) {
-    document.dispatchEvent(new CustomEvent('ui-select', { detail: props.data }));
+    document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
     return;
   }
 
@@ -155,7 +155,7 @@ const nodeContentmenuHandler = (event: MouseEvent, node: MNode) => {
   emit('node-contextmenu', event, node);
 };
 
-// 触发画布单选
+// 触发画布选中
 const select = async (data: MNode) => {
   if (!data.id) {
     throw new Error('没有id');

packages/editor/src/type.ts

@@ -467,6 +467,7 @@ export interface EventSelectConfig {
   name: string;
   type: 'event-select';
   src: 'datasource' | 'component';
+  labelWidth?: string;
   /** 事件名称表单配置 */
   eventNameConfig?: FormItem;
   /** 动作类型配置 */
@@ -539,6 +540,7 @@ export interface KeyBindingCacheItem {
 export interface CodeSelectColConfig {
   type: 'code-select-col';
   name: string;
+  text: string;
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
@@ -547,6 +549,7 @@ export interface CodeSelectColConfig {
 export interface DataSourceMethodSelectConfig {
   type: 'data-source-method-select';
   name: string;
+  text: string;
   labelWidth?: number | string;
   disabled?: boolean | FilterFunction;
   display?: boolean | FilterFunction;
@@ -561,6 +564,7 @@ export interface DataSourceFieldSelectConfig {
   display?: boolean | FilterFunction;
 }
 
+/** 依赖收集的目标类型 */
 export enum DepTargetType {
   DEFAULT = 'default',
   /** 代码块 */
@@ -573,18 +577,31 @@ export enum DepTargetType {
   DATA_SOURCE_COND = 'data-source-cond',
 }
 
+/** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
+  /** 数据源类型 */
   type: string;
+  /** 数据源名称 */
   text: string;
 }
 
+/** 组件树节点状态 */
 export interface LayerNodeStatus {
+  /** 显隐 */
   visible: boolean;
+  /** 展开子节点 */
   expand: boolean;
+  /** 选中 */
   selected: boolean;
 }
 
+/** 拖拽类型 */
 export enum DragType {
+  /** 从组件列表拖到画布 */
   COMPONENT_LIST = 'component-list',
+  /** 拖动组件树节点 */
   LAYER_TREE = 'layer-tree',
 }
+
+/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
+export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';