优化star组件

src/form/star.js

@@ -11,8 +11,6 @@ class Star extends Component {
   static props = {
     value: 0,
     text: [],
-    size: 'l',
-    colors: [],
     'allow-half': false,
     'show-value': false,
     disabled: false,
@@ -32,7 +30,6 @@ class Star extends Component {
         display: flex;
         align-items: center;
         line-height: 1;
-        color: let(--color-grey-1);
         cursor: inherit;
 
         wc-icon {
@@ -40,14 +37,17 @@ class Star extends Component {
           transition: transform 0.15s linear, color 0.15s linear;
 
           &[name='star'] {
-            color: let(--color-plain-3);
+            color: var(--color-plain-3);
           }
 
+          @for $i from 1 through 5 {
+            &:nth-child(#{$i}) {
               &[name='star-full'],
               &[name='star-half'] {
-            color: let(--color-teal-1);
+                color: var(--star-active-#{$i}, var(--color-teal-1));
+              }
+            }
           }
-
           &:hover {
             transform: scale(1.05);
           }
@@ -56,6 +56,7 @@ class Star extends Component {
         span {
           padding: 2px 8px 0;
           margin: 0 6px;
+          color: var(--color-dark-1);
         }
       }
     `,
@@ -99,8 +100,7 @@ class Star extends Component {
    * f: float
    */
   #updateDraw(i, f = 0) {
-    let _last = 'star-half'
-
+    let lastOne = 'star-half'
     let value = this.value
     let tmp = this.#value
 
@@ -118,23 +118,21 @@ class Star extends Component {
     if (!this['allow-half']) {
       f = f > 0 ? 1 : 0
     }
-    // 减少DOM操作
+    // 数值没变化, 直接终止
     if (i === tmp.i && f === tmp.f) {
       return
     }
 
     if (f > 0.5) {
-      _last = 'star-full'
+      lastOne = 'star-full'
     }
 
     this.#stars.forEach((it, k) => {
       it.name = k < i ? 'star-full' : 'star'
-      it.style.color = k < i ? this.color || 'var(--color-teal-1)' : ''
     })
 
     if (f > 0) {
-      this.#stars[i].name = _last
-      this.#stars[i].style.color = this.color || 'var(--color-teal-1)'
+      this.#stars[i].name = lastOne
     }
 
     // 缓存结果
@@ -183,6 +181,12 @@ class Star extends Component {
   }
 
   render() {
+    let val = this.value
+    if (this.text.length === 5) {
+      val = this.text[Math.ceil(val) - 1]
+    } else {
+      val = val || ''
+    }
     return html`
       <label
         ref="box"
@@ -195,7 +199,7 @@ class Star extends Component {
         <wc-icon data-idx="2" name="star"></wc-icon>
         <wc-icon data-idx="3" name="star"></wc-icon>
         <wc-icon data-idx="4" name="star"></wc-icon>
-        <span class="text">${this['show-value'] ? this.value : ''}</span>
+        <span class="text">${this['show-value'] ? val : ''}</span>
       </label>
     `
   }