@tmagic/editor 1.3.0-alpha.8 → 1.3.0-beta.0

package/src/type.ts

@@ -18,7 +18,7 @@
 
 import type { Component } from 'vue';
 
-import type { FormConfig, FormItem } from '@tmagic/form';
+import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -45,7 +45,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface InstallOptions {
-  parseDSL: (dsl: string) => MApp;
+  parseDSL: <T = any>(dsl: string) => T;
   [key: string]: any;
 }
 
@@ -93,7 +93,7 @@ export type StoreStateKey = keyof StoreState;
 
 export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
-  propsValueMap: Record<string, MNode>;
+  propsValueMap: Record<string, Partial<MNode>>;
 }
 
 export interface ComponentGroupState {
@@ -334,18 +334,15 @@ export interface ScrollViewerEvent {
 }
 
 export type CodeState = {
-  /** 是否展示代码块编辑区 */
-  isShowCodeEditor: boolean;
   /** 代码块DSL数据源 */
   codeDsl: CodeBlockDSL | null;
-  /** 当前选中的代码块id */
-  id: Id;
   /** 代码块是否可编辑 */
   editable: boolean;
   /** list模式下左侧展示的代码列表 */
   combineIds: string[];
   /** 为业务逻辑预留的不可删除的代码块列表，由业务逻辑维护（如代码块上线后不可删除） */
   undeletableList: Id[];
+  paramsColConfig?: ColumnConfig;
 };
 
 export type HookData = {
@@ -429,6 +426,8 @@ export interface EventSelectConfig {
   compActionConfig?: FormItem;
   /** 联动代码配置 */
   codeActionConfig?: FormItem;
+  /** 联动数据源配置 */
+  dataSourceActionConfig?: FormItem;
 }
 
 export enum KeyBindingCommand {
@@ -485,3 +484,44 @@ export interface KeyBindingCacheItem {
   eventType: 'keyup' | 'keydown';
   binded: boolean;
 }
+
+export interface CodeSelectColConfig {
+  type: 'code-select-col';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceMethodSelectConfig {
+  type: 'data-source-method-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export interface DataSourceFieldSelectConfig {
+  type: 'data-source-field-select';
+  name: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
+export enum DepTargetType {
+  DEFAULT = 'default',
+  /** 代码块 */
+  CODE_BLOCK = 'code-block',
+  /** 数据源 */
+  DATA_SOURCE = 'data-source',
+  /** 数据源方法 */
+  DATA_SOURCE_METHOD = 'data-source-method',
+  /** 数据源条件 */
+  DATA_SOURCE_COND = 'data-source-cond',
+}
+
+export interface DatasourceTypeOption {
+  type: string;
+  text: string;
+}

package/src/utils/content-menu.ts

@@ -0,0 +1,92 @@
+import { computed, markRaw, Ref, ref } from 'vue';
+import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
+
+import { Id, MContainer, NodeType } from '@tmagic/schema';
+import { isPage } from '@tmagic/utils';
+
+import ContentMenu from '@editor/components/ContentMenu.vue';
+import type { MenuButton, Services } from '@editor/type';
+
+export const useDeleteMenu = (): MenuButton => ({
+  type: 'button',
+  text: '删除',
+  icon: Delete,
+  display: (services) => {
+    const node = services?.editorService?.get('node');
+    return node?.type !== NodeType.ROOT && !isPage(node);
+  },
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.remove(nodes);
+  },
+});
+
+const canPaste = ref(false);
+
+export const useCopyMenu = (): MenuButton => ({
+  type: 'button',
+  text: '复制',
+  icon: markRaw(CopyDocument),
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    nodes && services?.editorService?.copy(nodes);
+    canPaste.value = true;
+  },
+});
+
+export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+  type: 'button',
+  text: '粘贴',
+  icon: markRaw(DocumentCopy),
+  display: () => canPaste.value,
+  handler: (services) => {
+    const nodes = services?.editorService?.get('nodes');
+    if (!nodes || nodes.length === 0) return;
+
+    if (menu?.value?.$el) {
+      const stage = services?.editorService?.get('stage');
+      const rect = menu.value.$el.getBoundingClientRect();
+      const parentRect = stage?.container?.getBoundingClientRect();
+      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
+      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      services?.editorService?.paste({ left: initialLeft, top: initialTop });
+    } else {
+      services?.editorService?.paste();
+    }
+  },
+});
+
+const moveTo = (id: Id, services?: Services) => {
+  if (!services?.editorService) return;
+
+  const nodes = services.editorService.get('nodes') || [];
+  const parent = services.editorService.getNodeById(id) as MContainer;
+
+  if (!parent) return;
+
+  services?.editorService.add(nodes, parent);
+  services?.editorService.remove(nodes);
+};
+
+export const useMoveToMenu = (services?: Services): MenuButton => {
+  const root = computed(() => services?.editorService?.get('root'));
+
+  return {
+    type: 'button',
+    text: '移动至',
+    display: (services) => {
+      const node = services?.editorService?.get('node');
+      const pageLength = services?.editorService?.get('pageLength') || 0;
+      return !isPage(node) && pageLength > 1;
+    },
+    items: (root.value?.items || [])
+      .filter((page) => page.id !== services?.editorService?.get('page')?.id)
+      .map((page) => ({
+        text: `${page.name}(${page.id})`,
+        type: 'button',
+        handler: (services?: Services) => {
+          moveTo(page.id, services);
+        },
+      })),
+  };
+};

package/src/utils/data-source/formConfigs/base.ts

@@ -1,32 +1,30 @@
 import type { FormConfig } from '@tmagic/form';
 
-export default [
-  {
-    name: 'id',
-    type: 'hidden',
-  },
-  {
-    name: 'type',
-    text: '类型',
-    type: 'select',
-    options: [
-      { text: '基础', value: 'base' },
-      { text: 'HTTP', value: 'http' },
-    ],
-    defaultValue: 'base',
-  },
-  {
-    name: 'title',
-    text: '名称',
-    rules: [
-      {
-        required: true,
-        message: '请输入名称',
-      },
-    ],
-  },
-  {
-    name: 'description',
-    text: '描述',
-  },
-] as FormConfig;
+export default function (): FormConfig {
+  return [
+    {
+      name: 'id',
+      type: 'hidden',
+    },
+    {
+      name: 'type',
+      text: '类型',
+      type: 'hidden',
+      defaultValue: 'base',
+    },
+    {
+      name: 'title',
+      text: '名称',
+      rules: [
+        {
+          required: true,
+          message: '请输入名称',
+        },
+      ],
+    },
+    {
+      name: 'description',
+      text: '描述',
+    },
+  ];
+}

package/src/utils/data-source/index.ts

@@ -1,10 +1,11 @@
 import { FormConfig } from '@tmagic/form';
+import { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
 
 const fillConfig = (config: FormConfig): FormConfig => [
-  ...BaseFormConfig,
+  ...BaseFormConfig(),
   ...config,
   {
     type: 'panel',
@@ -13,7 +14,18 @@ const fillConfig = (config: FormConfig): FormConfig => [
       {
         name: 'fields',
         type: 'data-source-fields',
-        defaultValue: [],
+        defaultValue: () => [],
+      },
+    ],
+  },
+  {
+    type: 'panel',
+    title: '方法定义',
+    items: [
+      {
+        name: 'methods',
+        type: 'data-source-methods',
+        defaultValue: () => [],
       },
     ],
   },
@@ -29,3 +41,54 @@ export const getFormConfig = (type: string, configs: Record<string, FormConfig>)
       return fillConfig(configs[type] || []);
   }
 };
+
+export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => {
+  const displayState: { value: string; type: 'var' | 'text' }[] = [];
+
+  // 匹配es6字符串模块
+  const matches = key.matchAll(/\$\{([\s\S]+?)\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === 'undefined') break;
+
+    // 字符串常量
+    displayState.push({
+      type: 'text',
+      value: key.substring(index, match.index),
+    });
+
+    let dsText = '';
+    let ds: DataSourceSchema | undefined;
+    let fields: DataSchema[] | undefined;
+
+    // 将模块解析成数据源对应的值
+    match[1].split('.').forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      const field = fields?.find((field) => field.name === item);
+      fields = field?.fields;
+      dsText += `.${field?.title || item}`;
+    });
+
+    displayState.push({
+      type: 'var',
+      value: dsText,
+    });
+
+    index = match.index + match[0].length;
+  }
+
+  if (index < key.length) {
+    displayState.push({
+      type: 'text',
+      value: key.substring(index),
+    });
+  }
+
+  return displayState;
+};

package/src/utils/dep.ts

@@ -1,16 +1,21 @@
 import { isEmpty } from 'lodash-es';
 
-import { CodeBlockContent, DataSourceSchema, HookType, Id } from '@tmagic/schema';
+import { CodeBlockContent, HookType, Id } from '@tmagic/schema';
 
+import dataSourceService from '@editor/services/dataSource';
 import { Target } from '@editor/services/dep';
-import type { HookData } from '@editor/type';
+import { DepTargetType, HookData } from '@editor/type';
 
 export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
   new Target({
-    type: 'code-block',
+    type: DepTargetType.CODE_BLOCK,
     id,
     name: codeBlock.name,
     isTarget: (key: string | number, value: any) => {
+      if (id === value) {
+        return true;
+      }
+
       if (value?.hookType === HookType.CODE && !isEmpty(value.hookData)) {
         const index = value.hookData.findIndex((item: HookData) => item.codeId === id);
         return Boolean(index > -1);
@@ -20,10 +25,37 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     },
   });
 
-export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+export const createDataSourceTarget = (id: Id) =>
+  new Target({
+    type: DepTargetType.DATA_SOURCE,
+    id,
+    isTarget: (key: string | number, value: any) =>
+      // 关联数据源对象或者在模板在使用数据源
+      (value?.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+  });
+
+export const createDataSourceCondTarget = (id: string) =>
+  new Target({
+    type: DepTargetType.DATA_SOURCE_COND,
+    id,
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    },
+  });
+
+export const createDataSourceMethodTarget = (id: string) =>
   new Target({
-    type: 'data-source',
+    type: DepTargetType.DATA_SOURCE_METHOD,
     id,
-    name: ds.title || `${id}`,
-    isTarget: (key: string | number, value: any) => typeof value === 'string' && value.includes(`${id}`),
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.methods?.find((method) => method.name === value[1]));
+    },
   });

package/src/utils/index.ts

@@ -20,5 +20,5 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
-export * from './stage';
 export * from './operator';
+export * from './data-source';