feat: 加入缩略图，完成倒计时功能

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

@@ -5,8 +5,14 @@ import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 import { FlipType } from '@/components/Flipper'
 
+type STYLE = '时分秒' | '冒号'
+
 export interface OptionType {
-  dataset: number | string
+  dataset: number
+  fixedDate: boolean
+  endDate: number
+  style: STYLE
+  showDay: boolean
   flipperLength: number
   flipperBgColor: string
   flipperTextColor: string
@@ -19,10 +25,14 @@ export interface OptionType {
 }
 
 export const option: OptionType = {
-  dataset: 203234,
+  dataset: 10 * 60, // 10分钟
+  fixedDate: false,
+  endDate: new Date().getTime(), // 当前时间
+  style: '时分秒',
+  showDay: true,
   flipperLength: 6,
-  flipperBgColor: '#ee6600',
+  flipperBgColor: '#253E4E',
-  flipperTextColor: '#FFFFFFFF',
+  flipperTextColor: '#7CFFB2FF',
   flipperWidth: 60,
   flipperHeight: 100,
   flipperRadius: 10,
@@ -33,7 +43,7 @@ export const option: OptionType = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = CountDownConfig.key
-  public attr = { ...chartInitConfig, w: 500, h: 200, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 950, h: 160, zIndex: -1 }
   public chartConfig = cloneDeep(CountDownConfig)
   public option = cloneDeep(option)
 }

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

@@ -1,14 +1,24 @@
 <template>
-  <collapse-item name="翻牌" :expanded="true">
+  <collapse-item name="倒计时" :expanded="true">
-    <setting-item-box name="内容">
+    <setting-item-box name="内容" alone>
-      <setting-item name="初始值">
+      <setting-item name="计时(秒)">
-        <n-input-number v-model:value="optionData.dataset" size="small" :min="0"></n-input-number>
+        <n-input-number
+          v-model:value="optionData.dataset"
+          size="small"
+          :min="0"
+          :disabled="optionData.fixedDate"
+        ></n-input-number>
       </setting-item>
-      <setting-item name="个数">
+      <setting-item name="结束日期">
-        <n-input-number v-model:value="optionData.flipperLength" size="small" :min="1"></n-input-number>
+        <n-date-picker v-model:value="optionData.endDate" type="datetime" :disabled="!optionData.fixedDate" />
+      </setting-item>
+      <setting-item>
+        <n-checkbox v-model:checked="optionData.fixedDate" size="small">使用固定日期</n-checkbox>
       </setting-item>
     </setting-item-box>
+  </collapse-item>
 
+  <collapse-item name="翻牌" :expanded="true">
     <setting-item-box name="样式">
       <setting-item name="宽度">
         <n-input-number v-model:value="optionData.flipperWidth" size="small" :min="1"></n-input-number>
@@ -33,6 +43,19 @@
       <setting-item name="字体色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.flipperTextColor"></n-color-picker>
       </setting-item>
+      <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>
 
     <setting-item-box name="行为">
@@ -46,7 +69,7 @@
           ]"
         ></n-select>
       </setting-item>
-      <setting-item name="翻牌速度">
+      <setting-item name="翻牌速度(毫秒)">
         <n-input-number
           v-model:value="optionData.flipperSpeed"
           size="small"

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

@@ -1,4 +1,4 @@
-import image from '@/assets/images/chart/decorates/time.png'
+import image from '@/assets/images/chart/decorates/countdown.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 

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

@@ -1,6 +1,13 @@
 <template>
-  <!-- <n-countdown :duration="50000" :active="true" /> -->
+  <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"
@@ -10,19 +17,66 @@
         :radius="flipperRadius"
         :flip-type="flipperType"
         :duration="flipperSpeed"
-      v-for="(item, index) in flipperData"
+        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>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, watch, ref } from 'vue'
+import { PropType, toRefs, watch, ref, onMounted } 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'
+import { CountdownInst, CountdownProps } from 'naive-ui/es/countdown/src/Countdown'
 
 const props = defineProps({
   chartConfig: {
@@ -34,7 +88,11 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 
 const {
-  flipperLength,
+  dataset,
+  fixedDate,
+  endDate,
+  style,
+  showDay,
   flipperBgColor,
   flipperTextColor,
   flipperWidth,
@@ -45,31 +103,70 @@ const {
   flipperSpeed
 } = toRefs(props.chartConfig.option as OptionType)
 
-const flipperData = ref<string[] | number[]>([])
+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(flipperLength.value, '0') // 左侧填充|右对齐
+    .padStart(len, '0') // 左侧填充|右对齐
     .split('') // 转数组
-    .slice(flipperLength.value * -1) // 从右向左取
 }
-const updateDatasetHandler = (newVal: string | number) => {
+const updateDatasetHandler = (hours: number, minutes: number, seconds: number) => {
-  flipperData.value = getFlipperData(newVal)
+  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 = fixedDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000
+  countdownRef.value?.reset && countdownRef.value?.reset()
+  countdownActive.value = true
 }
 
 watch(
-  () => props.chartConfig.option,
+  () => props.chartConfig.option.dataset,
-  newVal => {
+  () => {
-    updateDatasetHandler((newVal as OptionType).dataset)
+    updateTotalDuration()
   },
   {
-    immediate: true,
+    immediate: true
-    deep: true
+  }
+)
+watch(
+  () => props.chartConfig.option.endDate,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.chartConfig.option.fixedDate,
+  () => {
+    updateTotalDuration()
+  },
+  {
+    immediate: true
   }
 )
 
-useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number) => {
+onMounted(() => {
-  updateDatasetHandler(newVal)
+  updateTotalDuration()
 })
 </script>
 
@@ -77,5 +174,8 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newVal: string | number
 @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');
 }
 </style>

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

@@ -19,7 +19,7 @@ export interface OptionType {
 }
 
 export const option: OptionType = {
-  dataset: 203234,
+  dataset: 3234,
   flipperLength: 6,
   flipperBgColor: '#253E4E',
   flipperTextColor: '#7CFFB2FF',
@@ -33,7 +33,7 @@ export const option: OptionType = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = FlipperNumberConfig.key
-  public attr = { ...chartInitConfig, w: 500, h: 200, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 500, h: 160, zIndex: -1 }
   public chartConfig = cloneDeep(FlipperNumberConfig)
   public option = cloneDeep(option)
 }

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

@@ -4,7 +4,7 @@
       <setting-item name="初始值">
         <n-input-number v-model:value="optionData.dataset" size="small" :min="0"></n-input-number>
       </setting-item>
-      <setting-item name="个数">
+      <setting-item name="翻牌个数">
         <n-input-number v-model:value="optionData.flipperLength" size="small" :min="1"></n-input-number>
       </setting-item>
     </setting-item-box>
@@ -46,7 +46,7 @@
           ]"
         ></n-select>
       </setting-item>
-      <setting-item name="翻牌速度">
+      <setting-item name="翻牌速度(毫秒)">
         <n-input-number
           v-model:value="optionData.flipperSpeed"
           size="small"

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

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

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,