From ed98ecd409ed8d528c3184f6e96931894129e188 Mon Sep 17 00:00:00 2001
From: wangchangqi <wangchangqi@kylinos.cn>
Date: Tue, 16 Aug 2022 14:00:05 +0800
Subject: [PATCH] add li,ul,section,button,bubble and test pages

---
 .vscode/extensions.json                       |   7 +
 README.md                                     |  29 +-
 fonts/gaia-icons.ttf                          | Bin 0 -> 37304 bytes
 index.html                                    |  38 ++-
 src/components/bubble/bubble.ts               |  70 +++++
 src/components/button/button-styles.ts        |  23 ++
 src/components/button/button.ts               |  40 +++
 src/components/li/li.ts                       | 287 +++++++++++++++++
 src/components/section/section.ts             |  50 +++
 src/components/ul/ul.ts                       | 136 ++++++++
 src/index.ts                                  | 197 ++++++++++++
 src/my-element.ts                             | 125 --------
 src/test/panels/about/about.ts                |  44 +++
 .../general/about_machine/about_machine.ts    | 290 ++++++++++++++++++
 src/test/panels/general/general.ts            |  90 ++++++
 src/test/panels/general/update/auto_update.ts |  31 ++
 .../panels/general/update/update_system.ts    |  35 +++
 src/test/panels/icon/icon.ts                  | 286 +++++++++++++++++
 src/test/panels/root.ts                       | 105 +++++++
 src/test/panels/shared-styles.ts              |  11 +
 src/vite-env.d.ts                             |   1 -
 tsconfig.json                                 |   1 +
 22 files changed, 1763 insertions(+), 133 deletions(-)
 create mode 100644 .vscode/extensions.json
 create mode 100644 fonts/gaia-icons.ttf
 create mode 100644 src/components/bubble/bubble.ts
 create mode 100644 src/components/button/button-styles.ts
 create mode 100644 src/components/button/button.ts
 create mode 100644 src/components/li/li.ts
 create mode 100644 src/components/section/section.ts
 create mode 100644 src/components/ul/ul.ts
 create mode 100644 src/index.ts
 delete mode 100644 src/my-element.ts
 create mode 100644 src/test/panels/about/about.ts
 create mode 100644 src/test/panels/general/about_machine/about_machine.ts
 create mode 100644 src/test/panels/general/general.ts
 create mode 100644 src/test/panels/general/update/auto_update.ts
 create mode 100644 src/test/panels/general/update/update_system.ts
 create mode 100644 src/test/panels/icon/icon.ts
 create mode 100644 src/test/panels/root.ts
 create mode 100644 src/test/panels/shared-styles.ts
 delete mode 100644 src/vite-env.d.ts

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..9d05015
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "bashmish.es6-string-css",
+    "ecmel.vscode-html-css",
+    "bierner.lit-html"
+  ]
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 9c62168..00034d3 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,28 @@
-# StarElement
+# Star-Web-Components
 
-星光WebUI组件
\ No newline at end of file
+星光Web组件
+
+## 拉取
+
+```sh
+git clone ssh://git@172.20.184.160:7999/yr/star-web-components.git
+```
+
+## 提交
+
+从主线分支切出对应的 feature|bugfix|optimize 等关键词的分支。
+
+```sh
+git checkout -b feature-component-button master
+```
+
+## 示例运行
+
+pnpm 是npm包管理领域一个新的、领先的包管理器。
+
+若无 pnpm，请先进行全局安装及切换npm源至[国内镜像源](https://www.npmmirror.com/)。
+
+```sh
+pnpm install # 安装开发调试依赖包
+pnpm vite    # 使用vite运行示例
+```
diff --git a/fonts/gaia-icons.ttf b/fonts/gaia-icons.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..76c2dc473defb1c537f2b1303a47abb4e73fc3b1
GIT binary patch
literal 37304
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index fdee573..5a648a5 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,40 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Lit + TS</title>
-    <link rel="stylesheet" href="./src/index.css" />
-    <script type="module" src="/src/my-element.ts"></script>
+    <script type="module" src="/src/index.ts"></script>
   </head>
   <body>
-    <my-element>
-      <h1>Vite + Lit</h1>
-    </my-element>
+    <!-- main -->
+    <settings-app></settings-app>
+    <style>
+      * {
+        user-select: none;
+      }
+
+      html {
+        scrollbar-width: none;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        background: #f0f0f0;
+      }
+
+      @font-face {
+        font-family: "gaia-icons";
+        src: url("fonts/gaia-icons.ttf") format("truetype");
+        font-weight: 500;
+        font-style: normal;
+      }
+
+      :root {
+        --left-transform: -100vw;
+        --right-transform: +100vw;
+        --li-base-height: 43px;
+        --li-left-padding: 10px;
+        --li-right-padding: 10px;
+      }
+    </style>
   </body>
 </html>
diff --git a/src/components/bubble/bubble.ts b/src/components/bubble/bubble.ts
new file mode 100644
index 0000000..6a69058
--- /dev/null
+++ b/src/components/bubble/bubble.ts
@@ -0,0 +1,70 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('star-bubble')
+export class StarBubble extends LitElement {
+  @property({ type: Number }) number = 0
+
+  render() {
+    /**
+     * 窄方盒子里放圆球，圆球数字区间 [1, 99], 超过99显示99+。
+     * 数字可弹性伸缩。
+     */
+    if (this.number <= 0) return nothing
+    else if (this.number > 99) return html`
+      <div>
+        <span class='small'>99<sup>+</sup></span>
+      </div>
+    `
+    else return html`
+      <div>
+        <span>${this.number}</span>
+      </div>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      width: calc(var(--li-base-height) - 16px);  /* 尽量节省宽度 */
+      height: var(--li-base-height);
+    }
+
+    div {
+      display: flex;
+      width: 100%;
+      height: calc(100% - 16px);
+      top: 8px;
+      position: relative;
+      border-radius: 50%;
+      background-color: red;
+    }
+
+    span {
+      width: 100%;
+      height: 100%;
+      color: #fff;
+      line-height: 190%;
+      text-align: center;
+      font-weight: bold;
+      font-size: 14px;
+    }
+
+    span.small {
+      font-size: 12px;
+      line-height: 170%;
+    }
+
+    sup {
+      font-size: 10px;
+      max-width: 6px;
+      display: inline-block;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-bubble': StarBubble
+  }
+}
\ No newline at end of file
diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
new file mode 100644
index 0000000..1b23def
--- /dev/null
+++ b/src/components/button/button-styles.ts
@@ -0,0 +1,23 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  .test {
+    color: darkred;
+    font-weight: bold;
+    background-color: #ffffff;
+  }
+
+  button {
+    color: blue;
+    padding: 0;
+    width: 100%;
+    border: unset;
+    display: block;
+    font-size: 16px;
+    text-align: left;
+    background: unset;
+    padding-inline-start: var(--li-left-padding);
+    min-height: var(--li-base-height);
+    line-height: var(--li-base-height);
+  }
+`
\ No newline at end of file
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
new file mode 100644
index 0000000..fd67114
--- /dev/null
+++ b/src/components/button/button.ts
@@ -0,0 +1,40 @@
+import { html, LitElement, CSSResultArray, HTMLTemplateResult, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { sharedStyles } from './button-styles';
+
+export enum ButtonType {
+  BASE    = 'base'
+}
+
+@customElement('star-button')
+export class StarButton extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles
+    ];
+  }
+
+  @property({ type: ButtonType }) type = ''
+  @property({ type: String }) label = ''
+
+  getBaseButton(): HTMLTemplateResult {
+    return html`
+      <button>${this.label}</button>
+    `
+  }
+
+  render() {
+    switch(this.type) {
+      case ButtonType.BASE:   return this.getBaseButton()
+      default:
+        console.error('unhanled 【star-button】 type')
+        return nothing
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-button': StarButton
+  }
+}
\ No newline at end of file
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
new file mode 100644
index 0000000..b8807cd
--- /dev/null
+++ b/src/components/li/li.ts
@@ -0,0 +1,287 @@
+import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js';
+import '../bubble/bubble'
+
+export enum LiType {
+  BASE            = 'base',
+  BUBBLE_LABEL    = 'bubble-label',
+  ICON_LABEL      = 'icon-label',
+  INFO_LABEL      = 'info-label',
+  ONLY_EDIT       = 'only-edit',
+  ONLY_LABEL      = 'only-label',
+  ONLY_READ       = 'only-read',
+}
+
+@customElement('star-li')
+export class StarLi extends LitElement {
+  @property({ type: LiType }) type = ''
+  @property({ type: String }) label = ''
+  @property({ type: String }) value = ''
+  @property({ type: String }) default = ''
+  @property({ type: String }) href = ''
+  @property({ type: String }) icon = ''
+  @property({ type: String }) iconcolor = ''
+  @property({ type: Number }) bubble = 0
+
+  getbase(): HTMLTemplateResult {
+    return html`<li><slot></slot></li>`
+  }
+
+  getbubblelabel(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【bubblelabel】缺少 label 参数')
+      return nothing
+    }
+    if (!this.bubble) {
+      console.error('【star-ul】【bubblelabel】缺少 bubble 参数')
+      return nothing
+    }
+    
+    const classes = `${this.href ? 'hashref' : ''} ${this.icon ? 'hasicon' : ''}`
+    const colorstyle = this.iconcolor
+      ? html`<style>
+          a::before {
+            color: ${this.iconcolor} !important
+          }
+        </style>`
+      : nothing
+
+    return html`
+      <li>
+        ${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`
+          <a data-icon=${this.icon} class=${classes}>
+            ${colorstyle}
+            <span class="label">${this.label}</span>
+            <star-bubble number=${this.bubble}></star-bubble>
+          </a>
+        `}
+      </li>
+    `
+  }
+
+  geticonlabel(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【iconlabel】缺少 label 参数')
+      return nothing
+    }
+    if (!this.icon) {
+      console.error('【star-ul】【iconlabel】缺少 icon 参数')
+      return nothing
+    }
+    
+    const classes = this.href ? 'hasicon hashref' : 'hasicon'
+    const colorstyle = this.iconcolor
+      ? html`<style>
+          a::before {
+            color: ${this.iconcolor} !important
+          }
+        </style>`
+      : nothing
+
+    return html`
+      <li>
+        ${this.href ? html`
+          <a data-icon=${this.icon} class=${classes} href=${this.href}>
+            ${colorstyle}
+            <span class="label">${this.label}</span>
+          </a>
+        ` : html`
+          <a data-icon=${this.icon} class=${classes}>
+            ${colorstyle}
+            <span class="label">${this.label}</span>
+          </a>
+        `}
+      </li>
+    `
+  }
+
+  getinfolabel(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【info】缺少 label 参数')
+      return nothing
+    }
+    if (!this.value) {
+      console.error('【star-li】【info】缺少 value 参数')
+      return nothing
+    }
+
+    if (!this.href) {
+      return html`
+        <li>
+          <span class="infokey">${this.label}</span>
+          <span class="infovalue">${this.value}</span>
+        </li>
+      `
+    }
+    else {
+      return html`
+        <li class='hashref'>
+          <a href=${this.href} class='hashref'>
+            <span class="infokey">${this.label}</span>
+            <span class="infovalue">${this.value}</span>
+          </a>
+        </li>
+      `
+    }
+  }
+
+  getonlylabel(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【labeliconhref】缺少 label 参数')
+      return nothing
+    }
+
+    return html`
+      <li>
+        ${this.href ? html`
+          <a href=${this.href} class='hashref'>
+            <span class="label">${this.label}</span>
+          </a>
+        ` : html`
+          <a>
+            <span class="label">${this.label}</span>
+          </a>
+        `}
+      </li>
+    `
+  }
+
+  getonlyread(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【onlyread】缺少 label 参数')
+      return nothing
+    }
+
+    return html`
+      <li>
+        <span class='onlyread'>${this.label}</span>
+      </li>
+    `
+  }
+
+  getonlyedit(): HTMLTemplateResult | typeof nothing {
+    if (!this.label) {
+      console.error('【star-ul】【onlyedit】缺少 label 参数')
+      return nothing
+    }
+    if (!this.default) {
+      console.error('【star-ul】【onlyedit】缺少 default 参数')
+      return nothing
+    }
+
+    return html`
+      <li>
+        <input value="${this.label}" placeholder="${this.default}">
+      </li>
+    `
+  }
+
+  render() {
+    switch (this.type) {
+      case LiType.BASE:               return this.getbase()
+      case LiType.BUBBLE_LABEL:       return this.getbubblelabel()
+      case LiType.ICON_LABEL:         return this.geticonlabel()
+      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
+    }
+  }
+
+  static styles = css`
+    :host {
+      width: inherit;
+    }
+    li {
+      width: inherit;
+      display: flex;
+      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须与最右侧文字对齐 */
+    }
+    li.hashref {
+      /* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
+    }
+    a {
+      display: flex;
+      text-decoration: none;
+      color: #000;
+      width: 100%;
+    }
+    a.hasicon::before, a.hashref::after {
+      flex: 1;
+      font-size: 25px;
+      min-width: 25px;
+      max-width: 25px;
+      font-family: "gaia-icons";
+    }
+    a.hasicon::before {
+      color: #657073;
+      text-align: left;
+      content: attr(data-icon);
+      padding-inline-end: var(--li-right-padding);
+    }
+    a.hashref::after {
+      color: #a5acae;
+      text-align: right;
+      content: "right-light";
+    }
+    input {
+      width: 100vw;
+      max-width: 500px;
+      padding: 0;
+      border: 0;
+      height: inherit;
+      outline: none;
+      box-sizing: border-box;
+      vertical-align: top;
+      border-radius: 6px;
+      background-color: transparent;
+      font-size: 16px;
+    }
+    span.infokey, span.label {
+      flex: 1;
+      text-align: left;
+    }
+    span.infovalue {
+      /* flex: 1; */ /* 利用自动挤压 */
+      text-align: right;
+      color: #aaa;
+    }
+    span.onlyread {
+      color: #aaa;
+      font-size: clamp(0.55rem, 2.3vw, 1.2rem);
+    }
+    span.text {
+      flex: 8;
+      text-align: left;
+    }
+    span.bubble {
+      flex: 1;
+      height: inherit;
+      background-color: red;
+    }
+    span.next {
+      flex: 1;
+      text-align: right;
+      color: #aaa;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-li': StarLi
+  }
+}
\ No newline at end of file
diff --git a/src/components/section/section.ts b/src/components/section/section.ts
new file mode 100644
index 0000000..92fbaf6
--- /dev/null
+++ b/src/components/section/section.ts
@@ -0,0 +1,50 @@
+import { html, css, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+@customElement('star-animate-section')
+export class StarAnimateSection extends LitElement {
+  @property()
+  transform = ''
+
+  @state()
+  bar = ''
+
+  render() {
+    const withTransform = this.transform ? html`
+      <style>
+        :host {
+          transform: ${this.transform};
+        }
+      </style>
+    ` : nothing
+
+    return html`
+      ${withTransform}
+      <section>
+        <slot></slot>
+      </section>
+    `
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      width: 100%; /* 100vw会有x轴溢出 */
+      height: 100vh;
+      overflow: auto;
+      /* height: calc(100vh + 1px); */ /* 手动制造溢出 */
+      animation-duration: .3s;
+      background-color: #f0f0f0;
+    }
+
+    section {
+      /* overflow: auto; */
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-animate-section': StarAnimateSection
+  }
+}
\ No newline at end of file
diff --git a/src/components/ul/ul.ts b/src/components/ul/ul.ts
new file mode 100644
index 0000000..457f3e8
--- /dev/null
+++ b/src/components/ul/ul.ts
@@ -0,0 +1,136 @@
+import { html, css, LitElement, HTMLTemplateResult, nothing } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export enum UlType {
+  BASE            = 'base',
+  ONLY_HEADER     = 'onlyheader',
+  ONLY_FOOTER     = 'onlyfooter',
+  HEADER_FOOTER   = 'headerfooter',
+}
+
+@customElement('star-ul')
+export class StarUl extends LitElement {
+  @property({ type: UlType }) type = ''
+  @property({ type: String }) title = ''
+  @property({ type: String }) text = ''
+
+  getbase(): HTMLTemplateResult {
+    return html`
+      <ul>
+        <slot></slot>
+      </ul>
+    `
+  }
+
+  getonlyheader(): HTMLTemplateResult | typeof nothing {
+    if (!this.title) {
+      console.error('【star-ul】【onlyheader】缺少 title 参数')
+      return nothing
+    }
+
+    return html`
+      <header>${this.title}</header>
+      <ul>
+        <slot></slot>
+      </ul>
+    `
+  }
+
+  getonlyfooter(): HTMLTemplateResult | typeof nothing {
+    if (!this.text) {
+      console.error('【star-ul】【onlyfooter】缺少 text 参数')
+      return nothing
+    }
+
+    return html`
+      <ul>
+        <slot></slot>
+      </ul>
+      <footer>${unsafeHTML(this.text)}</footer>
+    `
+  }
+
+  getheaderfooter(): HTMLTemplateResult | typeof nothing {
+    if (!this.title) {
+      console.error('【star-ul】【headerfooter】缺少 title 参数')
+      return nothing
+    }
+
+    if (!this.text) {
+      console.error('【star-ul】【headerfooter】缺少 text 参数')
+      return nothing
+    }
+
+    return html`
+      <header>${this.title}</header>
+      <ul>
+        <slot></slot>
+      </ul>
+      <footer>${unsafeHTML(this.text)}</footer>
+    `
+  }
+
+  render() {
+    if (!this.type) {
+      console.error('使用【star-ul】前请先写明使用的类型(type)')
+      return nothing
+    }
+
+    switch (this.type) {
+      case UlType.BASE:             return this.getbase()
+      case UlType.HEADER_FOOTER:    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
+    }
+  }
+
+  static styles = css`
+    :host {
+      width: inherit;
+      display: block;
+      margin: 20px auto;
+      max-width: 88vw;
+    }
+
+    ul {
+      list-style: none;
+      flex-direction: column;
+      display: flex;
+      width: 88vw;
+      padding: 0;
+      margin: 10px auto;
+      max-width: 88vw;
+      background: #fff;
+      box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
+      border-radius: 10px;
+    }
+
+    header, footer {
+      color: #888;
+      margin-left: 10px;
+      font-size: 12px;
+    }
+
+    star-ul-base {
+      margin: 8px 0 12px 0; /* override child(star-ul-base) */
+    }
+
+    footer a {
+      text-decoration: unset;
+    }
+
+    footer a:visited {
+      color: blue;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-ul': StarUl
+  }
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..3d232ba
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,197 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, query, state } from 'lit/decorators.js'
+import './components/ul/ul'
+import './components/li/li'
+import './components/section/section'
+import { StarAnimateSection } from './components/section/section'
+
+import './test/panels/root'
+
+@customElement('settings-app')
+export class SettingsApp extends LitElement {
+
+  @query('star-animate-section#root')   private rootSection!: StarAnimateSection;
+
+  @state() sectionsMap = new Map()
+
+  @state() prevSection: StarAnimateSection | null = null;
+  @state() nextSection: 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 oldURL = (evt as HashChangeEvent).oldURL;
+        const goPanelHash = new URL(newURL).hash;
+        this.navigate(goPanelHash)
+        break;
+      }
+  }
+
+  /**
+   * 
+   * @param panelhash
+   */
+  dynamicLoadSection(panelhash: String): StarAnimateSection | null {
+    if (this.sectionsMap.has(panelhash)) return this.sectionsMap.get(panelhash)
+
+    const panelname = panelhash.slice(1)
+    const section = document.createElement('star-animate-section')
+    section.setAttribute('id', panelname)
+    section.setAttribute('class', 'inactive r')
+
+    const panel = document.createElement('panel-' + panelname)
+    if (!panel) return null
+
+    section.appendChild(panel)
+    this.shadowRoot?.appendChild(section)
+    this.sectionsMap.set(panelhash, section)
+
+    return section
+  }
+
+  navigate(panelhash: String) {
+    console.log('goto', panelhash)
+    if (this.currentSection === null) this.currentSection = this.rootSection
+    this.prevSection = this.currentSection
+
+    if (panelhash === '') {
+      panelhash = 'root'
+      this.nextSection = this.rootSection
+    } else {
+      const wantSection: StarAnimateSection | null = 
+        document.querySelector('star-animate-section' + panelhash);
+      if (wantSection === null) {
+        const loadsection = this.dynamicLoadSection(panelhash)
+        if (loadsection === null) return console.error('该panel不存在', panelhash)
+        else                      this.nextSection = loadsection
+      } else {
+        this.nextSection = wantSection
+      }
+    }
+    this.currentSection = this.nextSection
+    console.log(this.prevSection, this.currentSection)
+
+    this.nextSection.className = 'active r2m'
+    this.prevSection.className = 'm2l'
+    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 })
+    return
+
+    // switch (panelhash) {
+    //   case '#icon':
+    //     this.nextSection.className = 'active r2m'
+    //     this.prevSection.className = 'm2l'
+    //     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 })
+    //     break
+    //   case '#root':
+    //   default:
+    //     this.nextSection.className = 'active l2m'
+    //     this.prevSection.className = 'm2r'
+    //     this.prevSection.addEventListener('animationend', (e) => {
+    //       console.log(e)
+    //       this.nextSection?.classList.remove('l2m');
+    //       this.prevSection?.classList.remove('m2r');
+    //       this.prevSection?.classList.add('inactive', 'r')
+    //     }, { once: true })
+    //     break;
+    // }
+  }
+
+  render() {
+    window.addEventListener('hashchange', this)
+
+    return html`
+      <star-animate-section id="root" class="active">
+        <panel-root></panel-root>
+      </star-animate-section>
+    `
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      width: 100vw;
+    }
+    .active {
+      display: block;
+    }
+    .inactive {
+      display: none;
+    }
+    .r2m { 
+      animation-name: right2middle;
+    }
+    .m2l {
+      animation-name: middle2left;
+    }
+    .l2m {
+      animation-name: left2middle;
+    }
+    .m2r {
+      animation-name: middle2right;
+    }
+  
+    .r {
+      transform: translateX(var(--right-transform));
+    }
+    .l {
+      transform: translateX(var(--left-transform));
+    }
+
+    @keyframes right2middle {
+      from {
+        transform: translateX(var(--right-transform));
+      }
+      to {
+        transform: translateX(0);
+      }
+    }
+    @keyframes middle2left {
+      from {
+        transform: translateX(0);
+        background-iconcolor: #f0f0f0;
+      }
+      to {
+        transform: translateX(var(--left-transform));
+        background-iconcolor: #e0e0e0;
+      }
+    }
+    @keyframes left2middle {
+      from {
+        transform: translateX(var(--left-transform));
+        background-iconcolor: #e0e0e0;
+      }
+      to {
+        transform: translateX(0);
+        background-iconcolor: #f0f0f0;
+      }
+    }
+    @keyframes middle2right {
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(var(--right-transform));
+      }
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'settings-app': SettingsApp
+  }
+}
\ No newline at end of file
diff --git a/src/my-element.ts b/src/my-element.ts
deleted file mode 100644
index da680eb..0000000
--- a/src/my-element.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { html, css, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import litLogo from './assets/lit.svg'
-
-/**
- * An example element.
- *
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('my-element')
-export class MyElement extends LitElement {
-  /**
-   * Copy for the read the docs hint.
-   */
-  @property()
-  docsHint = 'Click on the Vite and Lit logos to learn more'
-
-  /**
-   * The number of times the button has been clicked.
-   */
-  @property({ type: Number })
-  count = 0
-
-  render() {
-    return html`
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
-        </a>
-        <a href="https://lit.dev" target="_blank">
-          <img src=${litLogo} class="logo lit" alt="Lit logo" />
-        </a>
-      </div>
-      <slot></slot>
-      <div class="card">
-        <button @click=${this._onClick} part="button">
-          count is ${this.count}
-        </button>
-      </div>
-      <p class="read-the-docs">${this.docsHint}</p>
-    `
-  }
-
-  private _onClick() {
-    this.count++
-  }
-
-  static styles = css`
-    :host {
-      max-width: 1280px;
-      margin: 0 auto;
-      padding: 2rem;
-      text-align: center;
-    }
-
-    .logo {
-      height: 6em;
-      padding: 1.5em;
-      will-change: filter;
-    }
-    .logo:hover {
-      filter: drop-shadow(0 0 2em #646cffaa);
-    }
-    .logo.lit:hover {
-      filter: drop-shadow(0 0 2em #325cffaa);
-    }
-
-    .card {
-      padding: 2em;
-    }
-
-    .read-the-docs {
-      color: #888;
-    }
-
-    h1 {
-      font-size: 3.2em;
-      line-height: 1.1;
-    }
-
-    a {
-      font-weight: 500;
-      color: #646cff;
-      text-decoration: inherit;
-    }
-    a:hover {
-      color: #535bf2;
-    }
-
-    button {
-      border-radius: 8px;
-      border: 1px solid transparent;
-      padding: 0.6em 1.2em;
-      font-size: 1em;
-      font-weight: 500;
-      font-family: inherit;
-      background-color: #1a1a1a;
-      cursor: pointer;
-      transition: border-color 0.25s;
-    }
-    button:hover {
-      border-color: #646cff;
-    }
-    button:focus,
-    button:focus-visible {
-      outline: 4px auto -webkit-focus-ring-color;
-    }
-
-    @media (prefers-color-scheme: light) {
-      a:hover {
-        color: #747bff;
-      }
-      button {
-        background-color: #f9f9f9;
-      }
-    }
-  `
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'my-element': MyElement
-  }
-}
diff --git a/src/test/panels/about/about.ts b/src/test/panels/about/about.ts
new file mode 100644
index 0000000..af5ee67
--- /dev/null
+++ b/src/test/panels/about/about.ts
@@ -0,0 +1,44 @@
+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';
+
+@customElement('panel-about')
+export class PanelAbout extends LitElement {
+  @property()
+  foo = ''
+
+  @state()
+  bar = ''
+
+  render() {
+    return html`
+      <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-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-ul>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-about': PanelAbout
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/general/about_machine/about_machine.ts b/src/test/panels/general/about_machine/about_machine.ts
new file mode 100644
index 0000000..e0c49fe
--- /dev/null
+++ b/src/test/panels/general/about_machine/about_machine.ts
@@ -0,0 +1,290 @@
+import { html, LitElement, CSSResultArray } from 'lit'
+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 { nothing } from 'lit'
+
+type LINENODE = {
+  node: String,
+  nodetype: LiType,
+  label: String,
+  value?: String,
+  href?: String,
+}
+
+type BLOCKNODE = {
+  node: String,
+  nodetype: UlType,
+  nodes: Array<LINENODE>,
+  nodetitle?: String,
+  nodevalue?: String,
+}
+
+@customElement('panel-about-machine')
+export class PanelAboutMachine extends LitElement {
+  @property()
+  foo = ''
+
+  @state() paneljson = [
+    {
+      node: '<star-ul>',
+      nodetype: UlType.BASE,
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '名称',
+          value: 'StarElement',
+          href: '#icon'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '软件版本',
+          value: '15.5'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '型号名称',
+          value: 'iPhone 13 Pro'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '型号号码',
+          value: 'MDNFAF3H/A'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '序列号',
+          value: 'RFAFAFF12432GM'
+        },
+      ]
+    },
+    {
+      node: 'star-ul',
+      nodetype: UlType.BASE,
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '有限保修',
+          value: '到期日期: 2025/5/25',
+          href: '#icon'
+        },
+      ]
+    },
+    {
+      node: '<star-ul>',
+      nodetype: UlType.BASE,
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '歌曲',
+          value: '0'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '视频',
+          value: '430'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '照片',
+          value: '6050'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '应用程序',
+          value: '154'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '总容量',
+          value: '256 GB'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '可用容量',
+          value: '56.42 GB'
+        }
+      ]
+    },
+    {
+      node: '<star-ul>',
+      nodetype: UlType.BASE,
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '无线局域网地址',
+          value: '30:E2:D3:4A:C3:5D'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '蓝牙',
+          value: '30:E2:D3:4A:C3:5D'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '调制解调器固件',
+          value: '1.61.00'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.ONLY_LABEL,
+          label: 'SEID',
+          href: '#icon'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '运营商锁',
+          value: '无 SIM 卡限制'
+        }
+      ]
+    },
+    {
+      node: '<star-ul>',
+      nodetype: UlType.ONLY_HEADER,
+      nodetitle: '主号',
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '网络',
+          value: '中国联通'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '运营商',
+          value: '中国联通 50.0'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: 'IMEI',
+          value: '35 717429 442903 2'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: 'ICCID',
+          value: '89860118802136995387'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: 'MEID',
+          value: '35717429442903'
+        }
+      ]
+    },
+    {
+      node: '<star-ul>',
+      nodetype: UlType.ONLY_HEADER,
+      nodetitle: '副号',
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '网络',
+          value: '中国移动'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: '运营商',
+          value: '中国移动 50.0'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: 'IMEI',
+          value: '35 717429 442903 2'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: 'ICCID',
+          value: '89860118802136995387'
+        },
+        {
+          node: 'star-li',
+          nodetype: LiType.INFO_LABEL,
+          label: 'MEID',
+          value: '35717429442903'
+        }
+      ]
+    },
+    {
+      node: 'star-ul',
+      nodetype: UlType.BASE,
+      nodes: [
+        {
+          node: 'star-li',
+          nodetype: LiType.ONLY_LABEL,
+          label: '证书信任设置',
+          href: '#icon'
+        },
+      ]
+    },
+  ]
+
+  render() {
+    return html`
+      ${repeat(this.paneljson, (block: BLOCKNODE) => html`
+        <star-ul type=${block.nodetype} title=${block.nodetitle}>
+          ${repeat(block.nodes, (node: LINENODE, index) => html`
+            ${node.href
+              ? html`
+                <star-li
+                  type=${node.nodetype}
+                  label=${node.label}
+                  value=${node.value}
+                  href=${node.href}
+                ></star-li>
+              `
+              : html`
+                <star-li
+                  type=${node.nodetype}
+                  label=${node.label}
+                  value=${node.value}
+                ></star-li>
+              `
+            }
+            ${index < block.nodes.length - 1
+              ? html`<hr>` // 分隔线
+              : nothing
+            }
+          `)}
+        </star-ul>
+      `)}
+    `
+  }
+  
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-about-machine': PanelAboutMachine
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/general/general.ts b/src/test/panels/general/general.ts
new file mode 100644
index 0000000..7b79d42
--- /dev/null
+++ b/src/test/panels/general/general.ts
@@ -0,0 +1,90 @@
+import { html, LitElement, CSSResultArray } from 'lit'
+import { customElement } 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 './about_machine/about_machine'
+import './update/auto_update'
+import './update/update_system'
+
+@customElement('panel-general')
+export class PanelGeneral extends LitElement {
+  @eventOptions({passive: false})
+  handleEvent(evt: Event) {
+    switch (evt.type) {
+      case 'click':
+        if ((evt.target as StarButton).label === '关机') {
+          alert('关机')
+        }
+        break;
+    }
+  }
+
+  render() {
+    return html`
+      <star-ul type=${UlType.BASE}>
+        <star-li type=${LiType.ONLY_LABEL} 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>  
+        <hr>
+        <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='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>  
+        <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>  
+        <hr>
+        <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>  
+        <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-ul>
+      
+      <star-ul type=${UlType.BASE}>
+        <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>  
+        <hr>
+        <star-button type=${ButtonType.BASE} label='关机' @click=${this}></star-button>
+      </star-ul>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-general': PanelGeneral
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/general/update/auto_update.ts b/src/test/panels/general/update/auto_update.ts
new file mode 100644
index 0000000..637e130
--- /dev/null
+++ b/src/test/panels/general/update/auto_update.ts
@@ -0,0 +1,31 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { LiType } from '../../../../components/li/li'
+import { UlType } from '../../../../components/ul/ul'
+
+@customElement('panel-auto-update')
+export class PanelAutoUpdate extends LitElement {
+  @property()
+  foo = ''
+
+  @state()
+  bar = ''
+
+  render() {
+    return html`
+      <star-ul type=${UlType.BASE}>
+        <star-li type=${LiType.ICON_LABEL} label="查看所有图标" icon="all-day" href="#icon"></star-li>  
+      </star-ul>
+    `
+  }
+
+  static styles = css`
+    
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-auto-update': PanelAutoUpdate
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/general/update/update_system.ts b/src/test/panels/general/update/update_system.ts
new file mode 100644
index 0000000..152696d
--- /dev/null
+++ b/src/test/panels/general/update/update_system.ts
@@ -0,0 +1,35 @@
+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'
+
+@customElement('panel-update-system')
+export class PanelUpdateSystem extends LitElement {
+  @property()
+  foo = ''
+
+  @state()
+  bar = ''
+
+  render() {
+    return html`
+      <star-ul type=${UlType.BASE}>
+        <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-ul>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-update-system': PanelUpdateSystem
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/icon/icon.ts b/src/test/panels/icon/icon.ts
new file mode 100644
index 0000000..38910ba
--- /dev/null
+++ b/src/test/panels/icon/icon.ts
@@ -0,0 +1,286 @@
+import { html, LitElement, CSSResultArray } from 'lit'
+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';
+
+@customElement('panel-icon')
+export class PanelIcon extends LitElement {
+  @property() foo = ''
+
+  @state() icons = [
+    "2g",
+    "3g",
+    "4g",
+  
+    "accessibility",
+    "achievement",
+    "add-contact",
+    "add",
+    "addons",
+  
+    "airplane",
+    "alarm-clock",
+    "alarm-stop",
+    "alarm",
+  
+    "album",
+    "all-day",
+    "arrow-left",
+    "arrow-right",
+    "artist",
+    "attachment",
+    "battery-0",
+    "battery-1",
+    "battery-2",
+    "battery-3",
+    "battery-4",
+    "battery-5",
+    "battery-6",
+    "battery-7",
+    "battery-8",
+    "battery-9",
+    "battery-10",
+    "battery-charging",
+    "battery-unknown",
+    
+    "bluetooth-a2dp",
+    "bluetooth-circle",
+    "bluetooth-transfer-circle",
+    "bluetooth-transfer",
+    "bluetooth",
+    
+    "brightness",
+    "browsing",
+    "bug",
+  
+    "calendar",
+    "call-bluetooth",
+    "call-emergency",
+    "call-forwarding",
+    "call-hang-up",
+    "call-hold",
+    "call-incoming",
+    "call-merge",
+    "call-missed",
+    "call-outgoing",
+    "call-reversed",
+    "call-ringing",
+    "call",
+    "callback-emergency",
+  
+    "camera",
+    "change-wallpaper",
+    "clear-input-left",
+    "clear-input-right",
+  
+    "close",
+    "compose",
+    "contact-find",
+    "contacts",
+    "crashed",
+    "crop",
+    
+    "data",
+    "delete",
+    "developer",
+    "device-info",
+    "dismiss-keyboard",
+    "do-not-track",
+    "download-circle",
+    "download",
+  
+    "edge",
+    "edit-contact",
+    "edit-image",
+    "edit",
+    "effects",
+    "email-forward",
+    "email-mark-read",
+    "email-mark-unread",
+    "email-move",
+    "email-reply",
+    "email",
+  
+    "exclamation",
+    "expand-left",
+    "expand-right",
+    "facebook",
+    "feedback",
+    "find",
+    "firefox",
+    "flag",
+    "flash-auto",
+    "flash-off",
+    "flash-on",
+    "focus-locked",
+    "focus-locking",
+    
+    "gesture",
+    "gmail",
+    "grid-circular",
+    "grid",
+    "gsm",
+  
+    "hdr-boxed",
+    "hdr",
+    "headphones",
+    "help",
+    "homescreen",
+    "hspa-plus",
+    "hspa",
+    
+    "import-memorycard-circle",
+    "incoming-sms",
+    "info",
+  
+    "keyboard-circle",
+    "keyboard",
+    
+    "languages",
+    "left-light",
+    "left",
+    "link",
+    "location",
+    "lock",
+  
+    "media-storage",
+    "menu",
+    "messages",
+    "mic",
+    "minus",
+    "moon",
+    "more",
+    "mute",
+  
+    "nfc",
+    "no-sim",
+    "notifications",
+  
+    "o",
+    "outgoing-sms",
+    "outlook",
+    
+    "pause",
+    "picture-size",
+    "play",
+    "play-circle",
+    "playlist",
+    "privacy",
+    
+    "recent-calls",
+    "reload",
+    "repeat-once",
+    "repeat",
+    "reply-all",
+    "right-light",
+    "right",
+    "rocket",
+    "rotate",
+    
+    "scene",
+    "sd-card",
+    "search",
+    "seek-back",
+    "seek-forward",
+    "select",
+    "self-timer",
+    "send-left",
+    "send-right",
+    "settings",
+    "share",
+    "shuffle",
+  
+    "signal-0",
+    "signal-1",
+    "signal-2",
+    "signal-3",
+    "signal-4",
+    "signal-5",
+    "signal-roaming",
+  
+    "sim-toolkit",
+    "sim",
+  
+    "skip-back",
+    "skip-forward",
+    
+    "songs",
+    "sound-max",
+    "sound-min",
+    "star-empty",
+    "star-full",
+  
+    "stop",
+    "storage-circle",
+    "storage",
+    "switch",
+    "sync",
+  
+    "tethering",
+    "themes",
+    "tick-circle",
+    "tick",
+    "time",
+    "toggle-camera-front",
+    "toggle-camera-rear",
+    "topup-with-code",
+    "topup",
+    "twitter",
+    
+    "undo-circular",
+    "undo",
+    "unlock",
+    "update-balance",
+    "usb",
+    "user",
+  
+    "vibrate",
+    "video-mic",
+    "video-size",
+    "video",
+    "voicemail",
+    
+    "wallpaper",
+    "wifi-1",
+    "wifi-2",
+    "wifi-3",
+    "wifi-4",
+    "wifi-permissions"
+  ]
+
+  getRangeColor() {
+    const r = ((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');
+    return "#"+r+g+b;  
+  }
+
+  render() {
+    return html`
+      <star-ul type=${UlType.HEADER_FOOTER} 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}
+        `)}
+      </star-ul>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-icon': PanelIcon
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
new file mode 100644
index 0000000..75a848b
--- /dev/null
+++ b/src/test/panels/root.ts
@@ -0,0 +1,105 @@
+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 './about/about'
+import './icon/icon'
+import './general/general'
+
+type SEID = String
+
+@customElement('panel-root')
+export class PanelRoot extends LitElement {
+  @state() wlanMacAddress = "31:D2:3F:4E:D2:5B"
+  @state() availableCapability = "50.26GB"
+  @state() seid = this.genMockSeid()
+  @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)])
+      .join('')
+  }
+
+  rootPanel = html`
+    <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>
+      <hr/>
+      <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>
+      <hr/>
+      <star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=1></star-li>
+      <hr/>
+      <star-li type=${LiType.BUBBLE_LABEL} label="带气泡的条目" bubble=99></star-li>
+      <hr/>
+      <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>
+      <hr/>
+      <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>  
+      <hr/>
+      <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>  
+      <hr/>
+      <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>  
+      <hr/>
+      <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-ul>
+
+    <star-ul type=${UlType.ONLY_HEADER} title="头部有文字" text="尾部有文字">
+      <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
+      <hr/>
+      <star-li type=${LiType.ONLY_READ} label=${this.seid}></star-li>
+    </star-ul>
+
+    <star-ul type=${UlType.BASE}>
+      <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-ul>
+    
+    <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>
+      <hr/>
+      <star-li type=${LiType.INFO_LABEL} label='技术支持' value='在保障范围内'></star-li>
+    </star-ul>
+  `
+
+  render() {
+    return html`
+      ${this.rootPanel}
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-root': PanelRoot
+  }
+}
\ No newline at end of file
diff --git a/src/test/panels/shared-styles.ts b/src/test/panels/shared-styles.ts
new file mode 100644
index 0000000..70b4b0d
--- /dev/null
+++ b/src/test/panels/shared-styles.ts
@@ -0,0 +1,11 @@
+import { css, CSSResult } from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  hr {
+    margin: 0;
+    padding: 0;
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    border-color: #ccc;
+  }
+`
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
deleted file mode 100644
index 11f02fe..0000000
--- a/src/vite-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/tsconfig.json b/tsconfig.json
index b080b2b..be3a862 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "module": "ESNext",
+    "target": "ES2022",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "declaration": true,
     "emitDeclarationOnly": true,