feat: 完成数字翻牌组件

src/components/Flipper/index.ts

@@ -1,3 +1,4 @@
 import Flipper from './index.vue'
+type FlipType = 'up' | 'down'
 
-export { Flipper }
+export { Flipper, FlipType }

src/components/Flipper/index.vue

@@ -13,7 +13,7 @@ export default {
 
 <script lang="ts" setup>
 import { ref, PropType, watch } from 'vue'
-type FlipType = 'up' | 'down'
+import { FlipType } from '.'
 
 const props = defineProps({
   flipType: {

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

@@ -3,25 +3,31 @@ import { CreateComponentType } from '@/packages/index.d'
 import { CountDownConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
+import { FlipType } from '@/components/Flipper'
 
-export enum FontWeightEnum {
-  NORMAL = '常规',
-  BOLD = '加粗'
+export interface OptionType {
+  dataset: number | string
+  flipperLength: number
+  flipperBgColor: string
+  flipperTextColor: string
+  flipperWidth: number
+  flipperHeight: number
+  flipperRadius: number
+  flipperGap: number
+  flipperType: FlipType
+  flipperSpeed: number
 }
 
-export const FontWeightObject = {
-  [FontWeightEnum.NORMAL]: 'normal',
-  [FontWeightEnum.BOLD]: 'bold'
-}
-
-export const option = {
+export const option: OptionType = {
   dataset: 203234,
   flipperLength: 6,
-  flipperBgColor: '#ee6600FF',
+  flipperBgColor: '#ee6600',
   flipperTextColor: '#FFFFFFFF',
   flipperWidth: 60,
   flipperHeight: 100,
   flipperRadius: 10,
+  flipperGap: 10,
+  flipperType: 'down',
   flipperSpeed: 450
 }
 

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

@@ -9,24 +9,42 @@
       </setting-item>
     </setting-item-box>
 
-    <setting-item-box name="尺寸">
+    <setting-item-box name="样式">
       <setting-item name="宽度">
         <n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>
       </setting-item>
       <setting-item name="高度">
         <n-input-number v-model:value="optionData.flipperHeight" 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.flipperGap" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
+      </setting-item>
       <setting-item name="背景色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperBgColor"></n-color-picker>
+        <n-color-picker
+          size="small"
+          :show-alpha="false"
+          :modes="['hex']"
+          v-model:value="optionData.flipperBgColor"
+        ></n-color-picker>
       </setting-item>
       <setting-item name="字体色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperTextColor"></n-color-picker>
       </setting-item>
-      <setting-item name="圆角">
-        <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
+    </setting-item-box>
+
+    <setting-item-box name="行为">
+      <setting-item name="动画">
+        <n-select
+          v-model:value="optionData.flipperType"
+          size="small"
+          :options="[
+            { label: '下翻', value: 'down' },
+            { label: '上翻', value: 'up' }
+          ]"
+        ></n-select>
       </setting-item>
       <setting-item name="翻牌速度">
         <n-input-number
@@ -43,11 +61,11 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
+import { OptionType } from './config'
 
-const props = defineProps({
+defineProps({
   optionData: {
-    type: Object as PropType<typeof option>,
+    type: Object as PropType<OptionType>,
     required: true
   }
 })

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

@@ -1,29 +1,28 @@
 <template>
-  <div class="go-decorates-more-countdown">
-    <!-- <n-countdown :duration="50000" :active="true" /> -->
-    <n-space :gap="10">
-      <flipper
-        flip-type="down"
-        :count="item"
-        :width="flipperWidth"
-        :height="flipperHeight"
-        :front-color="flipperTextColor"
-        :back-color="flipperBgColor"
-        :radius="flipperRadius"
-        :duration="flipperSpeed"
-        v-for="(item, index) in flipperData"
-        :key="index"
-      />
-    </n-space>
-  </div>
+  <!-- <n-countdown :duration="50000" :active="true" /> -->
+  <n-space class="go-decorates-more-countdown" :size="flipperGap" align="center" justify="center">
+    <flipper
+      :count="item"
+      :width="flipperWidth"
+      :height="flipperHeight"
+      :front-color="flipperTextColor"
+      :back-color="flipperBgColor"
+      :radius="flipperRadius"
+      :flip-type="flipperType"
+      :duration="flipperSpeed"
+      v-for="(item, index) in flipperData"
+      :key="index"
+    />
+  </n-space>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, watch, computed } from 'vue'
+import { PropType, toRefs, watch, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useChartDataFetch } from '@/hooks'
-import { Flipper } from '@/components/Flipper/index'
+import { Flipper } from '@/components/Flipper'
+import { OptionType } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -35,41 +34,41 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 
 const {
-  dataset,
   flipperLength,
   flipperBgColor,
   flipperTextColor,
   flipperWidth,
   flipperHeight,
   flipperRadius,
+  flipperGap,
+  flipperType,
   flipperSpeed
-} = toRefs(props.chartConfig.option)
+} = toRefs(props.chartConfig.option as OptionType)
 
-const updateDatasetHandler = (newVal: number) => {
-  let datasetVal = dataset?.value as Number
-  datasetVal !== undefined && (datasetVal = newVal)
+const flipperData = ref<string[] | number[]>([])
+const getFlipperData = (val: string | number) => {
+  return val
+    .toString()
+    .padStart(flipperLength.value, '0') // 左侧填充|右对齐
+    .split('') // 转数组
+    .slice(flipperLength.value * -1) // 从右向左取
+}
+const updateDatasetHandler = (newVal: string | number) => {
+  flipperData.value = getFlipperData(newVal)
 }
 
 watch(
-  props.chartConfig.option.dataset,
-  (newVal: number) => {
-    updateDatasetHandler(newVal)
+  () => props.chartConfig.option,
+  newVal => {
+    updateDatasetHandler((newVal as OptionType).dataset)
   },
   {
-    immediate: true
+    immediate: true,
+    deep: true
   }
 )
 
-const flipperData = computed(() => {
-  const datasetVal: Number = dataset?.value || 0
-  return datasetVal
-    .toString()
-    .padStart(flipperLength.value, '0')
-    .split('')
-    .slice(flipperLength.value * -1)
-})
-
-useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: number) => {
+useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
   updateDatasetHandler(newVal)
 })
 </script>
@@ -78,8 +77,5 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: number) => {
 @include go('decorates-more-countdown') {
   width: v-bind('`${w}px`');
   height: v-bind('`${h}px`');
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 </style>

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

@@ -0,0 +1,39 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlipperNumberConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+import { FlipType } from '@/components/Flipper'
+
+export interface OptionType {
+  dataset: number | string
+  flipperLength: number
+  flipperBgColor: string
+  flipperTextColor: string
+  flipperWidth: number
+  flipperHeight: number
+  flipperRadius: number
+  flipperGap: number
+  flipperType: FlipType
+  flipperSpeed: number
+}
+
+export const option: OptionType = {
+  dataset: 203234,
+  flipperLength: 6,
+  flipperBgColor: '#253E4E',
+  flipperTextColor: '#7CFFB2FF',
+  flipperWidth: 60,
+  flipperHeight: 100,
+  flipperRadius: 10,
+  flipperGap: 10,
+  flipperType: 'down',
+  flipperSpeed: 450
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlipperNumberConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 200, zIndex: -1 }
+  public chartConfig = cloneDeep(FlipperNumberConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,72 @@
+<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>
+      </setting-item>
+      <setting-item name="高度">
+        <n-input-number v-model:value="optionData.flipperHeight" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="间隔">
+        <n-input-number v-model:value="optionData.flipperGap" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number v-model:value="optionData.flipperRadius" size="small" :min="0"></n-input-number>
+      </setting-item>
+      <setting-item name="背景色">
+        <n-color-picker
+          size="small"
+          :show-alpha="false"
+          :modes="['hex']"
+          v-model:value="optionData.flipperBgColor"
+        ></n-color-picker>
+      </setting-item>
+      <setting-item name="字体色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperTextColor"></n-color-picker>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="行为">
+      <setting-item name="动画">
+        <n-select
+          v-model:value="optionData.flipperType"
+          size="small"
+          :options="[
+            { label: '下翻', value: 'down' },
+            { label: '上翻', value: 'up' }
+          ]"
+        ></n-select>
+      </setting-item>
+      <setting-item name="翻牌速度">
+        <n-input-number
+          v-model:value="optionData.flipperSpeed"
+          size="small"
+          :min="100"
+          :max="900"
+          :step="100"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { OptionType } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<OptionType>,
+    required: true
+  }
+})
+</script>

src/packages/components/Decorates/Mores/FlipperNumber/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/time.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const FlipperNumberConfig: ConfigType = {
+  key: 'FlipperNumber',
+  chartKey: 'VFlipperNumber',
+  conKey: 'VCFlipperNumber',
+  title: '数字翻牌2',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,81 @@
+<template>
+  <!-- <n-countdown :duration="50000" :active="true" /> -->
+  <n-space class="go-decorates-more-countdown" :size="flipperGap" align="center" justify="center">
+    <flipper
+      :count="item"
+      :width="flipperWidth"
+      :height="flipperHeight"
+      :front-color="flipperTextColor"
+      :back-color="flipperBgColor"
+      :radius="flipperRadius"
+      :flip-type="flipperType"
+      :duration="flipperSpeed"
+      v-for="(item, index) in flipperData"
+      :key="index"
+    />
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
+import { Flipper } from '@/components/Flipper'
+import { OptionType } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  flipperLength,
+  flipperBgColor,
+  flipperTextColor,
+  flipperWidth,
+  flipperHeight,
+  flipperRadius,
+  flipperGap,
+  flipperType,
+  flipperSpeed
+} = toRefs(props.chartConfig.option as OptionType)
+
+const flipperData = ref<string[] | number[]>([])
+const getFlipperData = (val: string | number) => {
+  return val
+    .toString()
+    .padStart(flipperLength.value, '0') // 左侧填充|右对齐
+    .split('') // 转数组
+    .slice(flipperLength.value * -1) // 从右向左取
+}
+const updateDatasetHandler = (newVal: string | number) => {
+  flipperData.value = getFlipperData(newVal)
+}
+
+watch(
+  () => props.chartConfig.option,
+  newVal => {
+    updateDatasetHandler((newVal as OptionType).dataset)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
+  updateDatasetHandler(newVal)
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('decorates-more-countdown') {
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+}
+</style>

src/packages/components/Decorates/Mores/index.ts

@@ -2,5 +2,6 @@ import { NumberConfig } from './Number/index'
 import { TimeCommonConfig } from './TimeCommon/index'
 import { ClockConfig } from './Clock/index'
 import { CountDownConfig } from './CountDown/index'
+import { FlipperNumberConfig } from './FlipperNumber'
 
-export default [TimeCommonConfig, CountDownConfig, NumberConfig, ClockConfig]
+export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig]