tihao-ai/src/app/app.html

<div class="app-shell">
  <aside class="sidebar">
    <div class="brand">
      <div class="brand-mark">提</div>
      <div>
        <h1>提号AI</h1>
        <p>Brief 到名单交付工作台</p>
      </div>
    </div>

    <nav class="side-nav" aria-label="主导航">
      <button
        type="button"
        *ngFor="let item of state.visibleNavItems"
        [class.active]="state.activeView === item.key"
        (click)="state.setView(item.key)"
      >
        <span>{{ item.label }}</span>
        <small>{{ item.note }}</small>
      </button>
    </nav>

    <button type="button" class="nav-mode-button" (click)="state.toggleSimpleMode()">
      {{ state.simpleMode ? '显示完整业务模块' : '切回商务简洁模式' }}
    </button>

    <div class="sidebar-footer">
      <span class="status-dot"></span>
      <div>
        <strong>真实接口</strong>
        <small>{{ state.apiState }}</small>
      </div>
    </div>
  </aside>

  <main class="main">
    <header class="topbar utility-topbar">
      <div>
        <p class="eyebrow">当前任务</p>
        <h2>{{ state.taskDisplayName }}</h2>
      </div>
      <div class="topbar-status">
        <span>{{ state.activeNavItem.label }}</span>
        <span>流程 {{ state.currentStep }}/{{ state.steps.length }} · {{ state.steps[state.currentStep - 1].label }}</span>
        <span>交付准备度 {{ state.exportReadiness }}%</span>
      </div>
      <div class="topbar-actions">
        <button type="button" class="ghost-button" (click)="state.backToWorkflow()" title="回到提号工作台">回到工作台</button>
        <button type="button" class="ghost-button" (click)="state.toggleSimpleMode()" title="切换简洁或完整模式">
          {{ state.simpleMode ? '完整模式' : '简洁模式' }}
        </button>
      </div>
    </header>

    <ng-container [ngSwitch]="state.activeView">
      <app-workspace-flow *ngSwitchCase="'workspaceFlow'"></app-workspace-flow>
      <app-workspace-page *ngSwitchCase="'workspace'"></app-workspace-page>
      <app-creator-search-page *ngSwitchCase="'creatorSearch'"></app-creator-search-page>
      <app-delivery-page *ngSwitchCase="'delivery'"></app-delivery-page>
      <app-tasks-page *ngSwitchCase="'tasks'"></app-tasks-page>
      <app-resources-page *ngSwitchCase="'resources'"></app-resources-page>
      <app-rules-page *ngSwitchCase="'rules'"></app-rules-page>
      <app-learning-page *ngSwitchCase="'learning'"></app-learning-page>
      <app-templates-page *ngSwitchCase="'templates'"></app-templates-page>
      <app-progress-board-page *ngSwitchCase="'progressBoard'"></app-progress-board-page>
    </ng-container>
  </main>
</div>