chore: 基本完成翻牌器

src/packages/components/Decorates/Mores/CountDown/config.ts

@@ -15,12 +15,14 @@ export const FontWeightObject = {
 }
 
 export const option = {
+  dataset: 203234,
+  flipperLength: 6,
   flipperBgColor: '#ee6600FF',
   flipperTextColor: '#FFFFFFFF',
   flipperWidth: 60,
   flipperHeight: 100,
   flipperRadius: 10,
-  flipperSpeed: 600
+  flipperSpeed: 450
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

src/packages/components/Decorates/Mores/CountDown/config.vue

@@ -1,5 +1,14 @@
 <template>
   <collapse-item name="翻牌" :expanded="true">
+    <setting-item-box name="内容">
+      <setting-item name="初始值">
+        <n-input-number v-model:value="optionData.dataset" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="个数">
+        <n-input-number v-model:value="optionData.flipperLength" size="small" :min="1"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
     <setting-item-box name="尺寸">
       <setting-item name="宽度">
         <n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>

src/packages/components/Decorates/Mores/CountDown/index.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="go-decorates-more-countdown">
-    <n-countdown :duration="50000" :active="true" />
+    <!-- <n-countdown :duration="50000" :active="true" /> -->
     <n-space :gap="10">
       <flipper
         flip-type="down"
-        :front-text="0"
-        :back-text="COUNT"
+        :count="item"
         :width="flipperWidth"
         :height="flipperHeight"
         :front-color="flipperTextColor"
         :back-color="flipperBgColor"
         :radius="flipperRadius"
         :duration="flipperSpeed"
-        ref="flipperRef"
+        v-for="(item, index) in flipperData"
+        :key="index"
       />
     </n-space>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, ref, watch, onMounted, onUnmounted } from 'vue'
+import { PropType, toRefs, watch, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
@@ -31,49 +31,47 @@ const props = defineProps({
     required: true
   }
 })
-let boxShadow = ref('none')
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-let { flipperBgColor, flipperTextColor, flipperWidth, flipperHeight, flipperRadius, flipperSpeed } = toRefs(
-  props.chartConfig.option
-)
+const {
+  dataset,
+  flipperLength,
+  flipperBgColor,
+  flipperTextColor,
+  flipperWidth,
+  flipperHeight,
+  flipperRadius,
+  flipperSpeed
+} = toRefs(props.chartConfig.option)
+
+const updateDatasetHandler = (newVal: number) => {
+  let datasetVal = dataset?.value as Number
+  datasetVal !== undefined && (datasetVal = newVal)
+}
 
 watch(
-  props.chartConfig.option,
-  () => {
-    if (props.chartConfig.option.showShadow) {
-      boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
-    } else {
-      boxShadow.value = 'none'
-    }
+  props.chartConfig.option.dataset,
+  (newVal: number) => {
+    updateDatasetHandler(newVal)
   },
   {
     immediate: true
   }
 )
 
-const flipperRef = ref(null)
+const flipperData = computed(() => {
+  const datasetVal: Number = dataset?.value || 0
+  return datasetVal
+    .toString()
+    .padStart(flipperLength.value, '0')
+    .split('')
+    .slice(flipperLength.value * -1)
+})
 
-let COUNT = 9
-let interval = 0
-onMounted(() => {
-  const interval = window.setInterval(() => {
-    if (COUNT <= 1) {
-      window.clearInterval(interval)
-      return
-    }
-    COUNT--
-    const flipperCON: any = flipperRef.value
-    console.log(flipperCON)
-    flipperCON?.flip(COUNT, COUNT - 1)
-    console.log('onMounted:window.setInterval', COUNT)
-  }, 1000)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: number) => {
+  updateDatasetHandler(newVal)
 })
-onUnmounted(() => {
-  window.clearInterval(interval)
-})
-useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
 
 <style lang="scss" scoped>
@@ -81,7 +79,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore)
   width: v-bind('`${w}px`');
   height: v-bind('`${h}px`');
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
 }