页签

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { CustomReuseStrategy } from './custom-route-reuse-strategy';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -10,6 +11,7 @@ import { HttpInterceptorService } from './services/httpInterceptor.service';//
 import { ShareModule } from './share/share.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NZ_I18N, zh_CN, NzConfig, NZ_CONFIG } from 'ng-zorro-antd';
+import { RouteReuseStrategy } from '@angular/router';
 const ngZorroConfig: NzConfig = {
   // 注意组件名称没有 nz 前缀
   notification: { nzTop: 100 }
@@ -32,6 +34,7 @@ registerLocaleData(zh);
     { provide: NZ_CONFIG, useValue: ngZorroConfig },
     { provide: LocationStrategy, useClass: HashLocationStrategy },
     { provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true },
+    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
   ],
   bootstrap: [AppComponent]
 })

src/app/custom-route-reuse-strategy.ts

@@ -0,0 +1,48 @@
+import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
+
+export class CustomReuseStrategy implements RouteReuseStrategy {
+  private storedHandles = new Map<string, DetachedRouteHandle>();
+
+  shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    return route.data.reuse || false;
+  }
+
+  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+    if (route.data.reuse) {
+      const key = this.getRouteKey(route);
+      this.storedHandles.set(key, handle);
+    }
+  }
+
+  shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    const key = this.getRouteKey(route);
+    // console.log('shouldAttach:', this.storedHandles.has(key))
+    return this.storedHandles.has(key);
+  }
+
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
+    const key = this.getRouteKey(route);
+    return this.storedHandles.get(key) || null;
+  }
+
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    // 精确匹配路由复用
+    return future.routeConfig === curr.routeConfig &&
+           JSON.stringify(future.params) === JSON.stringify(curr.params);
+  }
+
+  private getRouteKey(route: ActivatedRouteSnapshot): string {
+    let str = route.pathFromRoot
+    .filter(v => v.routeConfig)
+    .map(v => v.routeConfig!.path + JSON.stringify(v.params))
+    .join('/');
+    return str.endsWith('/{}') ? str.slice(0, -3) : str;
+  }
+
+  public deleteRouteSnapshot(url: string): void {
+    const key = url.replace(/\//g, '_');
+    if (this.storedHandles.has(key)) {
+      this.storedHandles.delete(key);
+    }
+  }
+}

src/app/route/simple-reuse-strategy.ts

@@ -1,66 +0,0 @@
-// 创建重用策略
-import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';
-
-/**
- * 路由重用策略
- */
-export class SimpleReuseStrategy implements RouteReuseStrategy {
-
-  // 保存路由快照
-  // [key:string] 键为字符串类型
-  // DetachedRouteHandle 值为路由处理器
-  public static snapshots: { [key: string]: DetachedRouteHandle } = {};
-
-  /**
-   * 从缓存中获取快照
-   * @param {ActivatedRouteSnapshot} route
-   * @return {DetachedRouteHandle | null}
-   */
-  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
-    return route.routeConfig ? SimpleReuseStrategy.snapshots[route.routeConfig.path] : null;
-  }
-
-  /**
-   * 是否允许还原
-   * @param {ActivatedRouteSnapshot} route
-   * @return {boolean} true-允许还原
-   */
-  shouldAttach(route: ActivatedRouteSnapshot): any {
-    return route.routeConfig && SimpleReuseStrategy.snapshots[route.routeConfig.path];
-  }
-
-  /**
-   * 确定是否应该分离此路由（及其子树）以便以后重用
-   * @param {ActivatedRouteSnapshot} route
-   * @return {boolean}
-   */
-  shouldDetach(route: ActivatedRouteSnapshot): boolean {
-    // useCache 为自定义数据
-    return route.routeConfig && route.routeConfig.data && route.routeConfig.data.useCache;
-  }
-
-  /**
-   * 进入路由触发, 判断是否为同一路由
-   * @param {ActivatedRouteSnapshot} future
-   * @param {ActivatedRouteSnapshot} curr
-   * @return {boolean}
-   */
-  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
-    // future - 未来的(下一个)路由快照
-    return future.routeConfig === curr.routeConfig;
-  }
-
-  /**
-   * 保存路由
-   * @param {ActivatedRouteSnapshot} route
-   * @param {DetachedRouteHandle | null} handle
-   */
-  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
-    // 通过 Route.path 映射路由快照, 一定要确保它的唯一性
-    // 也可以通过 route.routeConfig.data.uid 或其他可以确定唯一性的数据作为映射key
-    // 作者这里能够确保 path 的唯一性
-    SimpleReuseStrategy.snapshots[route.routeConfig.path] = handle;
-  }
-
-}
-

src/app/views/new-statistics/components/custom-tabs/custom-tabs.component.html

@@ -0,0 +1,14 @@
+<nz-tabset class="tabs" nzType="card" [nzSelectedIndex]="selectedIndex">
+  <nz-tab *ngFor="let tab of tabService.tabs" [nzTitle]="tabTemplate"  (nzClick)="selectTab(tab.path)">
+    <ng-template #tabTemplate>
+      <div (contextmenu)="onRightClick($event, tab)"><span>{{ tab.title }}</span><i *ngIf="tab.closable && tabService.tabs.length > 1" nz-icon nzType="close" class="ant-tabs-close-x" (click)="closeTab(tab.path, $event)"></i></div>
+    </ng-template>
+  </nz-tab>
+</nz-tabset>
+<app-tab-context-menu
+  *ngIf="showContextMenu"
+  [x]="contextMenuPosition.x"
+  [y]="contextMenuPosition.y"
+  [event]="event"
+  (closeOthers)="closeOtherTabs()">
+</app-tab-context-menu>

src/app/views/new-statistics/components/custom-tabs/custom-tabs.component.less

@@ -0,0 +1,7 @@
+:host{
+  .tabs{
+    top: -36px;
+    width: calc(100vw - 183px);
+    user-select: none;
+  }
+}

src/app/views/new-statistics/components/custom-tabs/custom-tabs.component.ts

@@ -0,0 +1,80 @@
+import { ChangeDetectorRef, Component, HostListener, OnInit, Output } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { Tab, TabService } from '../../services/tab.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-custom-tabs',
+  templateUrl: './custom-tabs.component.html',
+  styleUrls: ['./custom-tabs.component.less']
+})
+export class CustomTabsComponent implements OnInit {
+  @Output() selectTabEmit = new EventEmitter();
+  constructor(
+    public tabService: TabService,
+    public router: Router,
+    private cdr: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit() {}
+  get selectedIndex(): number {
+    return this.tabService.tabs.findIndex(t => t.active);
+  }
+
+  closeTab(path: string, event: MouseEvent): void {
+    event.stopPropagation();
+    this.tabService.closeTab(path);
+  }
+
+  selectTab(path: string): void {
+    const [routePath, params] = this.tabService.getFullPath(path);
+    // console.log('params:', params)
+    // console.log('routePath:', routePath)
+    this.selectTabEmit.emit(routePath.split('/').reverse()[0])
+    this.router.navigate([routePath], params).catch(err => {
+      console.error('导航失败:', err);
+      // 处理无效页签
+      this.tabService.closeTab(path);
+    });
+  }
+
+  showContextMenu = false;
+  contextMenuPosition = { x: 0, y: 0 };
+  rightClickedTab;
+  event:MouseEvent;
+  // 右键点击处理
+  onRightClick(event: MouseEvent, tab: Tab): void {
+    this.event = event;
+    event.preventDefault();
+    event.stopPropagation();
+
+    // 无论是否激活，都允许操作
+    this.rightClickedTab = tab; // 存储当前右键页签
+    this.contextMenuPosition = {
+      x: event.clientX + 5,
+      y: event.clientY + 5
+    };
+    this.showContextMenu = true;
+    this.cdr.detectChanges();
+  }
+
+  // 关闭其他页签
+  closeOtherTabs(): void {
+    if (!this.rightClickedTab) return;
+
+    // 关闭其他前强制激活当前右键页签
+    this.tabService.tabs.forEach(t => t.active = false);
+    this.rightClickedTab.active = true;
+
+    this.tabService.closeOtherTabs(this.rightClickedTab);
+    this.selectTabEmit.emit(this.rightClickedTab.path.split('/').reverse()[0])
+
+    this.showContextMenu = false;
+  }
+
+  // 点击其他地方关闭菜单
+  @HostListener('document:click')
+  closeContextMenu(): void {
+    this.showContextMenu = false;
+  }
+}

src/app/views/new-statistics/components/custom-tabs/custom-tabs.module.ts

@@ -0,0 +1,23 @@
+import { TabContextMenuComponent } from './../tab-context-menu/tab-context-menu.component';
+import { CustomTabsComponent } from './custom-tabs.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ShareModule } from 'src/app/share/share.module';
+
+
+@NgModule({
+  declarations: [
+    CustomTabsComponent,
+    TabContextMenuComponent,
+  ],
+  imports: [
+    CommonModule,
+    ShareModule,
+  ],
+  exports: [
+    CustomTabsComponent,
+    TabContextMenuComponent,
+  ]
+})
+export class CustomTabsModule { }

src/app/views/new-statistics/components/tab-context-menu/tab-context-menu.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, OnInit, ViewChild } from '@angular/core';
+import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-tab-context-menu',
+  template: `
+    <div class="context-menu" [ngStyle]="{left: x + 'px', top: y + 'px'}">
+      <nz-dropdown-menu #menu="nzDropdownMenu">
+        <ul nz-menu class="context-menu-list">
+          <li nz-menu-item (click)="closeOthers.emit()">关闭其他</li>
+        </ul>
+      </nz-dropdown-menu>
+    </div>
+  `,
+  styles: [`.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{font-size:12px;line-height:1;width: 120px;}`]
+})
+export class TabContextMenuComponent implements OnInit {
+  @Input() x = 0;
+  @Input() y = 0;
+  @Input() event:MouseEvent;
+  @Output() closeOthers = new EventEmitter<void>();
+  @ViewChild('menu', { static: true}) menu: NzDropdownMenuComponent;
+  constructor(
+    private nzContextMenuService: NzContextMenuService,
+  ){}
+
+  ngOnInit(): void {
+    this.nzContextMenuService.create(this.event, this.menu);
+  }
+}

src/app/views/new-statistics/maintenance-statistics/maintenance-statistics-routing.module.ts

@@ -12,79 +12,118 @@ const routes: Routes = [
         // 故障工单统计
         path: 'incidentStatistics',
         loadChildren: () => import('./incident-statistics/incident-statistics.module').then(m => m.IncidentStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '故障工单统计'
+        }
       },
       {
         // 一级故障现象
         path: 'categoryOneStatistics',
         loadChildren: () => import('./category-one-statistics/category-one-statistics.module').then(m => m.CategoryOneStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '一级故障现象'
+        }
       },
       {
         // 二级故障现象
         path: 'categoryTwoStatistics',
         loadChildren: () => import('./category-two-statistics/category-two-statistics.module').then(m => m.CategoryTwoStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '二级故障现象'
+        }
       },
       {
         // 三级故障现象
         path: 'categoryThreeStatistics',
         loadChildren: () => import('./category-three-statistics/category-three-statistics.module').then(m => m.CategoryThreeStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '三级故障现象'
+        }
       },
       {
         // 处理组统计
         path: 'groupStatistics',
         loadChildren: () => import('./group-statistics/group-statistics.module').then(m => m.GroupStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '处理组统计'
+        }
       },
       {
         // 处理人统计
         path: 'userStatistics',
         loadChildren: () => import('./user-statistics/user-statistics.module').then(m => m.UserStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '处理人统计'
+        }
       },
       {
         // 三方公司统计
         path: 'tripartiteCompanyStatistics',
         loadChildren: () => import('./tripartite-company-statistics/tripartite-company-statistics.module').then(m => m.TripartiteCompanyStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '三方公司统计'
+        }
       },
       {
         // 楼栋统计
         path: 'buildingStatistics',
         loadChildren: () => import('./building-statistics/building-statistics.module').then(m => m.BuildingStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '楼栋统计'
+        }
       },
       {
         // 楼层统计
         path: 'floorStatistics',
         loadChildren: () => import('./floor-statistics/floor-statistics.module').then(m => m.FloorStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '楼层统计'
+        }
       },
       {
         // 科室工单统计
         path: 'departmentIncidentStatistics',
         loadChildren: () => import('./department-incident-statistics/department-incident-statistics.module').then(m => m.DepartmentIncidentStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '科室工单统计'
+        }
       },
       {
         // 科室评价统计
         path: 'departmentEvaluateStatistics',
         loadChildren: () => import('./department-evaluate-statistics/department-evaluate-statistics.module').then(m => m.DepartmentEvaluateStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '科室评价统计'
+        }
       },
       {
         // 科室来源统计
         path: 'departmentSourceStatistics',
         loadChildren: () => import('./department-source-statistics/department-source-statistics.module').then(m => m.DepartmentSourceStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '科室来源统计'
+        }
       },
       {
         // 故障来源统计
         path: 'categorySourceStatistics',
         loadChildren: () => import('./category-source-statistics/category-source-statistics.module').then(m => m.CategorySourceStatisticsModule),
-        data: { useCache: true },
+        data: {
+          reuse: true,
+          title: '故障来源统计'
+        }
       },
     ]
   }

src/app/views/new-statistics/maintenance-statistics/maintenance-statistics.component.html

@@ -12,16 +12,10 @@
 <!-- content -->
 <div class="content">
   <virtual-scroller #osComponentRef1 [items]="secondMenuList" class="secondMenu">
-    <div class="secondMenuItem ellipsis-oneline" [ngClass]="{ active: activeSecondMenuId == data.id }" title="故障工单统计" *ngFor="let data of osComponentRef1.viewPortItems" (click)="clickSecondMenu(data)">{{data.title}}</div>
+    <div class="secondMenuItem ellipsis-oneline" [ngClass]="{ active: activeSecondMenuLink == data.link }" title="故障工单统计" *ngFor="let data of osComponentRef1.viewPortItems" (click)="clickSecondMenu(data)">{{data.title}}</div>
   </virtual-scroller>
   <div class="main">
-    <nz-tabset class="tabs" nzType="card" [nzSelectedIndex]="tabIndex" (nzSelectedIndexChange)="clickTab($event)">
-      <nz-tab *ngFor="let tab of tabs;trackBy:trackById" [nzTitle]="titleTemplate">
-        <ng-template #titleTemplate>
-          <div><span>{{ tab.title }}</span><i nz-icon nzType="close" class="ant-tabs-close-x" (click)="closeTab(tab)"></i></div>
-        </ng-template>
-      </nz-tab>
-    </nz-tabset>
+    <app-custom-tabs (selectTabEmit)="selectTabEmit($event)"></app-custom-tabs>
     <router-outlet></router-outlet>
   </div>
 </div>

src/app/views/new-statistics/maintenance-statistics/maintenance-statistics.component.less

@@ -88,10 +88,6 @@
       background-color: #fff;
       position: relative;
       top: 36px;
-      .tabs{
-        top: -36px;
-        width: calc(100vw - 183px);
-      }
     }
   }
 }

src/app/views/new-statistics/maintenance-statistics/maintenance-statistics.component.ts

@@ -1,5 +1,4 @@
-import { filter } from 'rxjs/operators';
-import { ActivatedRoute, Router, ActivationEnd } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit } from "@angular/core";
 import { ToolService } from 'src/app/services/tool.service';
 @Component({
@@ -12,32 +11,7 @@ export class MaintenanceStatisticsComponent implements OnInit {
     public tool: ToolService,
     public route: ActivatedRoute,
     public router: Router,
-  ) {
-    this.router.events.pipe(filter(e => e instanceof ActivationEnd))
-	    .subscribe((e: ActivationEnd) => {
-	      const snapshot = e.snapshot;
-	      const isSkip = !(snapshot['_routerState'].url && snapshot.routeConfig.data && snapshot.routeConfig.data.useCache);
-	      if(isSkip) return;
-        console.log(this.tabs,1111);
-        // 获取路由配置中自定义的唯一标记
-	      const path = snapshot.routeConfig.path;
-
-		    // 从当前激活的已存在的 tab 缓存中直接激活
-	      let exist = false;
-        this.tabs.forEach((tab, i) => {
-	        if (path === tab.url) {
-	          // mvvm 模式直接激活指定 tab
-	          this.tabIndex = i;
-	          exist = true;
-	        }
-	      })
-        console.log(this.tabIndex)
-
-		    // 指定路由没有在 tab 缓存中找到(或已经从ui中关闭/删除)
-	      // 首次进入没找到 tab, 从menu中获取
-	      if (!exist) this.clickTab(this.tabIndex);
-	    });
-  }
+  ) {}
 
   menuList: any[] = [];
   secondMenuList:any[] = [];
@@ -62,56 +36,15 @@ export class MaintenanceStatisticsComponent implements OnInit {
   }
 
   // 点击二级菜单
-  activeSecondMenuId:number;
+  activeSecondMenuLink:string;
   clickSecondMenu(data){
-    this.activeSecondMenuId = data.id;
-    this.addTab(data);
-  }
-
-  tabs = [];
-  tabIndex:number = 0;
-  closeTab(tab): void {
-    let index = this.tabs.findIndex(v => v.id == tab.id);
-    this.tabs.splice(index, 1);
-
-    // 1，2，3，4，5
-    // 关闭高亮的tab，则优先显示后一个tab，如果没有后一个tab，则显示前一个tab
-    // 最后一个tab无法关闭
-    if(this.tabIndex == index){
-      if(this.tabs.length){
-        if(this.tabIndex == this.tabs.length){
-          this.tabIndex--;
-        }
-        this.clickTab(this.tabIndex);
-      }
-    }
-  }
-
-  addTab(tab): void {
-    let index = this.tabs.findIndex(v => v.id == tab.id);
-
-    if(index == -1){
-      this.tabs.push(tab);
-      this.tabIndex = this.tabs.length - 1;
-    }else{
-      this.tabIndex = index;
-    }
-    this.clickTab(this.tabIndex);
-  }
-
-  clickTab(tabIndex){
-    console.log('tabIndex:', tabIndex);
-    this.tabIndex = tabIndex;
-    this.activeSecondMenuId = this.tabs[tabIndex].id;
-    console.log('this.tabs[tabIndex]:', this.tabs[tabIndex]);
-    console.log(`newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.tabs[tabIndex].link}`)
-    // this.router.navigate([`newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.tabs[tabIndex].link}`], { replaceUrl: true });
-    this.router.navigateByUrl(`newStatistics/${this.route.parent.snapshot.routeConfig.path}/${this.tabs[tabIndex].link}`).finally();
+    this.activeSecondMenuLink = data.link;
+    this.router.navigateByUrl(`newStatistics/${this.route.parent.snapshot.routeConfig.path}/${data.link}`).finally();
   }
 
-  //trackBy
-  trackById(index, item) {
-    return item.id;
+  // 回显二级菜单
+  selectTabEmit(link){
+    this.activeSecondMenuLink = link;
   }
 
   // 全院查询-1|院区查询-2|责任部门查询-3|部门垂直查询-4

src/app/views/new-statistics/maintenance-statistics/maintenance-statistics.module.ts

@@ -1,5 +1,4 @@
-import { SimpleReuseStrategy } from './../../../route/simple-reuse-strategy';
-import { RouteReuseStrategy } from '@angular/router';
+import { CustomTabsModule } from './../components/custom-tabs/custom-tabs.module';
 import { QueryRangeModule } from './../components/query-range/query-range.module';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -20,9 +19,7 @@ import { VirtualScrollerModule } from 'ngx-virtual-scroller';
     ShareModule,
     VirtualScrollerModule,
     QueryRangeModule,
-  ],
-  providers: [
-    { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy },
+    CustomTabsModule,
   ],
 })
 export class MaintenanceStatisticsModule { }

src/app/views/new-statistics/services/tab.service.ts

@@ -0,0 +1,114 @@
+import { Injectable } from '@angular/core';
+import { Router, NavigationEnd, ActivatedRouteSnapshot } from '@angular/router';
+import { filter } from 'rxjs/operators';
+
+export interface Tab {
+  title: string;
+  path: string;
+  active: boolean;
+  closable: boolean; // 保留该属性用于控制显示逻辑
+}
+
+@Injectable({ providedIn: 'root' })
+export class TabService {
+  tabs: Tab[] = [];
+  currentTab: Tab | null = null;
+
+  constructor(private router: Router) {
+    this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe((event: NavigationEnd) => {
+        this.updateTabs(event.urlAfterRedirects);
+      });
+  }
+
+  private updateTabs(url: string) {
+    const normalizedUrl = this.getNormalizedUrl(url);
+    const existingTab = this.tabs.find(t => t.path === normalizedUrl);
+
+    if (existingTab) {
+      this.tabs.forEach(t => t.active = t.path === url);
+      this.currentTab = existingTab;
+      return;
+    }
+
+    const title = this.getTitleFromUrl(url);
+    this.tabs.forEach(t => t.active = false);
+
+    const newTab: Tab = {
+      title: title,
+      path: url,
+      active: true,
+      closable: true
+    };
+
+    this.tabs.push(newTab);
+    this.currentTab = newTab;
+  }
+
+  private getNormalizedUrl(url: string): string {
+    // 移除哈希片段和查询参数
+    return url.split('#')[0].split('?')[0];
+  }
+
+  public getFullPath(path: string): any[] {
+    const queryParams = this.router.parseUrl(path).queryParams;
+    const pathWithoutParams = path.split('?')[0];
+    return [pathWithoutParams, { queryParams }];
+  }
+
+  closeTab(path: string): void {
+    const index = this.tabs.findIndex(t => t.path === path);
+    if (index === -1) return;
+
+    // 最后一个页签不关闭
+    if (this.tabs.length === 1) {
+      return;
+    }
+
+    // 寻找激活目标
+    let newActiveTab: Tab | null = null;
+
+    // 优先查找右侧页签
+    if (index < this.tabs.length - 1) {
+      newActiveTab = this.tabs[index + 1];
+    }
+    // 右侧无则查找左侧
+    else if (index > 0) {
+      newActiveTab = this.tabs[index - 1];
+    }
+
+    // 执行删除
+    this.tabs.splice(index, 1);
+
+    // 设置新激活页签
+    if (newActiveTab) {
+      this.currentTab = newActiveTab;
+      this.tabs.forEach(t => t.active = t.path === newActiveTab!.path);
+      this.router.navigate([newActiveTab.path]);
+    }
+  }
+
+  private getTitleFromRoute(route: ActivatedRouteSnapshot): string {
+    while (route.firstChild) route = route.firstChild;
+    return route.data.title || '未命名标签';
+  }
+
+  private getTitleFromUrl(url: string): string {
+    const route = this.router.routerState.snapshot.root;
+    return this.getTitleFromRoute(route);
+  }
+
+  closeOtherTabs(keepTab: Tab): void {
+    // 强制激活当前右键页签
+    this.tabs = this.tabs.filter(t => t.path === keepTab.path);
+    keepTab.active = true;
+    this.currentTab = keepTab;
+
+    // 触发路由跳转
+    this.router.navigate([keepTab.path], {
+      replaceUrl: true
+    });
+  }
+}
+