@netless/telebox-insider 0.3.0-beta.9 → 0.3.1-beta.0

package/src/TeleBoxManager/index.ts

@@ -43,25 +43,27 @@ type ValConfig = {
     readonly: Val<boolean, boolean>;
     minimized: Val<boolean, boolean>;
     maximized: Val<boolean, boolean>;
+    forceMaximized: Val<boolean, boolean>;
     fence: Val<boolean, boolean>;
 };
 export interface TeleBoxManager extends ValEnhancedResult<ValConfig> {}
 
 export class TeleBoxManager {
-    private boxesStatus$: Map<string, TeleBoxState>;
-    private lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
-    private appMenu: AppMenu | undefined;
-    private useBoxesStatus: boolean;
-    private effectBoxesStatusTimer?: {
+    static readonly kind = "TeleBoxManager";
+    protected boxesStatus$: Map<string, TeleBoxState>;
+    protected lastNotMinimizedBoxesStatus$: Map<string, NotMinimizedBoxState>;
+    protected appMenu: AppMenu | undefined;
+    protected useBoxesStatus: boolean;
+    protected effectBoxesStatusTimer?: {
         skipUpdate: boolean;
         timer: number | undefined;
         resolve?: (skipUpdate: boolean) => void;
-    }
-    private effectLastNotMinimizedBoxStatusTimer?: {
+    };
+    protected effectLastNotMinimizedBoxStatusTimer?: {
         skipUpdate: boolean;
         timer: number | undefined;
         resolve?: (skipUpdate: boolean) => void;
-    }
+    };
 
     public constructor({
         root = document.body,
@@ -78,6 +80,7 @@ export class TeleBoxManager {
         collector,
         namespace = "telebox",
         readonly = false,
+        forceMaximized = false,
         useBoxesStatus = false,
     }: TeleBoxManagerConfig = {}) {
         this._sideEffect = new SideEffectManager();
@@ -90,10 +93,15 @@ export class TeleBoxManager {
         this.boxes$ = createVal<TeleBox[]>([]);
         this.topBox$ = this.boxes$.derive((boxes) => {
             if (boxes.length > 0) {
-                console.log("topBox===>topBox$===>000");
                 let currentTopBox: TeleBox | undefined = undefined;
                 const topBox = boxes.reduce((topBox, box) => {
-                    if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
+                    if (box.forceTop) {
+                        return topBox;
+                    }
+                    if (
+                        box.boxStatus &&
+                        box.boxStatus === TELE_BOX_STATE.Minimized
+                    ) {
                         return topBox;
                     }
                     if (!topBox) {
@@ -101,14 +109,16 @@ export class TeleBoxManager {
                         return topBox;
                     }
                     return topBox.zIndex > box.zIndex ? topBox : box;
-                }, currentTopBox as (TeleBox | undefined));
-                console.log("topBox===>topBox$===>end", topBox?.id);
+                }, currentTopBox as TeleBox | undefined);
                 return topBox;
             }
             return;
         });
         this.boxesStatus$ = new Map<string, TeleBoxState>();
-        this.lastNotMinimizedBoxesStatus$ = new Map<string, NotMinimizedBoxState>();
+        this.lastNotMinimizedBoxesStatus$ = new Map<
+            string,
+            NotMinimizedBoxState
+        >();
         const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
         const prefersDark$ = createVal(false);
 
@@ -158,6 +168,13 @@ export class TeleBoxManager {
         const minimized$ = createVal(minimized);
 
         const maximized$ = createVal(maximized);
+        const forceMaximized$ = createVal(forceMaximized);
+        forceMaximized$.reaction((forceMaximized, _, skipUpdate) => {
+            this.boxes.forEach((box) =>
+                box.setForceMaximized(forceMaximized, skipUpdate)
+            );
+            this.maxTitleBar?.setForceMaximized(forceMaximized);
+        });
         maximized$.reaction((maximized, _, skipUpdate) => {
             this.boxes.forEach((box) =>
                 box.setMaximized(maximized, skipUpdate)
@@ -203,7 +220,7 @@ export class TeleBoxManager {
                       new TeleBoxCollector({
                           visible: minimized,
                           readonly: readonly,
-                          namespace
+                          namespace,
                       }).mount(root)
         );
         collector$.subscribe((collector) => {
@@ -314,24 +331,39 @@ export class TeleBoxManager {
                         if (!this.useBoxesStatus) {
                             this.makeBoxTop(box);
                         } else {
-                            if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
-                                const maxNormalBoxZIndex = this.getMaxNormalBoxZIndex();
+                            if (
+                                box.boxStatus &&
+                                box.boxStatus === TELE_BOX_STATE.Normal
+                            ) {
+                                const maxNormalBoxZIndex =
+                                    this.getMaxNormalBoxZIndex();
                                 if (maxNormalBoxZIndex > box.zIndex) {
-                                    this.setBox(box, {
-                                        zIndex: maxNormalBoxZIndex + 1
-                                    }, false);
+                                    this.setBox(
+                                        box,
+                                        {
+                                            zIndex: maxNormalBoxZIndex + 1,
+                                        },
+                                        false
+                                    );
                                 }
-                            } else if(box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized){
-                                const maxMaximizedBoxZIndex = this.getMaxMaximizedBoxZIndex();
+                            } else if (
+                                box.boxStatus &&
+                                box.boxStatus === TELE_BOX_STATE.Maximized
+                            ) {
+                                const maxMaximizedBoxZIndex =
+                                    this.getMaxMaximizedBoxZIndex();
                                 if (maxMaximizedBoxZIndex > box.zIndex) {
-                                    this.setBox(box, {
-                                        zIndex: maxMaximizedBoxZIndex + 1
-                                    }, false);
+                                    this.setBox(
+                                        box,
+                                        {
+                                            zIndex: maxMaximizedBoxZIndex + 1,
+                                        },
+                                        false
+                                    );
                                 }
                                 this.makeMaximizedTopBoxFocus();
                             }
-                        } 
-                        console.log("checkFocusBox===>", box.id);
+                        }
                         this.focusBox(box);
                         return;
                     }
@@ -357,6 +389,7 @@ export class TeleBoxManager {
             readonly: readonly$.value,
             namespace: this.namespace,
             state: state$.value,
+            forceMaximized: forceMaximized$.value,
             boxes: this.boxes$.value,
             containerRect: containerRect$.value,
             getBoxesStatus: () => {
@@ -365,20 +398,33 @@ export class TeleBoxManager {
             onEvent: (event): void => {
                 switch (event.type) {
                     case TELE_BOX_DELEGATE_EVENT.Maximize: {
+                        if (
+                            forceMaximized$.value &&
+                            this.state === TELE_BOX_STATE.Maximized
+                        ) {
+                            return;
+                        }
                         if (this.hasBoxesStatus()) {
                             let targetBox = this.maxTitleBar.focusedBox;
                             if (!targetBox) {
-                               targetBox = this.getMaximizedTopBox();
+                                targetBox = this.getMaximizedTopBox();
                             }
                             if (targetBox?.id) {
                                 const box = this.getBox(targetBox.id);
                                 if (box) {
-                                    this.setBox(box, {
-                                        status: TELE_BOX_STATE.Normal,
-                                        zIndex: this.getMaxNormalBoxZIndex() + 1
-                                    }, false, ()=>{
-                                        this.makeMaximizedTopBoxFocus();
-                                    });
+                                    this.setBox(
+                                        box,
+                                        {
+                                            status: TELE_BOX_STATE.Normal,
+                                            zIndex:
+                                                this.getMaxNormalBoxZIndex() +
+                                                1,
+                                        },
+                                        false,
+                                        () => {
+                                            this.makeMaximizedTopBoxFocus();
+                                        }
+                                    );
                                 }
                             }
                         } else {
@@ -390,9 +436,9 @@ export class TeleBoxManager {
                         if (this.hasBoxesStatus()) {
                             let targetBox = this.maxTitleBar.focusedBox;
                             if (!targetBox) {
-                               targetBox = this.getMaximizedTopBox();
+                                targetBox = this.getMaximizedTopBox();
                             }
-                            if(targetBox?.id){
+                            if (targetBox?.id) {
                                 const box = this.getBox(targetBox.id);
                                 if (box) {
                                     let isFocusChanged = false;
@@ -400,10 +446,14 @@ export class TeleBoxManager {
                                         this.blurBox(box);
                                         isFocusChanged = true;
                                     }
-                                    this.setBox(box, {
-                                        status: TELE_BOX_STATE.Minimized,
-                                        zIndex: -1
-                                    }, false);
+                                    this.setBox(
+                                        box,
+                                        {
+                                            status: TELE_BOX_STATE.Minimized,
+                                            zIndex: -1,
+                                        },
+                                        false
+                                    );
                                     if (isFocusChanged) {
                                         this.focusTopBox();
                                     } else {
@@ -420,7 +470,7 @@ export class TeleBoxManager {
                         if (this.hasBoxesStatus()) {
                             let targetBox = this.maxTitleBar.focusedBox;
                             if (!targetBox) {
-                               targetBox = this.getMaximizedTopBox();
+                                targetBox = this.getMaximizedTopBox();
                             }
                             if (targetBox?.id) {
                                 const box = this.getBox(targetBox.id);
@@ -469,6 +519,7 @@ export class TeleBoxManager {
             fence: fence$,
             minimized: minimized$,
             maximized: maximized$,
+            forceMaximized: forceMaximized$,
         };
 
         withValueEnhancer(this, valConfig);
@@ -490,6 +541,23 @@ export class TeleBoxManager {
         return this.topBox$.value;
     }
 
+    public get forceTopBoxes(): TeleBox | undefined {
+        return this.boxes.find((box) => box.forceTop);
+    }
+
+    public get maxForceTopBox(): TeleBox | undefined {
+        return this.boxes.reduce<TeleBox | undefined>((maxTopBox, box) => {
+            if (box.forceTop && box.zIndex > (maxTopBox?.zIndex ?? 0)) {
+                return box;
+            }
+            return maxTopBox;
+        }, undefined);
+    }
+
+    public get forceNormalBoxes(): TeleBox | undefined {
+        return this.boxes.find((box) => box.forceNormal);
+    }
+
     public readonly events = new EventEmitter() as TeleBoxManagerEvents;
 
     protected _sideEffect: SideEffectManager;
@@ -516,6 +584,9 @@ export class TeleBoxManager {
 
     /** @deprecated use setMaximized and setMinimized instead */
     public setState(state: TeleBoxState, skipUpdate = false): this {
+        if (state === TELE_BOX_STATE.Normal && this.forceMaximized) {
+            return this;
+        }
         switch (state) {
             case TELE_BOX_STATE.Maximized: {
                 this.setMinimized(false, skipUpdate);
@@ -536,13 +607,27 @@ export class TeleBoxManager {
         return this;
     }
 
-    public setBoxStatus(boxId: string, boxStatus?: TeleBoxState, skipUpdate = false): void {
+    public setBoxStatus(
+        boxId: string,
+        boxStatus?: TeleBoxState,
+        skipUpdate = false
+    ): void {
         if (boxStatus) {
             const oldBoxStatus = this.boxesStatus$.get(boxId);
             this.boxesStatus$.set(boxId, boxStatus);
-            if (boxStatus === TELE_BOX_STATE.Minimized && oldBoxStatus !== TELE_BOX_STATE.Minimized) {
-                this.setLastNotMinimizedBoxStatus(boxId, oldBoxStatus, skipUpdate);
-            } else if (oldBoxStatus === TELE_BOX_STATE.Minimized && boxStatus !== TELE_BOX_STATE.Minimized) {
+            if (
+                boxStatus === TELE_BOX_STATE.Minimized &&
+                oldBoxStatus !== TELE_BOX_STATE.Minimized
+            ) {
+                this.setLastNotMinimizedBoxStatus(
+                    boxId,
+                    oldBoxStatus,
+                    skipUpdate
+                );
+            } else if (
+                oldBoxStatus === TELE_BOX_STATE.Minimized &&
+                boxStatus !== TELE_BOX_STATE.Minimized
+            ) {
                 this.setLastNotMinimizedBoxStatus(boxId, undefined, skipUpdate);
             }
         } else {
@@ -550,7 +635,10 @@ export class TeleBoxManager {
             this.setLastNotMinimizedBoxStatus(boxId, undefined, skipUpdate);
         }
         if (!skipUpdate) {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, { id: boxId, boxStatus});
+            this.events.emit(TELE_BOX_MANAGER_EVENT.BoxStatus, {
+                id: boxId,
+                boxStatus,
+            });
         }
     }
 
@@ -562,11 +650,17 @@ export class TeleBoxManager {
         return this.boxesStatus$;
     }
 
-    public get lastNotMinimizedBoxesStatus(): ReadonlyMap<string, NotMinimizedBoxState> {
+    public get lastNotMinimizedBoxesStatus(): ReadonlyMap<
+        string,
+        NotMinimizedBoxState
+    > {
         return this.lastNotMinimizedBoxesStatus$;
     }
 
-    public setBoxesStatus(boxesStatus: Map<string, TeleBoxState>, skipUpdate = false) {
+    public setBoxesStatus(
+        boxesStatus: Map<string, TeleBoxState>,
+        skipUpdate = false
+    ) {
         this.boxesStatus$ = boxesStatus;
         this.effectBoxesStatusChange(skipUpdate);
     }
@@ -575,13 +669,13 @@ export class TeleBoxManager {
         return this.boxesStatus$;
     }
 
-    private effectBoxStatusChange(){
+    protected effectBoxStatusChange() {
         if (!this.useBoxesStatus) {
             return;
         }
-        if(this.collector){
+        if (this.collector) {
             this.collector.updateBoxesStatus();
-            if(this.hasMinimizedBox()){
+            if (this.hasMinimizedBox()) {
                 this._setCollectorRect(this._calcCollectorRect());
             }
         }
@@ -593,52 +687,59 @@ export class TeleBoxManager {
         }
     }
 
-    private effectBoxesStatusTimerFunc(skipUpdate: boolean){
+    protected effectBoxesStatusTimerFunc(skipUpdate: boolean) {
         if (!this.useBoxesStatus) {
             return;
         }
-        let newTopBox:TeleBox | undefined;
+        let newTopBox: TeleBox | undefined;
         const curTopBox = this.topBox;
         this.boxes.forEach((box) => {
             const boxStatus = this.boxesStatus$.get(box.id);
             if (boxStatus) {
-                if (boxStatus !== TELE_BOX_STATE.Minimized && box.zIndex > (newTopBox?.zIndex ?? 0)) {
+                if (
+                    boxStatus !== TELE_BOX_STATE.Minimized &&
+                    !this.isForceTop(box) &&
+                    box.zIndex > (newTopBox?.zIndex ?? 0)
+                ) {
                     newTopBox = box;
                 }
                 box.setBoxStatus(boxStatus, skipUpdate);
             }
         });
         this.effectBoxStatusChange();
-        console.log("effectBoxesStatusTimerFunc===>newTopBox", newTopBox, curTopBox);
         if (newTopBox && curTopBox !== newTopBox) {
             this.topBox$.setValue(newTopBox);
         }
         if (!newTopBox && curTopBox) {
             this.topBox$.setValue(undefined);
-            // this.blurBox(curTopBox, skipUpdate);
         }
     }
 
     public async effectBoxesStatusChange(skipUpdate = false): Promise<void> {
         if (!this.useBoxesStatus) {
-            if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
+            if (
+                this.effectBoxesStatusTimer &&
+                this.effectBoxesStatusTimer.timer
+            ) {
                 clearTimeout(this.effectBoxesStatusTimer.timer);
                 if (this.effectBoxesStatusTimer.resolve) {
-                    this.effectBoxesStatusTimer.resolve(!!this.effectBoxesStatusTimer?.skipUpdate);
+                    this.effectBoxesStatusTimer.resolve(
+                        !!this.effectBoxesStatusTimer?.skipUpdate
+                    );
                 }
             }
-            this.effectBoxesStatusTimer=undefined;
+            this.effectBoxesStatusTimer = undefined;
             return;
         }
         if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.timer) {
             if (this.effectBoxesStatusTimer.skipUpdate !== skipUpdate) {
                 clearTimeout(this.effectBoxesStatusTimer.timer);
                 if (this.effectBoxesStatusTimer.resolve) {
-                    console.log("effectBoxStatusTimerFunc===>1111", skipUpdate);
-                    this.effectBoxesStatusTimer.resolve(!!this.effectBoxesStatusTimer?.skipUpdate);
+                    this.effectBoxesStatusTimer.resolve(
+                        !!this.effectBoxesStatusTimer?.skipUpdate
+                    );
                 }
                 this.effectBoxesStatusTimer.skipUpdate = skipUpdate;
-                console.log("effectBoxStatusTimerFunc===>2222", skipUpdate);
             } else {
                 return;
             }
@@ -651,25 +752,27 @@ export class TeleBoxManager {
             } as {
                 skipUpdate: boolean;
                 timer: number | undefined;
-            }
+            };
         }
         if (this.effectBoxesStatusTimer) {
-            const _skipUpdate = await new Promise<boolean>((resolve)=>{
+            const _skipUpdate = await new Promise<boolean>((resolve) => {
                 this.effectBoxesStatusTimer!.resolve = resolve;
-                this.effectBoxesStatusTimer!.timer = setTimeout(()=>{
-                    if (this.effectBoxesStatusTimer && this.effectBoxesStatusTimer.resolve) {
-                        console.log("effectBoxStatusTimerFunc===>000", skipUpdate, {id:this.topBox$.value?.id, zIndex:this.topBox$.value?.zIndex}, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex})));
-                        this.effectBoxesStatusTimer.resolve(this.effectBoxesStatusTimer!.skipUpdate);
+                this.effectBoxesStatusTimer!.timer = setTimeout(() => {
+                    if (
+                        this.effectBoxesStatusTimer &&
+                        this.effectBoxesStatusTimer.resolve
+                    ) {
+                        this.effectBoxesStatusTimer.resolve(
+                            this.effectBoxesStatusTimer!.skipUpdate
+                        );
                     }
                 }, 100) as unknown as number;
-            })
-            console.log("effectBoxStatusTimerFunc===>000==>00", skipUpdate, {id:this.topBox$.value?.id, zIndex:this.topBox$.value?.zIndex}, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex})));
-            this.effectBoxesStatusTimerFunc(_skipUpdate)
+            });
+            this.effectBoxesStatusTimerFunc(_skipUpdate);
             this.effectBoxesStatusTimer = undefined;
-            console.log("effectBoxStatusTimerFunc===>000==>11", skipUpdate, {id:this.topBox$.value?.id, zIndex:this.topBox$.value?.zIndex}, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex})));
         }
     }
-    
+
     public hasBoxesStatus(): boolean {
         if (!this.useBoxesStatus) {
             return false;
@@ -681,14 +784,19 @@ export class TeleBoxManager {
         if (!this.useBoxesStatus) {
             return false;
         }
-        return this.boxes.some((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized);
+        return this.boxes.some(
+            (box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized
+        );
     }
 
     public getMinimizedBoxesStatus(): Map<string, TELE_BOX_STATE.Minimized> {
         const minimizedBoxes = new Map<string, TELE_BOX_STATE.Minimized>();
         this.boxesStatus$.forEach((boxStatus, boxId) => {
             if (boxStatus === TELE_BOX_STATE.Minimized) {
-                minimizedBoxes.set(boxId, boxStatus as TELE_BOX_STATE.Minimized);
+                minimizedBoxes.set(
+                    boxId,
+                    boxStatus as TELE_BOX_STATE.Minimized
+                );
             }
         });
         return minimizedBoxes;
@@ -708,7 +816,10 @@ export class TeleBoxManager {
         const maximizedBoxes = new Map<string, TELE_BOX_STATE.Maximized>();
         this.boxesStatus$.forEach((boxStatus, boxId) => {
             if (boxStatus === TELE_BOX_STATE.Maximized) {
-                maximizedBoxes.set(boxId, boxStatus as TELE_BOX_STATE.Maximized);
+                maximizedBoxes.set(
+                    boxId,
+                    boxStatus as TELE_BOX_STATE.Maximized
+                );
             }
         });
         return maximizedBoxes;
@@ -724,47 +835,76 @@ export class TeleBoxManager {
         return normalBoxes;
     }
 
-    public getLastNotMinimizedBoxStatus(boxId: string): NotMinimizedBoxState | undefined {
+    public getLastNotMinimizedBoxStatus(
+        boxId: string
+    ): NotMinimizedBoxState | undefined {
         return this.lastNotMinimizedBoxesStatus$.get(boxId);
     }
 
-    public setLastNotMinimizedBoxStatus(boxId: string, lastNotMinimizedBoxStatus?: NotMinimizedBoxState, skipUpdate = false): void {
+    public setLastNotMinimizedBoxStatus(
+        boxId: string,
+        lastNotMinimizedBoxStatus?: NotMinimizedBoxState,
+        skipUpdate = false
+    ): void {
         if (lastNotMinimizedBoxStatus) {
-            this.lastNotMinimizedBoxesStatus$.set(boxId, lastNotMinimizedBoxStatus);
+            this.lastNotMinimizedBoxesStatus$.set(
+                boxId,
+                lastNotMinimizedBoxStatus
+            );
         } else {
             this.lastNotMinimizedBoxesStatus$.delete(boxId);
         }
         if (!skipUpdate) {
-            this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, { id: boxId, boxStatus:lastNotMinimizedBoxStatus});
+            this.events.emit(TELE_BOX_MANAGER_EVENT.LastNotMinimizedBoxStatus, {
+                id: boxId,
+                boxStatus: lastNotMinimizedBoxStatus,
+            });
         }
     }
 
-    public setLastNotMinimizedBoxesStatus(lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>, skipUpdate = false): void {
+    public setLastNotMinimizedBoxesStatus(
+        lastNotMinimizedBoxesStatus: Map<string, NotMinimizedBoxState>,
+        skipUpdate = false
+    ): void {
         this.lastNotMinimizedBoxesStatus$ = lastNotMinimizedBoxesStatus;
         this.effectLastNotMinimizedBoxStatusChange(skipUpdate);
     }
 
-    private async effectLastNotMinimizedBoxStatusChange(skipUpdate = false): Promise<void> {
+    protected async effectLastNotMinimizedBoxStatusChange(
+        skipUpdate = false
+    ): Promise<void> {
         if (!this.useBoxesStatus) {
-            if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
+            if (
+                this.effectLastNotMinimizedBoxStatusTimer &&
+                this.effectLastNotMinimizedBoxStatusTimer.timer
+            ) {
                 clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
                 if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-                    this.effectLastNotMinimizedBoxStatusTimer.resolve(!!this.effectLastNotMinimizedBoxStatusTimer?.skipUpdate);
+                    this.effectLastNotMinimizedBoxStatusTimer.resolve(
+                        !!this.effectLastNotMinimizedBoxStatusTimer?.skipUpdate
+                    );
                 }
             }
-            this.effectLastNotMinimizedBoxStatusTimer=undefined;
+            this.effectLastNotMinimizedBoxStatusTimer = undefined;
             return;
         }
-        if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.timer) {
+        if (
+            this.effectLastNotMinimizedBoxStatusTimer &&
+            this.effectLastNotMinimizedBoxStatusTimer.timer
+        ) {
             clearTimeout(this.effectLastNotMinimizedBoxStatusTimer.timer);
-            if (this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !== skipUpdate) {
+            if (
+                this.effectLastNotMinimizedBoxStatusTimer.skipUpdate !==
+                skipUpdate
+            ) {
                 // this.effectLastNotMinimizedBoxStatusFunc(this.effectLastNotMinimizedBoxStatusTimer.skipUpdate)
                 if (this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-                    console.log("effectLastNotMinimizedBoxStatusFunc===>1111", skipUpdate);
-                    this.effectLastNotMinimizedBoxStatusTimer.resolve(!!this.effectLastNotMinimizedBoxStatusTimer?.skipUpdate);
+                    this.effectLastNotMinimizedBoxStatusTimer.resolve(
+                        !!this.effectLastNotMinimizedBoxStatusTimer?.skipUpdate
+                    );
                 }
-                this.effectLastNotMinimizedBoxStatusTimer.skipUpdate = skipUpdate;
-                console.log("effectLastNotMinimizedBoxStatusFunc===>2222", skipUpdate);
+                this.effectLastNotMinimizedBoxStatusTimer.skipUpdate =
+                    skipUpdate;
             } else {
                 return;
             }
@@ -777,58 +917,58 @@ export class TeleBoxManager {
             } as {
                 skipUpdate: boolean;
                 timer: number | undefined;
-            }
+            };
         }
         if (this.effectLastNotMinimizedBoxStatusTimer) {
-            const _skipUpdate = await new Promise<boolean>((resolve)=>{
+            const _skipUpdate = await new Promise<boolean>((resolve) => {
                 this.effectLastNotMinimizedBoxStatusTimer!.resolve = resolve;
-                this.effectLastNotMinimizedBoxStatusTimer!.timer = setTimeout(()=>{
-                    if (this.effectLastNotMinimizedBoxStatusTimer && this.effectLastNotMinimizedBoxStatusTimer.resolve) {
-                        console.log("effectLastNotMinimizedBoxStatusTimer===>000", skipUpdate);
-                        this.effectLastNotMinimizedBoxStatusTimer.resolve(this.effectLastNotMinimizedBoxStatusTimer!.skipUpdate);
-                    }
-                }, 100) as unknown as number;
-            })
-            console.log("effectLastNotMinimizedBoxStatusFunc===>000==>00", skipUpdate, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex, lastNotMinimizedBoxStatus:b._lastNotMinimizedBoxStatus$.value})));
-            this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate)
+                this.effectLastNotMinimizedBoxStatusTimer!.timer = setTimeout(
+                    () => {
+                        if (
+                            this.effectLastNotMinimizedBoxStatusTimer &&
+                            this.effectLastNotMinimizedBoxStatusTimer.resolve
+                        ) {
+                            this.effectLastNotMinimizedBoxStatusTimer.resolve(
+                                this.effectLastNotMinimizedBoxStatusTimer!
+                                    .skipUpdate
+                            );
+                        }
+                    },
+                    100
+                ) as unknown as number;
+            });
+            this.effectLastNotMinimizedBoxStatusFunc(_skipUpdate);
             this.effectLastNotMinimizedBoxStatusTimer = undefined;
-            console.log("effectLastNotMinimizedBoxStatusFunc===>000==>11", skipUpdate, this.boxes$.value.map((b)=>({id:b.id,focus:b.focus, boxStatus:b.boxStatus,zIndex:b.zIndex, lastNotMinimizedBoxStatus:b._lastNotMinimizedBoxStatus$.value})));
         }
     }
 
-    private effectLastNotMinimizedBoxStatusFunc(skipUpdate = false){
+    protected effectLastNotMinimizedBoxStatusFunc(skipUpdate = false) {
         if (!this.useBoxesStatus) {
             return;
         }
-        console.log("effectLastNotMinimizedBoxStatusFunc===>end", skipUpdate);
         this.boxes.forEach((box) => {
             const boxStatus = this.lastNotMinimizedBoxesStatus$.get(box.id);
-            if(boxStatus){
+            if (boxStatus) {
                 box.setLastNotMinimizedBoxStatus(boxStatus, skipUpdate);
             }
         });
     }
 
-    private getUnabledBoxesStatusZIndex(): number {
+    protected getUnabledBoxesStatusZIndex(): number {
         return this.topBox ? this.topBox.zIndex : 99;
     }
 
-    // private getTopBoxZIndex(): number {
-    //     if (!this.useBoxesStatus) {
-    //         return this.getUnabledBoxesStatusZIndex();
-    //     }
-    //     return [...this.boxes].filter((box) => box.boxStatus !== TELE_BOX_STATE.Minimized).reduce((maxZIndex, box) => {
-    //         return Math.max(maxZIndex, box.zIndex);
-    //     }, 100);
-    // }
-
     /** Maximized box zIndex range: 100-299 */
     public getMaxMaximizedBoxZIndex(): number {
         if (!this.useBoxesStatus) {
             return this.getUnabledBoxesStatusZIndex();
         }
         return this.boxes.reduce((maxZIndex, box) => {
-            if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Maximized) {
+            if (
+                box.boxStatus &&
+                box.boxStatus === TELE_BOX_STATE.Maximized &&
+                !this.isForceTop(box)
+            ) {
                 return Math.max(maxZIndex, box.zIndex);
             }
             return maxZIndex;
@@ -841,20 +981,45 @@ export class TeleBoxManager {
             return this.getUnabledBoxesStatusZIndex();
         }
         return this.boxes.reduce((maxZIndex, box) => {
-            if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Normal) {
+            if (
+                box.boxStatus &&
+                box.boxStatus === TELE_BOX_STATE.Normal &&
+                !this.isForceTop(box)
+            ) {
                 return Math.max(maxZIndex, box.zIndex);
             }
             return maxZIndex;
         }, 299);
     }
 
+    public getMaxForceTopBoxZIndex(): number {
+        if (!this.useBoxesStatus) {
+            return this.getUnabledBoxesStatusZIndex();
+        }
+        return this.boxes.reduce((maxZIndex, box) => {
+            if (box.boxStatus && this.isForceTop(box)) {
+                return Math.max(maxZIndex, box.zIndex);
+            }
+            return maxZIndex;
+        }, 699);
+    }
+
+    public isForceNormal(box: TeleBox): boolean {
+        return box._forceNormal$.value;
+    }
+
+    public isForceTop(box: TeleBox): boolean {
+        return box._forceTop$.value;
+    }
+
     public create(
         config: TeleBoxManagerCreateConfig = {},
         smartPosition = true
     ): ReadonlyTeleBox {
-        console.log("create===>", config, this.topBox?.zIndex);
         const box = new TeleBox({
-            zIndex: this.getMaxNormalBoxZIndex() + 1,
+            zIndex: config.forceTop
+                ? this.getMaxForceTopBoxZIndex() + 1
+                : this.getMaxNormalBoxZIndex() + 1,
             ...(smartPosition ? this.smartPosition(config) : config),
             darkMode: this.darkMode,
             prefersColorScheme: this.prefersColorScheme,
@@ -864,6 +1029,7 @@ export class TeleBoxManager {
             namespace: this.namespace,
             containerRect: this.containerRect,
             readonly: this.readonly,
+            forceMaximized: this.forceMaximized,
             collectorRect: this.collectorRect,
         });
 
@@ -872,10 +1038,15 @@ export class TeleBoxManager {
         this.boxes$.setValue([...this.boxes, box]);
 
         if (box.boxStatus && this.useBoxesStatus) {
-            this.setBox(box, {
-                status: box.boxStatus,
-                lastNotMinimizedBoxStatus: box._lastNotMinimizedBoxStatus$.value
-            }, true);
+            this.setBox(
+                box,
+                {
+                    status: box.boxStatus,
+                    lastNotMinimizedBoxStatus:
+                        box._lastNotMinimizedBoxStatus$.value,
+                },
+                true
+            );
         }
 
         if (box.focus) {
@@ -887,42 +1058,68 @@ export class TeleBoxManager {
 
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Maximize, () => {
             if (this.useBoxesStatus && box.boxStatus) {
+                if (box._forceNormal$.value) {
+                    return;
+                }
                 if (box.boxStatus === TELE_BOX_STATE.Maximized) {
-                    this.setBox(box.id, {
-                        status: TELE_BOX_STATE.Normal,
-                        zIndex: this.getMaxNormalBoxZIndex() + 1
-                    }, false);
+                    this.setBox(
+                        box.id,
+                        {
+                            status: TELE_BOX_STATE.Normal,
+                            zIndex: this.getMaxNormalBoxZIndex() + 1,
+                        },
+                        false
+                    );
                 } else {
                     // 所有normal box都最大化
-                    [...this.boxes].filter((box) => box.boxStatus === TELE_BOX_STATE.Normal).sort((a, b) => a.zIndex - b.zIndex).forEach((box) => {
-                        if (box.boxStatus === TELE_BOX_STATE.Normal) {
-                            console.log("maximized===>", box.id);
-                            this.setBox(box.id, {
-                                status: TELE_BOX_STATE.Maximized,
-                                zIndex: this.getMaxMaximizedBoxZIndex() + 1
-                            }, false);
-                        }
-                    });
+                    [...this.boxes]
+                        .filter(
+                            (box) =>
+                                box.boxStatus === TELE_BOX_STATE.Normal &&
+                                !this.isForceNormal(box)
+                        )
+                        .sort((a, b) => a.zIndex - b.zIndex)
+                        .forEach((box) => {
+                            if (box.boxStatus === TELE_BOX_STATE.Normal) {
+                                this.setBox(
+                                    box.id,
+                                    {
+                                        status: TELE_BOX_STATE.Maximized,
+                                        zIndex:
+                                            this.getMaxMaximizedBoxZIndex() + 1,
+                                    },
+                                    false
+                                );
+                            }
+                        });
                     this.makeMaximizedTopBoxFocus();
                 }
             } else {
-                this.setMaximized(!this.maximized);
+                if (!(this.forceMaximized && this.maximized)) {
+                    this.setMaximized(!this.maximized);
+                }
             }
-
         });
         box._delegateEvents.on(TELE_BOX_DELEGATE_EVENT.Minimize, () => {
             if (box.boxStatus && this.useBoxesStatus) {
-                if(box.focus) {
+                if (box._forceNormal$.value) {
+                    return;
+                }
+                if (box.focus) {
                     this.blurBox(box);
                 }
-                this.setBox(box, {
-                    status: TELE_BOX_STATE.Minimized,
-                    zIndex: -1
-                }, false, ()=>{
-                    this.focusTopBox();
-                });
-
-            } else{
+                this.setBox(
+                    box,
+                    {
+                        status: TELE_BOX_STATE.Minimized,
+                        zIndex: -1,
+                    },
+                    false,
+                    () => {
+                        this.focusTopBox();
+                    }
+                );
+            } else {
                 this.setMinimized(true);
             }
         });
@@ -960,10 +1157,15 @@ export class TeleBoxManager {
         });
         box._zIndex$.reaction((_, __, skipUpdate) => {
             if (this.boxes.length > 0) {
-                console.log("topBox===>_zIndex", this.boxes.map((box) => ({id: box.id, zIndex: box.zIndex, boxStatus: box.boxStatus})));
                 let currentTopBox: TeleBox | undefined = undefined;
                 const topBox = this.boxes.reduce((topBox, box) => {
-                    if (box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized) {
+                    if (this.isForceTop(box)) {
+                        return topBox;
+                    }
+                    if (
+                        box.boxStatus &&
+                        box.boxStatus === TELE_BOX_STATE.Minimized
+                    ) {
                         return topBox;
                     }
                     if (!topBox) {
@@ -971,8 +1173,7 @@ export class TeleBoxManager {
                         return topBox;
                     }
                     return topBox.zIndex > box.zIndex ? topBox : box;
-                }, currentTopBox as (TeleBox | undefined));
-                console.log("topBox===>_zIndex===>end", topBox?.id);
+                }, currentTopBox as TeleBox | undefined);
                 this.topBox$.setValue(topBox);
             }
             if (!skipUpdate) {
@@ -1018,14 +1219,19 @@ export class TeleBoxManager {
         });
     }
 
-    public setBox(boxOrID: string | TeleBox, options: {
-        status?: TeleBoxState;
-        lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
-        zIndex?: number;
-    }, skipUpdate = false, effectFunc?: () => void){
-        const box = this.getBox(boxOrID)
+    public setBox(
+        boxOrID: string | TeleBox,
+        options: {
+            status?: TeleBoxState;
+            lastNotMinimizedBoxStatus?: NotMinimizedBoxState;
+            zIndex?: number;
+        },
+        skipUpdate = false,
+        effectFunc?: () => void
+    ) {
+        const box = this.getBox(boxOrID);
         if (box) {
-            const {status, zIndex, lastNotMinimizedBoxStatus} = options;
+            const { status, zIndex, lastNotMinimizedBoxStatus } = options;
             if (status) {
                 this.setBoxStatus(box.id, status, skipUpdate);
                 box.setBoxStatus(status, skipUpdate);
@@ -1035,8 +1241,15 @@ export class TeleBoxManager {
                 box.setZIndex(zIndex, skipUpdate);
             }
             if (lastNotMinimizedBoxStatus) {
-                this.setLastNotMinimizedBoxStatus(box.id, lastNotMinimizedBoxStatus, skipUpdate);
-                box.setLastNotMinimizedBoxStatus(lastNotMinimizedBoxStatus, skipUpdate);
+                this.setLastNotMinimizedBoxStatus(
+                    box.id,
+                    lastNotMinimizedBoxStatus,
+                    skipUpdate
+                );
+                box.setLastNotMinimizedBoxStatus(
+                    lastNotMinimizedBoxStatus,
+                    skipUpdate
+                );
             }
             effectFunc && effectFunc();
         }
@@ -1056,12 +1269,16 @@ export class TeleBoxManager {
             deletedBoxes.forEach((box) => box.destroy());
             if (box && this.useBoxesStatus) {
                 this.setBoxStatus(box.id, undefined, skipUpdate);
-                this.setLastNotMinimizedBoxStatus(box.id, undefined, skipUpdate);
+                this.setLastNotMinimizedBoxStatus(
+                    box.id,
+                    undefined,
+                    skipUpdate
+                );
                 this.effectBoxStatusChange();
                 effectFunc && effectFunc();
             }
             if (!skipUpdate) {
-                if (this.boxes.length <= 0) {
+                if (this.boxes.length <= 0 && !this.forceMaximized) {
                     this.setMaximized(false);
                     this.setMinimized(false);
                 }
@@ -1086,7 +1303,7 @@ export class TeleBoxManager {
         this.boxesStatus$.clear();
         this.lastNotMinimizedBoxesStatus$.clear();
         if (!skipUpdate) {
-            if (this.boxes.length <= 0) {
+            if (this.boxes.length <= 0 && !this.forceMaximized) {
                 this.setMaximized(false);
                 this.setMinimized(false);
             }
@@ -1134,7 +1351,10 @@ export class TeleBoxManager {
             });
             if (!this.useBoxesStatus) {
                 this.maxTitleBar.focusBox(targetBox);
-            } else if (this.useBoxesStatus && this.maxTitleBar.hasMaximizedBoxInStatus()) {
+            } else if (
+                this.useBoxesStatus &&
+                this.maxTitleBar.hasMaximizedBoxInStatus()
+            ) {
                 this.makeMaximizedTopBoxFocus();
             }
         }
@@ -1241,11 +1461,24 @@ export class TeleBoxManager {
         if (config.footer != null) {
             box.mountFooter(config.footer);
         }
-        if (this.useBoxesStatus && (config.boxStatus || config.lastNotMinimizedBoxStatus)) {
-            this.setBox(box, {
-                status: config.boxStatus,
-                lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus
-            }, skipUpdate);
+        if (
+            this.useBoxesStatus &&
+            (config.boxStatus || config.lastNotMinimizedBoxStatus)
+        ) {
+            this.setBox(
+                box,
+                {
+                    status: config.boxStatus,
+                    lastNotMinimizedBoxStatus: config.lastNotMinimizedBoxStatus,
+                },
+                skipUpdate
+            );
+        }
+        if (config.forceTop != null) {
+            box.setForceTop(config.forceTop, skipUpdate);
+        }
+        if (config.forceNormal != null) {
+            box.setForceNormal(config.forceNormal, skipUpdate);
         }
     }
 
@@ -1255,7 +1488,19 @@ export class TeleBoxManager {
 
         if (x == null) {
             let vx = 20;
-            if (this.topBox) {
+            if (config.forceTop) {
+                const forceTopBox = this.maxForceTopBox || this.topBox;
+                if (forceTopBox) {
+                    vx = forceTopBox.intrinsicX * this.containerRect.width + 20;
+                    if (
+                        vx >
+                        this.containerRect.width -
+                            width * this.containerRect.width
+                    ) {
+                        vx = 20;
+                    }
+                }
+            } else if (this.topBox) {
                 vx = this.topBox.intrinsicX * this.containerRect.width + 20;
                 if (
                     vx >
@@ -1265,17 +1510,42 @@ export class TeleBoxManager {
                 }
             } else if (this.hasMinimizedBox()) {
                 // 如果都最小化，则获取lastNotMinimizedBoxesStatus中normal box的最大x
-                vx = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxX, box) => {
-                    return Math.max(maxX, box.intrinsicX * this.containerRect.width + 20);
-                }, vx);
+                vx = [...this.boxes]
+                    .filter(
+                        (box) =>
+                            box.boxStatus &&
+                            box.boxStatus === TELE_BOX_STATE.Minimized &&
+                            box.lastNotMinimizedBoxStatus &&
+                            box.lastNotMinimizedBoxStatus ===
+                                TELE_BOX_STATE.Normal
+                    )
+                    .reduce((maxX, box) => {
+                        return Math.max(
+                            maxX,
+                            box.intrinsicX * this.containerRect.width + 20
+                        );
+                    }, vx);
             }
             x = vx / this.containerRect.width;
         }
 
         if (y == null) {
             let vy = 20;
-
-            if (this.topBox) {
+            if (config.forceTop) {
+                const forceTopBox = this.maxForceTopBox || this.topBox;
+                if (forceTopBox) {
+                    vy =
+                        forceTopBox.intrinsicY * this.containerRect.height + 20;
+
+                    if (
+                        vy >
+                        this.containerRect.height -
+                            height * this.containerRect.height
+                    ) {
+                        vy = 20;
+                    }
+                }
+            } else if (this.topBox) {
                 vy = this.topBox.intrinsicY * this.containerRect.height + 20;
 
                 if (
@@ -1287,9 +1557,21 @@ export class TeleBoxManager {
                 }
             } else if (this.hasMinimizedBox()) {
                 // 如果都最小化，则获取lastNotMinimizedBoxesStatus中normal box的最大y
-                vy = [...this.boxes].filter((box) => box.boxStatus && box.boxStatus === TELE_BOX_STATE.Minimized && box.lastNotMinimizedBoxStatus && box.lastNotMinimizedBoxStatus === TELE_BOX_STATE.Normal).reduce((maxY, box) => {
-                    return Math.max(maxY, box.intrinsicY * this.containerRect.height + 20);
-                }, vy);
+                vy = [...this.boxes]
+                    .filter(
+                        (box) =>
+                            box.boxStatus &&
+                            box.boxStatus === TELE_BOX_STATE.Minimized &&
+                            box.lastNotMinimizedBoxStatus &&
+                            box.lastNotMinimizedBoxStatus ===
+                                TELE_BOX_STATE.Normal
+                    )
+                    .reduce((maxY, box) => {
+                        return Math.max(
+                            maxY,
+                            box.intrinsicY * this.containerRect.height + 20
+                        );
+                    }, vy);
             }
 
             y = vy / this.containerRect.height;
@@ -1308,18 +1590,22 @@ export class TeleBoxManager {
         }
     }
 
-    private getMaximizedTopBox(): MaxTitleBarTeleBox | undefined {
+    protected getMaximizedTopBox(): MaxTitleBarTeleBox | undefined {
         if (!this.useBoxesStatus) {
             return undefined;
         }
         let maximizedBox: MaxTitleBarTeleBox | undefined;
         if (this.maxTitleBar.hasMaximizedBoxInStatus()) {
-            maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce((topBox, currentBox) => {
-                if (!topBox) {
-                    return currentBox;
+            maximizedBox = this.maxTitleBar.MaximizedBoxes.reduce(
+                (topBox, currentBox) => {
+                    if (!topBox) {
+                        return currentBox;
+                    }
+                    return topBox.zIndex > currentBox.zIndex
+                        ? topBox
+                        : currentBox;
                 }
-                return topBox.zIndex > currentBox.zIndex ? topBox : currentBox;
-            }, );
+            );
         }
         return maximizedBox;
     }
@@ -1328,10 +1614,9 @@ export class TeleBoxManager {
         if (!this.useBoxesStatus) {
             return;
         }
-        const maximizedBox: MaxTitleBarTeleBox | undefined = this.getMaximizedTopBox();
-        console.log("makeMaximizedTopBoxFocus===>", maximizedBox?.id);
+        const maximizedBox: MaxTitleBarTeleBox | undefined =
+            this.getMaximizedTopBox();
         this.maxTitleBar.focusBox(maximizedBox);
-        console.log("makeMaximizedTopBoxFocus===>end", maximizedBox?.id);
     }
 
     protected getBoxIndex(boxOrID: TeleBox | string): number {
@@ -1346,15 +1631,15 @@ export class TeleBoxManager {
             : boxOrID;
     }
 
-    public createMinimizedAppMenu():AppMenu | undefined {
+    public createMinimizedAppMenu(): AppMenu | undefined {
         if (this.collector?.$appMenuContainer) {
             return new AppMenu({
                 manager: this,
                 container: this.collector?.$appMenuContainer,
-                theme: this.prefersColorScheme ? 'dark' : 'light',
+                theme: this.prefersColorScheme ? "dark" : "light",
                 getBoxesStatus: () => {
                     return this.boxesStatus$;
-                }
+                },
             });
         }
         return;