Merge branch 'master' of ssh://172.20.184.160:7999/yr/star-web-components into featurn-component-locked

2022-09-26 16:49:59 +08:00 · 2022-09-26 16:49:59 +08:00 · 1731b05a1e
parent 9ee4ea8e5d 31f5e51c83
commit 1731b05a1e
41 changed files with 2031 additions and 405 deletions
--- a/src/components/brightness-slider/brightness-slider.ts
+++ b/src/components/brightness-slider/brightness-slider.ts
@ -0,0 +1,192 @@
+import {html, css, LitElement, HTMLTemplateResult} from 'lit'
+import {customElement, property, query} from 'lit/decorators.js'
+@customElement('brightness-slider')
+export class BrightnessSlider extends LitElement {
+  @query('.progress') progress!: HTMLDivElement
+  @query('.sliderBar') sliderBar!: HTMLDivElement
+  @property({type: String}) id = ''
+  @property({type: String}) _coverLen = ''
+  @property({type: Number}) innerWidth = 0
+  @property({type: Number}) distance = 0
+  @property({type: Number}) currentDistance = 0
+  @property({type: Number}) barWidth = 0
+  @property({type: Number}) max = 100
+  @property({type: Number}) value = 1
+  @property() touchAction = {
+    // 触摸开始落点
+    start: {
+      offsetX: 0,
+      offsetY: 0,
+      clientX: 0,
+      clientY: 0,
+    },
+
+    // 触摸结束落点
+    last: {
+      offsetX: 0,
+      offsetY: 0,
+      clientX: 0,
+      clientY: 0,
+    },
+  }
+
+  @property({type: String})
+  get coverLen() {
+    return this._coverLen
+  }
+
+  set coverLen(value: string) {
+    this.style.setProperty('--cover-length', value)
+    this._coverLen = value
+  }
+
+  render(): HTMLTemplateResult {
+    return html`
+      <div
+        class="sliderBar"
+        data-icon="brightness"
+        value=${this.value}
+        max=${this.max}
+        @touchstart=${this}
+        @touchmove=${this}
+        @touchend=${this}
+      >
+        <div class="progress"></div>
+      </div>
+    `
+  }
+
+  static styles = css`
+    :host {
+      width: inherit;
+      height: inherit;
+      dislay: block;
+      --cover-length: 3.78px; // 亮度为1
+      --background-lm: rgba(255, 255, 255, 0.5);
+      --background-dm: rgba(0, 0, 0, 0.15);
+      --progress-background-lm: rgba(255, 255, 255, 0.8);
+      --progress-background-dm: rgba(255, 255, 255, 0.7);
+    }
+
+    .sliderBar {
+      width: inherit;
+      height: inherit;
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      background: var(--background-lm);
+    }
+
+    .progress {
+      width: var(--cover-length);
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      background: var(--progress-background-lm);
+    }
+
+    .sliderBar::before {
+      position: absolute;
+      content: attr(data-icon);
+      font-family: gaia-icons;
+      font-style: normal;
+      text-rendering: optimizelegibility;
+      font-weight: 500;
+    }
+
+    @media screen and (min-width: 900px) {
+      .sliderBar {
+        border-radius: 16px;
+      }
+
+      .progress {
+        border-radius: 16px;
+      }
+
+      .sliderBar::before {
+        width: 48px;
+        height: 48px;
+        left: 29px;
+        top: 29px;
+        font-size: 48px;
+      }
+    }
+
+    @media screen and (min-width: 600px) {
+      .sliderBar {
+        border-radius: 8px;
+      }
+
+      .progress {
+        border-radius: 8px;
+      }
+
+      .sliderBar::before {
+        width: 24px;
+        height: 24px;
+        left: 14px;
+        top: 14px;
+        font-size: 24px;
+      }
+    }
+  `
+
+  firstUpdated() {
+    if (this.value) {
+      let len = Math.floor((this.value * this.sliderBar.offsetWidth) / this.max)
+      this.coverLen = len.toString()
+    }
+  }
+
+  handleEvent(event: TouchEvent) {
+    switch (event.type) {
+      case 'touchstart':
+        this.touchAction.start.clientX = event.touches[0].clientX
+        this.barWidth = this.sliderBar.offsetWidth
+        break
+      case 'touchmove':
+        this.touchAction.last.clientX = event.touches[0].clientX
+        this.distance =
+          this.touchAction.last.clientX - this.touchAction.start.clientX
+        this.currentDistance = this.distance + this.progress.offsetWidth
+
+        if (this.currentDistance < 0) {
+          // this.currentDistance = 0;
+          this.currentDistance = this.barWidth / this.max
+        }
+
+        if (this.currentDistance > this.barWidth) {
+          this.currentDistance = this.barWidth
+        }
+        this.progress.style.setProperty('width', this.currentDistance + 'px')
+        break
+      case 'touchend':
+        this.value = Math.floor(
+          (this.currentDistance * this.max) / this.barWidth
+        )
+        this.dispatchEvent(
+          new CustomEvent('brightness-slider-change', {
+            detail: {
+              value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+          })
+        )
+        break
+    }
+  }
+
+  setValue(value: number) {
+    this.value = value
+    let len = Math.floor((value * this.sliderBar.offsetWidth) / this.max)
+    this.coverLen = len.toString()
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'brightness-slider': BrightnessSlider
+  }
+}
--- a/src/components/brightness-slider/index.ts
+++ b/src/components/brightness-slider/index.ts
@ -0,0 +1 @@
+export * from './brightness-slider.js'
--- a/src/components/brightness-slider/package.json
+++ b/src/components/brightness-slider/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/brightness-slider",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./brightness-slider.js": {
+      "default": "./brightness-slider.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/brightness-slider/tsconfig.json
+++ b/src/components/brightness-slider/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
--- a/src/components/button/button.css.ts
+++ b/src/components/button/button.css.ts
@ -102,4 +102,10 @@ export default css`
    align-items: center;
    margin: auto;
  }
+
+  /* menubutton */
+  :host(#menuitem) button {
+    font-size: 24px;
+    height: 76px;
+  }
 `
--- a/src/components/drop-down-menu/drop-down-menu.ts
+++ b/src/components/drop-down-menu/drop-down-menu.ts
@ -0,0 +1,173 @@
+import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
+import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
+import {HeaderBarType} from '../header-bar/header-bar.js'
+import {
+  IconControlBar,
+  IconControlBarType,
+} from '../icon-control-bar/icon-control-bar.js'
+import {WebActivity} from './interface.js'
+import '../icon-control-bar/icon-control-bar.js'
+import '../header-bar/header-bar.js'
+export enum DropDownMenuType {
+  HEADER_WITH_TIME = 'header-with-time',
+  HEADER_WITH_DATE_TIME = 'header-with-date-time',
+}
+
+@customElement('drop-down-menu')
+export class DropDownMenu extends LitElement {
+  @property({type: DropDownMenuType}) type = ''
+  @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
+  getOnlyTime(): HTMLTemplateResult {
+    return html`
+      <div class="inner">
+        <header-bar type=${HeaderBarType.ONLY_TIME}>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="compose"
+            @click=${this}
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="settings"
+            @click=${this}
+          ></icon-control-bar>
+        </header-bar>
+        <div class="all-quick-icons">
+          <slot @slotchange=${this}></slot>
+        </div>
+      </div>
+    `
+  }
+
+  getTimeAndDate(): HTMLTemplateResult {
+    return html`
+      <div class="inner">
+        <header-bar type=${HeaderBarType.DATE_TIME}>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="settings"
+            @click=${this}
+          ></icon-control-bar>
+        </header-bar>
+        <div class="others">
+          <slot @slotchange=${this}></slot>
+        </div>
+      </div>
+    `
+  }
+
+  render(): HTMLTemplateResult | typeof nothing {
+    switch (this.type) {
+      case DropDownMenuType.HEADER_WITH_TIME:
+        return this.getOnlyTime()
+      case DropDownMenuType.HEADER_WITH_DATE_TIME:
+        return this.getTimeAndDate()
+      default:
+        console.error('unhandled 【pull-down-menu】 type')
+        return nothing
+    }
+  }
+
+  static styles = css`
+    :host {
+      width: inherit;
+      height: inherit;
+    }
+
+    :host([open]) {
+      transform: translateY(0);
+      transition: transform 300ms ease, visibility 300ms;
+      will-change: transform;
+      visibility: visible;
+    }
+
+    .inner {
+      width: inherit;
+      height: inherit;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    @media screen and (min-width: 900px) {
+      header-bar[type='only-time'] {
+        dispaly: flex;
+        width: 512px;
+        height: 52px;
+      }
+
+      header-bar[type='date-time'] {
+        dispaly: flex;
+        width: 860px;
+        height: 64px;
+      }
+
+      .all-quick-icons {
+        width: 100%;
+        height: calc(100% - 52px);
+        position: relative;
+        top: 40px;
+      }
+
+      .others {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 100px;
+      }
+    }
+
+    @media screen and (min-width: 600px) {
+      header-bar[type='only-time'] {
+        dispaly: flex;
+        width: 256px;
+        height: 26px;
+      }
+
+      header-bar[type='date-time'] {
+        dispaly: flex;
+        width: 430px;
+        height: 32px;
+      }
+
+      .all-quick-icons {
+        width: 100%;
+        height: calc(100% - 26px);
+        position: relative;
+        top: 20px;
+      }
+
+      .others {
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        top: 50px;
+      }
+    }
+  `
+
+  handleEvent(event: Event) {
+    switch (event.type) {
+      case 'click':
+        switch ((event.target as IconControlBar).icon) {
+          case 'compose':
+            window.dispatchEvent(new CustomEvent('editor-action'))
+            break
+          case 'settings':
+            let activity = new WebActivity('configure', {})
+            activity.start().then(
+              () => {},
+              () => {}
+            )
+            break
+        }
+        break
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'drop-down-menu': DropDownMenu
+  }
+}
--- a/src/components/drop-down-menu/index.ts
+++ b/src/components/drop-down-menu/index.ts
@ -0,0 +1 @@
+export * from './drop-down-menu.js'
--- a/src/components/drop-down-menu/interface.ts
+++ b/src/components/drop-down-menu/interface.ts
@ -0,0 +1,9 @@
+export interface WebActivity {
+  start(): Promise<any>
+  cancel(): void
+}
+
+export var WebActivity: {
+  prototype: WebActivity
+  new (name: string, data?: any): WebActivity
+}
--- a/src/components/drop-down-menu/package.json
+++ b/src/components/drop-down-menu/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/drop-down-menu",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./drop-down-menu.js": {
+      "default": "./drop-down-menu.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/drop-down-menu/tsconfig.json
+++ b/src/components/drop-down-menu/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": [
+    "*.ts",
+    "../icon-control-bar/icon-control-bar.js",
+    "../header-bar/header-bar.js",
+    "./interface.js"
+  ]
+}
--- a/src/components/grabber/README.md
+++ b/src/components/grabber/README.md
@ -9,6 +9,12 @@

 ## 主屏指示器(Home Indicator)

+定义：Home Indicator，为了达成全面屏，苹果移除了实体 Home 键，取而代之的是一条 134 x 5 pt 的虚拟 Home 指示条。参照 Macbook Pro 的 Touch Bar，感觉库克对可以滑动的 Bar 真是有迷之热爱。
+
+1px \* 3/4 = 1pt
+
+苹果全面屏底部多出了高度为 34 的 Home Indicator 区域。
+
 主屏指示器应具备的功能：

 - 锁屏处，向上拨动底部可抓取的主屏指示器随手指拖动向上推动锁屏页，进入主屏页
--- a/src/components/grabber/home-bar-indicator.ts
+++ b/src/components/grabber/home-bar-indicator.ts
@ -1,6 +1,5 @@
-import {html, css} from 'lit'
+import {html, css, CSSResultArray} from 'lit'
 import {customElement} from 'lit/decorators.js'
-import GestureDector from '../../lib/gesture/gesture-detector'
 import {StarBaseElement} from '../base/star-base-element'

@customElement('home-bar-indicator')
@ -8,77 +7,30 @@ export class HomeBarIndicator extends StarBaseElement {
  constructor() {
    super()
    this.startGestureDetector()
-    this.updateComplete.then(() => {
-      console.log(this)
-      const log = (e: any) => {
-        console.log(e.type, e.target)
-      }
-
-      /**
-       * Chrome 上调用 e.preventDedault() 可阻止右键菜单弹出，同时不会影响
-       * 正常 touch 事件的分发。
-       *
-       * Firefox 上调用 e.preventDedault() 可阻止右键菜单弹出，但会中断 touch 事件，
-       * 表现为：长按(touchstart)，中断，手抬起再按(touchmove)
-       *
-       * 测试长按事件时，请使用终端设备或Chrome
-       */
-      this.addEventListener(
-        'contextmenu',
-        (e) => {
-          e.stopImmediatePropagation()
-          if (navigator.vendor === 'Google Inc.') {
-            e.preventDefault()
-          }
-        },
-        true
-      )
-
-      /**
-       *
-       * 同时监听 tap 和 doubletap 事件时，注意设置可选参数的次序
-       *
-       */
-      // this.addEventListener('tap', log, {once:true});
-      // this.addEventListener('doubletap', log);
-      // this.addEventListener('panstart', log);
-      // this.addEventListener('panmove', log);
-      // this.addEventListener('panend', log);
-      // this.addEventListener('swipe', log);
-      // this.addEventListener('holdstart', log);
-
-      let myElement = document.createElement('button')
-      myElement.setAttribute('style', 'height:200px;width:200px;')
-      myElement = GestureDector.embedded(myElement)
-      myElement.addEventListener('tap', log)
-      myElement.addEventListener('doubletap', log, {once: true})
-      myElement.addEventListener('holdstart', log)
-      // console.log(GestureDector)
-      // GestureDector.disembedded(myElement)
-      this.shadowRoot?.appendChild(myElement)
-    })
  }

+  /**
+   * 一块等宽屏幕的区域
+   * @returns
+   */
  render() {
    return html``
  }

-  static styles = css`
-    :host {
-      position: absolute;
-      bottom: 0;
-      width: 100vw;
-      height: 100vh;
-      background-color: yellow;
-      user-select: none;
-    }
-    a {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: yellow;
-    }
-  `
+  public static override get styles(): CSSResultArray {
+    return [
+      css`
+        :host {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          height: 34px; /* 1px * 3/4 = 1pt */
+          background-color: yellow;
+          user-select: none;
+        }
+      `,
+    ]
+  }
 }

 declare global {
--- a/src/components/header-bar/header-bar.ts
+++ b/src/components/header-bar/header-bar.ts
@ -0,0 +1,327 @@
+import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
+import {customElement, property, query, state} from 'lit/decorators.js'
+
+export enum HeaderBarType {
+  ONLY_TIME = 'only-time',
+  DATE_TIME = 'date-time',
+}
+
+@customElement('header-bar')
+export class HeaderBar extends LitElement {
+  @state() updateTimeTimeout!: number
+  @state() updateDateTimeout!: number
+  @property({type: HeaderBarType}) type = ''
+
+  @query('#time') time!: HTMLDivElement
+  @query('#date') date!: HTMLDivElement
+
+  getTime(): HTMLTemplateResult {
+    return html`
+      <div class="time-outer">
+        <div id="time"></div>
+        <div class="time-icons">
+          <slot></slot>
+        </div>
+      </div>
+    `
+  }
+
+  getTimeAndDate(): HTMLTemplateResult {
+    return html`
+      <div class="time-date-outer">
+        <div class="time-date">
+          <div id="time"></div>
+          <div id="date"></div>
+        </div>
+        <div class="time-date-icons">
+          <slot></slot>
+        </div>
+      </div>
+    `
+  }
+
+  render() {
+    switch (this.type) {
+      case HeaderBarType.ONLY_TIME:
+        return this.getTime()
+      case HeaderBarType.DATE_TIME:
+        return this.getTimeAndDate()
+      default:
+        console.error('unhandled 【header-bar】 type')
+        return nothing
+    }
+  }
+
+  static styles = css`
+    :host {
+      --only-time-color-lm: #292929;
+      --only-time-color-dm: #f0f0f0;
+      --time-date-time-color-lm: #404040;
+      --time-date-date-color-lm: #000000;
+      --time-date-time-color-dm: #e0e0e0;
+      --time-date-date-color-dm: #e0e0e0;
+      width: inherit;
+      height: inherit;
+    }
+
+    .time-outer {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .time-outer > #time {
+      font-family: OPPOSans;
+      font-style: normal;
+      font-weight: 400;
+      color: var(--only-time-color-lm);
+    }
+
+    .time-icons > ::slotted(*) {
+      display: flex;
+    }
+
+    .time-date-outer {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: end;
+    }
+
+    .time-date {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      align-items: end;
+      vertical-align: middle;
+      font-family: 'OPPOSans';
+      font-style: normal;
+      font-weight: 400;
+      position: relative;
+    }
+
+    .time-date > #time {
+      color: var(--time-date-time-color-lm);
+    }
+
+    #date {
+      position: relative;
+      opacity: 0.6;
+      color: var(--time-date-date-color-lm);
+      mix-blend-mode: normal;
+    }
+
+    .host([deep-mode]) .time-outer > #time {
+      color: var(--only-time-color-dm);
+    }
+
+    .host([deep-mode]) #date {
+      color: var(--time-date-date-color-dm);
+    }
+
+    @media screen and (min-width: 900px) {
+      .time-outer > #time {
+        height: 52px;
+        line-height: 52px;
+        font-size: 52px;
+      }
+
+      .time-icons {
+        display: flex;
+        width: 136px;
+        position: relative;
+        right: 4px;
+      }
+
+      .time-icons > ::slotted(:last-child) {
+        position: relative;
+        left: 40px;
+      }
+
+      .time-date {
+        line-height: 64px;
+        left: 10px;
+      }
+
+      .time-date > #time {
+        font-size: 64px;
+      }
+
+      #date {
+        height: 34px;
+        line-height: 34px;
+        left: 22px;
+        font-size: 26px;
+      }
+
+      .time-date-icons {
+        position: relative;
+        right: 11px;
+      }
+    }
+
+    @media screen and (min-width: 600px) {
+      .time-outer > #time {
+        height: 26px;
+        line-height: 26px;
+        font-size: 26px;
+      }
+
+      .time-icons {
+        display: flex;
+        width: 68px;
+        position: relative;
+        right: 2px;
+      }
+
+      .time-icons > ::slotted(:last-child) {
+        position: relative;
+        left: 20px;
+      }
+
+      .time-date {
+        line-height: 32px;
+        left: 5px;
+      }
+
+      .time-date > #time {
+        font-size: 32px;
+      }
+
+      #date {
+        height: 17px;
+        line-height: 17px;
+        left: 11px;
+        font-size: 13px;
+      }
+
+      .time-date-icons {
+        position: relative;
+        right: 5.5px;
+      }
+    }
+  `
+
+  firstUpdated() {
+    this.autoUpdateDateTime()
+  }
+
+  autoUpdateDateTime() {
+    switch (this.type) {
+      case HeaderBarType.ONLY_TIME:
+        window.clearTimeout(this.updateTimeTimeout)
+        this.autoUpdateTime()
+        break
+      case HeaderBarType.DATE_TIME:
+        window.clearTimeout(this.updateDateTimeout)
+        window.clearTimeout(this.updateTimeTimeout)
+        this.autoUpdateDate()
+        this.autoUpdateTime()
+        break
+    }
+  }
+
+  autoUpdateTime() {
+    var d = new Date()
+    this.time.innerHTML = this.formatTime(d)
+    let self = this
+    var remainMillisecond = (60 - d.getSeconds()) * 1000
+    this.updateTimeTimeout = window.setTimeout(() => {
+      self.autoUpdateTime()
+    }, remainMillisecond)
+  }
+
+  autoUpdateDate() {
+    var d = new Date()
+    this.date.innerHTML = this.formatDate(d) + ' ' + this.getWeekDay()
+    let remainMillisecond =
+      (24 - d.getHours()) * 3600 * 1000 -
+      d.getMinutes() * 60 * 1000 -
+      d.getMilliseconds()
+    let self = this
+    this.updateDateTimeout = window.setTimeout(function updateDateTimeout() {
+      self.autoUpdateDate()
+    }, remainMillisecond)
+  }
+
+  getWeekDay() {
+    var d = new Date()
+    let daynumber = d.getDay()
+    let day = ''
+    switch (daynumber) {
+      case 0:
+        day = '周日'
+        break
+      case 1:
+        day = '周一'
+        break
+      case 2:
+        day = '周二'
+        break
+      case 3:
+        day = '周三'
+        break
+      case 4:
+        day = '周四'
+        break
+      case 5:
+        day = '周五'
+        break
+      case 6:
+        day = '周六'
+        break
+    }
+    return day
+  }
+
+  formatDate(d: Date | string, iso?: boolean) {
+    if (d instanceof Date) {
+      if (iso) {
+        let date = d.toISOString() // Thu Oct 07 2021 07:45:18 GMT+0800
+        date = date.split('T')[0]
+        return date
+      } else {
+        return d.toLocaleString(navigator.languages as string[], {
+          // year: 'numeric',
+          month: 'long',
+          day: '2-digit',
+        })
+      }
+    } else {
+      return d
+    }
+  }
+
+  formatTime(d: Date | string, iso?: boolean) {
+    if (d instanceof Date) {
+      if (iso) {
+        let time = d.toLocaleTimeString()
+        time = time.split(' ')[0]
+        if (time.indexOf(':') === 1) {
+          time = `0${time}`
+        }
+        return time
+      } else {
+        return d.toLocaleString(navigator.languages as string[], {
+          // hour12: (navigator as any).mozHour12,
+          hour12: false,
+          hour: 'numeric',
+          minute: 'numeric',
+        })
+      }
+    } else {
+      if (d.indexOf(':') == 1) {
+        d = '0' + d
+      }
+      return d
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'header-bar': HeaderBar
+  }
+}
--- a/src/components/header-bar/index.ts
+++ b/src/components/header-bar/index.ts
@ -0,0 +1 @@
+export * from './header-bar.js'
--- a/src/components/header-bar/package.json
+++ b/src/components/header-bar/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/header-bar",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./header-bar.js": {
+      "default": "./header-bar.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/header-bar/tsconfig.json
+++ b/src/components/header-bar/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
--- a/src/components/icon-control-bar-group/icon-control-bar-group.ts
+++ b/src/components/icon-control-bar-group/icon-control-bar-group.ts
@ -0,0 +1,152 @@
+import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
+import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
+
+export enum IconControlBarGroupType {
+  BASE = 'base',
+  WITH_STATE = 'with-state',
+}
+
+@customElement('icon-control-bar-group')
+export class IconControlBarGroup extends LitElement {
+  @property({type: IconControlBarGroupType}) type = ''
+  @property({type: Number}) count = 2
+  @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]
+
+  getbase(): HTMLTemplateResult {
+    const colorstyle =
+      this.count !== 4
+        ? html`
+            <style>
+              .icon-only > div > ::slotted(*) {
+                width: calc(100% / ${this.count}) !important;
+              }
+            </style>
+          `
+        : nothing
+    return html`
+      <div class="icon-only">
+        <div>
+          <slot></slot>
+        </div>
+        ${colorstyle}
+      </div>
+    `
+  }
+
+  getIconWithState(): HTMLTemplateResult {
+    return html`
+      <div class="icon-with-state">
+        <slot></slot>
+      </div>
+    `
+  }
+
+  firstUpdated() {
+    this.count = this.slotElements.length
+  }
+
+  render() {
+    switch (this.type) {
+      case IconControlBarGroupType.BASE:
+        return this.getbase()
+      case IconControlBarGroupType.WITH_STATE:
+        return this.getIconWithState()
+      default:
+        console.error('unhandled 【icon-control-bar-group】 type')
+        return nothing
+    }
+  }
+
+  static styles = css`
+    :host {
+      --background-lm: #ffffff;
+      --background-dm: #000000;
+      --opacity-lm: 0.75;
+      --opacity-dm: 0.25;
+      --line-border-lm: rgba(0, 0, 0, 0.07);
+      --line-border-dm: rgba(255, 255, 255, 0.07);
+
+      width: inherit;
+      height: inherit;
+      background: var(--background-lm);
+      mix-blend-mode: normal;
+      opacity: var(--opacity-lm);
+    }
+
+    .icon-with-state {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      // justify-content: space-around;
+      justify-content: space-between;
+    }
+
+    .icon-only {
+      width: inherit;
+      height: inherit;
+      background: inherit;
+      border-radius: inherit;
+      opacity: inherit;
+    }
+
+    .icon-only > div {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .icon-only > div > ::slotted(*) {
+      width: 25%;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon-only > div > ::slotted(:first-child) {
+      border-left-style: none;
+    }
+
+    :host([deep-mode]) {
+      background: var(--background-dm);
+    }
+
+    @media screen and (min-width: 900px) {
+      :host {
+        border-radius: 16px;
+      }
+
+      .icon-only > div > ::slotted(*) {
+        height: 30px;
+        border-left: 2px solid var(--line-border-lm);
+        border-radius: 2px;
+      }
+
+      :host([deep-mode]) .icon-only > div > ::slotted(*) {
+        border-left: 2px solid var(--line-border-dm);
+      }
+    }
+
+    @media screen and (min-width: 600px) {
+      :host {
+        border-radius: 8px;
+      }
+
+      .icon-only > div > ::slotted(*) {
+        height: 15px;
+        border-left: 1px solid var(--line-border-lm);
+        border-radius: 1px;
+      }
+
+      :host([deep-mode]) .icon-only > div > ::slotted(*) {
+        border-left: 1px solid var(--line-border-dm);
+      }
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-control-bar-group': IconControlBarGroup
+  }
+}
--- a/src/components/icon-control-bar-group/index.ts
+++ b/src/components/icon-control-bar-group/index.ts
@ -0,0 +1 @@
+export * from './icon-control-bar-group.js'
--- a/src/components/icon-control-bar-group/package.json
+++ b/src/components/icon-control-bar-group/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/icon-control-bar-group",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./icon-control-bar-group.js": {
+      "default": "./icon-control-bar-group.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/icon-control-bar-group/tsconfig.json
+++ b/src/components/icon-control-bar-group/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts"]
+}
--- a/src/components/icon-control-bar/icon-control-bar.ts
+++ b/src/components/icon-control-bar/icon-control-bar.ts
@ -0,0 +1,415 @@
+import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
+import {
+  customElement,
+  property,
+  eventOptions,
+  query,
+  state,
+} from 'lit/decorators.js'
+import {WebActivity} from './interface.js'
+
+export enum IconControlBarType {
+  BASE = 'base',
+  BASE_WITHOUT_BORDER = 'base-without-border',
+  WITH_STATE = 'with-state',
+}
+
+@customElement('icon-control-bar')
+export class IconControlBar extends LitElement {
+  @property({type: IconControlBarType}) type = ''
+  @property({type: String}) icon = ''
+  @property({type: String}) stateDesc = ''
+  @property({type: String}) settingsKey = ''
+  @property({type: Boolean}) bgchange = false
+  @property({type: String}) id = ''
+  @property({type: Boolean}) active = false
+  @state({}) timer!: NodeJS.Timeout
+
+  @query('.more-info-icon') moreInfoIcon!: HTMLDivElement
+  @query('.icon-button') iconBtn!: HTMLDivElement
+
+  getbase(): HTMLTemplateResult | typeof nothing {
+    if (!this.icon) {
+      console.error('【icon-control-bar】缺少 icon 参数')
+      return nothing
+    }
+
+    const iconstyle = html`
+      <style>
+        @media screen and (min-width: 900px) {
+          :host {
+            width: 104px;
+            height: 104px;
+          }
+        }
+
+        @media screen and (min-width: 600px) {
+          :host {
+            width: 52px;
+            height: 52px;
+          }
+        }
+      </style>
+    `
+
+    return html`
+      <div
+        class="icon-button icon-base with-border"
+        data-icon=${this.icon}
+        @click=${this.handleClick}
+        @touchstart=${this.handlePress}
+        @touchend=${this.handlePressEnd}
+      >
+        ${iconstyle}
+      </div>
+    `
+  }
+
+  getbaseWithOutBorder(): HTMLTemplateResult | typeof nothing {
+    if (!this.icon) {
+      console.error('【icon-control-bar】缺少 icon 参数')
+      return nothing
+    }
+
+    return html`
+      <div
+        class="icon-button icon-base without-border"
+        data-icon=${this.icon}
+        @click=${this.handleClick}
+        @touchstart=${this.handlePress}
+        @touchend=${this.handlePressEnd}
+      ></div>
+    `
+  }
+
+  getwithstate(): HTMLTemplateResult | typeof nothing {
+    if (!this.icon) {
+      console.error('【icon-control-bar】缺少 icon 参数')
+      return nothing
+    }
+
+    const iconstyle = html`
+      <style>
+        @media screen and (min-width: 900px) {
+          :host {
+            width: 240px;
+            height: 108px;
+          }
+        }
+
+        @media screen and (min-width: 600px) {
+          :host {
+            width: 120px;
+            height: 54px;
+          }
+        }
+      </style>
+    `
+
+    return html`
+      <div
+        class="icon-button icon-with-state with-border config-activity"
+        data-icon=${this.icon}
+        @click=${this.handleClick}
+        @touchstart=${this.handlePress}
+        @touchend=${this.handlePressEnd}
+      >
+        <p>${this.stateDesc}</p>
+        <div
+          class="more-info-icon"
+          @click=${this.handleInfo}
+          data-icon="expand-left"
+        ></div>
+        ${iconstyle}
+      </div>
+    `
+  }
+
+  @eventOptions({passive: false})
+  handleClick(event: Event) {
+    let isActive = true // 闹铃
+    if (this.bgchange) {
+      let target = event.target as HTMLElement
+      if (target.nodeName == 'P') {
+        target = target.parentElement as HTMLElement
+      }
+
+      if (target.className == 'more-info-icon') {
+        target = target.parentElement as HTMLElement
+      }
+
+      isActive = target.classList.contains('active')
+      this.activeOrInactive(isActive, target)
+    }
+
+    // if (this.type == IconControlBarType.WITH_STATE) {
+    //   if (target.className == "more-info-icon") {
+    //     target = target.parentElement as HTMLElement;
+    //   }
+    //   if (target.classList.contains("active")) {
+    //     this.moreInfoIcon.dataset.icon = "expand-left";
+    //   } else {
+    //     this.moreInfoIcon.dataset.icon = "";
+    //   }
+    // }
+
+    let self = this
+    window.dispatchEvent(
+      new CustomEvent('icon-control-bar-click', {
+        detail: {
+          id: self.id ? self.id : self.icon,
+          isActive: isActive,
+          target: self,
+        },
+      })
+    )
+  }
+
+  handleInfo() {
+    let self = this
+    window.dispatchEvent(
+      new CustomEvent('more-info-action', {detail: self.icon})
+    )
+  }
+
+  handlePress(event: Event) {
+    let target = event.target as HTMLElement
+    if (target.nodeName == 'P') {
+      target = target.parentElement as HTMLElement
+    }
+
+    if (this.getAttribute('disabled') === 'true') {
+      return
+    }
+
+    let section = this.icon
+    this.timer = setTimeout(() => {
+      let activity = new WebActivity('moz_configure_window', {
+        data: {
+          target: 'device',
+          section: section,
+        },
+      })
+      activity.start()
+    }, 300)
+
+    let self = this
+    window.dispatchEvent(
+      new CustomEvent('touch-start', {
+        detail: {
+          id: self.id ? self.id : self.icon,
+          target: self,
+        },
+      })
+    )
+  }
+
+  handlePressEnd() {
+    clearTimeout(this.timer)
+  }
+
+  activeOrInactive(isActive: boolean, element?: HTMLElement) {
+    if (element == null) {
+      isActive
+        ? this.iconBtn.classList.remove('active')
+        : this.iconBtn.classList.add('active')
+      this.active = isActive
+    } else {
+      isActive
+        ? element.classList.remove('active')
+        : element.classList.add('active')
+    }
+  }
+
+  render(): HTMLTemplateResult | typeof nothing {
+    switch (this.type) {
+      case IconControlBarType.BASE:
+        return this.getbase()
+      case IconControlBarType.BASE_WITHOUT_BORDER:
+        return this.getbaseWithOutBorder()
+      case IconControlBarType.WITH_STATE:
+        return this.getwithstate()
+      default:
+        console.error('unhandled 【icon-control-bar】 type')
+        return nothing
+    }
+  }
+
+  addClass(className: string[]) {
+    this.iconBtn.classList.add(...className)
+  }
+
+  removeClass(className: string) {
+    this.iconBtn.classList.remove(className)
+  }
+
+  getClassList() {
+    return this.iconBtn.classList
+  }
+
+  static styles = css`
+    :host {
+      --background-active: #1d98f5;
+      --background-lm: rgba(255, 255, 255, 0.35);
+      --background-dm: rgba(0, 0, 0, 0.15);
+      --text-color-lm: #4d4d4d;
+      --text-color-dm: #d1d1d1;
+      --text-color-active: #ffffff;
+    }
+
+    .active {
+      background-color: var(--background-active) !important;
+      color: var(--text-color-active) !important;
+    }
+
+    .with-border {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      background: var(--background-lm);
+    }
+
+    .icon-button::before {
+      text-align: center;
+      vertical-align: middle;
+      content: attr(data-icon);
+      font-family: gaia-icons;
+      font-style: normal;
+      text-rendering: optimizelegibility;
+      font-weight: 500;
+    }
+
+    .icon-base {
+      justify-content: center;
+    }
+
+    .more-info-icon::after {
+      text-align: center;
+      vertical-align: middle;
+      content: attr(data-icon);
+      font-family: gaia-icons;
+      font-style: normal;
+      text-rendering: optimizelegibility;
+      font-weight: 500;
+    }
+
+    p {
+      position: relative;
+      color: var(--text-color-lm);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: OPPOSans;
+      font-style: normal;
+      mix-blend-mode: normal;
+    }
+
+    .active > p {
+      color: var(--text-color-active);
+    }
+
+    :host([deep-mode]) .with-border {
+      background: var(--background-dm);
+    }
+
+    :host([deep-mode]) p {
+      position: relative;
+      color: var(--text-color-dm);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-family: OPPOSans;
+      font-style: normal;
+      font-weight: 400;
+      mix-blend-mode: normal;
+    }
+
+    @media screen and (min-width: 600px) {
+      .with-border {
+        border-radius: 8px;
+      }
+
+      .icon-button::before {
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        font-size: 24px;
+      }
+
+      .icon-with-state::before {
+        position: relative;
+        left: 11px;
+      }
+
+      .more-info-icon {
+        width: 8px;
+        height: 8px;
+        position: relative;
+        left: 29px;
+      }
+
+      .more-info-icon::after {
+        width: 8px;
+        height: 8px;
+        line-height: 8px;
+        font-size: 8px;
+      }
+
+      p {
+        width: 50px;
+        height: 10px;
+        left: 17px;
+        font-weight: 400;
+        font-size: 10.5px;
+        line-height: 10px;
+      }
+    }
+
+    @media screen and (min-width: 900px) {
+      .with-border {
+        border-radius: 16px;
+      }
+
+      .icon-button::before {
+        width: 48px;
+        height: 48px;
+        line-height: 48px;
+        font-size: 48px;
+      }
+
+      .icon-with-state::before {
+        position: relative;
+        left: 22px;
+      }
+
+      .more-info-icon {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        left: 58px;
+      }
+
+      .more-info-icon::after {
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        font-size: 16px;
+      }
+
+      p {
+        width: 100px;
+        height: 20px;
+        left: 34px;
+        font-size: 21px;
+        line-height: 20px;
+      }
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'icon-control-bar': IconControlBar
+  }
+}
--- a/src/components/icon-control-bar/index.ts
+++ b/src/components/icon-control-bar/index.ts
@ -0,0 +1 @@
+export * from './icon-control-bar.js'
--- a/src/components/icon-control-bar/interface.ts
+++ b/src/components/icon-control-bar/interface.ts
@ -0,0 +1,9 @@
+export interface WebActivity {
+  start(): Promise<any>
+  cancel(): void
+}
+
+export var WebActivity: {
+  prototype: WebActivity
+  new (name: string, data?: any): WebActivity
+}
--- a/src/components/icon-control-bar/package.json
+++ b/src/components/icon-control-bar/package.json
@ -0,0 +1,22 @@
+{
+  "name": "@star-web-components/icon-control-bar",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": {
+      "default": "./index.js"
+    },
+    "./index": {
+      "default": "./index.js"
+    },
+    "./icon-control-bar.js": {
+      "default": "./icon-control-bar.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/src/components/icon-control-bar/tsconfig.json
+++ b/src/components/icon-control-bar/tsconfig.json
@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "../../"
+  },
+  "include": ["*.ts", "./interface.js"]
+}
--- a/src/components/overflowmenu/overflowmenu.ts
+++ b/src/components/overflowmenu/overflowmenu.ts
@ -1,6 +1,7 @@
 import {LitElement, html, HTMLTemplateResult, CSSResultArray} from 'lit'
 import {customElement, property, queryAssignedElements} from 'lit/decorators.js'
 import '../button/button.js'
+import {OverlayStack} from '../overlay/overlay-stack'
 import {sharedStyles} from './overflowmenustyle.js'

@customElement('star-overflowmenu')
@ -20,81 +21,36 @@ export class StarOverflowMenu extends LitElement {
  @queryAssignedElements({flatten: true})
  _evenEl: any

-  _getElement() {
-    // 获取网页宽度用于判断菜单显示位置是否越界
-    const bodywidth = document.documentElement.clientWidth
-    const bodyheight = document.documentElement.clientHeight
-    // 获取菜单所在div,用于控制menu显示或隐藏，ts默认使用Element，需转换为HTMLElement
-    const mu = this.renderRoot.querySelector('#menuitem') as HTMLElement
-    // 获取star-button相对屏幕的位置
-    const buttonposition = this.renderRoot
-      .querySelector('star-button')
-      ?.getBoundingClientRect()
-    // star-button的top、bottom、left及right值
-    const buttontop = Number(buttonposition?.top)
-    const buttonbottom = Number(buttonposition?.bottom)
-    const buttonleft = Number(buttonposition?.left)
-    const buttonright = Number(buttonposition?.right)
-    // 通过“open”判断是否显示menu
-    if (this.open == true) {
-      for (var i = 0; i < this._evenEl.length; i++) {
-        const slotelement = this._evenEl[i]
-        // 设置div显示display状态
-        mu.style.display = 'block'
-        // 设置显示位置类型
-        // this._evenEl[i].style.position = 'fixed'
-        slotelement.style.position = 'relative'
-        this.open = false
-        // 获取溢出菜单width及height
-        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
-        // 右下角边界
-        if (rightline && bottomline) {
-          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'
-          return
-        } else if (bottomline) {
-          // 下侧边界
-          slotelement.style.bottom =
-            menuheight + (buttonbottom - buttontop) + 'px'
-          return
-        } else {
-          // 正常情况
-          return
-        }
-      }
+  public overlayStack = new OverlayStack()
+
+  public showmenu(e: Event) {
+    if (this.overlayStack.isOpen == false) {
+      // 获取响应事件节点
+      const targetNode = e.target as HTMLElement
+      // 获取溢出菜单
+      const originalNode = this
+      // 获取overlay显示内容
+      const overlaycontent = this.querySelector('#menu') as HTMLElement
+      // overlaycontent为空则退出
+      if (!overlaycontent) return
+      // 开启overlay
+      this.overlayStack.openOverlay(originalNode, targetNode, overlaycontent)
    } else {
-      for (var i = 0; i < this._evenEl.length; i++) {
-        mu.style.display = 'none'
-        this.open = true
-      }
+      this.overlayStack.closeOverlay()
    }
  }

-  protected firstUpdated(): void {
-    this._getElement()
-  }
-
  getBaseMenu(): HTMLTemplateResult {
+    // 为OverflowMenu绑定监听
+    this.addEventListener('test', () => {
+      this.overlayStack.closeOverlay()
+    })
    return html`
      <star-button
        type="icononly"
-        icon=${this.icon}
-        @click=${this._getElement}
+        id="openmenu"
+        @click=${this.showmenu}
      ></star-button>
-      <div id="menuitem">
-        <slot></slot>
-      </div>
    `
  }

--- a/src/components/overflowmenu/overflowmenustyle.ts
+++ b/src/components/overflowmenu/overflowmenustyle.ts
@ -2,22 +2,19 @@ import {css, CSSResult} from 'lit'

 export const sharedStyles: CSSResult = css`
  :host {
-    width: auto;
+    width: inherit;
+    max-width: 300px;
    display: block;
    text-align: left;
  }

-  #menuitem {
-    width: auto;
-    position: inherit;
-  }
-
  star-button {
    display: block;
    width: 35px;
  }

  ::slotted(star-ul) {
+    display: none;
    margin: 0;
    z-index: 2;
  }
--- a/src/components/overlay/active-overlay.ts
+++ b/src/components/overlay/active-overlay.ts
@ -1,9 +1,14 @@
-import {LitElement, html, TemplateResult} from 'lit'
+import {LitElement, html, TemplateResult, CSSResultArray} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import {OverlayOpenDetail} from './overlay-types'
+import {sharedStyles} from './overlaystyle'

@customElement('star-activeoverlay')
 export class ActiveOverlay extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+
  // 根节点（占位符所表示的元素的父节点）
  public root?: HTMLElement
  // 被点击的节点
@ -14,9 +19,6 @@ export class ActiveOverlay extends LitElement {
  @property({reflect: true})
  public placement?: String

-  offset!: number
-  skidding!: number
-
  public constructor() {
    super()
  }
@ -28,12 +30,9 @@ export class ActiveOverlay extends LitElement {
  // 初始化函数
  private extractDetail(detail: OverlayOpenDetail): void {
    this.placement = detail.placement
-    this.offset = detail.offset
-    this.skidding = detail.skidding || 0
    this.root = detail.root
  }

-  public stealOverlayContent(_: HTMLElement) {}
  // 位置更新函数
  public updatePosition = () => {
    // 设置最大显示宽度和高度
@ -47,44 +46,41 @@ export class ActiveOverlay extends LitElement {
    const bodyheight = document.documentElement.clientHeight
    // 被点击的节点
    const targetnode = this.targetNode as HTMLElement
-    // 获取被点击节点位置——用于越界判断和定位
+    // 获取被点击节点位置——用于越界判断和定位：分别表示上下左右四个方位
    const targetNodePosition = targetnode.getBoundingClientRect()
    const targettop = Number(targetNodePosition?.top)
    const targetbottom = Number(targetNodePosition?.bottom)
    const targetleft = Number(targetNodePosition?.left)
-    const targetright = Number(targetNodePosition?.right)
    // 设置样式
    this.style.position = 'relative'
-    this.style.zIndex = '1'
+    this.style.zIndex = '10'
    this.style.maxWidth = availableWidth + 'px'
    this.style.maxHeight = availableHeight + 'px'
-    // 边界判断
-    const rightline = targetright + contentwidth > bodywidth ? true : false // 右侧越界条件
+    // 边界判断：targetright指被点击的节点右边界，contentwidth表示将要显示的内容的宽度
+    const rightline = targetleft + contentwidth > bodywidth ? true : false // 右侧越界条件
    const bottomline =
      targetbottom + availableHeight > bodyheight ? true : false //下方越界条件
+    let left: number
+    let top: number
    // 右下角边界
    if (rightline && bottomline) {
-      this.style.left =
-        targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
-      this.style.top = targettop - targetnode.offsetHeight + 'px'
-      return
+      left = targetleft - (contentwidth - targetnode.offsetWidth)
+      top = targettop - contentheight - targetnode.offsetHeight
    } else if (rightline) {
      // 右侧边界
-      this.style.left =
-        targetleft - (contentwidth - targetnode.offsetWidth) + 'px'
-      this.style.top = targettop + targetnode.offsetHeight + 'px'
-      return
+      left = targetleft - (contentwidth - targetnode.offsetWidth)
+      top = targettop + targetnode.offsetHeight
    } else if (bottomline) {
      // 下侧边界
-      this.style.left = targetleft + 'px'
-      this.style.top = targettop - contentheight + 'px'
-      return
+      left = targetleft
+      top = targettop - contentheight - targetnode.offsetHeight
    } else {
      // 正常情况
-      this.style.left = targetleft + 'px'
-      this.style.top = targettop + targetnode.offsetHeight + 'px'
-      return
+      left = targetleft
+      top = targettop + targetnode.offsetHeight
    }
+    this.style.left = left + 'px'
+    this.style.top = top + 'px'
  }

  private onSlotChange(): void {
--- a/src/components/overlay/overlay-stack.ts
+++ b/src/components/overlay/overlay-stack.ts
@ -13,18 +13,46 @@ export class OverlayStack {
    const activeOverlay = ActiveOverlay.create(root, targetnode, content)
    // 开启状态
    this.isOpen = true
-    // 为overlay添加显示内容
-    activeOverlay.appendChild(content as HTMLElement)
    // 创建注释节点模板——用于替换要展示在overlay中的元素
    const placeholderTemplate: Comment = document.createComment(
      'placeholder for reparented element'
    )
+    // 为overlay添加显示内容
+    activeOverlay.appendChild(content as HTMLElement)
    // 占位
    activeOverlay.root?.appendChild(placeholderTemplate)
-    // 将activeoverlay添加到body底部
-    document.body.append(activeOverlay)
+    // // 将activeoverlay添加到body底部显示div中
+    let showmenu = document.querySelector('#showmenu') as HTMLElement //后续关联模态时
+    if (showmenu == null) {
+      showmenu = document.createElement('div')
+      showmenu.setAttribute('id', 'showmenu')
+      Object.assign(showmenu.style, {
+        width: '100vw',
+        height: '100vh',
+        position: 'fixed',
+        backgroundColor: '#00000033',
+        justifycontent: 'center',
+      })
+    } else {
+      showmenu.style.display = 'fixed'
+    }
+    // 为显示div添加overlay并将div添加到body中
+    showmenu.append(activeOverlay)
+    document.body.appendChild(showmenu)
    // 将activeoverlay添加到已打开overlay数组中
    this.overlays.push(activeOverlay)
+    // 为showmenu显示层添加监听
+    showmenu.addEventListener('click', function (e: Event) {
+      console.log(e.target)
+      if (e.target == this) {
+        root!.dispatchEvent(
+          new Event('test', {
+            bubbles: true,
+            composed: true,
+          })
+        )
+      }
+    })
  }

  /**
@ -41,8 +69,11 @@ export class OverlayStack {
    const content = closeactiveoverlay.restoreContent as HTMLElement
    // 替换子节点
    srcroot?.replaceChild(content, placeholder)
+    const showmenu = document.querySelector('#showmenu') as HTMLElement
    // 从body中移除activeoverlay节点
-    document.body.removeChild(closeactiveoverlay)
+    showmenu.removeChild(closeactiveoverlay)
+    // showmenu.style.display = 'none'
+    document.body.removeChild(showmenu)
    this.isOpen = false
  }
 }
--- a/src/components/overlay/overlaystyle.ts
+++ b/src/components/overlay/overlaystyle.ts
@ -0,0 +1,9 @@
+import {css, CSSResult} from 'lit'
+export const sharedStyles: CSSResult = css`
+  :host {
+    display: block;
+  }
+  div {
+    max-width: 200px;
+  }
+`
--- a/src/components/pattern-view/README.md
+++ b/src/components/pattern-view/README.md
@ -1,32 +1,36 @@
 # 图案密码 pattern-view

-
 工作职责：

 - 由九宫圆圈组成的图案密码
 - 默认密码为 `012543` (滑动如下图)
-```
-    ---        ---        --- 
-   | * | **** | * | **** | * |
-    ---        ---        --- 
-                           * 
-    ---        ---        --- 
-   | * | **** | * | **** | * |
-    ---        ---        --- 

-    ---        ---        --- 
-   |   |      |   |      |   |
-    ---        ---        --- 
 ```
+    ---        ---        ---
+   | * | **** | * | **** | * |
+    ---        ---        ---
+                           *
+    ---        ---        ---
+   | * | **** | * | **** | * |
+    ---        ---        ---
+
+    ---        ---        ---
+   |   |      |   |      |   |
+    ---        ---        ---
+```
+
 - 点击数字反馈，输入成功上滑，输入错误抖动反馈

 ### 默认
+
 ```
 <star-pattern-view></star-pattern-view>
 ```
+
 ### 距离顶部的位置 `topDir` 默认`217.5px`
+
 ```
 <star-pattern-view topDir="300px"></star-pattern-view>
 <star-pattern-view topDir="-100px"></star-pattern-view>

-```
+```
--- a/src/components/ul/ul.css.ts
+++ b/src/components/ul/ul.css.ts
@ -2,43 +2,49 @@ import {css} from 'lit'

 export default css`
  :host {
-    :host {
-      width: inherit;
-      display: block;
-      margin: 20px auto;
-      max-width: 88vw;
-    }
+    width: inherit;
+    display: block;
+    margin: 20px auto;
+    max-width: 88vw;
+  }

-    ul {
-      list-style: none;
-      flex-direction: column;
-      display: flex;
-      width: 100%;
-      padding: 0;
-      margin: 10px auto;
-      max-width: 88vw;
-      background: var(--bg-ul, var(--pure-white));
-      box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
-      border-radius: inherit; /* 外部传入 */
-    }
+  /* menu ul */
+  :host(#iconmenu) {
+    width: 320px;
+    display: block;
+    margin: 0;
+    border-radius: 16px;
+  }

-    header,
-    footer {
-      color: #888;
-      margin-left: 10px;
-      font-size: 12px;
-    }
+  ul {
+    list-style: none;
+    flex-direction: column;
+    display: flex;
+    width: 100%;
+    padding: 0;
+    margin: 10px auto;
+    max-width: 88vw;
+    background: var(--bg-ul, var(--pure-white));
+    box-shadow: rgb(64 60 67 / 16%) 1px 1px 5px 1px;
+    border-radius: inherit; /* 外部传入 */
+  }

-    star-ul-base {
-      margin: 8px 0 12px 0; /* override child(star-ul-base) */
-    }
+  header,
+  footer {
+    color: #888;
+    margin-left: 10px;
+    font-size: 12px;
+  }

-    footer a {
-      text-decoration: unset;
-    }
+  star-ul-base {
+    margin: 8px 0 12px 0; /* override child(star-ul-base) */
+  }

-    footer a:visited {
-      color: blue;
-    }
+  footer a {
+    text-decoration: unset;
+  }
+
+  footer a:visited {
+    color: blue;
  }
 `
--- a/src/index.ts
+++ b/src/index.ts
@ -16,6 +16,8 @@ import './components/toast/toast'
 import './components/picker/picker'
 import './components/overflowmenu/overflowmenu'
 import './components/slider/slider'
+import './components/icon-control-bar/icon-control-bar'
+import './components/icon-control-bar-group/icon-control-bar-group'
 import './components/notification/notification'
 import './components/prompt/prompt'
 import './components/digicipher/digicipher'
--- a/src/lib/gesture/README.md
+++ b/src/lib/gesture/README.md
@ -81,16 +81,16 @@ class MyElement extends StarBaseElement {

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

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

 ## 手势事件(Gesture Events)
@ -224,3 +224,27 @@ Interface RotateEvent {
 //   },
 // })
 ```
+
+## 注意
+
+```js
+/**
+ * Chrome 上调用 e.preventDedault() 可阻止右键菜单弹出，同时不会影响
+ * 正常 touch 事件的分发。
+ *
+ * Firefox 上调用 e.preventDedault() 可阻止右键菜单弹出，但会中断 touch 事件，
+ * 表现为：长按(touchstart)，中断，手抬起再按(touchmove)
+ *****
+ * 测试长按事件时，请使用终端设备或Chrome
+ */
+this.addEventListener(
+  'contextmenu',
+  (e) => {
+    e.stopImmediatePropagation()
+    if (navigator.vendor === 'Google Inc.') {
+      e.preventDefault()
+    }
+  },
+  true
+)
+```
--- a/src/lib/gesture/TODO.md
+++ b/src/lib/gesture/TODO.md
@ -0,0 +1,7 @@
+# TODO
+
+1. 单击位移阈值 10px 或热区以内
+2. 双击间隔时间小于 300ms，两次点击的手指位移阈值 10px
+3. 长按的位移阈值 10px
+4. 拖放判定条件：手指进入长按状态后，手指位移阈值 10px
+5. 滑动、轻扫判定条件：手指位移阈值 20px
--- a/src/lib/gesture/gesture-detector.ts
+++ b/src/lib/gesture/gesture-detector.ts
@ -99,8 +99,7 @@ export interface SwipeEvent {
  readonly startTouch?: Touch
  readonly endTouch?: Touch
  readonly velocity: number
-  // readonly direction: number
-  readonly direction?: PanOrSwipeDirection
+  readonly direction?: PanOrSwipeDirection // number
  readonly angle?: number
 }

@ -222,8 +221,6 @@ export type GestureState =
  | 'panState'
  | 'holdState'
  | 'swipeState'
-  | 'rotateState'
-  | 'pinchState'
  | 'transformState'

 type PickUP<T, K extends keyof T> = T[K]
@ -733,31 +730,11 @@ export default class GestureDector {
  }

  /**
-   * *  Pinch:(pointers:2,threshold:0)
-   * - pinchstart
-   * - pinchmove
-   * - pinchend
-   * - pinchcancel
-   * - pinch(include below all)
-   * - pinchin
-   * - pinchout
-   */
-  private pinchState: FSMGestureState = {
-    name: 'pinchState',
-    init: (evt, touch) => {
-      this.pinchState.touchstart?.(evt, touch)
-    },
-    touchstart: (_, __) => {
-      this.emitEvent('pinchstart')
-    },
-    touchmove: null,
-    touchend: null,
-    touchcancel: null,
-  }
-
-  /**
-   * 针对双指手势的变换状态
+   * 变换状态
   *
+   * 针对双指手势，专用于处理双指捏合和旋转动作
+   *
+   * 囊括:rotate 和 pinch
   *
   */
  private transformState: FSMGestureState = {
@ -835,8 +812,9 @@ export default class GestureDector {
      }

      if (this.scaled === true) {
-        this.switchTo(this.pinchState, evt, touch)
+        // ..
      } else if (this.rotated === true) {
+        // ..
      }

      if (this.scaled === true || this.rotated === true) {
@ -1124,6 +1102,7 @@ export default class GestureDector {
      // 清理资源
      this.lastPanTouchID = -1

+      // 如果检测到是第2指，提前退出
      if (isSecondFinger) {
        debugInfo('swipe::isSecondFinger', this.vc)
        if (
@ -1201,15 +1180,6 @@ export default class GestureDector {
    touchcancel: null,
  }

-  // private rotateState: FSMGestureState = {
-  //   name: 'rotateState',
-  //   init: () => {},
-  //   touchstart: null,
-  //   touchmove: null,
-  //   touchend: null,
-  //   touchcancel: null,
-  // }
-
  // TODO: 优化调用处，添加缓存处理
  private getSeriesEvent<T extends SeriesOfEventsType>(
    type: T
--- a/src/test/panels/activeoverlay/activeoverlay.ts
+++ b/src/test/panels/activeoverlay/activeoverlay.ts
@ -13,6 +13,9 @@ export class PanelActiveOverlay extends LitElement {
  public overlayStack = new OverlayStack()

  public test(e: Event) {
+    this.addEventListener('test', () => {
+      this.overlayStack.closeOverlay()
+    })
    if (this.overlayStack.isOpen == false) {
      // 获取被点击节点
      const targetNode = e.target as HTMLElement
@ -40,7 +43,7 @@ export class PanelActiveOverlay extends LitElement {
        <button>这是要显示的内容</button>
      </div>

-      <div style="position: fixed; top: 98%;">
+      <div style="position: fixed; top: 20%;">
        <button id="open" @click="${this.test}">点击显示overlay层</button>
        <button>这是要显示的内容</button>
      </div>
@ -50,7 +53,7 @@ export class PanelActiveOverlay extends LitElement {
        <button>这是要显示的内容</button>
      </div>

-      <div style="position: fixed; top: 98%; left: 90%;">
+      <div style="position: fixed; top: 80%; left: 90%;">
        <button id="open" @click="${this.test}">点击显示overlay层</button>
        <button>这是要显示的内容</button>
      </div>
--- a/src/test/panels/control-center/control-center.ts
+++ b/src/test/panels/control-center/control-center.ts
@ -0,0 +1,129 @@
+import {html, LitElement} from 'lit'
+import {customElement, query} from 'lit/decorators.js'
+import {IconControlBarType} from '../../../components/icon-control-bar/icon-control-bar'
+import '../../../components/icon-control-bar/icon-control-bar'
+import {IconControlBarGroupType} from '../../../components/icon-control-bar-group/icon-control-bar-group'
+import {UlType} from '../../../components/ul/ul'
+import {HeaderBarType} from '../../../components/header-bar/header-bar'
+import '../../../components/icon-control-bar-group/icon-control-bar-group'
+import '../../../components/ul/ul'
+import '../../../components/header-bar/header-bar'
+@customElement('panel-control-center')
+export class PanelControlCenter extends LitElement {
+  @query('icon-control-bar[icon="wifi-4"]') wifiIcon!: LitElement
+  @query('icon-control-bar[icon="crop"]') cropBtn!: LitElement
+  @query('icon-control-bar[icon="brightness"]') brightnessBtn!: LitElement
+  render() {
+    return html`
+      <star-ul type=${UlType.ONLY_HEADER} title="icon-control-bar">
+        <p>带状态的图标，点击有背景色变化，绑定settingsObserver监测值</p>
+        <icon-control-bar
+          type=${IconControlBarType.WITH_STATE}
+          icon="wifi-4"
+          bgchange="true"
+          settingsKey="wifi.enabled"
+          stateDesc="fgfgfhhhh"
+          @click=${this}
+        ></icon-control-bar>
+        <br />
+        <p>基本图标</p>
+        <icon-control-bar
+          type=${IconControlBarType.BASE}
+          icon="crop"
+          @click=${this}
+        ></icon-control-bar>
+        <br />
+        <p>基本图标，点击有背景色变化</p>
+        <icon-control-bar
+          type=${IconControlBarType.BASE}
+          icon="brightness"
+          bgchange="true"
+          settingsKey="screen.automatic-brightness"
+          @click=${this}
+        ></icon-control-bar>
+        <br />
+        <p>基本图标，不带边框</p>
+        <icon-control-bar
+          type=${IconControlBarType.BASE_WITHOUT_BORDER}
+          icon="settings"
+        ></icon-control-bar>
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="icon-control-bar-group">
+        <p>一行带状态的图标</p>
+        <icon-control-bar-group type=${IconControlBarGroupType.WITH_STATE}>
+          <icon-control-bar
+            type=${IconControlBarType.WITH_STATE}
+            icon="wifi-4"
+            bgchange="true"
+            settingsKey="wifi.enabled"
+            stateDesc=""
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.WITH_STATE}
+            icon="bluetooth"
+            bgchange="true"
+            settingsKey="bluetooth.enabled"
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.WITH_STATE}
+            icon="data"
+            bgchange="true"
+            settingsKey="a.enabled"
+          ></icon-control-bar>
+        </icon-control-bar-group>
+        <br />
+        <br />
+        <p>一个box框，框内是由短竖线分隔开的基本图标</p>
+        <icon-control-bar-group type=${IconControlBarGroupType.BASE} count="4">
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="crop"
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="video"
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="camera"
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="o"
+          ></icon-control-bar>
+        </icon-control-bar-group>
+        <br />
+      </star-ul>
+
+      <star-ul type=${UlType.ONLY_HEADER} title="header-bar">
+        <p>header带时间</p>
+        <header-bar type=${HeaderBarType.ONLY_TIME}>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="compose"
+          ></icon-control-bar>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="settings"
+          ></icon-control-bar>
+        </header-bar>
+        <br />
+        <p>header带时间/日期/星期</p>
+        <header-bar type=${HeaderBarType.DATE_TIME}>
+          <icon-control-bar
+            type=${IconControlBarType.BASE_WITHOUT_BORDER}
+            icon="settings"
+          ></icon-control-bar>
+        </header-bar>
+        <br />
+      </star-ul>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-control-center': PanelControlCenter
+  }
+}
--- a/src/test/panels/indicators/home-indicator.ts
+++ b/src/test/panels/indicators/home-indicator.ts
@ -1,32 +1,35 @@
 import {html, css, LitElement} from 'lit'
-import {customElement, query, state} from 'lit/decorators.js'
+import {customElement, query} from 'lit/decorators.js'
 import '../../../components/grabber/home-bar-indicator'
 import {HomeBarIndicator} from '../../../components/grabber/home-bar-indicator'

@customElement('panel-home-indicator')
 export class PanelHomeIndicator extends LitElement {
  @query('home-indicator', true) homeIndicator!: HomeBarIndicator
-  // @property({type: String}) status = this.homeIndicator?.status
-  foo = ''

-  @state()
-  bar = ''
-
-  attributeChangedCallback(name: string, _old: string, value: string): void {
-    super.attributeChangedCallback(name, _old, value)
-    console.log(name)
-  }
-
-  constructor() {
-    super()
-    // setInterval(() => {
-    //   console.log(this.homeIndicator.movePoint)
-    // }, 30)
+  handleEvent(e: Event) {
+    switch (e.type) {
+      case 'panmove':
+        console.log(e.type)
+        break
+      default:
+        console.log(e.type)
+    }
  }

  render() {
    return html`
-      <home-bar-indicator></home-bar-indicator>
+      <home-bar-indicator
+        @swipeup=${this}
+        @swipedown=${this}
+        @swiperight=${this}
+        @swipeleft=${this}
+        @panup=${this}
+        @pandown=${this}
+        @panright=${this}
+        @panleft=${this}
+        @panmove=${this}
+      ></home-bar-indicator>
    `
  }

--- a/src/test/panels/overflowmenu/overflowmenu.ts
+++ b/src/test/panels/overflowmenu/overflowmenu.ts
@ -1,10 +1,9 @@
-import {html, LitElement, css} from 'lit'
+import {html, LitElement, css, CSSResultArray} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
 import '../../../components/button/button'
 import '../../../components/ul/ul'
 import '../../../components/li//li'
-import {UlType} from '../../../components/ul/ul'
-import {LiType} from '../../../components/li//li'
+import {baseStyles} from '../../../components/base/base-style'

@customElement('panel-overflowmenu')
 export class PanelOverflowMenu extends LitElement {
@ -12,134 +11,214 @@ export class PanelOverflowMenu extends LitElement {
    super()
  }

-  // state用于记录展开的菜单数量，用以菜单展开状态互斥的判断
-  @property({type: Number}) state = 0
-
-  // 关闭菜单
-  closeoverflowmenu(e: any) {
-    // 获取点击事件所在的标签名字
-    const tagName = e.target.tagName.toLowerCase()
-    // 判断是否点击的star-overflowmenu标签
-    if (tagName == 'star-overflowmenu') {
-      this.state++
-    }
-    // 如果点在空白处则关闭菜单
-    if (tagName != 'star-overflowmenu') {
-      // 获取所有的star-overflowmenu
-      var menulist = this.shadowRoot!.querySelectorAll('star-overflowmenu')
-      for (var i = 0; i < menulist.length; i++) {
-        menulist[i].open = true
-        var menu = menulist[i].renderRoot.querySelector(
-          '#menuitem'
-        ) as HTMLElement
-        menu.style.display = 'none'
-        this.state = 0
-      }
-    }
-    // 通过state判断是否已有展开的菜单，若已有则关闭菜单
-    if (this.state > 1) {
-      var menulist = this.shadowRoot!.querySelectorAll('star-overflowmenu')
-      for (var i = 0; i < menulist.length; i++) {
-        menulist[i].open = true
-        var menu = menulist[i].renderRoot.querySelector(
-          '#menuitem'
-        ) as HTMLElement
-        menu.style.display = 'none'
-        this.state = 0
-      }
-    }
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-    // 添加click事件
-    this.shadowRoot?.addEventListener('click', (e) => this.closeoverflowmenu(e))
-  }
  render() {
    return html`
-      <div>
-        <star-overflowmenu icon="more">
-          <star-ul type=${UlType.BASE}>
-            <star-li
-              type=${LiType.ONLY_EDIT}
-              label="星光麒麟"
-              default="星光麒麟"
-            ></star-li>
+      <star-overflowmenu icon="more">
+        <div id="menu">
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="info"
+              label="应用详情"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="delete"
+              label="卸载"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="download-circle"
+              label="固定至Dock"
+              id="menuitem"
+            ></star-button>
          </star-ul>
-        </star-overflowmenu>
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="keyboard-circle"
+              label="编辑屏幕"
+              id="menuitem"
+            ></star-button>
+          </star-ul>
+        </div>
+      </star-overflowmenu>

-        <star-overflowmenu
-          icon="more"
-          style="position: fixed; top: 50%; left: 50%;"
-        >
-          <star-ul type=${UlType.BASE}>
-            <star-li
-              type=${LiType.ONLY_EDIT}
-              label="星光麒麟"
-              default="星光麒麟"
-            ></star-li>
+      <star-overflowmenu
+        icon="more"
+        style="position: fixed; top: 50%; left: 50%;"
+      >
+        <div id="menu">
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="info"
+              label="应用详情"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="delete"
+              label="卸载"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="download-circle"
+              label="固定至Dock"
+              id="menuitem"
+            ></star-button>
          </star-ul>
-        </star-overflowmenu>
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="keyboard-circle"
+              label="编辑屏幕"
+              id="menuitem"
+            ></star-button>
+          </star-ul>
+        </div>
+      </star-overflowmenu>

-        <star-overflowmenu
-          icon="more"
-          style="position: fixed; top: 0; right: 0;"
-        >
-          <star-ul type=${UlType.BASE}>
-            <star-li
-              type=${LiType.ONLY_EDIT}
-              label="星光麒麟"
-              default="星光麒麟"
-            ></star-li>
-            <star-li
-              type=${LiType.ONLY_EDIT}
-              label="星光麒麟"
-              default="星光麒麟"
-            ></star-li>
+      <star-overflowmenu
+        icon="more"
+        style="position: fixed; top: 0; left: 90%;"
+      >
+        <div id="menu">
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="info"
+              label="应用详情"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="delete"
+              label="卸载"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="download-circle"
+              label="固定至Dock"
+              id="menuitem"
+            ></star-button>
          </star-ul>
-        </star-overflowmenu>
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="keyboard-circle"
+              label="编辑屏幕"
+              id="menuitem"
+            ></star-button>
+          </star-ul>
+        </div>
+      </star-overflowmenu>

-        <star-overflowmenu
-          icon="more"
-          style="position: fixed; bottom: 0; left: 0;"
-        >
-          <star-ul
-            type=${UlType.ONLY_HEADER}
-            title="头部有文字"
-            text="尾部有文字"
-          >
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
+      <star-overflowmenu
+        icon="more"
+        style="position: fixed; top: 90%; left: 0;"
+      >
+        <div id="menu">
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="info"
+              label="应用详情"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="delete"
+              label="卸载"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="download-circle"
+              label="固定至Dock"
+              id="menuitem"
+            ></star-button>
          </star-ul>
-        </star-overflowmenu>
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="keyboard-circle"
+              label="编辑屏幕"
+              id="menuitem"
+            ></star-button>
+          </star-ul>
+        </div>
+      </star-overflowmenu>

-        <star-overflowmenu
-          icon="more"
-          style="position: fixed; bottom: 0; right: 0;"
-        >
-          <star-ul
-            type=${UlType.ONLY_HEADER}
-            title="头部有文字"
-            text="尾部有文字"
-          >
-            <star-li type=${LiType.ONLY_LABEL} label="素条目"></star-li>
+      <star-overflowmenu
+        icon="more"
+        style="position: fixed; top: 90%; left: 90%;"
+      >
+        <div id="menu">
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="info"
+              label="应用详情"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="delete"
+              label="卸载"
+              id="menuitem"
+            ></star-button>
+            <star-button
+              type="iconlabel"
+              icon="download-circle"
+              label="固定至Dock"
+              id="menuitem"
+            ></star-button>
          </star-ul>
-        </star-overflowmenu>
-      </div>
+          <star-ul type="base" id="iconmenu" background="var(--bg-dialog)">
+            <star-button
+              type="iconlabel"
+              icon="keyboard-circle"
+              label="编辑屏幕"
+              id="menuitem"
+            ></star-button>
+          </star-ul>
+        </div>
+      </star-overflowmenu>
    `
  }

-  static styles = css`
-    :host {
-      display: block;
-      width: 100vw;
-      height: 100vh;
-    }
-    div {
-      display: block;
-      width: 100vw;
-      height: 100vh;
-    }
-  `
+  static get styles(): CSSResultArray {
+    return [
+      baseStyles,
+      css`
+        star-ul#dialog {
+          border-radius: var(--base-dialog-radius);
+        }
+        star-ul#menu {
+          max-width: 200px;
+          border-radius: var(--base-menu-radius);
+        }
+        star-ul#iconmenu {
+          max-width: 150px;
+          border-radius: var(--base-menu-radius);
+        }
+        star-ul#dialog {
+          border-radius: var(--base-menu-radius);
+        }
+        star-li span.split {
+          color: var(--split-line);
+        }
+        ::slotted(div) {
+          border-radius: 16px;
+        }
+      `,
+    ]
+  }
 }

 declare global {
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@ -28,6 +28,7 @@ import './pattern-view/pattern-view'
 import './container/homescreen-container'
 import './toast/toast'
 import './picker/picker'
+import './control-center/control-center'
 import './notification/notification'

 import './switch/switch'
@ -201,6 +202,14 @@ export class PanelRoot extends LitElement {
        href="#overflowmenu"
      ></star-li>
      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="control-center"
+        icon="play-circle"
+        iconcolor="blue"
+        href="#control-center"
+      ></star-li>
+      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
        label="notification"
@ -241,14 +250,6 @@ export class PanelRoot extends LitElement {
        href="#indicators"
      ></star-li>
      <hr />
-      <star-li
-        type=${LiType.ICON_LABEL}
-        label="home指示器"
-        icon="accessibility"
-        iconcolor="blue"
-        href="#home-indicator"
-      ></star-li>
-      <hr />
      <star-li
        type=${LiType.ICON_LABEL}
        label="毛玻璃"
@ -299,7 +300,7 @@ export class PanelRoot extends LitElement {
      ></star-li>
    </star-ul>

-    <star-ul type=${UlType.ONLY_HEADER} title="手势框架">
+    <star-ul type=${UlType.ONLY_HEADER} title="手势">
      <star-li
        type=${LiType.ICON_LABEL}
        label="手势框架"
@ -307,6 +308,14 @@ export class PanelRoot extends LitElement {
        iconcolor="red"
        href="#gesture"
      ></star-li>
+      <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="home指示器"
+        icon="accessibility"
+        iconcolor="blue"
+        href="#home-indicator"
+      ></star-li>
    </star-ul>

    <star-ul type=${UlType.BASE}>