BUG: #149081-解决电池组件充电时不显示充电图标的问题

src/components/battery/battery-styles.ts

@@ -59,9 +59,29 @@ export const sharedStyles: CSSResult = css`
   .lightning {
     position: absolute;
     right: 9%;
-    top: 40%;
-    width: 7.46%;
-    height: 23.28%;
+    top: 50%;
+    transform: skewX(-10deg);
+  }
+
+  .lightning::before {
+    content: '';
+    position: absolute;
+    margin-top: var(--lightning-top);
+    margin-left: var(--lightning-left);
+    border-top: var(--lightning-two) solid transparent;
+    border-right: var(--lightning-one) solid #ebc883;
+    border-bottom: var(--lightning-two) solid #ebc883;
+    border-left: var(--lightning-one) solid transparent;
+  }
+
+  .lightning::after {
+    content: '';
+    position: absolute;
+    margin-left: var(--lightning-half);
+    border-top: var(--lightning-two) solid #ebc883;
+    border-right: var(--lightning-one) solid transparent;
+    border-bottom: var(--lightning-two) solid transparent;
+    border-left: var(--lightning-one) solid #ebc883;
   }
 
   .bubbles {

src/components/battery/battery.ts

@@ -2,7 +2,6 @@ import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement, property, query} from 'lit/decorators.js'
 import {sharedStyles} from './battery-styles'
 import {animation} from '../animation/animation-styles'
-import lightning from './svg/lightning.svg'
 
 @customElement('star-battery')
 export class StarBattery extends LitElement {
@@ -38,17 +37,16 @@ export class StarBattery extends LitElement {
             bubbles.className = 'bubbles'
             this._container.append(bubbles)
           }
-          const image = document.createElement('img')
-          image.src = '/src/components/battery/svg/lightning.svg'
-          image.className = 'lightning'
-          this._container.append(image)
+          const lightning = document.createElement('div')
+          lightning.className = 'lightning'
+          this._container.append(lightning)
         } else {
           this.shadowRoot
             ?.querySelectorAll('.bubbles')
             .forEach((span) => span.remove())
           this.shadowRoot
             ?.querySelectorAll('.lightning')
-            .forEach((img) => img.remove())
+            .forEach((div) => div.remove())
         }
         break
       case 'percent':
@@ -102,6 +100,11 @@ export class StarBattery extends LitElement {
     this.style.setProperty('--third', -(width / 18.08) + 'px')
     this.style.setProperty('--forth', -(width / 11.9) + 'px')
     this.style.setProperty('--fifth', -(width / 9.04) + 'px')
+    this.style.setProperty('--lightning-top', -(width / 16.67) + 'px')
+    this.style.setProperty('--lightning-left', -(width / 33.33) + 'px')
+    this.style.setProperty('--lightning-one', width / 50 + 'px')
+    this.style.setProperty('--lightning-two', width / 25 + 'px')
+    this.style.setProperty('--lightning-half', -(width / 100) + 'px')
   }
 
   protected firstUpdated() {
@@ -117,7 +120,6 @@ export class StarBattery extends LitElement {
         <div class="power"></div>
         <span class="number">${Math.round(this.percent)}</span>
         <span class="percent">%</span>
-        <!-- <img src="${lightning}" class="lightning" /> -->
       </div>
     `
   }

src/components/battery/svg/lightning.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663655792624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1490" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M739.2 32L160 515.2h243.2L284.8 992 864 518.4H633.6z" p-id="1491" fill="#ebc883"></path></svg>

src/widgets/battery/battery.ts

@@ -40,12 +40,12 @@ class BatteryWidget extends GaiaWidget {
     // @ts-ignore
     this._battery = await navigator.getBattery()
     this.percent = this._battery.level * 100
-    this.charge = this._battery.charging
+    this.battery.charge = this._battery.charging
     this._battery.addEventListener('levelchange', this)
     this._battery.addEventListener('chargingchange', this)
     this.lifeCycle = 'initialized'
     this.percent = this._battery.level * 100
-    this.charge = this._battery.charging
+    this.battery.charge = this._battery.charging
   }
 
   firstUpdated = async () => {
@@ -58,7 +58,7 @@ class BatteryWidget extends GaiaWidget {
         this.percent = this._battery.level * 100
         break
       case 'chargingchange':
-        this.charge = this._battery.charging
+        this.battery.charge = this._battery.charging
         break
     }
   }