Merge branch 'ww' into 'main_dev'

feat: 新增动态接口功能, Icon组件

See merge request yunteng/thingskit-view!17

(cherry picked from commit 30398d61)

b3bfc357 feat: 新增动态接口功能, Icon组件

 # Proxy
-VITE_GLOB_PROXY = [["/api", "http://222.180.200.114:48080/api"]]
+# VITE_GLOB_PROXY = [["/api", "http://222.180.200.114:48080/api"]]
+VITE_GLOB_PROXY = [["/api", "http://192.168.10.118:8080/api"]]
 
 # Api prefix
 VITE_GLOB_API_URL = /api

@@ -2,7 +2,9 @@ module.exports = {
   root: true,
   parser: 'vue-eslint-parser',
   globals: {
-    postMessage: true
+    postMessage: true,
+    Recordable: 'readonly',
+    Nullable: 'readonly',
   },
   parserOptions: {
     parser: '@typescript-eslint/parser',
@@ -31,8 +33,5 @@ module.exports = {
     'vue/multi-word-component-names': 'off',
     'vue/valid-template-root': 'off',
     'vue/no-mutating-props': 'off',
-  },
-  global: {
-    Recordable: 'readonly'
   }
 }

+import { defHttp } from "@/utils/external/http/axios";
+import { DictItem } from "./model";
+
+enum Api {
+  GET_DICT = '/dict_item'
+}
+
+export const getDictItemByCode = (value: string) => {
+  return defHttp.post<DictItem[]>({
+    url: `${Api.GET_DICT}/find`,
+    params: {
+      dictCode: value
+    }
+  })
+}

+export interface DictItem {
+  id: string;
+  itemText: string;
+  itemValue: string;
+  description: string;
+  sort: number;
+  status: number;
+  createTime: string;
+  updateTime: string;
+}

+import { RequestBodyEnum } from "@/enums/httpEnum"
+import { RequestConfigType, RequestGlobalConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
+import { defHttp } from "@/utils/external/http/axios"
+
+export const isFullUrl = (url = '') => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+export const getUrl = (url = '') => {
+  const isFullUrlFlag = isFullUrl(url)
+  const { origin } = window.location
+  return isFullUrlFlag ? new URL(url) : { pathname: url, origin }
+}
+
+export const customRequest = async (request: RequestConfigType) => {
+  const { requestHttpType, requestParams, requestParamsBodyType, requestUrl } = request as RequestGlobalConfigType & RequestConfigType
+  const { Params, Header, Body } = requestParams
+
+  const { origin, pathname } = getUrl(requestUrl!)
+
+  const body = Body[requestParamsBodyType as Exclude<'NONE', keyof typeof RequestBodyEnum>]
+
+  return defHttp.request<any>({
+    url: pathname,
+    baseURL: origin,
+    method: requestHttpType,
+    params: Params,
+    data: body,
+    headers: Header
+  }, {
+    joinPrefix: false,
+    apiUrl: ''
+  })
+}

+ import { defHttp } from '@/utils/external/http/axios';
+import { DeviceAttributesRecord, GetDeviceListParams, PublicInterfaceRecord } from './model';
+import { PaginationResult } from '/#/external/axios';
+
+enum Api {
+  PUBLIC_API = '/data_view_interface',
+  ORG_LISt = '/organization/me/list',
+  DEVICE_PROFILE_LIST = '/device_profile/me/list',
+  DEVICE_LIST = '/device/list',
+  DEVICE_ATTR_LIST = '/device/attributes',
+  GET_PUBLIC_INTERFACE_ALL = '/data_view_interface/find_all_interface',
+  GET_PUBLIC_INTERFACE_DETAIL = '/data_view_interface/get_interface_details'
+}
+
+export const getPublicInterface = async (params: Record<'page' | 'pageSize', number>) => {
+  return defHttp.get<PaginationResult<PublicInterfaceRecord>>({
+    url: Api.PUBLIC_API,
+    params
+  })
+}
+
+export const getOrgList = async () => {
+  return defHttp.get({
+    url: Api.ORG_LISt
+  })
+}
+
+export const getDeviceProfileList = async (params?: Record<'deviceType', string>) => {
+  return defHttp.get({
+    url: Api.DEVICE_PROFILE_LIST,
+    params
+  })
+}
+
+export const getDeviceList = async (params?: GetDeviceListParams) => {
+  return defHttp.get({
+    url: Api.DEVICE_LIST,
+    params
+  })
+}
+
+export const getDeviceAttrList = async (deviceProfileId: string) => {
+  return defHttp.get<DeviceAttributesRecord[]>({
+    url: `${Api.DEVICE_ATTR_LIST}/${deviceProfileId}`
+  })
+}
+
+
+export const getDeviceInterfaceDetail = async (interfaces: string[]) => {
+  return defHttp.get({
+    url: Api.GET_PUBLIC_INTERFACE_DETAIL,
+    params: interfaces
+  })
+}
+
+export const getAllPublicInterface = async () => {
+  return defHttp.get<PublicInterfaceRecord[]>({
+    url: Api.GET_PUBLIC_INTERFACE_ALL
+  })
+}

+import { RequestParams as OriginRequestParams } from "@/enums/httpEnum"
+
+export interface RequestParams {
+  Body: Recordable
+  Header: Recordable
+  Params: {
+    key: string
+    required: boolean
+    value: string
+  }[]
+}
+
+export interface PublicInterfaceRecord {
+  id: string,
+  creator: string,
+  createTime: string,
+  updater: string,
+  updateTime: string,
+  enabled: boolean,
+  tenantId: string,
+  interfaceName: string,
+  requestContentType: number,
+  requestOriginUrl: string,
+  requestHttpType: string,
+  requestParamsBodyType: string,
+  requestUrl: string,
+  requestParams: string | OriginRequestParams,
+}
+
+
+export interface GetDeviceListParams {
+  organizationId?: string
+  deviceProfileId?: string
+  deviceType?: string
+}
+
+export interface DeviceAttributesDetail {
+  dataType: {
+    specs: Recordable
+    type: string
+  }
+}
+
+export interface DeviceAttributesRecord {
+  name: string,
+  identifier: string
+  detail: DeviceAttributesDetail
+}

+<script lang="ts" setup>
+import { NForm, NGrid } from 'naive-ui';
+import { computed, reactive, ref, unref, useAttrs } from 'vue';
+import { BasicFormProps, FormSchema } from './types/form';
+import { basicProps } from './props';
+import { useDesign } from '@/hooks/external/useDesign';
+import { dateItemType } from './helper';
+import { dateUtil } from '@/utils/external/dateUtil';
+import { Dayjs } from 'dayjs';
+import FormItem from './components/FormItem.vue';
+import { deepMerge } from '@/utils/external';
+
+const props = defineProps(basicProps)
+
+const attrs = useAttrs()
+
+const fromModel = reactive<Recordable>({})
+
+const defaultValueRef = ref<Recordable>({})
+
+const isInitialDefaultRef = ref(false)
+
+const propsRef = ref<Partial<BasicFormProps>>({})
+
+const schemaRef = ref<Nullable<FormSchema[]>>(null)
+
+const formElRef = ref<Nullable<Recordable>>(null)
+
+const { prefixCls } = useDesign('basic-form')
+
+const getProps = computed(() => {
+  return { ...props, ...unref(propsRef) } as BasicFormProps
+})
+
+
+const getBindValue = computed(() => {
+  return { ...attrs, ...unref(getProps) } as Recordable
+})
+
+
+const getSchema = computed(() => {
+  const schemas = unref(schemaRef) || unref(getProps).schemas
+
+  for (const schema of schemas) {
+    const { defaultValue, component } = schema
+
+    if (defaultValue && dateItemType.includes(component)) {
+      if (!Array.isArray(defaultValue)) {
+        schema.defaultValue = dateUtil(defaultValue)
+      } else {
+        const def: Dayjs[] = []
+        defaultValue.forEach(item => def.push(dateUtil(item)))
+        schema.defaultValue = def
+      }
+    }
+  }
+
+  return schemas
+})
+
+async function setProps(params: Partial<BasicFormProps>) {
+  propsRef.value = deepMerge(unref(propsRef) || {},)
+}
+
+const setFormModel = (key: string, value: any) => {
+  fromModel[key] = value
+
+}
+
+const handleEnterPress = () => {
+
+}
+
+
+</script>
+
+<template>
+  <NForm ref="formElRef" :model="fromModel" @keypress.enter="handleEnterPress">
+    <NGrid>
+      <slot name="formHeader" />
+      <template v-for="schema in getSchema" :key="schema.field">
+        <FormItem :schema="schema" :formProps="getProps" :allDefaultValues="defaultValueRef" :formModel="fromModel"
+          :setFormModel="setFormModel">
+          <template #[item]="data" v-for="item in Object.keys($slots)">
+            <slot :name="item" v-bind="data" />
+          </template>
+        </FormItem>
+      </template>
+      <slot name="formFooter" />
+    </NGrid>
+  </NForm>
+</template>
+
+<style scoped lang="scss">
+</style>

+<script lang="ts" setup>
+import { NFormItemGi } from 'naive-ui';
+
+
+</script>
+
+<template>
+  <NFormItemGi>
+    
+  </NFormItemGi>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

+import { FormComponentTypeEnum } from './types'
+
+const DATE_TYPE = [FormComponentTypeEnum.DATE_PICKER]
+
+
+export const dateItemType = DATE_TYPE

+import { FormProps } from 'naive-ui'
+import { FormSchema } from './types/form'
+
+const DEFAULT_FORM_PROPS: FormProps = {
+  size: 'small',
+
+}
+
+export const basicProps = {
+  formProps: {
+    type: Object as PropType<FormProps>,
+    default: () => DEFAULT_FORM_PROPS
+  },
+
+  /**
+   * @description 表单字段映射成时间
+   */
+  fieldMapToTime: {
+    type: Array as PropType<any[]>,
+    default: () => []
+  },
+
+  /**
+   * @description 表单配置
+   */
+  schemas: {
+    type: Array as PropType<FormSchema[]>,
+    default: () => []
+  },
+
+
+}

+import { ExtractPropTypes } from "vue";
+import { FormComponentTypeEnum } from ".";
+import { basicProps } from "../props";
+
+export type BasicFormProps = ExtractPropTypes<typeof basicProps>
+
+
+export interface FormSchema {
+  field: string
+  
+  changeEvent?: string
+
+  valueField?: string
+
+  label: string
+
+  component: FormComponentTypeEnum
+
+  defaultValue?: any
+}

+export enum FormComponentTypeEnum {
+  DATE_PICKER = 'DatePicker',
+}

 <script lang="ts" setup>
-import { NInput, NPopover, NScrollbar } from 'naive-ui';
+import { NInput, NInputGroup, NInputGroupLabel, NPopover, NScrollbar } from 'naive-ui';
 import '@/assets/external/iconfont/iconfont.js'
 import iconfont from '@/assets/external/iconfont/iconfont.json'
 import SvgIcon from './SvgIcon.vue';
 import { computed, ref, unref } from 'vue';
+import { useDesignStore } from '@/store/modules/designStore/designStore';
 
 const props = defineProps({
   value: {
@@ -21,7 +22,11 @@ const getIconList = computed(() => {
   return icons.filter(icon => icon.includes(text))
 })
 
+const designStore = useDesignStore()
 
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
 
 const handleChange = (icon: string) => {
   emit('update:value', icon)
@@ -30,28 +35,38 @@ const handleChange = (icon: string) => {
 </script>
 
 <template>
-  <NInput :value="value" placeholder="请选择图标" disabled>
-    <template #suffix>
-      <NPopover trigger="click">
-        <NInput v-model:value="searchValue" size="small" />
-        <NScrollbar style="max-height: 120px; max-width: 210px;">
-          <ul class="icon-list">
-            <li class="icon-item" v-for="icon in getIconList" :key="icon" @click="handleChange(icon)"
-              :style="{ border: icon === props.value ? '1px solid #51d6a9' : '' }">
-              <SvgIcon :name="icon" prefix="iconfont" />
-            </li>
-          </ul>
-        </NScrollbar>
-        <template #trigger>
+  <NInputGroup class="icon-picker">
+    <NInput :value="value" placeholder="请选择图标" disabled />
+    <NPopover trigger="click">
+      <NInput v-model:value="searchValue" size="small" style="text-overflow: ellipsis;" />
+      <NScrollbar style="max-height: 120px; max-width: 210px; margin-top: 5px;">
+        <ul class="icon-list">
+          <li class="icon-item" v-for="icon in getIconList" :key="icon" @click="handleChange(icon)"
+            :style="{ border: icon === props.value ? `1px solid ${themeColor}` : '' }">
+            <SvgIcon :name="icon" prefix="iconfont" />
+          </li>
+        </ul>
+      </NScrollbar>
+      <template #trigger>
+        <NInputGroupLabel style="cursor: pointer;">
           <SvgIcon :name="value || 'grid-one'" prefix="iconfont" style="cursor: pointer;" />
-        </template>
-      </NPopover>
-    </template>
-  </NInput>
+        </NInputGroupLabel>
+      </template>
+    </NPopover>
+  </NInputGroup>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .icon {
+  &-picker {
+    @include deep() {
+      .n-input__input-el {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+
   &-list {
     display: flex;
     list-style: none;
@@ -70,11 +85,13 @@ const handleChange = (icon: string) => {
     display: flex;
     justify-content: center;
     align-items: center;
+    transition: transform .5s linear;
 
     &:hover {
-      border: 1px solid #51d6a9;
+      border: 1px solid v-bind("themeColor");
     }
   }
 
+
 }
 </style>

+export enum DictEnum {
+  BUILTIN_PARAMS = 'dataview_builtin_params'
+}

+export { RequestDataTypeEnum } from '../httpEnum'
+
 /**
  * @description: Request result set
  */
@@ -29,3 +31,33 @@ export enum ContentTypeEnum {
   // form-data  upload
   FORM_DATA = 'multipart/form-data;charset=UTF-8',
 }
+
+
+// 请求主体类型
+export enum RequestContentTypeEnum {
+  // 普通请求
+  DEFAULT = 0,
+  // SQL请求
+  SQL = 1,
+  // websocket请求
+  WEB_SOCKET = 2
+}
+
+export enum RequestContentTypeNameEnum {
+  // 普通请求
+  DEFAULT = '普通请求',
+  // SQL请求
+  SQL = 'SQL请求',
+  // websocket请求
+  WEB_SOCKET = 'WebSocket请求'
+}
+
+
+export enum RequestDataTypeNameEnum {
+  // 静态数据
+  STATIC = '静态数据',
+  // 请求数据
+  AJAX = '自定义请求',
+  // 数据池
+  Pond = '公共接口'
+}

+import { ref, toRefs, toRaw } from 'vue'
+import type VChart from 'vue-echarts'
+import { customizeHttp } from '@/api/http'
+import { useChartDataPondFetch } from '@/hooks/'
+import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
+import { setOption } from '@/packages/public/chart'
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+/**
+ * setdata 数据监听与更改
+ * @param targetComponent
+ * @param useChartEditStore 若直接引会报错，只能动态传递
+ * @param updateCallback 自定义更新函数
+ */
+export const useChartDataFetch = (
+  targetComponent: CreateComponentType,
+  useChartEditStore: ChartEditStoreType,
+  updateCallback?: (...args: any) => any
+) => {
+  const vChartRef = ref<typeof VChart | null>(null)
+  let fetchInterval: any = 0
+
+  // 数据池
+  const { addGlobalDataInterface } = useChartDataPondFetch()
+
+  // 组件类型
+  const { chartFrame } = targetComponent.chartConfig
+
+  // eCharts 组件配合 vChart 库更新方式
+  const echartsUpdateHandle = (dataset: any) => {
+    if (chartFrame === ChartFrameEnum.ECHARTS) {
+      if (vChartRef.value) {
+        setOption(vChartRef.value, { dataset: dataset })
+      }
+    }
+  }
+
+  const requestIntervalFn = () => {
+    const chartEditStore = useChartEditStore()
+
+    // 全局数据
+    const {
+      requestOriginUrl,
+      requestIntervalUnit: globalUnit,
+      requestInterval: globalRequestInterval
+    } = toRefs(chartEditStore.getRequestGlobalConfig)
+
+    // 目标组件
+    const {
+      requestDataType,
+      requestUrl,
+      requestIntervalUnit: targetUnit,
+      requestInterval: targetInterval
+    } = toRefs(targetComponent.request)
+
+    // 非请求类型
+    if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
+
+    try {
+      // 处理地址
+      if (requestUrl?.value) {
+        // requestOriginUrl 允许为空
+        const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
+        if (!completePath) return
+
+        clearInterval(fetchInterval)
+
+        const fetchFn = async () => {
+          const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
+          if (res) {
+            try {
+              const filter = targetComponent.filter
+              echartsUpdateHandle(newFunctionHandle(res?.data, res, filter))
+              // 更新回调函数
+              if (updateCallback) {
+                updateCallback(newFunctionHandle(res?.data, res, filter))
+              }
+            } catch (error) {
+              console.error(error)
+            }
+          }
+        }
+
+        // 立即调用
+        fetchFn()
+        // 定时时间
+        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+        // 单位
+        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+        // 开启轮询
+        if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+      }
+      // eslint-disable-next-line no-empty
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  if (isPreview()) {
+    // 判断是否是数据池类型
+    targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
+      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
+      : requestIntervalFn()
+  }
+  return { vChartRef }
+}

@@ -55,3 +55,5 @@ export enum IconDynamicEffectNameEnum {
   JUMP = '跳动',
   SPIN = '旋转'
 }
+
++ 
\ No newline at end of file

@@ -4,9 +4,10 @@ import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
 
 export function useInjectLib(packagesList: EPackagesType) {
+
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
-  // addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
 }
 
 /**

+import { RequestBodyEnum, RequestContentTypeEnum, RequestDataTypeEnum, RequestHttpEnum } from "@/enums/httpEnum";
+import { CreateComponentType } from "@/packages/index.d";
+
+
+export interface DynamicRequest {
+  // 所选全局数据池的对应 id
+  requestDataPondId?: string
+  // 组件定制轮询时间
+  requestInterval?: number
+  // 获取数据的方式
+  requestDataType: RequestDataTypeEnum
+  // 请求方式 get/post/del/put/patch
+  requestHttpType: RequestHttpEnum
+  // 源后续的 url
+  requestUrl?: string
+  // 请求内容主体方式 普通/sql
+  requestContentType: RequestContentTypeEnum
+  // 请求体类型
+  requestParamsBodyType: RequestBodyEnum
+  // SQL 请求对象
+  requestSQLContent: {
+    sql: string
+  }
+}
+
+export interface ECreateComponentType extends CreateComponentType {
+  test: 123
+}

+export enum DynamicRequestStoreEnum {
+  // 组件id
+  ID = 'id',
+  // 请求源地址
+  REQUEST_ORIGIN_URL = 'requestOriginUrl',
+  // 请求间隔时间
+  REQUEST_INTERVAL = 'requestInterval',
+  // 请求单位
+  REQUEST_INTERVAL_UNIT = 'requestIntervalUnit',
+  // 请求头
+  REQUEST_HEADER = 'requestHeader'
+}
+
+export interface DynamicRequestStoreType {
+  
+}

+ import { defineStore } from "pinia"; 
+
+export const useDynamicRequest = defineStore({
+  id: 'useDynamicRequest',
+  state: () => ({
+
+  }),
+  getters: {
+
+  },
+  actions: {
+
+  }
+})

+import dayjs, { ConfigType } from 'dayjs';
+
+export const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const DATE_FORMAT = 'YYYY-MM-DD ';
+
+export function formatToDateTime(
+  date: ConfigType = undefined,
+  format = DATE_TIME_FORMAT
+): string {
+  return dayjs(date).format(format);
+}
+
+export function formatToDate(date: ConfigType = undefined, format = DATE_FORMAT): string {
+  return dayjs(date).format(format);
+}
+
+export const dateUtil = dayjs;

@@ -45,7 +45,7 @@ const transform: AxiosTransform = {
     if (apiUrl && isString(apiUrl)) {
       config.url = `${apiUrl}${config.url}`;
     }
-    
+
     const params = config.params || {};
     const data = config.data || false;
     formatDate && data && !isString(data) && formatRequestDate(data);
@@ -143,7 +143,7 @@ const transform: AxiosTransform = {
       }
     } catch (error: any) {
       throw new Error(error);
-    } 
+    }
     checkStatus(error?.response?.status, msg, errorMessageMode);
     return Promise.reject(response?.data);
   },
@@ -197,9 +197,3 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
 }
 export const defHttp = createAxios();
 
-// other api url
-export const otherHttp = createAxios({
-  requestOptions: {
-    apiUrl: 'xxx',
-  },
-});

@@ -89,3 +89,5 @@ export const withInstall = <T extends Component>(component: T, alias?: string) =
   };
   return component as T & Plugin;
 };
+
++ 
\ No newline at end of file

+import { inject, InjectionKey, provide, reactive, readonly as defineReadonly } from 'vue'
+
+export interface CreateContextOptions {
+  readonly?: boolean
+  createProvider?: boolean
+  native?: boolean
+}
+
+export function createContext<T>(context: any, key: InjectionKey<T> = Symbol(), options: CreateContextOptions = {}) {
+  const { readonly, createProvider, native } = options
+
+  const state = reactive(context)
+
+  const provideData = readonly ? defineReadonly(state) : state
+
+  !createProvider && provide(key, native ? context : provideData)
+
+  return {
+    state
+  }
+}
+
+export function useContext<T>(key: InjectionKey<T> = Symbol(), defaultValue?: any) {
+  return inject(key, defaultValue || {})
+}

+import ChartDataMatchingAndShow from './index.vue'
+
+export { ChartDataMatchingAndShow }

+<template>
+  <NTimeline class="go-chart-configurations-timeline">
+    <NTimelineItem v-show="isCharts && dimensionsAndSource" type="info" :title="TimelineTitleEnum.MAPPING">
+      <n-table striped>
+        <thead>
+          <tr>
+            <th v-for="item in tableTitle" :key="item">{{ item }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in dimensionsAndSource" :key="index">
+            <td>{{ item.field }}</td>
+            <td>{{ item.mapping }}</td>
+            <td>
+              <NSpace v-if="item.result === 0">
+                <NBadge dot type="success"></NBadge>
+                <NText>无</NText>
+              </NSpace>
+              <NSpace v-else>
+                <NBadge dot :type="item.result === 1 ? 'success' : 'error'"></NBadge>
+                <NText>匹配{{ item.result === 1 ? '成功' : '失败' }}</NText>
+              </NSpace>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </NTimelineItem>
+    <NTimelineItem v-show="filterShow" color="#97846c" :title="TimelineTitleEnum.FILTER">
+      <NSpace :size="18" vertical>
+        <NText depth="3">过滤器默认处理接口返回值的「data」字段</NText>
+        <ChartDataMonacoEditor></ChartDataMonacoEditor>
+      </NSpace>
+    </NTimelineItem>
+    <NTimelineItem type="success" :title="TimelineTitleEnum.CONTENT">
+      <NSpace vertical>
+        <NSpace class="source-btn-box">
+          <NUpload v-model:file-list="uploadFileListRef" :show-file-list="false" :customRequest="customRequest"
+            @before-upload="beforeUpload">
+            <NSpace>
+              <NButton v-if="!ajax" class="sourceBtn-item" :disabled="noData">
+                <template #icon>
+                  <NIcon>
+                    <document-add-icon />
+                  </NIcon>
+                </template>
+                导入（json / txt）
+              </NButton>
+            </NSpace>
+          </NUpload>
+          <div>
+            <NButton class="sourceBtn-item" :disabled="noData" @click="download">
+              <template #icon>
+                <NIcon>
+                  <document-download-icon />
+                </NIcon>
+              </template>
+              下载
+            </NButton>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <NIcon class="go-ml-1" size="21" :depth="3">
+                  <help-outline-icon></help-outline-icon>
+                </NIcon>
+              </template>
+              <NText depth="3">点击【下载】查看完整数据</NText>
+            </n-tooltip>
+          </div>
+        </NSpace>
+        <NCard size="small">
+          <NScrollbar style="max-height: 400px;">
+            <NCode :code="toString(source)" language="json"></NCode>
+          </NScrollbar>
+        </NCard>
+      </NSpace>
+    </NTimelineItem>
+  </NTimeline>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { ChartFrameEnum } from '@/packages/index.d'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { icon } from '@/plugins'
+import isObject from 'lodash/isObject'
+import { toString, isArray } from '@/utils'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { DataResultEnum, TimelineTitleEnum } from '../../../index.d'
+import { useFile } from '../../../hooks/useFile.hooks'
+import { ChartDataMonacoEditor } from '../ChartDataMonacoEditor'
+import { NBadge, NButton, NCard, NCode, NIcon, NScrollbar, NSpace, NText, NTimeline, NTimelineItem, NUpload } from 'naive-ui'
+
+const { targetData } = useTargetData()
+const props = defineProps({
+  show: {
+    type: Boolean,
+    required: false
+  },
+  ajax: {
+    type: Boolean,
+    required: true
+  }
+})
+
+// 表格标题
+const tableTitle = ['字段', '映射', '状态']
+
+const { HelpOutlineIcon } = icon.ionicons5
+const { DocumentAddIcon, DocumentDownloadIcon } = icon.carbon
+
+const source = ref()
+const dimensions = ref()
+const dimensionsAndSource = ref()
+const noData = ref(false)
+
+const { uploadFileListRef, customRequest, beforeUpload, download } = useFile(targetData)
+
+// 是否展示过滤器
+const filterShow = computed(() => {
+  return targetData.value.request.requestDataType !== RequestDataTypeEnum.STATIC
+})
+
+// 是支持 dataset 的图表类型
+const isCharts = computed(() => {
+  return targetData.value.chartConfig.chartFrame === ChartFrameEnum.ECHARTS
+})
+
+// 处理映射列表状态结果
+const matchingHandle = (mapping: string) => {
+  let res = DataResultEnum.SUCCESS
+  for (let i = 0; i < source.value.length; i++) {
+    if (source.value[i][mapping] === undefined) {
+      res = DataResultEnum.FAILURE
+      return res
+    }
+  }
+  return DataResultEnum.SUCCESS
+}
+
+// 处理映射列表
+const dimensionsAndSourceHandle = () => {
+  try {
+    // 去除首项数据轴标识
+    return dimensions.value.map((dimensionsItem: string, index: number) => {
+      return index === 0
+        ? {
+          // 字段
+          field: '通用标识',
+          // 映射
+          mapping: dimensionsItem,
+          // 结果
+          result: DataResultEnum.NULL
+        }
+        : {
+          field: `数据项-${index}`,
+          mapping: dimensionsItem,
+          result: matchingHandle(dimensionsItem)
+        }
+    })
+  } catch (error) {
+    return []
+  }
+}
+
+watch(
+  () => targetData.value?.option?.dataset,
+  (
+    newData?: {
+      source: any
+      dimensions: any
+    } | null
+  ) => {
+    if (newData && targetData?.value?.chartConfig?.chartFrame === ChartFrameEnum.ECHARTS) {
+      // 只有 DataSet 数据才有对应的格式
+      source.value = newData
+      if (isCharts.value) {
+        dimensions.value = newData.dimensions
+        dimensionsAndSource.value = dimensionsAndSourceHandle()
+      }
+    } else if (newData !== undefined && newData !== null) {
+      dimensionsAndSource.value = null
+      source.value = newData
+    } else {
+      noData.value = true
+      source.value = '此组件无数据源'
+    }
+    if (isArray(newData)) {
+      dimensionsAndSource.value = null
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-configurations-timeline') {
+  @include deep() {
+    pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+  }
+
+  .source-btn-box {
+    margin-top: 10px !important;
+  }
+}
+</style>

+import  ChartDataMonacoEditor from './index.vue'
+
+export { ChartDataMonacoEditor }

+<template>
+  <template v-if="targetData.filter">
+    <NCard>
+      <p><span class="func-keyword">function</span>&nbsp;&nbsp;filter(res)&nbsp;&nbsp;{</p>
+      <!-- 函数体 -->
+      <div class="go-ml-4">
+        <NCode :code="targetData.filter" language="typescript"></NCode>
+      </div>
+      <p>}</p>
+      <template #footer>
+        <NSpace justify="end">
+          <NButton type="primary" tertiary size="small" @click="addFilter">
+            <template #icon>
+              <NIcon>
+                <filter-edit-icon />
+              </NIcon>
+            </template>
+            编辑
+          </NButton>
+          <NButton tertiary size="small" @click="delFilter"> 删除 </NButton>
+        </NSpace>
+      </template>
+    </NCard>
+  </template>
+  <template v-else>
+    <NButton class="go-ml-3" @click="addFilter">
+      <template #icon>
+        <NIcon>
+          <filter-icon />
+        </NIcon>
+      </template>
+      新增过滤器
+    </NButton>
+  </template>
+
+  <!-- 弹窗 -->
+  <NModal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
+    <NCard :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
+      <template #header>
+        <NSpace>
+          <NText>过滤器函数编辑器</NText>
+        </NSpace>
+      </template>
+      <template #header-extra> </template>
+      <NSpace size="small" vertical>
+        <NSpace justify="space-between">
+          <div>
+            <NSpace vertical>
+              <NTag type="info">
+                <span class="func-keyword">function</span>&nbsp;&nbsp;filter(res)&nbsp;&nbsp;{
+              </NTag>
+              <monaco-editor v-model:modelValue="filter" width="460px" height="380px" language="javascript" />
+              <NTag type="info">}</NTag>
+            </NSpace>
+          </div>
+          <NDivider vertical style="height: 480px" />
+          <NScrollbar style="max-height: 480px">
+            <NSpace :size="15" vertical>
+              <!-- <div class="editor-data-show"> -->
+              <!-- <NSpace>
+                  <NText depth="3">默认过滤数据(data)：</NText>
+                  <NCode :code="toString(sourceData?.data) || '暂无'" language="json" :word-wrap="true"></NCode>
+                </NSpace> -->
+              <!-- </div> -->
+              <div class="editor-data-show">
+                <NSpace>
+                  <NText depth="3">接口返回数据(res)：</NText>
+                  <NScrollbar style="max-height: 300px;">
+                    <NCode :code="toString(sourceData) || '暂无'" language="json" :word-wrap="true"></NCode>
+                  </NScrollbar>
+                </NSpace>
+              </div>
+              <div class="editor-data-show">
+                <NSpace>
+                  <NText depth="3">过滤器结果：</NText>
+                  <NCode :code="filterRes || '暂无'" language="json" :word-wrap="true"></NCode>
+                </NSpace>
+              </div>
+            </NSpace>
+          </NScrollbar>
+        </NSpace>
+      </NSpace>
+      <template #action>
+        <NSpace justify="space-between">
+          <div class="go-flex-items-center">
+            <NTag :bordered="false" type="primary">
+              <template #icon>
+                <NIcon :component="DocumentTextIcon" />
+              </template>
+              规则
+            </NTag>
+            <NText class="go-ml-2" depth="2">过滤器默认处理接口返回值的「data」字段</NText>
+          </div>
+
+          <NSpace>
+            <NButton size="medium" @click="closeFilter">取消</NButton>
+            <NButton size="medium" type="primary" @click="saveFilter">保存</NButton>
+          </NSpace>
+        </NSpace>
+      </template>
+    </NCard>
+  </NModal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, toRaw } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { icon } from '@/plugins'
+import { goDialog, toString } from '@/utils'
+import cloneDeep from 'lodash/cloneDeep'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { customRequest } from '@/api/external/customRequest'
+import { NButton, NCard, NCode, NDivider, NIcon, NModal, NScrollbar, NSpace, NTag, NText } from 'naive-ui'
+
+const { DocumentTextIcon } = icon.ionicons5
+const { FilterIcon, FilterEditIcon } = icon.carbon
+const { targetData } = useTargetData()
+
+// 受控弹窗
+const showModal = ref(false)
+// filter 函数模板
+const filter = ref(targetData.value.filter || `return res`)
+// 过滤错误标识
+const errorFlag = ref(false)
+// 目标静态/接口数据
+const sourceData = ref<any>('')
+
+// 动态获取数据
+const fetchTargetData = async () => {
+  try {
+    const res = await customRequest(toRaw(targetData.value.request))
+    if (res) {
+      sourceData.value = res
+      return
+    }
+    window['$message'].warning('没有拿到返回值，请检查接口！')
+  } catch (error) {
+    console.error(error);
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+// 过滤结果
+const filterRes = computed(() => {
+  try {
+    const fn = new Function('data', 'res', filter.value)
+    const response = cloneDeep(sourceData.value)
+    const res = fn(response?.data, response)
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    errorFlag.value = false
+    return toString(res)
+  } catch (error) {
+    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+    errorFlag.value = true
+    return `过滤函数错误，日志：${error}`
+  }
+})
+
+// 新增过滤器
+const addFilter = () => {
+  showModal.value = true
+}
+
+// 删除过滤器
+const delFilter = () => {
+  goDialog({
+    message: '是否删除过滤器',
+    onPositiveCallback: () => {
+      targetData.value.filter = undefined
+    }
+  })
+}
+
+// 关闭过滤器
+const closeFilter = () => {
+  showModal.value = false
+}
+
+// 新增过滤器
+const saveFilter = () => {
+  if (errorFlag.value) {
+    window['$message'].error('过滤函数错误，无法进行保存')
+    return
+  }
+  targetData.value.filter = filter.value
+  closeFilter()
+}
+
+watch(
+  () => showModal.value,
+  (newData: boolean) => {
+    if (newData) {
+      fetchTargetData()
+      filter.value = targetData.value.filter || `return res`
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.func-keyword {
+  color: #b478cf;
+}
+
+@include go('chart-data-monaco-editor') {
+
+  &.NCard.NModal,
+  .NCard {
+    @extend .go-background-filter;
+  }
+
+  .editor-data-show {
+    @include fetch-bg-color('filter-color');
+    width: 420px;
+    padding: 20px;
+    border-radius: 5px;
+  }
+}
+</style>

+export { default as ChartDynamicRequest } from './index.vue'

+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount, watchEffect, toRaw, unref } from 'vue'
+import { icon } from '@/plugins'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { RequestDataTypeEnum } from '@/enums/external/httpEnum'
+import { ChartDataMatchingAndShow } from '../../../external/components/ChartDataMatchingAndShow'
+import { newFunctionHandle } from '@/utils'
+import { useTargetData } from '../../../../hooks/useTargetData.hook'
+import { NButton, NSelect, NTooltip, NIcon, SelectOption } from 'naive-ui'
+import { RequestInfoPanel } from '../RequestInfoPanel'
+import { RequestModal } from '../RequestModal'
+import { customRequest } from '@/api/external/customRequest'
+
+const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
+const { targetData } = useTargetData()
+
+const requestModal = ref<InstanceType<typeof RequestModal>>()
+
+const designStore = useDesignStore()
+
+
+const selectedRequestType = ref(targetData.value.request.requestDataType || RequestDataTypeEnum.AJAX)
+
+const getApiRequestType: SelectOption[] = [
+  { label: '自定义请求', value: RequestDataTypeEnum.AJAX },
+  { label: '公共接口', value: RequestDataTypeEnum.Pond }
+]
+
+// 是否展示数据分析
+const loading = ref(false)
+const showMatching = ref(false)
+
+let firstFocus = 0
+let lastFilter: any = undefined
+
+// 发送请求
+const sendHandle = async () => {
+  if (!targetData.value?.request) return
+
+  loading.value = true
+  try {
+    console.log('enter')
+    const res = await customRequest(toRaw(targetData.value.request))
+    loading.value = false
+    if (res) {
+      targetData.value.option.dataset = newFunctionHandle(res, res, targetData.value.filter)
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('数据异常，请检查参数！')
+  } catch (error) {
+    loading.value = false
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const handleClickPanel = () => {
+  unref(requestModal)?.openModal(true, unref(selectedRequestType))
+}
+
+watchEffect(() => {
+  const filter = targetData.value?.filter
+  if (lastFilter !== filter && firstFocus) {
+    lastFilter = filter
+    sendHandle()
+  }
+  firstFocus++
+})
+
+onBeforeUnmount(() => {
+  lastFilter = null
+})
+
+
+</script>
+
+<template>
+  <div class="things-kit-chart-configurations-data-ajax">
+    <SettingItemBox name="接口方式" :alone="true">
+      <NSelect v-model:value="selectedRequestType" :options="getApiRequestType" />
+    </SettingItemBox>
+
+    <RequestInfoPanel @clickPanel="handleClickPanel" />
+
+    <SettingItemBox :alone="true">
+      <template #name>
+        测试
+        <NTooltip trigger="hover">
+          <template #trigger>
+            <NIcon size="21" :depth="3">
+              <HelpOutlineIcon />
+            </NIcon>
+          </template>
+          默认赋值给 dataset 字段
+        </NTooltip>
+      </template>
+      <NButton type="primary" ghost @click="sendHandle">
+        <template #icon>
+          <NIcon>
+            <FlashIcon />
+          </NIcon>
+        </template>
+        发送请求
+      </NButton>
+    </SettingItemBox>
+
+    <!-- 底部数据展示 -->
+    <ChartDataMatchingAndShow :show="showMatching && !loading" :ajax="true"></ChartDataMatchingAndShow>
+
+    <!-- 骨架图 -->
+    <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+
+    <RequestModal ref="requestModal" />
+  </div>
+</template>
+
+
+
+<style lang="scss" scoped>
+@include thingsKit('chart-configurations-data-ajax') {
+  .n-card-shallow {
+    &.n-card {
+      @extend .go-background-filter;
+
+      @include deep() {
+        .n-card__content {
+          padding: 10px;
+        }
+      }
+    }
+
+    .edit-text {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 325px;
+      height: 270px;
+      cursor: pointer;
+      opacity: 0;
+      transition: all 0.3s;
+      @extend .go-background-filter;
+      backdrop-filter: blur(2px) !important;
+    }
+
+    &:hover {
+      border-color: v-bind('themeColor');
+
+      .edit-text {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style> 

+export { default as PublicInterfaceForm } from './index.vue'

+<script lang="ts" setup>
+import { getAllPublicInterface, getPublicInterface } from '@/api/external/dynamicRequest'
+import { PublicInterfaceRecord } from '@/api/external/dynamicRequest/model';
+import { SettingItem, SettingItemBox } from '@/components/Pages/ChartItemSetting';
+import { RequestContentTypeEnum, RequestContentTypeNameEnum } from '@/enums/external/httpEnum';
+import { RequestBodyEnum, RequestHttpEnum, RequestHttpIntervalEnum, RequestParams, RequestParamsTypeEnum } from '@/enums/httpEnum';
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { NForm, NCard, NDatePicker, NEmpty, NFormItem, NInput, NInputGroup, NInputNumber, NScrollbar, NSelect, NSpin, NTabPane, NTabs, NTreeSelect, SelectOption, FormInst, NButton, FormItemInst } from 'naive-ui';
+import { ref, reactive, onMounted, computed, unref } from 'vue'
+import { selectTimeOptions, selectTypeOptions } from '../../../index.d';
+import ParamsTable from '../RequestModal/ParamsTable.vue';
+import RequestBody from '../RequestModal/RequestBody.vue';
+import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm';
+import { transferData } from './utils';
+
+const componentMap: { [key in ComponentType]?: any } = {
+  [ComponentType.SELECT_TREE]: NTreeSelect,
+  [ComponentType.SELECT]: NSelect,
+  [ComponentType.INPUT]: NInput,
+  [ComponentType.DATE_PICKER]: NDatePicker
+}
+const publicInterfaceList = ref<PublicInterfaceRecord[]>([])
+
+const selectedPublicInterface = ref<string>()
+
+const toJSON = (string: string) => {
+  try {
+    return JSON.parse(string)
+  } catch (error) {
+    return {}
+  }
+}
+
+const getSelectedInterface = computed(() => {
+  const record = unref(publicInterfaceList).find(item => item.id === unref(selectedPublicInterface))! || {}
+  const _record = JSON.parse(JSON.stringify(record))
+  _record.requestParams = toJSON(_record.requestParams)
+  return _record
+})
+
+const getPublicInterfaceList = async () => {
+  if (unref(publicInterfaceList).length) return
+  const result = await getAllPublicInterface()
+  publicInterfaceList.value = result
+}
+
+const handleFilter = (query: string, option: SelectOption) => {
+  return ((option as Recordable).interfaceName).includes(query)
+}
+
+const { getDynamicFormSchemas, params, createForm, validFlag, setDynamicFormValue } = useDynamicPublicForm(getSelectedInterface)
+
+const getConfigurationData = () => {
+  const value = transferData(unref(getSelectedInterface), unref(getSelectedInterface).requestParams as unknown as RequestParams, params)
+  return value
+}
+
+const requestHttpTypeRef = ref<RequestHttpEnum>()
+
+const requestIntervalValueRef = ref<number>(30)
+
+const requestIntervalUnitRef = ref<RequestHttpIntervalEnum>(RequestHttpIntervalEnum.SECOND)
+
+const requestContentTypeRef = ref<RequestContentTypeEnum>()
+
+const requestParamsTypeRef = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
+
+const requestParams = ref<RequestParams>({ Body: { [RequestBodyEnum.FORM_DATA]: {}, [RequestBodyEnum.JSON]: '', [RequestBodyEnum.XML]: '', [RequestBodyEnum.X_WWW_FORM_URLENCODED]: {} }, Header: {}, Params: {} })
+
+const requestParamsBodyTypeRef = ref<RequestBodyEnum>(RequestBodyEnum.X_WWW_FORM_URLENCODED)
+
+const headerRef = ref()
+
+const dynamicFormItemEl = ref<FormItemInst[]>()
+
+const handleSelectedInterfaceChange = (value: string, option: PublicInterfaceRecord) => {
+  createForm()
+  requestContentTypeRef.value = option.requestContentType as RequestContentTypeEnum
+  requestHttpTypeRef.value = option.requestHttpType as RequestHttpEnum
+}
+
+const getGetRequestTypeName = (key: RequestContentTypeEnum) => {
+  return RequestContentTypeNameEnum[RequestContentTypeEnum[key] as keyof typeof RequestContentTypeEnum]
+}
+
+const setConfigurationData = async (request: RequestConfigType) => {
+  await getPublicInterfaceList()
+  const { requestDataPondId, requestParams: params, requestParamsBodyType, requestContentType, requestHttpType, } = request
+  const { Header } = params
+  selectedPublicInterface.value = requestDataPondId
+  requestContentTypeRef.value = requestContentType
+  requestHttpTypeRef.value = requestHttpType
+  headerRef.value = Header
+  requestParamsBodyTypeRef.value = requestParamsBodyType
+  requestParams.value = params
+  setDynamicFormValue(params)
+}
+
+
+const validate = async () => {
+  for (const item of unref(dynamicFormItemEl) || []) {
+    await item.validate()
+  }
+  return unref(validFlag)
+}
+
+
+defineExpose({
+  getConfigurationData,
+  setConfigurationData,
+  validate
+})
+
+onMounted(() => {
+  getPublicInterfaceList()
+})
+
+</script>
+
+<template>
+  <SettingItemBox name="公共接口" :alone="true" :item-right-style="{ gridTemplateColumns: '5fr 2fr 1fr' }">
+    <SettingItem name="请求方式 & URL地址">
+      <NInputGroup>
+        <NSelect v-model:value="selectedPublicInterface" label-field="interfaceName" value-field="id"
+          :options="publicInterfaceList" :filter="handleFilter" filterable :reset-menu-on-options-change="false"
+          @update-value="handleSelectedInterfaceChange" size="small">
+        </NSelect>
+        <NSelect v-if="requestContentTypeRef !== RequestContentTypeEnum.WEB_SOCKET" v-model:value="requestHttpTypeRef"
+          style="width: 150px;" size="small" :options="(selectTypeOptions as SelectOption[])" :disabled="true" />
+        <NSelect v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET" :disabled="true" style="width: 150px;"
+          :default-value="RequestContentTypeEnum.WEB_SOCKET" size="small"
+          :options="[{ label: 'WebSocket', value: RequestContentTypeEnum.WEB_SOCKET, type: 'ignored' }]">
+        </NSelect>
+      </NInputGroup>
+    </SettingItem>
+    <SettingItem name="更新间隔，为 0 只会初始化">
+      <NInputGroup>
+        <NInputNumber v-model:value="requestIntervalValueRef" class="select-time-number" size="small" min="0"
+          :show-button="false" placeholder="请输入数字" />
+        <!-- 单位 -->
+        <NSelect v-model:value="requestIntervalUnitRef" class="select-time-options" size="small"
+          :options="(selectTimeOptions as SelectOption[])" />
+      </NInputGroup>
+    </SettingItem>
+  </SettingItemBox>
+  <SettingItemBox name="请求方式" :alone="true" :item-right-style="{ gridTemplateColumns: '1fr 1fr' }">
+    <NTabs v-model:value="requestContentTypeRef" type="segment" size="small">
+      <NTabPane :disabled="requestContentTypeRef !== RequestContentTypeEnum.DEFAULT"
+        :name="RequestContentTypeEnum.DEFAULT" :tab="getGetRequestTypeName(RequestContentTypeEnum.DEFAULT)" />
+      <NTabPane :disabled="requestContentTypeRef !== RequestContentTypeEnum.SQL" :name="RequestContentTypeEnum.SQL"
+        :tab="getGetRequestTypeName(RequestContentTypeEnum.SQL)" />
+      <NTabPane :disabled="requestContentTypeRef !== RequestContentTypeEnum.WEB_SOCKET"
+        :name="RequestContentTypeEnum.WEB_SOCKET" :tab="getGetRequestTypeName(RequestContentTypeEnum.WEB_SOCKET)" />
+    </NTabs>
+  </SettingItemBox>
+  <SettingItemBox>
+    <NTabs v-model:value="requestParamsTypeRef" :default-value="RequestParamsTypeEnum.PARAMS">
+      <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
+    </NTabs>
+  </SettingItemBox>
+
+  <SettingItemBox :item-right-style="{ gridTemplateColumns: '3fr 2fr' }">
+    <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
+      <NScrollbar style="max-height: 400px; padding: 0 10px; box-sizing: border-box;;">
+        <NForm>
+          <template v-for="item in getDynamicFormSchemas" :key="item.key">
+            <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules">
+              <component :is="componentMap[item.component]" v-bind="item.props" clearable />
+            </NFormItem>
+          </template>
+        </NForm>
+        <NEmpty v-if="!selectedPublicInterface || !getDynamicFormSchemas.length" description="请选择公共接口" />
+      </NScrollbar>
+    </NCard>
+
+
+    <RequestBody v-if="requestParamsTypeRef === RequestParamsTypeEnum.BODY"
+      v-model:request-params-body-type="requestParamsBodyTypeRef" v-model:value="requestParams" />
+
+    <ParamsTable v-if="requestParamsTypeRef === RequestParamsTypeEnum.HEADER" v-model:value="headerRef" />
+
+  </SettingItemBox>
+</template>
+
+<style scoped lang="scss">
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dynamic-form {
+  @include deep() {
+    .n-date-picker {
+      width: 100%;
+    }
+  }
+}
+</style>

+import { getDictItemByCode } from "@/api/external/common"
+import { DictItem } from "@/api/external/common/model"
+import { getDeviceAttrList, getDeviceList, getDeviceProfileList, getOrgList } from "@/api/external/dynamicRequest"
+import { PublicInterfaceRecord, RequestParams } from "@/api/external/dynamicRequest/model"
+import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
+import { DatePickerProps, FormItemRule, InputProps, SelectProps, TreeSelectProps } from "naive-ui"
+import { computed, onMounted, reactive, Ref, ref, unref } from "vue"
+import { DictEnum } from '@/enums/external/dictEnum'
+
+const GROUP_SEPARATOR = ','
+
+export enum BuiltInVariable {
+  DATE = 'date',
+  KEYS = 'keys',
+  ENTITY_ID = 'entityId',
+  ORGANIZATION_ID = 'organizationId',
+  DEVICE_PROFILE_ID = 'deviceProfileId',
+}
+
+export enum ComponentType {
+  SELECT = 'select',
+  SELECT_TREE = 'selectTree',
+  DATE_PICKER = 'datePicker',
+  INPUT = 'input'
+}
+
+export interface DynamicFormSchema {
+  key: string
+  name?: string
+  component: ComponentType,
+  required?: boolean
+  rules?: FormItemRule
+  props: Recordable
+}
+
+export type BuiltInVariableRecord = { [key in BuiltInVariable]: DictItem }
+
+export const useDynamicPublicForm = (publicInterfaceRef: Ref<PublicInterfaceRecord>) => {
+
+  const getParams = computed(() => {
+    let params = (publicInterfaceRef.value.requestParams as unknown as RequestParams).Params || []
+    if (!Array.isArray(params)) params = []
+    return params
+  })
+
+  const getUsedBuiltInVariable = computed(() => {
+    const hasUsed = unref(getParams).reduce((prev, next) => {
+      const groupList = next.key.split(GROUP_SEPARATOR)
+      return [...prev, ...(groupList.length > 1 ? groupList : [next.key])]
+    }, [] as string[])
+    return hasUsed
+  })
+
+  const builtInVariable = ref<BuiltInVariableRecord>()
+
+  const params = reactive<Recordable & { [key in BuiltInVariable]?: any }>({})
+
+  const optionsSet = reactive<Recordable>({})
+
+  const basicPreset = (filterKey: string) => {
+    return {
+      size: 'small',
+      filterable: true,
+      filter(query, option: Recordable) {
+        return option[filterKey].includes(query)
+      }
+    } as SelectProps
+  }
+
+  const validIsExist = (keys: BuiltInVariable) => {
+    return unref(getUsedBuiltInVariable).includes(keys)
+  }
+
+  const handleSelectOrgEffect = () => {
+    params[BuiltInVariable.ENTITY_ID] = null
+    getDeviceOption()
+  }
+
+  const handleSelectDeviceProfileEffect = () => {
+    params[BuiltInVariable.ENTITY_ID] = null
+    params[BuiltInVariable.KEYS] = null
+    getDeviceOption()
+    getDeviceAttrOption()
+  }
+
+  const getBuiltInVariable = async () => {
+    if (Object.keys(unref(builtInVariable) || {}).length) return
+    const result = await getDictItemByCode(DictEnum.BUILTIN_PARAMS)
+    builtInVariable.value = result.reduce((prev, next) => {
+      return { ...prev, [next.itemValue]: next }
+    }, {} as BuiltInVariableRecord)
+  }
+
+  const getOrgOption = async () => {
+    if (!validIsExist(BuiltInVariable.ORGANIZATION_ID)) return
+    optionsSet[BuiltInVariable.ORGANIZATION_ID] = await getOrgList()
+  }
+
+  const getDeviceProfileOption = async () => {
+    if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID)) return
+    optionsSet[BuiltInVariable.DEVICE_PROFILE_ID] = await getDeviceProfileList()
+  }
+
+  const getDeviceOption = async () => {
+    if (!validIsExist(BuiltInVariable.DEVICE_PROFILE_ID) || !validIsExist(BuiltInVariable.ORGANIZATION_ID) || !params[BuiltInVariable.ORGANIZATION_ID]) return
+    optionsSet[BuiltInVariable.ENTITY_ID] = await getDeviceList({ [BuiltInVariable.ORGANIZATION_ID]: params[BuiltInVariable.ORGANIZATION_ID], [BuiltInVariable.DEVICE_PROFILE_ID]: params[BuiltInVariable.DEVICE_PROFILE_ID] })
+  }
+
+  const getDeviceAttrOption = async () => {
+    if (!validIsExist(BuiltInVariable.KEYS)) return
+    if (!params[BuiltInVariable.DEVICE_PROFILE_ID]) return
+    const result = await getDeviceAttrList(params[BuiltInVariable.DEVICE_PROFILE_ID])
+    if (Array.isArray(result)) optionsSet[BuiltInVariable.KEYS] = result
+  }
+
+  const getSelectOrgTree = computed<TreeSelectProps>(() => {
+    return {
+      ...basicPreset('name'),
+      value: params[BuiltInVariable.ORGANIZATION_ID],
+      options: unref(optionsSet[BuiltInVariable.ORGANIZATION_ID]),
+      labelField: 'name',
+      keyField: 'id',
+      childrenField: 'children',
+      onUpdateValue(value) {
+        params[BuiltInVariable.ORGANIZATION_ID] = value
+        handleSelectOrgEffect()
+      }
+    } as TreeSelectProps
+  })
+
+
+  const getSelectDeviceProfile = computed<SelectProps>(() => {
+    return {
+      ...basicPreset('name'),
+      value: params[BuiltInVariable.DEVICE_PROFILE_ID],
+      options: unref(optionsSet[BuiltInVariable.DEVICE_PROFILE_ID]),
+      labelField: 'name',
+      valueField: 'id',
+      onUpdateValue(value) {
+        params[BuiltInVariable.DEVICE_PROFILE_ID] = value
+        handleSelectDeviceProfileEffect()
+      }
+    }
+  })
+
+  const getSelectDevice = computed<SelectProps>(() => {
+    return {
+      ...basicPreset('name'),
+      value: params[BuiltInVariable.ENTITY_ID],
+      options: unref(optionsSet[BuiltInVariable.ENTITY_ID]),
+      labelField: 'name',
+      valueField: 'id',
+      onUpdateValue(value) {
+        params[BuiltInVariable.ENTITY_ID] = value
+      }
+    }
+  })
+
+  const getSelectDeviceAttr = computed<SelectProps>(() => {
+    return {
+      ...basicPreset('name'),
+      value: params[BuiltInVariable.KEYS],
+      options: unref(optionsSet[BuiltInVariable.KEYS]),
+      labelField: 'name',
+      valueField: 'identifier',
+      onUpdateValue(value) {
+        params[BuiltInVariable.KEYS] = value
+      }
+    }
+  })
+
+  const getSelectDate = computed(() => {
+    return {
+      size: 'small',
+      value: params[BuiltInVariable.DATE],
+      type: 'datetimerange',
+      clearable: true,
+      defaultTime: ['00:00:00', '00:00:00'],
+      onUpdateValue(value) {
+        params[BuiltInVariable.DATE] = value
+      }
+    } as DatePickerProps
+  })
+
+  const getBasicInput = (key: string) => {
+    return {
+      size: 'small',
+      value: params[key],
+      onUpdateValue(value) {
+        params[key] = value
+      }
+    } as InputProps
+  }
+
+  const builtInVariableConfiguration: { [key in BuiltInVariable]?: DynamicFormSchema } = {
+    [BuiltInVariable.ORGANIZATION_ID]: {
+      component: ComponentType.SELECT_TREE,
+      key: BuiltInVariable.ORGANIZATION_ID,
+      props: getSelectOrgTree
+    },
+    [BuiltInVariable.DEVICE_PROFILE_ID]: {
+      component: ComponentType.SELECT,
+      key: BuiltInVariable.DEVICE_PROFILE_ID,
+      props: getSelectDeviceProfile
+    },
+    [BuiltInVariable.ENTITY_ID]: {
+      component: ComponentType.SELECT,
+      key: BuiltInVariable.ENTITY_ID,
+      props: getSelectDevice
+    },
+    [BuiltInVariable.KEYS]: {
+      component: ComponentType.SELECT,
+      key: BuiltInVariable.KEYS,
+      props: getSelectDeviceAttr
+    },
+    [BuiltInVariable.DATE]: {
+      component: ComponentType.DATE_PICKER,
+      key: BuiltInVariable.DATE,
+      props: getSelectDate
+    }
+  }
+
+  const validFlag = ref(true)
+
+  const createRules = (required: boolean, key: string, message: string) => {
+    return [{
+      trigger: ['blur', 'change'],
+      validator() {
+        if (required && !params[key]) {
+          validFlag.value = false
+          return new Error(`${message}是必填项`)
+        }
+        validFlag.value = true
+      }
+    }] as FormItemRule
+  }
+
+  const toFormSchemas = (builtInVariableKey: string, required: boolean, value: any) => {
+    const groupList = builtInVariableKey.split(GROUP_SEPARATOR)
+    return groupList.reduce((prev, next) => {
+      const result = builtInVariableConfiguration[next as BuiltInVariable]
+      const props = unref(result?.props)
+      const name = (unref(builtInVariable) || {})[next as BuiltInVariable]?.itemText
+      let schema: DynamicFormSchema
+      if (builtInVariableConfiguration[next as BuiltInVariable]) {
+        schema = {
+          ...result,
+          props,
+          name,
+          required,
+          rules: createRules(required, next, name || next)
+        } as DynamicFormSchema
+      } else {
+        schema = {
+          key: value,
+          name: value,
+          component: ComponentType.INPUT,
+          props: getBasicInput(value),
+          required,
+          rules: createRules(required, value, value)
+        } as DynamicFormSchema
+      }
+
+      return [...prev, schema]
+
+    }, [] as DynamicFormSchema[])
+
+  }
+
+  const getDynamicFormSchemas = computed(() => {
+    return unref(getParams).reduce((prev, { key, value, required }) => {
+      const schemas = toFormSchemas(key, required, value)
+      return [...prev, ...schemas]
+    }, [] as DynamicFormSchema[])
+  })
+
+  const createForm = async () => {
+    await getBuiltInVariable()
+    await getOrgOption()
+    getDeviceProfileOption()
+    getDeviceOption()
+  }
+
+  const setParams = (Params: Recordable) => {
+    unref(getParams).forEach(({ key, value }) => {
+      if (unref(getUsedBuiltInVariable).includes(key)) {
+        params[key] = Params[key]
+      }
+      params[value] = Params[value]
+    })
+  }
+
+  const setDynamicFormValue = (requestParams: RequestConfigType['requestParams']) => {
+    const { Params } = requestParams
+    setParams(Params)
+    getOrgOption()
+    getDeviceProfileOption()
+    getDeviceOption()
+    getDeviceAttrOption()
+  }
+
+  onMounted(() => {
+    getBuiltInVariable()
+  })
+
+  return {
+    validFlag,
+    params,
+    getDynamicFormSchemas,
+    setDynamicFormValue,
+    createForm
+  }
+}
+

+import { PublicInterfaceRecord } from "@/api/external/dynamicRequest/model"
+import { RequestDataTypeEnum, RequestParams } from "@/enums/httpEnum"
+import { RequestConfigType } from "@/store/modules/chartEditStore/chartEditStore.d"
+
+export const transferData = (publicInterfaceRecord: PublicInterfaceRecord, requestParams: RequestParams, fillParams: Recordable) => {
+  const { requestContentType, requestHttpType, id, requestUrl, requestParamsBodyType, requestOriginUrl } = publicInterfaceRecord
+  const { Header, Body } = requestParams
+  return {
+    requestDataPondId: id,
+    // requestInterval  
+    // 获取数据的方式
+    requestDataType: RequestDataTypeEnum.Pond,
+    // 请求方式 get/post/del/put/patch
+    requestHttpType,
+    // 源后续的 url
+    requestUrl: `${requestOriginUrl}${requestUrl}`,
+    // 请求内容主体方式 普通/sql
+    requestContentType,
+    // 请求体类型
+    requestParamsBodyType,
+    // SQL 请求对象
+    // requestSQLContent: {
+    //   sql: ''
+    // }
+    // requestIntervalUnit
+    requestParams: {
+      Header,
+      Body,
+      Params: fillParams
+    }
+
+  } as RequestConfigType
+}

+export { default as RequestInfoPanel } from './index.vue'

+<script setup lang="ts">
+import { toRefs, computed } from 'vue'
+import { icon } from '@/plugins'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { NButton, NCard, NTag, NInput, NIcon } from 'naive-ui'
+
+const emit = defineEmits(['clickPanel'])
+
+const { FlashIcon, PulseIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+
+const {
+  requestOriginUrl,
+  requestInterval: GlobalRequestInterval,
+  requestIntervalUnit: GlobalRequestIntervalUnit
+} = toRefs(chartEditStore.getRequestGlobalConfig)
+
+const designStore = useDesignStore()
+
+// 请求配置 model
+const requestModelHandle = () => {
+  emit('clickPanel')
+}
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+</script>
+
+<template>
+  <NCard class="n-card-shallow">
+    <SettingItemBox name="请求配置">
+      <SettingItem name="类型">
+        <NTag :bordered="false" type="primary" style="border-radius: 5px">
+          {{ targetData.request.requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
+        </NTag>
+      </SettingItem>
+
+      <SettingItem name="方式">
+        <NInput size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></NInput>
+      </SettingItem>
+
+      <SettingItem name="组件间隔">
+        <NInput size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
+          <template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
+        </NInput>
+      </SettingItem>
+
+      <SettingItem name="全局间隔（默认）">
+        <NInput size="small" :placeholder="`${GlobalRequestInterval || '暂无'} `" :disabled="true">
+          <template #suffix> {{ SelectHttpTimeNameObj[GlobalRequestIntervalUnit] }} </template>
+        </NInput>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="源地址" :alone="true">
+      <NInput size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
+        <template #prefix>
+          <NIcon :component="PulseIcon" />
+        </template>
+      </NInput>
+    </SettingItemBox>
+
+    <SettingItemBox name="组件地址" :alone="true">
+      <NInput size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
+        <template #prefix>
+          <NIcon :component="FlashIcon" />
+        </template>
+      </NInput>
+    </SettingItemBox>
+
+    <div class="edit-text" @click="requestModelHandle">
+      <div class="go-absolute-center">
+        <NButton type="primary" secondary>编辑配置</NButton>
+      </div>
+    </div>
+  </NCard>
+</template>
+
+<style lang="scss" scoped>
+.n-card-shallow {
+  &.n-card {
+    @extend .go-background-filter;
+
+    @include deep() {
+      .n-card__content {
+        padding: 10px;
+      }
+    }
+  }
+
+  .edit-text {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 325px;
+    height: 270px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all 0.3s;
+    @extend .go-background-filter;
+    backdrop-filter: blur(2px) !important;
+  }
+
+  &:hover {
+    border-color: v-bind('themeColor');
+
+    .edit-text {
+      opacity: 1;
+    }
+  }
+}
+</style>

+<script setup lang="ts">
+import { NInput, NInputNumber, NInputGroup, NButton, NSelect, SelectOption, NTabs, NTabPane, NSpace } 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';
+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';
+import { getUrl } from '@/api/external/customRequest'
+
+const chartEditStore = useChartEditStore()
+
+const requestContentTypeRef = ref(RequestContentTypeEnum.DEFAULT)
+
+const requestHttpTypeRef = ref(RequestHttpEnum.GET)
+
+const requestIntervalRef = ref<number | undefined>(20)
+
+const requestIntervalUnitRef = ref(RequestHttpIntervalEnum.SECOND)
+
+const requestSQLContentRef = ref('select * from where')
+
+const requestParamsRef = ref({ Header: {}, Params: {}, Body: { 'form-data': {}, 'json': '', 'x-www-form-urlencoded': {}, 'xml': '' } } as RequestParams)
+
+const requestParamsBodyTypeRef = ref(RequestBodyEnum.NONE)
+
+const requestUrlRef = ref<string>()
+
+const getConfigurationData = (): RequestConfigType => {
+  return {
+    requestContentType: unref(requestContentTypeRef),
+    requestHttpType: unref(requestHttpTypeRef),
+    requestInterval: unref(requestIntervalRef),
+    requestIntervalUnit: unref(requestIntervalUnitRef),
+    requestDataType: RequestDataTypeEnum.AJAX,
+    requestParamsBodyType: unref(requestParamsBodyTypeRef),
+    requestSQLContent: {
+      sql: unref(requestSQLContentRef)
+    },
+    requestParams: unref(requestParamsRef),
+    requestUrl: `${chartEditStore.requestGlobalConfig.requestOriginUrl}${unref(requestUrlRef)}`
+  }
+}
+
+
+const setConfigurationData = (request: RequestConfigType) => {
+  const { requestContentType, requestHttpType, requestInterval, requestIntervalUnit, requestParamsBodyType, requestSQLContent, requestParams, requestUrl } = request
+  requestContentTypeRef.value = requestContentType
+  requestHttpTypeRef.value = requestHttpType
+  requestIntervalRef.value = requestInterval
+  requestIntervalUnitRef.value = requestIntervalUnit
+  requestParamsBodyTypeRef.value = requestParamsBodyType
+  requestSQLContentRef.value = requestSQLContent.sql
+  requestParamsRef.value = requestParams
+  const { pathname } = getUrl(requestUrl!)
+  requestUrlRef.value = pathname
+}
+
+defineExpose({
+  getConfigurationData,
+  setConfigurationData
+})
+
+</script>
+
+<template>
+  <SettingItemBox name="地址" :itemRightStyle="{
+    gridTemplateColumns: '5fr 2fr 1fr'
+  }">
+    <SettingItem name="请求方式 & URL地址">
+      <NInputGroup>
+        <NSelect v-model:value="requestHttpTypeRef" style="width: 150px;" size="small"
+          :options="(selectTypeOptions as SelectOption[])" />
+        <NInput v-model:value="requestUrlRef" class="select-time-number" size="small" min="0" :show-button="false"
+          placeholder="请输入URL地址" />
+      </NInputGroup>
+    </SettingItem>
+    <SettingItem name="更新间隔，为 0 只会初始化">
+      <NInputGroup>
+        <NInputNumber v-model:value="requestIntervalRef" class="select-time-number" size="small" min="0"
+          :show-button="false" placeholder="请输入数字" />
+        <!-- 单位 -->
+        <NSelect v-model:value="requestIntervalUnitRef" class="select-time-options" size="small"
+          :options="(selectTimeOptions as SelectOption[])" />
+      </NInputGroup>
+    </SettingItem>
+  </SettingItemBox>
+  <SettingItemBox name="选择方式">
+    <NTabs v-model:value="requestContentTypeRef" type="segment" size="small">
+      <NTabPane :name="RequestContentTypeEnum.DEFAULT" tab="普通请求" />
+      <NTabPane :name="RequestContentTypeEnum.SQL" tab="SQL请求" />
+    </NTabs>
+  </SettingItemBox>
+  <SettingItemBox>
+    <DefaultRequestContent v-if="requestContentTypeRef === RequestContentTypeEnum.DEFAULT"
+      v-model:value="requestParamsRef" v-model:request-params-body-type="requestParamsBodyTypeRef" />
+    <SqlConfiguration v-model:value="requestSQLContentRef" v-if="requestContentTypeRef === RequestContentTypeEnum.SQL" />
+  </SettingItemBox>
+</template>

+<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';
+
+defineProps<{
+  value: RequestParams
+  requestParamsBodyType: RequestBodyEnum
+}>()
+
+const emit = defineEmits(['update:requestParamsBodyType'])
+
+const tabValue = ref(RequestParamsTypeEnum.PARAMS)
+
+const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
+  emit('update:requestParamsBodyType', value)
+}
+
+
+</script>
+
+<template>
+  <section class="container">
+    <NTabs v-model:value="tabValue">
+      <NTabPane v-for="item in RequestParamsTypeEnum" :name="item" :key="item"></NTabPane>
+    </NTabs>
+    <section v-if="tabValue === RequestParamsTypeEnum.PARAMS">
+      <ParamsTable v-model:value="value[RequestParamsTypeEnum.PARAMS]" />
+    </section>
+
+    <RequestBody v-model:value="value" @update:requestParamsBodyType="handleSyncRequestParamsBodyType"
+      v-model:requestParamsBodyType="requestParamsBodyType" v-if="tabValue === RequestParamsTypeEnum.BODY" />
+
+    <ParamsTable v-if="tabValue === RequestParamsTypeEnum.HEADER" v-model:value="value.Header" />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 600px;
+}
+
+.body-container {
+  margin-top: 20px;
+}
+</style>

+<script lang="ts" setup>
+import { RequestParamsTypeEnum } from '@/enums/httpEnum';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { NTabPane, NTabs } from 'naive-ui';
+import { ref } from 'vue';
+import ParamsTable from './ParamsTable.vue';
+
+const chartEditStore = useChartEditStore()
+
+const tabs: RequestParamsTypeEnum[] = [RequestParamsTypeEnum.HEADER]
+
+const currenPanel = ref(RequestParamsTypeEnum.HEADER)
+ 
+
+</script>
+
+<template>
+  <NTabs type="line" animated>
+    <NTabPane v-model:value="currenPanel" v-for="item in tabs" :name="item" :tab="item" :key="item" />
+  </NTabs>
+  <section>
+    <ParamsTable v-if="currenPanel === RequestParamsTypeEnum.HEADER" v-model:value="chartEditStore.requestGlobalConfig.requestParams.Header" />
+  </section>
+</template>

+<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 GlobalParamsConfiguration from './GlobalParamsConfiguration.vue'
+import { ChevronDown, ChevronUp } from '@vicons/carbon'
+import { useDesignStore } from '@/store/modules/designStore/designStore';
+import { selectTimeOptions } from '../../../index.d';
+import { RequestConfigType, RequestGlobalConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { useTargetData } from '../../../../hooks/useTargetData.hook';
+import { RequestHttpIntervalEnum } from '@/enums/httpEnum';
+
+const { PencilIcon } = icon.ionicons5
+const designStore = useDesignStore()
+const editDisabled = ref(false)
+const collapseHeaderTable = ref(false)
+
+const { chartEditStore } = useTargetData()
+
+const handleCollapse = () => {
+  collapseHeaderTable.value = !unref(collapseHeaderTable)
+}
+
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+
+
+</script>
+
+<template>
+  <NCard>
+    <template #header>
+      <NTag type="info">全局公共配置</NTag>
+    </template>
+    <NSpace vertical>
+      <SettingItemBox name="服务" :itemRightStyle="{
+        gridTemplateColumns: '5fr 2fr 1fr'
+      }">
+        <!-- 源地址 -->
+        <SettingItem name="前置 URL">
+          <NInput v-model:value="chartEditStore.requestGlobalConfig.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.requestGlobalConfig.requestInterval" class="select-time-number"
+              size="small" min="0" :show-button="false" :disabled="editDisabled" placeholder="请输入数字">
+            </NInputNumber>
+            <!-- 单位 -->
+            <NSelect v-model:value="chartEditStore.requestGlobalConfig.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">
+          <template #icon>
+            <NIcon>
+              <PencilIcon />
+            </NIcon>
+          </template>
+          编辑配置
+        </NButton>
+      </SettingItemBox>
+      <NCollapseTransition :show="collapseHeaderTable">
+        <GlobalParamsConfiguration />
+      </NCollapseTransition>
+      <section class="arrow">
+        <NTooltip>
+          <template #trigger>
+            <NIcon @click="handleCollapse" size="30">
+              <ChevronDown v-show="!collapseHeaderTable" />
+              <ChevronUp v-show="collapseHeaderTable" />
+            </NIcon>
+          </template>
+          <span>{{ collapseHeaderTable ? '收起' : '展开' }}</span>
+        </NTooltip>
+      </section>
+    </NSpace>
+  </NCard>
+</template>
+
+
+<style lang="scss" scoped>
+.arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  &: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';
+import { Subtract, Add } from '@vicons/carbon'
+import { isObject } from '@/utils/external/is';
+
+interface DataSource {
+  id: string
+  value?: string
+  keyName?: string
+  result?: boolean
+}
+
+const columns: DataTableColumns<DataSource> = [
+  {
+    title: '序号',
+    key: 'index',
+    render: (_, index) => index + 1,
+    width: 50,
+  },
+  {
+    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
+      )
+    }
+  },
+  {
+    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
+      )
+    }
+  },
+  {
+    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: () => '删除行'
+            }
+          )
+        ]
+      )
+    },
+    width: 100,
+  },
+  {
+    title: '结果',
+    key: 'result',
+    render: (row) => {
+      return h(NTag, { type: row.result ? 'success' : 'error' } as TagProps, () => `${row.result ? '' : '未'}通过`)
+    },
+    width: 80
+  }
+]
+
+const props = withDefaults(
+  defineProps<{
+    value?: Recordable
+    disabled?: boolean
+    maxRow?: number
+  }>(),
+  {
+    disabled: false,
+    maxRow: 50,
+  }
+)
+
+const emit = defineEmits(['update:value'])
+
+const createNewRow = () => {
+  return { id: getUUID(), result: true } as DataSource
+}
+
+const dataSource = ref<DataSource[]>([
+  createNewRow()
+])
+
+watch(
+  () => props.value,
+  (target) => {
+    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()]
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const canDeleteRow = computed(() => {
+  return unref(dataSource).length >= 2
+})
+
+const canAddRow = computed(() => {
+  return unref(dataSource).length < props.maxRow
+})
+
+const handleAddRow = (record: DataSource) => {
+  const index = unref(dataSource).findIndex(item => item.id === record.id)
+  unref(dataSource).splice(index + 1, 0, createNewRow())
+}
+
+const handleSubtractRow = (record: DataSource) => {
+  const index = unref(dataSource).findIndex(item => item.id === record.id)
+  unref(dataSource).splice(index, 1)
+}
+
+
+const handleInputBlur = (record: DataSource) => {
+  const { keyName, value } = record
+  record.result = !!(keyName && value)
+  if (unref(dataSource).every(item => item.result)) {
+    emit('update:value', getHeaderConfiguration())
+  }
+}
+
+const getHeaderConfiguration = () => {
+  return unref(dataSource).reduce((prev, next) => {
+    const { result, value, keyName } = next
+    const header = result && value && keyName ? { [keyName]: value } : {}
+    return { ...prev, ...header }
+  }, {} as Recordable)
+}
+
+</script>
+
+<template>
+  <NDataTable size="small" :columns="columns" :data="dataSource" max-height="300" />
+</template>

+<script lang="ts" setup>
+import { MonacoEditor } from '@/components/Pages/MonacoEditor';
+import { RequestBodyEnum, RequestBodyEnumList, RequestParams } from '@/enums/httpEnum';
+import { NCard } from 'naive-ui';
+import ParamsTable from './ParamsTable.vue';
+
+defineProps<{
+  requestParamsBodyType: RequestBodyEnum
+  value: RequestParams
+}>()
+
+const emit = defineEmits(['update:requestParamsBodyType'])
+
+const handleSyncRequestParamsBodyType = (value: RequestBodyEnum) => {
+  emit('update:requestParamsBodyType', value)
+}
+
+</script>
+
+<template>
+  <section>
+    <NRadioGroup v-model:value="requestParamsBodyType" @update:value="handleSyncRequestParamsBodyType">
+      <NSpace>
+        <NRadio v-for="item in RequestBodyEnumList" :key="item" :value="item">
+          {{ item }}
+        </NRadio>
+      </NSpace>
+    </NRadioGroup>
+
+    <section class="body-container">
+      <!-- 为 none 时 -->
+      <NCard v-if="requestParamsBodyType === RequestBodyEnum.NONE">
+        <NText depth="3">该接口没有 Body 体</NText>
+      </NCard>
+
+      <ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.FORM_DATA"
+        v-model:value="value.Body[RequestBodyEnum.FORM_DATA]" />
+
+      <ParamsTable v-if="requestParamsBodyType === RequestBodyEnum.X_WWW_FORM_URLENCODED"
+        v-model:value="value.Body[RequestBodyEnum.X_WWW_FORM_URLENCODED]" />
+
+      <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.JSON"
+        v-model:modelValue="value.Body[RequestBodyEnum.JSON]" width="600px" height="200px" language="json" />
+
+      <MonacoEditor v-if="requestParamsBodyType === RequestBodyEnum.XML"
+        v-model:modelValue="value.Body[RequestBodyEnum.XML]" width="600px" height="200px" language="xml" />
+    </section>
+  </section>
+</template>
+
+<style lang="scss" scoped>
+  .body-container {
+    margin-top: 20px;
+  }
+</style>

+<script lang="ts" setup>
+import { SettingItemBox } from '@/components/Pages/ChartItemSetting';
+import { MonacoEditor } from '@/components/Pages/MonacoEditor';
+import { NTag } from 'naive-ui';
+
+defineProps<{
+  value: string
+}>()
+
+const emits = defineEmits(['update:value'])
+
+const updateValue = (value: string) => {
+  emits('update:value', value)
+}
+
+</script>
+
+<template>
+  <section>
+    <NTag type="warning">需要后台提供专门处理sql的借口</NTag>
+    <SettingItemBox name="键名">
+      <NTag type="success" style="width: fit-content;">sql</NTag>
+    </SettingItemBox>
+    <SettingItemBox name="键值">
+      <MonacoEditor v-model:modelValue="value" @update:modelValue="updateValue" width="600px" height="200px"
+        language="sql" />
+    </SettingItemBox>
+  </section>
+</template>

+export { default as RequestModal } from './index.vue'

+<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 { GlobalComponentConfig, 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';
+
+const requestDataType = ref<RequestDataTypeEnum>(RequestDataTypeEnum.AJAX)
+
+const showModal = ref(false)
+
+const chartEditStore = useChartEditStore()
+
+const globalConfigurationEl = ref<Nullable<InstanceType<typeof GlobalPublicConfiguration>>>()
+
+const componentConfigurationEl = ref<Nullable<InstanceType<typeof ComponentConfiguration>>>()
+
+const publicInterfaceFormEl = ref<Nullable<InstanceType<typeof PublicInterfaceForm>>>()
+
+const getRequestTypeName = computed(() => {
+  return RequestDataTypeNameEnum[RequestDataTypeEnum[unref(requestDataType)] as keyof typeof RequestDataTypeEnum]
+})
+
+const { prefixCls } = useDesign('chart-data-request')
+
+const openModal = async (flag = true, type: RequestDataTypeEnum) => {
+  requestDataType.value = type
+  showModal.value = flag
+  await nextTick()
+  unref(componentConfigurationEl)?.setConfigurationData(unref(selectTarget)!.request || {})
+  unref(publicInterfaceFormEl)?.setConfigurationData(unref(selectTarget)!.request || {})
+}
+
+const handleSaveAndRequest = () => {
+  handleSaveAction()
+}
+
+const selectTarget = computed<CreateComponentType | CreateComponentGroupType | undefined>(() => {
+  const selectId = chartEditStore.getTargetChart.selectId
+  // 排除多个
+  if (selectId.length !== 1) return undefined
+  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  return target as CreateComponentType | CreateComponentGroupType
+})
+
+const validate = async () => {
+  if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
+    return await unref(publicInterfaceFormEl)?.validate()
+  }
+  return true
+}
+
+const getResult = () => {
+  if (unref(requestDataType) === RequestDataTypeEnum.AJAX) {
+    return unref(componentConfigurationEl)?.getConfigurationData()
+  } else if (unref(requestDataType) === RequestDataTypeEnum.Pond) {
+    return unref(publicInterfaceFormEl)?.getConfigurationData()
+  }
+
+  return {} as unknown as RequestConfigType
+}
+
+const handleSaveAction = async () => {
+  if (!(await validate())) return
+  const value = getResult()
+  console.log(value)
+  if (unref(selectTarget)) {
+    chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), {
+      ...unref(selectTarget)!,
+      request: value!
+    })
+  }
+  showModal.value = false
+}
+
+createRequestModalContext({
+  requestDataType
+})
+
+defineExpose({
+  openModal,
+})
+
+</script>
+
+<template>
+  <NModal :class="prefixCls" v-model:show="showModal" preset="card" style="width: 1000px;" title="请求配置">
+    <GlobalPublicConfiguration v-if="requestDataType === RequestDataTypeEnum.AJAX" ref="globalConfigurationEl" />
+    <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; align-items: center;  ">
+          <span>「 更多 」</span>
+          <span style="margin-right: 5px;">——</span>
+          <NTag type="info">{{ getRequestTypeName }}</NTag>
+        </div>
+        <NButton type="primary" @click="handleSaveAndRequest">保存 & 发送请求</NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+
+<style lang="scss" >
+@include thingsKit('chart-data-request') {
+
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+
+  .n-card-shallow {
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+
+  @include deep() {
+    &>.n-card__content {
+      padding-right: 0;
+    }
+
+    .n-card__content {
+      padding-bottom: 5px;
+    }
+  }
+}
+</style>

+import { RequestDataTypeEnum } from "@/enums/external/httpEnum"
+import { createContext, useContext } from "@/utils/external/useAppContext"
+import { InjectionKey, Ref } from "vue"
+
+export interface RequestContextProps {
+  requestDataType: Ref<RequestDataTypeEnum>
+}
+
+const key: InjectionKey<RequestContextProps> = Symbol()
+
+export const useRequestModalContext = () => {
+  return useContext<RequestContextProps>(key)
+}
+
+export const createRequestModalContext = (context: RequestContextProps) => {
+  return createContext(context, key)
+}

 <template>
   <div class="go-chart-configurations-data" v-if="targetData">
     <setting-item-box name="请求方式" :alone="true">
-      <n-select v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
+      <!-- THINGS_KIT 请求方式选项修改-->
+      <n-select v-if="targetData.request.requestDataType !== RequestDataTypeEnum.Pond"
+        v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
+      <n-select v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"
+        v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="[
+          {
+            label: SelectCreateDataEnum.STATIC,
+            value: RequestDataTypeEnum.STATIC
+          },
+          {
+            label: SelectCreateDataEnum.AJAX,
+            value: RequestDataTypeEnum.Pond
+          }
+        ]" />
     </setting-item-box>
     <!-- 静态 -->
     <chart-data-static v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"></chart-data-static>
+    <!-- THINGS_KIT 重写动态请求面板 -->
+    <ChartDynamicRequest v-if="targetData.request.requestDataType !== RequestDataTypeEnum.STATIC" />
     <!-- 动态 -->
-    <chart-data-ajax v-if="targetData.request.requestDataType === RequestDataTypeEnum.AJAX"></chart-data-ajax>
+    <!-- <chart-data-ajax v-if="targetData.request.requestDataType === RequestDataTypeEnum.AJAX"></chart-data-ajax> -->
+
+    <!-- THINGS_KIT 隐藏公共请求面板 -->
     <!-- 数据池 -->
-    <chart-data-pond v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"></chart-data-pond>
+    <!-- <chart-data-pond v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"></chart-data-pond> -->
   </div>
 </template>
 
@@ -23,7 +40,10 @@ import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
 
 const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
 const ChartDataAjax = loadAsyncComponent(() => import('./components/ChartDataAjax/index.vue'))
-const ChartDataPond = loadAsyncComponent(() => import('./components/ChartDataPond/index.vue'))
+
+// THINGS_KIT 重写动态请求面板
+// const ChartDataPond = loadAsyncComponent(() => import('./components/ChartDataPond/index.vue'))
+const ChartDynamicRequest = loadAsyncComponent(() => import('./external/components/ChartDynamicRequest/index.vue'))
 
 const { targetData } = useTargetData()
 
@@ -37,10 +57,11 @@ const selectOptions: SelectCreateDataType[] = [
     label: SelectCreateDataEnum.AJAX,
     value: RequestDataTypeEnum.AJAX
   },
-  {
-    label: SelectCreateDataEnum.Pond,
-    value: RequestDataTypeEnum.Pond
-  }
+  // THINGS_KIT 隐藏公共请求面板
+  // {
+  //   label: SelectCreateDataEnum.Pond,
+  //   value: RequestDataTypeEnum.Pond
+  // }
 ]
 
 // 无数据源