fix: fix some bug

README.md

@@ -16,11 +16,11 @@ vue-pure-admin is a free and open source middle and back-end template. Using the
 Click to log in without password
 
 <p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
 </p>
 
 ### Use Gitpod

README.zh-CN.md

@@ -16,11 +16,11 @@ vue-pure-admin 是一个免费开源的中后台模版。使用了最新的`vue3
 点击免密登录
 
 <p align="center">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
-    <img alt="VbenAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31d4e268a9554389abb2b691a165f983~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9c81c5348fb2476097dd847e3b050168~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13749b799727449cbdcb2383f6ea1eb4~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6745a79321cc40aba4de02aaf11ba4f2~tplv-k3u1fbpfcp-watermark.image">
+    <img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cab5f2aa2b58483f8a2cf40fb3aafdb7~tplv-k3u1fbpfcp-watermark.image">
 </p>
 
 ### 使用 Gitpod

src/components/countTo/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue"
+import countTo from "./src/countTo"
+
+export const CountTo = Object.assign(countTo, {
+  install(app: App) {
+    app.component(countTo.name, countTo)
+  }
+})
+
+export default CountTo

src/components/countTo/src/countTo.tsx

@@ -0,0 +1,173 @@
+import {
+  defineComponent,
+  reactive,
+  computed,
+  watch,
+  onMounted,
+  unref,
+  toRef
+} from "vue"
+import { countToProps } from "./props"
+import { isNumber } from "/@/utils/is"
+
+export default defineComponent({
+  name: "CountTo",
+  props: countToProps,
+  emits: ["mounted", "callback"],
+  setup(props, { emit }) {
+    const state = reactive<{
+      localStartVal: number
+      printVal: number | null
+      displayValue: string
+      paused: boolean
+      localDuration: number | null
+      startTime: number | null
+      timestamp: number | null
+      rAF: any
+      remaining: number | null
+      color: any
+      fontSize: string
+    }>({
+      localStartVal: props.startVal,
+      displayValue: formatNumber(props.startVal),
+      printVal: null,
+      paused: false,
+      localDuration: props.duration,
+      startTime: null,
+      timestamp: null,
+      remaining: null,
+      rAF: null,
+      color: null,
+      fontSize: "16px"
+    })
+
+    const getCountDown = computed(() => {
+      return props.startVal > props.endVal
+    })
+
+    watch([() => props.startVal, () => props.endVal], () => {
+      if (props.autoplay) {
+        start()
+      }
+    })
+
+    function start() {
+      const { startVal, duration, color, fontSize } = props
+      state.localStartVal = startVal
+      state.startTime = null
+      state.localDuration = duration
+      state.paused = false
+      state.color = color
+      state.fontSize = fontSize
+      state.rAF = requestAnimationFrame(count)
+    }
+
+    function pauseResume() {
+      if (state.paused) {
+        resume()
+        state.paused = false
+      } else {
+        pause()
+        state.paused = true
+      }
+    }
+
+    function pause() {
+      cancelAnimationFrame(state.rAF)
+    }
+
+    function resume() {
+      state.startTime = null
+      state.localDuration = +(state.remaining as number)
+      state.localStartVal = +(state.printVal as number)
+      requestAnimationFrame(count)
+    }
+
+    function reset() {
+      state.startTime = null
+      cancelAnimationFrame(state.rAF)
+      state.displayValue = formatNumber(props.startVal)
+    }
+
+    function count(timestamp: number) {
+      const { useEasing, easingFn, endVal } = props
+      if (!state.startTime) state.startTime = timestamp
+      state.timestamp = timestamp
+      const progress = timestamp - state.startTime
+      state.remaining = (state.localDuration as number) - progress
+      if (useEasing) {
+        if (unref(getCountDown)) {
+          state.printVal =
+            state.localStartVal -
+            easingFn(
+              progress,
+              0,
+              state.localStartVal - endVal,
+              state.localDuration as number
+            )
+        } else {
+          state.printVal = easingFn(
+            progress,
+            state.localStartVal,
+            endVal - state.localStartVal,
+            state.localDuration as number
+          )
+        }
+      } else {
+        if (unref(getCountDown)) {
+          state.printVal =
+            state.localStartVal -
+            (state.localStartVal - endVal) *
+            (progress / (state.localDuration as number))
+        } else {
+          state.printVal =
+            state.localStartVal +
+            (endVal - state.localStartVal) *
+            (progress / (state.localDuration as number))
+        }
+      }
+      if (unref(getCountDown)) {
+        state.printVal = state.printVal < endVal ? endVal : state.printVal
+      } else {
+        state.printVal = state.printVal > endVal ? endVal : state.printVal
+      }
+      state.displayValue = formatNumber(state.printVal)
+      if (progress < (state.localDuration as number)) {
+        state.rAF = requestAnimationFrame(count)
+      } else {
+        emit("callback")
+      }
+    }
+
+    function formatNumber(num: number | string) {
+      const { decimals, decimal, separator, suffix, prefix } = props
+      num = Number(num).toFixed(decimals)
+      num += ""
+      const x = num.split(".")
+      let x1 = x[0]
+      const x2 = x.length > 1 ? decimal + x[1] : ""
+      const rgx = /(\d+)(\d{3})/
+      if (separator && !isNumber(separator)) {
+        while (rgx.test(x1)) {
+          x1 = x1.replace(rgx, "$1" + separator + "$2")
+        }
+      }
+      return prefix + x1 + x2 + suffix
+    }
+
+    onMounted(() => {
+      if (props.autoplay) {
+        start()
+      }
+      emit("mounted")
+    })
+
+    return () => (
+      <>
+        <span style={{
+          color: props.color, fontSize: props.fontSize
+        }}>{state.displayValue}</span>
+      </>
+    )
+  }
+})

src/components/countTo/src/index.vue → src/components/countTo/src/index.ts

@@ -1,5 +1,6 @@
+/**
 <template>
-  <span :style="{color: color}">{{ displayValue }}</span>
+  <span :style="{color: color,fontSize: fontSize}">{{ displayValue }}</span>
 </template>
 <script lang="ts">
 import {
@@ -29,6 +30,7 @@ export default defineComponent({
       rAF: any;
       remaining: number | null;
       color: any;
+      fontSize: string;
     }>({
       localStartVal: props.startVal,
       displayValue: formatNumber(props.startVal),
@@ -39,7 +41,8 @@ export default defineComponent({
       timestamp: null,
       remaining: null,
       rAF: null,
-      color: null
+      color: null,
+      fontSize: "16px"
     });
 
     onMounted(() => {
@@ -60,12 +63,13 @@ export default defineComponent({
     });
 
     function start() {
-      const { startVal, duration, color } = props;
+      const { startVal, duration, color, fontSize } = props;
       state.localStartVal = startVal;
       state.startTime = null;
       state.localDuration = duration;
       state.paused = false;
       state.color = color;
+      state.fontSize = fontSize;
       state.rAF = requestAnimationFrame(count);
     }
 
@@ -173,3 +177,4 @@ export default defineComponent({
   }
 });
 </script>
+*/

src/components/countTo/src/props.ts

@@ -1,4 +1,3 @@
-import { strict } from 'assert'
 import { PropType } from 'vue'
 import { propTypes } from '/@/utils/propTypes'
 export const countToProps = {
@@ -18,6 +17,10 @@ export const countToProps = {
     type: String as PropType<string>,
     require: false
   },
+  fontSize: {
+    type: String as PropType<string>,
+    require: false
+  },
   decimal: propTypes.string.def('.'),
   separator: propTypes.string.def(','),
   prefix: propTypes.string.def(''),

src/components/selector/src/selector.tsx

@@ -282,22 +282,22 @@ export default defineComponent({
             <tr>
               {
                 props.max.map((item, key) => {
-                return <td
-                  data-index={props.HsKey}
-                  ref={`hstd${props.HsKey}${key}`}
-                  class={`hs-select__item${key}`}
-                  onMousemove={() => setCurrentValue(key)}
-                  onMouseleave={() => resetCurrentValue(key)}
-                  onClick={() => selectValue(key, item)}
-                  style={{
-                    cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
-                  }}
-                  key={key}
-                >
-                  <div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
-                    <span>{item}</span>
-                  </div>
-                </td>
+                  return <td
+                    data-index={props.HsKey}
+                    ref={`hstd${props.HsKey}${key}`}
+                    class={`hs-select__item${key}`}
+                    onMousemove={() => setCurrentValue(key)}
+                    onMouseleave={() => resetCurrentValue(key)}
+                    onClick={() => selectValue(key, item)}
+                    style={{
+                      cursor: unref(rateDisabled) ? 'auto' : 'pointer', textAlign: 'center'
+                    }}
+                    key={key}
+                  >
+                    <div ref={`hsdiv${props.HsKey}${key}`} class={`hs-item ${[unref(classes)[key] + key]}`}>
+                      <span>{item}</span>
+                    </div>
+                  </td>
                 })
               }
             </tr>
@@ -305,5 +305,5 @@ export default defineComponent({
         </table>
       </>
     )
-  },
+  }
 })

src/views/components/countTo/index.vue

@@ -3,12 +3,26 @@
     <el-row :gutter="10">
       <el-col :span="10">
         <el-card shadow="always">
-          <CountTo prefix="$" :color="'#409EFF'" :startVal="1" :endVal="1000" />
+          <CountTo
+            prefix="$"
+            :duration="1000"
+            :color="'#409EFF'"
+            :fontSize="'60px'"
+            :startVal="1"
+            :endVal="1000"
+          />
         </el-card>
       </el-col>
       <el-col :span="10">
         <el-card shadow="always">
-          <CountTo prefix="$" :color="'green'" :startVal="1" :endVal="1500" />
+          <CountTo
+            prefix="$"
+            :duration="2000"
+            :color="'green'"
+            :fontSize="'60px'"
+            :startVal="1"
+            :endVal="2000"
+          />
         </el-card>
       </el-col>
     </el-row>
@@ -16,7 +30,7 @@
 </template>
 
 <script lang='ts'>
-import CountTo from "../../../components/countTo/src/index.vue";
+import CountTo from "/@/components/countTo";
 export default {
   components: {
     CountTo