feet:customer2

src/app/app.html

@@ -1,102 +1,8 @@
 <div class="app-container">
-  <!-- 顶部导航栏 -->
-  <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"
-        />
-        <button class="search-button">
-          <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">
-        <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">3</span>
-      </button>
-      <div class="user-profile">
-        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="user-avatar">
-        <span class="user-name">客服小李</span>
-      </div>
-    </div>
-  </header>
-
   <!-- 主要内容区 -->
   <main class="main-content">
-    <!-- 左侧侧边栏 -->
-    <aside class="sidebar" [class.collapsed]="!sidebarOpen">
-      <nav class="sidebar-nav">
-        <a href="/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 href="/customer-service/consultation-order" class="nav-item" routerLinkActive="active">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          </svg>
-          <span>客户咨询</span>
-        </a>
-        <a href="/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 href="/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">
-          <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">
+    <div class="content-wrapper">
       <router-outlet />
     </div>
   </main>

src/app/app.routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 
 // 客服页面
+import { CustomerServiceLayout } from './pages/customer-service/customer-service-layout/customer-service-layout';
 import { Dashboard as CustomerServiceDashboard } from './pages/customer-service/dashboard/dashboard';
 import { ConsultationOrder } from './pages/customer-service/consultation-order/consultation-order';
 import { ProjectList } from './pages/customer-service/project-list/project-list';
@@ -36,6 +37,7 @@ export const routes: Routes = [
   // 客服路由
   {
     path: 'customer-service',
+    component: CustomerServiceLayout,
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
       { path: 'dashboard', component: CustomerServiceDashboard, title: '客服工作台' },

src/app/app.ts

@@ -1,21 +1,13 @@
 import { Component, signal } from '@angular/core';
-import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
-import { FormsModule } from '@angular/forms';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive, FormsModule],
+  imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })
 export class App {
   protected readonly title = signal('yss-project');
-  sidebarOpen = true;
-  searchTerm = '';
-  currentDate = new Date();
-
-  toggleSidebar() {
-    this.sidebarOpen = !this.sidebarOpen;
-  }
 }

src/app/pages/customer-service/case-library/case-library.html

@@ -1,103 +1,6 @@
 <div class="case-library-container">
-  <!-- 顶部导航栏 -->
-  <header class="top-navbar">
-    <div class="navbar-left">
-      <button class="menu-toggle">
-        <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"
-          autocomplete="off"
-        />
-        <button class="search-button">
-          <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">
-        <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">3</span>
-      </button>
-      <div class="user-profile">
-        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="user-avatar">
-        <span class="user-name">客服小李</span>
-      </div>
-    </div>
-  </header>
-
-  <!-- 主要内容区 -->
-  <main class="dashboard-content">
-    <!-- 左侧侧边栏 -->
-    <aside class="sidebar">
-      <nav class="sidebar-nav">
-        <a href="/customer-service/dashboard" class="nav-item">
-          <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 href="/customer-service/consultation-order" class="nav-item">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          </svg>
-          <span>客户咨询</span>
-        </a>
-        <a href="/customer-service/project-list" class="nav-item">
-          <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 href="/customer-service/case-library" class="nav-item 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">
-          <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">
+  <!-- 中间内容区 -->
+  <div class="content-wrapper">
       <!-- 欢迎区域 -->
       <section class="welcome-section">
         <h2>案例库</h2>
@@ -292,7 +195,6 @@
         </div>
       </section>
     </div>
-  </main>
 
   <!-- 案例详情模态框 -->
   <div class="case-modal" *ngIf="selectedCase()" (click)="closeCaseDetails()">

src/app/pages/customer-service/case-library/case-library.ts

@@ -27,7 +27,7 @@ interface CaseItem {
   standalone: true,
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
   templateUrl: './case-library.html',
-  styleUrl: './case-library.scss'
+  styleUrls: ['./case-library.scss', '../customer-service-styles.scss']
 })
 export class CaseLibrary implements OnInit {
   // 当前日期

src/app/pages/customer-service/consultation-order/consultation-order.ts

@@ -34,7 +34,7 @@ interface Requirement {
   standalone: true,
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
   templateUrl: './consultation-order.html',
-  styleUrl: './consultation-order.scss'
+  styleUrls: ['./consultation-order.scss', '../customer-service-styles.scss']
 })
 export class ConsultationOrder {
   // 搜索客户关键词

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

@@ -0,0 +1,101 @@
+<!-- 顶部导航栏 -->
+<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"
+      />
+      <button class="search-button">
+        <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">
+      <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">3</span>
+    </button>
+    <div class="user-profile">
+      <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="user-avatar">
+      <span class="user-name">客服小李</span>
+    </div>
+  </div>
+</header>
+
+<!-- 主要内容区 -->
+<main class="main-content">
+  <!-- 左侧侧边栏 -->
+  <aside class="sidebar" [class.collapsed]="!sidebarOpen">
+    <nav class="sidebar-nav">
+      <a href="/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 href="/customer-service/consultation-order" class="nav-item" routerLinkActive="active">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+        </svg>
+        <span>客户咨询</span>
+      </a>
+      <a href="/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 href="/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">
+        <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>

src/app/pages/customer-service/customer-service-layout/customer-service-layout.scss

@@ -0,0 +1,310 @@
+// 全局变量定义
+$primary-color: #165DFF;
+$primary-dark: #0E42CB;
+$secondary-color: #4E5BA6;
+$success-color: #00B42A;
+$warning-color: #FF7D00;
+$danger-color: #F53F3F;
+$text-primary: #1D2129;
+$text-secondary: #4E5969;
+$text-tertiary: #86909C;
+$border-color: #E5E6EB;
+$background-primary: #FFFFFF;
+$background-secondary: #F2F3F5;
+$background-tertiary: #F7F8FA;
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+$shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
+$border-radius: 8px;
+$transition: all 0.3s ease;
+
+// 顶部导航栏
+.top-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 64px;
+  background-color: $background-primary;
+  border-bottom: 1px solid $border-color;
+  box-shadow: $shadow-sm;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+
+  .navbar-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .menu-toggle {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $text-primary;
+    padding: 8px;
+    transition: $transition;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+
+  .app-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: $text-primary;
+  }
+
+  .navbar-center {
+    flex: 1;
+    max-width: 500px;
+    margin: 0 20px;
+  }
+
+  .search-container {
+    display: flex;
+    align-items: center;
+    background-color: $background-tertiary;
+    border-radius: $border-radius;
+    padding: 6px 12px;
+    border: 1px solid $border-color;
+
+    .search-input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      padding: 6px 8px;
+      font-size: 14px;
+      color: $text-primary;
+
+      &::placeholder {
+        color: $text-tertiary;
+      }
+    }
+
+    .search-button {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: $text-secondary;
+      padding: 4px;
+      transition: $transition;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+
+  .navbar-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .notification-btn {
+    position: relative;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: $text-secondary;
+    padding: 8px;
+    transition: $transition;
+
+    &:hover {
+      color: $primary-color;
+    }
+
+    .notification-badge {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      background-color: $danger-color;
+      color: white;
+      font-size: 10px;
+      font-weight: 500;
+      padding: 2px 6px;
+      border-radius: 10px;
+      min-width: 18px;
+      text-align: center;
+    }
+  }
+
+  .user-profile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .user-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .user-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: $text-primary;
+    }
+  }
+}
+
+// 主要内容区
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+// 左侧侧边栏
+.sidebar {
+  width: 220px;
+  background-color: $background-primary;
+  border-right: 1px solid $border-color;
+  display: flex;
+  flex-direction: column;
+  transition: $transition;
+
+  .sidebar-nav {
+    flex: 1;
+    padding: 16px 0;
+
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 24px;
+      color: $text-secondary;
+      text-decoration: none;
+      border-left: 3px solid transparent;
+      transition: $transition;
+
+      &:hover {
+        background-color: $background-tertiary;
+        color: $primary-color;
+      }
+
+      &.active {
+        color: $primary-color;
+        background-color: color-mix(in srgb, $primary-color 5%, transparent);
+        border-left-color: $primary-color;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .sidebar-footer {
+    padding: 16px 24px;
+    border-top: 1px solid $border-color;
+
+    .storage-info {
+      margin-bottom: 16px;
+      font-size: 12px;
+      color: $text-tertiary;
+    }
+
+    .logout-btn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: none;
+      border: 1px solid $border-color;
+      border-radius: $border-radius;
+      color: $text-secondary;
+      cursor: pointer;
+      font-size: 14px;
+      transition: $transition;
+
+      &:hover {
+        background-color: $background-tertiary;
+        border-color: $danger-color;
+        color: $danger-color;
+      }
+    }
+  }
+
+  &.collapsed {
+    width: 0;
+    overflow: hidden;
+  }
+}
+
+// 中间内容区
+.content-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  transition: $transition;
+
+  &.expanded {
+    width: 100%;
+  }
+}
+
+// 响应式设计
+@media (max-width: 1024px) {
+  .sidebar {
+    width: 200px;
+  }
+}
+
+@media (max-width: 768px) {
+  .top-navbar {
+    padding: 0 16px;
+
+    .menu-toggle {
+      display: block;
+    }
+
+    .app-title {
+      font-size: 18px;
+    }
+
+    .navbar-center {
+      display: none;
+    }
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 64px;
+    left: 0;
+    height: calc(100vh - 64px);
+    z-index: 900;
+    transform: translateX(0);
+
+    &.collapsed {
+      transform: translateX(-100%);
+    }
+  }
+
+  .content-wrapper {
+    padding: 16px;
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .top-navbar {
+    height: 56px;
+
+    .navbar-right {
+      gap: 12px;
+    }
+  }
+
+  .sidebar {
+    top: 56px;
+    height: calc(100vh - 56px);
+  }
+
+  .content-wrapper {
+    padding: 12px;
+  }
+}

src/app/pages/customer-service/customer-service-layout/customer-service-layout.ts

@@ -0,0 +1,21 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet, RouterLinkActive } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-customer-service-layout',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet, RouterLinkActive, FormsModule],
+  templateUrl: './customer-service-layout.html',
+  styleUrl: './customer-service-layout.scss'
+}) 
+export class CustomerServiceLayout {
+  sidebarOpen = true;
+  searchTerm = '';
+  currentDate = new Date();
+
+  toggleSidebar() {
+    this.sidebarOpen = !this.sidebarOpen;
+  }
+}

src/app/pages/customer-service/customer-service-styles.scss

@@ -0,0 +1,195 @@
+/* 客服页面全局样式 */
+
+// 全局变量定义
+$primary-color: #165DFF;
+$primary-dark: #0E42CB;
+$secondary-color: #4E5BA6;
+$success-color: #00B42A;
+$warning-color: #FF7D00;
+$danger-color: #F53F3F;
+$text-primary: #1D2129;
+$text-secondary: #4E5969;
+$text-tertiary: #86909C;
+$border-color: #E5E6EB;
+$background-primary: #FFFFFF;
+$background-secondary: #F2F3F5;
+$background-tertiary: #F7F8FA;
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+$shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
+$border-radius: 8px;
+$transition: all 0.3s ease;
+
+/* 客服页面通用组件样式 */
+.stat-card {
+  background-color: $background-primary;
+  border-radius: $border-radius;
+  padding: 20px;
+  box-shadow: $shadow-sm;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: $transition;
+  border: 1px solid $border-color;
+
+  &:hover {
+    box-shadow: $shadow-md;
+    transform: translateY(-2px);
+  }
+
+  .stat-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+
+    &.primary {
+      background-color: $primary-color;
+    }
+
+    &.secondary {
+      background-color: $secondary-color;
+    }
+
+    &.warning {
+      background-color: $warning-color;
+    }
+
+    &.success {
+      background-color: $success-color;
+    }
+  }
+
+  .stat-content {
+    flex: 1;
+
+    .stat-value {
+      font-size: 24px;
+      font-weight: 600;
+      color: $text-primary;
+      margin-bottom: 4px;
+    }
+
+    .stat-label {
+      font-size: 14px;
+      color: $text-secondary;
+    }
+  }
+
+  .stat-trend {
+    font-size: 12px;
+    font-weight: 500;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+
+    &.positive {
+      background-color: color-mix(in srgb, $success-color 5%, transparent);
+      color: $success-color;
+    }
+
+    &.negative {
+      background-color: color-mix(in srgb, $danger-color 5%, transparent);
+      color: $danger-color;
+    }
+
+    &.neutral {
+      background-color: $background-tertiary;
+      color: $text-secondary;
+    }
+  }
+}
+
+/* 按钮样式 */
+.btn-primary {
+  background-color: $primary-color;
+  color: white;
+  border: none;
+  border-radius: $border-radius;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: $transition;
+
+  &:hover {
+    background-color: $primary-dark;
+  }
+
+  &:disabled {
+    background-color: $text-tertiary;
+    cursor: not-allowed;
+  }
+}
+
+.btn-secondary {
+  background-color: $background-tertiary;
+  color: $text-secondary;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: $transition;
+
+  &:hover {
+    background-color: $background-secondary;
+    border-color: $text-tertiary;
+  }
+}
+
+/* 空状态样式 */
+.empty-state {
+  text-align: center;
+  padding: 40px 20px;
+  color: $text-tertiary;
+
+  svg {
+    margin-bottom: 16px;
+    opacity: 0.5;
+  }
+
+  p {
+    font-size: 14px;
+  }
+}
+
+/* 卡片样式 */
+.card {
+  background-color: $background-primary;
+  border-radius: $border-radius;
+  padding: 20px;
+  box-shadow: $shadow-sm;
+  border: 1px solid $border-color;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+
+    h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: $text-primary;
+    }
+  }
+}
+
+/* 列表样式 */
+.task-item, .update-item {
+  background-color: $background-primary;
+  border-radius: $border-radius;
+  padding: 16px;
+  margin-bottom: 12px;
+  border: 1px solid $border-color;
+  transition: $transition;
+
+  &:hover {
+    box-shadow: $shadow-sm;
+  }
+}

src/app/pages/customer-service/dashboard/dashboard.ts

@@ -11,7 +11,7 @@ import { Project, Task, CustomerFeedback } from '../../../models/project.model';
   standalone: true,
   imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './dashboard.html',
-  styleUrl: './dashboard.scss'
+  styleUrls: ['./dashboard.scss', '../customer-service-styles.scss']
 }) 
 export class Dashboard implements OnInit, OnDestroy {
   // 数据看板统计

src/app/pages/customer-service/project-detail/project-detail.ts

@@ -7,14 +7,13 @@ import { RouterModule, ActivatedRoute } from '@angular/router';
 import { ProjectService } from '../../../services/project.service';
 import { Project, Task, Message, FileItem, CustomerFeedback, Milestone } from '../../../models/project.model';
 
-// 删除错误的代码块
 @Component({
   selector: 'app-project-detail',
   standalone: true,
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
   templateUrl: './project-detail.html',
-  styleUrl: './project-detail.scss'
-}) 
+  styleUrls: ['./project-detail.scss', '../customer-service-styles.scss']
+})
 export class ProjectDetail implements OnInit {
   // 项目ID
   projectId = '';

src/app/pages/customer-service/project-list/project-list.html

@@ -1,66 +1,6 @@
 <div class="project-list-container">
-  <!-- 顶部导航栏 -->
-  <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-right">
-      <button class="notification-btn">
-        <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">3</span>
-      </button>
-      <div class="user-profile">
-        <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="user-avatar">
-        <span class="user-name">客服小李</span>
-      </div>
-    </div>
-  </header>
-
-  <!-- 主要内容区 -->
-  <main class="dashboard-content">
-    <!-- 左侧侧边栏 -->
-    <aside class="sidebar">
-      <nav class="sidebar-nav">
-        <a href="/customer-service/dashboard" class="nav-item">
-          <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 href="/customer-service/consultation-order" class="nav-item">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          </svg>
-          <span>客户咨询</span>
-        </a>
-        <a href="/customer-service/project-list" class="nav-item active">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <path d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
-          </svg>
-          <span>项目列表</span>
-        </a>
-        <a href="/customer-service/case-library" class="nav-item">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
-            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
-          </svg>
-          <span>案例库</span>
-        </a>
-      </nav>
-    </aside>
-
-    <!-- 右侧主要内容 -->
-    <div class="project-content">
+  <!-- 右侧主要内容 -->
+  <div class="project-content">
       <!-- 页面标题和操作 -->
       <div class="page-header">
         <h2>项目列表</h2>
@@ -277,5 +217,4 @@
         </button>
       </div>
     </div>
-  </main>
 </div>

src/app/pages/customer-service/project-list/project-list.ts

@@ -18,7 +18,7 @@ interface ProjectListItem extends Project {
   standalone: true,
   imports: [CommonModule, FormsModule, RouterModule],
   templateUrl: './project-list.html',
-  styleUrl: './project-list.scss'
+  styleUrls: ['./project-list.scss', '../customer-service-styles.scss']
 })
 export class ProjectList implements OnInit {
   // 项目列表数据