diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts
new file mode 100644
index 0000000..bbb8242
--- /dev/null
+++ b/src/components/indicator/indicator-page-point.ts
@@ -0,0 +1,121 @@
+import {html, css, LitElement} 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
+
+  updated() {
+    this.checkProperties()
+  }
+
+  /**
+   * 初始值及修改后的值检查
+   *
+   * hasChange 无法影响标签上的属性值显示，且无法访问 this
+   */
+  checkProperties(): void {
+    if (this.total < 1) {
+      console.error(
+        'indicator total setted a error num: ',
+        this.total,
+        ' will be resetted 1'
+      )
+      this.total = 1
+    } else if (this.total > 15) {
+      console.error(
+        'indicator total setted a error num: ',
+        this.total,
+        ' will be resetted 15'
+      )
+      this.total = 15
+    }
+
+    if (this.index < 1) {
+      console.error(
+        'indicator index setted a error num: ',
+        this.index,
+        ' will be resetted 1'
+      )
+      this.index = 1
+    } else if (this.index > this.total) {
+      console.error(
+        'indicator index setted a error num: ',
+        this.index,
+        ' will be resetted',
+        this.total
+      )
+      this.index = this.total
+    }
+  }
+
+  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/test/panels/indicators/indicators.ts b/src/test/panels/indicators/indicators.ts
new file mode 100644
index 0000000..649d8f0
--- /dev/null
+++ b/src/test/panels/indicators/indicators.ts
@@ -0,0 +1,97 @@
+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
+
+  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 @click=${()=>this.total++}>total++</button>
+          <button @click=${()=>this.total--}>total--</button>
+          <button @click=${()=>this.index++}>index++</button>
+          <button @click=${()=>this.index--}>index--</button>
+          <button @click=${()=>
+            Array.prototype.forEach.call(
+              this.myindicators, 
+              e => e.setAttribute('edit', ''))
+          }>add edit</button>
+          <button @click=${()=>
+            Array.prototype.forEach.call(
+              this.myindicators, 
+              e => e.removeAttribute('edit'))
+          }>remove edit</button>
+        </div>
+      </div>
+      <indicator-page-point class='myindicator' total=${this.total} index=${this.index}></indicator-page-point>
+      <div>
+        <div>
+          <indicator-page-point class='myindicator' total=${this.total} index=${this.index} column></indicator-page-point>
+          <indicator-page-point class='myindicator' total=${this.total} index=${this.index} 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 b480481..3d99106 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 './indicators/indicators'
 
 type SEID = String
 
@@ -105,10 +106,10 @@ 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