From 032f7c03e0b51d94779fce6a858c02f8e649a20f Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Tue, 5 Mar 2024 19:04:36 +0800
Subject: [PATCH] =?UTF-8?q?style(dep,editor,schema,stage):=20=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E6=B3=A8=E9=87=8A=E4=B8=8Ets=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/dep/src/utils.ts                     |  4 ++
 packages/editor/src/fields/Code.vue           | 20 ++++---
 packages/editor/src/fields/CodeLink.vue       | 16 ++---
 packages/editor/src/fields/CodeSelect.vue     | 10 ++--
 .../editor/src/fields/DataSourceInput.vue     | 12 ++--
 .../editor/src/fields/DataSourceSelect.vue    | 22 ++-----
 packages/editor/src/fields/KeyValue.vue       | 14 ++---
 packages/editor/src/fields/UISelect.vue       |  8 +--
 packages/editor/src/type.ts                   | 59 +++++++++++--------
 packages/schema/src/index.ts                  |  4 +-
 packages/stage/README.md                      |  4 +-
 11 files changed, 90 insertions(+), 83 deletions(-)

diff --git a/packages/dep/src/utils.ts b/packages/dep/src/utils.ts
index aeb45307..37f22359 100644
--- a/packages/dep/src/utils.ts
+++ b/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]));
diff --git a/packages/editor/src/fields/Code.vue b/packages/editor/src/fields/Code.vue
index 098747fc..06384d14 100644
--- a/packages/editor/src/fields/Code.vue
+++ b/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<{
-      language?: string;
-      options?: {
-        [key: string]: any;
-      };
-      height?: string;
-      parse?: boolean;
-    }>
+    FieldProps<
+      {
+        language?: string;
+        options?: {
+          [key: string]: any;
+        };
+        height?: string;
+        parse?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,
diff --git a/packages/editor/src/fields/CodeLink.vue b/packages/editor/src/fields/CodeLink.vue
index f8a4d030..74102d7d 100644
--- a/packages/editor/src/fields/CodeLink.vue
+++ b/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<{
-    type: 'code-link';
-    name: string;
-    text?: string;
-    formTitle?: string;
-    codeOptions?: Object;
-  }>
+  FieldProps<
+    {
+      type: 'code-link';
+      formTitle?: string;
+      codeOptions?: Object;
+    } & FormItem
+  >
 >();
 
 const emit = defineEmits(['change']);
diff --git a/packages/editor/src/fields/CodeSelect.vue b/packages/editor/src/fields/CodeSelect.vue
index a6f34a8c..693e3e9f 100644
--- a/packages/editor/src/fields/CodeSelect.vue
+++ b/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<{
-      className?: string;
-    }>
+    FieldProps<
+      {
+        className?: string;
+      } & FormItem
+    >
   >(),
   {},
 );
diff --git a/packages/editor/src/fields/DataSourceInput.vue b/packages/editor/src/fields/DataSourceInput.vue
index 3de227fd..91a2800d 100644
--- a/packages/editor/src/fields/DataSourceInput.vue
+++ b/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<{
-      type: 'data-source-input';
-      name: string;
-      text: string;
-    }>
+    FieldProps<
+      {
+        type: 'data-source-input';
+      } & FormItem
+    >
   >(),
   {
     disabled: false,
diff --git a/packages/editor/src/fields/DataSourceSelect.vue b/packages/editor/src/fields/DataSourceSelect.vue
index b6c2bcd6..25903054 100644
--- a/packages/editor/src/fields/DataSourceSelect.vue
+++ b/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(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-select';
-      name: string;
-      text?: string;
-      placeholder?: string;
-      dataSourceType?: string;
-      value?: 'id' | 'value';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = inject<Services>('services') || {};
 
diff --git a/packages/editor/src/fields/KeyValue.vue b/packages/editor/src/fields/KeyValue.vue
index 76bd9c6a..ffb23c93 100644
--- a/packages/editor/src/fields/KeyValue.vue
+++ b/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<{
-      type: 'key-value';
-      name: string;
-      text: string;
-      advanced?: boolean;
-    }>
+    FieldProps<
+      {
+        type: 'key-value';
+        advanced?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,
diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 6d29610e..2a740941 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/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();
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 21e9525e..68b62ad9 100644
--- a/packages/editor/src/type.ts
+++ b/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 { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
+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;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
+  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
   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;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
   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;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
+  fieldType?: DataSourceFieldType;
 }
 
 /** 可新增的数据源类型选项 */
diff --git a/packages/schema/src/index.ts b/packages/schema/src/index.ts
index 6969eace..e70d00a1 100644
--- a/packages/schema/src/index.ts
+++ b/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;
   /** 展示名称 */
diff --git a/packages/stage/README.md b/packages/stage/README.md
index 446e3485..b706bf28 100644
--- a/packages/stage/README.md
+++ b/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