feat: 新增动画功能

2026-04-23 00:00:12 +08:00 · 2022-03-09 09:21:47 +08:00
parent b96c2f0d3e
commit a6e5dec2c0
10 changed files with 157 additions and 79 deletions
@@ -0,0 +1,95 @@
+<template>
+  <div class="go-chart-configurations-animations" v-if="targetData">
+    <n-button
+      class="clear-btn"
+      :disabled="!targetData.styles.animations.length"
+      @click="clearAnimation"
+    >
+      清除动画
+    </n-button>
+    <CollapseItem
+      v-for="(item, index) in animations"
+      :key="index"
+      :name="item.label"
+      :expanded="true"
+    >
+      <n-grid :x-gap="6" :y-gap="10" :cols="3">
+        <n-grid-item
+          class="animation-item go-transition-quick"
+          :class="[
+            activeIndex(childrenItem.value) && 'active',
+            hoverPreviewAnimate === childrenItem.value &&
+              `animate__animated  animate__${childrenItem.value}`
+          ]"
+          v-for="(childrenItem, index) in item.children"
+          :key="index"
+          @mouseover="hoverPreviewAnimate = childrenItem.value"
+          @click="addAnimation(childrenItem)"
+        >
+          {{ childrenItem.label }}
+        </n-grid-item>
+      </n-grid>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, Ref } from 'vue'
+import { animations } from '@/settings/animations/index'
+import { CollapseItem } from '@/components/ChartItemSetting/index'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const chartEditStore = useChartEditStore()
+const hoverPreviewAnimate = ref('')
+
+const targetData: Ref<CreateComponentType> = computed(() => {
+  const list = chartEditStore.getComponentList
+  const targetIndex = chartEditStore.fetchTargetIndex()
+  return list[targetIndex]
+})
+
+// * 选中样式
+const activeIndex = (value: string) => {
+  const selectValue = targetData.value.styles.animations
+  if (!selectValue.length) return false
+  return selectValue[0] === value
+}
+
+// * 清除动画
+const clearAnimation = () => {
+  targetData.value.styles.animations = []
+}
+
+// * 新增动画，现只支持一种
+const addAnimation = (item: { label: string; value: string }) => {
+  targetData.value.styles.animations = [item.value]
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('chart-configurations-animations') {
+  padding: 20px 10px;
+  .clear-btn {
+    width: 100%;
+  }
+  .animation-item {
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 5px;
+    @include hover-border-color('hover-border-color');
+    &:hover,
+    &.active {
+      color: v-bind('themeColor');
+      border: 1px solid v-bind('themeColor');
+    }
+  }
+}
+</style>
@@ -1,5 +1,5 @@
 <template>
-  <div class="go-chart-content-details" v-if="targetData">
+  <div class="go-chart-configurations-setting" v-if="targetData">
    <!-- 名称 -->
    <SettingItemBox name="名称">
      <n-input
@@ -39,6 +39,6 @@ const targetData: Ref<CreateComponentType> = computed(() => {
 </script>

 <style lang="scss" scoped>
-@include go('chart-content-details') {
+@include go('chart-configurations-setting') {
 }
 </style>