(chore) format:prettier code

2022-09-19 09:45:47 +08:00 · 2022-09-19 09:45:47 +08:00 · 758831ab40
parent 71516545b8
commit 758831ab40
53 changed files with 762 additions and 729 deletions
--- a/src/components/blur/blur.ts
+++ b/src/components/blur/blur.ts
@ -7,7 +7,7 @@ export class StarBlur extends LitElement {
  @property({type: Boolean}) openblur = false
  @property({type: String}) imagesrc = ''

-  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+  attributeChangedCallback(name: string, _old: string, value: string): void {
    super.attributeChangedCallback(name, _old, value)

    if (name === 'imagesrc') {
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@ -1,11 +1,12 @@
 # star-button

-星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8月27日）
+星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8 月 27 日）

 ## 介绍

-star-button属性：
-1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。
+star-button 属性：
+
+1. type：按钮类型，包括文本按钮 base、图标文本按钮 iconlabel 和图标按钮 icononly。

 ```html demo
 <star-button type="base" label="文本按钮"></star-button>
@ -13,18 +14,28 @@ star-button属性：
 <star-button type="icononly" label="图标按钮"></star-button>
 ```

-2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。
+2. variant：按钮样式，包括 accent、primary、secondary、negative、black 和 white，默认为 accent。

 ```html demo
 <star-button type="base" variant="accent" label="accent"></star-button>
 <star-button type="base" variant="primary" label="primary"></star-button>
 ```

-3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
+3. size：控制按钮大小，包括 small、medium、large 和 extralarge 四种，默认为 medium。

 ```html demo
-<star-button type="base" variant="accent" label="accent" size="small"></star-button>
-<star-button type="base" variant="primary" label="primary" size="large"></star-button>
+<star-button
+  type="base"
+  variant="accent"
+  label="accent"
+  size="small"
+></star-button>
+<star-button
+  type="base"
+  variant="primary"
+  label="primary"
+  size="large"
+></star-button>
 ```

 4. label：显示按钮名，如省略则显示为“默认”。
@ -39,16 +50,31 @@ star-button属性：
 <star-button type="base" variant="accent" label="禁用" disabled></star-button>
 ```

-6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。
+6. treatment：控制按钮填充状态，包括 fill 和 outline，默认为：fill。

 ```html demo
-<star-button type="base" variant="accent" label="fill" treatment="fill"></star-button>
-<star-button type="base" variant="accent" label="outline" treatment="outline"></star-button>
+<star-button
+  type="base"
+  variant="accent"
+  label="fill"
+  treatment="fill"
+></star-button>
+<star-button
+  type="base"
+  variant="accent"
+  label="outline"
+  treatment="outline"
+></star-button>
 ```

-7. icon和iconcolor：控制图标样式和其颜色。
+7. icon 和 iconcolor：控制图标样式和其颜色。

 ```html demo
-<star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button>
+<star-button
+  type="base"
+  variant="accent"
+  label="图标按钮"
+  icon="alarm"
+  iconcolor="white"
+></star-button>
 ```
-
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@ -56,42 +56,42 @@ export const sharedStyles: CSSResult = css`

  .accent {
    background-color: #0469e3;
-    color: #FFFFFF;
+    color: #ffffff;
  }

  .accent:hover {
-    background-color: #015BC7;
+    background-color: #015bc7;
    box-shadow: none;
  }

  .primary {
    background-color: #222222;
-    color: #EBEBEB;
+    color: #ebebeb;
  }

  .primary:hover {
    background-color: #000000;
-    color: #FFFFFF;
+    color: #ffffff;
  }

  .secondary {
-    background-color: #E6E6E6;
+    background-color: #e6e6e6;
    color: #222222;
  }

  .secondary:hover {
-    background-color: #D5D5D5;
+    background-color: #d5d5d5;
    color: #d42222;
  }

  .negative {
-    background-color: #B30202;
-    color: #EBEBEB;
+    background-color: #b30202;
+    color: #ebebeb;
  }

  .negative:hover {
-    background-color: #A20101;
-    color: #EBEBEB;
+    background-color: #a20101;
+    color: #ebebeb;
  }

  .black {
@ -100,18 +100,18 @@ export const sharedStyles: CSSResult = css`
  }

  .white {
-    background-color: #FFFFFF;
-    color: #EBEBEB;
+    background-color: #ffffff;
+    color: #ebebeb;
  }

  .disabled {
-    background-color: #E6E6E6;
+    background-color: #e6e6e6;
    cursor: default;
    pointer-events: none;
  }

  .fill.primary {
-    color: #FFFFFF;
+    color: #ffffff;
  }

  .fill.primary:hover {
@ -125,7 +125,7 @@ export const sharedStyles: CSSResult = css`
  }

  .outline.primary:hover {
-    background-color: #D5D5D5;
+    background-color: #d5d5d5;
    border-style: solid;
    color: #000000;
  }
@ -153,7 +153,7 @@ export const sharedStyles: CSSResult = css`
    min-width: 32.2px;
    padding: 0px;
  }
-  .start-button-confirm{
+  .start-button-confirm {
    display: inline-block;
  }
 `
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@ -48,9 +48,7 @@ export class StarButton extends LitElement {
  getBaseButton(): HTMLTemplateResult {
    if (this.hasAttribute('disabled')) {
      return html`
-        <button
-          class="disabled ${this.variant} ${this.size} ${this.treatment}"
-        >
+        <button class="disabled ${this.variant} ${this.size} ${this.treatment}">
          ${this.label}
        </button>
      `
@ -126,9 +124,9 @@ export class StarButton extends LitElement {
      `
    }
  }
-  getConfirmButton(): HTMLTemplateResult{
+  getConfirmButton(): HTMLTemplateResult {
    return html`
-    <span class="start-button-confirm"><slot></slot></span>
+      <span class="start-button-confirm"><slot></slot></span>
    `
  }
  render() {
@ -139,8 +137,8 @@ export class StarButton extends LitElement {
        return this.getIconOnlyButton()
      case ButtonType.ICONLABEL:
        return this.getIconLabelButton()
-        case ButtonType.Confirm:
-          return this.getConfirmButton()
+      case ButtonType.Confirm:
+        return this.getConfirmButton()
      default:
        console.error('unhanled 【star-button】 type')
        return nothing
--- a/src/components/card/README.md
+++ b/src/components/card/README.md
@ -7,17 +7,17 @@ star-card 的用途：

 star-card 类型：
 1、base
-具有图片、标题、内容以及页脚几个模块，同时删除base类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。
+具有图片、标题、内容以及页脚几个模块，同时删除 base 类型对应模块可以转变成其他类型：无图卡片、无页脚卡片等。

 2、linkcard
-该类型相比base类型多出点击后跳转相应链接的功能。
+该类型相比 base 类型多出点击后跳转相应链接的功能。

 3、tupianonly
 该类型只展现一张正方形图片，用于陈列图片组。

 star-card 其他属性：
 1、image
-通过填写图片URL来讲图片展示在卡片上。
+通过填写图片 URL 来讲图片展示在卡片上。

 2、heading
 填写卡片标题以表明该卡片的用途。
@ -29,4 +29,4 @@ star-card 其他属性：
 卡片页脚，一般用来填写卡片内容的时间、作者等信息。

 5、link
-用来填写链接卡片的跳转网址。
+用来填写链接卡片的跳转网址。
--- a/src/components/card/card-styles.ts
+++ b/src/components/card/card-styles.ts
@ -2,16 +2,16 @@ import {css, CSSResult} from 'lit'

 export const sharedStyles: CSSResult = css`
  :host {
-    --background-image-url: ''
+    --background-image-url: '';
  }

  div {
-    width:200px;
+    width: 200px;
  }

  .card {
-    background: #FFFFFF;
-    border-color: #E6E6E6;
+    background: #ffffff;
+    border-color: #e6e6e6;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
@ -28,8 +28,8 @@ export const sharedStyles: CSSResult = css`
  }

  .base:hover {
-    background: #E6E6E6;
-    border-color: #B1B1B1;
+    background: #e6e6e6;
+    border-color: #b1b1b1;
  }

  .cardhead {
@ -79,7 +79,7 @@ export const sharedStyles: CSSResult = css`
  }

  .cardfooter {
-    border-color: #E6E6E6;
+    border-color: #e6e6e6;
    border-top-style: solid;
    border-top-width: 1px;
    display: block;
@ -91,7 +91,7 @@ export const sharedStyles: CSSResult = css`
  }

  .imageonly {
-    background: #B1B1B1;
+    background: #b1b1b1;
    border-color: #000000;
    border: 10px;
    border-style: solid;
@ -108,6 +108,6 @@ export const sharedStyles: CSSResult = css`
  }

  .imageonly:hover {
-    border-color: #E6E6E6;
+    border-color: #e6e6e6;
  }
-`
+`
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@ -1,134 +1,134 @@
 import {
-    html,
-    LitElement,
-    CSSResultArray,
-    HTMLTemplateResult,
-    nothing,
-  } from "lit"
-  import {customElement, property} from "lit/decorators.js"
-  import {sharedStyles} from "./card-styles"
-  
-  export enum CardType {
-    BASE = "base",
-    LINKCARD = "linkcard",
-    IMAGEONLY = "imageonly",
-    LABELONLY = "labelonly",
-    FOOTERDELETED = 'footerdeleted',
-  }
-  
-  // export enum CardSize {
-  //   SMALL = "small",
-  //   MEDIUM = "medium",
-  // }
-  
-  @customElement("star-card")
-  export class StarCard extends LitElement {
-    public static override get styles(): CSSResultArray {
-      return [sharedStyles]
-    }
-  
-    @property({type: String}) type = "base"
-    // @property({type: String}) size = "medium"
-    @property({type: String}) heading = ""
-    @property({type: String}) subheading = ""
-    @property({type: String}) footer = ""
-    @property({type: String}) image = ""
-    @property({type: String}) link = ""
-  
-    getBaseCard(): HTMLTemplateResult {
-        return html`
-          <div class="card base">
-            <div class="cardhead">
-              <img class="base-image" src="${this.image}">  
-            </div>  
-            <div class="cardbody">  
-              <h3 class="heading">${this.heading}</h3>  
-              <p class="subheading">${this.subheading}</p>  
-            </div>  
-            <div class="cardfooter">  
-              <p class="foooter">${this.footer}</p>  
-            </div>    
-          </div>
-        `
-    }
+  html,
+  LitElement,
+  CSSResultArray,
+  HTMLTemplateResult,
+  nothing,
+} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {sharedStyles} from './card-styles'

-    getLinkCard(): HTMLTemplateResult {
-      return html`
-        <a href=${this.link} target="_blank" style="text-decoration:none;">
-          <div class="card base">
-            <div class="cardhead">
-              <img class="base-image" src="${this.image}">
-            </div>
-            <div class="cardbody"> 
-              <h3 class="heading">${this.heading}</h3>  
-              <p class="subheading">${this.subheading}</p>  
-            </div>  
-            <div class="cardfooter">  
-              <p class="foooter">${this.footer}</p>  
-            </div>    
-          </div>
-        </a>
-      `
+export enum CardType {
+  BASE = 'base',
+  LINKCARD = 'linkcard',
+  IMAGEONLY = 'imageonly',
+  LABELONLY = 'labelonly',
+  FOOTERDELETED = 'footerdeleted',
+}
+
+// export enum CardSize {
+//   SMALL = "small",
+//   MEDIUM = "medium",
+// }
+
+@customElement('star-card')
+export class StarCard extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
  }
-  
-    getLabelOnlyCard(): HTMLTemplateResult {
-        return html`
-          <div class="card base">
-            <div class="cardbody">
-              <h3 class="heading">${this.heading}</h3>
-              <p class="subheading">${this.subheading}</p>
-            </div>
-            <div class="cardfooter">
-              <p class="foooter">${this.footer}</p>
-            </div>
+
+  @property({type: String}) type = 'base'
+  // @property({type: String}) size = "medium"
+  @property({type: String}) heading = ''
+  @property({type: String}) subheading = ''
+  @property({type: String}) footer = ''
+  @property({type: String}) image = ''
+  @property({type: String}) link = ''
+
+  getBaseCard(): HTMLTemplateResult {
+    return html`
+      <div class="card base">
+        <div class="cardhead">
+          <img class="base-image" src="${this.image}" />
+        </div>
+        <div class="cardbody">
+          <h3 class="heading">${this.heading}</h3>
+          <p class="subheading">${this.subheading}</p>
+        </div>
+        <div class="cardfooter">
+          <p class="foooter">${this.footer}</p>
+        </div>
+      </div>
+    `
+  }
+
+  getLinkCard(): HTMLTemplateResult {
+    return html`
+      <a href=${this.link} target="_blank" style="text-decoration:none;">
+        <div class="card base">
+          <div class="cardhead">
+            <img class="base-image" src="${this.image}" />
          </div>
-        `
-      }
-  
-    getImageOnlyCard(): HTMLTemplateResult {
-        return html`
-          <div class="card imageonly">
-            <div class="cardhead">
-              <img class="imageonly-image" src="${this.image}">
-            </div>
+          <div class="cardbody">
+            <h3 class="heading">${this.heading}</h3>
+            <p class="subheading">${this.subheading}</p>
          </div>
-        `
-      } 
-    getFooterDeletedCard(): HTMLTemplateResult {
-        return html `
-          <div class="card base">
-            <div class="cardhead">
-              <img class="base-image" src="${this.image}">
-            </div>
-            <div class="cardbody">
-              <h3 class="heading">${this.heading}</h3>
-              <p class="subheading">${this.subheading}</p>
-            </div>
+          <div class="cardfooter">
+            <p class="foooter">${this.footer}</p>
          </div>
-        `
-    }
-  
-    render() {
-      switch (this.type) {
-        case CardType.BASE:
-          return this.getBaseCard()
-        case CardType.LINKCARD:
-          return this.getLinkCard()    
-        case CardType.IMAGEONLY:
-          return this.getImageOnlyCard()
-        case CardType.LABELONLY:
-          return this.getLabelOnlyCard()
-        case CardType.FOOTERDELETED:
-          return this.getFooterDeletedCard()
-        default:
-          console.error("unhanled 【star-card】 type")
-          return nothing
-      }
+        </div>
+      </a>
+    `
+  }
+
+  getLabelOnlyCard(): HTMLTemplateResult {
+    return html`
+      <div class="card base">
+        <div class="cardbody">
+          <h3 class="heading">${this.heading}</h3>
+          <p class="subheading">${this.subheading}</p>
+        </div>
+        <div class="cardfooter">
+          <p class="foooter">${this.footer}</p>
+        </div>
+      </div>
+    `
+  }
+
+  getImageOnlyCard(): HTMLTemplateResult {
+    return html`
+      <div class="card imageonly">
+        <div class="cardhead">
+          <img class="imageonly-image" src="${this.image}" />
+        </div>
+      </div>
+    `
+  }
+  getFooterDeletedCard(): HTMLTemplateResult {
+    return html`
+      <div class="card base">
+        <div class="cardhead">
+          <img class="base-image" src="${this.image}" />
+        </div>
+        <div class="cardbody">
+          <h3 class="heading">${this.heading}</h3>
+          <p class="subheading">${this.subheading}</p>
+        </div>
+      </div>
+    `
+  }
+
+  render() {
+    switch (this.type) {
+      case CardType.BASE:
+        return this.getBaseCard()
+      case CardType.LINKCARD:
+        return this.getLinkCard()
+      case CardType.IMAGEONLY:
+        return this.getImageOnlyCard()
+      case CardType.LABELONLY:
+        return this.getLabelOnlyCard()
+      case CardType.FOOTERDELETED:
+        return this.getFooterDeletedCard()
+      default:
+        console.error('unhanled 【star-card】 type')
+        return nothing
    }
  }
-    
-  declare global {
-    interface HTMLElementTagNameMap {
-      "star-card": StarCard
-    }
-  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-card': StarCard
+  }
+}
--- a/src/components/checkbox/README.md
+++ b/src/components/checkbox/README.md
@ -1 +1 @@
-Checkbox 复选框
+Checkbox 复选框
--- a/src/components/confirm/README.md
+++ b/src/components/confirm/README.md
@ -1,12 +1,18 @@
-## 星光 Web 组件——确认弹窗组件：confirm组件介绍（9月13日)
+## 星光 Web 组件——确认弹窗组件：confirm 组件介绍（9 月 13 日)
+
 ## 介绍
+
 star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。
+
 ## 1、操作确认框
+
 使用场景：一般用于删除、卸载、二次确认等。
+
 ## 2、消息确认框
+
 使用场景：一般用于确认权限、安全提示、功能开启提示等。

-参考：UI设计
+参考：UI 设计

 ## 内容排布

@ -23,6 +29,7 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
 ```

 特点：
+
 - 支持模态模式
 - 支持非模态模式
 - 支持静态资源插槽(此处为图片)
@ -36,19 +43,21 @@ star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确
 - checkbox

 ## 基本用法
-通过click事件调用Confirm函数，根据传入属性的不同显示不同的弹出框类型
- ```
-      Confirm({
-      type: '',                     支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
-      model：'',                    支持深色模式和浅色模式,默认背景是深色模式
-      image: '',                    图标slot插槽
-      headline: '',                 标题
-      subtitle: '',                 子标题
-      checkBoxText: '',             复选框文本(checkbox插槽)
-      confirmButtonText: '',        操作按钮()
-      cancelButtonText: '',         取消
-      location: '',                 弹出框位置，默认是在屏幕中心弹出
-      onConfirm: () => {},          确认回调函数
-      onCancel: () => {},           取消回调函数
-    })
-```
+
+通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型
+
+```
+     Confirm({
+     type: '',                     支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
+     model：'',                    支持深色模式和浅色模式,默认背景是深色模式
+     image: '',                    图标slot插槽
+     headline: '',                 标题
+     subtitle: '',                 子标题
+     checkBoxText: '',             复选框文本(checkbox插槽)
+     confirmButtonText: '',        操作按钮()
+     cancelButtonText: '',         取消
+     location: '',                 弹出框位置，默认是在屏幕中心弹出
+     onConfirm: () => {},          确认回调函数
+     onCancel: () => {},           取消回调函数
+   })
+```
--- a/src/components/container/README.md
+++ b/src/components/container/README.md
@ -20,11 +20,12 @@
 ## 每层的任务

 - root-container
+
  1. 负责主屏,次屏等页容器
-  2. 负责dock栏容器
+  2. 负责 dock 栏容器
  3. 负责主屏页面指示器
  4. 负责传导编辑状态

 - child-container
  1. 根据不同场景类型,渲染图标,文件夹,小组件等容器
-  2. 负责传导编辑功能
+  2. 负责传导编辑功能
--- a/src/components/container/child-container.ts
+++ b/src/components/container/child-container.ts
@ -99,7 +99,7 @@ export class ChildContainer extends LitElement {
        gridArea: `${gridRowStart}/${gridColumnStart}/${gridRowEnd}/${gridColumnEnd}`,
      }
      const child = childs?.[index]
-      let childNode: TemplateResult | (typeof nothing) = nothing
+      let childNode: TemplateResult | typeof nothing = nothing

      if (child !== undefined) {
        childNode = this.parsedata(child)
--- a/src/components/container/data-type.ts
+++ b/src/components/container/data-type.ts
@ -1,6 +1,5 @@
-
 export interface ChildContainerNode<T> {
-  node: string,
+  node: string
  type: string
  size?: string
  childs: Array<T>
@ -24,4 +23,7 @@ export interface FolderContainerNode {
  childs: Array<ChildContainerNode<IconContainerNode>>
 }

-export type ChildData = IconContainerNode|FolderContainerNode|SmallComponentContainerNode
+export type ChildData =
+  | IconContainerNode
+  | FolderContainerNode
+  | SmallComponentContainerNode
--- a/src/components/container/dock-container.ts
+++ b/src/components/container/dock-container.ts
@ -1,5 +1,5 @@
-import { html, css, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import {html, css, LitElement} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
 import './icon-container'

@customElement('dock-container')
@ -30,7 +30,9 @@ export class DockContainer extends LitElement {
      flex-wrap: wrap;
      align-content: start;
    }
-    icon-container, folder-container, small-component-container {
+    icon-container,
+    folder-container,
+    small-component-container {
      margin: var(--icon-container-margin);
    }
  `
@ -40,4 +42,4 @@ declare global {
  interface HTMLElementTagNameMap {
    'dock-container': DockContainer
  }
-}
+}
--- a/src/components/container/folder-container.ts
+++ b/src/components/container/folder-container.ts
@ -9,7 +9,7 @@ import {
 import {customElement, state} from 'lit/decorators.js'
 import {classMap} from 'lit/directives/class-map.js'
 import './child-container'
-import { FolderContainerNode } from './data-type'
+import {FolderContainerNode} from './data-type'
 import './icon-container'

@customElement('folder-container')
@ -44,7 +44,7 @@ export class FolderContainer extends LitElement {

  protected willUpdate(_changedProperties: PropertyValueMap<any>) {
    this.pages = this.node.childs.length
-    if(this.node?.name) {
+    if (this.node?.name) {
      this.name = this.node.name
    }
  }
@ -118,7 +118,8 @@ export class FolderContainer extends LitElement {
      position: absolute;
      display: flex;
      flex-direction: column;
-      padding: calc(var(--folder-margin-height)) calc(var(--folder-margin-width)/2);
+      padding: calc(var(--folder-margin-height))
+        calc(var(--folder-margin-width) / 2);
      width: calc(100vw - var(--folder-margin-width));
      height: calc(100vh - calc(2 * var(--folder-margin-height)));
      top: 0;
--- a/src/components/form/README.md
+++ b/src/components/form/README.md
@ -1,3 +1,3 @@
 # 表单-form

-参考：iPhone-VPN-添加配置
+参考：iPhone-VPN-添加配置
--- a/src/components/grabber/README.md
+++ b/src/components/grabber/README.md
@ -1,22 +1,25 @@
 # 抓握指示器-Grabber

 下分：
+
 - Multitasking Indicator (多任务指示器)(TODO)
- App Divider (App分割条)(TODO)
+- App Divider (App 分割条)(TODO)
 - Resizable Indicator (可调指示器)
 - Home Indicator (主屏指示器)

 ## 主屏指示器(Home Indicator)

 主屏指示器应具备的功能：
+
 - 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页
 - 应用内，向上拨动且不减速，进入主屏页
- 应用内，向上拨动且减速至0，进入任务管理页
+- 应用内，向上拨动且减速至 0，进入任务管理页
 - 主屏内，向右滑动，打开最近的后台应用
 - 应用内，向右滑动，打开最近的后台应用
 - 应用内，向左滑动，打开之前切换的后台应用

 设计时应具备的功能：
+
 - 手指在抓取器上的状态
 - 向各个方向移动的事件指向
 - 移动的二维尺度(x,y)
@ -25,7 +28,7 @@

 自身发送事件

-向上拨动y轴超出一定距离，则发出 'go-home'
-向上拨动y轴超出一定距离，则发出 'go-task'
-向左拨动x轴超出一定距离，则发出 'go-prev'
-向右拨动x轴超出一定距离，则发出 'go-next'
+向上拨动 y 轴超出一定距离，则发出 'go-home'
+向上拨动 y 轴超出一定距离，则发出 'go-task'
+向左拨动 x 轴超出一定距离，则发出 'go-prev'
+向右拨动 x 轴超出一定距离，则发出 'go-next'
--- a/src/components/grabber/home-bar-indicator.ts
+++ b/src/components/grabber/home-bar-indicator.ts
@ -35,10 +35,10 @@ export class HomeBarIndicator extends StarBaseElement {
      )

      /**
-       * 
+       *
       * 同时监听 tap 和 doubletap 事件时，注意设置可选参数的次序
-       * 
-      */
+       *
+       */
      // this.addEventListener('tap', log, {once:true});
      // this.addEventListener('doubletap', log);
      // this.addEventListener('panstart', log);
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@ -1269,13 +1269,10 @@ class GaiaContainer extends LitElement {
   * 交换被拖拽元素位置
   */
  dropElement_bak() {
-    let {dropTarget, dropChild, isPage, pagination} =
-      this.getChildFromPoint(
-        this._dnd.gridPosition.x +
-          (this._dnd.last.pageX - this._dnd.start.pageX),
-        this._dnd.gridPosition.y +
-          (this._dnd.last.pageY - this._dnd.start.pageY)
-      )
+    let {dropTarget, dropChild, isPage, pagination} = this.getChildFromPoint(
+      this._dnd.gridPosition.x + (this._dnd.last.pageX - this._dnd.start.pageX),
+      this._dnd.gridPosition.y + (this._dnd.last.pageY - this._dnd.start.pageY)
+    )
    if (this._staticElements.includes(dropTarget)) return

    this._dnd.dropTarget = dropTarget
--- a/src/components/grid/README.md
+++ b/src/components/grid/README.md
@ -1 +1 @@
-# 九宫格-Grid
+# 九宫格-Grid
--- a/src/components/header/README.md
+++ b/src/components/header/README.md
@ -1 +1 @@
-# 标题栏-header
+# 标题栏-header
--- a/src/components/indicator/README.md
+++ b/src/components/indicator/README.md
@ -2,4 +2,4 @@

 ## indicator-page-point 页面圆点指示器

-用于指示页面所在位置
+用于指示页面所在位置
--- a/src/components/indicator/indicator-page-point.ts
+++ b/src/components/indicator/indicator-page-point.ts
@ -11,9 +11,7 @@ export class IndicatorPagePoint extends LitElement {

  #firstRender = true

-  protected shouldUpdate(
-    _changedProperties: PropertyValueMap<this>
-  ): boolean {
+  protected shouldUpdate(_changedProperties: PropertyValueMap<this>): boolean {
    let isShouldUpdate = true

    if (this.total < 1) {
--- a/src/components/input/README.md
+++ b/src/components/input/README.md
@ -1,16 +1,17 @@
 # 输入框-Input

 工作职责：
+
 - 输入信息

 ## 特点

-拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该input，弹起输入法
+拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该 input，弹起输入法
 删除图标在 input 中文字为空时应不显示
-input应拥有可配置的默认值(对于一些总要类型，需强制配置)
+input 应拥有可配置的默认值(对于一些总要类型，需强制配置)

 ## 类型包括

- input输入|删除图标
+- input 输入|删除图标

-## 特殊说明
+## 特殊说明
--- a/src/components/li/README.md
+++ b/src/components/li/README.md
@ -1,15 +1,17 @@
 # 行-Line

 工作职责：
- `组合排列``有限种`内容填充物
+
+- ` 组合排列``有限种 `内容填充物

 ## 特点

 行宽 - 100%填充父容器给的宽
-行高 - 存在一个min-height，实际行高由行内填充物决定
+行高 - 存在一个 min-height，实际行高由行内填充物决定
 行中独立嵌套其他内容时，使用 slot

 ## 说明：
+
 - | 用途：偏左侧 | 偏右侧
 - () 用途：可选内容
 - 主文字在上，辅助文字在下
@ -30,10 +32,10 @@
 - 右侧图标，通常包括：
  - 下一级图标
  - 勾选类型图标
-  - Loading图标
+  - Loading 图标
  - 云下载图标
  - 图标组中的单个图标或多个图标
-    - 图标组：加密锁图标、wifi信号强度图标、其他状态图标
+    - 图标组：加密锁图标、wifi 信号强度图标、其他状态图标
 - 选择器，通常包括：
  - 时间选择器
  - 日期选择器
@ -54,9 +56,9 @@
 - 一排复选框
 - 滑块控件
 - 步进器控件
- input输入
+- input 输入
 - 纯文字
- 组合的SVG
+- 组合的 SVG
 - (左侧占位) 主文字(辅助信息) | (右侧图标)
 - (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
 - (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标)
@ -70,9 +72,9 @@

 如：iPhone-通用-关于本机-SEID

-### 组合的SVG
+### 组合的 SVG

-如：iPhone-通用-iPhone储存空间
+如：iPhone-通用-iPhone 储存空间

 ### 一排复选框

@ -87,8 +89,8 @@

 ### (大图标) 主文字(辅助信息) | 按钮

-如：iPhone-通用-关于本机-支持范围-Apple支持
-如：iPhone-通用-iPhone储存空间-任意应用内
+如：iPhone-通用-关于本机-支持范围-Apple 支持
+如：iPhone-通用-iPhone 储存空间-任意应用内

 ### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)

--- a/src/components/overflowmenu/README.md
+++ b/src/components/overflowmenu/README.md
@ -5,25 +5,26 @@
 ### overflowmenu：溢出菜单。

 ## 新需求（主页面要求——罗 9.5）
-1. 外部颜色控制（思路：使用自定义css样式，如： --test-color：XXX    p{color： --test-color}，通过修改自定义css样式的值达到从外部修改组件颜色）
-2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
-思路：
-（1）首先获取button在屏幕显示的left、right、top和bottom值以及menu的width和height
-（2）对于右侧边界：right >= width ? true则menu的left = button的left : false则menu的right = button的right
-（3）对于下边界：bottom >= height ? true则menu的top = button的bottom ： false则menu的bottom = button的top
-3. 外部控制接口，事件还是属性（暂定）
-4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过overlay组件实现）

+1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色）
+2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
+   思路：
+   （1）首先获取 button 在屏幕显示的 left、right、top 和 bottom 值以及 menu 的 width 和 height
+   （2）对于右侧边界：right >= width ? true 则 menu 的 left = button 的 left : false 则 menu 的 right = button 的 right
+   （3）对于下边界：bottom >= height ? true 则 menu 的 top = button 的 bottom ： false 则 menu 的 bottom = button 的 top
+3. 外部控制接口，事件还是属性（暂定）
+4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过 overlay 组件实现）

 ## 问题(9.6)
+
 1. 首次点击最右侧的按钮是获取到的菜单宽度和高度与实际不符：（该问题已消失，但不知道为何消失）
 2. 点击空白处无法关闭菜单栏（解决方法：将点击事件绑定在父容器中）

-
 ## 新要求：(9.7)
+
 （1）将不需要修改的“var”变量声明变成“const”(已修改)
 （2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释）
 （3）点击一个按钮后其余按钮应关闭（方法同（1））
-（4）可以将slot增加名称从而将div以删除
-（5）定位方式修改为相对定位，将将fixed改为relative，达到适应效果
-（6）控制菜单栏宽度，菜单栏中star-ul中的ul标签负责扩充大小，修改其width值
+（4）可以将 slot 增加名称从而将 div 以删除
+（5）定位方式修改为相对定位，将将 fixed 改为 relative，达到适应效果
+（6）控制菜单栏宽度，菜单栏中 star-ul 中的 ul 标签负责扩充大小，修改其 width 值
--- a/src/components/overflowmenu/overflowmenu.ts
+++ b/src/components/overflowmenu/overflowmenu.ts
@ -15,7 +15,7 @@ export class StarOverflowMenu extends LitElement {
  @property({type: String}) label = ''
  @property({type: Boolean}) disabled = false
  @property({type: Boolean, reflect: true}) open = false
-  
+
  //获取slot元素
  @queryAssignedElements({flatten: true})
  _evenEl: any
@ -25,7 +25,7 @@ export class StarOverflowMenu extends LitElement {
    const bodywidth = document.documentElement.clientWidth
    const bodyheight = document.documentElement.clientHeight
    // 获取菜单所在div,用于控制menu显示或隐藏，ts默认使用Element，需转换为HTMLElement
-    const mu = this.renderRoot.querySelector("#menuitem") as HTMLElement
+    const mu = this.renderRoot.querySelector('#menuitem') as HTMLElement
    // 获取star-button相对屏幕的位置
    const buttonposition = this.renderRoot
      .querySelector('star-button')
@ -40,7 +40,7 @@ export class StarOverflowMenu extends LitElement {
      for (var i = 0; i < this._evenEl.length; i++) {
        const slotelement = this._evenEl[i]
        // 设置div显示display状态
-        mu.style.display = "block"
+        mu.style.display = 'block'
        // 设置显示位置类型
        // this._evenEl[i].style.position = 'fixed'
        slotelement.style.position = 'relative'
@ -49,20 +49,24 @@ export class StarOverflowMenu extends LitElement {
        const menuwidth = slotelement.getBoundingClientRect().width
        const menuheight = slotelement.getBoundingClientRect().height
        // 弹出菜单边界,rightline和bottomline分别为是否超过右侧和下侧显示区域
-        const rightline = (buttonright + menuwidth > bodywidth)?true:false
-        const bottomline = (buttonbottom + menuheight > bodyheight)?true:false
+        const rightline = buttonright + menuwidth > bodywidth ? true : false
+        const bottomline = buttonbottom + menuheight > bodyheight ? true : false
        // 右下角边界
        if (rightline && bottomline) {
-          slotelement.style.left = -(menuwidth - (buttonright - buttonleft)) + 'px'
-          slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
+          slotelement.style.left =
+            -(menuwidth - (buttonright - buttonleft)) + 'px'
+          slotelement.style.bottom =
+            menuheight + (buttonbottom - buttontop) + 'px'
          return
        } else if (rightline) {
          // 右侧边界
-          slotelement.style.right = menuwidth - (buttonright - buttonleft) + 'px'
+          slotelement.style.right =
+            menuwidth - (buttonright - buttonleft) + 'px'
          return
        } else if (bottomline) {
          // 下侧边界
-          slotelement.style.bottom = menuheight + (buttonbottom - buttontop) + 'px'
+          slotelement.style.bottom =
+            menuheight + (buttonbottom - buttontop) + 'px'
          return
        } else {
          // 正常情况
@ -71,7 +75,7 @@ export class StarOverflowMenu extends LitElement {
      }
    } else {
      for (var i = 0; i < this._evenEl.length; i++) {
-        mu.style.display = "none"
+        mu.style.display = 'none'
        this.open = true
      }
    }
--- a/src/components/overflowmenu/overflowmenustyle.ts
+++ b/src/components/overflowmenu/overflowmenustyle.ts
@ -4,7 +4,7 @@ export const sharedStyles: CSSResult = css`
  :host {
    width: auto;
    display: block;
-    text-align: left
+    text-align: left;
  }

  #menuitem {
--- a/src/components/overlay/README.md
+++ b/src/components/overlay/README.md
@ -1,5 +1,5 @@
-# 全局overlay
+# 全局 overlay

 ## 类型包括：

- 置于底部的overlay，内可填充ul
+- 置于底部的 overlay，内可填充 ul
--- a/src/components/picker/README.md
+++ b/src/components/picker/README.md
@ -1,11 +1,10 @@
 # star-picker

-星光组件--picker组件(8月30日)
+星光组件--picker 组件(8 月 30 日)

 # 介绍

-
-1. type：实现了用type属性控制不同大小的picker选择框，包括small、medium、large、extralarge
+1. type：实现了用 type 属性控制不同大小的 picker 选择框，包括 small、medium、large、extralarge

 ```html demo
 <star-picker type="small" hide-value>
@ -15,7 +14,7 @@
 </star-picker>

 <star-picker type="medium" hide-value>
-  <star-picker-option value="1" >red</star-picker-option>
+  <star-picker-option value="1">red</star-picker-option>
  <star-picker-option value="2">yellow</star-picker-option>
  <star-picker-option value="3">blue</star-picker-option>
 </star-picker>
@ -34,6 +33,7 @@
 ```

 2. hide-value：实现了隐藏选择项的索引值
+
 ```html demo
 <star-picker hide-value>
  <star-picker-option value="1">red</star-picker-option>
@ -42,11 +42,12 @@
 </star-picker>
 ```

-3. disable：实现了picker选择框的禁用状态
+3. disable：实现了 picker 选择框的禁用状态
+
 ```html demo
 <star-picker disable>
  <star-picker-option value="1">red</star-picker-option>
  <star-picker-option value="2">yellow</star-picker-option>
  <star-picker-option value="3">blue</star-picker-option>
 </star-picker>
-```
+```
--- a/src/components/picker/picker-styles.ts
+++ b/src/components/picker/picker-styles.ts
@ -1,129 +1,129 @@
 import {css, CSSResult} from 'lit'
 export const sharedStyles: CSSResult = css`
-* {
-  box-sizing: border-box;
-}
+  * {
+    box-sizing: border-box;
+  }

-:host {
-  display: block;
-  border-radius: 4px;
-}
+  :host {
+    display: block;
+    border-radius: 4px;
+  }

-:host,
-.input {
-  font-family: sans-serif;
-  font-size: 15px;
-  outline: none;
-}
+  :host,
+  .input {
+    font-family: sans-serif;
+    font-size: 15px;
+    outline: none;
+  }

-.input,
-.value-container {
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 8px 10px;
-  width: 100%;
-}
+  .input,
+  .value-container {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 8px 10px;
+    width: 100%;
+  }

-.input:focus {
-  background: #FFFFFF;
-  border: 1px solid #2DA7E0;
-  box-shadow: inset 0 0 0 1000px #FFFFFF!important;
-}
+  .input:focus {
+    background: #ffffff;
+    border: 1px solid #2da7e0;
+    box-shadow: inset 0 0 0 1000px #ffffff !important;
+  }

-.main-options-container {
-  position: relative;
-}
+  .main-options-container {
+    position: relative;
+  }

-.options-container {
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
-  position: absolute;
-  top: 38px;
-  width: 100%;
-}
+  .options-container {
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
+    position: absolute;
+    top: 38px;
+    width: 100%;
+  }

-.option,
-.value-container {
-  display: flex;
-}
+  .option,
+  .value-container {
+    display: flex;
+  }

-.option {
-  padding: 10px 8px;
-  cursor: pointer;
-}
+  .option {
+    padding: 10px 8px;
+    cursor: pointer;
+  }

-.option:hover {
-  background: #f3f3f3;
-}
+  .option:hover {
+    background: #f3f3f3;
+  }

-.option-value,
-.value,
-.magnifying-glass {
-  flex-shrink: 0;
-  width: 15px;
-}
+  .option-value,
+  .value,
+  .magnifying-glass {
+    flex-shrink: 0;
+    width: 15px;
+  }

-.option-label,
-.label,
-.placeholder {
-  flex-grow: 1;
-}
+  .option-label,
+  .label,
+  .placeholder {
+    flex-grow: 1;
+  }

-.placeholder-text {
-  color: #777;
-  font-style: italic;
-}
+  .placeholder-text {
+    color: #777;
+    font-style: italic;
+  }

-.label,
-.option-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .label,
+  .option-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }

-.no-results {
-  color: #777;
-  font-style: italic;
-  padding: 8px 10px;
-}
+  .no-results {
+    color: #777;
+    font-style: italic;
+    padding: 8px 10px;
+  }

-:host([hide-value]) .value,
-:host([hide-value]) .option-value {
-  display: none;
-}
+  :host([hide-value]) .value,
+  :host([hide-value]) .option-value {
+    display: none;
+  }

-:host([disable]){
-  pointer-events: none;
-  color: #c0c4cc;
-  background-image: none;
-  background-color: #fff;
-  border-color: #ebeef5;
-}
+  :host([disable]) {
+    pointer-events: none;
+    color: #c0c4cc;
+    background-image: none;
+    background-color: #fff;
+    border-color: #ebeef5;
+  }

-.small {
-  padding: 4px 6px;
-  font-size: 10px;
-  border-radius: 3px;
-}
+  .small {
+    padding: 4px 6px;
+    font-size: 10px;
+    border-radius: 3px;
+  }

-.medium {
-  padding: 5px 10px;
-  font-size: 14px;
-  border-radius: 4px;
-}
+  .medium {
+    padding: 5px 10px;
+    font-size: 14px;
+    border-radius: 4px;
+  }

-.large {
-  padding: 8px 15px;
-  font-size: 18px;
-  border-radius: 5px;
-}
+  .large {
+    padding: 8px 15px;
+    font-size: 18px;
+    border-radius: 5px;
+  }

-.extralarge {
-  padding: 10px 20px;
-  font-size: 20px;
-  border-radius: 5px;
-}
-`
+  .extralarge {
+    padding: 10px 20px;
+    font-size: 20px;
+    border-radius: 5px;
+  }
+`
--- a/src/components/picker/picker.ts
+++ b/src/components/picker/picker.ts
@ -1,21 +1,19 @@
 /* eslint-disable lit-a11y/click-events-have-key-events */
-import { html,LitElement, CSSResultArray } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { styleMap } from 'lit/directives/style-map.js';
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
+import {styleMap} from 'lit/directives/style-map.js'
 import {sharedStyles} from './picker-styles'

-
 interface StarPickerOption {
-  value: string;
-  label: string;
-
+  value: string
+  label: string
 }

 export enum PickerType {
  SMALL = 'small',
  MEDIUM = 'medium',
  LARGE = 'large',
-  EXTRALARGE = 'extralarge'
+  EXTRALARGE = 'extralarge',
 }

@customElement('star-picker')
@ -24,78 +22,83 @@ export class StarPicker extends LitElement {
    return [sharedStyles]
  }

-  @property({ type: PickerType}) type = '';
+  @property({type: PickerType}) type = ''

-  @property({ type: String }) tabindex = '0';
+  @property({type: String}) tabindex = '0'

-  @property({ type: String }) placeholder = '';
+  @property({type: String}) placeholder = ''

-  @property({ type: String }) value = '';
+  @property({type: String}) value = ''

-  @property({ type: Boolean, attribute: 'hide-value' }) hideValue = false;
+  @property({type: Boolean, attribute: 'hide-value'}) hideValue = false

-  @property({ type: Boolean, attribute: 'disable'}) disAble = false;
+  @property({type: Boolean, attribute: 'disable'}) disAble = false

-  @property({ type: Boolean, attribute: 'small'}) small = false; 
+  @property({type: Boolean, attribute: 'small'}) small = false

-  @property({ type: Boolean, attribute: 'medium'}) medium = false; 
+  @property({type: Boolean, attribute: 'medium'}) medium = false

-  @property({ type: Boolean, attribute: 'large'}) large = false; 
+  @property({type: Boolean, attribute: 'large'}) large = false

-  @property({ type: Boolean, attribute: 'extralarge'}) extralarge = false; 
+  @property({type: Boolean, attribute: 'extralarge'}) extralarge = false

-  @property({ type: String, attribute: 'value-pattern' }) valuePattern =
-    '\\d{1,5}';
+  @property({type: String, attribute: 'value-pattern'}) valuePattern =
+    '\\d{1,5}'

-  @state() private _searchState: Boolean = false;
+  @state() private _searchState: Boolean = false

-  @state() private _options: StarPickerOption[] = [];
+  @state() private _options: StarPickerOption[] = []

-  @state() private _query: String = '';
+  @state() private _query: String = ''

  firstUpdated() {
-    this.setAttribute('tabindex', this.tabindex);
+    this.setAttribute('tabindex', this.tabindex)

-    this.addEventListener('keydown', e => {
+    this.addEventListener('keydown', (e) => {
      if (this._searchState === false) {
-        this._onKeyDownValueContainer(e);
+        this._onKeyDownValueContainer(e)
      }
-    });
+    })

-    this.addEventListener('blur', () => {  //聚焦事件
-      this._searchState = false;
+    this.addEventListener('blur', () => {
+      //聚焦事件
+      this._searchState = false

-      const pattern = new RegExp(this.valuePattern); //正则表达式匹配字符串
-      if (pattern.test(this._query as string)) { //返回是否匹配
-        this.value = this._query as string;//类型断言
+      const pattern = new RegExp(this.valuePattern) //正则表达式匹配字符串
+      if (pattern.test(this._query as string)) {
+        //返回是否匹配
+        this.value = this._query as string //类型断言
      }
-    });
+    })

-    this._updateOptionsList();
+    this._updateOptionsList()

-    const observer = new MutationObserver(() => { //js监听dom元素的属性变化
-      this._updateOptionsList();
-    });
+    const observer = new MutationObserver(() => {
+      //js监听dom元素的属性变化
+      this._updateOptionsList()
+    })

    //开始观察目标节点的DOM元素的属性变化
-    observer.observe(this as Node, { //将this作为节点
+    observer.observe(this as Node, {
+      //将this作为节点
      attributes: true,
      characterData: true,
      childList: true,
      subtree: true,
-    }); 
+    })
  }

  render() {
-    const selectedOption = this._options.find( //查找数组中符合条件的第一个元素
-      option => option.value === this.value //比较是不是严格相等
-    );
-    const label = selectedOption ? selectedOption.label : null; //判断返回值
+    const selectedOption = this._options.find(
+      //查找数组中符合条件的第一个元素
+      (option) => option.value === this.value //比较是不是严格相等
+    )
+    const label = selectedOption ? selectedOption.label : null //判断返回值

    return html`
      <div
        class="main-options-container"
-        style=${styleMap({ display: this._searchState ? 'block' : 'none' })}
+        style=${styleMap({display: this._searchState ? 'block' : 'none'})}
      >
        <input
          class="input ${this.type}"
@ -106,9 +109,9 @@ export class StarPicker extends LitElement {
        />
        <div class="options-container">
          ${this._options
-            .filter(option => this._doesOptionMatchQuery(option))
+            .filter((option) => this._doesOptionMatchQuery(option))
            .map(
-              option => html`
+              (option) => html`
                <div
                  class="option"
                  @click="${() => this._onClickOption(option)}"
@ -117,15 +120,17 @@ export class StarPicker extends LitElement {
                  <div class="option-label">${option.label}</div>
                </div>
              `
-            )} 
-          ${this._options.filter(option => this._doesOptionMatchQuery(option)) //过滤元素
+            )}
+          ${this._options.filter((option) => this._doesOptionMatchQuery(option)) //过滤元素
            .length === 0 && this._query.length > 0
-            ? html` <div class="no-results">No results</div> `
+            ? html`
+                <div class="no-results">No results</div>
+              `
            : ''}
        </div>
      </div>
      <div
-        style=${styleMap({ display: this._searchState ? 'none' : 'flex' })}
+        style=${styleMap({display: this._searchState ? 'none' : 'flex'})}
        @click="${this._onClickValueContainer}"
        class="value-container ${this.type}"
      >
@ -134,47 +139,52 @@ export class StarPicker extends LitElement {
              <div class="value">${this.value}</div>
              <div class="label">
                ${label ||
-                html`<span class="placeholder-text">Loading...</span>`}
+                html`
+                  <span class="placeholder-text">Loading...</span>
+                `}
              </div>
-              <div @click="${this._onClickClearButton}"><img src="src/assets/close.svg" class="magnifying-glass">
+              <div @click="${this._onClickClearButton}">
+                <img src="src/assets/close.svg" class="magnifying-glass" />
              </div>
            `
          : html`
              <div class="placeholder">
                <span class="placeholder-text">${this.placeholder}</span>
              </div>
-              <div class="magnifying-glass"><img src="src/assets/down.svg"></div>
+              <div class="magnifying-glass">
+                <img src="src/assets/down.svg" />
+              </div>
            `}
      </div>
-    `;
+    `
  }

  private _updateOptionsList() {
-    const options = this.querySelectorAll('star-picker-option');
-    this._options = Array.from(options).map(option => ({
+    const options = this.querySelectorAll('star-picker-option')
+    this._options = Array.from(options).map((option) => ({
      value: option.getAttribute('value'),
      label: option.textContent,
-    })) as StarPickerOption[];
+    })) as StarPickerOption[]
  }

  private _onChangeQueryInput(e: KeyboardEvent) {
-    const queryInput = e.target! as HTMLInputElement;
-    this._query = queryInput.value;
+    const queryInput = e.target! as HTMLInputElement
+    this._query = queryInput.value
  }

  private _onKeyDownQueryInput(e: KeyboardEvent) {
    if (e.key === 'Tab') {
-      e.preventDefault();
-      this._searchState = false;
+      e.preventDefault()
+      this._searchState = false

-      const pattern = new RegExp(this.valuePattern);
+      const pattern = new RegExp(this.valuePattern)
      if (pattern.test(this._query as string)) {
-        this.value = this._query as string;
+        this.value = this._query as string
      }

      this.updateComplete.then(() => {
-        this.focus();
-      });
+        this.focus()
+      })
    }
  }

@ -182,49 +192,50 @@ export class StarPicker extends LitElement {
    return (
      option.label.toLowerCase().includes(this._query.toLowerCase()) || //转换位小写后判断是否包含
      option.value.toLocaleLowerCase() === this._query.toLocaleLowerCase()
-    );
+    )
  }

  private _onClickOption(option: StarPickerOption) {
-    this.value = option.value;
-    this._searchState = false;
-    this.updateComplete.then(() => { //更新完成
-      this.focus(); //聚焦元素
-    });
+    this.value = option.value
+    this._searchState = false
+    this.updateComplete.then(() => {
+      //更新完成
+      this.focus() //聚焦元素
+    })
  }

  private _onClickValueContainer() {
-    this._openOptionsContainer();
+    this._openOptionsContainer()
  }

  private _onKeyDownValueContainer(e: KeyboardEvent) {
    if (e.code === 'Space') {
-      this._openOptionsContainer();
-      e.preventDefault();
+      this._openOptionsContainer()
+      e.preventDefault()
    } else if (e.key === 'Delete' || e.key === 'Backspace') {
-      this.value = '';
+      this.value = ''
    }
  }

  private _onClickClearButton(e: MouseEvent) {
-    e.stopPropagation();
-    this.value = '';
+    e.stopPropagation()
+    this.value = ''
    this.updateComplete.then(() => {
-      this.focus();
-    });
+      this.focus()
+    })
  }

  private _openOptionsContainer() {
-    this._searchState = true;
+    this._searchState = true
    if (this.value !== '' && this.hideValue === false) {
-      this._query = this.value;
+      this._query = this.value
    } else {
-      this._query = '';
+      this._query = ''
    }

    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector('input')?.select();
-    });
+      this.shadowRoot?.querySelector('input')?.select()
+    })
  }
 }

@ -233,5 +244,3 @@ declare global {
    'star-picker': StarPicker
  }
 }
-
-
--- a/src/components/prompt/README.md
+++ b/src/components/prompt/README.md
@ -1,6 +1,6 @@
 # 提示输入弹窗-Prompt

-参考：UI设计
+参考：UI 设计

 ## 内容排布

@ -17,6 +17,7 @@
 ```

 特点：
+
 - 支持模态模式
 - 支持非模态模式

@ -24,4 +25,4 @@

 - button
 - input
- 外部链接slot
+- 外部链接 slot
--- a/src/components/prompt/prompt.ts
+++ b/src/components/prompt/prompt.ts
@ -1,5 +1,5 @@
-import { html, css, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import {html, css, LitElement} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'

@customElement('star-prompt')
 export class StarPrompt extends LitElement {
@ -10,18 +10,14 @@ export class StarPrompt extends LitElement {
  bar = ''

  render() {
-    return html`
-      
-    `
+    return html``
  }

-  static styles = css`
-    
-  `
+  static styles = css``
 }

 declare global {
  interface HTMLElementTagNameMap {
    'star-prompt': StarPrompt
  }
-}
+}
--- a/src/components/radio/README.md
+++ b/src/components/radio/README.md
@ -1,71 +1,48 @@
 # star-radio and star-radio group
-星光 Web 组件——单选框组件：radio组件介绍（8月31日)
-          
+
+星光 Web 组件——单选框组件：radio 组件介绍（8 月 31 日)

 ## 介绍
-star-radio和star-radio-group为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
-star-radio属性：

-  ### 1、checkedType属性
-  单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义 
-    ```html demo
-    <star-radio-group checkedType="round">
-      <star-radio></star-radio>
-    <star-radio-group>
-    ```
-   ### 2、checked属性
-  Booloean类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为false，不选中状态。
-    ```html demo
-      <star-radio-group>
-        <star-radio checked></star-radio>
-        <star-radio></star-radio>
-      <star-radio-group>
-    ```
-  ### 3、checkedLocation属性
-  单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
-    ```html demo
-      <star-radio-group checkedLocation="right">
-        <star-radio checked></star-radio>
-        <star-radio></star-radio>
-      <star-radio-group>
-    ```
-  ### 4、label属性
-  UI界面中的正文主体文本内容
-    ```html demo
-    <star-radio-group checkedLocation="right">
-        <star-radio label="content1" checked></star-radio>
-        <star-radio> label="content2"</star-radio>
-    <star-radio-group>  
-    ```
-  ### 5、node属性
-  UI界面中的正文主体文本内容下方补充扩展文本内容
-    ``` html demo
-      <star-radio-group checkedLocation="right">
-        <star-radio label="content1" label2="expand1" checked></star-radio>
-        <star-radio> label="content2" label2="expand2" </star-radio>
-      <star-radio-group>  
-    ```
-  ### 6、icon属性
-  控制ui界面中的图标字体样式属性
-    ```html demo
-      <star-radio-group checkedLocation="right" checkedType="round">
-        <star-radio icon="add" label="content1" label2="expand1" checked></star-radio>
-        <star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio>
-      <star-radio-group>  
-    ```
-  ### 7、iconcolor属性
-  控制图标字体颜色样式属性，和icon属性同时使用时起作用
-    ```html demo
-      <star-radio-group checkedLocation="right" checkedType="round">
-        <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio>
-        <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio>
-      <star-radio-group> 
-    ```
-  ### 8、disabled属性
-  控制单选框按钮禁用状态，默认为：false。
-    ```html demo
-      <star-radio-group checkedLocation="right" checkedType="round">
-        <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio>
-        <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio>
-      <star-radio-group> 
-    ``` 
+star-radio 和 star-radio-group 为单选框按钮和单选框按钮组，一般在使用过程中都是同时使用。
+star-radio 属性：
+
+### 1、checkedType 属性
+
+单选框风格样式类型,checkedType="symbol"为默认类型(√),checkedType="round"为圆圈类型，后续根据具体要求可扩展定义
+`html demo <star-radio-group checkedType="round"> <star-radio></star-radio> <star-radio-group> `
+
+### 2、checked 属性
+
+Booloean 类型，checked=true,单选框选中状态，checked=false,未选中状态。默认为 false，不选中状态。
+`html demo <star-radio-group> <star-radio checked></star-radio> <star-radio></star-radio> <star-radio-group> `
+
+### 3、checkedLocation 属性
+
+单选框选中图标位置状态，checkedLocation="left" 选中图标在左侧栏，checkedLocation="right" 选中图标在右侧栏，默认在左侧栏
+`html demo <star-radio-group checkedLocation="right"> <star-radio checked></star-radio> <star-radio></star-radio> <star-radio-group> `
+
+### 4、label 属性
+
+UI 界面中的正文主体文本内容
+`html demo <star-radio-group checkedLocation="right"> <star-radio label="content1" checked></star-radio> <star-radio> label="content2"</star-radio> <star-radio-group> `
+
+### 5、node 属性
+
+UI 界面中的正文主体文本内容下方补充扩展文本内容
+`html demo <star-radio-group checkedLocation="right"> <star-radio label="content1" label2="expand1" checked></star-radio> <star-radio> label="content2" label2="expand2" </star-radio> <star-radio-group> `
+
+### 6、icon 属性
+
+控制 ui 界面中的图标字体样式属性
+`html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" label="content1" label2="expand1" checked></star-radio> <star-radio> icon="keyboard" label="content2" label2="expand2" </star-radio> <star-radio-group> `
+
+### 7、iconcolor 属性
+
+控制图标字体颜色样式属性，和 icon 属性同时使用时起作用
+`html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" checked></star-radio> <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" </star-radio> <star-radio-group> `
+
+### 8、disabled 属性
+
+控制单选框按钮禁用状态，默认为：false。
+`html demo <star-radio-group checkedLocation="right" checkedType="round"> <star-radio icon="add" iconcolor="#226dee" label="content1" label2="expand1" disabled></star-radio> <star-radio> icon="keyboard" iconcolor="#226dee" label="content2" label2="expand2" disabled</star-radio> <star-radio-group> `
--- a/src/components/radio/radio-group.ts
+++ b/src/components/radio/radio-group.ts
@ -64,4 +64,4 @@ declare global {
  interface HTMLElementTagNameMap {
    'star-radio-group': StarRadioGroup
  }
-}
+}
--- a/src/components/radio/radio-style.ts
+++ b/src/components/radio/radio-style.ts
@ -11,7 +11,7 @@ export const sharedStyles: CSSResult = css`
    cursor: default;
    pointer-events: none;
  }
-   /*按钮选中状态*/
+  /*按钮选中状态*/
  .star-radio.checked {
    display: flex;
    cursor: pointer;
@ -73,4 +73,4 @@ export const sharedStyles: CSSResult = css`
  .star-radio.checked .label {
    color: #1561f0;
  }
-`
+`
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@ -84,4 +84,4 @@ declare global {
  interface HTMLElementTagNameMap {
    'star-radio': StarRadio
  }
-}
+}
--- a/src/components/segment-controls/README.md
+++ b/src/components/segment-controls/README.md
@ -4,4 +4,4 @@

 付费|免费|畅销排行

-过去24小时|过去4天
+过去 24 小时|过去 4 天
--- a/src/components/select/README.md
+++ b/src/components/select/README.md
@ -5,4 +5,4 @@
 ## 特点

 - 支持多选
- 强制多选类型`的情况下，选择只有一个时，将其置灰
+- 强制多选类型`的情况下，选择只有一个时，将其置灰
--- a/src/components/slider/README.md
+++ b/src/components/slider/README.md
@ -3,7 +3,7 @@
 工作职责：

 - 滑块空间
- 滑块拖动后返回value值
+- 滑块拖动后返回 value 值

 ## 类型包括：

@ -12,6 +12,7 @@
 ```
 <star-slider></star-slider>
 ```
+
 2. `coverWidth` --- 初始填充

 ```
@ -25,6 +26,7 @@
 <star-slider disabled></star-slider>
 <star-slider disabled coverWidth="150px"></star-slider>
 ```
+
 4. `unfilled` --- 滑块中小球左侧不进行填充

 ```
@ -33,27 +35,25 @@
 <star-slider unfilled coverWidth="30%" disabled></star-slider>
 ```

-
-5. `Tick` --- 分格滑块(默认是unfilled属性)
-   min=0,mix=100，按照需求填写step(每一格）的大小<br>
+5. `Tick` --- 分格滑块(默认是 unfilled 属性)
+   min=0,mix=100，按照需求填写 step(每一格）的大小<br>
   example : <br>
-   step="25" 表示把slider分为4块<br>
+   step="25" 表示把 slider 分为 4 块<br>
   coverWidth="40%" 表示初始小球落在第二格上

-             
-
-
 ```
 <star-slider tick step="10"></star-slider>
 <star-slider tick step="20" coverWidth="40%" disabled></star-slider>
 ```
-6. `vertical` --- 垂直slider
+
+6. `vertical` --- 垂直 slider

 ```
 <star-slider vertical></star-slider>
 <star-slider vertical disabled></star-slider>
 <star-slider vertical coverWidth="50%"></star-slider>
 ```
+
 7. 左侧图标|滑块|右侧图标

 ```
@ -63,5 +63,6 @@
 ```

 ## 后续需解决的问题：
- tick 属性中小球不能完全覆盖step
+
+- tick 属性中小球不能完全覆盖 step
 - vertical 属性变化太快
--- a/src/components/stepper/README.md
+++ b/src/components/stepper/README.md
@ -8,4 +8,4 @@

 ## 类型包括

- 数字|单位|加减步进器
+- 数字|单位|加减步进器
--- a/src/components/svgicon/README.md
+++ b/src/components/svgicon/README.md
@ -1,17 +1,20 @@
-# SVG图标容器-SVG Icon
+# SVG 图标容器-SVG Icon
+
+参照物:

-参照物: 
 - https://github.com/apple/swift-docc-render.git
 - src/components/SVGIcon.vue
 - src/components/Icons

-使用 <svg-icon> 元素，可以通过拷贝SVG的主体内容(如一个绘制路径path)到标签内,来实现SVG图标的显示。
+使用 <svg-icon> 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。

 好处：
- 内联加载SVG矢量图标
- 可动态操作SVG，通过修改扩展的svg-icon的属性值（如颜色、填充等）
+
+- 内联加载 SVG 矢量图标
+- 可动态操作 SVG，通过修改扩展的 svg-icon 的属性值（如颜色、填充等）

 目标物：
-1. SVG内容填充
-2. 普通的SVG图标
-3. 动态的SVG应用图标(时钟、日历、设置、安装应用过程中)
+
+1. SVG 内容填充
+2. 普通的 SVG 图标
+3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中)
--- a/src/components/svgicon/icons/example-icon.ts
+++ b/src/components/svgicon/icons/example-icon.ts
@ -1,5 +1,5 @@
-import { html, css, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import {html, css, LitElement} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
 import '../svgicon'

@customElement('example-icon')
@ -16,13 +16,11 @@ export class ExampleIcon extends LitElement {
    `
  }

-  static styles = css`
-    
-  `
+  static styles = css``
 }

 declare global {
  interface HTMLElementTagNameMap {
    'example-icon': ExampleIcon
  }
-}
+}
--- a/src/components/svgicon/svgicon.ts
+++ b/src/components/svgicon/svgicon.ts
@ -1,5 +1,5 @@
-import { html, css, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import {html, css, LitElement} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'

@customElement('svg-icon')
 export class SvgIcon extends LitElement {
@ -10,18 +10,14 @@ export class SvgIcon extends LitElement {
  bar = ''

  render() {
-    return html`
-      
-    `
+    return html``
  }

-  static styles = css`
-    
-  `
+  static styles = css``
 }

 declare global {
  interface HTMLElementTagNameMap {
    'svg-icon': SvgIcon
  }
-}
+}
--- a/src/components/ul/README.md
+++ b/src/components/ul/README.md
@ -1,9 +1,11 @@
 # 块-无序列表-Unordered List

 工作职责：
- `顺序罗列``有限种`内容填充
+
+- ` 顺序罗列``有限种 `内容填充

 说明：
+
 - | 用途：分割上下
 - TabBar 用于切换内容栏

@ -17,4 +19,4 @@

 ### 左侧行|右侧行

-用于突出对等显示的信息
+用于突出对等显示的信息
--- a/src/lib/gesture/gesture.md
+++ b/src/lib/gesture/gesture.md
@ -2,21 +2,19 @@

 ## Gesture Detector Finite State Machine

-
 <center><h2>FSM状态转移表</h2></center>

-当前状态→<br>条件↓ | initialState | touchStartedState | touchesStartedState | holdState | panState | swipeState | pinchState | rotateState
-|-|-|-|-|-|-|-|-
-收到 touchstart | touchStartedState
-收到 touchstart 且触摸点=1 | | initialState
-收到 touchstart 且触摸点>1 | | touchesStartedState
-收到 touchstart 且判定进行捏 | | | pinchState
-收到 touchstart 且判定进行旋转 | | | rotateState
-收到 touchstart 且判定进行平移 | | | panState
-收到 touchmove 且移动差值>平移阈值 || panState
-收到 touchend ||initialState||initialState|swipeState|initialState |initialState|initialState
-hold超时完成 || holdState
-
+| 当前状态 →<br>条件 ↓               | initialState      | touchStartedState   | touchesStartedState | holdState    | panState   | swipeState   | pinchState   | rotateState  |
+| ---------------------------------- | ----------------- | ------------------- | ------------------- | ------------ | ---------- | ------------ | ------------ | ------------ |
+| 收到 touchstart                    | touchStartedState |
+| 收到 touchstart 且触摸点=1         |                   | initialState        |
+| 收到 touchstart 且触摸点>1         |                   | touchesStartedState |
+| 收到 touchstart 且判定进行捏       |                   |                     | pinchState          |
+| 收到 touchstart 且判定进行旋转     |                   |                     | rotateState         |
+| 收到 touchstart 且判定进行平移     |                   |                     | panState            |
+| 收到 touchmove 且移动差值>平移阈值 |                   | panState            |
+| 收到 touchend                      |                   | initialState        |                     | initialState | swipeState | initialState | initialState | initialState |
+| hold 超时完成                      |                   | holdState           |

 ## Gesture Events

@ -24,8 +22,9 @@ hold超时完成 || holdState

 - definition: one or 2 fingers press, lift
 - Usage: Select / Zoom in
- Event: tap 
+- Event: tap
 - Interface
+
 ```idl
 Interface TapEvent {
  readonly attribute TouchList touches;
@ -39,6 +38,7 @@ Interface TapEvent {
 - Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
 - Event: panstart/panmove/panend
 - Interface
+
 ```idl
 Interface PanEvent {
  readonly attribute TouchList startTouches;
@ -49,10 +49,12 @@ Interface PanEvent {
 ```

 ### SwipeEvent
+
 - Definition: One fingers press, move quickly, lift
 - Usage: Dismiss, scroll, tilt / select multiple items, pan, tilt
 - Event: swipestart/swipemove/swipeend
 - Interface
+
 ```idl
 Interface SwipeEvent {
  readonly attribute Touch startTouch;
@ -61,13 +63,14 @@ Interface SwipeEvent {
  Readonly attribute double direction;
 }
 ```
- 
+
 ### PinchEvent

 - Definition: Two fingers press, move in/outwards, lift
 - Usage: Zoom in/out
 - Event: pinchstart/pinchmove/pinchend
 - Interface
+
 ```idl
 Interface Enum PinchZoom {
  IN,
@ -85,9 +88,10 @@ Interface PinchEvent {
 ### LongPressEvent

 - Definition: One or 2 fingers press, wait, lift
- Usage: Select an element, 
+- Usage: Select an element,
 - Event: longpress
 - Interface
+
 ```idl
 Interface LongPressEvent {
  readonly attribute TouchList pressTouches;
@ -101,6 +105,7 @@ Interface LongPressEvent {
 - Usage: Selection / Context menu
 - Event: doubletap
 - Interface
+
 ```idl
 Interface DoubleTapEvent {
  readonly attribute TouchList firstTapTouches;
@ -115,6 +120,7 @@ Interface DoubleTapEvent {
 - Usage: Rotate content, a picture or a map.
 - Event: rotatestart/rotatemove/rotateend
 - Interface
+
 ```ts
 Interface RotateEvent {
  readonly attribute TouchList startTouches;
@ -140,4 +146,4 @@ Interface RotateEvent {
 //     return target[prop]
 //   },
 // })
-```
+```
--- a/src/test/panels/card/card.ts
+++ b/src/test/panels/card/card.ts
@ -1,85 +1,84 @@
-import {html, LitElement, CSSResultArray} from "lit"
-import {customElement} from "lit/decorators.js"
-import {sharedStyles} from "../shared-styles"
-import "../../../components/card/card"
+import {html, LitElement, CSSResultArray} from 'lit'
+import {customElement} from 'lit/decorators.js'
+import {sharedStyles} from '../shared-styles'
+import '../../../components/card/card'

-@customElement("panel-card")
+@customElement('panel-card')
 export class PanelCard extends LitElement {
-    render() {
-        return html `
-            <div>
-                <h4>基础卡片</h4>
-                <star-card
-                 type="base"
-                 image="./src/test/panels/card/image/1.png"
-                 heading="基础卡片"
-                 subheading="详情叙述"
-                 footer="footer"
-                ></star-card>
-            </div>
-            <br>
-            <br>
-            <br>
-            <br>
-            <div>
-                <h4>链接卡片</h4>
-                <star-card
-                 type="linkcard"
-                 link="https://www.kylinos.cn/"
-                 image="./src/test/panels/card/image/1.png"
-                 heading="连接卡片"
-                 subheading="详情叙述"
-                 footer="footer"
-                ></star-card>
-            </div>
-            <br>
-            <br>
-            <br>
-            <br>
-            <div>
-                <h4>无图卡片</h4>
-                <star-card
-                 type="labelonly"
-                 heading="无图卡片"
-                 subheading="内容展示"
-                 footer="footer"
-                ></star-card>
-            </div>
-            <br>
-            <br>
-            <br>
-            <br>
-            <div>
-                <h4>无页脚卡片</h4>
-                <star-card
-                 type="footerdeleted"
-                 image="./src/test/panels/card/image/2.jpg"
-                 heading="无页脚卡片"
-                 subheading="内容展示"
-                ></star-card>
-            </div>
-            <br>
-            <br>
-            <br>
-            <br>
-            <div>
-                <h4>只图卡片</h4>
-                <star-card
-                 type="imageonly"
-                 image="./src/test/panels/card/image/2.jpg"
-                ></star-card>
-            </div>
-        `
-    }
-
-    public static override get styles(): CSSResultArray {
-        return [sharedStyles]
-    }
+  render() {
+    return html`
+      <div>
+        <h4>基础卡片</h4>
+        <star-card
+          type="base"
+          image="./src/test/panels/card/image/1.png"
+          heading="基础卡片"
+          subheading="详情叙述"
+          footer="footer"
+        ></star-card>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <div>
+        <h4>链接卡片</h4>
+        <star-card
+          type="linkcard"
+          link="https://www.kylinos.cn/"
+          image="./src/test/panels/card/image/1.png"
+          heading="连接卡片"
+          subheading="详情叙述"
+          footer="footer"
+        ></star-card>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <div>
+        <h4>无图卡片</h4>
+        <star-card
+          type="labelonly"
+          heading="无图卡片"
+          subheading="内容展示"
+          footer="footer"
+        ></star-card>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <div>
+        <h4>无页脚卡片</h4>
+        <star-card
+          type="footerdeleted"
+          image="./src/test/panels/card/image/2.jpg"
+          heading="无页脚卡片"
+          subheading="内容展示"
+        ></star-card>
+      </div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <div>
+        <h4>只图卡片</h4>
+        <star-card
+          type="imageonly"
+          image="./src/test/panels/card/image/2.jpg"
+        ></star-card>
+      </div>
+    `
+  }

+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
 }

 declare global {
-    interface HTMLElementTagNameMap {
-      "panel-card": PanelCard
-    }
-  }
+  interface HTMLElementTagNameMap {
+    'panel-card': PanelCard
+  }
+}
--- a/src/test/panels/indicators/home-indicator.ts
+++ b/src/test/panels/indicators/home-indicator.ts
@ -12,7 +12,6 @@ export class PanelHomeIndicator extends LitElement {
  @state()
  bar = ''

-
  attributeChangedCallback(name: string, _old: string, value: string): void {
    super.attributeChangedCallback(name, _old, value)
    console.log(name)
--- a/src/test/panels/picker/picker.ts
+++ b/src/test/panels/picker/picker.ts
@ -37,7 +37,7 @@ export class PanelPicker extends LitElement {
        <label>
          <span>medium</span>
          <star-picker type="medium" hide-value>
-            <star-picker-option value="1" >red</star-picker-option>
+            <star-picker-option value="1">red</star-picker-option>
            <star-picker-option value="2">yellow</star-picker-option>
            <star-picker-option value="3">blue</star-picker-option>
          </star-picker>
--- a/src/test/panels/radio/radio.ts
+++ b/src/test/panels/radio/radio.ts
@ -150,4 +150,4 @@ declare global {
  interface HTMLElementTagNameMap {
    'panel-radio': PanelRadio
  }
-}
+}
--- a/src/test/panels/shared-picker-styles.ts
+++ b/src/test/panels/shared-picker-styles.ts
@ -1,28 +1,28 @@
 import {css, CSSResult} from 'lit'

 export const sharedPickerStyles: CSSResult = css`
-* {
-  box-sizing: border-box;
-}
+  * {
+    box-sizing: border-box;
+  }

-body {
-  background: #fafafa;
-  font-family: sans-serif;
-  margin: 0;
-  padding: 20px;
-}
+  body {
+    background: #fafafa;
+    font-family: sans-serif;
+    margin: 0;
+    padding: 20px;
+  }

-label {
-  display: block;
-  margin-bottom: 50px;
-  width: inherit;
-}
+  label {
+    display: block;
+    margin-bottom: 50px;
+    width: inherit;
+  }

-span {
-  display: block;
-}
+  span {
+    display: block;
+  }

-#demo {
-  margin:20px;
-}
+  #demo {
+    margin: 20px;
+  }
 `
--- a/src/test/panels/switch-styles.ts
+++ b/src/test/panels/switch-styles.ts
@ -1,25 +1,25 @@
-import { css, CSSResult } from 'lit'
+import {css, CSSResult} from 'lit'

 export const switchStyles: CSSResult = css`
  div {
-      padding: 10px 40px;
-    }
+    padding: 10px 40px;
+  }

-    html {
-      scrollbar-width: none;
-    }
+  html {
+    scrollbar-width: none;
+  }

-    body {
-      margin: 0;
-      padding: 0;
-      background: #f0f0f0;
-    }
+  body {
+    margin: 0;
+    padding: 0;
+    background: #f0f0f0;
+  }

-    :root {
-      --left-transform: -100vw;
-      --right-transform: +100vw;
-      --li-base-height: 43px;
-      --li-left-padding: 10px;
-      --li-right-padding: 10px;
-    }
-`
+  :root {
+    --left-transform: -100vw;
+    --right-transform: +100vw;
+    --li-base-height: 43px;
+    --li-left-padding: 10px;
+    --li-right-padding: 10px;
+  }
+`
--- a/vite.config.ts
+++ b/vite.config.ts
@ -7,7 +7,7 @@ export default defineConfig({
      entry: 'src/index.ts',
      formats: ['es'],
    },
-    outDir: 'dist/'
+    outDir: 'dist/',
    // rollupOptions: {
    //   external: /^lit/,
    // },