(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
@ -5,6 +5,7 @@
 ## 介绍

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

 ```html demo
@ -23,8 +24,18 @@ star-button属性：
 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：显示按钮名，如省略则显示为“默认”。
@ -42,13 +53,28 @@ star-button属性：
 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：控制图标样式和其颜色。

 ```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;
  }
--- 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>
      `
--- a/src/components/card/card-styles.ts
+++ b/src/components/card/card-styles.ts
@ -2,7 +2,7 @@ import {css, CSSResult} from 'lit'

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

  div {
@ -10,8 +10,8 @@ export const sharedStyles: CSSResult = css`
  }

  .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
@ -4,15 +4,15 @@ import {
  CSSResultArray,
  HTMLTemplateResult,
  nothing,
-  } from "lit"
-  import {customElement, property} from "lit/decorators.js"
-  import {sharedStyles} from "./card-styles"
+} 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",
+  BASE = 'base',
+  LINKCARD = 'linkcard',
+  IMAGEONLY = 'imageonly',
+  LABELONLY = 'labelonly',
  FOOTERDELETED = 'footerdeleted',
 }

@ -21,25 +21,25 @@ import {
 //   MEDIUM = "medium",
 // }

-  @customElement("star-card")
+@customElement('star-card')
 export class StarCard extends LitElement {
  public static override get styles(): CSSResultArray {
    return [sharedStyles]
  }

-    @property({type: String}) type = "base"
+  @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 = ""
+  @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}">  
+          <img class="base-image" src="${this.image}" />
        </div>
        <div class="cardbody">
          <h3 class="heading">${this.heading}</h3>
@ -57,7 +57,7 @@ import {
      <a href=${this.link} target="_blank" style="text-decoration:none;">
        <div class="card base">
          <div class="cardhead">
-              <img class="base-image" src="${this.image}">
+            <img class="base-image" src="${this.image}" />
          </div>
          <div class="cardbody">
            <h3 class="heading">${this.heading}</h3>
@ -89,7 +89,7 @@ import {
    return html`
      <div class="card imageonly">
        <div class="cardhead">
-              <img class="imageonly-image" src="${this.image}">
+          <img class="imageonly-image" src="${this.image}" />
        </div>
      </div>
    `
@ -98,7 +98,7 @@ import {
    return html`
      <div class="card base">
        <div class="cardhead">
-              <img class="base-image" src="${this.image}">
+          <img class="base-image" src="${this.image}" />
        </div>
        <div class="cardbody">
          <h3 class="heading">${this.heading}</h3>
@ -121,7 +121,7 @@ import {
      case CardType.FOOTERDELETED:
        return this.getFooterDeletedCard()
      default:
-          console.error("unhanled 【star-card】 type")
+        console.error('unhanled 【star-card】 type')
        return nothing
    }
  }
@ -129,6 +129,6 @@ import {

 declare global {
  interface HTMLElementTagNameMap {
-      "star-card": StarCard
+    'star-card': StarCard
  }
 }
--- a/src/components/confirm/README.md
+++ b/src/components/confirm/README.md
@ -1,9 +1,15 @@
 ## 星光 Web 组件——确认弹窗组件：confirm 组件介绍（9 月 13 日)
+
 ## 介绍
+
 star-confirm 组件为确认弹窗组件，主要是操作确认框和消息确认框两种类型。
+
 ## 1、操作确认框
+
 使用场景：一般用于删除、卸载、二次确认等。
+
 ## 2、消息确认框
+
 使用场景：一般用于确认权限、安全提示、功能开启提示等。

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

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

 ## 基本用法
+
 通过 click 事件调用 Confirm 函数，根据传入属性的不同显示不同的弹出框类型
+
 ```
     Confirm({
     type: '',                     支持模态和非模态,默认是模态模式，用户只能操作该弹出框，不能点击其他
--- a/src/components/container/README.md
+++ b/src/components/container/README.md
@ -20,6 +20,7 @@
 ## 每层的任务

 - root-container
+
  1. 负责主屏,次屏等页容器
  2. 负责 dock 栏容器
  3. 负责主屏页面指示器
--- 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
@ -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);
    }
  `
--- a/src/components/container/folder-container.ts
+++ b/src/components/container/folder-container.ts
@ -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/grabber/README.md
+++ b/src/components/grabber/README.md
@ -1,6 +1,7 @@
 # 抓握指示器-Grabber

 下分：
+
 - Multitasking Indicator (多任务指示器)(TODO)
 - App Divider (App 分割条)(TODO)
 - Resizable Indicator (可调指示器)
@ -9,6 +10,7 @@
 ## 主屏指示器(Home Indicator)

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

 设计时应具备的功能：
+
 - 手指在抓取器上的状态
 - 向各个方向移动的事件指向
 - 移动的二维尺度(x,y)
--- a/src/components/grid-container/container.ts
+++ b/src/components/grid-container/container.ts
@ -1269,12 +1269,9 @@ 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

--- 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,6 +1,7 @@
 # 输入框-Input

 工作职责：
+
 - 输入信息

 ## 特点
--- a/src/components/li/README.md
+++ b/src/components/li/README.md
@ -1,6 +1,7 @@
 # 行-Line

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

 ## 特点
@ -10,6 +11,7 @@
 行中独立嵌套其他内容时，使用 slot

 ## 说明：
+
 - | 用途：偏左侧 | 偏右侧
 - () 用途：可选内容
 - 主文字在上，辅助文字在下
--- a/src/components/overflowmenu/README.md
+++ b/src/components/overflowmenu/README.md
@ -5,6 +5,7 @@
 ### overflowmenu：溢出菜单。

 ## 新需求（主页面要求——罗 9.5）
+
 1. 外部颜色控制（思路：使用自定义 css 样式，如： --test-color：XXX p{color： --test-color}，通过修改自定义 css 样式的值达到从外部修改组件颜色）
 2. 弹出菜单时的越界判断，包括主、副屏切换时的图标定位以及旋转屏幕时的定位
   思路：
@ -14,13 +15,13 @@
 3. 外部控制接口，事件还是属性（暂定）
 4. 弹出的菜单绑定在父节点上以供调用，减少重复使用（思路：后续通过 overlay 组件实现）

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

-
 ## 新要求：(9.7)
+
 （1）将不需要修改的“var”变量声明变成“const”(已修改)
 （2）变量命名要直观且有解释（已修改变量命名规范并添加对应注释）
 （3）点击一个按钮后其余按钮应关闭（方法同（1））
--- a/src/components/overflowmenu/overflowmenu.ts
+++ b/src/components/overflowmenu/overflowmenu.ts
@ -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/picker/README.md
+++ b/src/components/picker/README.md
@ -4,7 +4,6 @@

 # 介绍

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

 ```html demo
@ -34,6 +33,7 @@
 ```

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

 3. disable：实现了 picker 选择框的禁用状态
+
 ```html demo
 <star-picker disable>
  <star-picker-option value="1">red</star-picker-option>
--- a/src/components/picker/picker-styles.ts
+++ b/src/components/picker/picker-styles.ts
@ -26,9 +26,9 @@ export const sharedStyles: CSSResult = css`
  }

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

  .main-options-container {
--- 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,73 +22,78 @@ 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}';
+    '\\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
@ -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)}"
@ -118,9 +121,11 @@ export class StarPicker extends LitElement {
                </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>
@ -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
@ -17,6 +17,7 @@
 ```

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

--- a/src/components/prompt/prompt.ts
+++ b/src/components/prompt/prompt.ts
@ -10,14 +10,10 @@ export class StarPrompt extends LitElement {
  bar = ''

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

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

 declare global {
--- 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 日)

-
 ## 介绍
+
 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>
-    ```
+`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>
-    ```
+`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>
-    ```
+`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>  
-    ```
+`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>  
-    ```
+`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>  
-    ```
+`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> 
-    ```
+`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> 
-    ``` 
+`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/slider/README.md
+++ b/src/components/slider/README.md
@ -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,20 +35,17 @@
 <star-slider unfilled coverWidth="30%" disabled></star-slider>
 ```

-
 5. `Tick` --- 分格滑块(默认是 unfilled 属性)
   min=0,mix=100，按照需求填写 step(每一格）的大小<br>
   example : <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

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

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

 ## 后续需解决的问题：
+
 - tick 属性中小球不能完全覆盖 step
 - vertical 属性变化太快
--- a/src/components/svgicon/README.md
+++ b/src/components/svgicon/README.md
@ -1,6 +1,7 @@
 # SVG 图标容器-SVG Icon

 参照物:
+
 - https://github.com/apple/swift-docc-render.git
 - src/components/SVGIcon.vue
 - src/components/Icons
@ -8,10 +9,12 @@
 使用 <svg-icon> 元素，可以通过拷贝 SVG 的主体内容(如一个绘制路径 path)到标签内,来实现 SVG 图标的显示。

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

 目标物：
+
 1. SVG 内容填充
 2. 普通的 SVG 图标
 3. 动态的 SVG 应用图标(时钟、日历、设置、安装应用过程中)
--- a/src/components/svgicon/icons/example-icon.ts
+++ b/src/components/svgicon/icons/example-icon.ts
@ -16,9 +16,7 @@ export class ExampleIcon extends LitElement {
    `
  }

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

 declare global {
--- a/src/components/svgicon/svgicon.ts
+++ b/src/components/svgicon/svgicon.ts
@ -10,14 +10,10 @@ export class SvgIcon extends LitElement {
  bar = ''

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

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

 declare global {
--- a/src/components/ul/README.md
+++ b/src/components/ul/README.md
@ -1,9 +1,11 @@
 # 块-无序列表-Unordered List

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

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

--- 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

@ -26,6 +24,7 @@ hold超时完成 || holdState
 - Usage: Select / Zoom in
 - 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;
@ -68,6 +70,7 @@ Interface SwipeEvent {
 - Usage: Zoom in/out
 - Event: pinchstart/pinchmove/pinchend
 - Interface
+
 ```idl
 Interface Enum PinchZoom {
  IN,
@ -88,6 +91,7 @@ Interface PinchEvent {
 - 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;
--- a/src/test/panels/card/card.ts
+++ b/src/test/panels/card/card.ts
@ -1,9 +1,9 @@
-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`
@ -17,10 +17,10 @@ export class PanelCard extends LitElement {
          footer="footer"
        ></star-card>
      </div>
-            <br>
-            <br>
-            <br>
-            <br>
+      <br />
+      <br />
+      <br />
+      <br />
      <div>
        <h4>链接卡片</h4>
        <star-card
@ -32,10 +32,10 @@ export class PanelCard extends LitElement {
          footer="footer"
        ></star-card>
      </div>
-            <br>
-            <br>
-            <br>
-            <br>
+      <br />
+      <br />
+      <br />
+      <br />
      <div>
        <h4>无图卡片</h4>
        <star-card
@ -45,10 +45,10 @@ export class PanelCard extends LitElement {
          footer="footer"
        ></star-card>
      </div>
-            <br>
-            <br>
-            <br>
-            <br>
+      <br />
+      <br />
+      <br />
+      <br />
      <div>
        <h4>无页脚卡片</h4>
        <star-card
@ -58,10 +58,10 @@ export class PanelCard extends LitElement {
          subheading="内容展示"
        ></star-card>
      </div>
-            <br>
-            <br>
-            <br>
-            <br>
+      <br />
+      <br />
+      <br />
+      <br />
      <div>
        <h4>只图卡片</h4>
        <star-card
@ -75,11 +75,10 @@ export class PanelCard extends LitElement {
  public static override get styles(): CSSResultArray {
    return [sharedStyles]
  }
-
 }

 declare global {
  interface HTMLElementTagNameMap {
-      "panel-card": PanelCard
+    '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/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/,
    // },