first commit

uni_modules/tdesign-uniapp/components/rate/README.en-US.md

@@ -0,0 +1,50 @@
+:: BASE_DOC ::
+
+## API
+
+### Rate Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+allow-half | Boolean | false | \- | N
+color | String / Array | '#ED7B2F' | Typescript：`string \| Array<string>` | N
+count | Number | 5 | \- | N
+disabled | Boolean | undefined | \- | N
+gap | String / Number | 8 | \- | N
+icon | String / Array | - | Typescript：`string \| string[]` | N
+icon-prefix | String | undefined | \- | N
+placement | String | top | options: top / bottom / '' | N
+show-text | Boolean | false | \- | N
+size | String / Number | '24px' | \- | N
+texts | Array | [] | Typescript：`Array<string>` | N
+value | Number | 0 | `v-model:value` is supported | N
+default-value | Number | 0 | uncontrolled property | N
+variant | String | outline | options: outline/filled | N
+
+### Rate Events
+
+name | params | description
+-- | -- | --
+change | `(context: { value: number })` | \-
+
+### Rate External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-icon | \-
+t-class-text | \-
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | -
+--td-rate-selected-color | @warning-color | -
+--td-rate-text-active-color | @text-color-primary | -
+--td-rate-text-active-font-weight | 600 | -
+--td-rate-text-color | @text-color-disabled | -
+--td-rate-text-font-size | @font-size-m | -
+--td-rate-unselected-color | @component-border | -

uni_modules/tdesign-uniapp/components/rate/README.md

@@ -0,0 +1,107 @@
+---
+title: Rate 评分
+description: 用于对某行为/事物进行打分。
+spline: form
+isComponent: true
+---
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TRate from '@tdesign/uniapp/rate/rate.vue';
+```
+
+### 组件类型
+
+实心评分
+
+{{ base }}
+
+自定义评分
+
+{{ custom }}
+
+自定义评分数量
+
+{{ count }}
+
+带描述评分
+
+{{ show-text }}
+
+### 组件状态
+
+{{ action }}
+
+### 组件样式
+
+评分大小
+
+{{ size }}
+
+设置评分颜色
+
+{{ color }}
+
+### 特殊样式
+
+竖向带描述评分
+
+{{ special }}
+
+自定义图片前缀
+
+{{iconPrefix}}
+
+
+## API
+
+### Rate Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+allow-half | Boolean | false | 是否允许半选 | N
+color | String / Array | '#ED7B2F' | 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']。TS 类型：`string \| Array<string>` | N
+count | Number | 5 | 评分的数量 | N
+disabled | Boolean | undefined | 是否禁用评分 | N
+gap | String / Number | 8 | 评分图标的间距 | N
+icon | String / Array | - | 自定义评分图标，[选中图标，未选中图标]。TS 类型：`string \| string[]` | N
+icon-prefix | String | undefined | 定义图标前缀 | N
+placement | String | top | 选择评分弹框的位置，值为空字符表示不显示评分弹框。可选项：top / bottom / '' | N
+show-text | Boolean | false | 是否显示对应的辅助文字 | N
+size | String / Number | '24px' | 评分图标的大小 | N
+texts | Array | [] | 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']。TS 类型：`Array<string>` | N
+value | Number | 0 | 选择评分的值。支持语法糖 `v-model:value` | N
+default-value | Number | 0 | 选择评分的值。非受控属性 | N
+variant | String | outline | 已废弃。形状类型，有描边类型和填充类型两种。可选项：outline/filled | N
+
+### Rate Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(context: { value: number })` | 评分数改变时触发
+
+### Rate External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-icon | 图标样式类
+t-class-text | 文本样式类
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-rate-icon-scale | 1.33 | -
+--td-rate-selected-color | @warning-color | -
+--td-rate-text-active-color | @text-color-primary | -
+--td-rate-text-active-font-weight | 600 | -
+--td-rate-text-color | @text-color-disabled | -
+--td-rate-text-font-size | @font-size-m | -
+--td-rate-unselected-color | @component-border | -

uni_modules/tdesign-uniapp/components/rate/computed.js

@@ -0,0 +1,66 @@
+export default {
+  getText(texts, val, defaultTexts) {
+    if (!texts.length) {
+      texts = defaultTexts;
+    }
+    const curVal = Math.floor(val - 1);
+    return texts[curVal] || '未评分';
+  },
+
+  getIconName(defaultValue, value, index, icon) {
+    const curVal = value >= 0 ? value : defaultValue;
+    let name = ['star-filled', 'star-filled'];
+
+    if (icon) {
+      name = Array.isArray(icon) ? icon : [icon, icon];
+    }
+
+    return name[curVal >= index + 1 ? 0 : 1];
+  },
+
+  getIconClass(classPrefix, defaultValue, value, index, allowHalf, disabled, scaleIndex) {
+    const curVal = value >= 0 ? value : defaultValue;
+    const className = [];
+    if (curVal >= index + 1) {
+      className.push(`${classPrefix}--selected`);
+      if (disabled) {
+        className.push(`${classPrefix}--disabled`);
+      }
+      if (scaleIndex === index + 1) {
+        className.push(`${classPrefix}--current`);
+      }
+    } else if (allowHalf && curVal - index > 0) {
+      className.push(`${classPrefix}--selected-half`);
+      if (scaleIndex === index + 1) {
+        className.push(`${classPrefix}--current`);
+      }
+      if (disabled) {
+        className.push(`${classPrefix}--disabled-half`);
+      }
+    } else {
+      className.push(`${classPrefix}--unselected`);
+    }
+    return className.join(' ');
+  },
+
+  ceil(value) {
+    return Math.ceil(value);
+  },
+
+  getColor(color) {
+    if (Array.isArray(color) && color.length === 2) {
+      return `;--td-rate-selected-color: ${color[0]}; --td-rate-unselected-color: ${color[1]}`;
+    }
+
+    if (typeof color === 'string') {
+      return `;--td-rate-selected-color: ${color}`;
+    }
+
+    return '';
+  },
+
+  regSize(val) {
+    const value = `${val}`;
+    return value.indexOf('px') ? value : `${value}px`;
+  },
+};

uni_modules/tdesign-uniapp/components/rate/props.ts

@@ -0,0 +1,85 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdRateProps } from './type';
+export default {
+  /** 是否允许半选 */
+  allowHalf: Boolean,
+  /** 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB'] */
+  color: {
+    type: [String, Array],
+    default: '#ED7B2F' as TdRateProps['color'],
+  },
+  /** 评分的数量 */
+  count: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否禁用评分 */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 评分图标的间距 */
+  gap: {
+    type: [String, Number],
+    default: 8 as TdRateProps['gap'],
+  },
+  /** 自定义评分图标，[选中图标，未选中图标] */
+  icon: {
+    type: [String, Array],
+  },
+  /** 定义图标前缀 */
+  iconPrefix: {
+    type: String,
+    default: undefined,
+  },
+  /** 选择评分弹框的位置，值为空字符表示不显示评分弹框 */
+  placement: {
+    type: String,
+    default: 'top' as TdRateProps['placement'],
+    validator(val: TdRateProps['placement']): boolean {
+      if (!val) return true;
+      return ['top', 'bottom', ''].includes(val);
+    },
+  },
+  /** 是否显示对应的辅助文字 */
+  showText: Boolean,
+  /** 评分图标的大小 */
+  size: {
+    type: [String, Number],
+    default: '24px' as TdRateProps['size'],
+  },
+  /** 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分'] */
+  texts: {
+    type: Array,
+    default: (): TdRateProps['texts'] => [],
+  },
+  /** 选择评分的值 */
+  value: {
+    type: Number,
+    default: 0,
+  },
+  /** 选择评分的值，非受控属性 */
+  defaultValue: {
+    type: Number,
+    default: 0,
+  },
+  /** 已废弃。形状类型，有描边类型和填充类型两种 */
+  variant: {
+    type: String,
+    default: 'outline' as TdRateProps['variant'],
+    validator(val: TdRateProps['variant']): boolean {
+      if (!val) return true;
+      return ['outline', 'filled'].includes(val);
+    },
+  },
+  /** 评分数改变时触发 */
+  onChange: {
+    type: Function,
+    default: () => ({}),
+  },
+};

uni_modules/tdesign-uniapp/components/rate/rate.css

@@ -0,0 +1,81 @@
+.t-rate {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.t-rate__wrapper {
+  line-height: 1em;
+  display: inline-flex;
+}
+:deep(.t-rate__icon) {
+  display: block;
+  line-height: 1em;
+  width: 1em;
+  transition: transform 0.3s ease;
+}
+:deep(.t-rate__icon)--current {
+  transform: scale(var(--td-rate-icon-scale, 1.33));
+}
+:deep(.t-rate__icon)--selected {
+  color: var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
+}
+:deep(.t-rate__icon)--selected-half {
+  color: transparent;
+  background: linear-gradient(to right, var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #e37318))) 0%, var(--td-rate-selected-color, var(--td-warning-color, var(--td-warning-color-5, #e37318))) 50%, var(--td-rate-unselected-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))) 51%, var(--td-rate-unselected-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc))) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+:deep(.t-rate__icon)--unselected {
+  color: var(--td-rate-unselected-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-rate__text {
+  font-size: var(--td-rate-text-font-size, var(--td-font-size-m, 32rpx));
+  color: var(--td-rate-text-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26))));
+  margin-left: 32rpx;
+  vertical-align: middle;
+}
+.t-rate__text--active {
+  color: var(--td-rate-text-active-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
+  font-weight: var(--td-rate-text-active-font-weight, 600);
+}
+.t-rate__text--sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+.t-rate__tips {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  bottom: calc(100% + 16rpx);
+  padding: 8rpx;
+  border-radius: 12rpx;
+  box-shadow: var(--td-shadow-1, 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  transform: translateX(-50%);
+}
+.t-rate__tips--bottom {
+  top: calc(100% + 16rpx);
+  bottom: auto;
+}
+.t-rate__tips-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 64rpx;
+  border-radius: 6rpx;
+}
+.t-rate__tips-item--active {
+  background-color: var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7));
+}
+.t-rate__tips-text {
+  text-align: center;
+  font: var(--td-font-body-medium, 28rpx / 44rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
+}

uni_modules/tdesign-uniapp/components/rate/rate.vue

@@ -0,0 +1,276 @@
+<template>
+  <view
+    :class="classPrefix"
+    :style="tools._style([customStyle])"
+  >
+    <view
+      :class="classPrefix + '__wrapper ' + tClass"
+      :style="'font-size:' + utils.regSize(size)"
+      aria-role="slider"
+      :aria-valuemax="count"
+      :aria-valuemin="0"
+      :aria-valuenow="dataValue"
+      :aria-valuetext="utils.getText(texts, dataValue, defaultTexts)"
+      @touchstart="parseEventDynamicCode($event, !disabled ? 'onTouchStart' : '')"
+      @touchmove="parseEventDynamicCode($event, !disabled ? 'onTouchMove' : '')"
+      @click="onTap"
+      @touchend="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+      @touchcancel="parseEventDynamicCode($event, !disabled ? 'onTouchEnd' : '')"
+    >
+      <t-icon
+        v-for="(item, index) in count"
+        :key="index"
+        :t-class="classPrefix + '__icon ' + utils.getIconClass(classPrefix + '__icon', defaultValue, dataValue, index, allowHalf, disabled, scaleIndex) + ' ' + tClassIcon"
+        :custom-style="'margin-right: ' + (count - index > 1 ? tools.addUnit(gap) : 0) + '; ' + utils.getColor(color)"
+        :name="utils.getIconName(defaultValue, dataValue, index, icon)"
+        :size="size"
+        :prefix="iconPrefix"
+      />
+    </view>
+    <text
+      v-if="showText"
+      :class="tools.cls(classPrefix + '__text', [['active', dataValue > 0]]) + ' ' + tClassText"
+      :aria-hidden="true"
+    >
+      {{ utils.getText(texts, dataValue, defaultTexts) }}
+    </text>
+    <text
+      v-if="isVisibleToScreenReader"
+      :class="
+        tools.cls(classPrefix + '__text', [
+          ['active', dataValue > 0],
+          ['sr-only', isVisibleToScreenReader]
+        ]) +
+          ' ' +
+          tClassText
+      "
+      aria-role="alert"
+      aria-live="assertive"
+    >
+      {{ dataValue + '星' }} {{ utils.getText(texts, dataValue, defaultTexts) }}
+    </text>
+    <!-- TODO -->
+    <view
+      v-if="tipsVisible && placement"
+      :class="tools.cls(classPrefix + '__tips', [placement])"
+      :style="'left: ' + tipsLeft + 'px'"
+      :aria-hidden="true"
+    >
+      <block v-if="actionType == 'tap'">
+        <view
+          v-if="allowHalf"
+          :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) - 0.5 == dataValue]])"
+          :data-value="utils.ceil(dataValue) - 0.5"
+          @click="onSelect"
+        >
+          <t-icon
+            :t-class="classPrefix + '__icon ' + classPrefix + '__icon--selected-half'"
+            :name="utils.getIconName(defaultValue, dataValue, 0, icon)"
+            :size="size"
+            :custom-style="utils.getColor(color)"
+          />
+          <view :class="classPrefix + '__tips-text'">
+            {{ utils.ceil(dataValue) - 0.5 }}
+          </view>
+        </view>
+        <view
+          :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue]])"
+          :data-value="utils.ceil(dataValue)"
+          @click="onSelect"
+        >
+          <t-icon
+            :t-class="tools.cls(classPrefix + '__icon', ['selected'])"
+            :name="utils.getIconName(defaultValue, 0, 0, icon)"
+            :size="size"
+            :custom-style="utils.getColor(color)"
+          />
+          <view :class="classPrefix + '__tips-text'">
+            {{ utils.ceil(dataValue) }}
+          </view>
+        </view>
+      </block>
+      <view
+        v-else
+        :class="tools.cls(classPrefix + '__tips-item', [['active', utils.ceil(dataValue) == dataValue && actionType == 'tap']])"
+        :data-value="utils.ceil(dataValue)"
+        @click="onSelect"
+      >
+        <t-icon
+          :t-class="
+            tools.cls(classPrefix + '__icon', [
+              ['selected', utils.ceil(dataValue) == dataValue],
+              ['selected-half', utils.ceil(dataValue) != dataValue]
+            ])
+          "
+          :name="utils.getIconName(defaultValue, 0, 0, icon)"
+          :size="size"
+          :custom-style="utils.getColor(color)"
+        />
+        <view :class="classPrefix + '__tips-text'">
+          {{ dataValue }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TIcon from '../icon/icon';
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { unitConvert, getRect, coalesce } from '../common/utils';
+import tools from '../common/utils.wxs';
+import utils from './computed.js';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+
+const name = `${prefix}-rate`;
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'value',
+      event: 'change',
+    },
+  ],
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-icon`,
+    `${prefix}-class-text`,
+  ],
+  components: {
+    TIcon,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      defaultTexts: ['极差', '失望', '一般', '满意', '惊喜'],
+      tipsVisible: false,
+      tipsLeft: 0,
+      actionType: '',
+      scaleIndex: -1,
+      isVisibleToScreenReader: false,
+
+      tools,
+      utils,
+      dataValue: coalesce(this.value, this.defaultValue),
+    };
+  },
+  watch: {
+    value: {
+      handler(v) {
+        this.dataValue = v;
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    parseEventDynamicCode,
+    onTouch(e, eventType) {
+      const { count, allowHalf, gap, dataValue: currentValue, size } = this;
+      let touch = e.changedTouches?.[0];
+      // #ifdef MP-ALIPAY
+      if (eventType === 'tap') {
+        touch = e.target;
+      }
+      // #endif
+      const margin = unitConvert(gap);
+      getRect(this, `.${name}__wrapper`).then((rect) => {
+        const { width, left } = rect;
+        const starWidth = (width - (count - 1) * margin) / count;
+        const offsetX = touch.pageX - left;
+        const num = (offsetX + margin) / (starWidth + margin);
+        const remainder = num % 1;
+        const integral = num - remainder;
+        let value = remainder <= 0.5 && allowHalf ? integral + 0.5 : integral + 1;
+
+        if (value > count) {
+          value = count;
+        } else if (value < 0) {
+          value = 0;
+        }
+
+        const tipsLeft = Math.ceil(value - 1) * (unitConvert(gap) + unitConvert(size)) + unitConvert(size) * 0.5;
+        this.tipsVisible = true;
+        this.actionType = eventType;
+        this.scaleIndex = Math.ceil(value);
+        this.tipsLeft = Math.max(tipsLeft, 0);
+
+        if (value !== currentValue) {
+          this.innerTrigger(value);
+        }
+
+        if (this.touchEnd) {
+          this.hideTips();
+        }
+      });
+    },
+    innerTrigger(value) {
+      this._trigger('change', { value });
+      if (this._selfControlled) {
+        this.currentValue = value;
+      }
+    },
+    onTap(e) {
+      const { disabled } = this;
+      if (disabled) return;
+      this.onTouch(e, 'tap');
+    },
+    onTouchStart() {
+      this.touchEnd = false;
+    },
+    onTouchMove(e) {
+      this.onTouch(e, 'move');
+      this.showAlertText();
+    },
+    onTouchEnd() {
+      this.touchEnd = true;
+      this.hideTips();
+    },
+    hideTips() {
+      if (this.actionType === 'move') {
+        this.tipsVisible = false;
+        this.scaleIndex = -1;
+      }
+    },
+    onSelect(e) {
+      const { value } = e.currentTarget.dataset;
+      const { actionType } = this;
+
+      if (actionType === 'move') return;
+
+      this.innerTrigger(value);
+
+      setTimeout(() => {
+        this.tipsVisible = false;
+        this.scaleIndex = -1;
+      }, 300);
+    },
+    // 旁白模式: 变更数值时显示告警文案
+    showAlertText() {
+      if (this.isVisibleToScreenReader === true) return;
+      this.isVisibleToScreenReader = true;
+
+      setTimeout(() => {
+        this.isVisibleToScreenReader = false;
+      }, 2e3);
+    },
+  },
+});
+
+</script>
+<style scoped>
+@import './rate.css';
+</style>

uni_modules/tdesign-uniapp/components/rate/type.ts

@@ -0,0 +1,79 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdRateProps {
+  /**
+   * 是否允许半选
+   * @default false
+   */
+  allowHalf?: boolean;
+  /**
+   * 评分图标的颜色，样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色，示例：[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色，[选中颜色，未选中颜色]。示例：['#ED7B2F', '#E3E6EB']
+   * @default '#ED7B2F'
+   */
+  color?: string | Array<string>;
+  /**
+   * 评分的数量
+   * @default 5
+   */
+  count?: number;
+  /**
+   * 是否禁用评分
+   */
+  disabled?: boolean;
+  /**
+   * 评分图标的间距
+   * @default 8
+   */
+  gap?: string | number;
+  /**
+   * 自定义评分图标，[选中图标，未选中图标]
+   */
+  icon?: string | string[];
+  /**
+   * 定义图标前缀
+   */
+  iconPrefix?: string;
+  /**
+   * 选择评分弹框的位置，值为空字符表示不显示评分弹框
+   * @default top
+   */
+  placement?: 'top' | 'bottom' | '';
+  /**
+   * 是否显示对应的辅助文字
+   * @default false
+   */
+  showText?: boolean;
+  /**
+   * 评分图标的大小
+   * @default '24px'
+   */
+  size?: string | number;
+  /**
+   * 评分等级对应的辅助文字。组件内置默认值为：['极差', '失望', '一般', '满意', '惊喜']。自定义值示例：['1分', '2分', '3分', '4分', '5分']
+   * @default []
+   */
+  texts?: Array<string>;
+  /**
+   * 选择评分的值
+   * @default 0
+   */
+  value?: number;
+  /**
+   * 选择评分的值，非受控属性
+   * @default 0
+   */
+  defaultValue?: number;
+  /**
+   * 已废弃。形状类型，有描边类型和填充类型两种
+   * @default outline
+   */
+  variant?: 'outline' | 'filled';
+  /**
+   * 评分数改变时触发
+   */
+  onChange?: (context: { value: number }) => void;
+}