docs(rate): update code sample

src/rate/README.md

@@ -16,72 +16,67 @@ isComponent: true
   }
 }
 ```
+### 主题定制
+CSS 变量名|说明
+--|--
+--td-rate-selected-color | 选中态评分颜色
+--td-rate-unselected-color | 未选中态评分颜色
+--td-rate-text-color | 辅助文字颜色
+--td-rate-disabled-color | 禁用评分颜色
 
 ## 代码演示
 
-### 基础评分
-
 <img src="https://tdesign.gtimg.com/miniprogram/readme/rate.png" width="375px" height="50%">
 
-```html
-<!-- 实心评分，设置属性：variant-->
-<t-rate defaultValue="{{value}}" variant="filled"></t-rate>
+### 实心评分
 
-<!-- 空心评分，设置属性：variant-->
-<t-rate defaultValue="{{value}}" variant="outline"  bind:change="changeValue"></t-rate>
+{{ base }}
 
-<!-- 自定义评分数量，设置属性：count-->
-<t-rate defaultValue="{{value}}" variant="outline" count="{{6}}"></t-rate>
+### 空心评分
 
-<!-- 半星评分，设置属性：allowHalf -->
-<t-rate defaultValue="{{value}}" variant="filled" allowHalf></t-rate>
+{{ un-filled }}
 
-<!-- 带描述评分，设置属性：showText-->
-<t-rate defaultValue="{{value}}" variant="outline" showText></t-rate>
+### 自定义评分数量
 
-<!-- 自定义带描述评分，设置属性：texts -->
-<t-rate defaultValue="{{value}}" variant="outline" showText texts="{{texts}}"></t-rate>
+{{ count }}
 
-<!-- 禁用评分，设置属性：disabled -->
-<t-rate defaultValue="{{value}}" variant="filled" disabled></t-rate>
+### 半星评分
 
-<!-- 设置评分颜色，设置属性： color-->
-<t-rate defaultValue="{{value}}" variant="filled" color="#FFC51C,#DDDDDD"></t-rate>
-```
+{{ allow-half}}
 
-### 受控用法
+### 带描述评分
 
-```html
-<t-rate value="{{value}}" variant="filled" bind:change="onChange"></t-rate>
-```
+{{ show-text }}
+
+### 禁用评分
+
+{{ disabled }}
+
+### 设置评分颜色
+
+{{ aolor }}
+
+### 评价规格
+
+{{ size }}
 
-```js
-Page({
-  data: {
-    value: 3
-  },
-  onChange(e) {
-    const { value } = e.detail;
-    this.setData({ value })
-  }
-})
-```
 ## API
 ### Rate Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 allow-half | Boolean | false | 是否允许半选 | N
-color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string | Array<string>` | N
 count | Number | 5 | 评分的数量 | N
 disabled | Boolean | false | 是否禁用评分 | N
-gap | Number | 6 | 评分图标的间距 | N
+gap | Number | 8 | 评分图标的间距，默认单位为 `px`, 示例：`8` | N
 show-text | Boolean | false | 是否显示对应的辅助文字 | N
-size | String | - | 评分图标的大小，示例：`20` | N
+size | String | 20 | 评分图标的大小，默认单位为 `px`, 示例：`20` | N
 texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
 value | Number | 0 | 选择评分的值 | N
 default-value | Number | undefined | 选择评分的值。非受控属性 | N
 variant | String | outline | 形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+external-classes | Array         | -      | 组件类名，分别用于设置 组件外层类名、评分图标类名、辅助文字类名。`['t-class', 't-class-icon', 't-class-text']` | N
+
 
 ### Rate Events
 

src/rate/_example/allow-half/index.js

@@ -0,0 +1,12 @@
+Page({
+  data: {
+    value: 3.5,
+  },
+
+  onChange(e) {
+    const { value } = e.detail;
+    this.setData({
+      value,
+    });
+  },
+});

src/rate/_example/allow-half/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/allow-half/index.wxml

@@ -0,0 +1,5 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">半星评价</view>
+  <!-- 半星评分，设置属性：allowHalf -->
+  <t-rate value="{{value}}" variant="filled" allowHalf="{{true}}" bind:change="onChange" />
+</view>

src/rate/_example/allow-half/index.wxss

@@ -0,0 +1,23 @@
+.demo-rate {
+  background-color: #fff;
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}

src/rate/_example/base/index.js

@@ -0,0 +1,12 @@
+Page({
+  data: {
+    value: 3,
+  },
+
+  onChange(e) {
+    const { value } = e.detail;
+    this.setData({
+      value,
+    });
+  },
+});

src/rate/_example/base/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/base/index.wxml

@@ -0,0 +1,5 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">请点击评分</view>
+  <!-- 实心评分，设置属性：variant-->
+  <t-rate value="{{value}}" variant="filled" bind:change="onChange" />
+</view>

src/rate/_example/base/index.wxss

@@ -0,0 +1,23 @@
+.demo-rate {
+  background-color: #fff;
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}

src/rate/_example/color/index.js

@@ -0,0 +1,13 @@
+Page({
+  data: {
+    value: [3, 2.5],
+  },
+
+  onChange(e) {
+    const { index } = e.currentTarget.dataset;
+    const { value } = e.detail;
+    this.setData({
+      [`value[${index}]`]: value,
+    });
+  },
+});

src/rate/_example/color/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/color/index.wxml

@@ -0,0 +1,16 @@
+<view class="demo-rate custom-color">
+  <view class="demo-rate__title">空心评分</view>
+  <!-- 设置评分颜色，设置属性： color-->
+  <t-rate data-index="{{0}}" value="{{value[0]}}" color="#FFC51C,#bbbbbb" bind:change="onChange" />
+</view>
+<view class="demo-rate custom-color">
+  <view class="demo-rate__title">实心评分</view>
+  <t-rate
+    data-index="{{1}}"
+    value="{{value[1]}}"
+    allowHalf
+    variant="filled"
+    color="#FFC51C,#bbbbbb"
+    bind:change="onChange"
+  />
+</view>

src/rate/_example/color/index.wxss

@@ -0,0 +1,28 @@
+.custom-color {
+  --td-rate-selected-color: #f96102;
+  --td-rate-unselected-color: #bbbbbb;
+}
+
+.demo-rate {
+  background-color: #fff;
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}

src/rate/_example/count/index.js

@@ -0,0 +1,12 @@
+Page({
+  data: {
+    value: 3,
+  },
+
+  onChange(e) {
+    const { value } = e.detail;
+    this.setData({
+      value,
+    });
+  },
+});

src/rate/_example/count/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/count/index.wxml

@@ -0,0 +1,5 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">自定义数量</view>
+  <!-- 自定义评分数量，设置属性：count-->
+  <t-rate value="{{value}}" variant="filled" count="{{4}}" bind:change="onChange" />
+</view>

src/rate/_example/count/index.wxss

@@ -0,0 +1,23 @@
+.demo-rate {
+  background-color: #fff;
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}

src/rate/_example/disabled/index.js

@@ -0,0 +1,12 @@
+Page({
+  data: {
+    value: 3,
+  },
+
+  onChange(e) {
+    const { value } = e.detail;
+    this.setData({
+      value,
+    });
+  },
+});

src/rate/_example/disabled/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-rate": "tdesign-miniprogram/rate/rate"
+  }
+}

src/rate/_example/disabled/index.wxml

@@ -0,0 +1,5 @@
+<view class="demo-rate">
+  <view class="demo-rate__title">仅展示</view>
+  <!-- 禁用评分，设置属性：disabled -->
+  <t-rate value="{{value}}" variant="filled" disabled bind:change="onChange" showText="{{true}}" />
+</view>

src/rate/_example/disabled/index.wxss

@@ -0,0 +1,23 @@
+.demo-rate {
+  background-color: #fff;
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 32rpx;
+  border-bottom: solid 1rpx #f0f0f0;
+  border-top: solid 1rpx #f0f0f0;
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.demo-rate__title {
+  width: 200rpx;
+}
+
+.demo-rate__transparent {
+  background-color: transparent;
+  padding-left: 32rpx;
+  border: 0;
+}