feat: 新增数据池代码

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

@@ -1,35 +1,41 @@
 <template>
-  <div class="go-content-charts-item-box" :class="{ double: chartMode === ChartModeEnum.DOUBLE }">
-    <!-- 每一项组件的渲染 -->
+  <div class="go-content-charts-item-animation-patch">
     <div
-      class="item-box"
-      v-for="(item, index) in menuOptions"
-      :key="index"
-      draggable
-      @dragstart="dragStartHandle($event, item)"
-      @dragend="dragendHandle"
-      @dblclick="dblclickHandle(item)"
+      ref="contentChartsItemBoxRef"
+      class="go-content-charts-item-box"
+      :class="[chartMode === ChartModeEnum.DOUBLE ? 'double' : 'single']"
     >
-      <div class="list-header">
-        <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
-        <n-text class="list-header-text" depth="3">
-          <n-ellipsis>{{ item.title }}</n-ellipsis>
-        </n-text>
-      </div>
-      <div class="list-center go-flex-center">
-        <img class="list-img" v-lazy="item.image" alt="图表图片" />
-      </div>
-      <div class="list-bottom">
-        <n-text class="list-bottom-text" depth="3">
-          <n-ellipsis style="max-width: 90%">{{ item.title }}</n-ellipsis>
-        </n-text>
+      <!-- 每一项组件的渲染 -->
+      <div
+        class="item-box"
+        v-for="(item, index) in menuOptions"
+        :key="index"
+        draggable
+        @dragstart="dragStartHandle($event, item)"
+        @dragend="dragendHandle"
+        @dblclick="dblclickHandle(item)"
+      >
+        <div class="list-header">
+          <mac-os-control-btn class="list-header-control-btn" :mini="true" :disabled="true"></mac-os-control-btn>
+          <n-text class="list-header-text" depth="3">
+            <n-ellipsis>{{ item.title }}</n-ellipsis>
+          </n-text>
+        </div>
+        <div class="list-center go-flex-center">
+          <img class="list-img" v-lazy="item.image" alt="图表图片" />
+        </div>
+        <div class="list-bottom">
+          <n-text class="list-bottom-text" depth="3">
+            <n-ellipsis style="max-width: 90%">{{ item.title }}</n-ellipsis>
+          </n-text>
+        </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;