feat(src/packages): 大屏自定义请求新增第三方接口动态获取Token功能

-import type { AxiosResponse } from 'axios';
-import type { RequestOptions, Result } from '/#/external/axios';
-import type { AxiosTransform, CreateAxiosOptions } from '@/utils/external/http/axios/axiosTransform';
-import { useGlobSetting } from '@/hooks/external/setting';
-import { RequestEnum, ContentTypeEnum } from '@/enums/external/httpEnum';
-import { isString } from '@/utils/external/is';
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth';
-import { setObjToUrlParams, deepMerge } from '@/utils/external';
-import { formatRequestDate, joinTimestamp } from '@/utils/external/http/axios/helper';
-import { VAxios } from '@/utils/external/http/axios/Axios';
-import { checkStatus } from './checkStatus';
+import type { AxiosResponse } from 'axios'
+import type { RequestOptions, Result } from '/#/external/axios'
+import type { AxiosTransform, CreateAxiosOptions } from '@/utils/external/http/axios/axiosTransform'
+import { useGlobSetting } from '@/hooks/external/setting'
+import { RequestEnum, ContentTypeEnum } from '@/enums/external/httpEnum'
+import { isString } from '@/utils/external/is'
+import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
+import { setObjToUrlParams, deepMerge } from '@/utils/external'
+import { formatRequestDate, joinTimestamp } from '@/utils/external/http/axios/helper'
+import { VAxios } from '@/utils/external/http/axios/Axios'
+import { checkStatus } from './checkStatus'
 
-const globSetting = useGlobSetting();
-const urlPrefix = globSetting.urlPrefix;
+const globSetting = useGlobSetting()
+const urlPrefix = globSetting.urlPrefix
 
 /**
  * @description: 数据处理，方便区分多种处理方式
@@ -21,62 +21,59 @@ const transform: AxiosTransform = {
    * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
    */
   transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
-    const { isReturnNativeResponse } = options;
+    const { isReturnNativeResponse } = options
     // 是否返回原生响应头 比如：需要获取响应头时使用该属性
     if (isReturnNativeResponse) {
-      return res;
+      return res
     }
-    return res.data;
+    return res.data
   },
 
   // 请求之前处理config
   beforeRequestHook: (config, options) => {
-    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options;
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true } = options
 
     if (joinPrefix) {
-      config.url = `${urlPrefix}${config.url}`;
+      config.url = `${urlPrefix}${config.url}`
     }
 
     if (apiUrl && isString(apiUrl)) {
-      config.url = `${apiUrl}${config.url}`;
+      config.url = `${apiUrl}${config.url}`
     }
 
-    const params = config.params || {};
-    const data = config.data || false;
-    formatDate && data && !isString(data) && formatRequestDate(data);
+    const params = config.params || {}
+    const data = config.data || false
+    formatDate && data && !isString(data) && formatRequestDate(data)
     if (config.method?.toUpperCase() === RequestEnum.GET) {
       if (!isString(params)) {
         // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
-        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false))
       } else {
         // 兼容restful风格
-        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
-        config.params = undefined;
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`
+        config.params = undefined
       }
     } else {
       if (!isString(params)) {
-        formatDate && formatRequestDate(params);
+        formatDate && formatRequestDate(params)
         if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
-          config.data = data;
-          config.params = params;
+          config.data = data
+          config.params = params
         } else {
           // 非GET请求如果没有提供data，则将params视为data
-          config.data = params;
-          config.params = undefined;
+          config.data = params
+          config.params = undefined
         }
         if (joinParamsToUrl) {
-          config.url = setObjToUrlParams(
-            config.url as string,
-            Object.assign({}, config.params, config.data)
-          );
+          config.url = setObjToUrlParams(config.url as string, Object.assign({}, config.params, config.data))
         }
       } else {
         // 兼容restful风格
-        config.url = config.url + params;
-        config.params = undefined;
+        config.url = config.url + params
+        config.params = undefined
       }
     }
-    return config;
+    return config
   },
 
   /**
@@ -84,21 +81,32 @@ const transform: AxiosTransform = {
    */
   requestInterceptors: (config, options) => {
     // 请求之前处理config
-    const { requestOptions } = config;
-    const { withShareToken } = requestOptions || {};
-    const { requestOptions: { withToken } = {} } = options;
+    const { requestOptions } = config
+    const { withShareToken } = requestOptions || {}
+    const { requestOptions: { withToken } = {} } = options
+    const { withThirdTokenPrefix, withThirdTokenKey, withThirdTokenString } = config.requestOptions as Recordable
     if (withToken !== false) {
-      const shareToken = getShareJwtToken();
+      const shareToken = getShareJwtToken()
       if (withShareToken && shareToken) {
         config.headers!['X-Authorization'] = options.authenticationScheme
           ? `${options.authenticationScheme} ${shareToken}`
-          : shareToken;
+          : shareToken
       } else {
-        const token = getJwtToken();
-        if (token) {
-          config.headers!['X-Authorization'] = options.authenticationScheme
-            ? `${options.authenticationScheme} ${token}`
-            : token;
+        const token = getJwtToken()
+        if (!withThirdTokenString) {
+          // 则是此平台
+          if (token) {
+            config.headers!['X-Authorization'] = options.authenticationScheme
+              ? `${options.authenticationScheme} ${token}`
+              : token
+          }
+        } else {
+          // 第三方接口
+          const authenticationScheme = withThirdTokenPrefix ? withThirdTokenPrefix : null
+          const tokenKey = withThirdTokenKey ? withThirdTokenKey : null
+          config.headers![tokenKey!] = withThirdTokenPrefix
+            ? `${authenticationScheme} ${withThirdTokenString}`
+            : `${withThirdTokenString}`
         }
       }
     }
@@ -109,25 +117,22 @@ const transform: AxiosTransform = {
    * @description: 响应拦截器处理
    */
   responseInterceptors: (res: AxiosResponse<any>) => {
-    return res;
+    return res
   },
 
   /**
    * @description: 响应错误处理
    */
   responseInterceptorsCatch: (error: any) => {
+    const { response, config } = error || {}
+    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none'
+    const errorMsgIsObj = typeof response?.data === 'object'
+    const msg: string = errorMsgIsObj ? response?.data?.message || response?.data?.msg : response?.data
 
-    const { response, config } = error || {};
-    const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
-    const errorMsgIsObj = typeof response?.data === 'object';
-    const msg: string = errorMsgIsObj
-      ? response?.data?.message || response?.data?.msg
-      : response?.data;
-
-    const flag = checkStatus(error?.response?.status, msg, errorMessageMode);
-    return Promise.reject(response?.data);
-  },
-};
+    const flag = checkStatus(error?.response?.status, msg, errorMessageMode)
+    return Promise.reject(response?.data)
+  }
+}
 
 function createAxios(opt?: Partial<CreateAxiosOptions>) {
   return new VAxios(
@@ -169,11 +174,11 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           ignoreCancelToken: true,
           // 是否携带token
           withToken: true
-        },
+        }
       },
       opt || {}
     )
-  );
+  )
 }
-export const customHttp = createAxios();
 
+export const customHttp = createAxios()

-import { RequestBodyEnum, RequestHttpEnum, RequestParams } from "@/enums/httpEnum"
-import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d"
-import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
-import { isShareMode } from "@/views/share/hook"
-import { customHttp } from "./http"
-import { SelectTimeAggregationFieldEnum } from "@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation"
+import { RequestBodyEnum, RequestHttpEnum, RequestParams, RequestParamsObjType } from '@/enums/httpEnum'
+import { ExtraRequestConfigType } from '@/store/external/modules/extraComponentInfo.d'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { isShareMode } from '@/views/share/hook'
+import { customHttp } from './http'
+import { SelectTimeAggregationFieldEnum } from '@/views/chart/ContentConfigurations/components/ChartData/external/components/SelectTImeAggregation'
 
 export enum ParamsType {
   REQUIRED,
@@ -20,7 +20,7 @@ const regDynamicParams = /(?={).+?(?<=})/g
 
 /**
  * @description 判断是否是动态参数
- * @param url 
+ * @param url
  */
 export const isDynamicUrl = (url: string) => {
   regDynamicParams.lastIndex = 0
@@ -29,7 +29,7 @@ export const isDynamicUrl = (url: string) => {
 
 /**
  * @description 解析动态参数
- * @param url 
+ * @param url
  */
 export const decomposeDynamicParams = (url: string) => {
   regDynamicParams.lastIndex = 0
@@ -46,8 +46,8 @@ export const decomposeDynamicParams = (url: string) => {
 
 /**
  * @description 正则替换url中的动态参数
- * @param requestUrl 
- * @param Params 
+ * @param requestUrl
+ * @param Params
  */
 const getDynamicRequestUrl = (requestUrl = '', Params: Recordable) => {
   requestUrl = decodeURI(requestUrl || '')
@@ -101,9 +101,9 @@ const handleParams = (Params: Recordable) => {
      * 源代码 Params.keys = (Params.keys || [] as any).join(',')
      */
     if (!Array.isArray(Params.keys)) {
-      Params.keys = ([Params.keys] || [] as any).join(',')
+      Params.keys = ([Params.keys] || ([] as any)).join(',')
     } else {
-      Params.keys = (Params.keys || [] as any).join(',')
+      Params.keys = (Params.keys || ([] as any)).join(',')
     }
     //ft
   }
@@ -115,27 +115,37 @@ const handleParams = (Params: Recordable) => {
     Reflect.deleteProperty(Params, SelectTimeAggregationFieldEnum.TIME_PERIOD)
   }
 
-  return Object.keys(Params).filter(Boolean).reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
+  return Object.keys(Params)
+    .filter(Boolean)
+    .reduce((prev, next) => ({ ...prev, [next]: Params[next] }), {})
 }
 
 //post请求动态追加query参数
 const objConvertQuery = (data: Recordable) => {
-  const _result = [];
+  const _result = []
   for (const key in data) {
-    const value = data[key];
+    const value = data[key]
     if (value.constructor == Array) {
       value.forEach(function (_value) {
-        _result.push(key + "=" + _value);
-      });
+        _result.push(key + '=' + _value)
+      })
     } else {
-      _result.push(key + '=' + value);
+      _result.push(key + '=' + value)
     }
   }
-  return _result.join('&');
+  return _result.join('&')
 }
 
 export const customRequest = async (request: RequestConfigType) => {
-  const { requestHttpType, requestParams, requestParamsBodyType, requestOriginUrl } = request as ExtraRequestConfigType
+  const {
+    requestHttpType,
+    requestParams,
+    requestParamsBodyType,
+    requestOriginUrl,
+    requestVerificationToken,
+    requestTokenKey,
+    requestTokenSuffix
+  } = request as ExtraRequestConfigType
   let { requestUrl } = request as ExtraRequestConfigType
   const { Header, Body } = requestParams
   let { Params } = requestParams
@@ -155,18 +165,47 @@ export const customRequest = async (request: RequestConfigType) => {
    * 修改后代码 requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl: `${requestUrl}?${objConvertQuery(Params)}
    */
   Params = handleParams(Params)
-  
-  return customHttp.request<any>({
-    url: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
-    baseURL: getOriginUrl(requestOriginUrl!),
-    method: requestHttpType,
-    params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
-    data: body,
-    headers: extraValue(Header)
-  }, {
-    joinPrefix: false,
-    apiUrl: '',
-    withShareToken: isShareMode()
-  })
+  return customHttp.request<any>(
+    {
+      url:
+        requestHttpType === RequestHttpEnum.GET.toUpperCase() ? requestUrl : `${requestUrl}?${objConvertQuery(Params)}`,
+      baseURL: requestVerificationToken ? '' : getOriginUrl(requestOriginUrl!), // 如果是第三方接口，则无需添加baseURL
+      method: requestHttpType,
+      params: requestHttpType === RequestHttpEnum.GET.toUpperCase() ? Params : null,
+      data: body,
+      headers: extraValue(Header)
+    },
+    {
+      joinPrefix: false,
+      apiUrl: '',
+      withShareToken: isShareMode(),
+      withThirdTokenString: requestVerificationToken,
+      withThirdTokenKey: requestTokenKey,
+      withThirdTokenPrefix: requestTokenSuffix
+    }
+  )
   //ft
 }
+
+export interface thirdInterfaceRequest {
+  requestOriginUrl: string
+  body: RequestParamsObjType
+}
+
+//特殊处理第三方接口,一般获取token是POST请求,暂定POST
+export const customThirdInterfaceRequest = async (request: thirdInterfaceRequest) => {
+  const { body, requestOriginUrl } = request
+
+  return customHttp.request<any>(
+    {
+      url: requestOriginUrl,
+      method: RequestHttpEnum.POST,
+      data: body
+    },
+    {
+      joinPrefix: false,
+      apiUrl: '',
+      withToken: false
+    }
+  )
+}

+export enum DataTypeEnum {
+  DATA_RANGE = 'dataRange',
+  DATA_INPUT = 'dataInput'
+}
+
+export enum DataTypeNameEnum {
+  DATA_RANGE = '日期区间',
+  DATA_INPUT = '文本输入'
+}

+export enum TokenEnum {
+  DEFAULT_TOKEN = 'Token',
+  TOKEN_STRING = 'TokenString',
+  NO_VERIFICATION = 'NoVerification'
+}
+
+export enum TokenNameEnum {
+  DEFAULT_TOKEN = 'Token',
+  TOKEN_STRING = '令牌',
+  NO_VERIFICATION = '无验证'
+}

@@ -23,7 +23,7 @@ export enum EditCanvasTypeEnum {
   IS_CREATE = 'isCreate',
   IS_DRAG = 'isDrag',
   IS_SELECT = 'isSelect',
-  IS_CODE_EDIT = "isCodeEdit"
+  IS_CODE_EDIT = 'isCodeEdit'
 }
 
 // 编辑区域
@@ -61,10 +61,9 @@ export enum EditCanvasConfigEnum {
   BACKGROUND_IMAGE = 'backgroundImage',
   SELECT_COLOR = 'selectColor',
   PREVIEW_SCALE_TYPE = 'previewScaleType',
-  ANIMATION_STYLE_CONFIG = 'animationsStyleConfig',
+  ANIMATION_STYLE_CONFIG = 'animationsStyleConfig'
 }
 
-
 export interface EditCanvasConfigType {
   // 滤镜-启用
   [FilterEnum.FILTERS_SHOW]: boolean
@@ -176,8 +175,8 @@ type RequestPublicConfigType = {
 
 // 数据池项类型
 export type RequestDataPondItemType = {
-  dataPondId: string,
-  dataPondName: string,
+  dataPondId: string
+  dataPondName: string
   dataPondRequestConfig: RequestConfigType
 }
 
@@ -189,6 +188,14 @@ export interface RequestGlobalConfigType extends RequestPublicConfigType {
   requestOriginUrl?: string
   // 公共数据池
   requestDataPond: RequestDataPondItemType[]
+  // 验证方式
+  requestVerificationMethods?: TokenEnum
+  // 全局Token
+  requestVerificationToken?: string
+  // 请求头里的Token键
+  requestTokenKey?: string
+  // 请求头里的Token前缀
+  requestTokenSuffix?: string,
 }
 
 // 单个图表请求配置
@@ -211,6 +218,12 @@ export interface RequestConfigType extends RequestPublicConfigType {
   requestSQLContent: {
     sql: string
   }
+   // Token
+   requestVerificationToken?: string
+   // 请求头里的Token键
+   requestTokenKey?: string
+   // 请求头里的Token前缀
+   requestTokenSuffix?: string
 }
 
 // Store 类型

@@ -135,7 +135,9 @@ function createNewPageItem(id: string = getUUID(), title = '页面'): PageChartE
         },
         Header: {},
         Params: {}
-      }
+      },
+      requestVerificationMethods: 'Token',
+      requestVerificationToken: '',
     },
     // 图表数组（需存储给后端）
     componentList: []

@@ -119,7 +119,16 @@ export class VAxios {
       if (userStore) {
         try {
           const { requestOptions = {} } = config
-          const { withShareToken, withToken } = requestOptions
+          const { withShareToken, withToken, withThirdTokenString } = requestOptions
+          if (withThirdTokenString) {
+          //三方平台逻辑
+          const res = jwt_decode(withThirdTokenString) as Recordable;
+          const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000;
+          if (currentTime >= res?.exp) {
+            window['$message'].warning('第三方平台Token已经失效，请您重新返回设计页面点击执行请求获取最新Token')
+           }
+          } else {
+          //此平台逻辑
           const token = withShareToken && withToken ? userStore.shareJwtToken : userStore.jwtToken
           const doRefresh = withShareToken && withToken ? userStore.doShareRefresh : userStore.doRefresh
           if (token) {
@@ -129,7 +138,8 @@ export class VAxios {
               await this.refreshTokenBeforeReq(doRefresh);
             }
           }
-
+         //
+         }
         } catch (error) {
           userStore.logout();
         }

@@ -38,3 +38,30 @@ export const parseWebUrl = (str = window.location.search) => {
   str.replace(reg, (_, k, v) => (params[k] = v))
   return params
 }
+
+//嵌套对象转换为级联选择器数据格式
+interface cascadingData {
+  label: string
+  value: string | cascadingData[] | number
+  children: cascadingData[] | null
+}
+export const convertToCascadingData = (obj: Recordable): cascadingData[] => {
+  const result: cascadingData[] = []
+  for (const key in obj) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (obj.hasOwnProperty(key)) {
+      let value: cascadingData[] | string | number
+      if (typeof obj[key] === 'object' && obj[key] !== null) {
+        value = convertToCascadingData(obj[key])
+      } else {
+        value = String(obj[key])
+      }
+      result.push({
+        label: key,
+        value,
+        children: Array.isArray(value) ? value : null
+      })
+    }
+  }
+  return result
+}

@@ -166,6 +166,20 @@ const closeFilter = () => {
   showModal.value = false
 }
 
+// 发送请求
+const sendHandle = async () => {
+  try {
+    const res = await fetchHandle()
+    if (res) {
+      const { value } = useFilterFn(targetData.value.filter, res)
+      targetData.value.option.dataset = value
+      return
+    }
+  } catch(e) {
+    console.error(e)
+  }
+}
+
 // 新增过滤器
 const saveFilter = () => {
   if (errorFlag.value) {
@@ -174,6 +188,7 @@ const saveFilter = () => {
   }
   targetData.value.filter = filter.value
   closeFilter()
+  sendHandle()
 }
 
 watch(

@@ -14,21 +14,18 @@ import { RequestDataTypeEnum } from '@/enums/external/httpEnum'
 
 const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { targetData } = useTargetData()
- 
-
 
 const requestModal = ref<InstanceType<typeof RequestModal>>()
 
 const designStore = useDesignStore()
 
-
 /**
-   * ft 修改在公共接口下拉框里默认选择公共接口
-   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
-   * 源代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
-   * 修改后的代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
-   * 修改后代码在//ft之间
-   */
+ * ft 修改在公共接口下拉框里默认选择公共接口
+ * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+ * 源代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
+ * 修改后的代码 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
+ * 修改后代码在//ft之间
+ */
 const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.Pond)
 
 const getApiRequestType: SelectOption[] = [
@@ -43,7 +40,7 @@ const showMatching = ref(false)
 let firstFocus = 0
 let lastFilter: any = undefined
 
-const { fetchTargetData, } = useFetchTargetData()
+const { fetchTargetData } = useFetchTargetData()
 
 // 发送请求
 const sendHandle = async () => {
@@ -63,9 +60,9 @@ const sendHandle = async () => {
   } finally {
     loading.value = false
   }
-
 }
 
+
 // 颜色
 const themeColor = computed(() => {
   return designStore.getAppTheme
@@ -73,6 +70,9 @@ const themeColor = computed(() => {
 
 const handleClickPanel = () => {
   unref(requestModal as any)?.openModal?.(true, unref(selectedRequestType))
+  if (selectedRequestType.value === RequestDataTypeEnum.AJAX) {
+    targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
+  }
 }
 
 // TODO socket 请求时会触发
@@ -81,7 +81,7 @@ watchEffect(() => {
   /**
    * FT 修改
    */
-  if(!filter) return
+  if (!filter) return
   //ft
   if (lastFilter !== filter && firstFocus) {
     lastFilter = filter
@@ -93,8 +93,6 @@ watchEffect(() => {
 onBeforeUnmount(() => {
   lastFilter = null
 })
-
-
 </script>
 
 <template>
@@ -137,8 +135,6 @@ onBeforeUnmount(() => {
   </div>
 </template>
 
-
-
 <style lang="scss" scoped>
 @include thingsKit('chart-configurations-data-ajax') {
   .n-card-shallow {
@@ -174,4 +170,4 @@ onBeforeUnmount(() => {
     }
   }
 }
-</style> 
+</style>

 <script setup lang="ts">
-import { NInput, NInputNumber, NInputGroup, NButton, NSelect, SelectOption, NTabs, NTabPane, NSpace } from 'naive-ui'
+import { NInput, NInputNumber, NInputGroup, NSelect, SelectOption, NTabs, NTabPane } from 'naive-ui'
 import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
 import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
 import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams } from '@/enums/httpEnum';
@@ -7,9 +7,6 @@ import { ref, unref } from 'vue';
 import DefaultRequestContent from './DefaultRequestContent.vue';
 import SqlConfiguration from './SqlConfiguration.vue';
 import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; 
-
-const chartEditStore = useChartEditStore()
 
 const requestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
 
@@ -39,7 +36,7 @@ const getConfigurationData = (): RequestConfigType => {
       sql: unref(requestSQLContentRef)
     },
     requestParams: unref(requestParamsRef),
-    requestUrl: `${chartEditStore.getRequestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
+    requestUrl: `${unref(requestUrlRef)}`
   }
 }
 
@@ -53,7 +50,7 @@ const setConfigurationData = (request: RequestConfigType) => {
   requestParamsBodyTypeRef.value = requestParamsBodyType
   requestSQLContentRef.value = requestSQLContent.sql
   requestParamsRef.value = requestParams 
-  requestUrlRef.value = !requestUrl ? ``: 'h' + requestUrl?.split('h')[1] 
+  requestUrlRef.value = requestUrl
 }
 
 defineExpose({

 <script lang="ts" setup>
-import { RequestBodyEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
-import { NTabPane, NTabs } from 'naive-ui';
-import { ref } from 'vue';
-import ParamsTable from './ParamsTable.vue';
-import RequestBody from './RequestBody.vue';
+import { RequestBodyEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { NTabPane, NTabs } from 'naive-ui'
+import { ref } from 'vue'
+import ParamsTable from './ParamsTable.vue'
+import RequestBody from './RequestBody.vue'
 
 const props = defineProps<{
   value: RequestParams
@@ -21,7 +21,6 @@ const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
 const handleUpdate = (key: RequestParamsTypeEnum, value: Recordable) => {
   emit('update:value', { ...props.value, [key]: value })
 }
-
 </script>
 
 <template>
@@ -30,24 +29,29 @@ const handleUpdate = (key: RequestParamsTypeEnum, value: Recordable) => {
       <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
     </NTabs>
     <section v-if="tabValue === RequestParamsTypeEnum.PARAMS">
-      <ParamsTable :value="value[RequestParamsTypeEnum.PARAMS]"
-        @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.PARAMS, value)" />
+      <ParamsTable
+        :value="value[RequestParamsTypeEnum.PARAMS]"
+        @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.PARAMS, value)"
+      />
     </section>
 
-    <RequestBody :value="value" @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.BODY, value)"
-      @update:requestParamsBodyType="handleSyncRequestParamsBodyType" :requestParamsBodyType="requestParamsBodyType"
-      v-if="tabValue === RequestParamsTypeEnum.BODY" />
-
-    <ParamsTable v-if="tabValue === RequestParamsTypeEnum.HEADER" :value="value.Header"
-      @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.HEADER, value)" />
+    <RequestBody
+      :value="value"
+      @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.BODY, value)"
+      @update:requestParamsBodyType="handleSyncRequestParamsBodyType"
+      :requestParamsBodyType="requestParamsBodyType"
+      v-if="tabValue === RequestParamsTypeEnum.BODY"
+    />
+
+    <ParamsTable
+      v-if="tabValue === RequestParamsTypeEnum.HEADER"
+      :value="value.Header"
+      @update:value="(value: Recordable) => handleUpdate(RequestParamsTypeEnum.HEADER, value)"
+    />
   </section>
 </template>
 
 <style lang="scss" scoped>
-.container {
-  width: 600px;
-}
-
 .body-container {
   margin-top: 20px;
 }

 <script lang="ts" setup>
-import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
-import { icon } from '@/plugins';
-import { NButton, NCard, NCollapseTransition, NIcon, NInput, NInputGroup, NInputNumber, NSelect, NSpace, NTag, NTooltip, SelectOption } from 'naive-ui';
-import { computed, ref, unref } from 'vue';
+import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { icon } from '@/plugins'
+import {
+  NButton,
+  NCard,
+  NCollapseTransition,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputNumber,
+  NSelect,
+  NSpace,
+  NTag,
+  NTooltip,
+  SelectOption,
+  NCascader
+} from 'naive-ui'
+import { computed, ref, unref, onMounted, reactive } from 'vue'
 import GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
 import { ChevronDown, ChevronUp } from '@vicons/carbon'
-import { useDesignStore } from '@/store/modules/designStore/designStore';
-import { selectTimeOptions } from '../../../index.d';
-import { useTargetData } from '../../../../hooks/useTargetData.hook';
-import { RequestHttpIntervalEnum } from '@/enums/httpEnum';
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { selectTimeOptions } from '../../../index.d'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { RequestDataTypeEnum, RequestHttpIntervalEnum } from '@/enums/httpEnum'
+import { TokenNameEnum, TokenEnum } from '@/enums/external/tokenEnum'
+import { customThirdInterfaceRequest, thirdInterfaceRequest } from '@/api/external/customRequest'
+import { CascaderOption } from 'naive-ui'
+import { convertToCascadingData } from '@/utils/external/utils'
 
 const { PencilIcon } = icon.ionicons5
 const designStore = useDesignStore()
 const editDisabled = ref(false)
 const collapseHeaderTable = ref(false)
 
-const { chartEditStore } = useTargetData()
+const { targetData, chartEditStore } = useTargetData()
 
 const handleCollapse = () => {
   collapseHeaderTable.value = !unref(collapseHeaderTable)
 }
 
-
 // 颜色
 const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
+//第三方接口相关代码
+const verifiationValue = ref(TokenEnum.DEFAULT_TOKEN)
+
+const tokenString = ref('')
+
+const getTokenString = ref()
+
+const resOptions = ref<CascaderOption[]>([])
+
+const resValue = ref()
+
+const cascaderConfig = reactive({
+  hoverTrigger: true,
+  checkStrategyIsChild: true,
+  filterable: false,
+  showPath: true
+})
+
+const requestTokenSuffix = ref('Bearer')
+
+const requestTokenKey = ref('Token')
+
+//验证方式
+const verificationMethods = [
+  {
+    label: TokenNameEnum.DEFAULT_TOKEN,
+    value: TokenEnum.DEFAULT_TOKEN
+  },
+  {
+    label: TokenNameEnum.TOKEN_STRING,
+    value: TokenEnum.TOKEN_STRING
+  },
+  {
+    label: TokenNameEnum.NO_VERIFICATION,
+    value: TokenEnum.NO_VERIFICATION
+  }
+]
+
+const hasDefaultToken = (value: string[]) => value.includes(TokenEnum.DEFAULT_TOKEN)
+
+const hasTokenString = (value: string[]) => value.includes(TokenEnum.TOKEN_STRING)
 
+const handleVerificationUpdate = (value: string) => {
+  chartEditStore.getRequestGlobalConfig.requestVerificationMethods = value
+  hasTokenString([value])
+  hasDefaultToken([value])
+  resValue.value = null
+  resOptions.value = []
+  getTokenString.value = ''
+  requestTokenKey.value = ''
+  requestTokenSuffix.value = ''
+}
+
+const handleResCascader = (value: string | number) => {
+  getTokenString.value = value as string | number
+  chartEditStore.getRequestGlobalConfig.requestVerificationToken = value as string
+  targetData.value.request.requestVerificationToken = value as string
+  targetData.value.request.requestDataType = RequestDataTypeEnum.AJAX
+}
 
+//执行请求获取三方Token
+const handleExecuteRequest = async () => {
+  try {
+    const request = {
+      requestOriginUrl: chartEditStore.getRequestGlobalConfig.requestOriginUrl,
+      body: chartEditStore.getRequestGlobalConfig.requestParams.Header
+    }
+    const res = await customThirdInterfaceRequest(request as thirdInterfaceRequest)
+    resOptions.value = convertToCascadingData(res) as unknown as CascaderOption[]
+    chartEditStore.getRequestGlobalConfig.requestVerificationMethods = verifiationValue.value
+    chartEditStore.getRequestGlobalConfig.requestVerificationToken = resValue.value as string
+    chartEditStore.getRequestGlobalConfig.requestTokenKey = requestTokenKey.value
+    chartEditStore.getRequestGlobalConfig.requestTokenSuffix = requestTokenSuffix.value
+    //存储到当前组件的请求对象里
+    targetData.value.request.requestTokenSuffix = requestTokenSuffix.value
+    targetData.value.request.requestTokenKey = requestTokenKey.value
+  } catch (e) {
+    getTokenString.value = JSON.stringify(e) as string
+  }
+}
+
+onMounted(() => {
+  getTokenString.value = chartEditStore.getRequestGlobalConfig.requestVerificationToken
+  verifiationValue.value = chartEditStore.getRequestGlobalConfig.requestVerificationMethods || TokenEnum.DEFAULT_TOKEN
+  requestTokenKey.value = chartEditStore.getRequestGlobalConfig.requestTokenKey!
+  requestTokenSuffix.value = chartEditStore.getRequestGlobalConfig.requestTokenSuffix!
+})
+//
 </script>
 
 <template>
@@ -37,23 +140,43 @@ const themeColor = computed(() => {
       <NTag type="info">全局公共配置</NTag>
     </template>
     <NSpace vertical>
-      <SettingItemBox name="服务" :itemRightStyle="{
-        gridTemplateColumns: '5fr 2fr 1fr'
-      }">
+      <SettingItemBox
+        name="服务"
+        :itemRightStyle="{
+          gridTemplateColumns: '5fr 2fr 1fr'
+        }"
+      >
         <!-- 源地址 -->
         <SettingItem name="前置 URL">
-          <NInput v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl" default-value="http://127.0.0.1" :disabled="editDisabled"
-            size="small" placeholder="例:http://127.0.0.1"></NInput>
+          <NInput
+            v-model:value="chartEditStore.getRequestGlobalConfig.requestOriginUrl"
+            default-value="http://127.0.0.1"
+            :disabled="editDisabled"
+            size="small"
+            placeholder="例:http://127.0.0.1"
+          ></NInput>
         </SettingItem>
         <SettingItem name="更新间隔，为 0 只会初始化">
           <NInputGroup>
-            <NInputNumber v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval" class="select-time-number"
-              size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字">
+            <NInputNumber
+              v-model:value="chartEditStore.getRequestGlobalConfig.requestInterval"
+              class="select-time-number"
+              size="small"
+              min="0"
+              :show-button="false"
+              :disabled="editDisabled"
+              placeholder="请输入数字"
+            >
             </NInputNumber>
             <!-- 单位 -->
-            <NSelect v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit" class="select-time-options"
-              size="small" :default-value="RequestHttpIntervalEnum.SECOND" :options="selectTimeOptions as SelectOption[]"
-              :disabled="editDisabled" />
+            <NSelect
+              v-model:value="chartEditStore.getRequestGlobalConfig.requestIntervalUnit"
+              class="select-time-options"
+              size="small"
+              :default-value="RequestHttpIntervalEnum.SECOND"
+              :options="selectTimeOptions as SelectOption[]"
+              :disabled="editDisabled"
+            />
           </NInputGroup>
         </SettingItem>
         <NButton v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
@@ -65,8 +188,67 @@ const themeColor = computed(() => {
           编辑配置
         </NButton>
       </SettingItemBox>
+      <!-- 针对第三方接口 -->
+      <SettingItemBox
+        name="验证方式"
+        :itemRightStyle="{
+          gridTemplateColumns: '5fr 2fr 1fr'
+        }"
+      >
+        <n-radio-group v-model:value="verifiationValue" name="radiogroup" @update:value="handleVerificationUpdate">
+          <n-space>
+            <n-radio
+              v-for="verificationItem in verificationMethods"
+              :key="verificationItem.value"
+              :value="verificationItem.value"
+            >
+              {{ verificationItem.label }}
+            </n-radio>
+          </n-space>
+        </n-radio-group>
+      </SettingItemBox>
+      <SettingItemBox v-if="hasDefaultToken([verifiationValue])" name="配置">
+        <SettingItem name="Token前缀">
+          <n-input v-model:value.trim="requestTokenSuffix" type="text" placeholder="例如：Bearer" />
+        </SettingItem>
+        <SettingItem name="Token键">
+          <n-input v-model:value.trim="requestTokenKey" type="text" placeholder="例如：X-Authorization" />
+        </SettingItem>
+      </SettingItemBox>
       <NCollapseTransition :show="collapseHeaderTable">
-        <GlobalParamsConfiguration />
+        <GlobalParamsConfiguration v-if="hasDefaultToken([verifiationValue])" />
+        <n-input
+          v-else-if="hasTokenString([verifiationValue])"
+          v-model:value="tokenString"
+          type="text"
+          placeholder="请输入令牌字符串"
+        />
+        <n-empty v-else description="无"> </n-empty>
+        <div style="margin-top: 10px">
+          <n-space vertical>
+            <n-button type="primary" @click="handleExecuteRequest">执行请求</n-button>
+            <NCascader
+              v-model:value="resValue"
+              @update:value="handleResCascader"
+              :expand-trigger="cascaderConfig.hoverTrigger ? 'hover' : 'click'"
+              :check-strategy="cascaderConfig.checkStrategyIsChild ? 'child' : 'all'"
+              :show-path="cascaderConfig.showPath"
+              :filterable="cascaderConfig.filterable"
+              placeholder="请选择"
+              :options="resOptions"
+            />
+            <n-input
+              :autosize="{
+                minRows: 3,
+                maxRows: 9
+              }"
+              v-model:value="getTokenString"
+              type="textarea"
+              placeholder="Token："
+            />
+          </n-space>
+        </div>
+        <!-- 针对第三方接口 -->
       </NCollapseTransition>
       <section class="arrow">
         <NTooltip>
@@ -83,7 +265,6 @@ const themeColor = computed(() => {
   </NCard>
 </template>
 
-
 <style lang="scss" scoped>
 .arrow {
   display: flex;
@@ -93,7 +274,6 @@ const themeColor = computed(() => {
 
   &:hover {
     color: v-bind('themeColor');
-
   }
 }
 </style>

-<script setup lang="ts" >
-import { getUUID } from '@/utils';
-import { ButtonProps, DataTableColumns, InputProps, NButton, NDataTable, NIcon, NInput, NSpace, NTag, NTooltip, TagProps } from 'naive-ui';
-import { computed, h, ref, unref, watch } from 'vue';
+<script setup lang="ts">
+import { getUUID } from '@/utils'
+import {
+  ButtonProps,
+  DataTableColumns,
+  InputProps,
+  NButton,
+  NDataTable,
+  NIcon,
+  NInput,
+  NSpace,
+  NTooltip,
+  NSelect,
+  SelectProps,
+  NDatePicker,
+  DatePickerProps
+} from 'naive-ui'
+import { computed, h, ref, unref, watch } from 'vue'
 import { Subtract, Add } from '@vicons/carbon'
-import { isObject } from '@/utils/external/is';
+import { isArray, isObject } from '@/utils/external/is'
+import { DataTypeEnum, DataTypeNameEnum } from '@/enums/external/dataTypeEnum'
+import { Recordable } from 'vite-plugin-mock'
 
 interface DataSource {
   id: string
   value?: string
   keyName?: string
+  indexName?: number
+  typeName?: string
+  dateRange?: number[] | null
   result?: boolean
 }
 
@@ -17,99 +36,126 @@ const columns: DataTableColumns<DataSource> = [
     title: '序号',
     key: 'index',
     render: (_, index) => index + 1,
-    width: 50,
+    width: 50
+  },
+  {
+    title: 'Type',
+    key: 'typeName',
+    render: (row, index) => {
+      return h(NSelect, {
+        value: row.typeName,
+        options: [
+          {
+            label: DataTypeNameEnum.DATA_RANGE,
+            value: DataTypeEnum.DATA_RANGE
+          },
+          {
+            label: DataTypeNameEnum.DATA_INPUT,
+            value: DataTypeEnum.DATA_INPUT
+          }
+        ],
+        onUpdateValue: (value: string) => {
+          unref(dataSource)[index].typeName = value
+          unref(dataSource)[index].indexName = index
+        },
+        size: 'small',
+        disabled: props.disabled
+      } as SelectProps)
+    },
+    width: 120
   },
   {
     title: 'Key',
     key: 'keyName',
     render: (row, index) => {
-      return h(
-        NInput,
-        {
-          value: row.keyName,
-          onBlur: () => handleInputBlur(row),
-          onUpdateValue: (value: string) => unref(dataSource)[index].keyName = value,
-          size: 'small',
-          disabled: props.disabled
-        } as InputProps
-      )
-    }
+      return h(NInput, {
+        value: row.keyName,
+        onBlur: () => handleInputBlur(),
+        onUpdateValue: (value: string) => (unref(dataSource)[index].keyName = value),
+        size: 'small',
+        disabled: props.disabled
+      } as InputProps)
+    },
+    width: 120
   },
   {
     title: 'Value',
     key: 'value',
     render: (row, index) => {
-      return h(
-        NInput,
-        {
-          value: row.value,
-          onBlur: () => handleInputBlur(row),
-          onUpdateValue: (value: string) => unref(dataSource)[index].value = value,
-          size: 'small',
-          disabled: props.disabled
-        } as InputProps
-      )
-    }
+      const findIndexName = unref(dataSource).find(item => item.indexName === index)
+      return findIndexName?.indexName === index && findIndexName.typeName === DataTypeEnum.DATA_INPUT
+        ? h(NInput, {
+            value: row.value,
+            onBlur: () => handleInputBlur(),
+            onUpdateValue: (value: string) => (unref(dataSource)[index].value = value),
+            size: 'small',
+            disabled: props.disabled
+          } as InputProps)
+        : ''
+    },
+    width: 120
   },
   {
-    title: '操作',
-    key: 'actions',
-    render: (row) => {
-      return h(
-        NSpace,
-        () => [
-          h(
-            NTooltip,
-            null,
-            {
-              trigger: () => h(
-                NButton,
-                {
-                  type: 'success',
-                  size: 'small',
-                  ghost: true,
-                  onClick: () => handleAddRow(row),
-                  disabled: props.disabled || !unref(canAddRow)
-                } as ButtonProps,
-                {
-                  default: () => h(NIcon, () => h(Add))
-                }
-              ),
-              default: () => '插入行'
-            }
-          ),
-          h(
-            NTooltip,
-            null,
-            {
-              trigger: () => h(
-                NButton,
-                {
-                  type: 'warning',
-                  size: 'small',
-                  ghost: true,
-                  onClick: () => handleSubtractRow(row),
-                  // disabled: props.disabled || !unref(canDeleteRow)
-                } as ButtonProps,
-                {
-                  default: () => h(NIcon, () => h(Subtract))
-                }
-              ),
-              default: () => '删除行'
-            }
-          )
-        ]
-      )
+    title: 'Date',
+    key: 'dateRange',
+    render: (row, index) => {
+      const findIndexName = unref(dataSource).find(item => item.indexName === index)
+      return findIndexName?.indexName === index && findIndexName.typeName === DataTypeEnum.DATA_RANGE
+        ? h(NDatePicker, {
+            value: row.value,
+            size: 'small',
+            type: 'datetimerange',
+            onBlur: () => handleInputBlur(),
+            onUpdateValue: (value: number[]) => {
+              unref(dataSource)[index].dateRange = value
+            },
+            disabled: props.disabled
+          } as DatePickerProps)
+        : ''
     },
-    width: 100,
+    width: 200
   },
   {
-    title: '结果',
-    key: 'result',
-    render: (row) => {
-      return h(NTag, { type: row.result ? 'success' : 'error' } as TagProps, () => `${row.result ? '' : '未'}通过`)
+    title: '操作',
+    key: 'actions',
+    render: row => {
+      return h(NSpace, () => [
+        h(NTooltip, null, {
+          trigger: () =>
+            h(
+              NButton,
+              {
+                type: 'success',
+                size: 'small',
+                ghost: true,
+                onClick: () => handleAddRow(row),
+                disabled: props.disabled || !unref(canAddRow)
+              } as ButtonProps,
+              {
+                default: () => h(NIcon, () => h(Add))
+              }
+            ),
+          default: () => '插入行'
+        }),
+        h(NTooltip, null, {
+          trigger: () =>
+            h(
+              NButton,
+              {
+                type: 'warning',
+                size: 'small',
+                ghost: true,
+                onClick: () => handleSubtractRow(row)
+              } as ButtonProps,
+              {
+                default: () => h(NIcon, () => h(Subtract))
+              }
+            ),
+          default: () => '删除行'
+        })
+      ])
     },
-    width: 80
+    width: 120
   }
 ]
 
@@ -121,29 +167,33 @@ const props = withDefaults(
   }>(),
   {
     disabled: false,
-    maxRow: 50,
+    maxRow: 50
   }
 )
 
-
 const emit = defineEmits(['update:value'])
 
 const createNewRow = () => {
   return { id: getUUID(), result: true } as DataSource
 }
 
-const dataSource = ref<DataSource[]>([
-  createNewRow()
-])
+const dataSource = ref<DataSource[]>([createNewRow()])
+
+const blurFlag = ref(false)
 
 watch(
   () => props.value,
-  (target) => {
+  (target: Recordable) => {
     if (target && isObject(target) && Object.keys(target).length) {
-      dataSource.value = Object.keys(props.value || {}).map(keyName => ({ ...createNewRow(), keyName, value: Reflect.get(props.value || {}, keyName) }))
-    } else {
-      dataSource.value = [createNewRow()]
-    } 
+      if (blurFlag.value) return
+      dataSource.value = Object.keys(props.value || {}).map((keyName, keyIndex) => ({
+        ...createNewRow(),
+        keyName,
+        indexName: keyIndex,
+        typeName: isArray(props.value![keyName]) ? DataTypeEnum.DATA_RANGE : DataTypeEnum.DATA_INPUT,
+        value: Reflect.get(props.value || {}, keyName)
+      }))
+    }
   },
   {
     immediate: true,
@@ -151,10 +201,6 @@ watch(
   }
 )
 
-const canDeleteRow = computed(() => {
-  return unref(dataSource).length >= 2
-})
-
 const canAddRow = computed(() => {
   return unref(dataSource).length < props.maxRow
 })
@@ -174,23 +220,19 @@ const handleSubtractRow = (record: DataSource) => {
   }
 }
 
-
-const handleInputBlur = (record: DataSource) => {
-  const { keyName, value } = record
-  record.result = !!(keyName && value)
-  if (unref(dataSource).every(item => item.result)) {
-    emit('update:value', getHeaderConfiguration())
-  }
+const handleInputBlur = () => {
+  blurFlag.value = true
+  emit('update:value', getHeaderConfiguration())
 }
 
 const getHeaderConfiguration = () => {
   return unref(dataSource).reduce((prev, next) => {
-    const { result, value, keyName } = next
-    const header = result && value && keyName ? { [keyName]: value } : {}
+    const { value, keyName, dateRange } = next
+    const header = keyName ? { [keyName as unknown as string]: dateRange && isArray(dateRange) ? dateRange: value } : {}
+    for (let item in header) if (!Reflect.get(header, item)) Reflect.deleteProperty(header, item)
     return { ...prev, ...header }
   }, {} as Recordable)
 }
-
 </script>
 
 <template>

 <script lang="ts" setup>
-import { RequestDataTypeEnum, RequestDataTypeNameEnum } from '@/enums/external/httpEnum';
-import { useDesign } from '@/hooks/external/useDesign';
-import { CreateComponentType } from '@/packages/index.d';
-import { CreateComponentGroupType } from '@/packages/index.d';
-import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
-import { NButton, NDivider, NModal, NSpace, NTag } from 'naive-ui';
-import { ref, unref, computed, nextTick } from 'vue';
-import { PublicInterfaceForm } from '../PublicInterfaceForm';
-import ComponentConfiguration from './ComponentConfiguration.vue';
-import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue';
-import { createRequestModalContext } from './useRequestModalContext';
-import { useTargetData } from '../../../../hooks/useTargetData.hook';
-import { useFetchTargetData } from '@/hooks/external/useFetchTargetData';
-import { useFilterFn } from '@/hooks/external/useFilterFn';
-
+import { RequestDataTypeEnum, RequestDataTypeNameEnum } from '@/enums/external/httpEnum'
+import { useDesign } from '@/hooks/external/useDesign'
+import { CreateComponentType } from '@/packages/index.d'
+import { CreateComponentGroupType } from '@/packages/index.d'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { NButton, NDivider, NModal, NSpace, NTag } from 'naive-ui'
+import { ref, unref, computed, nextTick } from 'vue'
+import { PublicInterfaceForm } from '../PublicInterfaceForm'
+import ComponentConfiguration from './ComponentConfiguration.vue'
+import GlobalPublicConfiguration from './GlobalPublicConfiguration.vue'
+import { createRequestModalContext } from './useRequestModalContext'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { useFetchTargetData } from '@/hooks/external/useFetchTargetData'
+import { useFilterFn } from '@/hooks/external/useFilterFn'
 
 const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
 
@@ -84,12 +83,22 @@ const sendHandle = async () => {
     targetData.value.option.dataset = value
     return
   }
+}
 
+const setRequestKey = (value: Recordable, key: string) => {
+  value[key] =
+    targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
+      ? (targetData.value.request as unknown as Recordable)[key] ||
+        (chartEditStore.getRequestGlobalConfig as unknown as Recordable)[key]
+      : null
 }
 
 const handleSaveAction = async () => {
   if (!(await validate())) return
   const value = getResult()
+  setRequestKey(value, 'requestTokenSuffix')
+  setRequestKey(value, 'requestTokenKey')
+  setRequestKey(value, 'requestVerificationToken')
   if (unref(selectTarget)) {
     chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
       ...unref(selectTarget)!,
@@ -105,26 +114,29 @@ createRequestModalContext({
 })
 
 defineExpose({
-  openModal,
+  openModal
 })
-
 </script>
 
 <template>
-  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px;" title="请求配置">
+  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px" title="请求配置">
     <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <NDivider v-if="requestDataType === RequestDataTypeEnum.AJAX" />
     <ComponentConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="componentConfigurationEl" />
     <PublicInterfaceForm v-if="requestDataType === RequestDataTypeEnum.Pond" ref="publicInterfaceFormEl" />
     <template #action>
-      <NSpace  justify="space-between">
-        <div style="display: flex;flex-direction: column;">
-          <NTag type="info">当公共接口选择“实时轨迹或者获取设备经纬度历史数据”时，属性选择则选择经纬度即可（longitude，latitude）</NTag>
-          <div style="height:5px"></div>
-          <NTag type="info">如果是结构体属性的话，选择对应结构体属性即可，里面的经纬度，平台已经通过接口里面的过滤函数进行处理</NTag>
-          <div style="display: flex; align-items: center; margin-top:10px">
+      <NSpace justify="space-between">
+        <div style="display: flex; flex-direction: column">
+          <NTag type="info"
+            >当公共接口选择“实时轨迹或者获取设备经纬度历史数据”时，属性选择则选择经纬度即可（longitude，latitude）</NTag
+          >
+          <div style="height: 5px"></div>
+          <NTag type="info"
+            >如果是结构体属性的话，选择对应结构体属性即可，里面的经纬度，平台已经通过接口里面的过滤函数进行处理</NTag
+          >
+          <div style="display: flex; align-items: center; margin-top: 10px">
             <span>「 更多 」</span>
-            <span style="margin-right: 5px;">——</span>
+            <span style="margin-right: 5px">——</span>
             <NTag type="info">{{ getRequestTypeName }}</NTag>
           </div>
         </div>
@@ -134,10 +146,8 @@ defineExpose({
   </NModal>
 </template>
 
-
-<style lang="scss" >
+<style lang="scss">
 @include thingsKit('chart-data-request') {
-
   &.n-card.n-modal,
   .n-card {
     @extend .go-background-filter;
@@ -148,7 +158,7 @@ defineExpose({
   }
 
   @include deep() {
-    &>.n-card__content {
+    & > .n-card__content {
       padding-right: 0;
     }
 

@@ -23,6 +23,9 @@ export interface RequestOptions {
   withToken?: boolean;
   // Carry and share token 携带分享的访问令牌
   withShareToken?: boolean
+  withThirdTokenString?: string;
+  withThirdTokenKey?: string;
+  withThirdTokenPrefix?: string;
 }
 
 export interface Result<T = any> {