fix(rate、address): themes variable extract

src/packages/address/index.scss

@@ -52,8 +52,8 @@
         height: 3px;
         background: linear-gradient(
           90deg,
-          rgba(245, 80, 58, 1) 0%,
-          rgba(250, 209, 203, 1) 100%
+          $primary-color 0%,
+          $primary-color-end 100%
         );
       }
     }
@@ -125,12 +125,7 @@
         line-height: 42px;
         margin: auto;
         text-align: center;
-        background: linear-gradient(
-          135deg,
-          rgba(242, 20, 12, 1) 0%,
-          rgba(242, 39, 12, 1) 70%,
-          rgba(242, 77, 12, 1) 100%
-        );
+        background: $button-primary-background-color;
         border-radius: 21px;
         font-size: 15px;
         color: rgba(255, 255, 255, 1);

src/packages/rate/demo.vue

@@ -26,9 +26,9 @@
     <nut-rate v-model="state.val6" readonly></nut-rate>
 
     <h2>绑定事件,{{ state.result }}</h2>
-    <nut-rate @change="onChange"></nut-rate>
+    <nut-rate v-model="state.val7" @change="onChange"></nut-rate>
     <h2>自定义尺寸 35px</h2>
-    <nut-rate v-model="state.val7" icon-size="35"></nut-rate>
+    <nut-rate v-model="state.val8" icon-size="35"></nut-rate>
   </div>
 </template>
 
@@ -49,6 +49,7 @@ export default createDemo({
       val5: 3,
       val6: 3,
       val7: 3,
+      val8: 3,
       result: ''
     });
     const onChange = val => {

src/packages/rate/doc.md

@@ -89,7 +89,8 @@ setup() {
 | count          | star 总数                                 | Number  | 5           |
 | v-model        | 当前 star 数，可使用 v-model 双向绑定数据 | Number  | -           |
 | icon-size      | star 大小                                 | Number  | 18          |
-| active-color   | 自定义图标颜色                            | String  | #FA200C     |
+| active-color   | 图标选中颜色                            | String  | #fa200c     |
+| void-color   | 图标未选中颜色                            | String  | #ccc     |
 | unchecked-icon | 使用图标(未选中)                          | String  | star-n      |
 | checked-icon   | 使用图标(选中)                            | String  | star-fill-n |
 | allow-half     | 是否半星                                  | Boolean | false       |

src/packages/rate/index.scss

@@ -8,12 +8,18 @@
       margin-right: 0;
     }
 
-    &__icon-half {
-      position: absolute;
-      width: 50%;
-      left: 0;
-      top: 0;
-      overflow: hidden;
+    &__icon {
+      color: $rate-icon-color;
+      &.disabled {
+        color: $rate-icon-void-color;
+      }
+      &.half {
+        position: absolute;
+        width: 50%;
+        left: 0;
+        top: 0;
+        overflow: hidden;
+      }
     }
   }
 }

src/packages/rate/index.vue

@@ -5,18 +5,20 @@
       v-for="n in count"
       :key="n"
       @click="onClick($event, n)"
-      :style="{ marginRight: spacing + 'px' }"
+      :style="{ marginRight: pxCheck(spacing) }"
     >
       <nut-icon
         :size="iconSize"
-        :color="n <= modelValue ? (disabled ? '#ccc' : activeColor) : '#ccc'"
+        class="nut-rate-item__icon"
+        :class="{ disabled: disabled || n > modelValue }"
+        :color="n <= modelValue ? activeColor : voidColor"
         :name="n <= modelValue ? checkedIcon : uncheckedIcon"
       />
       <nut-icon
         v-if="allowHalf && modelValue + 1 > n"
-        :class="{ 'nut-rate-item__icon-half': allowHalf }"
+        class="nut-rate-item__icon half"
+        :color="n <= modelValue ? activeColor : voidColor"
         :size="iconSize"
-        :color="activeColor"
         :name="checkedIcon"
       />
     </view>
@@ -42,7 +44,11 @@ export default create({
     },
     activeColor: {
       type: String,
-      default: '#FA200C'
+      default: ''
+    },
+    voidColor: {
+      type: String,
+      default: ''
     },
     uncheckedIcon: {
       type: String,
@@ -77,7 +83,9 @@ export default create({
         [prefixCls]: true
       };
     });
-
+    const pxCheck = (value: string | number) => {
+      return typeof value === 'number' ? `${value}px` : String(value);
+    };
     const onClick = (e: Event, index: number) => {
       e.preventDefault();
       e.stopPropagation();
@@ -87,7 +95,7 @@ export default create({
       } else {
         value = index;
         if (props.allowHalf) {
-          if ((e?.target as Element).className.includes('__icon-half')) {
+          if ((e?.target as Element).className.includes('__icon half')) {
             value -= 0.5;
           }
         }
@@ -98,7 +106,8 @@ export default create({
 
     return {
       classes,
-      onClick
+      onClick,
+      pxCheck
     };
   }
 });

src/styles/variables.scss

@@ -215,6 +215,11 @@ $notify-warning-background-color: linear-gradient(
   rgba(255, 154, 13, 1) 100%
 );
 
+// rate
+
+$rate-icon-color: $primary-color;
+$rate-icon-void-color: $disable-color;
+
 // tabbar
 
 $tabbar-active-color: $primary-color;