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

2025-04-06 03:57:56 +08:00 · 2024-03-05 19:04:36 +08:00 · 2024-03-05 19:04:36 +08:00 · 032f7c03e0
commit 032f7c03e0
parent e272370fea
11 changed files with 90 additions and 83 deletions
--- 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]));
--- 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,
--- 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']);
--- 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
+    >
  >(),
  {},
 );
--- 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,
--- 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') || {};

--- 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,
--- 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();
--- 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;
 }

 /** 可新增的数据源类型选项 */
--- 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;
  /** 展示名称 */
--- 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