yss-project/src/app/pages/customer-service/customer-service-layout/customer-service-layout.html

<!-- 顶部导航栏 -->
<header class="top-navbar">
  <div class="navbar-left">
    <button class="menu-toggle" (click)="toggleSidebar()">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </svg>
    </button>
    <h1 class="app-title">客服工作台</h1>
  </div>
  
  <div class="navbar-center">
    <div class="search-container">
      <input 
        type="text" 
        [(ngModel)]="searchTerm"
        placeholder="搜索项目、客户或动态..." 
        class="search-input"
        (keyup.enter)="handleSearch()"
      />
      <button class="search-button" (click)="handleSearch()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.35-4.35"></path>
        </svg>
      </button>
    </div>
  </div>
  
  <div class="navbar-right">
    <button class="notification-btn" (click)="toggleNotifications()">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
      </svg>
      <span class="notification-badge">{{ notifications().length }}</span>
    </button>
    
    <!-- 通知下拉菜单 -->
    @if (showNotifications()) {
    <div class="notification-dropdown">
      <div class="notification-header">
        <h3>消息通知</h3>
        <button class="close-btn" (click)="toggleNotifications()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
      <div class="notification-list">
        @for (notification of notifications(); track notification) {
        <div class="notification-item">
          <div class="notification-icon">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="8" x2="12" y2="12"></line>
              <line x1="12" y1="16" x2="12.01" y2="16"></line>
            </svg>
          </div>
          <div class="notification-content">
            <p>{{ notification }}</p>
          </div>
        </div>
        }
      </div>
      <div class="notification-footer">
        <a href="#" class="view-all">查看全部</a>
      </div>
    </div>
    }
    <div class="user-profile">
      <div style="width: 40px; height: 40px; background-color: #FFCCCC; color: #555555; display: flex; align-items: center; justify-content: center; font-size: 13.333333333333334px; font-weight: bold;" class="user-avatar" title="用户头像">CS</div>
      <span class="user-name">客服小李</span>
    </div>
  </div>
</header>

<!-- 主要内容区 -->
<main class="main-content">
  <!-- 左侧侧边栏 -->
  <aside class="sidebar" [class.collapsed]="!sidebarOpen">
    <nav class="sidebar-nav">
      <a routerLink="/customer-service/dashboard" class="nav-item" routerLinkActive="active">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
        </svg>
        <span>工作台</span>
      </a>

      <a routerLink="/customer-service/project-list" class="nav-item" routerLinkActive="active">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="8" y1="6" x2="21" y2="6"></line>
          <line x1="8" y1="12" x2="21" y2="12"></line>
          <line x1="8" y1="18" x2="21" y2="18"></line>
          <line x1="3" y1="6" x2="3.01" y2="6"></line>
          <line x1="3" y1="12" x2="3.01" y2="12"></line>
          <line x1="3" y1="18" x2="3.01" y2="18"></line>
        </svg>
        <span>项目列表</span>
      </a>
      <a routerLink="/customer-service/case-library" class="nav-item" routerLinkActive="active">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
        </svg>
        <span>案例库</span>
      </a>


    </nav>
    
    <div class="sidebar-footer">
      <div class="storage-info">
        <span>在线时长: 4.5h</span>
      </div>
      <button class="logout-btn" (click)="logout()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
          <polyline points="16 17 21 12 16 7"></polyline>
          <line x1="21" y1="12" x2="9" y2="12"></line>
        </svg>
        <span>退出登录</span>
      </button>
    </div>
  </aside>

  <!-- 中间内容区 -->
  <div class="content-wrapper" [class.expanded]="!sidebarOpen">
    <router-outlet />
  </div>
</main>