feat：新增数字滚动

src/packages/components/Decorates/Borders/Border01/config.vue

@@ -24,7 +24,7 @@
   </CollapseItem>
 
   <CollapseItem name="动画" :expanded="true">
-    <SettingItemBox name="速度">
+    <SettingItemBox name="速度(s)">
       <SettingItem>
         <n-input-number
           v-model:value="optionData.dur"

src/packages/components/Decorates/Borders/Border08/config.vue

@@ -1,23 +1,4 @@
 <template>
-  <CollapseItem name="动画" :expanded="true">
-    <SettingItemBox name="设置">
-      <SettingItem name="速度">
-        <n-input-number
-          v-model:value="optionData.dur"
-          size="small"
-          :step="0.5"
-          :min="0.5"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem>
-        <n-space>
-          <n-text>开启反向</n-text>
-          <n-switch size="small" v-model:value="optionData.reverse" />
-        </n-space>
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
-  
   <CollapseItem name="边框" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"
@@ -41,7 +22,24 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="设置">
+      <SettingItem name="速度(s)">
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch size="small" v-model:value="optionData.reverse" />
+          <n-text>开启反向</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
   <CollapseItem name="背景" :expanded="true">
     <SettingItemBox name="颜色">
       <SettingItem>
@@ -60,14 +58,14 @@ import { PropType } from 'vue'
 import {
   CollapseItem,
   SettingItemBox,
-  SettingItem
+  SettingItem,
 } from '@/components/ChartItemSetting/index'
 import { option } from './config'
 
 const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
-    required: true
-  }
+    required: true,
+  },
 })
 </script>

src/packages/components/Decorates/Decorates/Decorates01/config.vue

@@ -38,7 +38,7 @@
   </CollapseItem>
 
   <CollapseItem name="动画" :expanded="true">
-    <SettingItemBox name="速度">
+    <SettingItemBox name="速度(s)">
       <SettingItem>
         <n-input-number
           v-model:value="optionData.dur"

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

@@ -0,0 +1,23 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { NumberConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  from: 50000,
+  to: 100000,
+  dur: 3,
+  showSeparator: true,
+  numberSize: 24,
+  numberColor: '#4a9ef8',
+  prefixText: '￥',
+  prefixColor: '#4a9ef8',
+  suffixText: '元',
+  suffixColor: '#4a9ef8',
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = NumberConfig.key
+  public chartConfig = cloneDeep(NumberConfig)
+  public option = option
+}

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

@@ -1,6 +1,96 @@
 <template>
+  <CollapseItem name="内容" :expanded="true">
+    <SettingItemBox name="数值">
+      <SettingItem name="起始值">
+        <n-input-number
+          v-model:value="optionData.from"
+          size="small"
+          :min="0"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="终点值">
+        <n-input-number
+          v-model:value="optionData.to"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.numberSize"
+          size="small"
+          :min="1"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showSeparator" size="small" />
+          <n-text>展示分割符</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="数值">
+      <SettingItem name="前缀">
+        <n-input v-model:value="optionData.prefixText" size="small"></n-input>
+      </SettingItem>
+      <SettingItem name="后缀">
+        <n-input v-model:value="optionData.suffixText" size="small"></n-input>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="颜色">
+      <SettingItem name="前缀">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.suffixColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="后缀">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.suffixColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="数值">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.numberColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="速度(s)">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
 </script>

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

@@ -1,4 +1,3 @@
-import Configuration from './config.vue'
 import image from '@/assets/images/chart/decorates/number.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'

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

@@ -1,13 +1,55 @@
 <template>
-  <div>
-    天气
-  </div>
+  <n-statistic tabular-nums class="go-decorates-number">
+    <template #prefix>
+      <span :style="`color:${prefixColor};font-size:${numberSize}px`">
+        {{ prefixText }}
+      </span>
+    </template>
+    <span :style="`color:${numberColor};font-size:${numberSize}px`">
+      <n-number-animation
+        :from="from"
+        :to="to"
+        :duration="dur * 1000"
+        :show-separator="showSeparator"
+      ></n-number-animation>
+    </span>
+    <template #suffix>
+      <span :style="`color:${suffixColor};font-size:${numberSize}px`">
+        {{ suffixText }}
+      </span>
+    </template>
+  </n-statistic>
 </template>
 
 <script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
 
-</script>
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
 
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  dur,
+  showSeparator,
+  prefixText,
+  prefixColor,
+  suffixText,
+  suffixColor,
+  from,
+  to,
+  numberSize,
+  numberColor,
+} = toRefs(props.chartConfig.option)
+</script>
 <style lang="scss" scoped>
-
-</style>
+@include go('decorates-number') {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/plugins/naive.ts

@@ -50,6 +50,7 @@ import {
   NElement,
   NTag,
   NNotificationProvider,
+  NNumberAnimation,
   NProgress,
   NDatePicker,
   NGrid,
@@ -85,6 +86,7 @@ import {
   NTimePicker,
   NBackTop,
   NSkeleton,
+  NStatistic,
   NCarousel,
   NScrollbar,
   NPopselect,
@@ -145,6 +147,7 @@ const naive = create({
     NElement,
     NTag,
     NNotificationProvider,
+    NNumberAnimation,
     NProgress,
     NDatePicker,
     NGrid,
@@ -180,6 +183,7 @@ const naive = create({
     NTimePicker,
     NBackTop,
     NSkeleton,
+    NStatistic,
     NCarousel,
     NScrollbar,
     NPopselect,