feat: 增加倒计时组件(测试中)

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

@@ -0,0 +1,38 @@
+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'
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗'
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold'
+}
+
+export const option = {
+  // 数据说明
+  timeSize: 24,
+  timeLineHeight: 50,
+  timeTextIndent: 2,
+  timeColor: '#E6F7FF',
+  fontWeight: 'normal',
+
+  //阴影
+  showShadow: true,
+  hShadow: 0,
+  vShadow: 0,
+  blurShadow: 8,
+  colorShadow: '#0075ff'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = CountDownConfig.key
+  public attr = { ...chartInitConfig, w: 300, h: 200, zIndex: -1 }
+  public chartConfig = cloneDeep(CountDownConfig)
+  public option = cloneDeep(option)
+}

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

@@ -0,0 +1,68 @@
+<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>
+
+    <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>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, FontWeightEnum, FontWeightObject } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    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.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 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,77 @@
+<template>
+  <div class="go-decorates-more-countdown">
+    <div>剩余时间</div>
+    <n-countdown :duration="50000" :active="true" />
+    <flipper :front-text="9" ref="flipperRef" />
+    <div>。</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, watch, onMounted, onUnmounted } 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'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+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)
+
+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'
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const flipperRef = ref(null)
+
+let COUNT = 9
+let interval = 0
+onMounted(() => {
+  const interval = window.setInterval(() => {
+    COUNT--
+    if (COUNT === 0) window.clearInterval(interval)
+    const flipperCON: any = flipperRef.value
+    flipperCON?.flipDown(COUNT, COUNT - 1)
+  }, 1000)
+})
+onUnmounted(() => {
+  window.clearInterval(interval)
+})
+useChartDataFetch(props.chartConfig, useChartEditStore)
+</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

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