feat(data-source,editor): http数据源params,data,headers支持函数配置

packages/data-source/src/data-sources/Http.ts

@@ -18,7 +18,7 @@
 import type { HttpOptions, RequestFunction } from '@tmagic/core';
 import { getValueByKeyPath } from '@tmagic/core';
 
-import { DataSourceOptions, HttpDataSourceSchema } from '@data-source/types';
+import type { DataSourceOptions, HttpDataSourceSchema, HttpOptionsSchema } from '@data-source/types';
 
 import DataSource from './Base';
 
@@ -74,7 +74,7 @@ export default class HttpDataSource extends DataSource<HttpDataSourceSchema> {
     code?: string | number;
   };
   /** 请求配置 */
-  public httpOptions: HttpOptions;
+  public httpOptions: HttpOptionsSchema;
 
   /** 请求函数 */
   #fetch?: RequestFunction;
@@ -115,7 +115,7 @@ export default class HttpDataSource extends DataSource<HttpDataSourceSchema> {
 
   public async init() {
     if (this.schema.autoFetch) {
-      await this.request(this.httpOptions);
+      await this.request();
     }
 
     super.init();
@@ -124,8 +124,14 @@ export default class HttpDataSource extends DataSource<HttpDataSourceSchema> {
   public async request(options: Partial<HttpOptions> = {}) {
     this.isLoading = true;
 
-    let reqOptions = {
-      ...this.httpOptions,
+    const { url, params, data, headers, ...otherHttpOptions } = this.httpOptions;
+
+    let reqOptions: HttpOptions = {
+      url: typeof url === 'function' ? url({ app: this.app, dataSource: this }) : url,
+      params: typeof params === 'function' ? params({ app: this.app, dataSource: this }) : params,
+      data: typeof data === 'function' ? data({ app: this.app, dataSource: this }) : data,
+      headers: typeof headers === 'function' ? headers({ app: this.app, dataSource: this }) : headers,
+      ...otherHttpOptions,
       ...options,
     };
 

packages/data-source/src/types.ts

@@ -1,4 +1,4 @@
-import type { DataSourceSchema, default as TMagicApp, HttpOptions, RequestFunction } from '@tmagic/core';
+import type { DataSourceSchema, default as TMagicApp, HttpOptions, Method, RequestFunction } from '@tmagic/core';
 
 import type DataSource from './data-sources/Base';
 import type HttpDataSource from './data-sources/Http';
@@ -16,9 +16,23 @@ export interface DataSourceOptions<T extends DataSourceSchema = DataSourceSchema
   [key: string]: any;
 }
 
+export interface HttpOptionsSchema {
+  /** 请求链接 */
+  url: string | ((data: { app: TMagicApp; dataSource: HttpDataSource }) => string);
+  /** query参数 */
+  params?: Record<string, string> | ((data: { app: TMagicApp; dataSource: HttpDataSource }) => Record<string, string>);
+  /** body数据 */
+  data?: Record<string, any> | ((data: { app: TMagicApp; dataSource: HttpDataSource }) => Record<string, string>);
+  /** 请求头 */
+  headers?: Record<string, string> | ((data: { app: TMagicApp; dataSource: HttpDataSource }) => Record<string, string>);
+  /** 请求方法 GET/POST */
+  method?: Method;
+  [key: string]: any;
+}
+
 export interface HttpDataSourceSchema extends DataSourceSchema {
   type: 'http';
-  options: HttpOptions;
+  options: HttpOptionsSchema;
   responseOptions?: {
     dataPath?: string;
   };

packages/editor/src/fields/KeyValue.vue

@@ -39,7 +39,7 @@
       v-if="config.advanced && showCode"
       height="200px"
       :init-values="model[name]"
-      language="json"
+      language="javascript"
       :options="{
         readOnly: disabled,
       }"
@@ -94,16 +94,19 @@ const records = ref<[string, string][]>([]);
 const showCode = ref(false);
 
 watchEffect(() => {
-  const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
+  if (typeof props.model[props.name] === 'function') {
+    showCode.value = true;
+  } else {
+    const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
 
-  for (const [, value] of initValues) {
-    if (typeof value !== 'string') {
-      showCode.value = true;
-      break;
+    for (const [, value] of initValues) {
+      if (typeof value !== 'string') {
+        showCode.value = true;
+        break;
+      }
     }
+    records.value = initValues;
   }
-
-  records.value = initValues;
 });
 
 const getValue = () => {

packages/editor/src/utils/data-source/formConfigs/http.ts

@@ -40,6 +40,7 @@ export default [
         name: 'params',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '参数',
       },
       {
@@ -53,6 +54,7 @@ export default [
         name: 'headers',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '请求头',
       },
     ],