feat: 处理请求展示的位置

src/hooks/useChartDataFetch.hook.ts

@@ -37,8 +37,15 @@ export const useChartDataFetch = (
     } = toRefs(targetComponent.request)
 
     // 非请求类型
-    if (requestDataType.value !== RequestDataTypeEnum.AJAX || !requestInterval) return
-    
+    if (
+      requestDataType.value !== RequestDataTypeEnum.AJAX ||
+      !requestInterval ||
+      !requestInterval.value ||
+      !targetInterval ||
+      !targetInterval.value
+    )
+      return
+
     try {
       // 处理地址
       // @ts-ignore

src/plugins/icon.ts

@@ -54,7 +54,8 @@ import {
   Planet as PawIcon,
   Search as SearchIcon,
   ChevronUpOutline as ChevronUpOutlineIcon,
-  ChevronDownOutline as ChevronDownOutlineIcon
+  ChevronDownOutline as ChevronDownOutlineIcon,
+  Pulse as PulseIcon
 } from '@vicons/ionicons5'
 
 import {
@@ -200,7 +201,9 @@ const ionicons5 = {
   // 向上
   ChevronUpOutlineIcon,
   // 向下
-  ChevronDownOutlineIcon
+  ChevronDownOutlineIcon,
+  // 脉搏
+  PulseIcon
 }
 
 const carbon = {

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

@@ -1,45 +1,42 @@
 <template>
   <div class="go-chart-configurations-data-ajax">
-    <n-button type="primary" @click="requestModelHandle">配置请求</n-button>
-    <setting-item-box name="配置">
-      <setting-item name="类型">
-        <n-select v-model:value="targetData.request.requestHttpType" :options="selectOptions" />
-      </setting-item>
-      <setting-item name="默认使用全局间隔">
-        <n-input-number
-          v-model:value.trim="targetData.request.requestInterval"
-          min="5"
-          :show-button="false"
-          placeholder="可以为空"
-        >
-          <template #suffix> 秒 </template>
-        </n-input-number>
-      </setting-item>
-    </setting-item-box>
+    <n-card class="n-card-shallow">
+      <setting-item-box name="基础配置">
+        <setting-item name="请求方式">
+          <n-input size="small" :placeholder="requestHttpType || '暂无'" :disabled="true"></n-input>
+        </setting-item>
 
-    <setting-item-box name="源地址:" :alone="true">
-      <n-text type="info">{{ requestOriginUrl || '暂无' }}</n-text>
-    </setting-item-box>
+        <setting-item name="请求间隔">
+          <n-input size="small" :placeholder="requestInterval || '暂无'" :disabled="true">
+            <template #suffix> {{ SelectHttpTimeNameObj[requestIntervalUnit] }} </template>
+          </n-input>
+        </setting-item>
+      </setting-item-box>
 
-    <setting-item-box :alone="true">
-      <template #name>
-        地址
-        <n-tooltip trigger="hover" v-if="isDev()">
-          <template #trigger>
-            <n-icon size="21" :depth="3">
-              <help-outline-icon></help-outline-icon>
-            </n-icon>
+      <setting-item-box name="源地址" :alone="true">
+        <n-input size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
+          <template #prefix>
+            <n-icon :component="PulseIcon" />
           </template>
-          <ul class="go-pl-0">
-            开发环境使用 mock 数据，请输入
-            <li v-for="item in apiList" :key="item.value">
-              <n-text type="info"> {{ item.value }} </n-text>
-            </li>
-          </ul>
-        </n-tooltip>
-      </template>
-      <n-input v-model:value.trim="targetData.request.requestUrl" :min="1" placeholder="请输入地址（去除源）" />
-    </setting-item-box>
+        </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>
+
+      <n-text depth="3">更新内容请点击配置</n-text>
+
+      <div class="edit-text" @click="requestModelHandle">
+        <div class="go-absolute-center">
+          <n-button type="primary" secondary>点击配置</n-button>
+        </div>
+      </div>
+    </n-card>
 
     <setting-item-box :alone="true">
       <template #name>
@@ -53,16 +50,14 @@
           默认赋值给 dataset 字段
         </n-tooltip>
       </template>
-      <n-space>
-        <n-button @click="sendHandle">
-          <template #icon>
-            <n-icon>
-              <flash-icon />
-            </n-icon>
-          </template>
-          发送请求
-        </n-button>
-      </n-space>
+      <n-button type="primary" ghost @click="sendHandle">
+        <template #icon>
+          <n-icon>
+            <flash-icon />
+          </n-icon>
+        </template>
+        发送请求
+      </n-button>
     </setting-item-box>
 
     <!-- 底部数据展示 -->
@@ -77,9 +72,10 @@
 <script setup lang="ts">
 import { ref, toRefs, onBeforeUnmount, watchEffect } from 'vue'
 import { icon } from '@/plugins'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { ChartDataRequest } from '../ChartDataRequest/index'
-import { RequestHttpEnum, ResultEnum } from '@/enums/httpEnum'
+import { RequestHttpEnum, ResultEnum, SelectHttpTimeNameObj } from '@/enums/httpEnum'
 import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 import { http } from '@/api/http'
 import { SelectHttpType } from '../../index.d'
@@ -87,51 +83,19 @@ import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
 import { useTargetData } from '../../../hooks/useTargetData.hook'
 import { isDev, newFunctionHandle } from '@/utils'
 
-const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
+const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
+const { requestUrl, requestHttpType, requestInterval, requestIntervalUnit } = toRefs(targetData.value.request)
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
 // 是否展示数据分析
 const loading = ref(false)
 const requestShow = ref(false)
 const showMatching = ref(false)
 let lastFilter: any = undefined
 
-const apiList = [
-  {
-    value: `【图表】${chartDataUrl}`
-  },
-  {
-    value: `【文本】${textUrl}`
-  },
-  {
-    value: `【0~100 整数】${numberIntUrl}`
-  },
-  {
-    value: `【0~1小数】${numberFloatUrl}`
-  },
-  {
-    value: `【图片地址】${imageUrl}`
-  },
-  {
-    value: `【排名列表】${rankListUrl}`
-  },
-  {
-    value: `【滚动表格】${scrollBoardUrl}`
-  }
-]
-
-// 选项
-const selectOptions: SelectHttpType[] = [
-  {
-    label: RequestHttpEnum.GET,
-    value: RequestHttpEnum.GET
-  },
-  {
-    label: RequestHttpEnum.POST,
-    value: RequestHttpEnum.POST
-  }
-]
-
 // 请求配置 model
 const requestModelHandle = () => {
   requestShow.value = true
@@ -172,5 +136,28 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 @include go('chart-configurations-data-ajax') {
+  .n-card-shallow {
+    &.n-card {
+      @extend .go-background-filter;
+    }
+    .edit-text {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 325px;
+      height: 254px;
+      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>

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

@@ -25,7 +25,7 @@
     </n-card>
   </template>
   <template v-else>
-    <n-button @click="addFilter">
+    <n-button class="go-ml-3"  @click="addFilter">
       <template #icon>
         <n-icon>
           <filter-icon />
@@ -88,7 +88,7 @@
 
           <n-space>
             <n-button size="medium" @click="closeFilter">取消</n-button>
-            <n-button size="medium" type="primary" ghost @click="saveFilter">保存</n-button>
+            <n-button size="medium" type="primary" @click="saveFilter">保存</n-button>
           </n-space>
         </n-space>
       </template>

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

@@ -10,7 +10,7 @@
     >
       <!-- 源地址 -->
       <setting-item name="前置 URL">
-        <n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="http://127.0.0.1/"></n-input>
+        <n-input v-model:value.trim="requestOriginUrl" :disabled="editDisabled" placeholder="例：http://127.0.0.1/"></n-input>
       </setting-item>
       <setting-item name="更新间隔（为 0 表示不更新）">
         <n-input-group>
@@ -32,7 +32,7 @@
           />
         </n-input-group>
       </setting-item>
-      <n-button v-show="editDisabled" type="primary" secondary @click="editDisabled = false">
+      <n-button v-show="editDisabled" type="primary" ghost @click="editDisabled = false">
         <template #icon>
           <n-icon>
             <pencil-icon />

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

@@ -2,11 +2,26 @@
   <!-- 组件配置 -->
   <n-divider class="go-my-3" title-placement="left"></n-divider>
   <setting-item-box
-    name="组件"
     :itemRightStyle="{
       gridTemplateColumns: '5fr 2fr 1fr'
     }"
   >
+    <template #name>
+      地址
+      <n-tooltip trigger="hover" v-if="isDev()">
+        <template #trigger>
+          <n-icon size="21" :depth="3">
+            <help-outline-icon></help-outline-icon>
+          </n-icon>
+        </template>
+        <ul class="go-pl-0">
+          开发环境使用 mock 数据，请输入
+          <li v-for="item in apiList" :key="item.value">
+            <n-text type="info"> {{ item.value }} </n-text>
+          </li>
+        </ul>
+      </n-tooltip>
+    </template>
     <setting-item name="请求方式 & URL 地址">
       <n-input-group>
         <n-select class="select-type-options" v-model:value="requestHttpType" :options="selectTypeOptions" />
@@ -19,21 +34,21 @@
       </n-input-group>
       <!-- 组件url -->
     </setting-item>
-    <setting-item name="默认使用全局间隔">
+    <setting-item name="更新间隔，为 0 则不请求">
       <n-input-group>
         <n-input-number
           v-model:value.trim="requestInterval"
           class="select-time-number"
-          min="1"
+          min="0"
           :show-button="false"
-          placeholder="可以为空"
+          placeholder="默认使用全局数据"
         >
         </n-input-number>
         <!-- 单位 -->
         <n-select class="select-time-options" v-model:value="requestIntervalUnit" :options="selectTimeOptions" />
       </n-input-group>
     </setting-item>
-    <n-button secondary type="primary">
+    <n-button ghost type="primary">
       <template #icon>
         <n-icon>
           <flash-icon />
@@ -43,7 +58,7 @@
     </n-button>
   </setting-item-box>
   <setting-item-box name="选择方式" class="go-mt-0">
-    <request-header></request-header>
+    <request-header></request-header> 
   </setting-item-box>
 </template>
 
@@ -53,12 +68,38 @@ 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 { RequestHeader } from '../RequestHeader'
+import { isDev } from '@/utils'
 import { icon } from '@/plugins'
+import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
 
-const { FlashIcon } = icon.ionicons5
+const { HelpOutlineIcon, FlashIcon } = icon.ionicons5
 const { targetData, chartEditStore } = useTargetData()
 const { requestOriginUrl } = toRefs(chartEditStore.getRequestGlobalConfig)
 const { requestInterval, requestIntervalUnit, requestHttpType, requestUrl } = toRefs(targetData.value.request)
+
+const apiList = [
+  {
+    value: `【图表】${chartDataUrl}`
+  },
+  {
+    value: `【文本】${textUrl}`
+  },
+  {
+    value: `【0~100 整数】${numberIntUrl}`
+  },
+  {
+    value: `【0~1小数】${numberFloatUrl}`
+  },
+  {
+    value: `【图片地址】${imageUrl}`
+  },
+  {
+    value: `【排名列表】${rankListUrl}`
+  },
+  {
+    value: `【滚动表格】${scrollBoardUrl}`
+  }
+]
 </script>
 
 <style lang="scss" scoped>

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

@@ -19,7 +19,7 @@
             <n-text>—— </n-text>
             <n-tag type="primary" :bordered="false"> {{ requestContentTypeObj[requestContentType] }} </n-tag>
           </div>
-          <n-button type="primary" ghost @click="closeHandle">确认</n-button>
+          <n-button type="primary" @click="closeHandle">确认</n-button>
         </n-space>
       </template>
     </n-card>
@@ -67,6 +67,9 @@ const closeHandle = () => {
     & > .n-card__content {
       padding-right: 0;
     }
+    .n-card__content {
+      padding-bottom: 5px;
+    }
   }
 }
 </style>

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

@@ -7,8 +7,6 @@
       />
     </setting-item-box>
 
-    <n-divider style="margin: 10px 0;"></n-divider>
-
     <!-- 静态 -->
     <chart-data-static
       v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"