chore: 基本完成翻牌器

src/components/Flipper/index.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
-    <div class="digital front" :data-front="frontTextFromData || 0"></div>
-    <div class="digital back" :data-back="backTextFromData || 0"></div>
+    <div class="digital front" :data-front="frontTextFromData"></div>
+    <div class="digital back" :data-back="backTextFromData"></div>
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  name: 'Flipper'
+}
+</script>
+
 <script lang="ts" setup>
 import { ref, PropType, watch } from 'vue'
 type FlipType = 'up' | 'down'
 
 const props = defineProps({
   flipType: {
-    type: Object as PropType<FlipType>,
+    type: String as PropType<FlipType>,
     default: () => {
       return 'down'
     }
   },
-  frontText: {
-    type: [Number, String],
-    default: 0
-  },
-  backText: {
+  count: {
     type: [Number, String],
     default: 0
   },
@@ -51,13 +53,11 @@ const props = defineProps({
 })
 
 const isFlipping = ref(false)
-const frontTextFromData = ref(props.frontText)
-const backTextFromData = ref(props.backText)
+const frontTextFromData = ref(props.count || 0)
+const backTextFromData = ref(props.count || 0)
 
 // 翻牌
 const flip = (front: string | number, back: string | number) => {
-  if (!back) back = +front - 1
-  console.log('flip:', { front, back })
   // 如果处于翻转中，则不执行
   if (isFlipping.value) return
   // 设置翻盘前后数据
@@ -75,19 +75,14 @@ const flip = (front: string | number, back: string | number) => {
 }
 
 watch(
-  () => props.backText,
+  () => props.count,
   (newVal, oldVal) => {
-    console.log('watch:props.backText', newVal)
-    flip(newVal, oldVal as string | number)
+    flip(oldVal as string | number, newVal as string | number)
   },
   {
     immediate: true
   }
 )
-
-defineExpose({
-  flip
-})
 </script>
 
 <style lang="scss" scoped>
@@ -171,7 +166,7 @@ $lineColor: #ffffff;
     top: 0;
     bottom: 50%;
     border-radius: $radius $radius 0 0;
-    border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.5); // 中间线颜色
+    border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.3); // 中间线颜色
   }
   .digital:after {
     top: 50%;

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;
 }