feat(abc:reuse-tab): support status of the last browser closed (#1493)

Author: cipchk

packages/abc/reuse-tab/index.en-US.md

@@ -224,6 +224,7 @@ Turning on `keepingScroll` will restore the previous scrollbar position after re
 | `[routeParamMatchMode]` | Match the pattern when routing parameters are included, for example:`/view/:id`<br> - `strict` Strict mode `/view/1`, `/view/2` Different pages<br> - `loose` Loose mode `/view/1`, `/view/2` Same page and only one tab of component | `strict,loose` | `strict` |
 | `[disabled]` | Whether to disabled | `boolean` | `false` |
 | `[titleRender]` | Custom rendering of the title | `TemplateRef<{ $implicit: ReuseItem }>` | - |
+| `[storageState]` | Whether to store the state, keep the last browser state | `boolean` | `false` |
 | `(close)` | Close callback event | `EventEmitter` | - |
 | `(change)` | Callback when switching | `EventEmitter` | - |
 

packages/abc/reuse-tab/index.zh-CN.md

@@ -226,6 +226,7 @@ export class DemoComponent implements OnReuseInit, OnReuseDestroy {
 | `[routeParamMatchMode]` | 包含路由参数时匹配模式，例如：`/view/:id`<br> - `strict` 严格模式 `/view/1`、`/view/2` 不同页<br> - `loose` 宽松模式 `/view/1`、`/view/2` 相同页且只呈现一个标签 | `strict,loose` | `strict` |
 | `[disabled]` | 是否禁用 | `boolean` | `false` |
 | `[titleRender]` | 自定义标题渲染 | `TemplateRef<{ $implicit: ReuseItem }>` | - |
+| `[storageState]` | 是否存储状态，保持最后一次浏览器的状态 | `boolean` | `false` |
 | `(close)` | 关闭回调 | `EventEmitter` | - |
 | `(change)` | 切换时回调，接收的参数至少包含：`active`、`list` 两个参数 | `EventEmitter` | - |
 

packages/abc/reuse-tab/public_api.ts

@@ -8,3 +8,4 @@ export { ReuseTabStrategy } from './reuse-tab.strategy';
 export { ReuseTabModule } from './reuse-tab.module';
 export * from './reuse-tab.interfaces';
 export * from './lifecycle_hooks';
+export * from './reuse-tab.state';

packages/abc/reuse-tab/reuse-tab.component.spec.ts

@@ -19,6 +19,7 @@ import {
 } from './reuse-tab.interfaces';
 import { ReuseTabModule } from './reuse-tab.module';
 import { ReuseTabService } from './reuse-tab.service';
+import { REUSE_TAB_STORAGE_STATE } from './reuse-tab.state';
 import { ReuseTabStrategy } from './reuse-tab.strategy';
 
 let i18nResult = 'zh';
@@ -644,6 +645,16 @@ describe('abc: reuse-tab', () => {
         }));
       });
     });
+
+    it('#storageState', fakeAsync(() => {
+      layoutComp.storageState = true;
+      page.cd();
+      const stateSrv = TestBed.inject(REUSE_TAB_STORAGE_STATE);
+      spyOn(stateSrv, 'update');
+      page.to('#b');
+      expect(stateSrv.update).toHaveBeenCalled();
+      page.end();
+    }));
   });
 
   describe('[refresh]', () => {
@@ -846,6 +857,7 @@ class AppComponent {}
       [routeParamMatchMode]="routeParamMatchMode"
       [disabled]="disabled"
       [titleRender]="titleRender"
+      [storageState]="storageState"
       (change)="change($event)"
       (close)="close($event)"
     >
@@ -871,6 +883,7 @@ class LayoutComponent {
   routeParamMatchMode: ReuseTabRouteParamMatchMode = 'strict';
   disabled = false;
   titleRender?: TemplateRef<{ $implicit: ReuseItem }>;
+  storageState = false;
   change(): void {}
   close(): void {}
 }

packages/abc/reuse-tab/reuse-tab.component.ts

@@ -40,6 +40,7 @@ import {
   ReuseTitle
 } from './reuse-tab.interfaces';
 import { ReuseTabService } from './reuse-tab.service';
+import { ReuseTabStorageState, REUSE_TAB_STORAGE_KEY, REUSE_TAB_STORAGE_STATE } from './reuse-tab.state';
 
 @Component({
   selector: 'reuse-tab, [reuse-tab]',
@@ -64,6 +65,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
   static ngAcceptInputType_allowClose: BooleanInput;
   static ngAcceptInputType_keepingScroll: BooleanInput;
   static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_storageState: BooleanInput;
 
   @ViewChild('tabset') private tabset!: NzTabSetComponent;
   private destroy$ = new Subject<void>();
@@ -83,6 +85,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
   @Input() excludes?: RegExp[];
   @Input() @InputBoolean() allowClose = true;
   @Input() @InputBoolean() keepingScroll = false;
+  @Input() @InputBoolean() storageState = false;
   @Input()
   set keepingScrollContainer(value: string | Element) {
     this._keepingScrollContainer = typeof value === 'string' ? this.doc.querySelector(value) : value;
@@ -108,7 +111,9 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
     @Optional() @Inject(ALAIN_I18N_TOKEN) private i18nSrv: AlainI18NService,
     @Inject(DOCUMENT) private doc: NzSafeAny,
     private platform: Platform,
-    @Optional() private directionality: Directionality
+    @Optional() private directionality: Directionality,
+    @Optional() @Inject(REUSE_TAB_STORAGE_KEY) private stateKey: string,
+    @Optional() @Inject(REUSE_TAB_STORAGE_STATE) private stateSrv: ReuseTabStorageState
   ) {}
 
   private genTit(title: ReuseTitle): string {
@@ -139,6 +144,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
           url: item.url,
           title: this.genTit(item.title),
           closable: this.allowClose && item.closable && this.srv.count > 0,
+          position: item.position,
           index,
           active: false,
           last: false
@@ -186,6 +192,12 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
     this.srv.runHook('_onReuseInit', this.pos === item.index ? this.srv.componentRef : item.index, 'refresh');
   }
 
+  private saveState(): void {
+    if (!this.srv.inited || !this.storageState) return;
+
+    this.stateSrv.update(this.stateKey, this.list);
+  }
+
   // #region UI
 
   contextMenuChange(res: ReuseContextCloseEvent): void {
@@ -267,6 +279,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
     this.tabset.nzSelectedIndex = pos;
     this.list = ls;
     this.cdr.detectChanges();
+    this.saveState();
   }
 
   // #endregion
@@ -321,6 +334,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
       this.srv.keepingScroll = this.keepingScroll;
       this.srv.keepingScrollContainer = this._keepingScrollContainer;
     }
+    if (changes.storageState) this.srv.storageState = this.storageState;
 
     this.srv.debug = this.debug;
 

packages/abc/reuse-tab/reuse-tab.interfaces.ts

@@ -54,14 +54,24 @@ export interface ReuseTabCached {
   /** 当前滚动条位置 */
   position?: [number, number] | null;
 
-  _snapshot: ActivatedRouteSnapshot;
+  _snapshot?: ActivatedRouteSnapshot;
 
-  _handle: ReuseComponentHandle;
+  _handle?: ReuseComponentHandle;
 }
 
 export interface ReuseTabNotify {
   /** 事件类型 */
-  active: 'add' | 'override' | 'title' | 'clear' | 'closable' | 'close' | 'closeRight' | 'move' | 'refresh';
+  active:
+    | 'add'
+    | 'override'
+    | 'title'
+    | 'clear'
+    | 'closable'
+    | 'close'
+    | 'closeRight'
+    | 'move'
+    | 'refresh'
+    | 'loadState';
   url?: string;
   title?: ReuseTitle;
   item?: ReuseTabCached;
@@ -76,6 +86,8 @@ export interface ReuseItem {
   index: number;
   active: boolean;
   last: boolean;
+  /** 当前滚动条位置 */
+  position?: [number, number] | null;
 }
 
 export interface ReuseContextEvent {

packages/abc/reuse-tab/reuse-tab.module.ts

@@ -12,13 +12,24 @@ import { ReuseTabContextMenuComponent } from './reuse-tab-context-menu.component
 import { ReuseTabContextComponent } from './reuse-tab-context.component';
 import { ReuseTabContextDirective } from './reuse-tab-context.directive';
 import { ReuseTabComponent } from './reuse-tab.component';
+import { ReuseTabLocalStorageState, REUSE_TAB_STORAGE_KEY, REUSE_TAB_STORAGE_STATE } from './reuse-tab.state';
 
 const COMPONENTS = [ReuseTabComponent];
 const NOEXPORTS = [ReuseTabContextMenuComponent, ReuseTabContextComponent, ReuseTabContextDirective];
 
 @NgModule({
   imports: [CommonModule, RouterModule, DelonLocaleModule, NzMenuModule, NzTabsModule, NzIconModule, OverlayModule],
   declarations: [...COMPONENTS, ...NOEXPORTS],
+  providers: [
+    {
+      provide: REUSE_TAB_STORAGE_KEY,
+      useValue: '_reuse-tab-state'
+    },
+    {
+      provide: REUSE_TAB_STORAGE_STATE,
+      useFactory: () => new ReuseTabLocalStorageState()
+    }
+  ],
   exports: COMPONENTS
 })
 export class ReuseTabModule {}

packages/abc/reuse-tab/reuse-tab.service.spec.ts

@@ -5,8 +5,9 @@ import { filter } from 'rxjs';
 import { MenuService } from '@delon/theme';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
-import { ReuseTabMatchMode, ReuseTitle } from './reuse-tab.interfaces';
+import { ReuseItem, ReuseTabMatchMode, ReuseTitle } from './reuse-tab.interfaces';
 import { ReuseTabService } from './reuse-tab.service';
+import { ReuseTabLocalStorageState, REUSE_TAB_STORAGE_KEY, REUSE_TAB_STORAGE_STATE } from './reuse-tab.state';
 import { ReuseTabStrategy } from './reuse-tab.strategy';
 
 class MockMenuService {
@@ -41,6 +42,14 @@ describe('abc: reuse-tab(service)', () => {
           useClass: ReuseTabStrategy,
           deps: [ReuseTabService]
         },
+        {
+          provide: REUSE_TAB_STORAGE_KEY,
+          useValue: '_reuse-tab-state'
+        },
+        {
+          provide: REUSE_TAB_STORAGE_STATE,
+          useFactory: () => new ReuseTabLocalStorageState()
+        },
         { provide: ActivatedRoute, useValue: { snapshot: { url: [] } } },
         { provide: Router, useFactory: () => new MockRouter() }
       ].concat(providers)
@@ -530,4 +539,17 @@ describe('abc: reuse-tab(service)', () => {
       expect(handle.componentRef.instance._onReuseInit).toHaveBeenCalled();
     }));
   });
+
+  it('#storageState', () => {
+    genModule();
+    const stateSrv = TestBed.inject(REUSE_TAB_STORAGE_STATE);
+    spyOn(stateSrv, 'get').and.returnValue([
+      { title: 'ti1', url: '/a' } as ReuseItem,
+      { title: 'ti2', url: '/b' } as ReuseItem,
+      { title: 'ti3', url: '/c' } as ReuseItem
+    ]);
+    srv.storageState = true;
+    srv.init();
+    expect(srv.items.length).toBe(3);
+  });
 });

packages/abc/reuse-tab/reuse-tab.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Injector, OnDestroy } from '@angular/core';
+import { Inject, Injectable, Injector, OnDestroy, Optional } from '@angular/core';
 import {
   ActivatedRoute,
   ActivatedRouteSnapshot,
@@ -24,6 +24,7 @@ import {
   ReuseTabRouteParamMatchMode,
   ReuseTitle
 } from './reuse-tab.interfaces';
+import { ReuseTabStorageState, REUSE_TAB_STORAGE_KEY, REUSE_TAB_STORAGE_STATE } from './reuse-tab.state';
 
 @Injectable({ providedIn: 'root' })
 export class ReuseTabService implements OnDestroy {
@@ -43,6 +44,7 @@ export class ReuseTabService implements OnDestroy {
   mode = ReuseTabMatchMode.Menu;
   /** 排除规则，限 `mode=URL` */
   excludes: RegExp[] = [];
+  storageState = false;
 
   private get snapshot(): ActivatedRouteSnapshot {
     return this.injector.get(ActivatedRoute).snapshot;
@@ -365,11 +367,28 @@ export class ReuseTabService implements OnDestroy {
 
   // #endregion
 
-  constructor(private injector: Injector, private menuService: MenuService) {}
+  constructor(
+    private injector: Injector,
+    private menuService: MenuService,
+    @Optional() @Inject(REUSE_TAB_STORAGE_KEY) private stateKey: string,
+    @Optional() @Inject(REUSE_TAB_STORAGE_STATE) private stateSrv: ReuseTabStorageState
+  ) {}
 
   init(): void {
     this.initScroll();
     this._inited = true;
+    this.loadState();
+  }
+
+  private loadState(): void {
+    if (!this.storageState) return;
+
+    this._cached = this.stateSrv.get(this.stateKey).map(v => ({
+      title: { text: v.title },
+      url: v.url,
+      position: v.position
+    }));
+    this._cachedChange.next({ active: 'loadState' });
   }
 
   private getMenu(url: string): Menu | null | undefined {
@@ -385,7 +404,7 @@ export class ReuseTabService implements OnDestroy {
   ): void {
     if (typeof comp === 'number') {
       const item = this._cached[comp];
-      comp = item._handle.componentRef;
+      comp = item._handle?.componentRef;
     }
     if (comp == null || !comp.instance) {
       return;

packages/abc/reuse-tab/reuse-tab.state.spec.ts

@@ -0,0 +1,45 @@
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+
+import { ReuseItem } from './reuse-tab.interfaces';
+import { ReuseTabLocalStorageState } from './reuse-tab.state';
+
+describe('abc: reuse-tab(state)', () => {
+  const store = new ReuseTabLocalStorageState();
+  const KEY = 'state';
+  const VALUES = [
+    {
+      title: 'tit'
+    } as ReuseItem
+  ];
+
+  beforeEach(() => {
+    let data: { [key: string]: NzSafeAny } = {};
+
+    spyOn(localStorage, 'getItem').and.callFake((key: string): string => {
+      return data[key] || null;
+    });
+    spyOn(localStorage, 'removeItem').and.callFake((key: string): void => {
+      delete data[key];
+    });
+    spyOn(localStorage, 'setItem').and.callFake((key: string, value: string): string => {
+      return (data[key] = value as string);
+    });
+    spyOn(localStorage, 'clear').and.callFake(() => {
+      data = {};
+    });
+  });
+
+  it('should be working', () => {
+    store.get(KEY);
+    expect(store.get(KEY)).not.toBeNull();
+    store.update(KEY, VALUES);
+    const ret = store.get(KEY);
+    expect(ret).not.toBeNull();
+    expect(ret.length).toBe(VALUES.length);
+    store.remove(KEY);
+    expect(store.get(KEY).length).toBe(0);
+    // when set null
+    store.update(KEY, null as NzSafeAny);
+    expect(store.get(KEY).length).toBe(0);
+  });
+});

packages/abc/reuse-tab/reuse-tab.state.ts

@@ -0,0 +1,30 @@
+import { InjectionToken } from '@angular/core';
+
+import type { ReuseItem } from './reuse-tab.interfaces';
+
+export const REUSE_TAB_STORAGE_KEY = new InjectionToken<string>('REUSE_TAB_STORAGE_KEY');
+
+export const REUSE_TAB_STORAGE_STATE = new InjectionToken<ReuseTabStorageState>('REUSE_TAB_STORAGE_STATE');
+
+export interface ReuseTabStorageState {
+  get(key: string): ReuseItem[];
+
+  update(key: string, value: ReuseItem[]): boolean;
+
+  remove(key: string): void;
+}
+
+export class ReuseTabLocalStorageState implements ReuseTabStorageState {
+  get(key: string): ReuseItem[] {
+    return JSON.parse(localStorage.getItem(key) || '[]') || [];
+  }
+
+  update(key: string, value: ReuseItem[]): boolean {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  }
+
+  remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+}