Merge branch 'dev' into dev-commet

src/enums/httpEnum.ts

@@ -15,7 +15,9 @@ export enum RequestDataTypeEnum {
   // 静态数据
   STATIC = 0,
   // 请求数据
-  AJAX = 1
+  AJAX = 1,
+  // 数据池
+  Pond = 2
 }
 
 // 请求主体类型

src/hooks/useLifeHandler.hook.ts

@@ -9,6 +9,8 @@ export const npmPkgs = { echarts }
 
 // 组件事件处理 hook
 export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponentGroupType) => {
+  if (!chartConfig.events) return {}
+
   // 处理基础事件
   const baseEvent: { [key: string]: any } = {}
   for (const key in chartConfig.events.baseEvent) {

src/packages/components/Charts/Bars/CapsuleChart/index.vue

@@ -53,11 +53,10 @@
 
 <script setup lang="ts">
 import { onMounted, watch, reactive, PropType } from 'vue'
-import merge from 'lodash/merge'
-import cloneDeep from 'lodash/cloneDeep'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import config, { option } from './config'
+import cloneDeep from 'lodash/cloneDeep'
 
 type DataProps = {
   name: string | number
@@ -114,12 +113,11 @@ watch(
 
 const calcData = (data: any) => {
   mergeConfig(props.chartConfig.option)
-
   calcCapsuleLengthAndLabelData()
 }
 
 const mergeConfig = (data: any) => {
-  state.mergedConfig = merge(cloneDeep(state.defaultConfig), data || {})
+  state.mergedConfig = cloneDeep(data || {})
 }
 
 // 数据解析

src/packages/components/Tables/Tables/TableList/index.vue

@@ -62,7 +62,7 @@ const status = reactive({
 const calcRowsData = () => {
   let { dataset, rowNum, sort } = status.mergedConfig
   // @ts-ignore
-  sort && dataset.sort(({ value: a }, { value: b }) => {
+  sort &&dataset.sort(({ value: a }, { value: b  } )  => {
       if (a > b) return -1
       if (a < b) return 1
       if (a === b) return 0
@@ -94,6 +94,7 @@ const calcHeights = (onresize = false) => {
   const { rowNum, dataset } = status.mergedConfig
   const avgHeight = h.value / rowNum
   status.avgHeight = avgHeight
+
   if (!onresize) status.heights = new Array(dataset.length).fill(avgHeight)
 }
 
@@ -131,12 +132,17 @@ const stopAnimation = () => {
 const onRestart = async () => {
   try {
     if (!status.mergedConfig) return
+    let { dataset, rowNum, sort } = status.mergedConfig
     stopAnimation()
     calcRowsData()
-    calcHeights(true)
-    animation(true)
+    let flag = true
+    if (dataset.length <= rowNum) {
+      flag=false
+    }
+    calcHeights(flag)
+    animation(flag)
   } catch (error) {
-    console.log(error)
+    console.error(error)
   }
 }
 

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -8,13 +8,12 @@ const chartEditStore = useChartEditStore()
 
 const { GO_CHART_LAYOUT_STORE } = StorageEnum
 
-const storageChartLayout: ChartLayoutType = getLocalStorage(GO_CHART_LAYOUT_STORE)
+const storageChartLayout: Partial<ChartLayoutType> = getLocalStorage(GO_CHART_LAYOUT_STORE)
 
 // 编辑区域布局和静态设置
 export const useChartLayoutStore = defineStore({
   id: 'useChartLayoutStore',
-  state: (): ChartLayoutType =>
-    storageChartLayout || {
+  state: (): ChartLayoutType => ({
     // 图层控制
     layers: true,
     // 图表组件
@@ -24,8 +23,10 @@ export const useChartLayoutStore = defineStore({
     // 组件列表展示类型（默认单列）
     chartType: ChartModeEnum.SINGLE,
     // 图层类型（默认图片）
-      layerType: LayerModeEnum.THUMBNAIL
-    },
+    layerType: LayerModeEnum.THUMBNAIL,
+    // 防止值不存在
+    ...storageChartLayout
+  }),
   getters: {
     getLayers(): boolean {
       return this.layers
@@ -46,8 +47,8 @@ export const useChartLayoutStore = defineStore({
   actions: {
     setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
       this.$patch(state => {
-        state[key]= value
-      });
+        state[key] = value
+      })
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
       // 重新计算拖拽区域缩放比例
       setTimeout(() => {

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="go-content-charts-item-box" :class="{ double: chartMode === ChartModeEnum.DOUBLE }">
+  <div class="go-content-charts-item-animation-patch">
+    <div
+      ref="contentChartsItemBoxRef"
+      class="go-content-charts-item-box"
+      :class="[chartMode === ChartModeEnum.DOUBLE ? 'double' : 'single']"
+    >
       <!-- 每一项组件的渲染 -->
       <div
         class="item-box"
@@ -26,10 +31,11 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, Ref, computed } from 'vue'
+import { PropType, watch, ref, Ref, computed, nextTick } from 'vue'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
@@ -51,6 +57,7 @@ defineProps({
 })
 
 const chartLayoutStore = useChartLayoutStore()
+const contentChartsItemBoxRef = ref()
 
 // 组件展示状态
 const chartMode: Ref<ChartModeEnum> = computed(() => {
@@ -92,21 +99,38 @@ const dblclickHandle = async (item: ConfigType) => {
     window['$message'].warning(`图表正在研发中, 敬请期待...`)
   }
 }
+
+watch(
+  () => chartMode.value,
+  (newValue: ChartModeEnum) => {
+    if (newValue === ChartModeEnum.DOUBLE) {
+      nextTick(() => {
+        contentChartsItemBoxRef.value.classList.add('miniAnimation')
+      })
+    }
+  }
+)
 </script>
 
 <style lang="scss" scoped>
 /* 列表项宽度 */
 $itemWidth: 100%;
+$maxItemWidth: 180px;
 $halfItemWidth: 46%;
 /* 内容高度 */
 $centerHeight: 100px;
 $halfCenterHeight: 50px;
+
+@include go('content-charts-item-animation-patch') {
+  padding: 10px;
+}
+
 @include go('content-charts-item-box') {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 9px;
-  padding: 10px;
+  transition: all 0.7s linear;
   .item-box {
     margin: 0;
     width: $itemWidth;
@@ -115,7 +139,6 @@ $halfCenterHeight: 50px;
     cursor: pointer;
     border: 1px solid rgba(0, 0, 0, 0);
     @include fetch-bg-color('background-color2');
-    @extend .go-transition;
     &:hover {
       @include hover-border-color('background-color4');
       .list-img {
@@ -153,6 +176,22 @@ $halfCenterHeight: 50px;
     }
   }
   /* 缩小展示 */
+  @keyframes miniAnimation {
+    from {
+      width: $itemWidth * 2;
+    }
+    to {
+      width: $itemWidth;
+    }
+  }
+  &.miniAnimation {
+    animation: miniAnimation 0.5s;
+  }
+  &.single {
+    .item-box {
+      @extend .go-transition;
+    }
+  }
   &.double {
     .list-header {
       padding: 2px 5px;
@@ -165,6 +204,7 @@ $halfCenterHeight: 50px;
     }
     .item-box {
       width: $halfItemWidth;
+      max-width: $maxItemWidth;
     }
     .list-center {
       height: $halfCenterHeight;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="go-chart-configurations-animations" v-if="targetData">
     <n-button
-      class="clear-btn"
+      class="clear-btn go-my-2"
       :disabled="!targetData.styles.animations.length"
       @click="clearAnimation"
     >
@@ -72,7 +72,7 @@ const addAnimation = (item: { label: string; value: string }) => {
 
 <style lang="scss" scoped>
 @include go('chart-configurations-animations') {
-  padding: 20px 10px;
+  padding: 0;
   .clear-btn {
     width: 100%;
   }

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

@@ -41,13 +41,9 @@
         </n-input>
       </setting-item-box>
 
-      <n-space justify="end">
-        <n-text depth="3" style="font-size: 12px">更新内容请点击展示区域</n-text>
-      </n-space>
-
       <div class="edit-text" @click="requestModelHandle">
         <div class="go-absolute-center">
-          <n-button type="primary" secondary>查看更多</n-button>
+          <n-button type="primary" secondary>编辑配置</n-button>
         </div>
       </div>
     </n-card>
@@ -175,7 +171,7 @@ onBeforeUnmount(() => {
       top: 0px;
       left: 0px;
       width: 325px;
-      height: 292px;
+      height: 270px;
       cursor: pointer;
       opacity: 0;
       transition: all 0.3s;

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

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

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="go-chart-data-pond">
+    <n-card class="n-card-shallow">
+      <setting-item-box name="请求配置">
+        <setting-item name="类型">
+          <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" />
+          </template>
+        </n-input>
+      </setting-item-box>
+
+      <setting-item-box name="组件地址" :alone="true">
+        <n-input size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
+          <template #prefix>
+            <n-icon :component="FlashIcon" />
+          </template>
+        </n-input>
+      </setting-item-box>
+
+      <div class="edit-text" @click="requestModelHandle">
+        <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>
+  <!-- 编辑 / 新增弹窗 -->
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed } from 'vue'
+import { icon } from '@/plugins'
+import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
+
+const designStore = useDesignStore()
+const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
+const { targetData, chartEditStore } = useTargetData()
+
+const {
+  requestOriginUrl,
+  requestDataPond,
+  requestInterval: GlobalRequestInterval,
+  requestIntervalUnit: GlobalRequestIntervalUnit
+} = toRefs(chartEditStore.getRequestGlobalConfig)
+
+const requestShow = ref(false)
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 请求配置 model
+const requestModelHandle = () => {
+  requestShow.value = true
+}
+</script>
+
+<style scoped lang="scss">
+@include go('chart-data-pond') {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .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;
+      }
+    }
+  }
+
+  /* 列表 */
+  .pond-list-box {
+
+  }
+}
+</style>

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

@@ -16,6 +16,7 @@ export enum TimelineTitleEnum {
 export enum SelectCreateDataEnum {
   STATIC = '静态数据',
   AJAX = '动态请求',
+  Pond = '公共接口',
 }
 
 export interface SelectCreateDataType {

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

@@ -3,24 +3,27 @@
     <setting-item-box name="请求方式" :alone="true">
       <n-select v-model:value="targetData.request.requestDataType" :disabled="isNotData" :options="selectOptions" />
     </setting-item-box>
-
     <!-- 静态 -->
     <chart-data-static v-if="targetData.request.requestDataType === RequestDataTypeEnum.STATIC"></chart-data-static>
-
     <!-- 动态 -->
-    <chart-data-ajax v-else></chart-data-ajax>
+    <chart-data-ajax v-if="targetData.request.requestDataType === RequestDataTypeEnum.AJAX"></chart-data-ajax>
+    <!-- 数据池 -->
+    <chart-data-pond v-if="targetData.request.requestDataType === RequestDataTypeEnum.Pond"></chart-data-pond>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { loadAsyncComponent } from '@/utils'
 import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
 import { useTargetData } from '../hooks/useTargetData.hook'
-import { ChartDataStatic } from './components/ChartDataStatic/index'
-import { ChartDataAjax } from './components/ChartDataAjax/index'
 import { SelectCreateDataType, SelectCreateDataEnum } from './index.d'
 import { RequestDataTypeEnum } from '@/enums/httpEnum'
 
+const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
+const ChartDataAjax = loadAsyncComponent(() => import('./components/ChartDataAjax/index.vue'))
+const ChartDataPond = loadAsyncComponent(() => import('./components/ChartDataPond/index.vue'))
+
 const { targetData } = useTargetData()
 
 // 选项
@@ -32,6 +35,10 @@ const selectOptions: SelectCreateDataType[] = [
   {
     label: SelectCreateDataEnum.AJAX,
     value: RequestDataTypeEnum.AJAX
+  },
+  {
+    label: SelectCreateDataEnum.Pond,
+    value: RequestDataTypeEnum.Pond
   }
 ]
 

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue

@@ -18,7 +18,9 @@
           <br />
           <span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
         </p>
-        <p class="go-ml-4"><n-code :code="(targetData.events.advancedEvents || {})[eventName]" language="typescript"></n-code></p>
+        <p class="go-ml-4">
+          <n-code :code="(targetData.events.advancedEvents || {})[eventName] || ''" language="typescript"></n-code>
+        </p>
         <p>}<span>,</span></p>
       </div>
     </n-card>
@@ -227,7 +229,7 @@ const saveEvents = () => {
     // 清空事件
     targetData.value.events.advancedEvents = {
       vnodeBeforeMount: undefined,
-      vnodeMounted: undefined,
+      vnodeMounted: undefined
     }
   } else {
     targetData.value.events.advancedEvents = { ...advancedEvents.value }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue

@@ -16,10 +16,10 @@
         <p>
           <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
           <br />
-          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent, components) {
+          <span class="func-keyword">async {{ eventName }}</span> (mouseEvent) {
         </p>
         <p class="go-ml-4">
-          <n-code :code="(targetData.events.baseEvent || {})[eventName]" language="typescript"></n-code>
+          <n-code :code="(targetData.events.baseEvent || {})[eventName] || ''" language="typescript"></n-code>
         </p>
         <p>}<span>,</span></p>
       </div>

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

@@ -3,7 +3,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
-import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
 import merge from 'lodash/merge'
 
@@ -35,7 +35,18 @@ const componentVersionUpdatePolyfill = (newObject: any, sources: any) => {
         newObject.events.advancedEvents.vnodeMounted = sources?.events.vnodeMounted
       }
       if (hasVnodeBeforeMount || hasVnodeMounted) {
-        sources.events = undefined
+        sources.events = {
+          baseEvent: {
+            [BaseEvent.ON_CLICK]: undefined,
+            [BaseEvent.ON_DBL_CLICK]: undefined,
+            [BaseEvent.ON_MOUSE_ENTER]: undefined,
+            [BaseEvent.ON_MOUSE_LEAVE]: undefined
+          },
+          advancedEvents: {
+            [EventLife.VNODE_MOUNTED]: undefined,
+            [EventLife.VNODE_BEFORE_MOUNT]: undefined
+          }
+        }
       }
       return newObject
     }