!67 feat: 新增 数字翻牌 和 倒计时(翻牌效果) 组件

Merge pull request !67 from dodu/dev-countdown

src/components/Flipper/index.ts

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

src/components/Flipper/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="M-Flipper" :class="[flipType, { go: isFlipping }]">
+    <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'
+import { FlipType } from '.'
+
+const props = defineProps({
+  flipType: {
+    type: String as PropType<FlipType>,
+    default: () => {
+      return 'down'
+    }
+  },
+  count: {
+    type: [Number, String],
+    default: 0
+  },
+  duration: {
+    type: Number,
+    default: 600
+  },
+  width: {
+    type: Number,
+    default: 60
+  },
+  height: {
+    type: Number,
+    default: 100
+  },
+  radius: {
+    type: Number,
+    default: 10
+  },
+  frontColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  backColor: {
+    type: String,
+    default: '#000000'
+  }
+})
+
+const isFlipping = ref(false)
+const frontTextFromData = ref(props.count || 0)
+const backTextFromData = ref(props.count || 0)
+
+// 翻牌
+const flip = (front: string | number, back: string | number) => {
+  // 如果处于翻转中，则不执行
+  if (isFlipping.value) return
+  // 设置翻盘前后数据
+  backTextFromData.value = back
+  frontTextFromData.value = front
+
+  // 设置翻转状态为true
+  isFlipping.value = true
+
+  // 翻牌结束的行为
+  setTimeout(() => {
+    isFlipping.value = false // 设置翻转状态为false
+    frontTextFromData.value = back
+  }, props.duration)
+}
+
+watch(
+  () => props.count,
+  (newVal, oldVal) => {
+    flip(oldVal as string | number, newVal as string | number)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+$frontColor: v-bind('props.frontColor');
+$backColor: v-bind('props.backColor');
+$radius: v-bind('`${props.radius}px`');
+$width: v-bind('`${props.width}px`');
+$height: v-bind('`${props.height}px`');
+$perspective: v-bind('`${props.height * 2}px`');
+$speed: v-bind('`${props.duration / 1000}s`');
+$shadowColor: #000000;
+$lineColor: #4a9ef8;
+
+// #region 动画效果
+@keyframes frontFlipDown {
+  0% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(-180deg);
+  }
+}
+@keyframes backFlipDown {
+  0% {
+    transform: perspective($perspective) rotateX(180deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+}
+@keyframes frontFlipUp {
+  0% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(180deg);
+  }
+}
+@keyframes backFlipUp {
+  0% {
+    transform: perspective($perspective) rotateX(-180deg);
+  }
+  100% {
+    transform: perspective($perspective) rotateX(0deg);
+  }
+}
+// #endregion
+
+.M-Flipper {
+  display: inline-block;
+  position: relative;
+  width: $width;
+  height: $height;
+  line-height: $height;
+  border: solid 1px $backColor;
+  border-radius: $radius;
+  background: $frontColor;
+  font-size: $width;
+  color: $frontColor;
+  box-shadow: 0 0 6px rgba($color: $shadowColor, $alpha: 0.5); // 阴影部分
+  text-align: center;
+  // font-family: 'Helvetica Neue';
+
+  .digital:before,
+  .digital:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: $backColor;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .digital.front:before,
+  .digital.front:after {
+    content: attr(data-front) !important;
+  }
+  .digital.back:before,
+  .digital.back:after {
+    content: attr(data-back) !important;
+  }
+  .digital:before {
+    top: 0;
+    bottom: 50%;
+    border-radius: $radius $radius 0 0;
+    border-bottom: solid 1px rgba($color: $lineColor, $alpha: 0.3); // 中间线颜色
+  }
+  .digital:after {
+    top: 50%;
+    bottom: 0;
+    border-radius: 0 0 $radius $radius;
+    line-height: 0;
+  }
+  /*向下翻*/
+  &.down .front:before {
+    z-index: 3;
+  }
+  &.down .back:after {
+    z-index: 2;
+    transform-origin: 50% 0%;
+    transform: perspective($perspective) rotateX(180deg);
+  }
+  &.down .front:after,
+  &.down .back:before {
+    z-index: 1;
+  }
+  &.down.go .front:before {
+    transform-origin: 50% 100%;
+    animation: frontFlipDown $speed ease-in-out both;
+    box-shadow: 0 -2px 6px rgba($color: $lineColor, $alpha: 0.3);
+    backface-visibility: hidden;
+  }
+  &.down.go .back:after {
+    animation: backFlipDown $speed ease-in-out both;
+  }
+  /*向上翻*/
+  &.up .front:after {
+    z-index: 3;
+  }
+  &.up .back:before {
+    z-index: 2;
+    transform-origin: 50% 100%;
+    transform: perspective($perspective) rotateX(-180deg);
+  }
+  &.up .front:before,
+  &.up .back:after {
+    z-index: 1;
+  }
+  &.up.go .front:after {
+    transform-origin: 50% 0;
+    animation: frontFlipUp $speed ease-in-out both;
+    box-shadow: 0 2px 6px rgba($color: $lineColor, $alpha: 0.3);
+    backface-visibility: hidden;
+  }
+  &.up.go .back:before {
+    animation: backFlipUp $speed ease-in-out both;
+  }
+}
+</style>

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

@@ -0,0 +1,47 @@
+import { PublicConfigClass } from '@/packages/public'
+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'
+
+type STYLE = '时分秒' | '冒号'
+
+export interface OptionType {
+  dataset: number
+  useEndDate: boolean
+  endDate: number
+  style: STYLE
+  showDay: boolean
+  flipperBgColor: string
+  flipperTextColor: string
+  flipperWidth: number
+  flipperHeight: number
+  flipperRadius: number
+  flipperGap: number
+  flipperType: FlipType
+  flipperSpeed: number
+}
+
+export const option: OptionType = {
+  dataset: 10 * 60, // 10分钟
+  useEndDate: false,
+  endDate: new Date().getTime(), // 当前时间
+  style: '时分秒',
+  showDay: false,
+  flipperBgColor: '#16293E',
+  flipperTextColor: '#4A9EF8FF',
+  flipperWidth: 30,
+  flipperHeight: 50,
+  flipperRadius: 5,
+  flipperGap: 10,
+  flipperType: 'down',
+  flipperSpeed: 450
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CountDownConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 100, zIndex: -1 }
+  public chartConfig = cloneDeep(CountDownConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,98 @@
+<template>
+  <collapse-item name="倒计时" expanded>
+    <setting-item-box name="内容" alone>
+      <setting-item name="计时(秒)">
+        <n-input-number
+          v-model:value="optionData.dataset"
+          size="small"
+          :min="0"
+          :disabled="optionData.useEndDate"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="结束日期">
+        <n-date-picker v-model:value="optionData.endDate" type="datetime" :disabled="!optionData.useEndDate" />
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.useEndDate" size="small">使用固定结束日期</n-checkbox>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="样式">
+      <setting-item name="风格">
+        <n-select
+          v-model:value="optionData.style"
+          size="small"
+          :options="[
+            { label: '时分秒', value: '时分秒' },
+            { label: '冒号', value: '冒号' }
+          ]"
+        ></n-select>
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.showDay" size="small">显示天</n-checkbox>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="翻牌" expanded>
+    <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/CountDown/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/countdown.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const CountDownConfig: ConfigType = {
+  key: 'CountDown',
+  chartKey: 'VCountDown',
+  conKey: 'VCCountDown',
+  title: '倒计时',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <n-countdown
+      ref="countdownRef"
+      :duration="totalDuration"
+      :render="renderCountdown"
+      :active="countdownActive"
+      v-show="false"
+    />
+    <n-space class="go-decorates-more-countdown" :size="flipperGap" align="center" justify="center">
+      <template v-if="showDay">
+        <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 daysFlipperData"
+          :key="index"
+          class="go-d-block"
+        />
+        <div v-if="style === '时分秒'">天</div>
+        <div v-else>:</div>
+      </template>
+      <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 hoursFlipperData"
+        :key="index"
+        class="go-d-block"
+      />
+      <div v-if="style === '时分秒'">时</div>
+      <div v-else>:</div>
+      <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 minutesFlipperData"
+        :key="index"
+        class="go-d-block"
+      />
+      <div v-if="style === '时分秒'">分</div>
+      <div v-else>:</div>
+      <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 secondsFlipperData"
+        :key="index"
+        class="go-d-block"
+      />
+      <div v-if="style === '时分秒'">秒</div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, watch, ref, onMounted } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { Flipper } from '@/components/Flipper'
+import { OptionType } from './config'
+import { CountdownInst, CountdownProps } from 'naive-ui/es/countdown/src/Countdown'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  dataset,
+  useEndDate,
+  endDate,
+  style,
+  showDay,
+  flipperBgColor,
+  flipperTextColor,
+  flipperWidth,
+  flipperHeight,
+  flipperRadius,
+  flipperGap,
+  flipperType,
+  flipperSpeed
+} = toRefs(props.chartConfig.option as OptionType)
+
+const countdownRef = ref<CountdownInst | null>()
+const countdownActive = ref(false)
+
+const totalDuration = ref(dataset.value * 1000)
+const daysFlipperData = ref<string[] | number[]>([])
+const hoursFlipperData = ref<string[] | number[]>([])
+const minutesFlipperData = ref<string[] | number[]>([])
+const secondsFlipperData = ref<string[] | number[]>([])
+const getFlipperData = (val: string | number) => {
+  const len = Math.max(val.toString().length, 2)
+  return val
+    .toString()
+    .padStart(len, '0') // 左侧填充|右对齐
+    .split('') // 转数组
+}
+const updateDatasetHandler = (hours: number, minutes: number, seconds: number) => {
+  const days = Math.floor(hours / 24)
+  daysFlipperData.value = getFlipperData(days)
+  hoursFlipperData.value = getFlipperData(showDay.value ? hours % 24 : hours)
+  minutesFlipperData.value = getFlipperData(minutes)
+  secondsFlipperData.value = getFlipperData(seconds)
+}
+
+const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds }) => {
+  updateDatasetHandler(hours, minutes, seconds)
+}
+
+const updateTotalDuration = () => {
+  countdownActive.value = false
+  totalDuration.value = useEndDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000
+  countdownRef.value?.reset && countdownRef.value?.reset()
+  countdownActive.value = true
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.chartConfig.option.endDate,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.chartConfig.option.useEndDate,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  updateTotalDuration()
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('decorates-more-countdown') {
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+  font-size: v-bind('`${flipperWidth}px`');
+  line-height: v-bind('`${flipperHeight}px`');
+  color: v-bind('flipperTextColor');
+  user-select: none;
+}
+</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: 3234,
+  flipperLength: 6,
+  flipperBgColor: '#16293E',
+  flipperTextColor: '#4A9EF8FF',
+  flipperWidth: 30,
+  flipperHeight: 50,
+  flipperRadius: 5,
+  flipperGap: 10,
+  flipperType: 'down',
+  flipperSpeed: 450
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlipperNumberConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 100, 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/flipper-number.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: '数字翻牌',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,81 @@
+<template>
+  <n-space class="go-decorates-flipper-number" :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"
+      class="go-d-block"
+    />
+  </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-flipper-number') {
+  width: v-bind('`${w}px`');
+  height: v-bind('`${h}px`');
+}
+</style>

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

@@ -1,12 +1,12 @@
 import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const NumberConfig: ConfigType = {
   key: 'Number',
   chartKey: 'VNumber',
   conKey: 'VCNumber',
-  title: '数字翻牌',
+  title: '数字计数',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.DECORATES,

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

@@ -1,5 +1,7 @@
 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, NumberConfig, ClockConfig]
+export default [NumberConfig, FlipperNumberConfig, TimeCommonConfig, CountDownConfig, ClockConfig]

src/plugins/naive.ts

@@ -1,4 +1,4 @@
-import type { App } from 'vue';
+import type { App } from 'vue'
 import {
   create,
   NA,
@@ -8,6 +8,7 @@ import {
   NH3,
   NH4,
   NCode,
+  NCountdown,
   NText,
   NTime,
   NEllipsis,
@@ -98,7 +99,7 @@ import {
   NWatermark,
   NEmpty,
   NCollapseTransition
-} from 'naive-ui';
+} from 'naive-ui'
 
 const naive = create({
   components: [
@@ -109,6 +110,7 @@ const naive = create({
     NH3,
     NH4,
     NCode,
+    NCountdown,
     NText,
     NTime,
     NEllipsis,
@@ -199,9 +201,9 @@ const naive = create({
     NWatermark,
     NEmpty,
     NCollapseTransition
-  ],
-});
+  ]
+})
 
 export function setupNaive(app: App<Element>) {
-  app.use(naive);
+  app.use(naive)
 }