@tmagic/editor 1.3.0-beta.5 → 1.3.0-beta.7

package/src/services/dataSource.ts

@@ -7,7 +7,7 @@ import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
 
 import type { DatasourceTypeOption } from '@editor/type';
-import { getFormConfig } from '@editor/utils/data-source';
+import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
 
@@ -50,7 +50,7 @@ class DataSource extends BaseService {
   }
 
   public getFormValue(type = 'base') {
-    return this.get('values')[type];
+    return getFormValue(type, this.get('values')[type]);
   }
 
   public setFormValue(type: string, value: Partial<DataSourceSchema>) {

package/src/theme/layer-panel.scss

@@ -1,79 +1,7 @@
-.magic-editor-layer-panel {
-  $--node-height: 22px;
-
+.m-editor-layer-panel {
   background: $--sidebar-content-background-color;
 
-  .magic-editor-layer-tree {
+  .m-editor-tree {
     padding-top: 48px;
-    background-color: $--sidebar-content-background-color;
-    color: $--font-color;
-    font-size: 13px;
-
-    .magic-editor-layer-node {
-      cursor: pointer;
-      white-space: nowrap;
-
-      .layer-node {
-        display: flex;
-        align-items: center;
-
-        &:hover {
-          background-color: $--hover-color;
-          color: $--font-color;
-        }
-
-        &.selected {
-          background-color: $--theme-color;
-          color: $--hover-color;
-        }
-
-        &.drag-inner {
-          .layer-node-content {
-            background-color: rgba($color: $--theme-color, $alpha: 0.5);
-            color: $--hover-color;
-          }
-        }
-
-        &.drag-before {
-          .layer-node-content {
-            border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
-          }
-        }
-
-        &.drag-after {
-          .layer-node-content {
-            border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
-          }
-        }
-
-        .expand-icon {
-          padding: 4px;
-          box-sizing: content-box;
-          font-size: 14px;
-        }
-
-        .layer-node-content {
-          display: flex;
-          flex: 1;
-          justify-content: space-between;
-          height: $--node-height;
-          border-top: 2px solid transparent;
-          border-bottom: 2px solid transparent;
-          .layer-node-label {
-            line-height: $--node-height;
-            flex: 1;
-            width: 100px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-
-        .layer-node-tool {
-          margin-right: 15px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
   }
 }

package/src/theme/theme.scss

@@ -22,3 +22,4 @@
 @import "./data-source-methods.scss";
 @import "./data-source-input.scss";
 @import "./key-value.scss";
+@import "./tree.scss";

package/src/theme/tree.scss

@@ -0,0 +1,72 @@
+.m-editor-tree {
+  $--node-height: 22px;
+  color: $--font-color;
+  font-size: 13px;
+
+  .m-editor-tree-node {
+    cursor: pointer;
+    white-space: nowrap;
+
+    .tree-node {
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background-color: $--hover-color;
+        color: $--font-color;
+      }
+
+      &.selected {
+        background-color: $--theme-color;
+        color: $--hover-color;
+      }
+
+      &.drag-inner {
+        .tree-node-content {
+          background-color: rgba($color: $--theme-color, $alpha: 0.5);
+          color: $--hover-color;
+        }
+      }
+
+      &.drag-before {
+        .tree-node-content {
+          border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
+        }
+      }
+
+      &.drag-after {
+        .tree-node-content {
+          border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
+        }
+      }
+
+      .expand-icon {
+        padding: 4px;
+        box-sizing: content-box;
+        font-size: 14px;
+      }
+
+      .tree-node-content {
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+        height: $--node-height;
+        border-top: 2px solid transparent;
+        border-bottom: 2px solid transparent;
+        .tree-node-label {
+          line-height: $--node-height;
+          flex: 1;
+          width: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .tree-node-tool {
+        margin-right: 15px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

package/src/type.ts

@@ -75,19 +75,25 @@ export interface CodeBlockListSlots {
   'code-block-panel-tool'(props: { id: Id; data: CodeBlockContent }): any;
 }
 
+export interface DataSourceListSlots {
+  'data-source-panel-tool'(props: { data: any }): any;
+}
+
 export interface LayerNodeSlots {
   'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface LayerPanelSlots extends LayerNodeSlots {
   'layer-panel-header'(props: {}): any;
+  'layer-node-tool'(props: { data: MNode }): any;
+  'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface PropsPanelSlots {
   'props-panel-header'(props: {}): any;
 }
 
-export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots;
+export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots & DataSourceListSlots;
 
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
@@ -595,6 +601,8 @@ export interface LayerNodeStatus {
   expand: boolean;
   /** 选中 */
   selected: boolean;
+  /** 是否可拖拽 */
+  draggable: boolean;
 }
 
 /** 拖拽类型 */
@@ -607,3 +615,10 @@ export enum DragType {
 
 /** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
 export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';
+
+export interface TreeNodeData {
+  id: Id;
+  name?: string;
+  items?: TreeNodeData[];
+  [key: string]: any;
+}

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

@@ -1,4 +1,4 @@
-import { FormConfig } from '@tmagic/form';
+import { FormConfig, FormState } from '@tmagic/form';
 import { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import BaseFormConfig from './formConfigs/base';
@@ -8,47 +8,72 @@ const fillConfig = (config: FormConfig): FormConfig => [
   ...BaseFormConfig(),
   ...config,
   {
-    type: 'panel',
-    title: '数据定义',
+    type: 'tab',
     items: [
       {
-        name: 'fields',
-        type: 'data-source-fields',
-        defaultValue: () => [],
+        title: '数据定义',
+        items: [
+          {
+            name: 'fields',
+            type: 'data-source-fields',
+            defaultValue: () => [],
+          },
+        ],
       },
-    ],
-  },
-  {
-    type: 'panel',
-    title: '方法定义',
-    items: [
       {
-        name: 'methods',
-        type: 'data-source-methods',
-        defaultValue: () => [],
+        title: '方法定义',
+        items: [
+          {
+            name: 'methods',
+            type: 'data-source-methods',
+            defaultValue: () => [],
+          },
+        ],
       },
-    ],
-  },
-  {
-    type: 'panel',
-    title: '事件配置',
-    display: false,
-    items: [
       {
-        name: 'events',
-        src: 'datasource',
-        type: 'event-select',
+        title: '事件配置',
+        display: false,
+        items: [
+          {
+            name: 'events',
+            src: 'datasource',
+            type: 'event-select',
+          },
+        ],
       },
-    ],
-  },
-  {
-    type: 'panel',
-    title: 'mock数据',
-    items: [
       {
-        name: 'mocks',
-        type: 'data-source-mocks',
-        defaultValue: () => [],
+        title: 'mock数据',
+        items: [
+          {
+            name: 'mocks',
+            type: 'data-source-mocks',
+            defaultValue: () => [],
+          },
+        ],
+      },
+      {
+        title: '请求参数裁剪',
+        display: (formState: FormState, { model }: any) => model.type === 'http',
+        items: [
+          {
+            name: 'beforeRequest',
+            type: 'vs-code',
+            parse: true,
+            height: '600px',
+          },
+        ],
+      },
+      {
+        title: '响应数据裁剪',
+        display: (formState: FormState, { model }: any) => model.type === 'http',
+        items: [
+          {
+            name: 'afterResponse',
+            type: 'vs-code',
+            parse: true,
+            height: '600px',
+          },
+        ],
       },
     ],
   },
@@ -65,6 +90,64 @@ export const getFormConfig = (type: string, configs: Record<string, FormConfig>)
   }
 };
 
+export const getFormValue = (type: string, values: Partial<DataSourceSchema>): Partial<DataSourceSchema> => {
+  if (type !== 'http') {
+    return values;
+  }
+
+  return {
+    beforeRequest: `(options, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口调用之前，会运行该函数，将这个函数的返回值作为该数据源接口的入参
+   *
+   * options: HttpOptions
+   *
+   * interface HttpOptions {
+   *  // 请求链接
+   *  url: string;
+   *  // query参数
+   *  params?: Record<string, string>;
+   *  // body数据
+   *  data?: Record<string, any>;
+   *  // 请求头
+   *  headers?: Record<string, string>;
+   *  // 请求方法 GET/POST
+   *  method?: Method;
+   * }
+   *
+   * context：上下文对象
+   *
+   * interface Content {
+   *  app: AppCore;
+   *  dataSource: HttpDataSource;
+   * }
+   *
+   * return: HttpOptions
+   */
+
+  // 此处的返回值会作为这个接口的入参
+  return options;
+}`,
+    afterResponse: `(response, context) => {
+  /**
+   * 用户可以直接编写函数，在原始接口返回之后，会运行该函数，将这个函数的返回值作为该数据源接口的返回
+
+    * context：上下文对象
+    *
+    * interface Content {
+    *  app: AppCore;
+    *  dataSource: HttpDataSource;
+    * }
+    *
+    */
+
+  // 此处的返回值会作为这个接口的返回值
+  return response;
+}`,
+    ...values,
+  };
+};
+
 export const getDisplayField = (dataSources: DataSourceSchema[], key: string) => {
   const displayState: { value: string; type: 'var' | 'text' }[] = [];
 

package/src/utils/tree.ts

@@ -0,0 +1,15 @@
+import type { Id } from '@tmagic/schema';
+import { getKeys } from '@tmagic/utils';
+
+import type { LayerNodeStatus } from '@editor/type';
+
+export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => {
+  const nodeStatus = nodeStatusMap.get(id);
+
+  if (!nodeStatus) return;
+  getKeys(status).forEach((key) => {
+    if (nodeStatus[key] !== undefined && status[key] !== undefined) {
+      nodeStatus[key] = Boolean(status[key]);
+    }
+  });
+};

package/types/{layouts/sidebar/layer/LayerNode.vue.d.ts → components/Tree.vue.d.ts}

@@ -1,30 +1,32 @@
-import type { MContainer, MNode } from '@tmagic/schema';
-import { LayerNodeSlots } from '../../../type';
+import type { Id } from '@tmagic/schema';
+import type { LayerNodeStatus, TreeNodeData } from '../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    data: MNode;
-    parent?: MContainer | undefined;
+    data: TreeNodeData[];
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number | undefined;
-    filterText?: string | undefined;
-    isCtrlKeyDown?: boolean | undefined;
+    emptyText?: string | undefined;
 }>, {
     indent: number;
-    filterText: string;
-    isCtrlKeyDown: boolean;
+    emptyText: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    data: MNode;
-    parent?: MContainer | undefined;
+    data: TreeNodeData[];
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number | undefined;
-    filterText?: string | undefined;
-    isCtrlKeyDown?: boolean | undefined;
+    emptyText?: string | undefined;
 }>, {
     indent: number;
-    filterText: string;
-    isCtrlKeyDown: boolean;
+    emptyText: string;
 }>>>, {
-    filterText: string;
+    emptyText: string;
     indent: number;
-    isCtrlKeyDown: boolean;
-}, {}>, LayerNodeSlots>;
+}, {}>, {
+    'tree-node-content'(props: {
+        data: TreeNodeData;
+    }): any;
+    'tree-node-tool'(props: {
+        data: TreeNodeData;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/TreeNode.vue.d.ts

@@ -0,0 +1,47 @@
+import type { Id } from '@tmagic/schema';
+import type { LayerNodeStatus, TreeNodeData } from '../type';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    data: TreeNodeData;
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number | undefined;
+}>, {
+    indent: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    data: TreeNodeData;
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number | undefined;
+}>, {
+    indent: number;
+}>>>, {
+    indent: number;
+}, {}>, {
+    'tree-node-tool'(props: {
+        data: TreeNodeData;
+    }): any;
+    'tree-node-content'(props: {
+        data: TreeNodeData;
+    }): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/layouts/CodeEditor.vue.d.ts

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     autoSave?: boolean | undefined;
     parse?: boolean | undefined;
 }>, {
+    initValues: string;
     autoSave: boolean;
     language: string;
     options: () => {
@@ -37,6 +38,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     autoSave?: boolean | undefined;
     parse?: boolean | undefined;
 }>, {
+    initValues: string;
     autoSave: boolean;
     language: string;
     options: () => {
@@ -50,9 +52,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     options: {
         [key: string]: any;
     };
+    parse: boolean;
+    initValues: any;
     language: string;
     autoSave: boolean;
-    parse: boolean;
 }, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts

@@ -1,11 +1,7 @@
+import { type DataSourceListSlots } from '../../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
     filter(val: string): void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    "data-source-panel-tool"?(_: {
-        id: any;
-        data: any;
-    }): any;
-}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, DataSourceListSlots>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts

@@ -1,2 +1,8 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+import type { DataSourceListSlots } from '../../../type';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, DataSourceListSlots>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/layouts/sidebar/layer/LayerPanel.vue.d.ts

@@ -1,4 +1,4 @@
-import type { LayerPanelSlots, MenuButton, MenuComponent } from '../../../type';
+import { LayerPanelSlots, MenuButton, MenuComponent } from '../../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     layerContentMenu: (MenuButton | MenuComponent)[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{