fix(statistic): [statistic] when precision is not set, the current value is displayed by default (#2683)

* fix(statistic): [statistic] when precision is not set, the current value is displayed by default

* fix(statistic): [statistic] review code

* fix: modify e2e error

Author: James-9696

examples/sites/demos/apis/statistic.js

@@ -7,7 +7,7 @@ export default {
       props: [
         {
           name: 'value',
-          type: 'number',
+          type: 'number | string',
           defaultValue: '0',
           desc: {
             'zh-CN': '数字显示内容',
@@ -20,7 +20,7 @@ export default {
         {
           name: 'precision',
           type: 'number',
-          defaultValue: '0',
+          defaultValue: '',
           desc: {
             'zh-CN': '精度值',
             'en-US': 'Take precision value'

examples/sites/demos/pc/app/statistic/basic-usage-composition-api.vue

@@ -8,6 +8,9 @@
         <tiny-col :span="8">
           <tiny-statistic :value="num" :precision="2"></tiny-statistic>
         </tiny-col>
+        <tiny-col :span="8">
+          <tiny-statistic :value="num"></tiny-statistic>
+        </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>

examples/sites/demos/pc/app/statistic/basic-usage.vue

@@ -8,6 +8,9 @@
         <tiny-col :span="8">
           <tiny-statistic :value="num" :precision="2"></tiny-statistic>
         </tiny-col>
+        <tiny-col :span="8">
+          <tiny-statistic :value="num"></tiny-statistic>
+        </tiny-col>
       </tiny-row>
     </tiny-layout>
   </div>

examples/sites/demos/pc/app/statistic/statistic-slot.spec.ts

@@ -3,9 +3,10 @@ import { test, expect } from '@playwright/test'
 test('插槽用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('statistic#statistic-slot')
+  const desc = page.locator('.tiny-statistic__description')
   await page
     .locator('div')
     .filter({ hasText: /^存储总量已使用容量\(GB\)10,010,258GB$/ })
     .first()
-  await page.getByText('306,526存储平均值').click()
+  await expect(desc.first()).toHaveCSS('font-weight', '500')
 })

examples/sites/demos/pc/app/statistic/statistic-style.spec.ts

@@ -7,6 +7,5 @@ test('样式用法', async ({ page }) => {
     .locator('div')
     .filter({ hasText: /^进行中306,526$/ })
     .first()
-  await page.getByText('306,526失败').click()
   await expect(page.getByText(/^进行中306,526$/).first()).toHaveClass(/tiny-statistic/)
 })

packages/renderless/src/statistic/index.ts

@@ -15,10 +15,15 @@ export const getIntegerAndDecimal =
     if (!isNumber(props.value)) {
       return props.value
     }
-    let displayValue = props.value ? String(props.value).split('.') : ''
+    let displayValue = String(props.value).split('.')
     let integer = displayValue[0]?.replace(/\B(?=(\d{3})+(?!\d))/g, props.groupSeparator)
-    let decimal = displayValue[1]?.padEnd(props.precision, '0').slice(0, props.precision > 0 ? props.precision : 0)
-    // 处理当数字为0的情况
+    let decimal = displayValue[1]?.padEnd(props.precision, '0')
+
+    // 当精度为0且大于0，进行精度截取
+    if (props.precision >= 0) {
+      decimal = decimal?.slice(0, props.precision > 0 ? props.precision : 0)
+    }
+    // 处理当没有显示值，数字默认为0
     if (!displayValue) {
       integer = '0'
     }

packages/vue/src/statistic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-statistic",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "description": "",
   "main": "lib/index.js",
   "module": "index.ts",

packages/vue/src/statistic/src/index.ts

@@ -11,13 +11,10 @@ export const statisticProps = {
     type: Object,
     default: () => $constants
   },
-  precision: {
-    type: Number,
-    default: 0
-  },
+  precision: Number,
   formatter: Function,
   value: {
-    type: Number,
+    type: [Number, String],
     default: 0
   },
   prefix: String,