chore: 调整倒计时组件

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

@@ -15,24 +15,17 @@ export const FontWeightObject = {
 }
 
 export const option = {
-  // 数据说明
-  timeSize: 24,
-  timeLineHeight: 50,
-  timeTextIndent: 2,
-  timeColor: '#E6F7FF',
-  fontWeight: 'normal',
-
-  //阴影
-  showShadow: true,
-  hShadow: 0,
-  vShadow: 0,
-  blurShadow: 8,
-  colorShadow: '#0075ff'
+  flipperBgColor: '#ee6600FF',
+  flipperTextColor: '#336600FF',
+  flipperWidth: 60,
+  flipperHeight: 100,
+  flipperRadius: 10,
+  flipperSpeed: 600
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = CountDownConfig.key
-  public attr = { ...chartInitConfig, w: 300, h: 200, zIndex: -1 }
+  public attr = { ...chartInitConfig, w: 500, h: 200, zIndex: -1 }
   public chartConfig = cloneDeep(CountDownConfig)
   public option = cloneDeep(option)
 }

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

@@ -1,53 +1,40 @@
 <template>
-  <CollapseItem name="内容" :expanded="true">
-    <SettingItemBox name="字体">
-      <SettingItem name="大小">
-        <n-input-number v-model:value="optionData.timeSize" size="small" :min="1"></n-input-number>
-      </SettingItem>
-      <SettingItem name="粗细">
-        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="间距">
-      <SettingItem name="字距">
-        <n-input-number v-model:value="optionData.timeTextIndent" size="small" :min="1"></n-input-number>
-      </SettingItem>
-      <SettingItem name="行距">
-        <n-input-number v-model:value="optionData.timeLineHeight" size="small" :min="1"></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
+  <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>
+      </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>
 
-    <SettingItemBox name="颜色">
-      <SettingItem name="时间">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.timeColor"></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-    <SettingItemBox name="阴影">
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.showShadow" size="small" />
-          <n-text>展示阴影</n-text>
-        </n-space>
-      </SettingItem>
-      <SettingItem name="x">
-        <n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
-      ></SettingItem>
-      <SettingItem name="y">
-        <n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
-      ></SettingItem>
-      <SettingItem name="模糊">
-        <n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
-      ></SettingItem>
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
-      ></SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+    <setting-item-box name="样式">
+      <setting-item name="背景色">
+        <n-color-picker size="small" :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>
+      <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 { option, FontWeightEnum, FontWeightObject } from './config'
+import { option } from './config'
 
 const props = defineProps({
   optionData: {
@@ -55,14 +42,4 @@ const props = defineProps({
     required: true
   }
 })
-const fontWeightOptions = [
-  {
-    label: FontWeightEnum.NORMAL,
-    value: FontWeightObject[FontWeightEnum.NORMAL]
-  },
-  {
-    label: FontWeightEnum.BOLD,
-    value: FontWeightObject[FontWeightEnum.BOLD]
-  }
-]
 </script>

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

@@ -1,9 +1,73 @@
 <template>
   <div class="go-decorates-more-countdown">
-    <div>剩余时间</div>
     <n-countdown :duration="50000" :active="true" />
-    <flipper :front-text="9" ref="flipperRef" />
-    <div>。</div>
+    <n-space :gap="10">
+      <flipper
+        :front-text="9"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :duration="flipperSpeed"
+        ref="flipperRef"
+      />
+      <flipper
+        :front-text="9"
+        :back-text="8"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :duration="flipperSpeed"
+        ref="flipperRef2"
+      />
+      <flipper
+        :front-text="8"
+        :back-text="7"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :duration="flipperSpeed"
+        ref="flipperRef3"
+      />
+      <flipper
+        :front-text="7"
+        :back-text="7"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :duration="flipperSpeed"
+        ref="flipperRef4"
+      />
+      <flipper
+        :front-text="6"
+        :back-text="5"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :duration="flipperSpeed"
+        ref="flipperRef5"
+      />
+      <flipper
+        :front-text="5"
+        :back-text="4"
+        :width="flipperWidth"
+        :height="flipperHeight"
+        :front-color="flipperTextColor"
+        :back-color="flipperBgColor"
+        :radius="flipperRadius"
+        :duration="flipperSpeed"
+        ref="flipperRef6"
+      />
+    </n-space>
   </div>
 </template>
 
@@ -24,18 +88,9 @@ let boxShadow = ref('none')
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-let {
-  timeColor,
-  timeSize,
-  timeLineHeight,
-  timeTextIndent,
-  fontWeight,
-  showShadow,
-  hShadow,
-  vShadow,
-  blurShadow,
-  colorShadow
-} = toRefs(props.chartConfig.option)
+let { flipperBgColor, flipperTextColor, flipperWidth, flipperHeight, flipperRadius, flipperSpeed } = toRefs(
+  props.chartConfig.option
+)
 
 watch(
   props.chartConfig.option,
@@ -58,7 +113,7 @@ let interval = 0
 onMounted(() => {
   const interval = window.setInterval(() => {
     COUNT--
-    if (COUNT === 0) window.clearInterval(interval)
+    if (COUNT <= 1) window.clearInterval(interval)
     const flipperCON: any = flipperRef.value
     flipperCON?.flipDown(COUNT, COUNT - 1)
   }, 1000)
@@ -73,5 +128,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore)
 @include go('decorates-more-countdown') {
   width: v-bind('`${w}px`');
   height: v-bind('`${h}px`');
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 </style>