From 1c04e9205bd0e75eb5226c8250ac7629d0ec507e Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Tue, 23 Aug 2022 15:00:49 +0800
Subject: [PATCH 1/9] =?UTF-8?q?TASK:=20#105401=20StarWebComponents=20?=
 =?UTF-8?q?=E5=BC=80=E5=8F=91-button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/button-styles.ts | 88 ++++++++++++++++++++++++++
 src/components/button/button.ts        | 45 +++++++++++--
 2 files changed, 126 insertions(+), 7 deletions(-)

diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
index c41c6bf..5fb1b7f 100644
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@@ -20,4 +20,92 @@ export const sharedStyles: CSSResult = css`
     min-height: var(--li-base-height);
     line-height: var(--li-base-height);
   }
+
+  [size='small'] {
+    font-size: 12px;
+    min-height: 24px;
+    min-width: 54px;
+    padding-bottom: 0px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 0px;
+  }
+
+  [size='medium'] {
+    font-size: 14px;
+    min-height: 32px;
+    min-width: 72px;
+    padding-bottom: 0px;
+    padding-left: 14px;
+    padding-right: 14px;
+    padding-top: 0px;
+  }
+
+  [size='large'] {
+    font-size: 16px;
+    min-height: 40px;
+    min-width: 90px;
+    padding-bottom: 0px;
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 0px;
+  }
+
+  [size='extralarge'] {
+    font-size: 18px;
+    min-height: 48px;
+    min-width: 100px;
+    padding-bottom: 0px;
+    padding-left: 22px;
+    padding-right: 22px;
+    padding-top: 0px;
+  }
+
+  [variant='account']{
+    background-color: #0469e3;
+    color: rgb(255, 255, 255);
+  }
+
+  [variant='primary']{
+    background-color: rgb(235, 235, 235);
+    text-decoration: rgb(235, 235, 235);
+    text-decoration-color: rgb(235, 235, 235);
+  }
+
+  [variant='secondary']{
+    background-color: #3f3f3f
+  }
+
+  [variant='negative']{
+    color: #fff;
+    border: 1px solid #f56c6c;
+    background-color: #f56c6c;
+  }
+
+  [variant='white']{
+    background-color: #ffffff
+  }
+
+  [variant='black']{
+    background-color: #000000
+  }
+
+  [treatment='fill'][variant="primary"]{
+    box-shadow: none;
+    background-color: rgb(255, 255, 255);
+    color: rgb(235, 235, 235);
+  }
+
+  [treatment='outline'][variant="primary"]{
+    background-color: rgb(84, 84, 84);
+    color: rgb(235, 235, 235);
+  }
+
+  [disabled='true']{
+    cursor: default;
+    background-color: rgb(63, 63, 63);
+    color: #909090;
+    text-decoration: rgb(235, 235, 235);
+    text-decoration-color: rgb(235, 235, 235);
+  }
 `
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 3f0913a..0c601f9 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -5,26 +5,57 @@ import {
   HTMLTemplateResult,
   nothing,
 } from 'lit'
-import {customElement, property} from 'lit/decorators.js'
-import {sharedStyles} from './button-styles'
+import { customElement, property } from 'lit/decorators.js'
+import { sharedStyles } from './button-styles'
 
 export enum ButtonType {
   BASE = 'base',
 }
 
+export enum ButtonSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+  EXTRALARGE = 'extralarge',
+}
+
+export enum ButtonVariants {
+  ACCENT = 'accent',
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  NEGATIVE = 'negative',
+  WHITE = 'white',
+  BLACK = 'black',
+}
+
+export type ButtonState = 'false' | 'true';
+
 @customElement('star-button')
 export class StarButton extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-
-  @property({type: ButtonType}) type = ''
-  @property({type: String}) label = ''
+  @property({ type: ButtonType }) type = ''
+  @property({ type: ButtonVariants }) variant = ''
+  @property({ type: ButtonSize }) size = ''
+  @property({ type: String }) label = ''
+  @property({ type: String }) disabled = ''
+  @property({ type: String }) treatment = ''
 
   getBaseButton(): HTMLTemplateResult {
-    return html`
-      <button>${this.label}</button>
+    if (this.hasAttribute("disabled")) {
+      return html`
+      <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled=${this.disabled}>
+        <slot name="icon"></slot>${this.label}
+      </button>
     `
+    } else {
+      return html`
+      <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
+        <slot name="icon"></slot>${this.label}
+      </button>
+    `
+    }
   }
 
   render() {

From df71fb21c27a768cae6b67c006306e25bb2d52e4 Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Wed, 24 Aug 2022 15:38:23 +0800
Subject: [PATCH 2/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/button-styles.ts | 76 +++++++++++-----------
 src/index.ts                           |  1 +
 src/test/panels/button/button.ts       | 88 ++++++++++++++++++++++++++
 src/test/panels/root.ts                |  9 +++
 src/test/panels/starbutton-styles.ts   | 17 +++++
 5 files changed, 155 insertions(+), 36 deletions(-)
 create mode 100644 src/test/panels/button/button.ts
 create mode 100644 src/test/panels/starbutton-styles.ts

diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
index 5fb1b7f..959dc23 100644
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@@ -8,57 +8,55 @@ export const sharedStyles: CSSResult = css`
   }
 
   button {
-    color: blue;
-    padding: 0;
-    width: 100%;
-    border: unset;
-    display: block;
-    font-size: 16px;
-    text-align: left;
-    background: unset;
-    padding-inline-start: var(--li-left-padding);
-    min-height: var(--li-base-height);
-    line-height: var(--li-base-height);
+    display: inline-block;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    color: #606266;
+    -webkit-appearance: none;
+    text-align: center;
+    box-sizing: border-box;
+    outline: none;
+    margin: 20px;
+    transition: .1s;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    font-size: 14px;
+    border-radius: 18px;
+    border-style: solid;
+    padding: 12px 23px 14px 23px;
   }
 
   [size='small'] {
     font-size: 12px;
     min-height: 24px;
     min-width: 54px;
-    padding-bottom: 0px;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 0px;
+    padding: 0px 10px 2px 10px;
   }
 
   [size='medium'] {
     font-size: 14px;
     min-height: 32px;
     min-width: 72px;
-    padding-bottom: 0px;
-    padding-left: 14px;
-    padding-right: 14px;
-    padding-top: 0px;
+    padding: 0px 14px 2px 14px;
   }
 
   [size='large'] {
     font-size: 16px;
     min-height: 40px;
     min-width: 90px;
-    padding-bottom: 0px;
-    padding-left: 18px;
-    padding-right: 18px;
-    padding-top: 0px;
+    padding: 0px 18px 2px 18px;
   }
 
   [size='extralarge'] {
     font-size: 18px;
     min-height: 48px;
     min-width: 100px;
-    padding-bottom: 0px;
-    padding-left: 22px;
-    padding-right: 22px;
-    padding-top: 0px;
+    padding: 0px 22px 2px 22px;
   }
 
   [variant='account']{
@@ -67,27 +65,33 @@ export const sharedStyles: CSSResult = css`
   }
 
   [variant='primary']{
-    background-color: rgb(235, 235, 235);
+    background-color: #ebebeb;
+    color: rgb(29, 29, 29);
+    line-height: 18.2px;
+    text-align: center;
     text-decoration: rgb(235, 235, 235);
     text-decoration-color: rgb(235, 235, 235);
   }
 
   [variant='secondary']{
-    background-color: #3f3f3f
+    background-color: #3f3f3f;
+    color: rgb(235, 235, 235);
   }
 
   [variant='negative']{
-    color: #fff;
+    color: rgb(235, 235, 235);
     border: 1px solid #f56c6c;
-    background-color: #f56c6c;
-  }
-
-  [variant='white']{
-    background-color: #ffffff
+    background-color: rgb(187, 2, 2);
   }
 
   [variant='black']{
-    background-color: #000000
+    color: rgb(235, 235, 235);
+    background-color: #000000;
+  }
+
+  [variant='white']{
+    background-color: rgb(255, 255, 255);
+    color: rgb(235, 235, 235);
   }
 
   [treatment='fill'][variant="primary"]{
diff --git a/src/index.ts b/src/index.ts
index fa6ee2d..45a1ebe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ import {customElement, query, state} from 'lit/decorators.js'
 import './components/ul/ul'
 import './components/li/li'
 import './components/section/section'
+import './components/button/button'
 import {StarAnimateSection} from './components/section/section'
 
 import './test/panels/root'
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
new file mode 100644
index 0000000..fd6b5f2
--- /dev/null
+++ b/src/test/panels/button/button.ts
@@ -0,0 +1,88 @@
+import { html, LitElement, CSSResultArray } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { starbuttonStyles } from '../starbutton-styles'
+import { ButtonSize } from '../../../components/button/button'
+import {UlType} from '../../../components/ul/ul'
+import {LiType} from '../../../components/li/li'
+
+@customElement('panel-button')
+export class PanelButton extends LitElement {
+  @property()
+  foo = ''
+
+  @state()
+  bar = ''
+
+  render() {
+    return html`
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Variants"
+      text="Variants Test"
+    >
+      <star-button type="base" variant="account" label="为啥不居中"></star-button>
+      <star-button type="base" variant="primary" label="primary"></star-button>
+      <star-button type="base" variant="secondary" label="secondary"></star-button>
+      <star-button type="base" variant="negative" label="negative"></star-button>
+      <star-button type="base" variant="black" label="black"></star-button>
+      <star-button type="base" variant="white" label="white"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Size"
+      text="Size Test"
+    >
+    <star-button type="base" variant="account" label="account-small" size="small"></star-button>
+      <star-button type="base" variant="primary" label="primary-medium" size="medium"></star-button>
+      <star-button type="base" variant="black" label="black-extralarge" size=${ButtonSize.EXTRALARGE}></star-button>
+      <star-button type="base" variant="white" label="white-large" size="large"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Treament"
+      text="Treament Test"
+    >
+      <star-button type="base" treatment="fill" variant="primary" label="primary、fill"></star-button>
+      <star-button type="base" treatment="outline" variant="primary" label="primary、outline"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="State"
+      text="State Test"
+    >
+      <star-button type="base" variant="primary" label="primary、fill"></star-button>
+      <star-button type="base" variant="primary" label="primary、outline" disabled="true"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Click"
+      text="Click Test"
+    >
+    <star-button @click=${this} type="base" variant="account" label="Click测试"></star-button>
+    </star-ul>
+
+    <star-ul
+      type=${UlType.HEADER_FOOTER}
+      title="Content"
+      text="Content Test"
+    >
+    <star-button type="base" variant="account" label="Icon测试"><img slot="icon" src="2g"></star-button>
+    </star-ul>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [starbuttonStyles]
+  }
+
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-button': PanelButton
+  }
+}
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index b480481..a8920dc 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -6,6 +6,7 @@ import {sharedStyles} from './shared-styles'
 import './about/about'
 import './icon/icon'
 import './general/general'
+import './button/button'
 
 type SEID = String
 
@@ -95,6 +96,14 @@ export class PanelRoot extends LitElement {
         href="#general"
       ></star-li>
       <hr />
+      <star-li
+        type=${LiType.ICON_LABEL}
+        label="查看所有按钮"
+        icon="play-circle"
+        iconcolor="red"
+        href="#button"
+      ></star-li>
+      <hr />
       <star-li
         type=${LiType.ICON_LABEL}
         label="关于"
diff --git a/src/test/panels/starbutton-styles.ts b/src/test/panels/starbutton-styles.ts
new file mode 100644
index 0000000..f445be6
--- /dev/null
+++ b/src/test/panels/starbutton-styles.ts
@@ -0,0 +1,17 @@
+import { css, CSSResult } from 'lit'
+
+export const starbuttonStyles: CSSResult = css`
+  div {
+      padding: 10px 40px;
+    }
+
+    html {
+      scrollbar-width: none;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      background: #f0f0f0;
+    }
+`
\ No newline at end of file

From 6d77d6320ec41fe0401c81cbb904126cd1e1cb9a Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Wed, 24 Aug 2022 16:15:04 +0800
Subject: [PATCH 3/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E5=90=88=E5=B9=B6=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc.yaml                              |   4 +-
 CHANGELOG.md                                  |  10 ++
 index.html                                    |  25 +++-
 package.json                                  |   2 +-
 src/components/blur/blur.ts                   |  69 +++++++++
 src/components/bubble/bubble.ts               |  15 +-
 .../indicator/indicator-page-point.ts         | 128 +++++++++++++++++
 src/components/li/li.ts                       |   1 -
 src/index.ts                                  |  15 +-
 src/test/panels/blur/use-blur.ts              |  80 +++++++++++
 src/test/panels/button/button.ts              |   1 -
 .../about-machine.ts}                         |   6 +-
 src/test/panels/general/general.ts            |   6 +-
 .../update/{auto_update.ts => auto-update.ts} |   0
 .../{update_system.ts => update-system.ts}    |   0
 src/test/panels/icon/icon.ts                  |   4 +-
 src/test/panels/indicators/indicators.ts      | 131 ++++++++++++++++++
 src/test/panels/root.ts                       |  12 +-
 18 files changed, 478 insertions(+), 31 deletions(-)
 create mode 100644 CHANGELOG.md
 create mode 100644 src/components/blur/blur.ts
 create mode 100644 src/components/indicator/indicator-page-point.ts
 create mode 100644 src/test/panels/blur/use-blur.ts
 rename src/test/panels/general/{about_machine/about_machine.ts => about-machine/about-machine.ts} (98%)
 rename src/test/panels/general/update/{auto_update.ts => auto-update.ts} (100%)
 rename src/test/panels/general/update/{update_system.ts => update-system.ts} (100%)
 create mode 100644 src/test/panels/indicators/indicators.ts

diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index e7c9d91..7fdc21b 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -5,14 +5,12 @@ semi: false
 singleQuote: true
 quoteProps: 'as-needed'
 bracketSpacing: false
-# 多属性html标签的‘>’折行放置
+# 多属性html标签的'>'折行放置
 jsxBracketSameLine: false
 arrowParens: 'always'
 requirePragma: false
 insertPragma: false
-# //对HTML全局空白不敏感
 htmlWhitespaceSensitivity: 'ignore'
-# 结束行形式
 endOfLine: 'lf'
 # 对引用代码进行格式化
 embeddedLanguageFormatting: 'auto'
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..ea08370
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,10 @@
+# 0.0.1
+
+## Features
+
+- add ul
+- add li
+- add button
+- add bubble
+- add indicator-page-point
+- add blur
\ No newline at end of file
diff --git a/index.html b/index.html
index c48fc37..2490e1b 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Lit + TS</title>
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0"
+    />
+    <title>Star Web Components</title>
     <script type="module" src="/src/index.ts"></script>
   </head>
   <body>
@@ -38,6 +41,24 @@
         --li-base-height: 43px;
         --li-left-padding: 10px;
         --li-right-padding: 10px;
+        --blur-image: '';
+        --blur-radius-factor: 20;
+        --blur-radius: calc(1px * var(--blur-radius-factor));
+        --blur-scale-base-factor: 1.05;
+        --blur-scale-factor: calc(
+          var(--blur-scale-base-factor) + (var(--blur-radius-factor) - 20) *
+            0.0025
+        );
+      }
+
+      /* for nanopcT4 */
+      @media (max-width: 500px) {
+        :root {
+          --blur-radius-factor: 5;
+          --blur-scale-factor: calc(
+            var(--blur-scale-base-factor) + (var(--blur-radius-factor)) * 0.005
+          );
+        }
       }
     </style>
   </body>
diff --git a/package.json b/package.json
index 5e00d33..8d45756 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "start-element",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "main": "dist/my-element.es.js",
   "exports": {
diff --git a/src/components/blur/blur.ts b/src/components/blur/blur.ts
new file mode 100644
index 0000000..0877b28
--- /dev/null
+++ b/src/components/blur/blur.ts
@@ -0,0 +1,69 @@
+import {html, css, LitElement} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {classMap} from 'lit/directives/class-map.js'
+
+@customElement('star-blur')
+export class StarBlur extends LitElement {
+  @property({type: Boolean}) openblur = false
+  @property({type: String}) imagesrc = ''
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value)
+
+    if (name === 'imagesrc') {
+      if (!this.imagesrc) console.error('StarBlur has no imagesrc')
+      document.documentElement.style.setProperty('--blur-image', this.imagesrc)
+    }
+  }
+
+  render() {
+    const styles = {
+      blur: this.openblur,
+    }
+
+    return html`
+      <div id="blur-mask" class=${classMap(styles)}></div>
+    `
+  }
+
+  static styles = css`
+    :host {
+      position: absolute;
+      width: 100vw;
+      height: 100vh;
+      left: 0;
+      top: 0;
+      overflow: hidden;
+    }
+    #blur-mask {
+      position: absolute;
+      width: inherit;
+      height: inherit;
+      background: no-repeat center fixed;
+      background-size: cover;
+      background-image: var(--blur-image);
+      transform: scale(var(--blur-scale-factor));
+    }
+    #blur-mask.blur {
+      filter: blur(var(--blur-radius));
+    }
+    #blur-mask::before {
+      position: absolute;
+      content: ' ';
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: no-repeat center fixed;
+      background-size: cover;
+      background-image: var(--blur-image);
+      transform: scale(1 / var(--blur-scale-factor));
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-blur': StarBlur
+  }
+}
diff --git a/src/components/bubble/bubble.ts b/src/components/bubble/bubble.ts
index 81832f4..4f9c055 100644
--- a/src/components/bubble/bubble.ts
+++ b/src/components/bubble/bubble.ts
@@ -14,16 +14,13 @@ export class StarBubble extends LitElement {
     else if (this.number > 99)
       return html`
         <div>
-          <span class="small">
-            99
-            <sup>+</sup>
-          </span>
+          <a class="small" data-num="99"><sup>+</sup></a>
         </div>
       `
     else
       return html`
         <div>
-          <span>${this.number}</span>
+          <a data-num=${this.number}></a>
         </div>
       `
   }
@@ -45,7 +42,7 @@ export class StarBubble extends LitElement {
       background-color: red;
     }
 
-    span {
+    a {
       width: 100%;
       height: 100%;
       color: #fff;
@@ -55,11 +52,15 @@ export class StarBubble extends LitElement {
       font-size: 14px;
     }
 
-    span.small {
+    a.small {
       font-size: 12px;
       line-height: 170%;
     }
 
+    a::before {
+      content: attr(data-num);
+    }
+
     sup {
       font-size: 10px;
       max-width: 6px;
diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts
new file mode 100644
index 0000000..be31e1d
--- /dev/null
+++ b/src/components/indicator/indicator-page-point.ts
@@ -0,0 +1,128 @@
+import {html, css, LitElement, PropertyValueMap} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+import {classMap} from 'lit/directives/class-map.js'
+
+@customElement('indicator-page-point')
+export class IndicatorPagePoint extends LitElement {
+  @property({type: Number, reflect: true}) total = 1
+  @property({type: Number, reflect: true}) index = 1
+  @property({type: Boolean, reflect: true}) edit = false
+  @property({type: Boolean, reflect: true}) column = false
+
+  #firstRender = true
+
+  protected shouldUpdate(
+    _changedProperties: PropertyValueMap<this>
+  ): boolean {
+    let isShouldUpdate = true
+
+    if (this.total < 1) {
+      console.warn(
+        'indicator total setted a error num: ',
+        this.total,
+        ' will be resetted 1'
+      )
+      this.total = 1
+      isShouldUpdate = false
+    } else if (this.total > 15) {
+      console.warn(
+        'indicator total setted a error num: ',
+        this.total,
+        ' will be resetted 15'
+      )
+      this.total = 15
+      isShouldUpdate = false
+    }
+
+    if (this.index < 1) {
+      console.warn(
+        'indicator index setted a error num: ',
+        this.index,
+        ' will be resetted 1'
+      )
+      this.index = 1
+      isShouldUpdate = false
+    } else if (this.index > this.total) {
+      console.warn(
+        'indicator index setted a error num: ',
+        this.index,
+        ' will be resetted',
+        this.total
+      )
+      this.index = this.total
+      isShouldUpdate = false
+    }
+
+    if (this.#firstRender === true) {
+      this.#firstRender = false
+      return true
+    }
+    return isShouldUpdate
+  }
+
+  render() {
+    const all = []
+    const classes = {
+      edit: this.edit,
+      column: this.column,
+    }
+
+    for (let i = 0; i < this.total; i++) {
+      all.push(html`
+        <div class=${this.index - 1 === i ? 'active' : 'inactive'}></div>
+      `)
+    }
+
+    return html`
+      <section class=${classMap(classes)}>${all}</section>
+    `
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      width: 100vw;
+      margin: auto;
+    }
+    :host([column]) {
+      display: inline-flex;
+      width: auto;
+    }
+    section {
+      display: flex;
+      margin: auto;
+      border-radius: 10px;
+      padding: 0px 5px;
+      margin: 3px auto;
+    }
+    section.edit {
+      background: #ddd;
+    }
+    div {
+      width: 8px;
+      height: 8px;
+      background: #aaaaaaaa;
+      margin: 8px 6px 8px 6px;
+      border-radius: 50%;
+    }
+    div.active {
+      background: #fff;
+    }
+    section.column {
+      flex-direction: column;
+      margin: auto 3px;
+      padding: 3px 0px;
+    }
+    section.column div {
+      width: 6px;
+      height: 6px;
+      margin: 4px 4px;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'indicator-page-point': IndicatorPagePoint
+  }
+}
diff --git a/src/components/li/li.ts b/src/components/li/li.ts
index 966e7cc..7c69b08 100644
--- a/src/components/li/li.ts
+++ b/src/components/li/li.ts
@@ -1,6 +1,5 @@
 import {html, css, LitElement, HTMLTemplateResult, nothing} from 'lit'
 import {customElement, property} from 'lit/decorators.js'
-import {classMap} from 'lit/directives/class-map.js'
 import '../bubble/bubble'
 
 export enum LiType {
diff --git a/src/index.ts b/src/index.ts
index 45a1ebe..009a73e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,7 +5,7 @@ import './components/li/li'
 import './components/section/section'
 import './components/button/button'
 import {StarAnimateSection} from './components/section/section'
-
+import './components/section/section'
 import './test/panels/root'
 
 @customElement('settings-app')
@@ -18,6 +18,17 @@ export class SettingsApp extends LitElement {
   @state() nextSection: StarAnimateSection | null = null
   @state() currentSection: StarAnimateSection | null = null
 
+  constructor() {
+    super()
+    window.addEventListener('hashchange', this)
+    this.updateComplete.then(() => {
+      // 在页面内刷新时
+      if (location.hash !== '') {
+        this.navigate(location.hash)
+      }
+    })
+  }
+
   handleEvent(evt: Event) {
     switch (evt.type) {
       case 'hashchange':
@@ -116,8 +127,6 @@ export class SettingsApp extends LitElement {
   }
 
   render() {
-    window.addEventListener('hashchange', this)
-
     return html`
       <star-animate-section id="root" class="active">
         <panel-root></panel-root>
diff --git a/src/test/panels/blur/use-blur.ts b/src/test/panels/blur/use-blur.ts
new file mode 100644
index 0000000..92174ba
--- /dev/null
+++ b/src/test/panels/blur/use-blur.ts
@@ -0,0 +1,80 @@
+import {html, css, LitElement, TemplateResult} from 'lit'
+import {customElement, state} from 'lit/decorators.js'
+import '../../../components/blur/blur'
+
+@customElement('panel-blur')
+export class PanelBlur extends LitElement {
+  @state() openblur = false
+
+  @state() backgroundImage = ''
+
+  handleInputFile(evt: Event) {
+    const imgfile = (evt.target as HTMLInputElement).files?.[0]
+    if (imgfile) {
+      this.backgroundImage = `url(${URL.createObjectURL(imgfile)})`
+    }
+  }
+
+  handleInputRange(evt: Event) {
+    document.documentElement.style.setProperty(
+      '--blur-radius-factor',
+      (evt.target as HTMLInputElement).value
+    )
+  }
+
+  dynamicInput(): TemplateResult {
+    const mql = [window.matchMedia('(max-width: 500px)')]
+    if (mql[0].matches) {
+      return html`
+        <input
+          type="range"
+          min="1"
+          max="10"
+          value="5"
+          step="1"
+          @input=${this.handleInputRange}
+        />
+      `
+    } else {
+      return html`
+        <input
+          type="range"
+          min="10"
+          max="40"
+          value="10"
+          step="1"
+          @input=${this.handleInputRange}
+        />
+      `
+    }
+  }
+
+  render() {
+    return html`
+      <div>
+        <input type="file" @change=${this.handleInputFile} />
+        <button @click=${() => (this.openblur = !this.openblur)}>
+          toggle blur
+        </button>
+        ${this.dynamicInput()}
+      </div>
+      <star-blur
+        ?openblur=${this.openblur}
+        imagesrc=${this.backgroundImage}
+      ></star-blur>
+    `
+  }
+
+  static styles = css`
+    div {
+      position: absolute;
+      z-index: 1;
+    }
+  `
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-blur': PanelBlur
+  }
+}
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
index fd6b5f2..1e83e4d 100644
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@@ -3,7 +3,6 @@ import { customElement, property, state } from 'lit/decorators.js'
 import { starbuttonStyles } from '../starbutton-styles'
 import { ButtonSize } from '../../../components/button/button'
 import {UlType} from '../../../components/ul/ul'
-import {LiType} from '../../../components/li/li'
 
 @customElement('panel-button')
 export class PanelButton extends LitElement {
diff --git a/src/test/panels/general/about_machine/about_machine.ts b/src/test/panels/general/about-machine/about-machine.ts
similarity index 98%
rename from src/test/panels/general/about_machine/about_machine.ts
rename to src/test/panels/general/about-machine/about-machine.ts
index 5c80149..20cf2e8 100644
--- a/src/test/panels/general/about_machine/about_machine.ts
+++ b/src/test/panels/general/about-machine/about-machine.ts
@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
-import {repeat} from 'lit/directives/repeat.js'
+import {map} from 'lit/directives/map.js'
 import {UlType} from '../../../../components/ul/ul'
 import {LiType} from '../../../../components/li/li'
 import {sharedStyles} from '../../shared-styles'
@@ -246,11 +246,11 @@ export class PanelAboutMachine extends LitElement {
 
   render() {
     return html`
-      ${repeat(
+      ${map(
         this.paneljson,
         (block: BLOCKNODE) => html`
           <star-ul type=${block.nodetype} title=${block.nodetitle}>
-            ${repeat(
+            ${map(
               block.nodes,
               (node: LINENODE, index) => html`
                 ${node.href
diff --git a/src/test/panels/general/general.ts b/src/test/panels/general/general.ts
index 35631f6..c117b37 100644
--- a/src/test/panels/general/general.ts
+++ b/src/test/panels/general/general.ts
@@ -5,9 +5,9 @@ import {UlType} from '../../../components/ul/ul'
 import {LiType} from '../../../components/li/li'
 import {ButtonType, StarButton} from '../../../components/button/button'
 import {sharedStyles} from '../shared-styles'
-import './about_machine/about_machine'
-import './update/auto_update'
-import './update/update_system'
+import './about-machine/about-machine'
+import './update/auto-update'
+import './update/update-system'
 
 @customElement('panel-general')
 export class PanelGeneral extends LitElement {
diff --git a/src/test/panels/general/update/auto_update.ts b/src/test/panels/general/update/auto-update.ts
similarity index 100%
rename from src/test/panels/general/update/auto_update.ts
rename to src/test/panels/general/update/auto-update.ts
diff --git a/src/test/panels/general/update/update_system.ts b/src/test/panels/general/update/update-system.ts
similarity index 100%
rename from src/test/panels/general/update/update_system.ts
rename to src/test/panels/general/update/update-system.ts
diff --git a/src/test/panels/icon/icon.ts b/src/test/panels/icon/icon.ts
index 7a529c7..55b7396 100644
--- a/src/test/panels/icon/icon.ts
+++ b/src/test/panels/icon/icon.ts
@@ -1,6 +1,6 @@
 import {html, LitElement, CSSResultArray} from 'lit'
 import {customElement, property, state} from 'lit/decorators.js'
-import {repeat} from 'lit/directives/repeat.js'
+import {map} from 'lit/directives/map.js'
 import {UlType} from '../../../components/ul/ul'
 import {LiType} from '../../../components/li/li'
 import {sharedStyles} from '../shared-styles'
@@ -264,7 +264,7 @@ export class PanelIcon extends LitElement {
         title="GaiaIcon图标"
         text="以上GaiaIcon图标为YROS V4内容"
       >
-        ${repeat(
+        ${map(
           this.icons,
           (iconname, index) => html`
             <star-li
diff --git a/src/test/panels/indicators/indicators.ts b/src/test/panels/indicators/indicators.ts
new file mode 100644
index 0000000..a3b0c12
--- /dev/null
+++ b/src/test/panels/indicators/indicators.ts
@@ -0,0 +1,131 @@
+import {html, css, LitElement, CSSResultArray} from 'lit'
+import {customElement, queryAll, state} from 'lit/decorators.js'
+import {sharedStyles} from '../shared-styles'
+import '../../../components/indicator/indicator-page-point'
+import {IndicatorPagePoint} from '../../../components/indicator/indicator-page-point'
+
+@customElement('panel-indicators')
+export class PanelIndicators extends LitElement {
+  @state() total = 1
+  @state() index = 1
+  @state() edit = false
+
+  updated() {
+    this.total = this.total < 1 ? 1 : this.total > 15 ? 15 : this.total
+    this.index =
+      this.index < 1 ? 1 : this.index > this.total ? this.total : this.index
+  }
+
+  @queryAll('.myindicator') private myindicators!: IndicatorPagePoint
+
+  handleEvent(evt: Event) {
+    switch (evt.type) {
+      case 'click':
+        evt.preventDefault() // iOS上不禁止按钮默认行为，将会双击按钮强制放缩屏幕
+        switch ((evt.target as HTMLButtonElement).dataset.action) {
+          case 'total++':
+            this.total++
+            break
+          case 'total--':
+            this.total--
+            break
+          case 'index++':
+            this.index++
+            break
+          case 'index--':
+            this.index--
+            break
+          case 'toggle-edit':
+            this.edit = !this.edit
+            break
+        }
+    }
+  }
+
+  render() {
+    return html`
+      <h3>基本展示</h3>
+      <indicator-page-point total="3" index="-1" edit></indicator-page-point>
+      <div>
+        <div>
+          <indicator-page-point
+            total="3"
+            index="-1"
+            edit
+            column
+          ></indicator-page-point>
+          <indicator-page-point
+            total="5"
+            index="2"
+            column
+          ></indicator-page-point>
+        </div>
+      </div>
+      <indicator-page-point total="5" index="2"></indicator-page-point>
+      <indicator-page-point total="15" index="2"></indicator-page-point>
+      <h3>编辑状态</h3>
+      <indicator-page-point total="3" index="1" edit></indicator-page-point>
+      <indicator-page-point total="5" index="2" edit></indicator-page-point>
+      <indicator-page-point total="15" index="2" edit></indicator-page-point>
+      <h3>切换状态</h3>
+      <div>
+        <div>
+          <button data-action="total++" @click=${this}>total++</button>
+          <button data-action="total--" @click=${this}>total--</button>
+          <button data-action="index++" @click=${this}>index++</button>
+          <button data-action="index--" @click=${this}>index--</button>
+          <button data-action="toggle-edit" @click=${this}>toggle edit</button>
+        </div>
+      </div>
+      <indicator-page-point
+        class="myindicator"
+        total=${this.total}
+        index=${this.index}
+        ?edit=${this.edit}
+      ></indicator-page-point>
+      <div>
+        <div>
+          <indicator-page-point
+            class="myindicator"
+            total=${this.total}
+            index=${this.index}
+            ?edit=${this.edit}
+            column
+          ></indicator-page-point>
+          <indicator-page-point
+            class="myindicator"
+            total=${this.total}
+            index=${this.index}
+            ?edit=${this.edit}
+            column
+          ></indicator-page-point>
+        </div>
+      </div>
+    `
+  }
+
+  public static override get styles(): CSSResultArray {
+    return [
+      sharedStyles,
+      css`
+        h3 {
+          text-align: center;
+        }
+        div {
+          display: flex;
+          margin: auto;
+          flex-wrap: wrap;
+        }
+        button {
+          margin: auto;
+        }
+      `,
+    ]
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'panel-indicators': PanelIndicators
+  }
+}
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index a8920dc..3a29a55 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -3,10 +3,12 @@ import {customElement, state} from 'lit/decorators.js'
 import {LiType} from '../../components/li/li'
 import {UlType} from '../../components/ul/ul'
 import {sharedStyles} from './shared-styles'
+import '../../components/ul/ul'
+import '../../components/li/li'
+
 import './about/about'
 import './icon/icon'
 import './general/general'
-import './button/button'
 
 type SEID = String
 
@@ -114,18 +116,18 @@ export class PanelRoot extends LitElement {
       <hr />
       <star-li
         type=${LiType.ICON_LABEL}
-        label="辅助"
+        label="页面圆点指示器"
         icon="accessibility"
         iconcolor="blue"
-        href="#about"
+        href="#indicators"
       ></star-li>
       <hr />
       <star-li
         type=${LiType.ICON_LABEL}
-        label="成就"
+        label="毛玻璃"
         icon="achievement"
         iconcolor="gold"
-        href="#about"
+        href="#blur"
       ></star-li>
       <hr />
       <star-li

From 873bbc040b68d1895e9fc293c351622734a7fe9e Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Wed, 24 Aug 2022 16:19:54 +0800
Subject: [PATCH 4/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E5=90=88=E5=B9=B6=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/test/panels/root.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 3a29a55..0080382 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -5,7 +5,7 @@ import {UlType} from '../../components/ul/ul'
 import {sharedStyles} from './shared-styles'
 import '../../components/ul/ul'
 import '../../components/li/li'
-
+import './button/button'
 import './about/about'
 import './icon/icon'
 import './general/general'

From cdbba863acf32d0715e1a369203d2cdb6fbdd574 Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Wed, 24 Aug 2022 16:27:46 +0800
Subject: [PATCH 5/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E5=A2=9E=E5=8A=A0test=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.ts            | 1 +
 src/test/panels/root.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/index.ts b/src/index.ts
index 2d6a208..d9d19e9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,7 @@ import './components/section/section'
 import {StarAnimateSection} from './components/section/section'
 import './components/section/section'
 import './test/panels/root'
+import './components/button/button'
 
 @customElement('settings-app')
 export class SettingsApp extends LitElement {
diff --git a/src/test/panels/root.ts b/src/test/panels/root.ts
index 1463214..6f4429f 100644
--- a/src/test/panels/root.ts
+++ b/src/test/panels/root.ts
@@ -8,6 +8,7 @@ import './icon/icon'
 import './general/general'
 import './indicators/indicators'
 import './blur/use-blur'
+import './button/button'
 
 type SEID = String
 

From c0b9e8d1fa09eefd26cb27a2b456e935dbd48189 Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Thu, 25 Aug 2022 15:19:33 +0800
Subject: [PATCH 6/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F=E5=8F=8A?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/button-styles.ts | 105 +++++++++++++++++--------
 src/components/button/button.ts        |  61 ++++++++++----
 src/test/panels/button/button.ts       | 101 ++++++++++--------------
 3 files changed, 160 insertions(+), 107 deletions(-)

diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
index 959dc23..20e80d4 100644
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@@ -13,7 +13,6 @@ export const sharedStyles: CSSResult = css`
     white-space: nowrap;
     cursor: pointer;
     background: #fff;
-    border: 1px solid #dcdfe6;
     color: #606266;
     -webkit-appearance: none;
     text-align: center;
@@ -26,9 +25,9 @@ export const sharedStyles: CSSResult = css`
     -webkit-user-select: none;
     -ms-user-select: none;
     font-size: 14px;
-    border-radius: 18px;
-    border-style: solid;
     padding: 12px 23px 14px 23px;
+    border: none;
+    border-radius: 18px;
   }
 
   [size='small'] {
@@ -59,57 +58,97 @@ export const sharedStyles: CSSResult = css`
     padding: 0px 22px 2px 22px;
   }
 
-  [variant='account']{
+  [variant='accent'] {
     background-color: #0469e3;
     color: rgb(255, 255, 255);
   }
 
-  [variant='primary']{
-    background-color: #ebebeb;
-    color: rgb(29, 29, 29);
-    line-height: 18.2px;
-    text-align: center;
-    text-decoration: rgb(235, 235, 235);
-    text-decoration-color: rgb(235, 235, 235);
+  [variant='accent']:hover {
+    background-color: rgb(1, 91, 199);
+    box-shadow: none;
   }
 
-  [variant='secondary']{
-    background-color: #3f3f3f;
+  [variant='primary'] {
+    background-color: rgb(34, 34, 34);
     color: rgb(235, 235, 235);
   }
 
-  [variant='negative']{
+  [variant='primary']:hover {
+    background-color: rgb(0, 0, 0);
+    box-shadow: none;
+    color: rgb(255, 255, 255);
+  }
+
+  [variant='secondary'] {
+    background-color: rgb(230, 230, 230);
+    color: rgb(34, 34, 34);
+  }
+
+  [variant='secondary']:hover {
+    background-color: rgb(213, 213, 213);
+    box-shadow: none;
+    color: rgb(0, 0, 0);
+  }
+
+  [variant='negative'] {
+    background-color: rgb(179, 2, 2);
     color: rgb(235, 235, 235);
     border: 1px solid #f56c6c;
-    background-color: rgb(187, 2, 2);
   }
 
-  [variant='black']{
+  [variant='negative']:hover {
+    background-color: rgb(162, 1, 1);
+    color: rgb(235, 235, 235);
+    border: 1px solid #f56c6c;
+  }
+
+  [variant='black'] {
     color: rgb(235, 235, 235);
     background-color: #000000;
   }
 
-  [variant='white']{
+  [variant='white'] {
     background-color: rgb(255, 255, 255);
     color: rgb(235, 235, 235);
   }
 
-  [treatment='fill'][variant="primary"]{
-    box-shadow: none;
-    background-color: rgb(255, 255, 255);
-    color: rgb(235, 235, 235);
-  }
-
-  [treatment='outline'][variant="primary"]{
-    background-color: rgb(84, 84, 84);
-    color: rgb(235, 235, 235);
-  }
-
-  [disabled='true']{
+  [disabled] {
+    background-color: rgb(230, 230, 230);
     cursor: default;
-    background-color: rgb(63, 63, 63);
-    color: #909090;
-    text-decoration: rgb(235, 235, 235);
-    text-decoration-color: rgb(235, 235, 235);
+    pointer-events: none;
+  }
+
+  [treatment='fill'][variant="primary"] {
+    color: rgb(255, 255, 255);
+  }
+
+  [treatment='fill'][variant="primary"]:hover {
+    background-color: rgb(0, 0, 0);
+  }
+
+  [treatment='outline'][variant="primary"] {
+    background-color: rgba(0, 0, 0, 0);
+    border-style: solid;
+    color: rgb(34, 34, 34);
+  }
+
+  [treatment='outline'][variant="primary"]:hover {
+    background-color: rgb(213, 213, 213);
+    border-style: solid;
+    color: rgb(0, 0, 0);
+  }
+
+  button.hasicon::before {
+    font-size: 16px;
+    min-height: 32px;
+    min-width: 72px;
+    font-family: 'gaia-icons';
+    text-align: left;
+    content: attr(data-icon);
+    padding-inline-end: var(--li-right-padding);
+  }
+  
+  span.label {
+    text-align: left;
   }
 `
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 0c601f9..9087006 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -35,26 +35,59 @@ export class StarButton extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-  @property({ type: ButtonType }) type = ''
-  @property({ type: ButtonVariants }) variant = ''
-  @property({ type: ButtonSize }) size = ''
+  @property({ type: ButtonType }) type = 'base'
+  @property({ type: ButtonVariants }) variant = 'accent'
+  @property({ type: ButtonSize }) size = 'medium'
   @property({ type: String }) label = ''
-  @property({ type: String }) disabled = ''
+  @property({ type: Boolean }) disabled = false
   @property({ type: String }) treatment = ''
+  @property({ type: String }) icon = ''
+  @property({ type: String }) iconcolor = ''
 
   getBaseButton(): HTMLTemplateResult {
+    const colorstyle = this.iconcolor
+      ? html`
+          <style>
+            button::before {
+              color: ${this.iconcolor} !important;
+            }
+          </style>
+        `
+      : nothing
     if (this.hasAttribute("disabled")) {
-      return html`
-      <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled=${this.disabled}>
-        <slot name="icon"></slot>${this.label}
-      </button>
-    `
+      if (this.hasAttribute("icon")) {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} data-icon=${this.icon} class="hasicon" disabled>
+            ${colorstyle}
+            <a>
+              <span class="label">${this.label}</span>
+            </a>
+          </button>
+        `
+      } else {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled>
+            ${this.label}
+          </button>
+        `
+      }
     } else {
-      return html`
-      <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
-        <slot name="icon"></slot>${this.label}
-      </button>
-    `
+      if (this.hasAttribute("icon")) {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} data-icon=${this.icon} class="hasicon">
+            ${colorstyle}
+            <a>
+              <span class="label">${this.label}</span>
+            </a>
+          </button>
+        `
+      } else {
+        return html`
+          <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
+            ${this.label}
+          </button>
+        `
+      }
     }
   }
 
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
index 1e83e4d..65c88a8 100644
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@@ -1,76 +1,57 @@
 import { html, LitElement, CSSResultArray } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+import { customElement, eventOptions } from 'lit/decorators.js'
 import { starbuttonStyles } from '../starbutton-styles'
-import { ButtonSize } from '../../../components/button/button'
-import {UlType} from '../../../components/ul/ul'
+import { StarButton } from '../../../components/button/button'
 
 @customElement('panel-button')
 export class PanelButton extends LitElement {
-  @property()
-  foo = ''
-
-  @state()
-  bar = ''
+  @eventOptions({ passive: false })
+  handleEvent(evt: Event) {
+    switch (evt.type) {
+      case 'click':
+        if ((evt.target as StarButton).label === 'Click') {
+          alert('这是一次点击事件测试')
+        }
+        break
+    }
+  }
 
   render() {
     return html`
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Variants"
-      text="Variants Test"
-    >
-      <star-button type="base" variant="account" label="为啥不居中"></star-button>
+    <div>
+      <h4>按钮类型属性展示</h4>
+      <star-button type="base" variant="accent" label="accent"></star-button>
       <star-button type="base" variant="primary" label="primary"></star-button>
       <star-button type="base" variant="secondary" label="secondary"></star-button>
       <star-button type="base" variant="negative" label="negative"></star-button>
       <star-button type="base" variant="black" label="black"></star-button>
       <star-button type="base" variant="white" label="white"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Size"
-      text="Size Test"
-    >
-    <star-button type="base" variant="account" label="account-small" size="small"></star-button>
-      <star-button type="base" variant="primary" label="primary-medium" size="medium"></star-button>
-      <star-button type="base" variant="black" label="black-extralarge" size=${ButtonSize.EXTRALARGE}></star-button>
-      <star-button type="base" variant="white" label="white-large" size="large"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Treament"
-      text="Treament Test"
-    >
-      <star-button type="base" treatment="fill" variant="primary" label="primary、fill"></star-button>
-      <star-button type="base" treatment="outline" variant="primary" label="primary、outline"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="State"
-      text="State Test"
-    >
-      <star-button type="base" variant="primary" label="primary、fill"></star-button>
-      <star-button type="base" variant="primary" label="primary、outline" disabled="true"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Click"
-      text="Click Test"
-    >
-    <star-button @click=${this} type="base" variant="account" label="Click测试"></star-button>
-    </star-ul>
-
-    <star-ul
-      type=${UlType.HEADER_FOOTER}
-      title="Content"
-      text="Content Test"
-    >
-    <star-button type="base" variant="account" label="Icon测试"><img slot="icon" src="2g"></star-button>
-    </star-ul>
+    </div>
+    <div>
+      <h4>按钮大小属性展示</h4>
+      <star-button type="base" variant="accent" label="small" size="small"></star-button>
+      <star-button type="base" variant="accent" label="medium" size="medium"></star-button>
+      <star-button type="base" variant="accent" label="large" size="large"></star-button>
+      <star-button type="base" variant="accent" label="extralarge" size="extralarge"></star-button>
+    </div>
+    <div>
+      <h4>按钮填充状态展示</h4>
+      <star-button type="base" treatment="fill" variant="primary" label="fill"></star-button>
+      <star-button type="base" treatment="outline" variant="primary" label="outline"></star-button>
+    </div>
+    <div>
+      <h4>按钮禁用状态展示</h4>
+      <star-button type="base" variant="accent" label="正常状态"></star-button>
+      <star-button type="base" variant="accent" label="禁用状态" disabled></star-button>
+    </div>
+    <div>
+      <h4>按钮点击事件展示</h4>
+      <star-button @click=${this} type="base" variant="accent" label="Click"></star-button>
+    </div>
+    <div>
+      <h4>图标按钮展示</h4>
+      <star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="red"></star-button>
+    </div>
     `
   }
 

From a4e837c332433ffe8cbffb20e41e6ae5d68450e7 Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Thu, 25 Aug 2022 20:42:54 +0800
Subject: [PATCH 7/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E6=A0=B7=E5=BC=8F=E5=8F=8A=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/button-styles.ts | 6 ++----
 src/test/panels/button/button.ts       | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
index 20e80d4..fed8924 100644
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@@ -93,18 +93,16 @@ export const sharedStyles: CSSResult = css`
   [variant='negative'] {
     background-color: rgb(179, 2, 2);
     color: rgb(235, 235, 235);
-    border: 1px solid #f56c6c;
   }
 
   [variant='negative']:hover {
     background-color: rgb(162, 1, 1);
     color: rgb(235, 235, 235);
-    border: 1px solid #f56c6c;
   }
 
   [variant='black'] {
-    color: rgb(235, 235, 235);
-    background-color: #000000;
+    color: rgb(34, 34, 34);
+    background-color: rgb(0, 0, 0);
   }
 
   [variant='white'] {
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
index 65c88a8..1db143a 100644
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@@ -50,7 +50,7 @@ export class PanelButton extends LitElement {
     </div>
     <div>
       <h4>图标按钮展示</h4>
-      <star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="red"></star-button>
+      <star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="green"></star-button>
     </div>
     `
   }

From 48ec1d0eabcb43392fc8607ce2d8360942fa932f Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Mon, 29 Aug 2022 09:14:29 +0800
Subject: [PATCH 8/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E5=A2=9E=E5=8A=A0=E6=8C=89=E9=92=AE=E7=BB=84?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button-group/button-group.ts |   9 +
 src/components/button-group/buttongroup.ts  |  39 ++++
 src/components/button/README.md             |  46 ++++
 src/components/button/button-styles.ts      |  23 +-
 src/components/button/button.ts             |  68 +++---
 src/test/panels/button/button.ts            | 242 ++++++++++++++++----
 src/test/panels/starbutton-styles.ts        |  17 --
 7 files changed, 342 insertions(+), 102 deletions(-)
 create mode 100644 src/components/button-group/button-group.ts
 create mode 100644 src/components/button-group/buttongroup.ts
 create mode 100644 src/components/button/README.md
 delete mode 100644 src/test/panels/starbutton-styles.ts

diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
new file mode 100644
index 0000000..72f7f95
--- /dev/null
+++ b/src/components/button-group/button-group.ts
@@ -0,0 +1,9 @@
+import {css, CSSResult} from 'lit'
+
+export const sharedStyles: CSSResult = css`
+  .vertical {
+    display: inline-flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+`
diff --git a/src/components/button-group/buttongroup.ts b/src/components/button-group/buttongroup.ts
new file mode 100644
index 0000000..bccf0d4
--- /dev/null
+++ b/src/components/button-group/buttongroup.ts
@@ -0,0 +1,39 @@
+import {LitElement, html, CSSResultArray, HTMLTemplateResult} from 'lit'
+import {property, customElement} from 'lit/decorators.js'
+import {sharedStyles} from './button-group'
+
+@customElement('star-buttongroup')
+export class StarButtonGroup extends LitElement {
+  public static override get styles(): CSSResultArray {
+    return [sharedStyles]
+  }
+
+  @property({type: Boolean})
+  public vertical = false
+
+  getButtonGroup(): HTMLTemplateResult {
+    if (this.hasAttribute('vertical')) {
+      return html`
+        <div class="vertical">
+          <slot></slot>
+        </div>
+      `
+    } else {
+      return html`
+        <div class="horizontal">
+          <slot></slot>
+        </div>
+      `
+    }
+  }
+
+  render() {
+    return this.getButtonGroup()
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'star-buttongroup': StarButtonGroup
+  }
+}
diff --git a/src/components/button/README.md b/src/components/button/README.md
new file mode 100644
index 0000000..eb399f2
--- /dev/null
+++ b/src/components/button/README.md
@@ -0,0 +1,46 @@
+# star-button
+
+星光 Web 组件——按钮组件：本组件样式及代码风格依然在完善阶段，现阶段介绍如下（8月27日）
+
+## 介绍
+
+star-button组件包含六种属性，分别为：
+1. variant属性：用于选择对应的按钮类型，包括accent、primary、secondary、negative、black和white，默认为accent。
+
+```html demo
+<star-button type="base" variant="accent" label="accent"></star-button>
+<star-button type="base" variant="primary" label="primary"></star-button>
+```
+
+2. 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>
+```
+
+3. label属性：显示按钮名，如省略则显示为“默认”。
+
+```html demo
+<star-button type="base" variant="accent" label="按钮名"></star-button>
+```
+
+4. disabled属性：控制按钮状态，默认为：flase。
+
+```html demo
+<star-button type="base" variant="accent" label="禁用" disabled></star-button>
+```
+
+5. 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>
+```
+
+6. icon和iconcolor属性：控制图标样式和其颜色。
+
+```html demo
+<star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button>
+```
+
diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
index fed8924..e24dfad 100644
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@@ -19,7 +19,7 @@ export const sharedStyles: CSSResult = css`
     box-sizing: border-box;
     outline: none;
     margin: 20px;
-    transition: .1s;
+    transition: 0.1s;
     font-weight: 500;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -34,28 +34,23 @@ export const sharedStyles: CSSResult = css`
     font-size: 12px;
     min-height: 24px;
     min-width: 54px;
-    padding: 0px 10px 2px 10px;
   }
 
   [size='medium'] {
-    font-size: 14px;
     min-height: 32px;
     min-width: 72px;
-    padding: 0px 14px 2px 14px;
   }
 
   [size='large'] {
     font-size: 16px;
     min-height: 40px;
     min-width: 90px;
-    padding: 0px 18px 2px 18px;
   }
 
   [size='extralarge'] {
     font-size: 18px;
     min-height: 48px;
     min-width: 100px;
-    padding: 0px 22px 2px 22px;
   }
 
   [variant='accent'] {
@@ -116,21 +111,21 @@ export const sharedStyles: CSSResult = css`
     pointer-events: none;
   }
 
-  [treatment='fill'][variant="primary"] {
+  [treatment='fill'][variant='primary'] {
     color: rgb(255, 255, 255);
   }
 
-  [treatment='fill'][variant="primary"]:hover {
+  [treatment='fill'][variant='primary']:hover {
     background-color: rgb(0, 0, 0);
   }
 
-  [treatment='outline'][variant="primary"] {
+  [treatment='outline'][variant='primary'] {
     background-color: rgba(0, 0, 0, 0);
     border-style: solid;
     color: rgb(34, 34, 34);
   }
 
-  [treatment='outline'][variant="primary"]:hover {
+  [treatment='outline'][variant='primary']:hover {
     background-color: rgb(213, 213, 213);
     border-style: solid;
     color: rgb(0, 0, 0);
@@ -141,12 +136,12 @@ export const sharedStyles: CSSResult = css`
     min-height: 32px;
     min-width: 72px;
     font-family: 'gaia-icons';
-    text-align: left;
+    text-align: center;
     content: attr(data-icon);
-    padding-inline-end: var(--li-right-padding);
+    padding-inline-end: 5px; /**定义元素逻辑块末尾填充 */
   }
-  
+
   span.label {
-    text-align: left;
+    text-align: center;
   }
 `
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 9087006..dba2cbf 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -5,8 +5,8 @@ import {
   HTMLTemplateResult,
   nothing,
 } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { sharedStyles } from './button-styles'
+import {customElement, property} from 'lit/decorators.js'
+import {sharedStyles} from './button-styles'
 
 export enum ButtonType {
   BASE = 'base',
@@ -28,21 +28,19 @@ export enum ButtonVariants {
   BLACK = 'black',
 }
 
-export type ButtonState = 'false' | 'true';
-
 @customElement('star-button')
 export class StarButton extends LitElement {
   public static override get styles(): CSSResultArray {
     return [sharedStyles]
   }
-  @property({ type: ButtonType }) type = 'base'
-  @property({ type: ButtonVariants }) variant = 'accent'
-  @property({ type: ButtonSize }) size = 'medium'
-  @property({ type: String }) label = ''
-  @property({ type: Boolean }) disabled = false
-  @property({ type: String }) treatment = ''
-  @property({ type: String }) icon = ''
-  @property({ type: String }) iconcolor = ''
+  @property({type: String}) type = 'base'
+  @property({type: String}) variant = 'accent'
+  @property({type: String}) size = 'medium'
+  @property({type: String}) label = ''
+  @property({type: Boolean}) disabled = false
+  @property({type: String}) treatment = ''
+  @property({type: String}) icon = ''
+  @property({type: String}) iconcolor = ''
 
   getBaseButton(): HTMLTemplateResult {
     const colorstyle = this.iconcolor
@@ -54,36 +52,52 @@ export class StarButton extends LitElement {
           </style>
         `
       : nothing
-    if (this.hasAttribute("disabled")) {
-      if (this.hasAttribute("icon")) {
+    if (this.hasAttribute('disabled')) {
+      if (this.hasAttribute('icon')) {
         return html`
-          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} data-icon=${this.icon} class="hasicon" disabled>
-            ${colorstyle}
-            <a>
-              <span class="label">${this.label}</span>
-            </a>
+          <button
+            treatment=${this.treatment}
+            variant=${this.variant}
+            size=${this.size}
+            data-icon=${this.icon}
+            class="hasicon"
+            disabled
+          >
+            ${colorstyle} ${this.label}
           </button>
         `
       } else {
         return html`
-          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} disabled>
+          <button
+            treatment=${this.treatment}
+            variant=${this.variant}
+            size=${this.size}
+            disabled
+          >
             ${this.label}
           </button>
         `
       }
     } else {
-      if (this.hasAttribute("icon")) {
+      if (this.hasAttribute('icon')) {
         return html`
-          <button treatment=${this.treatment} variant=${this.variant} size=${this.size} data-icon=${this.icon} class="hasicon">
-            ${colorstyle}
-            <a>
-              <span class="label">${this.label}</span>
-            </a>
+          <button
+            treatment=${this.treatment}
+            variant=${this.variant}
+            size=${this.size}
+            data-icon=${this.icon}
+            class="hasicon"
+          >
+            ${colorstyle} ${this.label}
           </button>
         `
       } else {
         return html`
-          <button treatment=${this.treatment} variant=${this.variant} size=${this.size}>
+          <button
+            treatment=${this.treatment}
+            variant=${this.variant}
+            size=${this.size}
+          >
             ${this.label}
           </button>
         `
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
index 1db143a..88d483e 100644
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@@ -1,11 +1,11 @@
-import { html, LitElement, CSSResultArray } from 'lit'
-import { customElement, eventOptions } from 'lit/decorators.js'
-import { starbuttonStyles } from '../starbutton-styles'
-import { StarButton } from '../../../components/button/button'
+import {html, LitElement} from 'lit'
+import {customElement, eventOptions} from 'lit/decorators.js'
+import {StarButton} from '../../../components/button/button'
+import '../../../components/button-group/buttongroup'
 
 @customElement('panel-button')
 export class PanelButton extends LitElement {
-  @eventOptions({ passive: false })
+  @eventOptions({passive: false})
   handleEvent(evt: Event) {
     switch (evt.type) {
       case 'click':
@@ -18,47 +18,201 @@ export class PanelButton extends LitElement {
 
   render() {
     return html`
-    <div>
-      <h4>按钮类型属性展示</h4>
-      <star-button type="base" variant="accent" label="accent"></star-button>
-      <star-button type="base" variant="primary" label="primary"></star-button>
-      <star-button type="base" variant="secondary" label="secondary"></star-button>
-      <star-button type="base" variant="negative" label="negative"></star-button>
-      <star-button type="base" variant="black" label="black"></star-button>
-      <star-button type="base" variant="white" label="white"></star-button>
-    </div>
-    <div>
-      <h4>按钮大小属性展示</h4>
-      <star-button type="base" variant="accent" label="small" size="small"></star-button>
-      <star-button type="base" variant="accent" label="medium" size="medium"></star-button>
-      <star-button type="base" variant="accent" label="large" size="large"></star-button>
-      <star-button type="base" variant="accent" label="extralarge" size="extralarge"></star-button>
-    </div>
-    <div>
-      <h4>按钮填充状态展示</h4>
-      <star-button type="base" treatment="fill" variant="primary" label="fill"></star-button>
-      <star-button type="base" treatment="outline" variant="primary" label="outline"></star-button>
-    </div>
-    <div>
-      <h4>按钮禁用状态展示</h4>
-      <star-button type="base" variant="accent" label="正常状态"></star-button>
-      <star-button type="base" variant="accent" label="禁用状态" disabled></star-button>
-    </div>
-    <div>
-      <h4>按钮点击事件展示</h4>
-      <star-button @click=${this} type="base" variant="accent" label="Click"></star-button>
-    </div>
-    <div>
-      <h4>图标按钮展示</h4>
-      <star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="green"></star-button>
-    </div>
+      <div>
+        <h4>按钮类型属性展示</h4>
+        <star-button type="base" variant="accent" label="accent"></star-button>
+        <star-button
+          type="base"
+          variant="primary"
+          label="primary"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="secondary"
+          label="secondary"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="negative"
+          label="negative"
+        ></star-button>
+        <star-button type="base" variant="black" label="black"></star-button>
+        <star-button type="base" variant="white" label="white"></star-button>
+      </div>
+      <div>
+        <h4>按钮大小属性展示</h4>
+        <star-button
+          type="base"
+          variant="accent"
+          label="small"
+          size="small"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="medium"
+          size="medium"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="large"
+          size="large"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="extralarge"
+          size="extralarge"
+        ></star-button>
+      </div>
+      <div>
+        <h4>按钮填充状态展示</h4>
+        <star-button
+          type="base"
+          treatment="fill"
+          variant="primary"
+          label="fill"
+        ></star-button>
+        <star-button
+          type="base"
+          treatment="outline"
+          variant="primary"
+          label="outline"
+        ></star-button>
+      </div>
+      <div>
+        <h4>按钮点击事件展示</h4>
+        <star-button
+          @click=${this}
+          type="base"
+          variant="accent"
+          label="Click"
+        ></star-button>
+      </div>
+      <div>
+        <h4>图标按钮展示</h4>
+        <star-button
+          type="base"
+          variant="accent"
+          label="图标按钮"
+          icon="alarm"
+          iconcolor="white"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="primary"
+          label="图标按钮"
+          icon="bug"
+          iconcolor="white"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="secondary"
+          label="图标按钮"
+          icon="help"
+          iconcolor="#222222"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="negative"
+          label="图标按钮"
+          icon="airplane"
+          iconcolor="white"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="black"
+          label="图标按钮"
+          icon="privacy"
+          iconcolor="#222222"
+        ></star-button>
+        <star-button
+          type="base"
+          variant="white"
+          label="图标按钮"
+          icon="delete"
+          iconcolor="#EBEBEB"
+        ></star-button>
+      </div>
+      <div>
+        <h4>各类按钮属性在禁用状态下的展示</h4>
+        <star-button type="base" variant="accent" label="正常"></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="禁用"
+          disabled
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="Icon禁用"
+          icon="alarm"
+          iconcolor="silver"
+          disabled
+        ></star-button>
+        <star-button
+          type="base"
+          treatment="fill"
+          variant="primary"
+          label="fill禁用"
+          disabled
+        ></star-button>
+        <star-button
+          type="base"
+          variant="accent"
+          label="large"
+          size="large"
+          disabled
+        ></star-button>
+      </div>
+      <div>
+        <h4>按钮组</h4>
+        <star-buttongroup class="bg">
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮1"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮2"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮3"
+            class="bg"
+          ></star-button>
+        </star-buttongroup>
+        <hr />
+        <star-buttongroup vertical class="bg">
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮1"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮2"
+            class="bg"
+          ></star-button>
+          <star-button
+            type="base"
+            variant="accent"
+            label="按钮3"
+            class="bg"
+          ></star-button>
+        </star-buttongroup>
+      </div>
     `
   }
-
-  public static override get styles(): CSSResultArray {
-    return [starbuttonStyles]
-  }
-
 }
 
 declare global {
diff --git a/src/test/panels/starbutton-styles.ts b/src/test/panels/starbutton-styles.ts
deleted file mode 100644
index f445be6..0000000
--- a/src/test/panels/starbutton-styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { css, CSSResult } from 'lit'
-
-export const starbuttonStyles: CSSResult = css`
-  div {
-      padding: 10px 40px;
-    }
-
-    html {
-      scrollbar-width: none;
-    }
-
-    body {
-      margin: 0;
-      padding: 0;
-      background: #f0f0f0;
-    }
-`
\ No newline at end of file

From e1d1418c71ce65ca28a3c5aa54d18fc9a83c1592 Mon Sep 17 00:00:00 2001
From: yajun <yajun@kylinos.cn>
Date: Mon, 29 Aug 2022 20:52:03 +0800
Subject: [PATCH 9/9] =?UTF-8?q?TASK=20#105401=20StarWebComponent=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91-button-=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/README.md        |  22 ++--
 src/components/button/button-styles.ts | 138 ++++++++++++++-----------
 src/components/button/button.ts        | 124 +++++++++++++---------
 src/test/panels/button/button.ts       |  43 ++------
 4 files changed, 174 insertions(+), 153 deletions(-)

diff --git a/src/components/button/README.md b/src/components/button/README.md
index eb399f2..f605b01 100644
--- a/src/components/button/README.md
+++ b/src/components/button/README.md
@@ -4,41 +4,49 @@
 
 ## 介绍
 
-star-button组件包含六种属性，分别为：
-1. variant属性：用于选择对应的按钮类型，包括accent、primary、secondary、negative、black和white，默认为accent。
+star-button属性：
+1. type：按钮类型，包括文本按钮base、图标文本按钮iconlabel和图标按钮icononly。
+
+```html demo
+<star-button type="base" label="文本按钮"></star-button>
+<star-button type="iconlabel" label="图标文本按钮"></star-button>
+<star-button type="icononly" label="图标按钮"></star-button>
+```
+
+2. variant：按钮样式，包括accent、primary、secondary、negative、black和white，默认为accent。
 
 ```html demo
 <star-button type="base" variant="accent" label="accent"></star-button>
 <star-button type="base" variant="primary" label="primary"></star-button>
 ```
 
-2. size属性：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
+3. size：控制按钮大小，包括small、medium、large和extralarge四种，默认为medium。
 
 ```html demo
 <star-button type="base" variant="accent" label="accent" size="small"></star-button>
 <star-button type="base" variant="primary" label="primary" size="large"></star-button>
 ```
 
-3. label属性：显示按钮名，如省略则显示为“默认”。
+4. label：显示按钮名，如省略则显示为“默认”。
 
 ```html demo
 <star-button type="base" variant="accent" label="按钮名"></star-button>
 ```
 
-4. disabled属性：控制按钮状态，默认为：flase。
+5. disabled：控制按钮禁用状态，默认为：false。
 
 ```html demo
 <star-button type="base" variant="accent" label="禁用" disabled></star-button>
 ```
 
-5. treatment属性：控制按钮填充状态，包括fill和outline，默认为：fill。
+6. treatment：控制按钮填充状态，包括fill和outline，默认为：fill。
 
 ```html demo
 <star-button type="base" variant="accent" label="fill" treatment="fill"></star-button>
 <star-button type="base" variant="accent" label="outline" treatment="outline"></star-button>
 ```
 
-6. icon和iconcolor属性：控制图标样式和其颜色。
+7. icon和iconcolor：控制图标样式和其颜色。
 
 ```html demo
 <star-button type="base" variant="accent" label="图标按钮" icon="alarm" iconcolor="white"></star-button>
diff --git a/src/components/button/button-styles.ts b/src/components/button/button-styles.ts
index e24dfad..6f775b8 100644
--- a/src/components/button/button-styles.ts
+++ b/src/components/button/button-styles.ts
@@ -1,147 +1,161 @@
 import {css, CSSResult} from 'lit'
 
 export const sharedStyles: CSSResult = css`
-  .test {
-    color: darkred;
-    font-weight: bold;
-    background-color: #ffffff;
-  }
-
   button {
     display: inline-block;
-    line-height: 1;
+    line-height: 18.2px;
     white-space: nowrap;
     cursor: pointer;
     background: #fff;
     color: #606266;
-    -webkit-appearance: none;
     text-align: center;
     box-sizing: border-box;
-    outline: none;
     margin: 20px;
     transition: 0.1s;
     font-weight: 500;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     font-size: 14px;
     padding: 12px 23px 14px 23px;
     border: none;
     border-radius: 18px;
   }
 
-  [size='small'] {
+  .small {
     font-size: 12px;
+    height: 24px;
+    line-height: 15.6px;
     min-height: 24px;
     min-width: 54px;
+    padding: 0px 10px 0px 10px;
   }
 
-  [size='medium'] {
+  .medium {
+    font-size: 14px;
+    height: 32.2px;
+    line-height: 18.2px;
     min-height: 32px;
     min-width: 72px;
+    padding: 0px 14px 0px 14px;
   }
 
-  [size='large'] {
+  .large {
     font-size: 16px;
+    height: 40.8px;
+    line-height: 20.8px;
     min-height: 40px;
     min-width: 90px;
+    padding: 0px 18px 0px 18px;
   }
 
-  [size='extralarge'] {
+  .extralarge {
     font-size: 18px;
+    height: 48.4px;
+    line-height: 23.4px;
     min-height: 48px;
     min-width: 100px;
+    padding: 0px 22px 0px 22px;
   }
 
-  [variant='accent'] {
+  .accent {
     background-color: #0469e3;
-    color: rgb(255, 255, 255);
+    color: #FFFFFF;
   }
 
-  [variant='accent']:hover {
-    background-color: rgb(1, 91, 199);
+  .accent:hover {
+    background-color: #015BC7;
     box-shadow: none;
   }
 
-  [variant='primary'] {
-    background-color: rgb(34, 34, 34);
-    color: rgb(235, 235, 235);
+  .primary {
+    background-color: #222222;
+    color: #EBEBEB;
   }
 
-  [variant='primary']:hover {
-    background-color: rgb(0, 0, 0);
-    box-shadow: none;
-    color: rgb(255, 255, 255);
+  .primary:hover {
+    background-color: #000000;
+    color: #FFFFFF;
   }
 
-  [variant='secondary'] {
-    background-color: rgb(230, 230, 230);
-    color: rgb(34, 34, 34);
+  .secondary {
+    background-color: #E6E6E6;
+    color: #222222;
   }
 
-  [variant='secondary']:hover {
-    background-color: rgb(213, 213, 213);
-    box-shadow: none;
-    color: rgb(0, 0, 0);
+  .secondary:hover {
+    background-color: #D5D5D5;
+    color: #d42222;
+    transition-property: color;
+    transition-duration: 2s;
+    transition-timing-function: linear;
+    transition-delay: 0.2s;
   }
 
-  [variant='negative'] {
-    background-color: rgb(179, 2, 2);
-    color: rgb(235, 235, 235);
+  .negative {
+    background-color: #B30202;
+    color: #EBEBEB;
   }
 
-  [variant='negative']:hover {
-    background-color: rgb(162, 1, 1);
-    color: rgb(235, 235, 235);
+  .negative:hover {
+    background-color: #A20101;
+    color: #EBEBEB;
   }
 
-  [variant='black'] {
-    color: rgb(34, 34, 34);
-    background-color: rgb(0, 0, 0);
+  .black {
+    color: #222222;
+    background-color: #000000;
   }
 
-  [variant='white'] {
-    background-color: rgb(255, 255, 255);
-    color: rgb(235, 235, 235);
+  .white {
+    background-color: #FFFFFF;
+    color: #EBEBEB;
   }
 
-  [disabled] {
-    background-color: rgb(230, 230, 230);
+  .disabled {
+    background-color: #E6E6E6;
     cursor: default;
     pointer-events: none;
   }
 
-  [treatment='fill'][variant='primary'] {
-    color: rgb(255, 255, 255);
+  .fill.primary {
+    color: #FFFFFF;
   }
 
-  [treatment='fill'][variant='primary']:hover {
-    background-color: rgb(0, 0, 0);
+  .fill.primary:hover {
+    background-color: #000000;
   }
 
-  [treatment='outline'][variant='primary'] {
-    background-color: rgba(0, 0, 0, 0);
+  .outline.primary {
+    background-color: #f0f0f0;
     border-style: solid;
-    color: rgb(34, 34, 34);
+    color: #222222;
   }
 
-  [treatment='outline'][variant='primary']:hover {
-    background-color: rgb(213, 213, 213);
+  .outline.primary:hover {
+    background-color: #D5D5D5;
     border-style: solid;
-    color: rgb(0, 0, 0);
+    color: #000000;
   }
 
   button.hasicon::before {
     font-size: 16px;
-    min-height: 32px;
-    min-width: 72px;
     font-family: 'gaia-icons';
-    text-align: center;
     content: attr(data-icon);
+    text-align: center;
     padding-inline-end: 5px; /**定义元素逻辑块末尾填充 */
   }
 
-  span.label {
+  button.icononly::before {
+    font-size: 16px;
+    font-family: 'gaia-icons';
+    content: attr(data-icon);
     text-align: center;
   }
+
+  button.icononly {
+    border-radius: 50%;
+    height: auto;
+    line-height: auto;
+    min-height: 32.2px;
+    min-width: 32.2px;
+    padding: 0px;
+  }
 `
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index dba2cbf..90573e2 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -10,6 +10,8 @@ import {sharedStyles} from './button-styles'
 
 export enum ButtonType {
   BASE = 'base',
+  ICONONLY = 'icononly',
+  ICONLABEL = 'iconlabel',
 }
 
 export enum ButtonSize {
@@ -36,13 +38,32 @@ export class StarButton extends LitElement {
   @property({type: String}) type = 'base'
   @property({type: String}) variant = 'accent'
   @property({type: String}) size = 'medium'
-  @property({type: String}) label = ''
+  @property({type: String}) label = '默认'
   @property({type: Boolean}) disabled = false
   @property({type: String}) treatment = ''
-  @property({type: String}) icon = ''
+  @property({type: String}) icon = 'bug'
   @property({type: String}) iconcolor = ''
 
   getBaseButton(): HTMLTemplateResult {
+    if (this.hasAttribute('disabled')) {
+      return html`
+        <button
+          class="disabled ${this.variant} ${this.size} ${this.treatment}"
+          size=${this.size}
+        >
+          ${this.label}
+        </button>
+      `
+    } else {
+      return html`
+        <button class="${this.variant} ${this.size} ${this.treatment}">
+          ${this.label}
+        </button>
+      `
+    }
+  }
+
+  getIconLabelButton(): HTMLTemplateResult {
     const colorstyle = this.iconcolor
       ? html`
           <style>
@@ -53,55 +74,56 @@ export class StarButton extends LitElement {
         `
       : nothing
     if (this.hasAttribute('disabled')) {
-      if (this.hasAttribute('icon')) {
-        return html`
-          <button
-            treatment=${this.treatment}
-            variant=${this.variant}
-            size=${this.size}
-            data-icon=${this.icon}
-            class="hasicon"
-            disabled
-          >
-            ${colorstyle} ${this.label}
-          </button>
-        `
-      } else {
-        return html`
-          <button
-            treatment=${this.treatment}
-            variant=${this.variant}
-            size=${this.size}
-            disabled
-          >
-            ${this.label}
-          </button>
-        `
-      }
+      return html`
+        <button
+          class="disabled hasicon ${this.variant} ${this.size} ${this
+            .treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle} ${this.label}
+        </button>
+      `
     } else {
-      if (this.hasAttribute('icon')) {
-        return html`
-          <button
-            treatment=${this.treatment}
-            variant=${this.variant}
-            size=${this.size}
-            data-icon=${this.icon}
-            class="hasicon"
-          >
-            ${colorstyle} ${this.label}
-          </button>
+      return html`
+        <button
+          class="hasicon ${this.variant} ${this.size} ${this.treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle} ${this.label}
+        </button>
+      `
+    }
+  }
+
+  getIconOnlyButton(): HTMLTemplateResult {
+    const colorstyle = this.iconcolor
+      ? html`
+          <style>
+            button::before {
+              color: ${this.iconcolor} !important;
+            }
+          </style>
         `
-      } else {
-        return html`
-          <button
-            treatment=${this.treatment}
-            variant=${this.variant}
-            size=${this.size}
-          >
-            ${this.label}
-          </button>
-        `
-      }
+      : nothing
+    if (this.hasAttribute('disabled')) {
+      return html`
+        <button
+          class="icononly disabled ${this.variant} ${this.size} ${this
+            .treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle}
+        </button>
+      `
+    } else {
+      return html`
+        <button
+          class="icononly ${this.variant} ${this.size} ${this.treatment}"
+          data-icon=${this.icon}
+        >
+          ${colorstyle}
+        </button>
+      `
     }
   }
 
@@ -109,6 +131,10 @@ export class StarButton extends LitElement {
     switch (this.type) {
       case ButtonType.BASE:
         return this.getBaseButton()
+      case ButtonType.ICONONLY:
+        return this.getIconOnlyButton()
+      case ButtonType.ICONLABEL:
+        return this.getIconLabelButton()
       default:
         console.error('unhanled 【star-button】 type')
         return nothing
diff --git a/src/test/panels/button/button.ts b/src/test/panels/button/button.ts
index 88d483e..ce5b62b 100644
--- a/src/test/panels/button/button.ts
+++ b/src/test/panels/button/button.ts
@@ -20,6 +20,7 @@ export class PanelButton extends LitElement {
     return html`
       <div>
         <h4>按钮类型属性展示</h4>
+        <star-button></star-button>
         <star-button type="base" variant="accent" label="accent"></star-button>
         <star-button
           type="base"
@@ -93,46 +94,18 @@ export class PanelButton extends LitElement {
       <div>
         <h4>图标按钮展示</h4>
         <star-button
-          type="base"
+          type="iconlabel"
           variant="accent"
-          label="图标按钮"
+          label="Icon+Label"
           icon="alarm"
           iconcolor="white"
         ></star-button>
         <star-button
-          type="base"
-          variant="primary"
-          label="图标按钮"
-          icon="bug"
-          iconcolor="white"
-        ></star-button>
-        <star-button
-          type="base"
-          variant="secondary"
-          label="图标按钮"
-          icon="help"
-          iconcolor="#222222"
-        ></star-button>
-        <star-button
-          type="base"
-          variant="negative"
-          label="图标按钮"
-          icon="airplane"
-          iconcolor="white"
-        ></star-button>
-        <star-button
-          type="base"
-          variant="black"
-          label="图标按钮"
-          icon="privacy"
-          iconcolor="#222222"
-        ></star-button>
-        <star-button
-          type="base"
-          variant="white"
-          label="图标按钮"
+          type="icononly"
+          variant="accent"
+          label="IconOnly"
           icon="delete"
-          iconcolor="#EBEBEB"
+          iconcolor="#f9f9f9"
         ></star-button>
       </div>
       <div>
@@ -145,7 +118,7 @@ export class PanelButton extends LitElement {
           disabled
         ></star-button>
         <star-button
-          type="base"
+          type="iconlabel"
           variant="accent"
           label="Icon禁用"
           icon="alarm"