Merge branch 'dev' into dev-commet

build/constant.ts

@@ -1,3 +1,4 @@
+import path from 'path'
 export const OUTPUT_DIR = 'dist'
 
 // monaco-editor 路径
@@ -6,7 +7,7 @@ export const prefix = `monaco-editor/esm/vs`
 // chunk 警告大小
 export const chunkSizeWarningLimit = 2000
 
-// 禁用 brotli 压缩大小报告
+// 禁用 brotliSize 压缩大小报告
 export const brotliSize = false
 
 // 分包
@@ -14,7 +15,12 @@ export const rollupOptions = {
   output: {
     chunkFileNames: 'static/js/[name]-[hash].js',
     entryFileNames: 'static/js/[name]-[hash].js',
-    assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+    assetFileNames: (chunkInfo) => {
+      if(['.png', '.jpg', '.jpeg'].includes(path.extname(chunkInfo.name))) {
+        return `static/[ext]/[name].[ext]`
+      }
+      return `static/[ext]/[name]-[hash].[ext]`
+    },
     manualChunks: {
       jsonWorker: [`${prefix}/language/json/json.worker`],
       cssWorker: [`${prefix}/language/css/css.worker`],

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.27.2",
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
+    "dom-helpers": "^5.2.1",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",

pnpm-lock.yaml

@@ -25,6 +25,7 @@ specifiers:
   commitlint: ^17.0.2
   crypto-js: ^4.1.1
   default-passive-events: ^2.0.0
+  dom-helpers: ^5.2.1
   echarts: ^5.3.2
   echarts-liquidfill: ^3.1.0
   echarts-stat: ^1.2.0
@@ -77,6 +78,7 @@ dependencies:
   axios: 0.27.2
   color: 4.2.3
   crypto-js: 4.1.1
+  dom-helpers: 5.2.1
   echarts-liquidfill: 3.1.0_echarts@5.3.3
   echarts-stat: 1.2.0
   echarts-wordcloud: 2.0.0_echarts@5.3.3
@@ -402,6 +404,13 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/runtime/7.20.6:
+    resolution: {integrity: sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/template/7.16.7:
     resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
     engines: {node: '>=6.9.0'}
@@ -1912,7 +1921,7 @@ packages:
     dev: true
 
   /csstype/2.6.20:
-    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/csstype/-/csstype-2.6.20.tgz}
+    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
     dev: false
 
   /csstype/3.0.11:
@@ -2065,6 +2074,13 @@ packages:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
     dev: true
 
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.20.6
+      csstype: 3.0.11
+    dev: false
+
   /dom-serializer/1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
     dependencies:
@@ -3074,7 +3090,7 @@ packages:
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.16.0
+      uglify-js: 3.17.4
     dev: true
 
   /hard-rejection/2.1.0:
@@ -4462,6 +4478,10 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /regenerator-runtime/0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
   /regexp.prototype.flags/1.4.3:
     resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
     engines: {node: '>= 0.4'}
@@ -5014,8 +5034,8 @@ packages:
     hasBin: true
     dev: true
 
-  /uglify-js/3.16.0:
+  /uglify-js/3.17.4:
-    resolution: {integrity: sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==}
+    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
     engines: {node: '>=0.8.0'}
     hasBin: true
     requiresBuild: true

src/api/http.ts

@@ -116,7 +116,6 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
   if (!targetParams || !globalParams) {
     return
   }
-
   // 全局
   const {
     // 全局请求源地址

src/components/GoSystemInfo/index.vue

@@ -42,15 +42,21 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, watch } from 'vue'
 import { icon } from '@/plugins'
 
-const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
+const props = defineProps({
-const emit = defineEmits(['update:modelShow'])
-
-defineProps({
   modelShow: Boolean
 })
 
+const emit = defineEmits(['update:modelShow'])
+const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
+const modelShow = ref(false)
+
+watch(() => props.modelShow, (newValue) => {
+  modelShow.value = newValue
+})
+
 const closeHandle = () => {
   emit('update:modelShow', false)
 }

src/components/GoSystemSet/index.vue

@@ -69,21 +69,20 @@
 </template>
 
 <script script lang="ts" setup>
-import { reactive } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { ListType } from './index.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
 import { SettingStoreEnums, ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
 import { icon } from '@/plugins'
 
-const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
+const props = defineProps({
-
-const emit = defineEmits(['update:modelShow'])
-
-defineProps({
   modelShow: Boolean
 })
 
+const emit = defineEmits(['update:modelShow'])
+const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
 const settingStore = useSettingStore()
+const modelShow = ref(false)
 
 const list = reactive<ListType[]>([
   {
@@ -168,6 +167,10 @@ const list = reactive<ListType[]>([
   }
 ])
 
+watch(() => props.modelShow, (newValue) => {
+  modelShow.value = newValue
+})
+
 const closeHandle = () => {
   emit('update:modelShow', false)
 }

src/enums/editPageEnum.ts

@@ -67,7 +67,8 @@ export enum WinKeyboard {
   ALT = ' alt',
   CTRL_SOURCE_KEY = 'control',
   SHIFT_SOURCE_KEY = 'shift',
-  ALT_SOURCE_KEY = 'alt'
+  ALT_SOURCE_KEY = 'alt',
+  SPACE = 'Space'
 }
 
 // Mac 键盘枚举

src/hooks/useChartDataFetch.hook.ts

@@ -26,7 +26,6 @@ export const useChartDataFetch = (
 
   // 数据池
   const { addGlobalDataInterface } = useChartDataPondFetch()
-  const { requestDataPondId } = toRefs(targetComponent.request)
 
   // 组件类型
   const { chartFrame } = targetComponent.chartConfig
@@ -89,7 +88,6 @@ export const useChartDataFetch = (
 
         // 立即调用
         fetchFn()
-
         // 定时时间
         const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
         // 单位
@@ -104,8 +102,8 @@ export const useChartDataFetch = (
   }
 
   if (isPreview()) {
-    // 判断是否有数据池对应 id
+    // 判断是否是数据池类型
-    requestDataPondId
+    targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
       ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
       : requestIntervalFn()
   }

src/hooks/useChartDataPondFetch.hook.ts

@@ -3,7 +3,7 @@ import { customizeHttp } from '@/api/http'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { RequestGlobalConfigType, RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
-import { newFunctionHandle } from '@/utils'
+import { newFunctionHandle, intervalUnitHandle } from '@/utils'
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -24,6 +24,9 @@ const newPondItemInterval = (
   dataPondMapItem?: DataPondMapType[]
 ) => {
   if (!dataPondMapItem) return
+  let fetchInterval: any = 0
+
+  clearInterval(fetchInterval)
 
   // 请求
   const fetchFn = async () => {
@@ -48,6 +51,19 @@ const newPondItemInterval = (
 
   // 立即调用
   fetchFn()
+
+  const targetInterval = requestDataPondItem.dataPondRequestConfig.requestInterval
+  const targetUnit = requestDataPondItem.dataPondRequestConfig.requestIntervalUnit
+
+  const globalRequestInterval = requestGlobalConfig.requestInterval
+  const globalUnit = requestGlobalConfig.requestIntervalUnit
+
+  // 定时时间
+  const time = targetInterval  ? targetInterval : globalRequestInterval
+  // 单位
+  const unit = targetInterval  ? targetUnit : globalUnit
+  // 开启轮询
+  if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
 }
 
 /**
@@ -64,7 +80,7 @@ export const useChartDataPondFetch = () => {
     const { requestDataPond } = chartEditStore.getRequestGlobalConfig
 
     // 组件对应的数据池 Id
-    const requestDataPondId = '111' || (targetComponent.request.requestDataPondId as string)
+    const requestDataPondId = targetComponent.request.requestDataPondId as string
     // 新增数据项
     const mittPondIdArr = mittDataPondMap.get(requestDataPondId) || []
     mittPondIdArr.push({
@@ -74,6 +90,11 @@ export const useChartDataPondFetch = () => {
     mittDataPondMap.set(requestDataPondId, mittPondIdArr)
   }
 
+  // 清除旧数据
+  const clearMittDataPondMap = () => {
+    mittDataPondMap.clear()
+  }
+
   // 初始化数据池
   const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
     const { requestDataPond } = requestGlobalConfig
@@ -88,6 +109,7 @@ export const useChartDataPondFetch = () => {
 
   return {
     addGlobalDataInterface,
+    clearMittDataPondMap,
     initDataPond
   }
 }

src/packages/chartConfiguration/echarts/index.ts

@@ -1,2 +1,3 @@
 export * from './axis'
 export * from './line'
+export * from './label'

src/packages/chartConfiguration/echarts/label.ts

@@ -0,0 +1,7 @@
+export const labelConfig = {
+  position: [
+    { label: '外侧', value: 'outside' },
+    { label: '内部', value: 'inside' },
+    { label: '中心', value: 'center' }
+  ]
+}

src/packages/components/Charts/Pies/PieCommon/config.ts

@@ -43,7 +43,9 @@ const option = {
       },
       label: {
         show: false,
-        position: 'center'
+        position: 'center',
+        formatter: '{b}',
+        fontSize:12
       },
       emphasis: {
         label: {

src/packages/components/Charts/Pies/PieCommon/config.vue

@@ -7,6 +7,48 @@
         <n-select v-model:value="optionData.type" size="small" :options="fontWeightOptions" />
       </SettingItem>
     </SettingItemBox>
+    <SettingItemBox name="标签">
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.series[0].label.show" size="small"></n-switch>
+          <n-text>展示标签</n-text>
+        </n-space>
+      </SettingItem>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.series[0].labelLine.show" size="small"></n-switch>
+          <n-text>引导线</n-text>
+        </n-space>
+      </setting-item>
+      <SettingItem name="位置">
+        <n-select v-model:value="optionData.series[0].label.position" size="small" :options="labelConfig.position" />
+      </SettingItem>
+      <setting-item name="展示类型">
+        <n-select v-model:value="optionData.series[0].label.formatter" size="small" :options="labelFormatterOptions" />
+      </setting-item>
+    </SettingItemBox>
+    <setting-item-box name="圆角">
+      <setting-item>
+        <n-space>
+          <n-input-number
+            v-model:value="optionData.series[0].itemStyle.borderRadius"
+            size="small"
+            :min="0"
+          ></n-input-number>
+          <n-text>圆角大小</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-input-number
+            v-model:value="optionData.series[0].itemStyle.borderWidth"
+            size="small"
+            :min="0"
+          ></n-input-number>
+          <n-text>线条宽度</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
   </CollapseItem>
 </template>
 
@@ -15,6 +57,7 @@ import { PropType, watch } from 'vue'
 import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { PieTypeObject, PieTypeEnum } from './config'
+import { labelConfig } from '@/packages/chartConfiguration/echarts'
 
 const props = defineProps({
   optionData: {
@@ -36,4 +79,10 @@ const fontWeightOptions = [
     value: PieTypeObject[PieTypeEnum.ROSE]
   }
 ]
+
+const labelFormatterOptions = [
+  { label: '数据名', value: '{b}' },
+  { label: '百分比', value: '{d}' },
+  { label: '列名:百分比', value: '{b}:{d}%' }
+]
 </script>

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -6,7 +6,7 @@ export const FlipperNumberConfig: ConfigType = {
   key: 'FlipperNumber',
   chartKey: 'VFlipperNumber',
   conKey: 'VCFlipperNumber',
-  title: '数字翻牌',
+  title: '数字翻牌-需动态触发',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,

src/packages/public/publicConfig.ts

@@ -20,7 +20,7 @@ import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
 
 // 请求基础属性
-const requestConfig: RequestConfigType = {
+export const requestConfig: RequestConfigType = {
   requestDataType: RequestDataTypeEnum.STATIC,
   requestHttpType: RequestHttpEnum.GET,
   requestUrl: '',

src/plugins/naive.ts

@@ -7,6 +7,7 @@ import {
   NH2,
   NH3,
   NH4,
+  NH5,
   NCode,
   NCountdown,
   NText,
@@ -109,6 +110,7 @@ const naive = create({
     NH2,
     NH3,
     NH4,
+    NH5,
     NCode,
     NCountdown,
     NText,

src/utils/utils.ts

@@ -273,15 +273,21 @@ export const objToCookie = (obj: RequestParamsObjType) => {
  * @returns
  */
 export const setKeyboardDressShow = (keyCode?: number) => {
-  const code = new Map([[17, WinKeyboard.CTRL]])
+  const code = new Map([
+    [17, WinKeyboard.CTRL],
+    [32, WinKeyboard.SPACE]
+  ])
 
   const dom = document.getElementById('keyboard-dress-show')
   if (!dom) return
   if (!keyCode) {
+    window.onKeySpacePressHold?.(false)
     dom.innerText = ''
     return
   }
   if (keyCode && code.has(keyCode)) {
+    if (keyCode == 32) window.onKeySpacePressHold?.(true)
     dom.innerText = `按下了「${code.get(keyCode)}」键`
   }
 }
+

src/views/chart/ContentBox/index.vue

@@ -18,14 +18,14 @@
       </n-space>
     </div>
 
-    <div
+    <div class="content" :class="{
-      class="content"
+      'content-height-show-top-bottom': showBottom || showTop,
-      :class="{
+      'content-height-show-both': showBottom && showTop
-        'content-height-show-top-bottom': showBottom || showTop,
+    }">
-        'content-height-show-both': showBottom && showTop
+      <template v-if="disabledScroll">
-      }"
+        <slot></slot>
-    >
+      </template>
-      <template v-if="xScroll">
+      <template v-else-if="xScroll">
         <n-scrollbar x-scrollable>
           <n-scrollbar>
             <slot></slot>
@@ -83,7 +83,11 @@ defineProps({
   xScroll: {
     type: Boolean,
     default: false
-  }
+  },
+  disabledScroll: {
+    type: Boolean,
+    default: false
+  },
 })
 
 const backHandle = () => {
@@ -93,41 +97,52 @@ const backHandle = () => {
 
 <style lang="scss" scoped>
 $topOrBottomHeight: 40px;
+
 @include go(content-box) {
   height: calc(100vh - #{$--header-height});
   margin: 1px;
   margin-bottom: 0;
+
   &.bg-depth0 {
     @include fetch-bg-color('background-color1');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color1');
     }
   }
+
   &.bg-depth1 {
     @include fetch-bg-color('background-color1');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color2');
     }
   }
+
   &.bg-depth2 {
     @include fetch-bg-color('background-color2');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color3');
     }
   }
+
   &.bg-depth3 {
     @include fetch-bg-color('background-color3');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color4');
     }
   }
+
   &.flex {
     flex: 1;
   }
+
   .top,
   .bottom {
     display: flex;
@@ -138,10 +153,12 @@ $topOrBottomHeight: 40px;
     padding: 0 10px;
     border-top: 1px solid;
     @include fetch-border-color('hover-border-color');
+
     .mt-1 {
       margin-top: 2px;
     }
   }
+
   .top {
     border-bottom: 1px solid;
     @include fetch-border-color('background-color1');
@@ -159,6 +176,7 @@ $topOrBottomHeight: 40px;
   .content-height-show-top-bottom {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
   }
+
   .content-height-show-both {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
   }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataAjax/index.vue

@@ -12,7 +12,7 @@
           <n-input size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></n-input>
         </setting-item>
 
-        <setting-item name="组件间隔（高级）">
+        <setting-item name="组件间隔">
           <n-input size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
             <template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
           </n-input>
@@ -72,10 +72,16 @@
 
     <!-- 底部数据展示 -->
     <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+
     <!-- 骨架图 -->
     <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+    
     <!-- 请求配置model -->
-    <chart-data-request v-model:modelShow="requestShow" @sendHandle="sendHandle"></chart-data-request>
+    <chart-data-request
+      v-model:modelShow="requestShow"
+      :targetData="targetData"
+      @sendHandle="sendHandle"
+    ></chart-data-request>
   </div>
 </template>
 
@@ -91,7 +97,7 @@ import { http, customizeHttp } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
 import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { isDev, newFunctionHandle } from '@/utils'
+import { newFunctionHandle } from '@/utils'
 
 const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
@@ -124,7 +130,7 @@ const sendHandle = async () => {
     const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
     loading.value = false
     if (res) {
-      if(!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+      if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
       targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
       showMatching.value = true
       return

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMatchingAndShow/index.vue

@@ -117,7 +117,7 @@ const { uploadFileListRef, customRequest, beforeUpload, download } = useFile(tar
 
 // 是否展示过滤器
 const filterShow = computed(() => {
-  return targetData.value.request.requestDataType === RequestDataTypeEnum.AJAX
+  return targetData.value.request.requestDataType !== RequestDataTypeEnum.STATIC
 })
 
 // 是支持 dataset 的图表类型

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataMonacoEditor/index.vue

@@ -34,7 +34,7 @@
   </template>
 
   <!-- 弹窗 -->
-  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
+  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false" :closeOnEsc="false">
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 600px">
       <template #header>
         <n-space>
@@ -101,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, toRefs, toRaw } from 'vue'
+import { ref, computed, watch, toRef, toRefs, toRaw, reactive } from 'vue'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { icon } from '@/plugins'
@@ -187,7 +187,10 @@ const saveFilter = () => {
 watch(
   () => showModal.value,
   (newData: boolean) => {
-    if (newData) fetchTargetData()
+    if (newData) {
+      fetchTargetData()
+      filter.value = targetData.value.filter || `return data`
+    }
   }
 )
 </script>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/displayTable.vue

@@ -0,0 +1,64 @@
+<template>
+  <n-table
+    :bordered="false"
+    :single-line="false"
+    size="small"
+    style="border-bottom-right-radius: 7px; border-bottom-left-radius: 7px"
+  >
+    <thead>
+      <tr>
+        <th>key</th>
+        <th>value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in tableArray.content" :key="index">
+        <td>
+          {{ item.key || '暂无'}}
+        </td>
+        <td>
+          {{ item.value  || '暂无'}}
+        </td>
+      </tr>
+    </tbody>
+  </n-table>
+</template>
+
+<script setup lang="ts">
+import { PropType, reactive, ref, toRefs, watch } from 'vue'
+import { RequestParamsObjType } from '@/enums/httpEnum'
+import noData from '@/assets/images/canvas/noData.png'
+
+const props = defineProps({
+  target: Object as PropType<RequestParamsObjType>
+})
+
+// 默认表格
+const defaultItem = {
+  key: '',
+  value: ''
+}
+const tableArray = reactive<{
+  content: typeof defaultItem[]
+}>({ content: [] })
+
+// 监听选项
+watch(
+  () => props.target as RequestParamsObjType,
+  (target: RequestParamsObjType) => {
+    tableArray.content = []
+    for (const k in target) {
+      tableArray.content.push({
+        key: k,
+        value: target[k]
+      })
+    }
+    // 默认值
+    if (!tableArray.content.length) tableArray.content = [JSON.parse(JSON.stringify(defaultItem))]
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.ts

@@ -0,0 +1,3 @@
+import ChartDataDisplay from './index.vue'
+
+export { ChartDataDisplay }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataDisplay/index.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="go-chart-data-display">
+    <n-scrollbar style="max-height: 570px">
+      <div class="go-mr-3">
+        <div>
+          <setting-item-box name="主体信息">
+            <setting-item name="接口名称">
+              <n-input size="small" :placeholder="targetData?.dataPondName || '暂无'" :disabled="true"> </n-input>
+            </setting-item>
+            <setting-item name="接口类型">
+              <n-input size="small" :placeholder="requestHttpType || '暂无'" :disabled="true"></n-input>
+            </setting-item>
+          </setting-item-box>
+
+          <setting-item-box>
+            <setting-item name="组件间隔">
+              <n-input size="small" :placeholder="`${requestInterval || '暂无'}`" :disabled="true">
+                <template #suffix>
+                  {{ targetData && SelectHttpTimeNameObj[requestIntervalUnit] }}
+                </template>
+              </n-input>
+            </setting-item>
+            <setting-item name="全局间隔（默认）">
+              <n-input size="small" :placeholder="`${globalData?.requestInterval || '暂无'}`" :disabled="true">
+                <template #suffix> {{ globalData && SelectHttpTimeNameObj[globalData.requestIntervalUnit] }} </template>
+              </n-input>
+            </setting-item>
+          </setting-item-box>
+
+          <setting-item-box name="源地址" :alone="true">
+            <n-input size="small" :placeholder="globalData?.requestOriginUrl || '暂无'" :disabled="true">
+              <template #prefix>
+                <n-icon :component="PulseIcon" />
+              </template>
+            </n-input>
+          </setting-item-box>
+
+          <setting-item-box name="接口地址" :alone="true">
+            <n-input
+              size="small"
+              :placeholder="requestUrl || '暂无'"
+              :disabled="true"
+            >
+              <template #prefix>
+                <n-icon :component="FlashIcon" />
+              </template>
+            </n-input>
+          </setting-item-box>
+        </div>
+        <n-divider />
+        <setting-item-box name="类型">
+          <setting-item name="配置类型">
+            <n-input
+              size="small"
+              :placeholder="targetData && requestContentTypeObj[requestContentType]"
+              :disabled="true"
+            ></n-input>
+          </setting-item>
+          <setting-item name="body 类型" v-if="requestContentType === RequestContentTypeEnum.DEFAULT">
+            <n-input size="small" :placeholder="targetData && requestParamsBodyType" :disabled="true"></n-input>
+          </setting-item>
+        </setting-item-box>
+        <div v-if="requestContentType === RequestContentTypeEnum.DEFAULT">
+          <n-tabs type="line" animated v-model:value="tabValue">
+            <n-tab v-for="item in RequestParamsTypeEnum" :key="item" :name="item" :tab="item"> {{ item }} </n-tab>
+          </n-tabs>
+          <!-- 各个页面 -->
+          <div class="go-mt-3">
+            <div v-if="tabValue !== RequestParamsTypeEnum.BODY">
+              <display-table class="go-my-3" :target="requestParams[tabValue]"> </display-table>
+            </div>
+
+            <!-- 选择了 body -->
+            <div v-else>
+              <!-- 为 none 时 -->
+              <n-card class="go-mt-3 go-pb-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']">
+                <n-text depth="3">该接口没有 Body 体</n-text>
+              </n-card>
+
+              <!-- 具有对象属性时 -->
+              <template
+                v-else-if="
+                  requestParamsBodyType === RequestBodyEnum['FORM_DATA'] ||
+                  requestParamsBodyType === RequestBodyEnum['X_WWW_FORM_URLENCODED']
+                "
+              >
+                <display-table
+                  class="go-my-3"
+                  :target="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType]"
+                ></display-table>
+              </template>
+
+              <!-- json  -->
+              <template v-else-if="requestParamsBodyType === RequestBodyEnum['JSON']">
+                <n-card size="small" style="padding-bottom: 7px">
+                  <n-code
+                    :code="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType] || '暂无内容'"
+                    language="json"
+                  ></n-code>
+                </n-card>
+              </template>
+
+              <!-- xml  -->
+              <template v-else-if="requestParamsBodyType === RequestBodyEnum['XML']">
+                <n-code
+                  :code="requestParams[RequestParamsTypeEnum.BODY][requestParamsBodyType] || ''"
+                  language="html"
+                ></n-code>
+              </template>
+            </div>
+          </div>
+        </div>
+        <!-- SQL 请求 -->
+        <div v-else>
+          <setting-item-box name="键名">
+            <n-text>sql</n-text>
+          </setting-item-box>
+          <setting-item-box name="键值">
+            <n-code :code="requestSQLContent.sql || ''" language="sql"></n-code>
+          </setting-item-box>
+        </div>
+      </div>
+    </n-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, toRefs } from 'vue'
+import { icon } from '@/plugins'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { RequestDataPondItemType, RequestGlobalConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import displayTable from './displayTable.vue'
+import {
+  RequestBodyEnum,
+  RequestParamsTypeEnum,
+  SelectHttpTimeNameObj,
+  RequestContentTypeEnum,
+  RequestBodyEnumList,
+  RequestParamsObjType
+} from '@/enums/httpEnum'
+
+const props = defineProps({
+  globalData: Object as PropType<RequestGlobalConfigType>,
+  targetData: Object as PropType<RequestDataPondItemType>
+})
+
+const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
+const {
+  requestUrl,
+  requestInterval,
+  requestHttpType,
+  requestContentType,
+  requestSQLContent,
+  requestParams,
+  requestParamsBodyType,
+  requestIntervalUnit
+} = toRefs((props.targetData as RequestDataPondItemType).dataPondRequestConfig)
+
+const tabs = [RequestParamsTypeEnum.HEADER]
+const requestContentTypeObj = {
+  [RequestContentTypeEnum.DEFAULT]: '普通请求',
+  [RequestContentTypeEnum.SQL]: 'SQL 请求'
+}
+const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
+
+// 更新参数表格数据
+const updateRequestParams = (paramsObj: RequestParamsObjType) => {
+  if (tabValue.value !== RequestParamsTypeEnum.BODY) {
+    requestParams.value[tabValue.value] = paramsObj
+  }
+}
+
+// 更新参数表格数据
+const updateRequestBodyTable = (paramsObj: RequestParamsObjType) => {
+  if (
+    tabValue.value === RequestParamsTypeEnum.BODY &&
+    // 仅有两种类型有 body
+    (requestParamsBodyType.value === RequestBodyEnum.FORM_DATA ||
+      requestParamsBodyType.value === RequestBodyEnum.X_WWW_FORM_URLENCODED)
+  ) {
+    requestParams.value[RequestParamsTypeEnum.BODY][requestParamsBodyType.value] = paramsObj
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-display') {
+  flex: 1;
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.ts

@@ -0,0 +1,3 @@
+import ChartDataPondControl from './index.vue'
+
+export { ChartDataPondControl }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondControl/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <n-modal class="go-chart-data-pond-control" v-model:show="modelShow" :mask-closable="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <div class="pond-content">
+        <!-- 展示区域 -->
+        <chart-data-display
+          v-if="pondData && !loading"
+          :targetData="pondData"
+          :globalData="chartEditStore.getRequestGlobalConfig"
+        ></chart-data-display>
+        <!-- 无数据 -->
+        <div v-else class="no-data go-flex-center">
+          <img :src="noData" alt="暂无数据" />
+          <n-text :depth="3">暂未选择公共接口</n-text>
+        </div>
+        <!-- 左侧列表 -->
+        <chart-data-pond-list @createPond="createPond" @deletePond="deletePond"></chart-data-pond-list>
+      </div>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="space-between">
+          <n-button type="info" secondary :disabled="!pondData" @click="openPond(true)">
+            编辑内容
+            <template #icon>
+              <n-icon>
+                <pencil-icon />
+              </n-icon>
+            </template>
+          </n-button>
+          <n-button type="primary" @click="closeHandle">保存 & 发送请求</n-button>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+
+  <!-- 请求配置model -->
+  <pond-data-request
+    v-if="requestShow"
+    v-model:modelShow="requestShow"
+    :targetDataRequest="editData"
+    :isEdit="isEdit"
+    @editSaveHandle="saveHandle"
+  ></pond-data-request>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed, nextTick, watch, toRaw } from 'vue'
+import noData from '@/assets/images/canvas/noData.png'
+import { ChartDataPondList } from '../ChartDataPondList'
+import { PondDataRequest } from '../../../ChartDataRequest'
+import { ChartDataDisplay } from '../ChartDataDisplay'
+import { requestConfig } from '@/packages/public/publicConfig'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { RequestDataTypeEnum } from '@/enums/httpEnum'
+import { icon } from '@/plugins'
+import { getUUID, goDialog } from '@/utils'
+import { cloneDeep } from 'lodash'
+
+defineProps({
+  modelShow: Boolean
+})
+
+const emit = defineEmits(['update:modelShow', 'sendHandle'])
+const { PencilIcon } = icon.ionicons5
+const { chartEditStore, targetData } = useTargetData()
+const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
+const requestShow = ref(false)
+const loading = ref(false)
+const isEdit = ref(false)
+const editData = ref<RequestDataPondItemType>()
+
+// 所选数据池
+const pondData = computed(() => {
+  const selectId = targetData?.value?.request?.requestDataPondId
+  if (!selectId) return undefined
+  const data = requestDataPond.value.filter(item => {
+    return selectId === item.dataPondId
+  })
+  return data[0]
+})
+
+watch(
+  () => pondData.value,
+  newValue => {
+    loading.value = true
+    editData.value = newValue
+    nextTick(() => {
+      loading.value = false
+    })
+  },
+  {
+    immediate: true
+  }
+)
+
+// 打开/编辑
+const openPond = (isEditFlag: boolean = false) => {
+  isEdit.value = !!isEditFlag
+  requestShow.value = true
+}
+
+// 创建
+const createPond = () => {
+  const id = getUUID()
+  editData.value = {
+    dataPondId: id,
+    dataPondName: id,
+    dataPondRequestConfig: cloneDeep({ ...requestConfig, requestDataType: RequestDataTypeEnum.Pond })
+  }
+  openPond()
+}
+
+// 完成创建/编辑
+const saveHandle = (newData: RequestDataPondItemType) => {
+  // 走创建
+  if (isEdit.value) {
+    editSaveHandle(newData)
+  } else {
+    createSaveHandle(newData)
+  }
+  isEdit.value = false
+  requestShow.value = false
+}
+
+// 编辑保存之后
+const editSaveHandle = (newData: RequestDataPondItemType) => {
+  try {
+    const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === newData.dataPondId)
+    if (targetIndex !== -1) {
+      requestDataPond.value.splice(targetIndex, 1, newData)
+      // 修改数据池后, 修改所有关联的组件
+      chartEditStore.getComponentList.forEach(item => {
+        if (
+          item.request.requestDataType === RequestDataTypeEnum.Pond &&
+          item.request.requestDataPondId === newData.dataPondId
+        ) {
+          item.request = {
+            ...toRaw(newData.dataPondRequestConfig),
+            requestDataPondId: newData.dataPondId
+          }
+        }
+      })
+      window.$message.success('保存成功！')
+    } else {
+      window.$message.error('编辑失败，请稍后重试！')
+    }
+  } catch (error) {
+    window.$message.error('编辑失败，请稍后重试！')
+  }
+}
+
+// 创建保存成功之后
+const createSaveHandle = (newData: RequestDataPondItemType) => {
+  try {
+    if (editData.value) {
+      requestDataPond.value.unshift(newData)
+      window.$message.success('创建成功!')
+    } else {
+      window.$message.error('创建失败，请稍后重试!')
+    }
+  } catch (error) {
+    window.$message.error('创建失败，请稍后重试!')
+  }
+}
+
+// 删除数据池
+const deletePond = (targetData: RequestDataPondItemType) => {
+  goDialog({
+    message: '删除数据后，需手动处理使用改接口的组件，是否继续？',
+    isMaskClosable: true,
+    transformOrigin: 'center',
+    onPositiveCallback: () => {
+      const targetIndex = requestDataPond.value.findIndex(item => item.dataPondId === targetData.dataPondId)
+      if (targetIndex !== -1) {
+        requestDataPond.value.splice(targetIndex, 1)
+        window.$message.success('删除成功!')
+      } else {
+        window.$message.error('删除失败，请稍后重试！')
+      }
+    }
+  })
+}
+
+// 关闭
+const closeHandle = () => {
+  // 将所选内容赋值给对象
+  if (pondData.value) {
+    targetData.value.request = {
+      ...toRaw(pondData.value.dataPondRequestConfig),
+      requestDataPondId: pondData.value.dataPondId
+    }
+  }
+  emit('update:modelShow', false)
+  emit('sendHandle')
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-data-pond-control') {
+  /* 中间 */
+  .pond-content {
+    display: flex;
+  }
+  .no-data {
+    flex-direction: column;
+    width: 100%;
+    img {
+      width: 200px;
+    }
+  }
+  &.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>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.ts

@@ -0,0 +1,3 @@
+import ChartDataPondList from './index.vue'
+
+export { ChartDataPondList }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/components/ChartDataPondList/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="go-chart-data-pond-list">
+    <n-timeline style="width: 20px">
+      <n-timeline-item type="info"> </n-timeline-item>
+      <n-timeline-item type="success"></n-timeline-item>
+    </n-timeline>
+    <div class="pond-item-box">
+      <!-- 新增 -->
+      <n-button class="create-btn go-py-4" ghost @click="createPond">
+        <span> 创建 </span>
+        <template #icon>
+          <n-icon>
+            <DuplicateOutlineIcon></DuplicateOutlineIcon>
+          </n-icon>
+        </template>
+      </n-button>
+      <n-divider style="margin: 10px 0"></n-divider>
+      <n-space v-if="!requestDataPond.length" justify="center">
+        <n-text class="not-layer-text" :depth="3">
+          暂无数据内容，
+          <n-a @click="createPond">立即创建</n-a>
+        </n-text>
+      </n-space>
+      <n-scrollbar style="max-height: 490px">
+        <div
+          v-for="item in requestDataPond"
+          :key="item.dataPondId"
+          :class="{ select: item.dataPondId === selectPondId }"
+          class="pond-item"
+          @click="clickHandle(item)"
+        >
+          <div class="item-content">
+            <div class="item-content-body">
+              <div>
+                <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false">
+                  名称
+                </n-tag>
+                <n-ellipsis style="max-width: 180px">
+                  {{ item.dataPondName || '暂无' }}
+                </n-ellipsis>
+              </div>
+              <div>
+                <n-tag class="go-mr-1" :type="item.dataPondId === selectPondId ? 'warning' : ''" :bordered="false">
+                  地址
+                </n-tag>
+                <n-ellipsis style="max-width: 180px">
+                  {{ item.dataPondRequestConfig.requestUrl || '暂无' }}
+                </n-ellipsis>
+              </div>
+            </div>
+            <div class="item-content-icon go-transition-quick" @click="deletePond($event, item)">
+              <n-icon>
+                <trash-icon></trash-icon>
+              </n-icon>
+            </div>
+          </div>
+          <div :class="{ 'select-modal': item.dataPondId === selectPondId }"></div>
+        </div>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed } from 'vue'
+import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { icon } from '@/plugins'
+
+const emit = defineEmits(['createPond', 'deletePond'])
+
+const { DuplicateOutlineIcon, TrashIcon } = icon.ionicons5
+const designStore = useDesignStore()
+const { chartEditStore, targetData } = useTargetData()
+const { requestDataPond } = toRefs(chartEditStore.getRequestGlobalConfig)
+
+// 选中的全局数据
+const selectPondId = computed(() => {
+  return targetData.value.request.requestDataPondId
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 创建数据池
+const createPond = () => {
+  emit('createPond', true)
+}
+
+// 删除数据池
+const deletePond = (target: Event, targetData: RequestDataPondItemType) => {
+  target.stopPropagation()
+  target.preventDefault()
+  emit('deletePond', targetData)
+}
+
+// 选中
+const clickHandle = (item: RequestDataPondItemType) => {
+  targetData.value.request.requestDataPondId = item.dataPondId
+}
+</script>
+
+<style scoped lang="scss">
+$height: 530px;
+$listWidth: 280px;
+$centerHeight: 60px;
+$centerMiniHeight: 28px;
+$textSize: 10px;
+
+@include go('chart-data-pond-list') {
+  padding-top: 10px;
+  padding-bottom: 5px;
+  margin-right: 5px;
+  display: flex;
+  @include deep() {
+    .n-timeline > .n-timeline-item {
+      &:first-child {
+        height: $height;
+      }
+    }
+  }
+  .pond-item-box {
+    width: $listWidth;
+    position: relative;
+    .create-btn {
+      width: calc(#{$listWidth - 15px});
+      margin-right: 15px;
+    }
+    .pond-item {
+      position: relative;
+      height: $centerHeight;
+      padding: 5px;
+      margin-bottom: 10px;
+      margin-right: 15px;
+      border-radius: 5px;
+      cursor: pointer;
+      border: 1px solid rgba(0, 0, 0, 0);
+      @include fetch-bg-color('background-color3');
+      @extend .go-transition-quick;
+      &.hover,
+      &:hover {
+        @include fetch-bg-color('background-color4');
+      }
+      &:hover {
+        @include deep() {
+          .icon-item {
+            opacity: 1;
+          }
+        }
+        .item-content-icon {
+          opacity: 1 !important;
+        }
+      }
+
+      &.select {
+        border: 1px solid v-bind('themeColor');
+        background-color: rgba(0, 0, 0, 0);
+        .item-content-icon {
+          display: none;
+        }
+      }
+
+      .select-modal,
+      .item-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .item-content {
+        z-index: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 5px;
+        .item-content-body {
+          width: 230px;
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+        .item-content-icon {
+          opacity: 0;
+          height: $centerHeight;
+          line-height: $centerHeight;
+          padding-left: 5px;
+        }
+      }
+
+      .select-modal {
+        width: 100%;
+        height: 100%;
+        opacity: 0.3;
+        background-color: v-bind('themeColor');
+      }
+    }
+  }
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataPond/index.vue

@@ -1,83 +1,100 @@
 <template>
+  <!-- 选中内容 -->
   <div class="go-chart-data-pond">
     <n-card class="n-card-shallow">
-      <setting-item-box name="请求配置">
+      <setting-item-box name="请求名称" :alone="true">
-        <setting-item name="类型">
+        <n-input size="small" :placeholder="pondData?.dataPondName || '暂无'" :disabled="true">
-          <n-tag :bordered="false" type="primary" style="border-radius: 5px">
-            {{ targetData.request.requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
-          </n-tag>
-        </setting-item>
-
-        <setting-item name="方式">
-          <n-input size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></n-input>
-        </setting-item>
-
-        <setting-item name="组件间隔（高级）">
-          <n-input size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
-            <template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
-          </n-input>
-        </setting-item>
-
-        <setting-item name="全局间隔（默认）">
-          <n-input size="small" :placeholder="`${GlobalRequestInterval || '暂无'} `" :disabled="true">
-            <template #suffix> {{ SelectHttpTimeNameObj[GlobalRequestIntervalUnit] }} </template>
-          </n-input>
-        </setting-item>
-      </setting-item-box>
-
-      <setting-item-box name="源地址" :alone="true">
-        <n-input size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
           <template #prefix>
-            <n-icon :component="PulseIcon" />
+            <n-icon :component="FishIcon" />
           </template>
         </n-input>
       </setting-item-box>
 
-      <setting-item-box name="组件地址" :alone="true">
+      <setting-item-box name="接口地址" :alone="true">
-        <n-input size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
+        <n-input size="small" :placeholder="pondData?.dataPondRequestConfig.requestUrl || '暂无'" :disabled="true">
           <template #prefix>
             <n-icon :component="FlashIcon" />
           </template>
         </n-input>
       </setting-item-box>
 
-      <div class="edit-text" @click="requestModelHandle">
+      <div class="edit-text" @click="controlModelHandle">
         <div class="go-absolute-center">
           <n-button type="primary" secondary>编辑配置</n-button>
         </div>
       </div>
     </n-card>
-
-    <!-- 列表 -->
-    <div class="pond-list-box">
-      <div v-for="(item, index) in requestDataPond" :key="index">
-        {{ item }}
-      </div>
-    </div>
   </div>
+
+  <setting-item-box :alone="true">
+    <template #name>
+      测试
+      <n-tooltip trigger="hover">
+        <template #trigger>
+          <n-icon size="21" :depth="3">
+            <help-outline-icon></help-outline-icon>
+          </n-icon>
+        </template>
+        默认赋值给 dataset 字段
+      </n-tooltip>
+    </template>
+    <n-button type="primary" ghost @click="sendHandle">
+      <template #icon>
+        <n-icon>
+          <flash-icon />
+        </n-icon>
+      </template>
+      发送请求
+    </n-button>
+  </setting-item-box>
+
+  <!-- 底部数据展示 -->
+  <chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
+
+  <!-- 骨架图 -->
+  <go-skeleton :load="loading" :repeat="3"></go-skeleton>
+
   <!-- 编辑 / 新增弹窗 -->
+  <chart-data-pond-control v-model:modelShow="controlModel" @sendHandle="sendHandle"></chart-data-pond-control>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed } from 'vue'
+import { ref, toRefs, toRaw, onBeforeUnmount, computed, watchEffect } from 'vue'
 import { icon } from '@/plugins'
+import { http, customizeHttp } from '@/api/http'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { ChartDataPondControl } from './components/ChartDataPondControl'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
-import { SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
+import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
+import { newFunctionHandle } from '@/utils'
 
 const designStore = useDesignStore()
-const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
+const { HelpOutlineIcon, FlashIcon, PulseIcon, FishIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
 
 const {
-  requestOriginUrl,
   requestDataPond,
   requestInterval: GlobalRequestInterval,
   requestIntervalUnit: GlobalRequestIntervalUnit
 } = toRefs(chartEditStore.getRequestGlobalConfig)
 
-const requestShow = ref(false)
+const loading = ref(false)
+const controlModel = ref(false)
+const showMatching = ref(false)
+
+let firstFocus = 0
+let lastFilter: any = undefined
+
+// 所选数据池
+const pondData = computed(() => {
+  const selectId = targetData.value.request.requestDataPondId
+  if (!selectId) return undefined
+  const data = requestDataPond.value.filter(item => {
+    return selectId === item.dataPondId
+  })
+  return data[0]
+})
 
 // 颜色
 const themeColor = computed(() => {
@@ -85,9 +102,49 @@ const themeColor = computed(() => {
 })
 
 // 请求配置 model
-const requestModelHandle = () => {
+const controlModelHandle = () => {
-  requestShow.value = true
+  controlModel.value = true
 }
+
+// 发送请求
+const sendHandle = async () => {
+  if (!targetData.value?.request) {
+    window.$message.warning('请选择一个公共接口！')
+    return
+  }
+  loading.value = true
+  try {
+    // const res = await customizeHttp(
+    //   toRaw(pondData.value?.dataPondRequestConfig),
+    //   toRaw(chartEditStore.getRequestGlobalConfig)
+    // )
+    const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
+    loading.value = false
+    if (res) {
+      if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
+      targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
+      showMatching.value = true
+      return
+    }
+    window['$message'].warning('数据异常，请检查参数！')
+  } catch (error) {
+    loading.value = false
+    window['$message'].warning('数据异常，请检查参数！')
+  }
+}
+
+watchEffect(() => {
+  const filter = targetData.value?.filter
+  if (lastFilter !== filter && firstFocus) {
+    lastFilter = filter
+    sendHandle()
+  }
+  firstFocus++
+})
+
+onBeforeUnmount(() => {
+  lastFilter = null
+})
 </script>
 
 <style scoped lang="scss">
@@ -110,7 +167,7 @@ const requestModelHandle = () => {
       top: 0px;
       left: 0px;
       width: 325px;
-      height: 270px;
+      height: 136px;
       cursor: pointer;
       opacity: 0;
       transition: all 0.3s;
@@ -124,10 +181,5 @@ const requestModelHandle = () => {
       }
     }
   }
-
-  /* 列表 */
-  .pond-list-box {
-
-  }
 }
 </style>

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestGlobalConfig/index.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- 全局配置 -->
   <n-card class="n-card-shallow">
-    <n-tag type="info" :bordered="false" style="border-radius: 5px"> 全局配置 </n-tag>
+    <n-tag type="info" :bordered="false" style="border-radius: 5px"> 全局公共配置 </n-tag>
     <setting-item-box
       name="服务"
       :itemRightStyle="{

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestHeader/index.vue

@@ -29,7 +29,7 @@
 
           <!-- 为 none 时 -->
           <n-card class="go-mt-3 go-pb-3" v-if="requestParamsBodyType === RequestBodyEnum['NONE']">
-            <n-text depth="3">该请求没有 Body 体</n-text>
+            <n-text depth="3">该接口没有 Body 体</n-text>
           </n-card>
 
           <!-- 具有对象属性时 -->
@@ -86,13 +86,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref, toRefs, PropType } from 'vue'
-
 import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { RequestHeaderTable } from '../RequestHeaderTable/index'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
-import { RequestHeaderTable } from '../RequestHeaderTable/index'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
-
 import {
   RequestParamsTypeEnum,
   RequestContentTypeEnum,
@@ -102,9 +101,13 @@ import {
   RequestHttpEnum
 } from '@/enums/httpEnum'
 
-const { targetData } = useTargetData()
+const props = defineProps({
+  targetDataRequest: Object as PropType<RequestConfigType>
+})
 
-const { requestHttpType, requestContentType, requestSQLContent, requestParams, requestParamsBodyType } = toRefs(targetData.value.request)
+const { requestHttpType, requestContentType, requestSQLContent, requestParams, requestParamsBodyType } = toRefs(
+  props.targetDataRequest as RequestConfigType
+)
 
 const tabValue = ref<RequestParamsTypeEnum>(RequestParamsTypeEnum.PARAMS)
 

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -5,7 +5,7 @@
     :itemRightStyle="{
       gridTemplateColumns: '6fr 2fr'
     }"
-    style="padding-right: 25px;"
+    style="padding-right: 25px"
   >
     <template #name>
       地址
@@ -51,15 +51,16 @@
     </setting-item>
   </setting-item-box>
   <setting-item-box name="选择方式" class="go-mt-0">
-    <request-header></request-header>
+    <request-header :targetDataRequest="targetDataRequest"></request-header>
   </setting-item-box>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
 import { selectTypeOptions, selectTimeOptions } from '@/views/chart/ContentConfigurations/components/ChartData/index.d'
+import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { RequestHeader } from '../RequestHeader'
 import { isDev } from '@/utils'
 import { icon } from '@/plugins'
@@ -82,10 +83,16 @@ import {
   threeEarth01Url
 } from '@/api/mock'
 
+const props = defineProps({
+  targetDataRequest: Object as PropType<RequestConfigType>
+})
+
 const { HelpOutlineIcon } = icon.ionicons5
-const { targetData, chartEditStore } = useTargetData()
+const { chartEditStore } = useTargetData()
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
-const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
+const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(
+  props.targetDataRequest as RequestConfigType
+)
 
 const apiList = [
   {

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.ts

@@ -1,3 +1,4 @@
 import ChartDataRequest from './index.vue'
+import PondDataRequest from './pondIndex.vue'
 
-export { ChartDataRequest }
+export { ChartDataRequest, PondDataRequest }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" @esc="closeHandle">
+  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
     <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
       <template #header></template>
       <template #header-extra> </template>
@@ -7,7 +7,7 @@
         <div class="go-pr-3">
           <n-space vertical>
             <request-global-config></request-global-config>
-            <request-target-config></request-target-config>
+            <request-target-config :target-data-request="targetData?.request"></request-target-config>
           </n-space>
         </div>
       </n-scrollbar>
@@ -21,10 +21,7 @@
               {{ requestContentTypeObj[requestContentType] }}
             </n-tag>
           </div>
-          <n-space>
+          <n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
-            <n-button size="medium" @click="closeHandle">取消</n-button>
-            <n-button size="medium" type="primary" @click="saveHandle">保存 & 发送请求</n-button>
-          </n-space>
         </n-space>
       </template>
     </n-card>
@@ -32,34 +29,33 @@
 </template>
 
 <script script lang="ts" setup>
-import { toRefs } from 'vue'
+import { toRefs, PropType } from 'vue'
 import { RequestContentTypeEnum } from '@/enums/httpEnum'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { RequestGlobalConfig } from './components/RequestGlobalConfig'
 import { RequestTargetConfig } from './components/RequestTargetConfig'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 
+const props = defineProps({
+  modelShow: Boolean,
+  targetData: Object as PropType<CreateComponentType>,
+  saveBtnText: String || null
+})
 const emit = defineEmits(['update:modelShow', 'sendHandle'])
 
-const { targetData } = useTargetData()
 // 解构基础配置
-const { chartConfig } = toRefs(targetData.value)
+const { chartConfig } = toRefs(props.targetData as CreateComponentType)
-const { requestContentType } = toRefs(targetData.value.request)
+const { requestContentType } = toRefs((props.targetData as CreateComponentType).request)
 const requestContentTypeObj = {
   [RequestContentTypeEnum.DEFAULT]: '普通请求',
   [RequestContentTypeEnum.SQL]: 'SQL 请求'
 }
 
-defineProps({
-  modelShow: Boolean
-})
-
-// 关闭
 const closeHandle = () => {
   emit('update:modelShow', false)
 }
 
-// 保存|发送
+const closeAndSendHandle = () => {
-const saveHandle = () => {
   emit('update:modelShow', false)
   emit('sendHandle')
 }

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/pondIndex.vue

@@ -0,0 +1,102 @@
+<template>
+  <n-modal class="go-chart-data-request" v-model:show="modelShow" :mask-closable="false" :closeOnEsc="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1000px; height: 800px">
+      <template #header></template>
+      <template #header-extra> </template>
+      <n-scrollbar style="max-height: 718px">
+        <div class="go-pr-3">
+          <n-space vertical>
+            <request-global-config></request-global-config>
+            <request-target-config
+              :target-data-request="targetDataRequest?.dataPondRequestConfig"
+            ></request-target-config>
+          </n-space>
+        </div>
+      </n-scrollbar>
+      <!-- 底部 -->
+      <template #action>
+        <n-space justify="space-between">
+          <n-space v-if="targetDataRequest">
+            <n-tag  :bordered="false" type="primary">名称：</n-tag>
+            <n-input
+              v-model:value="targetDataRequest.dataPondName"
+              ref="inputInstRef"
+              type="text"
+              size="small"
+              :autofocus="true"
+              :clearable="true"
+              :minlength="1"
+              :maxlength="16"
+              placeholder="请输入名称"
+            ></n-input>
+          </n-space>
+          <span v-else></span>
+          <n-space>
+            <n-button @click="closeHandle">取消</n-button>
+            <n-button type="primary" @click="closeAndSendHandle">保存</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script script lang="ts" setup>
+import { PropType, ref, watchEffect } from 'vue'
+import { RequestContentTypeEnum } from '@/enums/httpEnum'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { RequestGlobalConfig } from './components/RequestGlobalConfig'
+import { RequestTargetConfig } from './components/RequestTargetConfig'
+import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { goDialog } from '@/utils'
+
+const props = defineProps({
+  modelShow: Boolean,
+  targetDataRequest: Object as PropType<RequestDataPondItemType>
+})
+const emit = defineEmits(['update:modelShow', 'editSaveHandle'])
+
+const pondName = ref()
+const inputInstRef = ref()
+
+const closeHandle = () => {
+  emit('update:modelShow', false)
+}
+
+const closeAndSendHandle = () => {
+  if (!props.targetDataRequest?.dataPondName) {
+    window.$message.warning('请在左下角输入名称！')
+    inputInstRef.value?.focus()
+    return
+  }
+  goDialog({
+    message: '保存内容将同步修改所有使用此接口的组件, 是否继续?',
+    isMaskClosable: true,
+    transformOrigin: 'center',
+    onPositiveCallback: () => {
+      emit('update:modelShow', false)
+      emit('editSaveHandle', props.targetDataRequest)
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('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>

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -165,7 +165,7 @@ $max-width: 670px;
     .scale-slider {
       position: relative;
       top: -4px;
-      width: 200px;
+      width: 100px;
     }
   }
 }

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -55,6 +55,8 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');
   @include go(edit-range-model) {

src/views/chart/ContentEdit/components/EditRule/index.vue

@@ -1,49 +1,158 @@
 <template>
-  <sketch-rule
+  <div class="go-sketch-rule">
-    v-if="configShow"
+    <sketch-rule
-    :thick="thick"
+      v-if="sketchRuleReDraw"
-    :scale="scale"
+      :thick="thick"
-    :width="canvasBox().width"
+      :scale="scale"
-    :height="canvasBox().height"
+      :width="canvasBox().width"
-    :startX="startX"
+      :height="canvasBox().height"
-    :startY="startY"
+      :startX="startX"
-    :lines="lines"
+      :startY="startY"
-  ></sketch-rule>
+      :lines="lines"
+      :palette="paletteStyle"
+    >
+    </sketch-rule>
+    <div ref="$app" class="edit-screens" @scroll="handleScroll">
+      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
+        <div
+          ref="refSketchRuleBox"
+          class="canvas"
+          @mousedown="dragCanvas"
+          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
+        >
+          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 修复右下角白点用的 -->
+    <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { ref, toRefs, computed, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const { scale, lockScale } = toRefs(chartEditStore.getEditCanvas)
-const { getLayers, getCharts, getDetails } = toRefs(chartLayoutStore)
-
-const configShow = ref(true)
-
-// x轴标尺开始的坐标数值
-const startX = -10
-// y轴标尺开始的坐标数值
-const startY = -10
-// 标尺的厚度
 const thick = 20
-// 初始化水平标尺上的参考线
+let prevMoveXValue = [0, 0]
-const lines = {
+let prevMoveYValue = [0, 0]
-  h: [],
+
-  v: []
+const $app = ref()
+const sketchRuleReDraw = ref(true)
+const refSketchRuleBox = ref()
+const $container = ref()
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const scale = computed(() => {
+  return chartEditStore.getEditCanvas.scale
+})
+
+// 滚动条拖动的高度
+const containerWidth = computed(() => {
+  return `${height.value * 2}px`
+})
+
+// 主题
+const paletteStyle = computed(() => {
+  const isDarkTheme = designStore.getDarkTheme
+  return isDarkTheme
+    ? {
+        bgColor: '#18181c',
+        longfgColor: '#4d4d4d',
+        shortfgColor: '#4d4d4d',
+        fontColor: '#4d4d4d',
+        shadowColor: '#18181c',
+        borderColor: '#18181c',
+        cornerActiveColor: '#18181c'
+      }
+    : {}
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const handleWheel = (e: any) => {
+  if (e.ctrlKey || e.metaKey) {
+    e.preventDefault()
+    let resScale = scale.value
+    // 放大(200%)
+    if (e.wheelDelta >= 0 && scale.value < 2) {
+      resScale = scale.value + 0.05
+      chartEditStore.setScale(resScale)
+      return
+    }
+    // 缩小(10%)
+    if (e.wheelDelta < 0 && scale.value > 0.1) {
+      resScale = scale.value - 0.05
+      chartEditStore.setScale(resScale)
+    }
+  }
+}
+
+const handleScroll = () => {
+  if (!$app.value) return
+  const screensRect = $app.value.getBoundingClientRect()
+  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
+  // 标尺开始的刻度
+  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+
+const dragCanvas = (e: any) => {
+  e.preventDefault()
+  e.stopPropagation()
+
+  if (e.which == 2) isPressSpace.value = true
+  else if (!window.$KeyboardActive?.space) return
+  // @ts-ignore
+  document.activeElement?.blur()
+
+  const startX = e.pageX
+  const startY = e.pageY
+
+  const listenMousemove = listen(window, 'mousemove', (e: any) => {
+    const nx = e.pageX - startX
+    const ny = e.pageY - startY
+
+    const [prevMoveX1, prevMoveX2] = prevMoveXValue
+    const [prevMoveY1, prevMoveY2] = prevMoveYValue
+
+    prevMoveXValue = [prevMoveX2, nx]
+    prevMoveYValue = [prevMoveY2, ny]
+
+    $app.value.scrollLeft -=
+      prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+    $app.value.scrollTop -=
+      prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+  })
+
+  const listenMouseup = listen(window, 'mouseup', () => {
+    listenMousemove()
+    listenMouseup()
+    prevMoveXValue = [0, 0]
+    prevMoveYValue = [0, 0]
+    isPressSpace.value = false
+  })
 }
 
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
     return {
-      height: layoutDom.clientHeight - 40,
+      height: layoutDom.clientHeight - 25,
       width: layoutDom.clientWidth
     }
   }
@@ -53,83 +162,104 @@ const canvasBox = () => {
   }
 }
 
-// 颜色
+// 在位置不动的情况下重绘标尺
-const themeColor = computed(() => {
+const reDraw = () => {
-  return designStore.getAppTheme
+  sketchRuleReDraw.value = false
-})
+  setTimeout(() => {
+    sketchRuleReDraw.value = true
+  }, 10)
+}
+
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
+  }
+)
+
+// 滚动居中
+const canvasPosCenter = () => {
+  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
+  const { width, height } = canvasBox()
+
+  $app.value.scrollLeft = containerWidth / 2 - width / 2
+  $app.value.scrollTop = containerHeight / 2 - height / 2
+}
 
 // 处理标尺重制大小
-const ruleChangeHandle = () => {
-  configShow.value = false
-  setTimeout(() => {
-    configShow.value = true
-  })
-}
-
-const ruleChangeHandleTimeOut = () => {
-  if (lockScale.value) {
-    setTimeout(() => {
-      ruleChangeHandle()
-    }, 500)
-  }
-}
-
 watch(
   () => scale.value,
-  () => ruleChangeHandle()
+  (newValue, oldValue) => {
+    if (oldValue !== newValue) {
+      handleScroll()
+      chartEditStore.setScale(newValue)
+      setTimeout(() => {
+        canvasPosCenter()
+      }, 500)
+    }
+  }
 )
 
 watch(
-  () => getLayers.value,
+  () => isPressSpace.value,
-  () => ruleChangeHandleTimeOut()
+  newValue => {
+    cursorStyle.value = newValue ? 'grab' : 'auto'
+  }
 )
 
-watch(
+onMounted(() => {
-  () => getCharts.value,
+  if ($app.value) {
-  () => ruleChangeHandleTimeOut()
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-)
+    canvasPosCenter()
+  }
+})
 
-watch(
+onUnmounted(() => {
-  () => getDetails.value,
+  if ($app.value) {
-  () => ruleChangeHandleTimeOut()
+    $app.value.removeEventListener('wheel', handleWheel)
-)
+  }
+})
 
+window.onKeySpacePressHold = (isHold: boolean) => {
+  isPressSpace.value = isHold
+}
 </script>
 
 <style>
 /* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
 此库有计划 Vue3 版本，但是开发的时候还没发布 */
-
 #mb-ruler {
   top: 0;
   left: 0;
 }
-/* 适配底部的工具栏不遮盖 */
+
-#mb-ruler .v-container {
-  height: calc(100% - 65px) !important;
-}
 /* 横线 */
 #mb-ruler .v-container .lines .line {
   /* 最大缩放 200% */
   width: 200vw !important;
   border-top: 1px dashed v-bind('themeColor') !important;
 }
+
 #mb-ruler .v-container .indicator {
   border-bottom: 1px dashed v-bind('themeColor') !important;
 }
+
 /* 竖线 */
 #mb-ruler .h-container .lines .line {
   /* 最大缩放 200% */
   height: 200vh !important;
   border-left: 1px dashed v-bind('themeColor') !important;
 }
+
 #mb-ruler .h-container .indicator {
   border-left: 1px dashed v-bind('themeColor') !important;
 }
+
 /* 坐标数值背景颜色 */
 #mb-ruler .indicator .value {
   background-color: rgba(0, 0, 0, 0);
 }
+
 /* 删除按钮 */
 #mb-ruler .line .del {
   padding: 0;
@@ -142,3 +272,72 @@ watch(
   border-width: 0 !important;
 }
 </style>
+
+<style lang="scss" scoped>
+@include go('sketch-rule') {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  .edit-screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding-bottom: 0px;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: rgba(144, 146, 152, 0.3);
+    }
+  }
+
+  .fix-edit-screens-block {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background-color: $--color-dark-bg-1;
+  }
+
+  .edit-screen-container {
+    position: absolute;
+    height: v-bind('containerWidth');
+    top: 0;
+    left: 0;
+  }
+
+  .canvas {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: 50% 0;
+    transform: translateY(-50%);
+
+    &:hover {
+      cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+      cursor: crosshair;
+    }
+  }
+}
+</style>

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -62,6 +62,9 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType
 
 // * 框选
 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
+  if (e.which == 2) return
+  if (window.$KeyboardActive?.space) return
+
   mousedownHandleUnStop(e)
 
   // 记录点击初始位置

src/views/chart/ContentEdit/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <edit-rule></edit-rule>
+  <!-- <edit-rule></edit-rule> -->
   <content-box
     id="go-chart-edit-layout"
     :flex="true"
@@ -7,65 +7,68 @@
     :showBottom="true"
     :depth="1"
     :xScroll="true"
+    :disabledScroll="true"
     @mousedown="mousedownHandleUnStop"
     @drop="dragHandle"
     @dragover="dragoverHandle"
     @dragenter="dragoverHandle"
   >
-    <!-- 画布主体 -->
+    <edit-rule>
-    <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
+      <!-- 画布主体 -->
-      <!-- 展示 -->
+      <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
-      <edit-range>
+        <!-- 展示 -->
-        <!-- 滤镜预览 -->
+        <edit-range>
-        <div
+          <!-- 滤镜预览 -->
-          :style="{
+          <div
-            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
+            :style="{
-            ...rangeStyle
+              ...getFilterStyle(chartEditStore.getEditCanvasConfig),
-          }"
+              ...rangeStyle
-        >
+            }"
-          <!-- 图表 -->
+          >
-          <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
+            <!-- 图表 -->
-            <!-- 分组 -->
+            <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
-            <edit-group
+              <!-- 分组 -->
-              v-if="item.isGroup"
+              <edit-group
-              :groupData="(item as CreateComponentGroupType)"
+                v-if="item.isGroup"
-              :groupIndex="index"
+                :groupData="(item as CreateComponentGroupType)"
-            ></edit-group>
+                :groupIndex="index"
+              ></edit-group>
 
-            <!-- 单组件 -->
+              <!-- 单组件 -->
-            <edit-shape-box
+              <edit-shape-box
-              v-else
+                v-else
-              :data-id="item.id"
+                :data-id="item.id"
-              :index="index"
+                :index="index"
-              :style="{
+                :style="{
                 ...useComponentStyle(item.attr, index),
                 ...getBlendModeStyle(item.styles) as any
               }"
-              :item="item"
+                :item="item"
-              @click="mouseClickHandle($event, item)"
+                @click="mouseClickHandle($event, item)"
-              @mousedown="mousedownHandle($event, item)"
+                @mousedown="mousedownHandle($event, item)"
-              @mouseenter="mouseenterHandle($event, item)"
+                @mouseenter="mouseenterHandle($event, item)"
-              @mouseleave="mouseleaveHandle($event, item)"
+                @mouseleave="mouseleaveHandle($event, item)"
-              @contextmenu="handleContextMenu($event, item, optionsHandle)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)"
-            >
+              >
-              <component
+                <component
-                class="edit-content-chart"
+                  class="edit-content-chart"
-                :class="animationsClass(item.styles.animations)"
+                  :class="animationsClass(item.styles.animations)"
-                :is="item.chartConfig.chartKey"
+                  :is="item.chartConfig.chartKey"
-                :chartConfig="item"
+                  :chartConfig="item"
-                :themeSetting="themeSetting"
+                  :themeSetting="themeSetting"
-                :themeColor="themeColor"
+                  :themeColor="themeColor"
-                :style="{
+                  :style="{
-                  ...useSizeStyle(item.attr),
+                    ...useSizeStyle(item.attr),
-                  ...getFilterStyle(item.styles),
+                    ...getFilterStyle(item.styles),
-                  ...getTransformStyle(item.styles)
+                    ...getTransformStyle(item.styles)
-                }"
+                  }"
-              ></component>
+                ></component>
-            </edit-shape-box>
+              </edit-shape-box>
+            </div>
           </div>
-        </div>
+        </edit-range>
-      </edit-range>
+      </div>
-    </div>
+    </edit-rule>
 
     <!-- 工具栏 -->
     <template #aside>
@@ -185,12 +188,13 @@ onMounted(() => {
   overflow: hidden;
   @extend .go-point-bg;
   @include background-image('background-point');
+
   @include goId('chart-edit-content') {
     border-radius: 10px;
-    margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');
+
     .edit-content-chart {
       position: absolute;
       overflow: hidden;

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -142,7 +142,6 @@ $textSize: 10px;
   /* 选中样式 */
   &.select {
     border: 1px solid v-bind('themeColor');
-    /* 需要设置最高级，覆盖 hover 的颜色 */
     background-color: rgba(0, 0, 0, 0);
   }
 

src/views/chart/hooks/useKeyboard.hook.ts

@@ -110,21 +110,33 @@ const macKeyList: Array<string> = [
 const keyRecordHandle = () => {
   // 默认赋值
   window.$KeyboardActive = {
-    ctrl: false
+    ctrl: false,
+    space: false
   }
 
   document.onkeydown = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) {
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
       setKeyboardDressShow(e.keyCode)
-      window.$KeyboardActive.ctrl = true
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = true; break
+        case 32: window.$KeyboardActive.space = true; break
+      }
     }
   }
 
   document.onkeyup = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) 
+    const { keyCode } = e
-    {
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
-      window.$KeyboardActive.ctrl = false
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
       setKeyboardDressShow()
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = false; break
+        case 32: window.$KeyboardActive.space = false; break
+      }
     }
   }
 }

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -54,5 +54,6 @@ const props = defineProps({
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
+  overflow: hidden;
 }
 </style>

src/views/preview/components/PreviewRenderList/index.vue

@@ -47,7 +47,7 @@ import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils
 import { useLifeHandler } from '@/hooks'
 
 // 初始化数据池
-const { initDataPond } = useChartDataPondFetch()
+const { initDataPond, clearMittDataPondMap } = useChartDataPondFetch()
 
 const props = defineProps({
   localStorageInfo: {
@@ -69,6 +69,7 @@ const themeColor = computed(() => {
 })
 
 // 组件渲染结束初始化数据池
+clearMittDataPondMap()
 onMounted(() => {
   initDataPond(props.localStorageInfo.requestGlobalConfig)
 })
@@ -77,5 +78,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
+  overflow: hidden;
 }
 </style>

types/global.d.ts

@@ -7,6 +7,8 @@ interface Window {
   $vue: any
   // 键盘按键记录
   $KeyboardActive?: { [T: string]: boolean }
+  onKeySpacePressHold?: Function
+
   // 编辑 JSON 的存储对象
   opener: any
 }

types/shims-vue.d.ts

@@ -5,3 +5,4 @@ declare module '*.vue' {
 }
 
 declare module 'lodash/*'
+declare module 'dom-helpers'