@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.1

package/src/theme/event.scss

@@ -19,18 +19,21 @@
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.12);
   }
 }
-.m-fields-code-select-col {
+.m-fields-code-select-col,
+.m-fields-data-source-method-select {
   width: 100%;
-  .code-select-container {
-    display: flex;
-    align-items: center;
-    .select {
-      flex: 10 0 100px;
-    }
-    .icon {
-      flex: 1 0 20px;
-      cursor: pointer;
-      margin-right: 5px;
-    }
+}
+
+.code-select-container,
+.data-source-method-select-container {
+  display: flex;
+  align-items: center;
+  .select {
+    flex: 10 0 100px;
+  }
+  .icon {
+    flex: 1 0 20px;
+    cursor: pointer;
+    margin-right: 5px;
   }
 }

package/src/theme/framework.scss

@@ -4,10 +4,7 @@
   width: 100%;
 
   &-content {
-    width: 100%;
     height: calc(100% - #{$--nav-height});
-    display: flex;
-    justify-self: space-between;
   }
 
   &-framework-center {

package/src/theme/index.scss

@@ -1,2 +1,10 @@
 @import "./common/var.scss";
 @import "./theme.scss";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}

package/src/theme/layout.scss

@@ -2,4 +2,8 @@
   width: 100%;
   display: flex;
   justify-self: space-between;
+
+  &:has(.m-editor-resizer-draging) {
+    overflow: hidden;
+  }
 }

package/src/theme/sidebar.scss

@@ -1,76 +1,33 @@
-.m-editor-sidebar.tmagic-design-tabs {
+.m-editor-sidebar {
+  display: flex;
   height: 100%;
 
-  .el-tabs__header,
-  .t-tabs__header {
+  .m-editor-sidebar-header {
     background: $--sidebar-heder-background-color;
-    border: 0;
     height: 100%;
+    width: 40px;
 
-    .t-tabs__nav--card {
-      background-color: transparent;
-    }
-
-    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
-        .t-is-active
-      ):hover {
-      background-color: transparent;
-    }
-
-    &.is-left,
-    &.t-is-left {
-      width: 40px;
-      margin-right: 0;
-    }
-
-    .el-tabs__nav-wrap {
-      margin: 0;
-    }
-
-    .el-tabs__nav {
-      border: 0;
-      border-radius: 0;
-    }
-
-    .tab-label {
-      margin-left: 2px;
-    }
-
-    .el-tabs__item.is-left,
-    .t-tabs__nav-item {
+    .m-editor-sidebar-header-item {
       line-height: 15px;
-      border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
+      cursor: pointer;
 
-      &.is-left,
-      &.t-is-left {
-        &.is-active,
-        &.t-is-active {
-          background: $--sidebar-content-background-color;
-          border: 0;
-
-          i {
-            color: #353140;
-          }
+      &.is-active {
+        background: $--sidebar-content-background-color;
 
-          .magic-editor-tab-panel-title {
-            color: #353140;
-          }
+        i {
+          color: #353140;
         }
 
-        &:first-child {
-          border-right: 0;
+        .magic-editor-tab-panel-title {
+          color: #353140;
         }
       }
     }
 
-    .t-tabs__nav-item {
-      padding: 7px;
-    }
-
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);
@@ -86,6 +43,12 @@
     }
   }
 
+  .m-editor-sidebar-content {
+    height: 100%;
+    width: calc(100% - 40px);
+    overflow: auto;
+  }
+
   .el-scrollbar {
     height: 100%;
   }
@@ -109,9 +72,4 @@
       background: rgba(0, 0, 0, 0.2);
     }
   }
-
-  .el-tabs__content,
-  .el-tab-pane {
-    height: 100%;
-  }
 }

package/src/theme/theme.scss

@@ -19,5 +19,6 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-methods.scss";
 @import "./data-source-input.scss";
 @import "./key-value.scss";

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 {
@@ -201,6 +201,8 @@ export interface MenuButton {
   className?: string;
   /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   items?: MenuButton[];
+  /** 唯一标识，用于高亮 */
+  id?: string | number;
 }
 
 export interface MenuComponent {
@@ -334,18 +336,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 +428,8 @@ export interface EventSelectConfig {
   compActionConfig?: FormItem;
   /** 联动代码配置 */
   codeActionConfig?: FormItem;
+  /** 联动数据源配置 */
+  dataSourceActionConfig?: FormItem;
 }
 
 export enum KeyBindingCommand {
@@ -485,3 +486,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/formConfigs/http.ts

@@ -7,6 +7,15 @@ export default [
     type: 'switch',
     defaultValue: true,
   },
+  {
+    name: 'responseOptions',
+    items: [
+      {
+        name: 'dataPath',
+        text: '数据路径',
+      },
+    ],
+  },
   {
     type: 'fieldset',
     name: 'options',

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,13 +1,14 @@
 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) => {
@@ -24,12 +25,37 @@ export const createCodeBlockTarget = (id: Id, codeBlock: CodeBlockContent) =>
     },
   });
 
-export const createDataSourceTarget = (id: Id, ds: DataSourceSchema) =>
+export const createDataSourceTarget = (id: Id) =>
   new Target({
-    type: 'data-source',
+    type: DepTargetType.DATA_SOURCE,
     id,
-    name: ds.title || `${id}`,
     isTarget: (key: string | number, value: any) =>
       // 关联数据源对象或者在模板在使用数据源
-      (value.isBindDataSource && value.dataSourceId) || (typeof value === 'string' && value.includes(`${id}`)),
+      (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: DepTargetType.DATA_SOURCE_METHOD,
+    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';