refactor(statistic): label slot & fix docs

src/statistic/demos/enUS/basic.demo.md

@@ -9,11 +9,11 @@
           <md-save />
         </n-icon>
       </template>
-      <template #suffix> / 100 </template>
+      <template #suffix>/ 100</template>
     </n-statistic>
   </n-col>
   <n-col :span="12">
-    <n-statistic label="Active Users" value="1,234,123"> </n-statistic>
+    <n-statistic label="Active Users">1,234,123</n-statistic>
   </n-col>
 </n-row>
 ```

src/statistic/demos/enUS/index.demo-entry.md

@@ -17,7 +17,9 @@ basic
 
 ## Slots
 
-| Name   | Parameters | Description |
-| ------ | ---------- | ----------- |
-| prefix | `()`       |             |
-| suffix | `()`       |             |
+| Name    | Parameters | Description   |
+| ------- | ---------- | ------------- |
+| default | `()`       | Value slot.   |
+| label   | `()`       | Label slot.   |
+| prefix  | `()`       | Value prefix. |
+| suffix  | `()`       | Valut suffix. |

src/statistic/demos/zhCN/basic.demo.md

@@ -9,11 +9,11 @@
           <md-save />
         </n-icon>
       </template>
-      <template #suffix> / 100 </template>
+      <template #suffix>/ 100</template>
     </n-statistic>
   </n-col>
   <n-col :span="12">
-    <n-statistic label="活跃用户" value="1,234,123"> </n-statistic>
+    <n-statistic label="活跃用户">1,234,123</n-statistic>
   </n-col>
 </n-row>
 ```

src/statistic/demos/zhCN/index.demo-entry.md

@@ -17,7 +17,9 @@ basic
 
 ## Slots
 
-| 名称   | 参数 | 说明 |
-| ------ | ---- | ---- |
-| prefix | `()` |      |
-| suffix | `()` |      |
+| 名称    | 参数 | 说明     |
+| ------- | ---- | -------- |
+| default | `()` | 值       |
+| label   | `()` | 标签     |
+| prefix  | `()` | 值的前缀 |
+| suffix  | `()` | 值的后缀 |

src/statistic/src/Statistic.tsx

@@ -68,7 +68,7 @@ export default defineComponent({
     const { $slots } = this
     return (
       <div class="n-statistic" style={this.cssVars as CSSProperties}>
-        <div class="n-statistic__label">{this.label}</div>
+        <div class="n-statistic__label">{this.label || $slots.label?.()}</div>
         <div class="n-statistic-value">
           {$slots.prefix ? (
             <span class="n-statistic-value__prefix">

src/statistic/src/styles/index.cssr.ts

@@ -21,8 +21,8 @@ export default cB('statistic', [
     font-weight: var(--value-font-weight);
   `, [
     cE('prefix', `
-      margin: 0 4px;
-      font-size: 18px;
+      margin: 0 4px 0 0;
+      font-size: 24px;
       transition: .3s color var(--bezier);
       color: var(--value-prefix-text-color);
     `, [
@@ -36,7 +36,8 @@ export default cB('statistic', [
       color: var(--value-text-color);
     `),
     cE('suffix', `
-      font-size: 18px;
+      margin: 0 0 0 4px;
+      font-size: 24px;
       transition: .3s color var(--bezier);
       color: var(--value-suffix-text-color);
     `, [

src/statistic/styles/dark.ts

@@ -5,15 +5,15 @@ const statisticDark: StatisticTheme = {
   name: 'Statistic',
   common: commonDark,
   self (vars) {
-    const { textColor2, textColor1, fontWeightStrong, fontSize } = vars
+    const { textColor2, textColor3, fontSize } = vars
     return {
       labelFontSize: fontSize,
-      labelFontWeight: fontWeightStrong,
-      valueFontWeight: fontWeightStrong,
-      labelTextColor: textColor2,
-      valuePrefixTextColor: textColor1,
-      valueSuffixTextColor: textColor1,
-      valueTextColor: textColor1
+      labelFontWeight: '400',
+      valueFontWeight: '400',
+      labelTextColor: textColor3,
+      valuePrefixTextColor: textColor2,
+      valueSuffixTextColor: textColor2,
+      valueTextColor: textColor2
     }
   }
 }

src/statistic/styles/light.ts

@@ -3,15 +3,15 @@ import type { ThemeCommonVars } from '../../_styles/common'
 import { Theme } from '../../_mixins'
 
 const self = (vars: ThemeCommonVars) => {
-  const { textColor2, textColor1, fontWeightStrong, fontSize } = vars
+  const { textColor2, textColor3, fontSize } = vars
   return {
     labelFontSize: fontSize,
-    labelFontWeight: fontWeightStrong,
-    valueFontWeight: fontWeightStrong,
-    labelTextColor: textColor2,
-    valuePrefixTextColor: textColor1,
-    valueSuffixTextColor: textColor1,
-    valueTextColor: textColor1
+    labelFontWeight: '400',
+    valueFontWeight: '400',
+    labelTextColor: textColor3,
+    valuePrefixTextColor: textColor2,
+    valueSuffixTextColor: textColor2,
+    valueTextColor: textColor2
   }
 }