add prettier tool

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+temp/

.prettierignore

@@ -0,0 +1,2 @@
+.DS_Store
+/temp

.prettierrc.yaml

@@ -0,0 +1,18 @@
+printWidth: 80
+tabWidth: 2
+useTabs: false
+semi: false
+singleQuote: true
+quoteProps: 'as-needed'
+bracketSpacing: false
+# 多属性html标签的‘>’折行放置
+jsxBracketSameLine: false
+arrowParens: 'always'
+requirePragma: false
+insertPragma: false
+# //对HTML全局空白不敏感
+htmlWhitespaceSensitivity: 'ignore'
+# 结束行形式
+endOfLine: 'lf'
+# 对引用代码进行格式化
+embeddedLanguageFormatting: 'auto'

.vscode/star.code-snippets

@@ -0,0 +1,38 @@
+{
+  "Star Element Template": {
+    "scope": "javascript,typescript,css",
+    "prefix": [
+      "staret",
+    ],
+    "body": [
+      "import { html, css, LitElement } from 'lit'",
+      "import { customElement, property, state } from 'lit/decorators.js'",
+      "",
+      "@customElement('$1')",
+      "export class $0 extends LitElement {",
+      "  @property()",
+      "  foo = ''",
+      "",
+      "  @state()",
+      "  bar = ''",
+      "",
+      "  render() {",
+      "    return html`",
+      "      ",
+      "    `",
+      "  }",
+      "",
+      "  static styles = css`",
+      "    ",
+      "  `",
+      "}",
+      "",
+      "declare global {",
+      "  interface HTMLElementTagNameMap {",
+      "    '$1': $0",
+      "  }",
+      "}",
+    ],
+    "description": "Insert Star Web Component Template"
+  },
+}

index.html

@@ -26,8 +26,8 @@
       }
 
       @font-face {
-        font-family: "gaia-icons";
+        font-family: 'gaia-icons';
-        src: url("fonts/gaia-icons.ttf") format("truetype");
+        src: url('fonts/gaia-icons.ttf') format('truetype');
         font-weight: 500;
         font-style: normal;
       }

package.json

@@ -14,12 +14,15 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "format": "npm run format:prettier",
+    "format:prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --write"
   },
   "dependencies": {
     "lit": "^2.2.7"
   },
   "devDependencies": {
+    "prettier": "^2.7.1",
     "typescript": "^4.6.4",
     "vite": "^3.0.0"
   }

pnpm-lock.yaml

@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   lit: ^2.2.7
+  prettier: ^2.7.1
   typescript: ^4.6.4
   vite: ^3.0.0
 
@@ -9,6 +10,7 @@ dependencies:
   lit: registry.npmmirror.com/lit/2.2.8
 
 devDependencies:
+  prettier: registry.npmmirror.com/prettier/2.7.1
   typescript: registry.npmmirror.com/typescript/4.7.4
   vite: registry.npmmirror.com/vite/3.0.4
 
@@ -379,6 +381,14 @@ packages:
       source-map-js: registry.npmmirror.com/source-map-js/1.0.2
     dev: true
 
+  registry.npmmirror.com/prettier/2.7.1:
+    resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/prettier/-/prettier-2.7.1.tgz}
+    name: prettier
+    version: 2.7.1
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   registry.npmmirror.com/resolve/1.22.1:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz}
     name: resolve

src/components/bubble/bubble.ts

@@ -11,12 +11,17 @@ export class StarBubble extends LitElement {
      * 数字可弹性伸缩。
      */
     if (this.number <= 0) return nothing
-    else if (this.number > 99) return html`
+    else if (this.number > 99)
+      return html`
         <div>
-        <span class='small'>99<sup>+</sup></span>
+          <span class="small">
+            99
+            <sup>+</sup>
+          </span>
         </div>
       `
-    else return html`
+    else
+      return html`
         <div>
           <span>${this.number}</span>
         </div>

src/components/button/button.ts

@@ -1,17 +1,21 @@
-import { html, LitElement, CSSResultArray, HTMLTemplateResult, nothing } from 'lit'
+import {
+  html,
+  LitElement,
+  CSSResultArray,
+  HTMLTemplateResult,
+  nothing,
+} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import { sharedStyles } from './button-styles';
+import {sharedStyles} from './button-styles'
 
 export enum ButtonType {
-  BASE    = 'base'
+  BASE = 'base',
 }
 
 @customElement('star-button')
 export class StarButton extends LitElement {
   public static override get styles(): CSSResultArray {
-    return [
+    return [sharedStyles]
-      sharedStyles
-    ];
   }
 
   @property({type: ButtonType}) type = ''
@@ -25,7 +29,8 @@ export class StarButton extends LitElement {
 
   render() {
     switch (this.type) {
-      case ButtonType.BASE:   return this.getBaseButton()
+      case ButtonType.BASE:
+        return this.getBaseButton()
       default:
         console.error('unhanled 【star-button】 type')
         return nothing

src/components/li/li.ts

@@ -1,6 +1,6 @@
 import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js';
+import {classMap} from 'lit/directives/class-map.js'
 import '../bubble/bubble'
 
 export enum LiType {
@@ -25,7 +25,9 @@ export class StarLi extends LitElement {
   @property({type: Number}) bubble = 0
 
   getbase(): HTMLTemplateResult {
-    return html`<li><slot></slot></li>`
+    return html`
+      <li><slot></slot></li>
+    `
   }
 
   getbubblelabel(): HTMLTemplateResult | typeof nothing {
@@ -38,24 +40,30 @@ export class StarLi extends LitElement {
       return nothing
     }
 
-    const classes = `${this.href ? 'hashref' : ''} ${this.icon ? 'hasicon' : ''}`
+    const classes = `${this.href ? 'hashref' : ''} ${
+      this.icon ? 'hasicon' : ''
+    }`
     const colorstyle = this.iconcolor
-      ? html`<style>
+      ? html`
+          <style>
             a::before {
-            color: ${this.iconcolor} !important
+              color: ${this.iconcolor} !important;
             }
-        </style>`
+          </style>
+        `
       : nothing
 
     return html`
       <li>
-        ${this.href ? html`
+        ${this.href
+          ? html`
               <a data-icon=${this.icon} class=${classes} href=${this.href}>
                 ${colorstyle}
                 <span class="label">${this.label}</span>
                 <star-bubble number=${this.bubble}></star-bubble>
               </a>
-        ` : html`
+            `
+          : html`
               <a data-icon=${this.icon} class=${classes}>
                 ${colorstyle}
                 <span class="label">${this.label}</span>
@@ -78,21 +86,25 @@ export class StarLi extends LitElement {
 
     const classes = this.href ? 'hasicon hashref' : 'hasicon'
     const colorstyle = this.iconcolor
-      ? html`<style>
+      ? html`
+          <style>
             a::before {
-            color: ${this.iconcolor} !important
+              color: ${this.iconcolor} !important;
             }
-        </style>`
+          </style>
+        `
       : nothing
 
     return html`
       <li>
-        ${this.href ? html`
+        ${this.href
+          ? html`
               <a data-icon=${this.icon} class=${classes} href=${this.href}>
                 ${colorstyle}
                 <span class="label">${this.label}</span>
               </a>
-        ` : html`
+            `
+          : html`
               <a data-icon=${this.icon} class=${classes}>
                 ${colorstyle}
                 <span class="label">${this.label}</span>
@@ -119,11 +131,10 @@ export class StarLi extends LitElement {
           <span class="infovalue">${this.value}</span>
         </li>
       `
-    }
+    } else {
-    else {
       return html`
-        <li class='hashref'>
+        <li class="hashref">
-          <a href=${this.href} class='hashref'>
+          <a href=${this.href} class="hashref">
             <span class="infokey">${this.label}</span>
             <span class="infovalue">${this.value}</span>
           </a>
@@ -140,11 +151,13 @@ export class StarLi extends LitElement {
 
     return html`
       <li>
-        ${this.href ? html`
+        ${this.href
-          <a href=${this.href} class='hashref'>
+          ? html`
+              <a href=${this.href} class="hashref">
                 <span class="label">${this.label}</span>
               </a>
-        ` : html`
+            `
+          : html`
               <a>
                 <span class="label">${this.label}</span>
               </a>
@@ -161,7 +174,7 @@ export class StarLi extends LitElement {
 
     return html`
       <li>
-        <span class='onlyread'>${this.label}</span>
+        <span class="onlyread">${this.label}</span>
       </li>
     `
   }
@@ -178,20 +191,27 @@ export class StarLi extends LitElement {
 
     return html`
       <li>
-        <input value="${this.label}" placeholder="${this.default}">
+        <input value="${this.label}" placeholder="${this.default}" />
       </li>
     `
   }
 
   render() {
     switch (this.type) {
-      case LiType.BASE:               return this.getbase()
+      case LiType.BASE:
-      case LiType.BUBBLE_LABEL:       return this.getbubblelabel()
+        return this.getbase()
-      case LiType.ICON_LABEL:         return this.geticonlabel()
+      case LiType.BUBBLE_LABEL:
-      case LiType.INFO_LABEL:         return this.getinfolabel()
+        return this.getbubblelabel()
-      case LiType.ONLY_EDIT:          return this.getonlyedit()
+      case LiType.ICON_LABEL:
-      case LiType.ONLY_LABEL:         return this.getonlylabel()
+        return this.geticonlabel()
-      case LiType.ONLY_READ:          return this.getonlyread()
+      case LiType.INFO_LABEL:
+        return this.getinfolabel()
+      case LiType.ONLY_EDIT:
+        return this.getonlyedit()
+      case LiType.ONLY_LABEL:
+        return this.getonlylabel()
+      case LiType.ONLY_READ:
+        return this.getonlyread()
       default:
         console.error('unhanled 【star-li】 type')
         return nothing
@@ -208,7 +228,9 @@ export class StarLi extends LitElement {
       min-height: var(--li-base-height);
       line-height: var(--li-base-height);
       padding-inline-start: var(--li-left-padding);
-      padding-inline-end: var(--li-right-padding); /* right-arrow须与最右侧文字对齐 */
+      padding-inline-end: var(
+        --li-right-padding
+      ); /* right-arrow须与最右侧文字对齐 */
     }
     li.hashref {
       /* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
@@ -219,12 +241,13 @@ export class StarLi extends LitElement {
       color: #000;
       width: 100%;
     }
-    a.hasicon::before, a.hashref::after {
+    a.hasicon::before,
+    a.hashref::after {
       flex: 1;
       font-size: 25px;
       min-width: 25px;
       max-width: 25px;
-      font-family: "gaia-icons";
+      font-family: 'gaia-icons';
     }
     a.hasicon::before {
       color: #657073;
@@ -235,7 +258,7 @@ export class StarLi extends LitElement {
     a.hashref::after {
       color: #a5acae;
       text-align: right;
-      content: "right-light";
+      content: 'right-light';
     }
     input {
       width: 100vw;
@@ -250,7 +273,8 @@ export class StarLi extends LitElement {
       background-color: transparent;
       font-size: 16px;
     }
-    span.infokey, span.label {
+    span.infokey,
+    span.label {
       flex: 1;
       text-align: left;
     }

src/components/section/section.ts

@@ -10,13 +10,15 @@ export class StarAnimateSection extends LitElement {
   bar = ''
 
   render() {
-    const withTransform = this.transform ? html`
+    const withTransform = this.transform
+      ? html`
           <style>
             :host {
               transform: ${this.transform};
             }
           </style>
-    ` : nothing
+        `
+      : nothing
 
     return html`
       ${withTransform}
@@ -33,7 +35,7 @@ export class StarAnimateSection extends LitElement {
       height: 100vh;
       overflow: auto;
       /* height: calc(100vh + 1px); */ /* 手动制造溢出 */
-      animation-duration: .3s;
+      animation-duration: 0.3s;
       background-color: #f0f0f0;
     }
 

src/components/ul/ul.ts

@@ -1,6 +1,6 @@
 import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js'
 
 export enum UlType {
   BASE = 'base',
@@ -78,10 +78,14 @@ export class StarUl extends LitElement {
     }
 
     switch (this.type) {
-      case UlType.BASE:             return this.getbase()
+      case UlType.BASE:
-      case UlType.HEADER_FOOTER:    return this.getheaderfooter()
+        return this.getbase()
-      case UlType.ONLY_HEADER:      return this.getonlyheader()
+      case UlType.HEADER_FOOTER:
-      case UlType.ONLY_FOOTER:      return this.getonlyfooter()
+        return this.getheaderfooter()
+      case UlType.ONLY_HEADER:
+        return this.getonlyheader()
+      case UlType.ONLY_FOOTER:
+        return this.getonlyfooter()
       default:
         console.error('unhanled 【star-ul】 type')
         return nothing
@@ -109,7 +113,8 @@ export class StarUl extends LitElement {
       border-radius: 10px;
     }
 
-    header, footer {
+    header,
+    footer {
       color: #888;
       margin-left: 10px;
       font-size: 12px;

src/index.ts

@@ -9,25 +9,23 @@ import './test/panels/root'
 
 @customElement('settings-app')
 export class SettingsApp extends LitElement {
-
+  @query('star-animate-section#root') private rootSection!: StarAnimateSection
-  @query('star-animate-section#root')   private rootSection!: StarAnimateSection;
 
   @state() sectionsMap = new Map()
 
-  @state() prevSection: StarAnimateSection | null = null;
+  @state() prevSection: StarAnimateSection | null = null
-  @state() nextSection: StarAnimateSection | null = null;
+  @state() nextSection: StarAnimateSection | null = null
-  @state() currentSection: StarAnimateSection | null = null;
+  @state() currentSection: StarAnimateSection | null = null
-
 
   handleEvent(evt: Event) {
     switch (evt.type) {
       case 'hashchange':
         // console.log(evt)
-        const newURL = (evt as HashChangeEvent).newURL;
+        const newURL = (evt as HashChangeEvent).newURL
         // const oldURL = (evt as HashChangeEvent).oldURL;
-        const goPanelHash = new URL(newURL).hash;
+        const goPanelHash = new URL(newURL).hash
         this.navigate(goPanelHash)
-        break;
+        break
     }
   }
 
@@ -62,11 +60,13 @@ export class SettingsApp extends LitElement {
       panelhash = 'root'
       this.nextSection = this.rootSection
     } else {
-      const wantSection: StarAnimateSection | null = 
+      const wantSection: StarAnimateSection | null = document.querySelector(
-        document.querySelector('star-animate-section' + panelhash);
+        'star-animate-section' + panelhash
+      )
       if (wantSection === null) {
         const loadsection = this.dynamicLoadSection(panelhash)
-        if (loadsection === null) return console.error('该panel不存在', panelhash)
+        if (loadsection === null)
+          return console.error('该panel不存在', panelhash)
         else this.nextSection = loadsection
       } else {
         this.nextSection = wantSection
@@ -77,12 +77,16 @@ export class SettingsApp extends LitElement {
 
     this.nextSection.className = 'active r2m'
     this.prevSection.className = 'm2l'
-    this.prevSection.addEventListener('animationend', (e) => {
+    this.prevSection.addEventListener(
+      'animationend',
+      (e) => {
         console.log(e)
         this.nextSection?.classList.remove('r2m')
         this.prevSection?.classList.remove('m2l')
         this.prevSection?.classList.add('inactive', 'l')
-    }, { once: true })
+      },
+      {once: true}
+    )
     return
 
     // switch (panelhash) {

src/test/panels/about/about.ts

@@ -2,7 +2,7 @@ import { html, LitElement, CSSResultArray } from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
 import {LiType} from '../../../components/li/li'
 import {UlType} from '../../../components/ul/ul'
-import { sharedStyles } from '../shared-styles';
+import {sharedStyles} from '../shared-styles'
 
 @customElement('panel-about')
 export class PanelAbout extends LitElement {
@@ -14,26 +14,32 @@ export class PanelAbout extends LitElement {
 
   render() {
     return html`
-      <star-ul @click='' type=${UlType.ONLY_HEADER} title="我的网络">
+      <star-ul @click="" type=${UlType.ONLY_HEADER} title="我的网络">
         <star-li type=${LiType.BASE}>FXJT</star-li>
         <hr />
         <star-li type=${LiType.BASE}>ZXXZ</star-li>
       </star-ul>
 
-      <star-ul type=${UlType.ONLY_FOOTER} text="无可用无线局域网时，允许此设备自动查找附近的个人热点。">
+      <star-ul
+        type=${UlType.ONLY_FOOTER}
+        text="无可用无线局域网时，允许此设备自动查找附近的个人热点。"
+      >
         <star-li type=${LiType.BASE}>自动加入热点</star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>  
+        <star-li
+          type=${LiType.ICON_LABEL}
+          label="查看所有图标"
+          icon="all-day"
+          href="#icon"
+        ></star-li>
       </star-ul>
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [
+    return [sharedStyles]
-      sharedStyles
-    ];
   }
 }
 

src/test/panels/general/about_machine/about_machine.ts

@@ -3,23 +3,23 @@ import { customElement, property, state } from 'lit/decorators.js'
 import {repeat} from 'lit/directives/repeat.js'
 import {UlType} from '../../../../components/ul/ul'
 import {LiType} from '../../../../components/li/li'
-import { sharedStyles } from '../../shared-styles';
+import {sharedStyles} from '../../shared-styles'
 import {nothing} from 'lit'
 
 type LINENODE = {
-  node: String,
+  node: String
-  nodetype: LiType,
+  nodetype: LiType
-  label: String,
+  label: String
-  value?: String,
+  value?: String
-  href?: String,
+  href?: String
 }
 
 type BLOCKNODE = {
-  node: String,
+  node: String
-  nodetype: UlType,
+  nodetype: UlType
-  nodes: Array<LINENODE>,
+  nodes: Array<LINENODE>
-  nodetitle?: String,
+  nodetitle?: String
-  nodevalue?: String,
+  nodevalue?: String
 }
 
 @customElement('panel-about-machine')
@@ -37,33 +37,33 @@ export class PanelAboutMachine extends LitElement {
           nodetype: LiType.INFO_LABEL,
           label: '名称',
           value: 'StarElement',
-          href: '#icon'
+          href: '#icon',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '软件版本',
-          value: '15.5'
+          value: '15.5',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '型号名称',
-          value: 'iPhone 13 Pro'
+          value: 'iPhone 13 Pro',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '型号号码',
-          value: 'MDNFAF3H/A'
+          value: 'MDNFAF3H/A',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '序列号',
-          value: 'RFAFAFF12432GM'
+          value: 'RFAFAFF12432GM',
         },
-      ]
+      ],
     },
     {
       node: 'star-ul',
@@ -74,9 +74,9 @@ export class PanelAboutMachine extends LitElement {
           nodetype: LiType.INFO_LABEL,
           label: '有限保修',
           value: '到期日期: 2025/5/25',
-          href: '#icon'
+          href: '#icon',
         },
-      ]
+      ],
     },
     {
       node: '<star-ul>',
@@ -86,39 +86,39 @@ export class PanelAboutMachine extends LitElement {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '歌曲',
-          value: '0'
+          value: '0',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '视频',
-          value: '430'
+          value: '430',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '照片',
-          value: '6050'
+          value: '6050',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '应用程序',
-          value: '154'
+          value: '154',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '总容量',
-          value: '256 GB'
+          value: '256 GB',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '可用容量',
-          value: '56.42 GB'
+          value: '56.42 GB',
-        }
+        },
-      ]
+      ],
     },
     {
       node: '<star-ul>',
@@ -128,33 +128,33 @@ export class PanelAboutMachine extends LitElement {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '无线局域网地址',
-          value: '30:E2:D3:4A:C3:5D'
+          value: '30:E2:D3:4A:C3:5D',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '蓝牙',
-          value: '30:E2:D3:4A:C3:5D'
+          value: '30:E2:D3:4A:C3:5D',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '调制解调器固件',
-          value: '1.61.00'
+          value: '1.61.00',
         },
         {
           node: 'star-li',
           nodetype: LiType.ONLY_LABEL,
           label: 'SEID',
-          href: '#icon'
+          href: '#icon',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '运营商锁',
-          value: '无 SIM 卡限制'
+          value: '无 SIM 卡限制',
-        }
+        },
-      ]
+      ],
     },
     {
       node: '<star-ul>',
@@ -165,33 +165,33 @@ export class PanelAboutMachine extends LitElement {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '网络',
-          value: '中国联通'
+          value: '中国联通',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '运营商',
-          value: '中国联通 50.0'
+          value: '中国联通 50.0',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: 'IMEI',
-          value: '35 717429 442903 2'
+          value: '35 717429 442903 2',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: 'ICCID',
-          value: '89860118802136995387'
+          value: '89860118802136995387',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: 'MEID',
-          value: '35717429442903'
+          value: '35717429442903',
-        }
+        },
-      ]
+      ],
     },
     {
       node: '<star-ul>',
@@ -202,33 +202,33 @@ export class PanelAboutMachine extends LitElement {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '网络',
-          value: '中国移动'
+          value: '中国移动',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: '运营商',
-          value: '中国移动 50.0'
+          value: '中国移动 50.0',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: 'IMEI',
-          value: '35 717429 442903 2'
+          value: '35 717429 442903 2',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: 'ICCID',
-          value: '89860118802136995387'
+          value: '89860118802136995387',
         },
         {
           node: 'star-li',
           nodetype: LiType.INFO_LABEL,
           label: 'MEID',
-          value: '35717429442903'
+          value: '35717429442903',
-        }
+        },
-      ]
+      ],
     },
     {
       node: 'star-ul',
@@ -238,17 +238,21 @@ export class PanelAboutMachine extends LitElement {
           node: 'star-li',
           nodetype: LiType.ONLY_LABEL,
           label: '证书信任设置',
-          href: '#icon'
+          href: '#icon',
         },
-      ]
+      ],
     },
   ]
 
   render() {
     return html`
-      ${repeat(this.paneljson, (block: BLOCKNODE) => html`
+      ${repeat(
+        this.paneljson,
+        (block: BLOCKNODE) => html`
           <star-ul type=${block.nodetype} title=${block.nodetitle}>
-          ${repeat(block.nodes, (node: LINENODE, index) => html`
+            ${repeat(
+              block.nodes,
+              (node: LINENODE, index) => html`
                 ${node.href
                   ? html`
                       <star-li
@@ -264,22 +268,22 @@ export class PanelAboutMachine extends LitElement {
                         label=${node.label}
                         value=${node.value}
                       ></star-li>
-              `
+                    `}
-            }
                 ${index < block.nodes.length - 1
-              ? html`<hr>` // 分隔线
+                  ? html`
-              : nothing
+                      <hr />
-            }
+                    ` // 分隔线
-          `)}
+                  : nothing}
+              `
+            )}
           </star-ul>
-      `)}
+        `
+      )}
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [
+    return [sharedStyles]
-      sharedStyles
-    ];
   }
 }
 

src/test/panels/general/general.ts

@@ -1,10 +1,10 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement} from 'lit/decorators.js'
-import { eventOptions } from 'lit/decorators.js';
+import {eventOptions} from 'lit/decorators.js'
 import {UlType} from '../../../components/ul/ul'
 import {LiType} from '../../../components/li/li'
 import {ButtonType, StarButton} from '../../../components/button/button'
-import { sharedStyles } from '../shared-styles';
+import {sharedStyles} from '../shared-styles'
 import './about_machine/about_machine'
 import './update/auto_update'
 import './update/update_system'
@@ -18,68 +18,122 @@ export class PanelGeneral extends LitElement {
         if ((evt.target as StarButton).label === '关机') {
           alert('关机')
         }
-        break;
+        break
     }
   }
 
   render() {
     return html`
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='关于本机' href='#about-machine'></star-li>
+        <star-li
-        <hr>
+          type=${LiType.ONLY_LABEL}
-        <star-li type=${LiType.ONLY_LABEL} label='软件更新' href='#update-system'></star-li>  
+          label="关于本机"
+          href="#about-machine"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="软件更新"
+          href="#update-system"
+        ></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='隔空投送' href='#icon'></star-li>  
+        <star-li
-        <hr>
+          type=${LiType.ONLY_LABEL}
-        <star-li type=${LiType.ONLY_LABEL} label='隔空播放与接力' href='#icon'></star-li>  
+          label="隔空投送"
-        <hr>
+          href="#icon"
-        <star-li type=${LiType.ONLY_LABEL} label='画中画' href='#icon'></star-li>  
+        ></star-li>
-        <hr>
+        <hr />
-        <star-li type=${LiType.ONLY_LABEL} label='CarPlay车载' href='#icon'></star-li>  
+        <star-li
-        <hr>
+          type=${LiType.ONLY_LABEL}
-        <star-li type=${LiType.ONLY_LABEL} label='NFC' href='#icon'></star-li>  
+          label="隔空播放与接力"
+          href="#icon"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="画中画"
+          href="#icon"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="CarPlay车载"
+          href="#icon"
+        ></star-li>
+        <hr />
+        <star-li type=${LiType.ONLY_LABEL} label="NFC" href="#icon"></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='iPhone存储空间' href='#icon'></star-li>  
+        <star-li
-        <hr>
+          type=${LiType.ONLY_LABEL}
-        <star-li type=${LiType.ONLY_LABEL} label='后台App刷新' href='#icon'></star-li>  
+          label="iPhone存储空间"
+          href="#icon"
+        ></star-li>
+        <hr />
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="后台App刷新"
+          href="#icon"
+        ></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='日期与时间' href='#icon'></star-li>  
+        <star-li
-        <hr>
+          type=${LiType.ONLY_LABEL}
-        <star-li type=${LiType.ONLY_LABEL} label='键盘' href='#icon'></star-li>  
+          label="日期与时间"
-        <hr>
+          href="#icon"
-        <star-li type=${LiType.ONLY_LABEL} label='字体' href='#icon'></star-li>  
+        ></star-li>
-        <hr>
+        <hr />
-        <star-li type=${LiType.ONLY_LABEL} label='语言与地区' href='#icon'></star-li>  
+        <star-li type=${LiType.ONLY_LABEL} label="键盘" href="#icon"></star-li>
-        <hr>
+        <hr />
-        <star-li type=${LiType.ONLY_LABEL} label='词典' href='#icon'></star-li>  
+        <star-li type=${LiType.ONLY_LABEL} label="字体" href="#icon"></star-li>
+        <hr />
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="语言与地区"
+          href="#icon"
+        ></star-li>
+        <hr />
+        <star-li type=${LiType.ONLY_LABEL} label="词典" href="#icon"></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='VPN与设备管理' href='#icon'></star-li>  
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="VPN与设备管理"
+          href="#icon"
+        ></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='法律与监管' href='#icon'></star-li>  
+        <star-li
+          type=${LiType.ONLY_LABEL}
+          label="法律与监管"
+          href="#icon"
+        ></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ONLY_LABEL} label='传输或还原iPhone' href='#icon'></star-li>  
+        <star-li
-        <hr>
+          type=${LiType.ONLY_LABEL}
-        <star-button type=${ButtonType.BASE} label='关机' @click=${this}></star-button>
+          label="传输或还原iPhone"
+          href="#icon"
+        ></star-li>
+        <hr />
+        <star-button
+          type=${ButtonType.BASE}
+          label="关机"
+          @click=${this}
+        ></star-button>
       </star-ul>
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [
+    return [sharedStyles]
-      sharedStyles
-    ];
   }
 }
 

src/test/panels/general/update/auto_update.ts

@@ -14,14 +14,17 @@ export class PanelAutoUpdate extends LitElement {
   render() {
     return html`
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>  
+        <star-li
+          type=${LiType.ICON_LABEL}
+          label="查看所有图标"
+          icon="all-day"
+          href="#icon"
+        ></star-li>
       </star-ul>
     `
   }
 
-  static styles = css`
+  static styles = css``
-    
-  `
 }
 
 declare global {

src/test/panels/general/update/update_system.ts

@@ -14,17 +14,27 @@ export class PanelUpdateSystem extends LitElement {
   render() {
     return html`
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.INFO_LABEL} label='自动更新' value='打开' href='#auto-update'></star-li>
+        <star-li
+          type=${LiType.INFO_LABEL}
+          label="自动更新"
+          value="打开"
+          href="#auto-update"
+        ></star-li>
       </star-ul>
 
       <star-ul type=${UlType.BASE}>
-        <star-li type=${LiType.ICON_LABEL} label='查看所有图标' icon='all-day' href='#auto-update'></star-li>
+        <star-li
+          type=${LiType.ICON_LABEL}
+          label="查看所有图标"
+          icon="all-day"
+          href="#auto-update"
+        ></star-li>
       </star-ul>
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [];
+    return []
   }
 }
 

src/test/panels/icon/icon.ts

@@ -1,281 +1,291 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
-import { repeat } from 'lit/directives/repeat.js';
+import {repeat} from 'lit/directives/repeat.js'
 import {UlType} from '../../../components/ul/ul'
-import { LiType } from '../../../components/li/li';
+import {LiType} from '../../../components/li/li'
-import { sharedStyles } from '../shared-styles';
+import {sharedStyles} from '../shared-styles'
 
 @customElement('panel-icon')
 export class PanelIcon extends LitElement {
   @property() foo = ''
 
   @state() icons = [
-    "2g",
+    '2g',
-    "3g",
+    '3g',
-    "4g",
+    '4g',
 
-    "accessibility",
+    'accessibility',
-    "achievement",
+    'achievement',
-    "add-contact",
+    'add-contact',
-    "add",
+    'add',
-    "addons",
+    'addons',
 
-    "airplane",
+    'airplane',
-    "alarm-clock",
+    'alarm-clock',
-    "alarm-stop",
+    'alarm-stop',
-    "alarm",
+    'alarm',
 
-    "album",
+    'album',
-    "all-day",
+    'all-day',
-    "arrow-left",
+    'arrow-left',
-    "arrow-right",
+    'arrow-right',
-    "artist",
+    'artist',
-    "attachment",
+    'attachment',
-    "battery-0",
+    'battery-0',
-    "battery-1",
+    'battery-1',
-    "battery-2",
+    'battery-2',
-    "battery-3",
+    'battery-3',
-    "battery-4",
+    'battery-4',
-    "battery-5",
+    'battery-5',
-    "battery-6",
+    'battery-6',
-    "battery-7",
+    'battery-7',
-    "battery-8",
+    'battery-8',
-    "battery-9",
+    'battery-9',
-    "battery-10",
+    'battery-10',
-    "battery-charging",
+    'battery-charging',
-    "battery-unknown",
+    'battery-unknown',
 
-    "bluetooth-a2dp",
+    'bluetooth-a2dp',
-    "bluetooth-circle",
+    'bluetooth-circle',
-    "bluetooth-transfer-circle",
+    'bluetooth-transfer-circle',
-    "bluetooth-transfer",
+    'bluetooth-transfer',
-    "bluetooth",
+    'bluetooth',
 
-    "brightness",
+    'brightness',
-    "browsing",
+    'browsing',
-    "bug",
+    'bug',
 
-    "calendar",
+    'calendar',
-    "call-bluetooth",
+    'call-bluetooth',
-    "call-emergency",
+    'call-emergency',
-    "call-forwarding",
+    'call-forwarding',
-    "call-hang-up",
+    'call-hang-up',
-    "call-hold",
+    'call-hold',
-    "call-incoming",
+    'call-incoming',
-    "call-merge",
+    'call-merge',
-    "call-missed",
+    'call-missed',
-    "call-outgoing",
+    'call-outgoing',
-    "call-reversed",
+    'call-reversed',
-    "call-ringing",
+    'call-ringing',
-    "call",
+    'call',
-    "callback-emergency",
+    'callback-emergency',
 
-    "camera",
+    'camera',
-    "change-wallpaper",
+    'change-wallpaper',
-    "clear-input-left",
+    'clear-input-left',
-    "clear-input-right",
+    'clear-input-right',
 
-    "close",
+    'close',
-    "compose",
+    'compose',
-    "contact-find",
+    'contact-find',
-    "contacts",
+    'contacts',
-    "crashed",
+    'crashed',
-    "crop",
+    'crop',
 
-    "data",
+    'data',
-    "delete",
+    'delete',
-    "developer",
+    'developer',
-    "device-info",
+    'device-info',
-    "dismiss-keyboard",
+    'dismiss-keyboard',
-    "do-not-track",
+    'do-not-track',
-    "download-circle",
+    'download-circle',
-    "download",
+    'download',
 
-    "edge",
+    'edge',
-    "edit-contact",
+    'edit-contact',
-    "edit-image",
+    'edit-image',
-    "edit",
+    'edit',
-    "effects",
+    'effects',
-    "email-forward",
+    'email-forward',
-    "email-mark-read",
+    'email-mark-read',
-    "email-mark-unread",
+    'email-mark-unread',
-    "email-move",
+    'email-move',
-    "email-reply",
+    'email-reply',
-    "email",
+    'email',
 
-    "exclamation",
+    'exclamation',
-    "expand-left",
+    'expand-left',
-    "expand-right",
+    'expand-right',
-    "facebook",
+    'facebook',
-    "feedback",
+    'feedback',
-    "find",
+    'find',
-    "firefox",
+    'firefox',
-    "flag",
+    'flag',
-    "flash-auto",
+    'flash-auto',
-    "flash-off",
+    'flash-off',
-    "flash-on",
+    'flash-on',
-    "focus-locked",
+    'focus-locked',
-    "focus-locking",
+    'focus-locking',
 
-    "gesture",
+    'gesture',
-    "gmail",
+    'gmail',
-    "grid-circular",
+    'grid-circular',
-    "grid",
+    'grid',
-    "gsm",
+    'gsm',
 
-    "hdr-boxed",
+    'hdr-boxed',
-    "hdr",
+    'hdr',
-    "headphones",
+    'headphones',
-    "help",
+    'help',
-    "homescreen",
+    'homescreen',
-    "hspa-plus",
+    'hspa-plus',
-    "hspa",
+    'hspa',
 
-    "import-memorycard-circle",
+    'import-memorycard-circle',
-    "incoming-sms",
+    'incoming-sms',
-    "info",
+    'info',
 
-    "keyboard-circle",
+    'keyboard-circle',
-    "keyboard",
+    'keyboard',
 
-    "languages",
+    'languages',
-    "left-light",
+    'left-light',
-    "left",
+    'left',
-    "link",
+    'link',
-    "location",
+    'location',
-    "lock",
+    'lock',
 
-    "media-storage",
+    'media-storage',
-    "menu",
+    'menu',
-    "messages",
+    'messages',
-    "mic",
+    'mic',
-    "minus",
+    'minus',
-    "moon",
+    'moon',
-    "more",
+    'more',
-    "mute",
+    'mute',
 
-    "nfc",
+    'nfc',
-    "no-sim",
+    'no-sim',
-    "notifications",
+    'notifications',
 
-    "o",
+    'o',
-    "outgoing-sms",
+    'outgoing-sms',
-    "outlook",
+    'outlook',
 
-    "pause",
+    'pause',
-    "picture-size",
+    'picture-size',
-    "play",
+    'play',
-    "play-circle",
+    'play-circle',
-    "playlist",
+    'playlist',
-    "privacy",
+    'privacy',
 
-    "recent-calls",
+    'recent-calls',
-    "reload",
+    'reload',
-    "repeat-once",
+    'repeat-once',
-    "repeat",
+    'repeat',
-    "reply-all",
+    'reply-all',
-    "right-light",
+    'right-light',
-    "right",
+    'right',
-    "rocket",
+    'rocket',
-    "rotate",
+    'rotate',
 
-    "scene",
+    'scene',
-    "sd-card",
+    'sd-card',
-    "search",
+    'search',
-    "seek-back",
+    'seek-back',
-    "seek-forward",
+    'seek-forward',
-    "select",
+    'select',
-    "self-timer",
+    'self-timer',
-    "send-left",
+    'send-left',
-    "send-right",
+    'send-right',
-    "settings",
+    'settings',
-    "share",
+    'share',
-    "shuffle",
+    'shuffle',
 
-    "signal-0",
+    'signal-0',
-    "signal-1",
+    'signal-1',
-    "signal-2",
+    'signal-2',
-    "signal-3",
+    'signal-3',
-    "signal-4",
+    'signal-4',
-    "signal-5",
+    'signal-5',
-    "signal-roaming",
+    'signal-roaming',
 
-    "sim-toolkit",
+    'sim-toolkit',
-    "sim",
+    'sim',
 
-    "skip-back",
+    'skip-back',
-    "skip-forward",
+    'skip-forward',
 
-    "songs",
+    'songs',
-    "sound-max",
+    'sound-max',
-    "sound-min",
+    'sound-min',
-    "star-empty",
+    'star-empty',
-    "star-full",
+    'star-full',
 
-    "stop",
+    'stop',
-    "storage-circle",
+    'storage-circle',
-    "storage",
+    'storage',
-    "switch",
+    'switch',
-    "sync",
+    'sync',
 
-    "tethering",
+    'tethering',
-    "themes",
+    'themes',
-    "tick-circle",
+    'tick-circle',
-    "tick",
+    'tick',
-    "time",
+    'time',
-    "toggle-camera-front",
+    'toggle-camera-front',
-    "toggle-camera-rear",
+    'toggle-camera-rear',
-    "topup-with-code",
+    'topup-with-code',
-    "topup",
+    'topup',
-    "twitter",
+    'twitter',
 
-    "undo-circular",
+    'undo-circular',
-    "undo",
+    'undo',
-    "unlock",
+    'unlock',
-    "update-balance",
+    'update-balance',
-    "usb",
+    'usb',
-    "user",
+    'user',
 
-    "vibrate",
+    'vibrate',
-    "video-mic",
+    'video-mic',
-    "video-size",
+    'video-size',
-    "video",
+    'video',
-    "voicemail",
+    'voicemail',
 
-    "wallpaper",
+    'wallpaper',
-    "wifi-1",
+    'wifi-1',
-    "wifi-2",
+    'wifi-2',
-    "wifi-3",
+    'wifi-3',
-    "wifi-4",
+    'wifi-4',
-    "wifi-permissions"
+    'wifi-permissions',
   ]
 
   getRangeColor() {
-    const r = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
+    const r = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0')
-    const g = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
+    const g = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0')
-    const b = ((255 * Math.random())>>0).toString(16).padStart(2, '0');
+    const b = ((255 * Math.random()) >> 0).toString(16).padStart(2, '0')
-    return "#"+r+g+b;  
+    return '#' + r + g + b
   }
 
   render() {
     return html`
-      <star-ul type=${UlType.HEADER_FOOTER} title="GaiaIcon图标" text='以上GaiaIcon图标为YROS V4内容'>
+      <star-ul
-        ${repeat(this.icons, (iconname, index) => html`
+        type=${UlType.HEADER_FOOTER}
-          <star-li type=${LiType.ICON_LABEL}
+        title="GaiaIcon图标"
+        text="以上GaiaIcon图标为YROS V4内容"
+      >
+        ${repeat(
+          this.icons,
+          (iconname, index) => html`
+            <star-li
+              type=${LiType.ICON_LABEL}
               label=${iconname}
               icon=${iconname}
               iconcolor=${this.getRangeColor()}
             ></star-li>
-          ${index < this.icons.length - 1 ? html`<hr>` : null}
+            ${index < this.icons.length - 1
-        `)}
+              ? html`
+                  <hr />
+                `
+              : null}
+          `
+        )}
       </star-ul>
     `
   }
 
   public static override get styles(): CSSResultArray {
-    return [
+    return [sharedStyles]
-      sharedStyles
-    ];
   }
 }
 

src/test/panels/root.ts

@@ -2,7 +2,7 @@ import { html, LitElement, CSSResultArray } from 'lit'
 import {customElement, state} from 'lit/decorators.js'
 import {LiType} from '../../components/li/li'
 import {UlType} from '../../components/ul/ul'
-import { sharedStyles } from './shared-styles';
+import {sharedStyles} from './shared-styles'
 import './about/about'
 import './icon/icon'
 import './general/general'
@@ -11,55 +11,136 @@ type SEID = String
 
 @customElement('panel-root')
 export class PanelRoot extends LitElement {
-  @state() wlanMacAddress = "31:D2:3F:4E:D2:5B"
+  @state() wlanMacAddress = '31:D2:3F:4E:D2:5B'
-  @state() availableCapability = "50.26GB"
+  @state() availableCapability = '50.26GB'
   @state() seid = this.genMockSeid()
-  @state() otherdevice = '若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
+  @state() otherdevice =
+    '若要将手表与手机配对，请前往 <a href="https://www.kylinos.cn/about/contact.html">https://help.kylin.cn</a>'
 
   genMockSeid(): SEID {
     return Array(48)
       .fill(0)
-      .map(() => "0123456789ABCDEF"[Math.floor(Math.random()*16)])
+      .map(() => '0123456789ABCDEF'[Math.floor(Math.random() * 16)])
       .join('')
   }
 
   rootPanel = html`
-    <star-ul type=${UlType.HEADER_FOOTER} title="完整栏" text='可在上栏中填充任意类型的条目'>
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="完整栏"
+      text="可在上栏中填充任意类型的条目"
+    >
       <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
       <hr />
-      <star-li type=${LiType.ONLY_LABEL} label="带跳转的条目" href="#about"></star-li>
+      <star-li
+        type=${LiType.ONLY_LABEL}
+        label="带跳转的条目"
+        href="#about"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="带图标的条目" icon="privacy"></star-li>
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="带图标的条目"
+        icon="privacy"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="带颜色图标的条目" icon="privacy" iconcolor="green"></star-li>
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="带颜色图标的条目"
+        icon="privacy"
+        iconcolor="green"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=1></star-li>
+      <star-li
+        type=${LiType.BUBBLE_LABEL}
+        label="带气泡的条目"
+        bubble="1"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=99></star-li>
+      <star-li
+        type=${LiType.BUBBLE_LABEL}
+        label="带气泡的条目"
+        bubble="99"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=999></star-li>
+      <star-li
+        type=${LiType.BUBBLE_LABEL}
+        label="带气泡的条目"
+        bubble="999"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.BUBBLE_LABEL} label="有软件更新可用" href="#about" bubble=1></star-li>
+      <star-li
+        type=${LiType.BUBBLE_LABEL}
+        label="有软件更新可用"
+        href="#about"
+        bubble="1"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.BUBBLE_LABEL} label="包含以上的条目" icon="privacy" iconcolor="orange" href="#about" bubble=8></star-li>
+      <star-li
+        type=${LiType.BUBBLE_LABEL}
+        label="包含以上的条目"
+        icon="privacy"
+        iconcolor="orange"
+        href="#about"
+        bubble="8"
+      ></star-li>
     </star-ul>
 
     <star-ul type=${UlType.BASE}>
-      <star-li type=${LiType.ICON_LABEL} label="通用" icon="play-circle" iconcolor="red" href="#general"></star-li>  
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="通用"
+        icon="play-circle"
+        iconcolor="red"
+        href="#general"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="关于" icon="privacy" iconcolor="purple" href="#about"></star-li>  
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="关于"
+        icon="privacy"
+        iconcolor="purple"
+        href="#about"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="辅助" icon="accessibility" iconcolor="blue" href="#about"></star-li>  
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="辅助"
+        icon="accessibility"
+        iconcolor="blue"
+        href="#about"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="成就" icon="achievement" iconcolor="gold" href="#about"></star-li>  
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="成就"
+        icon="achievement"
+        iconcolor="gold"
+        href="#about"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="插件" icon="addons" iconcolor="green" href="#about"></star-li>  
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="插件"
+        icon="addons"
+        iconcolor="green"
+        href="#about"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>  
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="查看所有图标"
+        icon="all-day"
+        href="#icon"
+      ></star-li>
     </star-ul>
 
     <star-ul type=${UlType.BASE}>
-      <star-li type=${LiType.ONLY_EDIT} label='星光麒麟' default='星光麒麟'></star-li>
+      <star-li
+        type=${LiType.ONLY_EDIT}
+        label="星光麒麟"
+        default="星光麒麟"
+      ></star-li>
     </star-ul>
 
     <star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
@@ -69,19 +150,39 @@ export class PanelRoot extends LitElement {
     </star-ul>
 
     <star-ul type=${UlType.BASE}>
-      <star-li type=${LiType.INFO_LABEL} label='无线局域网地址' value=${this.wlanMacAddress}></star-li>
+      <star-li
+        type=${LiType.INFO_LABEL}
+        label="无线局域网地址"
+        value=${this.wlanMacAddress}
+      ></star-li>
       <hr />
-      <star-li type=${LiType.INFO_LABEL} label='可用容量' value=${this.availableCapability}></star-li>
+      <star-li
+        type=${LiType.INFO_LABEL}
+        label="可用容量"
+        value=${this.availableCapability}
+      ></star-li>
     </star-ul>
 
-    <star-ul type=${UlType.HEADER_FOOTER} title="其他设备" text=${this.otherdevice}>
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="其他设备"
+      text=${this.otherdevice}
+    >
       <star-li type=${LiType.BASE}>自动加入热点</star-li>
     </star-ul>
 
     <star-ul type=${UlType.ONLY_HEADER} title="保障详情">
-      <star-li type=${LiType.INFO_LABEL} label='硬件保障' value='在保障范围内'></star-li>
+      <star-li
+        type=${LiType.INFO_LABEL}
+        label="硬件保障"
+        value="在保障范围内"
+      ></star-li>
       <hr />
-      <star-li type=${LiType.INFO_LABEL} label='技术支持' value='在保障范围内'></star-li>
+      <star-li
+        type=${LiType.INFO_LABEL}
+        label="技术支持"
+        value="在保障范围内"
+      ></star-li>
     </star-ul>
   `
 
@@ -92,9 +193,7 @@ export class PanelRoot extends LitElement {
   }
 
   public static override get styles(): CSSResultArray {
-    return [
+    return [sharedStyles]
-      sharedStyles
-    ];
   }
 }
 

vite.config.ts

@@ -5,10 +5,10 @@ export default defineConfig({
   build: {
     lib: {
       entry: 'src/my-element.ts',
-      formats: ['es']
+      formats: ['es'],
     },
     rollupOptions: {
-      external: /^lit/
+      external: /^lit/,
-    }
+    },
-  }
+  },
 })