(feature)添加apng-loading动图

src/components/asset/apng/index.ts

@@ -0,0 +1,8 @@
+export const loading_lm_1x = new URL('./loading-lm@1x.png', import.meta.url)
+  .href
+export const loading_lm_2x = new URL('./loading-lm@2x.png', import.meta.url)
+  .href
+export const loading_dm_1x = new URL('./loading-dm@1x.png', import.meta.url)
+  .href
+export const loading_dm_2x = new URL('./loading-dm@2x.png', import.meta.url)
+  .href

src/components/asset/index.ts

@@ -1 +1,2 @@
 export * from './svg-icon.js'
+export * from './apng/index.js'

src/components/asset/tsconfig.json

@@ -4,5 +4,5 @@
     "composite": true,
     "rootDir": "../../"
   },
-  "include": ["*.ts", "../base/*.ts", "icons/*.ts"]
+  "include": ["**/*.ts", "../base/*.ts", "icons/*.ts"]
 }

src/test/panels/apng/apng.ts

@@ -0,0 +1,36 @@
+import {html, customElement, LitElement} from '@star-web-components/base'
+import {
+  loading_lm_1x,
+  loading_lm_2x,
+  loading_dm_1x,
+  loading_dm_2x,
+} from '@star-web-components/asset'
+
+@customElement('panel-apng')
+export class PanelApng extends LitElement {
+  render() {
+    return html`
+      <h1>1X - 50KB</h1>
+      <div style="background: #fff">
+        <img src=${loading_lm_1x} />
+      </div>
+      <div style="background: #000">
+        <img src=${loading_dm_1x} />
+      </div>
+
+      <h1>2X - 125KB</h1>
+      <div style="background: #fff">
+        <img src=${loading_lm_2x} />
+      </div>
+      <div style="background: #000">
+        <img src=${loading_dm_2x} />
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-apng': PanelApng
+  }
+}

src/test/panels/root.ts

@@ -7,6 +7,7 @@ import '../../components/ul/ul'
 import '../../components/li/li'
 
 import './about/about'
+import './apng/apng'
 import './activeoverlay/activeoverlay'
 import './battery/battery'
 import './battery-square/battery-square'
@@ -27,6 +28,7 @@ import './gauss_canvas/gauss-blur'
 import './general/general'
 import './gesture/gesture'
 import './icon/icon'
+import './iconfont/iconfont'
 import './indicators/deformation-indicator'
 import './indicators/home-indicator'
 import './indicators/point-indicator'
@@ -41,7 +43,6 @@ import './slider/slider'
 import './switch/switch'
 import './toast/toast'
 import './weather/weather'
-import './iconfont/iconfont'
 import './swiper/swiper'
 
 import './animation/animation'
@@ -432,6 +433,14 @@ export class PanelRoot extends LitElement {
         iconcolor="red"
         href="#fonts-star-icons"
       ></star-li>
+      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="apng动效图"
+        icon="play-circle"
+        iconcolor="red"
+        href="#apng"
+      ></star-li>
     </star-ul>
 
     <star-ul type=${UlType.BASE}>