style(dep,editor,schema,stage): 完善注释与ts定义

packages/dep/src/utils.ts

@@ -45,6 +45,7 @@ export const createDataSourceTarget = (ds: DataSourceSchema, initialDeps: DepDat
     initialDeps,
     isTarget: (key: string | number, value: any) => {
       // 关联数据源对象,如：{ isBindDataSource: true, dataSourceId: 'xxx'}
+      // 使用data-source-select value: 'value' 可以配置出来
       // 或者在模板在使用数据源,如：`xxx${id.field}xxx`
       if (
         (value?.isBindDataSource && value.dataSourceId && value.dataSourceId === ds.id) ||
@@ -64,6 +65,7 @@ export const createDataSourceTarget = (ds: DataSourceSchema, initialDeps: DepDat
       }
 
       // 关联数据源字段，格式为 [前缀+数据源ID, 字段名]
+      // 使用data-source-field-select value: 'value' 可以配置出来
       if (!Array.isArray(value) || typeof value[0] !== 'string') {
         return false;
       }
@@ -87,6 +89,7 @@ export const createDataSourceCondTarget = (ds: DataSourceSchema, initialDeps: De
     id: ds.id,
     initialDeps,
     isTarget: (key: string | number, value: any) => {
+      // 使用data-source-field-select value: 'key' 可以配置出来
       if (!Array.isArray(value) || value[0] !== ds.id || !`${key}`.startsWith('displayConds')) return false;
       return Boolean(ds?.fields?.find((field) => field.name === value[1]));
     },
@@ -98,6 +101,7 @@ export const createDataSourceMethodTarget = (ds: DataSourceSchema, initialDeps:
     id: ds.id,
     initialDeps,
     isTarget: (key: string | number, value: any) => {
+      // 使用data-source-method-select 可以配置出来
       if (!Array.isArray(value) || value[0] !== ds.id) return false;
 
       return Boolean(ds?.methods?.find((method) => method.name === value[1]));

packages/editor/src/fields/Code.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
@@ -27,14 +27,16 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
+    FieldProps<
-      language?: string;
+      {
-      options?: {
+        language?: string;
-        [key: string]: any;
+        options?: {
-      };
+          [key: string]: any;
-      height?: string;
+        };
-      parse?: boolean;
+        height?: string;
-    }>
+        parse?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

packages/editor/src/fields/CodeLink.vue

@@ -6,7 +6,7 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import { getConfig } from '@editor/utils/config';
 
@@ -15,13 +15,13 @@ defineOptions({
 });
 
 const props = defineProps<
-  FieldProps<{
+  FieldProps<
-    type: 'code-link';
+    {
-    name: string;
+      type: 'code-link';
-    text?: string;
+      formTitle?: string;
-    formTitle?: string;
+      codeOptions?: Object;
-    codeOptions?: Object;
+    } & FormItem
-  }>
+  >
 >();
 
 const emit = defineEmits(['change']);

packages/editor/src/fields/CodeSelect.vue

@@ -11,7 +11,7 @@ import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import { FormState } from '@tmagic/form';
 import { HookCodeType, HookType } from '@tmagic/schema';
 
@@ -27,9 +27,11 @@ const services = inject<Services>('services');
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
+    FieldProps<
-      className?: string;
+      {
-    }>
+        className?: string;
+      } & FormItem
+    >
   >(),
   {},
 );

packages/editor/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@ import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -61,11 +61,11 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
+    FieldProps<
-      type: 'data-source-input';
+      {
-      name: string;
+        type: 'data-source-input';
-      text: string;
+      } & FormItem
-    }>
+    >
   >(),
   {
     disabled: false,

packages/editor/src/fields/DataSourceSelect.vue

@@ -14,9 +14,9 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
+import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
 
-import { Services } from '../type';
+import type { DataSourceSelect, Services } from '../type';
 
 defineOptions({
   name: 'MEditorDataSourceSelect',
@@ -24,21 +24,9 @@ defineOptions({
 
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
-  defineProps<
+  disabled: false,
-    FieldProps<{
+});
-      type: 'data-source-select';
-      name: string;
-      text?: string;
-      placeholder?: string;
-      dataSourceType?: string;
-      value?: 'id' | 'value';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
 
 const { dataSourceService } = inject<Services>('services') || {};
 

packages/editor/src/fields/KeyValue.vue

@@ -63,7 +63,7 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -74,12 +74,12 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
+    FieldProps<
-      type: 'key-value';
+      {
-      name: string;
+        type: 'key-value';
-      text: string;
+        advanced?: boolean;
-      advanced?: boolean;
+      } & FormItem
-    }>
+    >
   >(),
   {
     disabled: false,

packages/editor/src/fields/UISelect.vue

@@ -26,7 +26,7 @@
           :size="size"
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
-          @mouseleave="unhightlight"
+          @mouseleave="unhighlight"
           >{{ `${toName}_${val}` }}</TMagicButton
         >
       </TMagicTooltip>
@@ -46,7 +46,7 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
@@ -55,7 +55,7 @@ defineOptions({
   name: 'MEditorUISelect',
 });
 
-const props = defineProps<FieldProps<any>>();
+const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
 
 const emit = defineEmits(['change']);
 
@@ -115,7 +115,7 @@ const highlight = throttle((id: Id) => {
   services?.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
-const unhightlight = () => {
+const unhighlight = () => {
   services?.editorService.set('highlightNode', null);
   services?.editorService.get('stage')?.clearHighlight();
   services?.stageOverlayService.get('stage')?.clearHighlight();

packages/editor/src/type.ts

@@ -19,8 +19,18 @@
 import type { Component } from 'vue';
 import type { PascalCasedProperties } from 'type-fest';
 
-import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import type {
+  CodeBlockContent,
+  CodeBlockDSL,
+  DataSourceFieldType,
+  Id,
+  MApp,
+  MContainer,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -596,42 +606,41 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
-export interface CodeSelectColConfig {
+export interface CodeSelectColConfig extends FormItem {
   type: 'code-select-col';
-  name: string;
+  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
   notEditable?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface PageFragmentSelectConfig {
+export interface PageFragmentSelectConfig extends FormItem {
   type: 'page-fragment-select';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface DataSourceMethodSelectConfig {
+export interface DataSourceSelect extends FormItem, Input {
+  type: 'data-source-select';
+  /** 数据源类型: base、http... */
+  dataSourceType?: string;
+  /** 是否要编译成数据源的data。
+   * id: 不编译，就是要数据源id;
+   * value: 要编译（数据源data）
+   * */
+  value?: 'id' | 'value';
+}
+
+export interface DataSourceMethodSelectConfig extends FormItem {
   type: 'data-source-method-select';
-  name: string;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
   notEditable?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface DataSourceFieldSelectConfig {
+export interface DataSourceFieldSelectConfig extends FormItem {
   type: 'data-source-field-select';
-  name: string;
+  /** 是否要编译成数据源的data。
+   * key: 不编译，就是要数据源id和field name;
+   * value: 要编译（数据源data[`${filed}`]）
+   * */
   value?: 'key' | 'value';
-  labelWidth?: number | string;
+  fieldType?: DataSourceFieldType;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
 /** 可新增的数据源类型选项 */

packages/schema/src/index.ts

@@ -212,8 +212,10 @@ export enum HookCodeType {
   DATA_SOURCE_METHOD = 'data-source-method',
 }
 
+export type DataSourceFieldType = 'null' | 'boolean' | 'object' | 'array' | 'number' | 'string' | 'any';
+
 export interface DataSchema {
-  type?: 'null' | 'boolean' | 'object' | 'array' | 'number' | 'string' | 'any';
+  type?: DataSourceFieldType;
   /** 键名 */
   name: string;
   /** 展示名称 */

packages/stage/README.md

@@ -35,7 +35,7 @@ mask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事
 ## ActionManager
 - 负责监听鼠标和键盘事件，基于这些事件，形成单选、多选、高亮行为。主要监听的是蒙层上的鼠标事件，通过StageRender.getElementsFromPoint计算获得鼠标下方的组件，实现事件监听和实际组件的解构。
 - 向上负责跟StageCore双向通信，提供接口供core调用，并向core抛出事件
-- 向下管理StageDragResize、StageMultiDragResize、StageHightlight这三个单选、多选、高亮类，让它们协同工作
+- 向下管理StageDragResize、StageMultiDragResize、StageHighlight这三个单选、多选、高亮类，让它们协同工作
 <br/><br/>
 ## StageDragResize
 负责单选相关逻辑，拖拽、改变大小、旋转等行为是依赖于开源库Moveable实现的，这些行为并不是直接作用于组件本身，而是在蒙层上创建了一个跟组件同等大小的边框div，实际拖拽的是边框div，在拖拽过程中同步更新组件。
@@ -47,7 +47,7 @@ mask是一个盖在画布区域的一个蒙层，主要作用是隔离鼠标事
 ## StageMultiDragResize
 功能跟StageDragResize类似，只是这个类是负责多选操作的，通过ctrl健选中多个组件，多选状态下不支持通过表单配置组件。
 <br/><br/>
-## StageHightlight
+## StageHighlight
 在鼠标经过画布中的组件、或者鼠标经过组件目录树中的组件时，会触发组件高亮，高亮也是通过moveable实现的，这个类主要负责初始化moveable并管理高亮状态。
 <br/><br/>
 ## MoveableOptionsManager