@formily-design/formily-antd 1.0.0

package/playground/utils.ts

@@ -0,0 +1,744 @@
+import { Field, GeneralField } from '@formily/core'
+import { ISchema } from '@formily/react'
+import { get, post, ResponseResult } from './request'
+import { action } from '@formily/reactive'
+import { isStr } from '@formily/shared'
+
+/** 表单变量字段路径正则 */
+const FORM_VARIABLE_PATH_REG = /^\{\{\$values\.([\w\.]+)\}\}$/
+/**  */
+/** 判断是否是表单变量 {{$values.xxx}} 或 {{$values.xxx.yyy}} */
+const isFormVariable = (str: string) => {
+  return FORM_VARIABLE_PATH_REG.test(str)
+}
+
+/** 获取变量字符串里的表单字段路径 */
+const getFormVariableFieldPath = (str: string) => {
+  const match = FORM_VARIABLE_PATH_REG.exec(str)
+  return match ? match[1] : ''
+}
+
+/**
+ * 检测并捕获整个字符串是否完全是形如 {{ ... }} 的表达式（两端允许空白）。
+ * 捕获组 ([\s\S]*) 会得到 {{ 和 }} 中间的内容（包括换行）。
+ * 注意：如果字符串是 "hi {{name}}"（不是整个字符串由 {{...}} 包裹），则不会匹配
+ */
+const ExpRE = /^\s*\{\{([\s\S]*)\}\}\s*$/
+const Registry = {
+  /**
+   * 是否静默执行表达式（开/关错误吞噬）。
+   * 当 silent = true 时，如果表达式执行抛错，会被 catch 吞掉，并且函数返回 undefined（因为 catch 里没有 return）。
+   * 当 silent = false 时，出错会把异常抛出来。
+   */
+  silent: false,
+  /**
+   * 使用 new Function('$root', ...) 动态创建函数，并用 with($root) { ... } 把 scope 对象的属性当作变量直接可访问。
+   * 最终等价于在传入的 scope 上下文中执行 return ( expression );，然后返回这个值
+   */
+  compile(expression: string, scope: Record<string, any> = {}) {
+    if (Registry.silent) {
+      try {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-implied-eval
+        return new Function('$root', `with($root) { return (${expression}); }`)(
+          scope
+        )
+      } catch (e) {
+        console.error('compile error:', e)
+      }
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-implied-eval
+      return new Function('$root', `with($root) { return (${expression}); }`)(
+        scope
+      )
+    }
+  },
+}
+
+/**
+ * 浅解析字符串模板 {{ xxx }}，返回解析结果
+ * @example
+ * 简单算术 shallowCompile("{{ 1 + 2 }}") // => 3
+ * 读取 scope 中的变量 shallowCompile("{{ a + b }}", { a: 10, b: 5 }) // => 15
+ * 调用 scope 中的函数 shallowCompile("{{ add(a, b) }}", { a: 10, b: 5, add: (x, y) => x + y }) // => 15
+ * 访问对象属性 shallowCompile("{{ user.name }}", { user: { name: "小明", age: 20 } }) // => "小明"
+ * 访问对象属性 shallowCompile("{{ user.age > 18 ? '成人' : '未成年' }}", { user: { name: "小明", age: 20 } }) // => "成人"
+ * 调用函数 shallowCompile(`{{function(){${runner}}}}`,{ user: { name: "小明", age: 20 } })()
+ * 不包含模板，原样返回 shallowCompile("Hello World") // => "Hello World"
+ */
+export const shallowCompile = <
+  Source = any,
+  Scope extends Record<string, any> = {}
+>(
+  source: Source,
+  scope?: Scope
+) => {
+  if (isStr(source)) {
+    const matched = ExpRE.exec(source)
+    if (!matched) return source
+    return Registry.compile(matched[1], scope)
+  }
+  return source
+}
+
+/** 解析字符串函数，返回可调用函数--忽略参数名 */
+// function parseFunction<T extends (...args: any[]) => any>(code: string): T | null {
+//   if (!code?.trim()) return null
+//   try {
+//     // 统一使用 arguments 传递参数，忽略参数名
+//     return new Function(`return (${code})(...arguments)`) as T
+//   } catch (e) {
+//     console.error('Failed to parse function:', e)
+//     return null
+//   }
+// }
+
+/** 解析字符串函数，返回可调用函数 */
+function parseFunction<T extends (...args: any[]) => any>(
+  code: string,
+  params: string[]
+): T | null {
+  if (!code?.trim()) return null
+  try {
+    // 尝试从函数声明中提取函数名
+    const namedFnMatch = /function\s+(\w+)\s*\(/.exec(code)
+    if (namedFnMatch) {
+      const fnName = namedFnMatch[1]
+      // 创建函数并自动调用命名的函数
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      return new Function(
+        ...params,
+        `${code}\nreturn ${fnName}(${params.join(',')})`
+      ) as T
+    }
+    // 没有命名函数声明，直接创建
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    return new Function(...params, code) as T
+  } catch (e) {
+    console.error('Failed to parse function:', e)
+    return null
+  }
+}
+
+/** 替换 {{$values.xxx}} 变量占位符 */
+function replaceVariables(str: string, field: GeneralField): string {
+  // return str.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+  return str.replace(/\{\{\$values\.(\w+)\}\}/g, (_, key) => {
+    return field.form?.getValuesIn(key) ?? ''
+  })
+}
+
+/** 解析对象里的变量值，返回处理后的对象 */
+function parseObjectVariables(
+  params: Record<string, any>,
+  scope: Record<string, any>
+): Record<string, any> {
+  return Object.keys(params).reduce((acc, key) => {
+    if (key) {
+      const value = params[key]
+      acc[key] = /\{\{[\s\S]*\}\}/.test(value)
+        ? shallowCompile(value, scope)
+        : value
+    }
+    return acc
+  }, {} as Record<string, any>)
+}
+
+interface IRemoteDataSource {
+  url: string
+  method: string
+  headers: Record<string, string>
+  params: Record<string, string>
+  /** "function (config, data){\nconsole.log(config,data)\n}" */
+  beforeRequest: string
+  /** "function (res){\nreturn res.map(s => ({label: s.username, value: s.id}))\n}" */
+  dataHandler: string
+}
+
+/**
+ {
+	"form": {
+		"labelCol": 6,
+		"wrapperCol": 12
+	},
+	"schema": {
+		"type": "object",
+		"properties": {
+			"w6v1auut5m3": {
+				"title": "AsyncSelect",
+				"x-decorator": "FormItem",
+				"x-component": "AsyncSelect",
+				"x-validator": [],
+				"x-component-props": {},
+				"x-decorator-props": {},
+				"x-datasource-type": "remote",
+				"x-datasource-effect": {
+					"url": "https://jsonplaceholder.typicode.com/users",
+					"method": "GET",
+					"beforeRequest": "function beforeRequest(arg) {\n  console.log('before', arg)\n}",
+					"dataHandler": "function dataHandler(arg) {\n  console.log('after', arg)\n}"
+				},
+				"x-designable-id": "w6v1auut5m3",
+				"x-index": 0
+			},
+			"2co13fwl7tf": {
+				"type": "array",
+				"x-decorator": "FormItem",
+				"x-component": "ArrayCards",
+				"x-component-props": {
+					"title": "Title"
+				},
+				"x-validator": [],
+				"x-decorator-props": {},
+				"x-designable-id": "2co13fwl7tf",
+				"x-index": 0,
+				"items": {
+					"type": "object",
+					"x-designable-id": "xioweoptn2h",
+					"properties": {
+						"pjwa85a289y": {
+							"type": "void",
+							"x-component": "ArrayCards.Index",
+							"x-designable-id": "pjwa85a289y",
+							"x-index": 0
+						},
+						"w6v1auut5m3": {
+							"title": "AsyncSelect",
+							"x-decorator": "FormItem",
+							"x-component": "AsyncSelect",
+							"x-validator": [],
+							"x-component-props": {
+								"showSearch": true
+							},
+							"x-decorator-props": {},
+							"x-datasource-type": "remote",
+							"x-datasource-effect": {
+								"url": "https://jsonplaceholder.typicode.com/users",
+								"method": "GET",
+								"params": [
+									{
+										"key": "size",
+										"value": "10"
+									}
+								],
+								"beforeRequest": "function beforeRequest(config) {\n  console.log('before', config)\n}",
+								"dataHandler": "function dataHandler(data) {\n  console.log('after', data)\n  return data.map(item => ({label: item.name, value: item.name}))\n}"
+							},
+							"x-designable-id": "w6v1auut5m3",
+							"x-index": 1,
+							"x-fetchdata-onsearch": true
+						}
+					}
+				},
+				"properties": {
+					"lo4hqxkhchf": {
+						"type": "void",
+						"title": "Addition",
+						"x-component": "ArrayCards.Addition",
+						"x-designable-id": "lo4hqxkhchf",
+						"x-index": 0
+					}
+				}
+			}
+		},
+		"x-designable-id": "5r1fpvewvwq"
+	}
+}
+ */
+
+/**
+ * 遍历 schema
+ * 判断存在 x-datasource-effect 的节点 x-reactions 配置是否是数组，不是数组的话，转换为数组，并创建 '{{useAsyncDataSource(loadData_[xxx])}}' 添加在 x-reactions 的第1个元素，其中 xxx 是 properties 下子对象的属性名，将原来的 x-reactions 设置为 x-reactions 的第2个元素
+ * 返回新的 schema
+ */
+export function transformSchema(
+  schema: ISchema,
+  scope: Record<string, any>,
+  nodeKey?: string
+): ISchema {
+  if (!schema || typeof schema !== 'object') {
+    return schema
+  }
+
+  // 深拷贝 schema
+  const newSchema = Array.isArray(schema) ? [] : Object.create(null)
+
+  for (const key in schema) {
+    if (Object.prototype.hasOwnProperty.call(schema, key)) {
+      const value = schema[key as keyof ISchema]
+      if (key === 'properties' && value && typeof value === 'object') {
+        // 递归处理 properties，传递子对象的 key
+        newSchema.properties = {}
+        for (const propKey in value) {
+          if (Object.prototype.hasOwnProperty.call(value, propKey)) {
+            ;(newSchema.properties as Record<string, ISchema>)[propKey] =
+              transformSchema(value[propKey] as ISchema, scope, propKey)
+          }
+        }
+      } else if (key === 'x-datasource-effect' && value) {
+        // 节点存在 x-datasource-effect，处理 x-reactions
+        const reactions = (schema as Record<string, unknown>)['x-reactions']
+        const fetchOnSearch = (schema as Record<string, unknown>)[
+          'x-fetchdata-onsearch'
+        ]
+
+        // 将 x-datasource-effect 配置转换请求函数，并添加到 x-reactions
+        const loadDataReaction = asyncLoadDataSource(
+          transformSourceEffect(value, {
+            scope,
+            searchKey: schema['x-fetchdata-searchkey'],
+          }),
+          {
+            fetchOnSearch: !!fetchOnSearch,
+          }
+        )
+
+        /**
+         * 标识 x-datasource-effect 属性存在
+         * TODO: 为什么不保留原来的 x-datasource-effect 配置数据？
+         * 因为 x-datasource-effect 里的配置会使用 FormPathPattern，如{{$values.0.productName}}，这种配置在 Formily SchemaField 解析时内部会报错：
+         * Uncaught SyntaxError: Unexpected token '.'，因为内部识别到了变量标识 {{xxx}} 执行了 shallowCompile, FormPathPattern 的一些格式在 shallowCompile 这里会报错。
+         */
+        ;(newSchema as Record<string, unknown>)[key] = true
+
+        if (reactions !== undefined) {
+          if (Array.isArray(reactions)) {
+            // 已经是数组，插入到第1个位置
+            newSchema['x-reactions'] = [loadDataReaction, ...reactions]
+          } else {
+            // 不是数组，转换为数组
+            newSchema['x-reactions'] = [loadDataReaction, reactions]
+          }
+        } else {
+          // x-reactions 不存在，创建新数组
+          newSchema['x-reactions'] = [loadDataReaction]
+        }
+      } else if (key === 'x-reactions' && value) {
+        // 如果 x-reactions 已经被上面的 x-datasource-effect 处理过了，跳过
+        if ((schema as Record<string, unknown>)['x-datasource-effect']) {
+          // 已处理，跳过
+          continue
+        } else if (Array.isArray(value)) {
+          ;(newSchema as Record<string, unknown>)[key] = value.map((item) =>
+            transformSchema(item as ISchema, scope, nodeKey)
+          )
+        } else {
+          ;(newSchema as Record<string, unknown>)[key] = transformSchema(
+            value as ISchema,
+            scope,
+            nodeKey
+          )
+        }
+      } else if (key === 'items' && value && typeof value === 'object') {
+        // 处理 type: array 的 items 属性，传递 items 前缀作为 fieldName 的一部分
+        ;(newSchema as Record<string, unknown>)[key] = transformSchema(
+          value as ISchema,
+          scope,
+          `${nodeKey ? nodeKey + '_' : ''}items`
+        )
+      } else if (value && typeof value === 'object') {
+        ;(newSchema as Record<string, unknown>)[key] = transformSchema(
+          value as ISchema,
+          scope,
+          nodeKey
+        )
+      } else {
+        // 复制基本类型值
+        Object.defineProperty(newSchema, key, {
+          value,
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        })
+      }
+    }
+  }
+
+  return newSchema as ISchema
+}
+
+/** 将 params 存在表单依赖的字段处理为新对象返回 */
+function getDepsFormFieldParams(params: Record<string, any>) {
+  return Object.fromEntries(
+    Object.entries(params).filter(([, value]) => value && isFormVariable(value))
+  )
+}
+
+/** 收集表单依赖的字段数据，返回参数对象 */
+function getDepsFormFieldData(depsFieldObj: Record<string, any>, field: Field) {
+  return Object.entries(depsFieldObj).reduce<Record<string, any>>(
+    (acc, [key, value]) => {
+      // 获取表单字段的值作为参数字段值
+      acc[key] = field.query(getFormVariableFieldPath(value)).get('value')
+      return acc
+    },
+    {}
+  )
+}
+
+/** 将 x-datasource-effect 配置转换为执行真实请求的函数 */
+function transformSourceEffect(
+  dataConfig: IRemoteDataSource,
+  options?: {
+    /** 变量作用域 */
+    scope: Record<string, any>
+    /** 配置的搜索字段名 */
+    searchKey?: string
+  }
+) {
+  const { scope, searchKey = 'keyword' } = options ?? {}
+  const params = dataConfig?.params
+  // 请求参数依赖的表单字段集合
+  const depsFieldsObj = params ? getDepsFormFieldParams(params) : {}
+  return async (field: Field, searchValue?: string) => {
+    // localStorage 对象数据
+    const $localStorage = getLocalStorageData() ?? {}
+    // 表单数据
+    // TODO: 这里的 field.form.values 得到的是一个 Proxy 对象，看能否转换为普通对象
+    const $values = field.form.values ?? {}
+    /** 变量局部作用域 */
+    const variablesScope = { ...scope, $values, $localStorage }
+    // 构建联动参数
+    const linkageParams = getDepsFormFieldData(depsFieldsObj, field)
+    const headers = dataConfig.headers
+      ? parseObjectVariables(dataConfig.headers, variablesScope)
+      : {}
+    // 移除依赖表单字段的请求参数（将depsFieldsObj的属性从dataConfig.params中移除）
+    const configParams = Object.fromEntries(
+      Object.entries(dataConfig.params ?? {}).filter(
+        ([key]) => !depsFieldsObj[key]
+      )
+    )
+    const paramsObj = parseObjectVariables(
+      Object.assign({}, configParams ?? {}, linkageParams ?? {}),
+      variablesScope
+    )
+    // TODO: 这里搜索的请求参数 key 需要优化，应该是配置的搜索字段名
+    // 如果有搜索值，添加到请求参数中
+    if (searchValue !== undefined) {
+      paramsObj[replaceVariables(searchKey, field) || 'keyword'] = searchValue
+    }
+
+    // 处理 URL：GET 请求将参数附加到 URL，其他请求放在 body
+    let url = parseStringVariables(dataConfig.url, variablesScope)
+    const isGet = dataConfig.method?.toUpperCase() === 'GET'
+    let body: string | undefined
+
+    if (isGet) {
+      if (Object.keys(paramsObj).length > 0) {
+        const searchParams = new URLSearchParams(paramsObj)
+        url = `${url}${url.includes('?') ? '&' : '?'}${searchParams.toString()}`
+      }
+    } else {
+      body = JSON.stringify(paramsObj)
+    }
+
+    const config = {
+      url,
+      method: dataConfig.method,
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: $localStorage?.token as string,
+        ...headers,
+      },
+      body,
+    }
+
+    const beforeFn = parseFunction<(config: any) => any>(
+      dataConfig.beforeRequest,
+      ['config']
+    )
+    if (beforeFn) {
+      beforeFn(config)
+    }
+
+    return fetch(config.url, {
+      method: config.method,
+      headers: config.headers,
+      body: config.body,
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        const handlerFn = parseFunction<(result: typeof res) => any>(
+          dataConfig.dataHandler,
+          ['res']
+        )
+        return handlerFn ? handlerFn(res) : res
+      })
+  }
+}
+
+/** 内部递归函数，接收父级的 fieldName */
+function transformScopeRecursive(
+  schema: ISchema,
+  fieldName: string
+): Record<string, ReturnType<typeof transformSourceEffect>> {
+  const scope: Record<string, ReturnType<typeof transformSourceEffect>> = {}
+
+  /**
+   * 处理当前层级的 x-datasource-effect 配置
+   * x-datasource-type: 'static' | 'remote'
+   */
+  if (
+    schema['x-datasource-type'] === 'remote' &&
+    schema['x-datasource-effect']
+  ) {
+    const sourceEffect = schema['x-datasource-effect'] as IRemoteDataSource
+    scope[`loadData_${fieldName}`] = transformSourceEffect(sourceEffect)
+  }
+
+  // 递归处理子属性
+  if (schema.properties) {
+    Object.entries(schema.properties).forEach(([key, childSchema]) => {
+      const childScope = transformScopeRecursive(childSchema as ISchema, key)
+      Object.assign(scope, childScope)
+    })
+  }
+
+  // 处理 type: array 的 items 属性下的 x-datasource-effect
+  if (schema.items && typeof schema.items === 'object') {
+    const itemsScope = transformScopeRecursive(
+      schema.items as ISchema,
+      `${fieldName}__items`
+    )
+    Object.assign(scope, itemsScope)
+  }
+
+  return scope
+}
+
+/** 处理 schema 中远端数据获取的配置，添加到 scope 中 */
+export function transformScope(
+  schema: ISchema
+): Record<string, () => ReturnType<typeof transformSourceEffect>> {
+  /**
+   * x-datasource-type: 'static' | 'remote'
+   */
+  if (!schema || typeof schema !== 'object') {
+    return {}
+  }
+
+  const scope: Record<string, () => ReturnType<typeof transformSourceEffect>> =
+    {}
+
+  // 递归处理子属性，使用 properties 的 key 作为 fieldName
+  if (schema.properties) {
+    Object.entries(schema.properties).forEach(([fieldName, childSchema]) => {
+      const childScope = transformScopeRecursive(
+        childSchema as ISchema,
+        fieldName
+      )
+      Object.assign(scope, childScope)
+    })
+  }
+
+  return scope
+}
+
+/** 防抖定时器 Map，用于存储每个 field 的定时器 */
+const searchDebounceTimer = new Map<string, ReturnType<typeof setTimeout>>()
+
+/**
+ * TODO: 异步加载数据逻辑可以考虑换到 x-reactions 里通过方法直接传入，不使用 scope 的方式。
+ * 如： x-reactions=[function loadData(field) { ... }, otherReactions]
+ * 因为使用 scope 的方式需要去维护调用的名称和创建的名称一致。
+ */
+/** 异步加载数据 */
+export const asyncLoadDataSource =
+  (
+    service: (field: Field, searchValue?: string) => Promise<any>,
+    options?: { fetchOnSearch?: boolean }
+  ) =>
+  (field: Field) => {
+    // console.log('field.path', field.path?.toString())
+    // console.log('field.address', field.address?.toString())
+    field.loading = true
+    service(field).then(
+      // action.bound 用于批量动作，保证更新多次数据，只触发 1 次 Reaction 执行
+      action.bound?.((data) => {
+        // TODO: 判断是依赖的表单字段变化触发的请求，考虑清空 field.value 旧值
+        // field.value = undefined
+        field.dataSource = data?.data || data
+        field.loading = false
+      })
+    )
+
+    // 如果启用了 fetchOnSearch，通过 setComponentProps 设置 onSearch
+    if (options?.fetchOnSearch) {
+      // 先保存原有的 onSearch 引用，避免闭包中循环调用
+      const originalOnSearch = field.componentProps?.onSearch
+      // 使用 field.path 作为唯一标识
+      const fieldKey = field.path?.toString() || field.address?.toString()
+      field.setComponentProps({
+        ...field.componentProps,
+        onSearch: (value: string) => {
+          // 先调用原有的 onSearch
+          originalOnSearch?.(value)
+
+          // 清除之前的定时器
+          const existingTimer = searchDebounceTimer.get(fieldKey)
+          if (existingTimer) {
+            clearTimeout(existingTimer)
+          }
+
+          // 设置新的定时器，使用闭包捕获当前的 value
+          const timer = setTimeout(() => {
+            searchDebounceTimer.delete(fieldKey)
+            // 重新请求
+            field.loading = true
+            service(field, value).then(
+              action.bound?.((data) => {
+                field.dataSource = data?.data || data
+                field.loading = false
+              })
+            )
+          }, 300)
+          searchDebounceTimer.set(fieldKey, timer)
+        },
+      })
+    }
+  }
+
+/** API 配置接口 */
+export interface IFormApiConfig {
+  url: string
+  method: string
+  headers?: Record<string, string>
+  params?: Record<string, string>
+  beforeRequest?: string
+  dataHandler?: string
+  /**
+   * 承载表单数据的请求参数key和详情数据里获取表单数据的key
+   * 如果不配置，默认使用整个表单数据作为请求参数
+   */
+  dataKey?: string
+}
+
+/** 获取所有 localStorage 数据，返回一个对象 */
+export function getLocalStorageData() {
+  const data: Record<string, any> = {}
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i)
+    if (key) {
+      const value = localStorage.getItem(key)
+      try {
+        data[key] = value ? JSON.parse(value) : null
+      } catch {
+        data[key] = value
+      }
+    }
+  }
+  return data
+}
+
+/**
+ * 处理字符串里的变量，返回替换后的字符串
+ * 方法内部使用 shallowCompile 进行解析
+ * @example
+ * parseStringVariables('https://example.com/api?name={{$values.name}}&userid={{$localStorage.userid}}', {$values: { name: '123' }, $localStorage: { userid: 'USER_1' }}) // => 'https://example.com/api?name=123&userid=USER_1'
+ */
+export function parseStringVariables(str: string, scope: Record<string, any>) {
+  // 存在变量数据
+  if (str && /\{\{[\s\S]*\}\}/.test(str)) {
+    // 将字符串按变量格式拆分成数组，元素包含变量字符串和普通字符串
+    const parts = str.split(/(\{\{[\s\S]*?\}\})/g)
+    return parts.reduce((result, part) => {
+      // 拼接解析后的字符串
+      return result + shallowCompile(part, scope)
+    }, '')
+  }
+  return str
+}
+
+/**
+ * 执行表单 API 请求
+ * TODO: 传入的 apiConfig 里 params 配置中如果存在变量，会被提前解析，所以这里目前只能获取到具体值，而不是变量字符串。
+ * 应该是传入 schema 配置时，formily 内部就把所有变量解析（包括自定义属性里的变量），所以该方法里所有处理变量的逻辑都没有实际生效（除了url里的变量，业务url不是直接{{开头的）
+ */
+export async function executeFormApi<T = any>(
+  apiConfig: IFormApiConfig,
+  formValues?: Record<string, any>,
+  options?: {
+    apiParams?: Record<string, any>
+    /** 变量作用域 */
+    scope?: Record<string, any>
+  }
+): Promise<ResponseResult<T> | undefined> {
+  const {
+    url,
+    method,
+    headers = {},
+    params = {},
+    beforeRequest,
+    dataHandler,
+    dataKey,
+  } = apiConfig
+  const { apiParams = {}, scope } = options ?? {}
+  const $localStorage = getLocalStorageData() ?? {}
+  // 变量作用域
+  const variablesScope = { ...scope, $values: formValues ?? {}, $localStorage }
+  // 构建请求头
+  const requestHeaders: Record<string, string> = parseObjectVariables(
+    { Authorization: $localStorage?.token, ...headers },
+    variablesScope
+  )
+
+  // 构建请求参数
+  const queryParams: Record<string, any> = {
+    ...apiParams,
+    ...formValues,
+    ...parseObjectVariables(params, variablesScope),
+  }
+
+  // 构建完整 URL
+  const fullUrl = parseStringVariables(url, variablesScope)
+  const config = {
+    url: fullUrl,
+    method,
+    headers: requestHeaders,
+    params: queryParams,
+  }
+
+  // 执行 beforeRequest 钩子
+  if (beforeRequest) {
+    try {
+      const beforeFn = parseFunction(beforeRequest, ['config'])
+      beforeFn?.(config)
+    } catch (e) {
+      console.error('beforeRequest 执行失败:', e)
+    }
+  }
+
+  // 处理参数到配置的 dataKey 字段
+  if (dataKey) {
+    config.params = {
+      ...apiParams,
+      [dataKey]: config.params,
+    }
+  }
+  // 发起请求
+  let result: ResponseResult<T>
+  switch (method) {
+    case 'GET':
+      result = await get<T>(config.url, config.params, {
+        headers: config.headers,
+      })
+      break
+    default:
+      result = await post<T>(config.url, config.params, {
+        headers: config.headers,
+        method: method || 'POST',
+      })
+      break
+  }
+  // 执行 dataHandler 钩子
+  if (dataHandler) {
+    try {
+      const handlerFn = parseFunction(dataHandler, ['data'])
+      return handlerFn?.(result)
+    } catch (e) {
+      console.error('dataHandler 执行失败:', e)
+    }
+  } else {
+    return result
+  }
+}