feat:add header indicator

src/editor/assets/css/index.css

@@ -6,6 +6,7 @@
 @import './previewer/previewer.css';
 @import './contextmenu/contextmenu.css';
 @import './hyperlink/hyperlink.css';
+@import './zone/zone.css';
 
 .ce-inputarea {
   width: 0;

src/editor/assets/css/zone/zone.css

@@ -0,0 +1,8 @@
+.ce-header-indicator>div {
+  padding: 3px 6px;
+  color: #000000;
+  font-size: 12px;
+  background: rgb(218 231 252);
+  position: absolute;
+  transform: translate(10px, 10px);
+}

src/editor/core/zone/Zone.ts

@@ -1,14 +1,20 @@
+import { EDITOR_PREFIX } from '../../dataset/constant/Editor'
 import { EditorZone } from '../../dataset/enum/Editor'
 import { Draw } from '../draw/Draw'
 
 export class Zone {
 
   private draw: Draw
+  private container: HTMLDivElement
+
   private currentZone: EditorZone
+  private headerIndicatorContainer: HTMLDivElement | null
 
   constructor(draw: Draw) {
     this.draw = draw
+    this.container = draw.getContainer()
     this.currentZone = EditorZone.MAIN
+    this.headerIndicatorContainer = null
   }
 
   public isHeaderActive(): boolean {
@@ -32,6 +38,32 @@ export class Zone {
       isSetCursor: false,
       isCompute: false
     })
+    // 页眉指示器
+    if (this.isHeaderActive()) {
+      this._drawHeaderZoneIndicator()
+    } else {
+      this._clearHeaderZoneIndicator()
+    }
+  }
+
+  private _drawHeaderZoneIndicator() {
+    this.headerIndicatorContainer = document.createElement('div')
+    this.headerIndicatorContainer.classList.add(`${EDITOR_PREFIX}-header-indicator`)
+    const pageList = this.draw.getPageList()
+    const pageHeight = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
+    const preY = pageHeight + pageGap
+    for (let p = 0; p < pageList.length; p++) {
+      const indicator = document.createElement('div')
+      indicator.innerText = `编辑页眉`
+      indicator.style.top = `${preY * p}px`
+      this.headerIndicatorContainer.append(indicator)
+    }
+    this.container.append(this.headerIndicatorContainer)
+  }
+
+  private _clearHeaderZoneIndicator() {
+    this.headerIndicatorContainer?.remove()
   }
 
 }