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

Merge pull request !67 from dodu/dev-countdown

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]