feat: update statistic style and docs (#1329)

Tencent · May 10, 2023 · a11f804 · a11f804
1 parent 9ccaf18
commit a11f804
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 54 deletions.
diff --git a/docs/web/api/statistic-US.md b/docs/web/api/statistic-US.md
@@ -0,0 +1,47 @@
+---
+title: Statistic
+description: Highlight and display a set of numeric or descriptive statistical data.
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### 基础用法
+
+Use when you need to highlight a set of numeric or descriptive statistical data.
+
+{{ base }}
+
+### 趋势不同的组件
+
+Set the trend state of the component through trend and control the trend display position through trendPlacement.
+
+{{ trend }}
+
+### 颜色
+
+The color style provides five default TDesign style color values, which can also be customized.
+
+{{ color }}
+### 前缀后缀/自定义
+
+Customize through the prefix and suffix slots.
+
+{{ slot }}
+
+### 数值动画
+
+Configure the initial value and duration of the animation through animation. Use the animationStart attribute to control when the animation starts. If there are special requirements, you can also use ref to get the instance and call start for control.
+
+{{ animation }}
+
+### 加载中
+
+Control the loading state of the numeric value through loading.
+
+{{ loading }}
+
+### 组合使用
+
+{{ combination }}
+
diff --git a/docs/web/api/statistic.md b/docs/web/api/statistic.md
@@ -1,5 +1,5 @@
 ---
-title: Statistic 数值显示
+title: Statistic 统计数值
 description: 突出展示某个或某组数字、带描述的统计类数据。
 isComponent: true
 usage: { title: '', description: '' }
@@ -12,16 +12,27 @@ spline: data
 
 {{ base }}
 
+### 趋势不同的组件
+
+通过 `trend` 设置组件的趋势状态，配合 `trendPlacement` 控制趋势展示的位置。
+
+{{ trend }}
+
+### 颜色
+
+颜色风格默认提供 TDesign 风格的五种颜色值，也可以使用自定义色值。
+
+{{ color }}
 ### 前缀后缀/自定义
 
-通过 prefix 和 suffix 插槽可以添加前后缀。通过 styleValue 可以自定义数值显示的样式。
+通过 prefix 和 suffix 插槽自定义。
 
 {{ slot }}
 
 ### 数值动画
 
-通过 `animatio`  可以开启数值动画。使用 `start`属性可以控制动画开始时刻。
-如果有特殊需求时也可以通过ref获取实例，调用`startUp`进行控制。
+通过 `animatio`  配置动画的初始值和持续时间。使用 `animationStart`属性可以控制动画开始时刻。
+如果有特殊需求时也可以通过ref获取实例，调用`start`进行控制。
 
 {{ animation }}
 
@@ -31,8 +42,7 @@ spline: data
 
 {{ loading }}
 
-### 计时组件
+### 组合使用
 
-倒计时组件。可以通过 `now` 来传入 `Date.now()`，用于修复初始值显示的小误差问题。
+{{ combination }}
 
-{{ countdown }}
diff --git a/style/web/components/statistic/_index.less b/style/web/components/statistic/_index.less
@@ -11,40 +11,45 @@
 
   &-title {
     font-size: @statistic-title-font-size;
+    font-weight: @statistic-title-font-weight;
     margin-bottom: @statistic-title-margin-bottom;
-    color: @statistic-title-text-color;
   }
 
   &-content {
-    .@{statistic-cls}-value {
-      white-space: nowrap;
-      font-size: @statistic-integer-font-size;
-      font-weight: @statistic-value-font-weight;
-      color: @statistic-value-text-color;
-
-      &-integer {
-        white-space: nowrap;
-      }
-
-      &-decimal {
-        font-size: @statistic-decimal-font-size;
-        display: inline-block;
-      }
-
-      &-suffix {
-        font-size: @statistic-suffix-font-size;
-        margin-left: @statistic-suffix-margin-left;
-      }
-
-      &-prefix {
-        font-size: @statistic-value-icon-size;
-        margin-right: @statistic-prefix-margin-right;
-      }
+    display: inline-block;
+    line-height: 36px;
+    font-weight: @statistic-value-font-weight;
+    color: @statistic-value-text-color;
+    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+    font-family: "TCloud Number";
+    text-align: left;
+    white-space: nowrap;
+
+    &-value {
+      font-size: @statistic-value-font-size;
+    }
+
+    &-unit {
+      font-size: @statistic-unit-font-size;
+      margin-left: @statistic-unit-margin-left;
+    }
+
+    &-suffix {
+      display: inline-flex;
+      align-items: center;
+      font-size: @statistic-suffix-font-size;
+      margin-left: @statistic-suffix-margin-left;
+    }
+
+    &-prefix {
+      display: inline-flex;
+      align-items: center;
+      font-size: @statistic-prefix-font-size;
+      margin-right: @statistic-prefix-margin-right;
     }
   }
 
   &-extra {
     margin-top: @statistic-extra-margin-top;
-    color: @statistic-extra-text-color;
   }
 }
diff --git a/style/web/components/statistic/_var.less b/style/web/components/statistic/_var.less
@@ -1,30 +1,24 @@
-// 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
-
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
-// 如：@button-line-bg-color-hover
-// 如：@button-line-height-s
 @import "../../base.less";
 
 @statistic-cls: ~"@{prefix}-statistic";
 
+@statistic-text-color: @text-color-secondary;
+
 @statistic-title-font-size: @font-title-medium;
-@statistic-title-margin-bottom: @spacer-1;
-@statistic-extra-margin-top: @spacer-1;
-@statistic-integer-font-size: 26px;
-@statistic-decimal-font-size: @statistic-integer-font-size;
+@statistic-title-font-weight: 400;
+@statistic-title-margin-bottom: @spacer-s;
+
+@statistic-value-font-size: 28px;
 @statistic-value-font-weight: 500;
 @statistic-value-text-color: @text-color-primary;
-@statistic-text-color: @text-color-secondary;
-@statistic-title-text-color: @text-color-secondary;
-@statistic-extra-text-color: @text-color-secondary;
-@statistic-value-icon-size: @font-size-base;
-@statistic-suffix-font-size: @font-size-base;
+
+@statistic-unit-font-size: 14px;
+@statistic-unit-margin-left: @spacer-s;
+
+@statistic-prefix-font-size: 22px;
 @statistic-prefix-margin-right: @spacer-s;
+
+@statistic-suffix-font-size: 22px;
 @statistic-suffix-margin-left: @spacer-s;
+
+@statistic-extra-margin-top: @spacer-1;