@tmagic/editor 1.3.0-beta.4 → 1.3.0-beta.6

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/keybinding-config.ts

@@ -1,120 +1,125 @@
 import { KeyBindingCommand, KeyBindingItem } from '@editor/type';
 
+export enum KeyBindingContainerKey {
+  STAGE = 'stage',
+  LAYER_PANEL = 'layer-panel',
+}
+
 export default [
   {
     command: KeyBindingCommand.DELETE_NODE,
     keybinding: ['delete', 'backspace'],
     when: [
-      ['stage', 'keyup'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keyup'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.COPY_NODE,
     keybinding: 'ctrl+c',
     when: [
-      ['stage', 'keydown'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.PASTE_NODE,
     keybinding: 'ctrl+v',
     when: [
-      ['stage', 'keydown'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.CUT_NODE,
     keybinding: 'ctrl+x',
     when: [
-      ['stage', 'keydown'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.UNDO,
     keybinding: 'ctrl+z',
     when: [
-      ['stage', 'keydown'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.REDO,
     keybinding: 'ctrl+shift+z',
     when: [
-      ['stage', 'keydown'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.MOVE_UP_1,
     keybinding: 'up',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_DOWN_1,
     keybinding: 'down',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_LEFT_1,
     keybinding: 'left',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_RIGHT_1,
     keybinding: 'right',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_UP_10,
     keybinding: 'ctrl+up',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_DOWN_10,
     keybinding: 'ctrl+down',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_LEFT_10,
     keybinding: 'ctrl+left',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.MOVE_RIGHT_10,
     keybinding: 'ctrl+right',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.SWITCH_NODE,
     keybinding: 'tab',
     when: [
-      ['stage', 'keydown'],
-      ['layer-panel', 'keydown'],
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
     ],
   },
   {
     command: KeyBindingCommand.ZOOM_IN,
     keybinding: ['ctrl+=', 'ctrl+numpadplus'],
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.ZOOM_OUT,
     keybinding: ['ctrl+-', 'ctrl+numpad-'],
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.ZOOM_FIT,
     keybinding: 'ctrl+0',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
   {
     command: KeyBindingCommand.ZOOM_RESET,
     keybinding: 'ctrl+1',
-    when: [['stage', 'keydown']],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
   },
 ] as KeyBindingItem[];

package/src/utils/props.ts

@@ -206,6 +206,7 @@ export const eventTabConfig: TabPaneConfig = {
     {
       name: 'events',
       src: 'component',
+      labelWidth: '100px',
       type: 'event-select',
     },
   ],

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/layer/LayerNode.vue.d.ts

@@ -1,5 +1,5 @@
 import type { MContainer, MNode } from '@tmagic/schema';
-import type { LayerNodeSlots } from '../../../type';
+import { LayerNodeSlots } from '../../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     data: MNode;
     parent?: MContainer | undefined;

package/types/layouts/sidebar/layer/use-keybinding.d.ts

@@ -1,4 +1,5 @@
+import { type Ref } from 'vue';
 import type { Services } from '../../../type';
-export declare const useKeybinding: (services: Services | undefined) => {
-    isCtrlKeyDown: import("vue").Ref<boolean>;
+export declare const useKeybinding: (services: Services | undefined, contianer: Ref<HTMLDivElement | undefined>) => {
+    isCtrlKeyDown: Ref<boolean>;
 };

package/types/type.d.ts

@@ -273,6 +273,8 @@ export interface SideBarData {
 export interface ComponentItem {
     /** 显示文案 */
     text: string;
+    /** 详情，用于tooltip */
+    desc?: string;
     /** 组件类型 */
     type: string;
     /** Vue组件或url */
@@ -386,6 +388,7 @@ export interface EventSelectConfig {
     name: string;
     type: 'event-select';
     src: 'datasource' | 'component';
+    labelWidth?: string;
     /** 事件名称表单配置 */
     eventNameConfig?: FormItem;
     /** 动作类型配置 */
@@ -454,6 +457,7 @@ export interface KeyBindingCacheItem {
 export interface CodeSelectColConfig {
     type: 'code-select-col';
     name: string;
+    text: string;
     labelWidth?: number | string;
     disabled?: boolean | FilterFunction;
     display?: boolean | FilterFunction;
@@ -461,6 +465,7 @@ export interface CodeSelectColConfig {
 export interface DataSourceMethodSelectConfig {
     type: 'data-source-method-select';
     name: string;
+    text: string;
     labelWidth?: number | string;
     disabled?: boolean | FilterFunction;
     display?: boolean | FilterFunction;
@@ -473,6 +478,7 @@ export interface DataSourceFieldSelectConfig {
     disabled?: boolean | FilterFunction;
     display?: boolean | FilterFunction;
 }
+/** 依赖收集的目标类型 */
 export declare enum DepTargetType {
     DEFAULT = "default",
     /** 代码块 */
@@ -484,16 +490,28 @@ export declare enum DepTargetType {
     /** 数据源条件 */
     DATA_SOURCE_COND = "data-source-cond"
 }
+/** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
+    /** 数据源类型 */
     type: string;
+    /** 数据源名称 */
     text: string;
 }
+/** 组件树节点状态 */
 export interface LayerNodeStatus {
+    /** 显隐 */
     visible: boolean;
+    /** 展开子节点 */
     expand: boolean;
+    /** 选中 */
     selected: boolean;
 }
+/** 拖拽类型 */
 export declare enum DragType {
+    /** 从组件列表拖到画布 */
     COMPONENT_LIST = "component-list",
+    /** 拖动组件树节点 */
     LAYER_TREE = "layer-tree"
 }
+/** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
+export declare const UI_SELECT_MODE_EVENT_NAME = "ui-select";

package/types/utils/data-source/index.d.ts

@@ -1,6 +1,7 @@
 import { FormConfig } from '@tmagic/form';
 import { DataSourceSchema } from '@tmagic/schema';
 export declare const getFormConfig: (type: string, configs: Record<string, FormConfig>) => FormConfig;
+export declare const getFormValue: (type: string, values: Partial<DataSourceSchema>) => Partial<DataSourceSchema>;
 export declare const getDisplayField: (dataSources: DataSourceSchema[], key: string) => {
     value: string;
     type: 'var' | 'text';

package/types/utils/keybinding-config.d.ts

@@ -1,3 +1,7 @@
 import { KeyBindingItem } from '../type';
+export declare enum KeyBindingContainerKey {
+    STAGE = "stage",
+    LAYER_PANEL = "layer-panel"
+}
 declare const _default: KeyBindingItem[];
 export default _default;