yss-project/src/app/pages/designer/project-detail/components/vertical-nav/vertical-nav.component.ts

import { Component, Input, Output, EventEmitter, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';

export interface NavItem {
  id: 'progress' | 'members' | 'files';
  name: string;
  icon?: string;
}

@Component({
  selector: 'app-vertical-nav',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './vertical-nav.component.html',
  styleUrls: ['./vertical-nav.component.scss']
})
export class VerticalNavComponent implements AfterViewInit {
  @Input() activeTab: 'progress' | 'members' | 'files' = 'progress';
  @Input() navItems: NavItem[] = [
    { id: 'progress', name: '项目进度' },
    { id: 'members', name: '项目人员' },
    { id: 'files', name: '项目文件' }
  ];
  
  @Output() tabChange = new EventEmitter<'progress' | 'members' | 'files'>();
  @ViewChild('tabContainer', { static: false }) tabContainer!: ElementRef;

  private tabWidth = 120; // 默认选项卡宽度

  ngAfterViewInit(): void {
    // 动态计算选项卡宽度
    this.calculateTabWidth();
  }

  onTabClick(tabId: 'progress' | 'members' | 'files'): void {
    this.tabChange.emit(tabId);
  }

  isActive(tabId: 'progress' | 'members' | 'files'): boolean {
    return this.activeTab === tabId;
  }

  // 计算滑动指示器的位置
  getIndicatorPosition(): number {
    const activeIndex = this.navItems.findIndex(item => item.id === this.activeTab);
    return activeIndex * this.tabWidth;
  }

  // 动态计算选项卡宽度
  private calculateTabWidth(): void {
    if (this.tabContainer) {
      const containerWidth = this.tabContainer.nativeElement.offsetWidth;
      this.tabWidth = (containerWidth - 8) / this.navItems.length; // 减去padding
    }
  }
}