feet:customshouhou

src/app/app.routes.ts

@@ -10,6 +10,8 @@ import { ConsultationOrder } from './pages/customer-service/consultation-order/c
 import { ProjectList } from './pages/customer-service/project-list/project-list';
 import { ProjectDetail } from './pages/customer-service/project-detail/project-detail';
 import { CaseLibrary } from './pages/customer-service/case-library/case-library';
+import { CaseDetailComponent } from './pages/customer-service/case-detail/case-detail.component';
+import { AfterSalesComponent } from './pages/customer-service/dashboard/pages/after-sales/after-sales.component';
 
 // 客服工作台子页面
 import { ConsultationListComponent } from './pages/customer-service/dashboard/pages/consultation-list/consultation-list.component';
@@ -70,6 +72,8 @@ export const routes: Routes = [
       { path: 'project-list', component: ProjectList, title: '项目列表' },
       { path: 'project-detail/:id', component: DesignerProjectDetail, title: '项目详情' },
       { path: 'case-library', component: CaseLibrary, title: '案例库' },
+      { path: 'case-detail/:id', component: CaseDetailComponent, title: '案例详情' },
+      { path: 'after-sales', component: AfterSalesComponent, title: '售后服务' },
 
       // 工作台子页面路由
       { path: 'consultation-list', component: ConsultationListComponent, title: '咨询列表' },

src/app/pages/customer-service/case-detail/case-detail.component.html

@@ -0,0 +1,241 @@
+<!-- 加载状态 -->
+@if (isLoading) {
+  <div class="loading-container">
+    <div class="loading-spinner">
+      <div class="spinner"></div>
+      <p>正在加载案例详情...</p>
+    </div>
+  </div>
+}
+
+<!-- 案例详情内容 -->
+@if (case && !isLoading) {
+  <div class="case-detail-page">
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <button class="back-btn" (click)="goBack()">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="m15 18-6-6 6-6"/>
+          </svg>
+          返回案例库
+        </button>
+        <div class="breadcrumb">
+          <span>案例库</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="m9 18 6-6-6-6"/>
+          </svg>
+          <span>{{ case.name }}</span>
+        </div>
+      </div>
+      
+      <div class="header-actions">
+        <button 
+          class="action-btn favorite-btn" 
+          [class.active]="case.isFavorite"
+          (click)="toggleFavorite()"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
+          </svg>
+          {{ case.isFavorite ? '已收藏' : '收藏' }}
+        </button>
+        
+        <button class="action-btn share-btn" (click)="shareCase()">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <circle cx="18" cy="5" r="3"></circle>
+            <circle cx="6" cy="12" r="3"></circle>
+            <circle cx="18" cy="19" r="3"></circle>
+            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+          </svg>
+          分享案例
+        </button>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 左侧：案例图片和基本信息 -->
+      <div class="left-section">
+        <!-- 封面图片 -->
+        <div class="cover-image">
+          <img [src]="case.coverImage" [alt]="case.name" class="cover-img">
+          <div class="image-overlay">
+            <div class="case-badges">
+              <span class="badge project-type">{{ case.projectType }}</span>
+              <span class="badge space-type">{{ case.spaceType }}</span>
+              <span class="badge rendering-level">{{ case.renderingLevel }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 基本信息 -->
+        <div class="basic-info">
+          <h1 class="case-name">{{ case.name }}</h1>
+          
+          <div class="meta-grid">
+            <div class="meta-item">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+              </svg>
+              <div class="meta-content">
+                <span class="meta-label">设计师</span>
+                <span class="meta-value">{{ case.designer }}</span>
+                @if (isInternalUser) {
+                  <span class="team-badge">{{ case.team }}</span>
+                }
+              </div>
+            </div>
+
+            <div class="meta-item">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="3" y1="9" x2="21" y2="9"></line>
+              </svg>
+              <div class="meta-content">
+                <span class="meta-label">面积</span>
+                <span class="meta-value">{{ case.area }}㎡</span>
+              </div>
+            </div>
+
+            <div class="meta-item">
+              <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>
+              <div class="meta-content">
+                <span class="meta-label">浏览量</span>
+                <span class="meta-value">{{ case.viewCount }}</span>
+              </div>
+            </div>
+
+            <div class="meta-item">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                <path d="M8 2v4"></path>
+                <path d="M16 2v4"></path>
+                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="3" y1="10" x2="21" y2="10"></line>
+              </svg>
+              <div class="meta-content">
+                <span class="meta-label">创建时间</span>
+                <span class="meta-value">{{ getFormattedDate(case.createdAt) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧：详细信息 -->
+      <div class="right-section">
+        <!-- 风格标签 -->
+        <div class="info-section">
+          <h3 class="section-title">设计风格</h3>
+          <div class="style-tags">
+            @for (tag of case.styleTags; track $index) {
+              <span class="style-tag">{{ tag }}</span>
+            }
+          </div>
+        </div>
+
+        <!-- 客户评价 -->
+        @if (case.customerReview) {
+          <div class="info-section">
+            <h3 class="section-title">客户评价</h3>
+            <div class="review-content">
+              <div class="quote-icon">"</div>
+              <p class="review-text">{{ case.customerReview }}</p>
+            </div>
+          </div>
+        }
+
+        <!-- 统计信息 -->
+        <div class="info-section">
+          <h3 class="section-title">案例统计</h3>
+          <div class="stats-grid">
+            <div class="stat-item">
+              <div class="stat-icon">
+                <svg width="24" height="24" 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>
+              </div>
+              <div class="stat-content">
+                <span class="stat-value">{{ case.viewCount }}</span>
+                <span class="stat-label">浏览次数</span>
+              </div>
+            </div>
+
+            <div class="stat-item">
+              <div class="stat-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
+                </svg>
+              </div>
+              <div class="stat-content">
+                <span class="stat-value">{{ case.favoriteCount }}</span>
+                <span class="stat-label">收藏次数</span>
+              </div>
+            </div>
+
+            <div class="stat-item">
+              <div class="stat-icon">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                  <circle cx="18" cy="5" r="3"></circle>
+                  <circle cx="6" cy="12" r="3"></circle>
+                  <circle cx="18" cy="19" r="3"></circle>
+                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+                </svg>
+              </div>
+              <div class="stat-content">
+                <span class="stat-value">{{ case.shareCount }}</span>
+                <span class="stat-label">分享次数</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 设计师内部信息 -->
+        @if (isInternalUser) {
+          <div class="info-section internal-section">
+            <h3 class="section-title">内部信息</h3>
+            <div class="internal-grid">
+              <div class="internal-item">
+                <span class="internal-label">案例等级</span>
+                <span class="internal-badge" [class.excellent]="case.isExcellent">
+                  {{ case.isExcellent ? '优秀案例' : '普通案例' }}
+                </span>
+              </div>
+              <div class="internal-item">
+                <span class="internal-label">所属团队</span>
+                <span class="internal-value">{{ case.team }}</span>
+              </div>
+              <div class="internal-item">
+                <span class="internal-label">案例ID</span>
+                <span class="internal-value">{{ case.id }}</span>
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+}
+
+<!-- 案例不存在 -->
+@if (!case && !isLoading) {
+  <div class="error-container">
+    <div class="error-content">
+      <svg width="64" height="64" 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>
+      <h3>案例不存在</h3>
+      <p>抱歉，您访问的案例不存在或已被删除</p>
+      <button class="btn btn-primary" (click)="goBack()">返回案例库</button>
+    </div>
+  </div>
+}

src/app/pages/customer-service/case-detail/case-detail.component.scss

@@ -0,0 +1,551 @@
+.case-detail-page {
+  min-height: 100vh;
+  background: #f8f9fa;
+  
+  .page-header {
+    background: white;
+    padding: 20px 24px;
+    border-bottom: 1px solid #e9ecef;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      
+      .back-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 16px;
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 6px;
+        color: #495057;
+        cursor: pointer;
+        transition: all 0.2s;
+        
+        &:hover {
+          background: #e9ecef;
+          color: #212529;
+        }
+        
+        svg {
+          stroke-width: 2;
+        }
+      }
+      
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #6c757d;
+        font-size: 14px;
+        
+        span:last-child {
+          color: #212529;
+          font-weight: 500;
+        }
+        
+        svg {
+          stroke-width: 2;
+          opacity: 0.5;
+        }
+      }
+    }
+    
+    .header-actions {
+      display: flex;
+      gap: 12px;
+      
+      .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 16px;
+        border: 1px solid #dee2e6;
+        border-radius: 6px;
+        background: white;
+        color: #495057;
+        cursor: pointer;
+        transition: all 0.2s;
+        font-size: 14px;
+        
+        &:hover {
+          border-color: #007bff;
+          color: #007bff;
+        }
+        
+        &.favorite-btn.active {
+          background: #fff3cd;
+          border-color: #ffc107;
+          color: #856404;
+          
+          svg {
+            fill: #ffc107;
+          }
+        }
+        
+        svg {
+          stroke-width: 2;
+        }
+      }
+    }
+  }
+  
+  .main-content {
+    display: grid;
+    grid-template-columns: 1fr 400px;
+    gap: 24px;
+    padding: 24px;
+    max-width: 1400px;
+    margin: 0 auto;
+    
+    @media (max-width: 1200px) {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+  }
+  
+  .left-section {
+    .cover-image {
+      position: relative;
+      border-radius: 12px;
+      overflow: hidden;
+      background: white;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      margin-bottom: 24px;
+      
+      .cover-img {
+        width: 100%;
+        height: 500px;
+        object-fit: cover;
+        display: block;
+      }
+      
+      .image-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.3) 0%,
+          transparent 30%,
+          transparent 70%,
+          rgba(0, 0, 0, 0.3) 100%
+        );
+        
+        .case-badges {
+          position: absolute;
+          top: 16px;
+          left: 16px;
+          display: flex;
+          gap: 8px;
+          
+          .badge {
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+            color: white;
+            
+            &.project-type {
+              background: rgba(0, 123, 255, 0.9);
+            }
+            
+            &.space-type {
+              background: rgba(40, 167, 69, 0.9);
+            }
+            
+            &.rendering-level {
+              background: rgba(255, 193, 7, 0.9);
+              color: #212529;
+            }
+          }
+        }
+      }
+    }
+    
+    .basic-info {
+      background: white;
+      padding: 24px;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      
+      .case-name {
+        font-size: 28px;
+        font-weight: 600;
+        color: #212529;
+        margin: 0 0 24px 0;
+        line-height: 1.3;
+      }
+      
+      .meta-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 20px;
+        
+        .meta-item {
+          display: flex;
+          align-items: flex-start;
+          gap: 12px;
+          
+          svg {
+            color: #6c757d;
+            margin-top: 2px;
+            flex-shrink: 0;
+          }
+          
+          .meta-content {
+            flex: 1;
+            
+            .meta-label {
+              display: block;
+              font-size: 12px;
+              color: #6c757d;
+              margin-bottom: 4px;
+              text-transform: uppercase;
+              letter-spacing: 0.5px;
+            }
+            
+            .meta-value {
+              display: block;
+              font-size: 16px;
+              font-weight: 500;
+              color: #212529;
+            }
+            
+            .team-badge {
+              display: inline-block;
+              margin-left: 8px;
+              padding: 2px 8px;
+              background: #e3f2fd;
+              color: #1976d2;
+              border-radius: 12px;
+              font-size: 11px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .right-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    
+    .info-section {
+      background: white;
+      padding: 20px;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #212529;
+        margin: 0 0 16px 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      
+      &.internal-section {
+        border: 2px solid #e3f2fd;
+        background: #fafbfc;
+        
+        .section-title {
+          color: #1976d2;
+        }
+      }
+    }
+    
+    .style-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      
+      .style-tag {
+        padding: 6px 12px;
+        background: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 20px;
+        font-size: 13px;
+        color: #495057;
+        transition: all 0.2s;
+        
+        &:hover {
+          background: #e9ecef;
+          border-color: #adb5bd;
+        }
+      }
+    }
+    
+    .review-content {
+      position: relative;
+      padding: 16px;
+      background: #f8f9fa;
+      border-radius: 8px;
+      border-left: 4px solid #007bff;
+      
+      .quote-icon {
+        position: absolute;
+        top: -8px;
+        left: 12px;
+        font-size: 32px;
+        color: #007bff;
+        background: white;
+        padding: 0 4px;
+      }
+      
+      .review-text {
+        margin: 0;
+        font-style: italic;
+        color: #495057;
+        line-height: 1.6;
+      }
+    }
+    
+    .stats-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 16px;
+      
+      .stat-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        background: #f8f9fa;
+        border-radius: 8px;
+        
+        .stat-icon {
+          width: 40px;
+          height: 40px;
+          background: #007bff;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          flex-shrink: 0;
+          
+          svg {
+            stroke-width: 2;
+          }
+        }
+        
+        .stat-content {
+          flex: 1;
+          
+          .stat-value {
+            display: block;
+            font-size: 20px;
+            font-weight: 600;
+            color: #212529;
+            line-height: 1;
+          }
+          
+          .stat-label {
+            display: block;
+            font-size: 12px;
+            color: #6c757d;
+            margin-top: 2px;
+          }
+        }
+      }
+    }
+    
+    .internal-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      
+      .internal-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px 0;
+        border-bottom: 1px solid #e9ecef;
+        
+        &:last-child {
+          border-bottom: none;
+        }
+        
+        .internal-label {
+          font-size: 13px;
+          color: #6c757d;
+          font-weight: 500;
+        }
+        
+        .internal-value {
+          font-size: 14px;
+          color: #212529;
+          font-weight: 500;
+        }
+        
+        .internal-badge {
+          padding: 4px 12px;
+          border-radius: 12px;
+          font-size: 12px;
+          font-weight: 500;
+          background: #e9ecef;
+          color: #495057;
+          
+          &.excellent {
+            background: #d4edda;
+            color: #155724;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 加载状态
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #f8f9fa;
+  
+  .loading-spinner {
+    text-align: center;
+    
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 4px solid #e9ecef;
+      border-top: 4px solid #007bff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 16px;
+    }
+    
+    p {
+      color: #6c757d;
+      font-size: 14px;
+      margin: 0;
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// 错误状态
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #f8f9fa;
+  
+  .error-content {
+    text-align: center;
+    padding: 40px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    
+    svg {
+      color: #dc3545;
+      margin-bottom: 16px;
+    }
+    
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #212529;
+      margin: 0 0 8px 0;
+    }
+    
+    p {
+      color: #6c757d;
+      margin: 0 0 24px 0;
+      line-height: 1.5;
+    }
+    
+    .btn {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      
+      &.btn-primary {
+        background: #007bff;
+        color: white;
+        
+        &:hover {
+          background: #0056b3;
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .case-detail-page {
+    .page-header {
+      padding: 16px;
+      flex-direction: column;
+      gap: 16px;
+      align-items: stretch;
+      
+      .header-left {
+        flex-direction: column;
+        gap: 12px;
+        align-items: flex-start;
+      }
+      
+      .header-actions {
+        justify-content: center;
+      }
+    }
+    
+    .main-content {
+      padding: 16px;
+      gap: 16px;
+    }
+    
+    .left-section {
+      .cover-image .cover-img {
+        height: 300px;
+      }
+      
+      .basic-info {
+        padding: 16px;
+        
+        .case-name {
+          font-size: 24px;
+        }
+        
+        .meta-grid {
+          grid-template-columns: 1fr;
+          gap: 16px;
+        }
+      }
+    }
+    
+    .right-section .info-section {
+      padding: 16px;
+    }
+  }
+}

src/app/pages/customer-service/case-detail/case-detail.component.ts

@@ -0,0 +1,219 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, Router } from '@angular/router';
+
+interface Case {
+  id: string;
+  name: string;
+  coverImage: string;
+  projectType: '工装' | '家装';
+  spaceType: '平层' | '复式' | '别墅' | '自建房';
+  renderingLevel: '高端' | '中端' | '低端';
+  designer: string;
+  team: string;
+  area: number;
+  styleTags: string[];
+  customerReview?: string;
+  viewCount: number;
+  shareCount: number;
+  favoriteCount: number;
+  isFavorite: boolean;
+  isExcellent: boolean;
+  createdAt: Date;
+}
+
+@Component({
+  selector: 'app-case-detail',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './case-detail.component.html',
+  styleUrls: ['./case-detail.component.scss']
+})
+export class CaseDetailComponent implements OnInit {
+  case: Case | null = null;
+  isInternalUser: boolean = true; // 可根据实际用户权限设置
+  isLoading: boolean = true;
+  caseId: string = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    // 获取路由参数中的案例ID
+    this.route.paramMap.subscribe(params => {
+      this.caseId = params.get('id') || '';
+      if (this.caseId) {
+        this.loadCaseDetail(this.caseId);
+      }
+    });
+  }
+
+  private loadCaseDetail(caseId: string) {
+    this.isLoading = true;
+    
+    // 模拟API调用，实际项目中应该调用真实的API
+    setTimeout(() => {
+      this.case = this.generateMockCase(caseId);
+      this.isLoading = false;
+      
+      // 增加浏览次数
+      if (this.case) {
+        this.case.viewCount++;
+        this.recordBehavior('case_view', this.case.id, {
+          caseName: this.case.name,
+          designer: this.case.designer,
+          projectType: this.case.projectType,
+          spaceType: this.case.spaceType
+        });
+      }
+    }, 500);
+  }
+
+  private generateMockCase(caseId: string): Case {
+    const projectTypes: ('工装' | '家装')[] = ['工装', '家装'];
+    const spaceTypes: ('平层' | '复式' | '别墅' | '自建房')[] = ['平层', '复式', '别墅', '自建房'];
+    const renderingLevels: ('高端' | '中端' | '低端')[] = ['高端', '中端', '低端'];
+    const styles = ['现代', '中式', '欧式', '美式', '日式', '工业风', '极简风', '轻奢风'];
+    const designers = ['张三', '李四', '王五', '赵六', '钱七'];
+    const teams = ['设计一组', '设计二组', '设计三组', '设计四组'];
+
+    const projectType = projectTypes[Math.floor(Math.random() * projectTypes.length)];
+    const spaceType = spaceTypes[Math.floor(Math.random() * spaceTypes.length)];
+    const renderingLevel = renderingLevels[Math.floor(Math.random() * renderingLevels.length)];
+    const styleCount = Math.floor(Math.random() * 3) + 1;
+    const styleTags = Array.from({ length: styleCount }, () => 
+      styles[Math.floor(Math.random() * styles.length)]
+    );
+
+    return {
+      id: caseId,
+      name: `${projectType}${spaceType}设计案例 - ${caseId}`,
+      coverImage: this.generatePlaceholderImage(800, 600, caseId),
+      projectType,
+      spaceType,
+      renderingLevel,
+      designer: designers[Math.floor(Math.random() * designers.length)],
+      team: teams[Math.floor(Math.random() * teams.length)],
+      area: Math.floor(Math.random() * 200) + 50,
+      styleTags: [...new Set(styleTags)], // 去重
+      customerReview: Math.random() > 0.3 ? `客户非常满意这次${projectType}设计，${spaceType}空间利用得很合理，设计师的专业水平很高，整体效果超出预期。` : undefined,
+      viewCount: Math.floor(Math.random() * 1000),
+      shareCount: Math.floor(Math.random() * 100),
+      favoriteCount: Math.floor(Math.random() * 50),
+      isFavorite: Math.random() > 0.7,
+      isExcellent: Math.random() > 0.5,
+      createdAt: new Date(Date.now() - Math.floor(Math.random() * 365 * 24 * 60 * 60 * 1000))
+    };
+  }
+
+  private generatePlaceholderImage(width: number, height: number, seed: string): string {
+    return `https://picsum.photos/seed/${seed}/${width}/${height}`;
+  }
+
+  goBack() {
+    this.router.navigate(['/customer-service/case-library']);
+  }
+
+  toggleFavorite() {
+    if (!this.case) return;
+    
+    const wasLiked = this.case.isFavorite;
+    this.case.isFavorite = !this.case.isFavorite;
+    
+    if (this.case.isFavorite) {
+      this.case.favoriteCount++;
+      this.showToast('已收藏该案例', 'success');
+      
+      this.recordBehavior('case_favorite', this.case.id, {
+        action: 'add',
+        caseName: this.case.name,
+        designer: this.case.designer
+      });
+    } else {
+      this.case.favoriteCount = Math.max(0, this.case.favoriteCount - 1);
+      this.showToast('已取消收藏', 'info');
+      
+      this.recordBehavior('case_favorite', this.case.id, {
+        action: 'remove',
+        caseName: this.case.name,
+        designer: this.case.designer
+      });
+    }
+  }
+
+  shareCase() {
+    if (!this.case) return;
+    
+    this.case.shareCount++;
+    
+    // 生成分享链接
+    const shareLink = this.generateShareLink();
+    
+    // 复制到剪贴板
+    navigator.clipboard.writeText(shareLink).then(() => {
+      this.showToast('分享链接已复制到剪贴板', 'success');
+    }).catch(() => {
+      this.showToast('复制失败，请手动复制链接', 'error');
+    });
+    
+    this.recordBehavior('share', this.case.id, {
+      caseName: this.case.name,
+      designer: this.case.designer,
+      projectType: this.case.projectType
+    });
+  }
+
+  generateShareLink(): string {
+    if (!this.case) return '';
+    return `${window.location.origin}/customer-service/case-detail/${this.case.id}?from=share&designer=${encodeURIComponent(this.case.designer)}`;
+  }
+
+  getFormattedDate(date: Date): string {
+    return new Intl.DateTimeFormat('zh-CN', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    }).format(new Date(date));
+  }
+
+  private recordBehavior(action: string, caseId: string, data?: any) {
+    // 模拟行为记录，实际项目中应该调用真实的API
+    console.log('行为记录:', {
+      action,
+      caseId,
+      data,
+      timestamp: new Date().toISOString(),
+      userAgent: navigator.userAgent
+    });
+  }
+
+  private showToast(message: string, type: 'success' | 'error' | 'info' = 'info') {
+    // 简单的toast实现，实际项目中可以使用更完善的toast库
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+    toast.style.cssText = `
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      padding: 12px 20px;
+      border-radius: 8px;
+      color: white;
+      font-size: 14px;
+      z-index: 10000;
+      animation: slideInRight 0.3s ease-out;
+      background: ${type === 'success' ? '#34c759' : type === 'error' ? '#ff3b30' : '#007aff'};
+    `;
+    
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+      toast.style.animation = 'slideOutRight 0.3s ease-in';
+      setTimeout(() => {
+        document.body.removeChild(toast);
+      }, 300);
+    }, 3000);
+  }
+}

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

@@ -242,6 +242,16 @@
               </div>
             </div>
           }
+
+          <!-- 操作按钮 -->
+          <div class="case-actions">
+            <button class="btn btn-outline" (click)="viewCaseDetail(caseItem)">
+              快速预览
+            </button>
+            <button class="btn btn-primary" (click)="navigateToCaseDetail(caseItem)">
+              查看详情
+            </button>
+          </div>
         </div>
       </div>
     } @empty {

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

@@ -525,6 +525,49 @@ $red-500: #ef4444;
             }
           }
         }
+
+        .case-actions {
+          display: flex;
+          gap: 8px;
+          margin-top: 16px;
+          padding-top: 16px;
+          border-top: 1px solid $border-color;
+
+          .btn {
+            flex: 1;
+            padding: 8px 16px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 500;
+            text-align: center;
+            transition: all 0.2s ease;
+            cursor: pointer;
+            border: none;
+
+            &.btn-outline {
+              background: white;
+              border: 1px solid $border-color;
+              color: $text-secondary;
+
+              &:hover {
+                background: $gray-50;
+                border-color: $primary-color;
+                color: $primary-color;
+              }
+            }
+
+            &.btn-primary {
+              background: $primary-color;
+              color: white;
+
+              &:hover {
+                background: #0051a8;
+                transform: translateY(-1px);
+                box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
+              }
+            }
+          }
+        }
       }
     }
   }

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormControl } from '@angular/forms';
+import { Router } from '@angular/router';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { CaseDetailPanelComponent } from './case-detail-panel.component';
 
@@ -81,6 +82,8 @@ export class CaseLibrary implements OnInit {
   private pageStartTime = Date.now();
   private caseViewStartTimes = new Map<string, number>();
 
+  constructor(private router: Router) {}
+
   ngOnInit() {
     this.initializeData();
     this.setupFilterListeners();
@@ -335,6 +338,26 @@ export class CaseLibrary implements OnInit {
     this.selectedCase = caseItem;
   }
 
+  // 跳转到独立的案例详情页面
+  navigateToCaseDetail(caseItem: Case) {
+    // 记录案例查看开始时间
+    this.caseViewStartTimes.set(caseItem.id, Date.now());
+    
+    // 增加浏览次数
+    caseItem.viewCount++;
+    
+    // 记录浏览行为
+    this.recordBehavior('case_view', caseItem.id, {
+      caseName: caseItem.name,
+      designer: caseItem.designer,
+      projectType: caseItem.projectType,
+      spaceType: caseItem.spaceType
+    });
+    
+    // 跳转到独立的案例详情页面
+    this.router.navigate(['/customer-service/case-detail', caseItem.id]);
+  }
+
   closeCaseDetail() {
     // 记录案例查看时长
     if (this.selectedCase) {
@@ -414,7 +437,7 @@ export class CaseLibrary implements OnInit {
   }
 
   generateShareLink(caseItem: Case): string {
-    return `${window.location.origin}/case/${caseItem.id}?from=share&designer=${encodeURIComponent(caseItem.designer)}`;
+    return `${window.location.origin}/customer-service/case-detail/${caseItem.id}?from=share&designer=${encodeURIComponent(caseItem.designer)}`;
   }
 
   copyShareLink() {

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

@@ -5,59 +5,20 @@
     <div class="header-meta">通过小程序或人工方式创建新订单</div>
     
     <!-- 成功提示 -->
-    <div *ngIf="showSuccessMessage()" class="success-toast">
-      <div class="toast-content">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
-          <polyline points="22 4 12 14.01 9 11.01"></polyline>
-        </svg>
-        <span>表单提交成功！项目已创建</span>
+    @if (showSuccessMessage()) {
+      <div class="success-toast">
+        <div class="toast-content">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+          </svg>
+          <span>表单提交成功！项目已创建</span>
+        </div>
       </div>
-    </div>
+    }
   </header>
 
-  <!-- 订单创建方式选择 -->
-  <section class="creation-method-section">
-    <div class="method-selector">
-      <div class="method-title">订单创建方式</div>
-      <div class="method-options">
-        <button 
-          class="method-option"
-          [class.active]="orderCreationMethod() === 'miniprogram'"
-          (click)="switchOrderCreationMethod('miniprogram')"
-        >
-          <div class="option-icon miniprogram-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
-              <line x1="8" y1="21" x2="16" y2="21"></line>
-              <line x1="12" y1="17" x2="12" y2="21"></line>
-            </svg>
-          </div>
-          <div class="option-content">
-            <div class="option-title">小程序创建</div>
-            <div class="option-desc">从小程序数据库同步信息</div>
-          </div>
-          <div class="option-badge">推荐</div>
-        </button>
-        
-        <button 
-          class="method-option"
-          [class.active]="orderCreationMethod() === 'manual'"
-          (click)="switchOrderCreationMethod('manual')"
-        >
-          <div class="option-icon manual-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
-            </svg>
-          </div>
-          <div class="option-content">
-            <div class="option-title">人工手动创建</div>
-            <div class="option-desc">手动填写客户和项目信息</div>
-          </div>
-        </button>
-      </div>
-    </div>
-  </section>
+
 
   <!-- 主要内容区域 -->
   <div class="main-content">
@@ -237,7 +198,8 @@
     }
 
     <!-- 项目需求卡片（可折叠） -->
-    <section class="info-card requirement-card" *ngIf="isRequirementCardExpanded()">
+    @if (isRequirementCardExpanded()) {
+      <section class="info-card requirement-card">
       <div class="card-header">
         <div class="header-left">
           <div class="icon-wrapper requirement-icon">
@@ -260,8 +222,12 @@
             收起
           </button>
           <button class="btn-primary btn-sm" (click)="syncProjectInfo()" [disabled]="isSyncing()">
-            <mat-spinner *ngIf="isSyncing()" diameter="16"></mat-spinner>
-            <span *ngIf="!isSyncing()">从聊天记录提取</span>
+            @if (isSyncing()) {
+              <mat-spinner diameter="16"></mat-spinner>
+            }
+            @if (!isSyncing()) {
+              <span>从聊天记录提取</span>
+            }
           </button>
         </div>
       </div>
@@ -273,14 +239,18 @@
               <label for="style" class="field-label">装修风格 <span class="required">*</span></label>
               <select id="style" formControlName="style" class="field-select">
                 <option value="">请选择装修风格</option>
-                <option *ngFor="let style of styleOptions" [value]="style">{{ style }}</option>
+                @for (style of styleOptions; track style) {
+                  <option [value]="style">{{ style }}</option>
+                }
               </select>
             </div>
             <div class="form-field">
               <label for="projectGroup" class="field-label">项目小组 <span class="required">*</span></label>
               <select id="projectGroup" formControlName="projectGroup" class="field-select">
                 <option value="">请选择项目小组</option>
-                <option *ngFor="let group of projectGroupOptions" [value]="group">{{ group }}</option>
+                @for (group of projectGroupOptions; track group) {
+                  <option [value]="group">{{ group }}</option>
+                }
               </select>
             </div>
             <div class="form-field">
@@ -298,6 +268,7 @@
         </form>
       </div>
     </section>
+    }
 
 
 
@@ -308,14 +279,22 @@
           (click)="submitForm()"
           [disabled]="isSubmitting() || !customerForm.valid"
         >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" *ngIf="!isSubmitting()">
-            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
-          </svg>
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" *ngIf="isSubmitting()" class="animate-spin">
-            <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
-          </svg>
-          <span *ngIf="!isSubmitting()">创建项目</span>
-          <span *ngIf="isSubmitting()">提交中...</span>
+          @if (!isSubmitting()) {
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
+            </svg>
+          }
+          @if (isSubmitting()) {
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="animate-spin">
+              <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+            </svg>
+          }
+          @if (!isSubmitting()) {
+            <span>创建项目</span>
+          }
+          @if (isSubmitting()) {
+            <span>提交中...</span>
+          }
         </button>
       </div>
     </section>

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

@@ -1,5 +1,5 @@
 import { Component, signal, Inject } from '@angular/core';
-import { CommonModule, NgIf, NgFor } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { ProjectService } from '../../../services/project.service';
@@ -71,8 +71,6 @@ const PREFERENCE_TAG_OPTIONS = [
   standalone: true,
   imports: [
     CommonModule,
-    NgIf,
-    NgFor,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,

src/app/pages/customer-service/consultation-order/project-group-dialog.component.ts

@@ -26,40 +26,50 @@ import { MatIconModule } from '@angular/material/icon';
     <h2 mat-dialog-title>创建项目群</h2>
     <mat-dialog-content>
       <div class="dialog-content">
-        <div class="customer-info" *ngIf="data.selectedCustomer">
-          <h3>客户信息</h3>
-          <p><strong>姓名:</strong> {{ data.selectedCustomer.name }}</p>
-          <p><strong>电话:</strong> {{ data.selectedCustomer.phone }}</p>
-          <p><strong>地址:</strong> {{ data.selectedCustomer.address }}</p>
-        </div>
-        <div class="no-customer" *ngIf="!data.selectedCustomer">
-          <p class="warning-message">请先选择客户</p>
-        </div>
-        
-        <div class="group-details" *ngIf="data.selectedCustomer">
-          <h3>项目群信息</h3>
-          <div class="form-group">
-            <label>需求类型</label>
-            <p>{{ data.demandType || '未设置' }}</p>
-          </div>
-          
-          <div class="form-group" *ngIf="data.preferenceTags && data.preferenceTags.length > 0">
-            <label>偏好标签</label>
-            <mat-chip-grid>
-              <mat-chip *ngFor="let tag of data.preferenceTags">{{ tag }}</mat-chip>
-            </mat-chip-grid>
+        @if (data.selectedCustomer) {
+          <div class="customer-info">
+            <h3>客户信息</h3>
+            <p><strong>姓名:</strong> {{ data.selectedCustomer.name }}</p>
+            <p><strong>电话:</strong> {{ data.selectedCustomer.phone }}</p>
+            <p><strong>地址:</strong> {{ data.selectedCustomer.address }}</p>
           </div>
-          
-          <div class="form-group">
-            <label>跟进状态</label>
-            <p>{{ data.followUpStatus || '未设置' }}</p>
+        }
+        @if (!data.selectedCustomer) {
+          <div class="no-customer">
+            <p class="warning-message">请先选择客户</p>
           </div>
-          
-          <div class="form-group">
-            <label>备注</label>
-            <textarea [(ngModel)]="remarks" rows="3" placeholder="输入群聊备注..."></textarea>
+        }
+        
+        @if (data.selectedCustomer) {
+          <div class="group-details">
+            <h3>项目群信息</h3>
+            <div class="form-group">
+              <label>需求类型</label>
+              <p>{{ data.demandType || '未设置' }}</p>
+            </div>
+            
+            @if (data.preferenceTags && data.preferenceTags.length > 0) {
+              <div class="form-group">
+                <label>偏好标签</label>
+                <mat-chip-grid>
+                  @for (tag of data.preferenceTags; track tag) {
+                    <mat-chip>{{ tag }}</mat-chip>
+                  }
+                </mat-chip-grid>
+              </div>
+            }
+            
+            <div class="form-group">
+              <label>跟进状态</label>
+              <p>{{ data.followUpStatus || '未设置' }}</p>
+            </div>
+            
+            <div class="form-group">
+              <label>备注</label>
+              <textarea [(ngModel)]="remarks" rows="3" placeholder="输入群聊备注..."></textarea>
+            </div>
           </div>
-        </div>
+        }
       </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">

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

@@ -3,6 +3,7 @@ import { Dashboard } from './dashboard/dashboard';
 import { ConsultationListComponent } from './dashboard/pages/consultation-list/consultation-list.component';
 import { AssignmentListComponent } from './dashboard/pages/assignment-list/assignment-list.component';
 import { ExceptionListComponent } from './dashboard/pages/exception-list/exception-list.component';
+import { AfterSalesComponent } from './dashboard/pages/after-sales/after-sales.component';
 
 export const CUSTOMER_SERVICE_ROUTES: Routes = [
   {
@@ -22,5 +23,9 @@ export const CUSTOMER_SERVICE_ROUTES: Routes = [
         component: ExceptionListComponent
       }
     ]
+  },
+  {
+    path: 'after-sales',
+    component: AfterSalesComponent
   }
 ];

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

@@ -68,6 +68,20 @@
         </div>
       </div>
 
+      <div class="stat-card" (click)="handleAfterSalesClick()" title="点击查看售后服务详情">
+        <div class="stat-icon success">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
+          </svg>
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stats.afterSalesCount() }}</div>
+          <div class="stat-label">售后服务</div>
+        </div>
+        <div class="stat-trend positive">
+          <span>+3</span>
+        </div>
+      </div>
 
     </div>
 

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

@@ -20,6 +20,7 @@ export class Dashboard implements OnInit, OnDestroy {
     newConsultations: signal(12),
     pendingAssignments: signal(5),
     exceptionProjects: signal(2),
+    afterSalesCount: signal(15), // 售后服务数量
     // 新增核心指标
     conversionRateToday: signal(36), // 当日成交率（%）
     pendingComplaints: signal(3),   // 待处理投诉数
@@ -560,6 +561,10 @@ export class Dashboard implements OnInit, OnDestroy {
     this.navigateToDetail('exceptions');
   }
 
+  handleAfterSalesClick(): void {
+    this.router.navigate(['/customer-service/after-sales']);
+  }
+
   // 导航到详情页
   private navigateToDetail(type: 'consultations' | 'assignments' | 'exceptions'): void {
     const routeMap = {

src/app/pages/customer-service/dashboard/pages/after-sales/after-sales.component.html

@@ -0,0 +1,774 @@
+<div class="after-sales-container hr-page">
+  <!-- 概览视图 -->
+  @if (currentView() === 'overview') {
+    <header class="page-header">
+      <h1>售后服务</h1>
+      <p class="page-description">管理已完结项目的售后服务，包括尾款管理、客户评价处理和建议收集</p>
+    </header>
+
+    <!-- 统计数据看板 -->
+    <div class="stats-dashboard">
+      <div class="stat-card">
+        <div class="stat-icon total">
+          <mat-icon>assignment</mat-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stats().total }}</div>
+          <div class="stat-label">总项目数</div>
+        </div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon pending">
+          <mat-icon>payment</mat-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stats().pendingPayment }}</div>
+          <div class="stat-label">待收尾款</div>
+        </div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon overdue">
+          <mat-icon>schedule</mat-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stats().overduePayment }}</div>
+          <div class="stat-label">逾期尾款</div>
+        </div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon review">
+          <mat-icon>rate_review</mat-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stats().pendingReview }}</div>
+          <div class="stat-label">待处理评价</div>
+        </div>
+      </div>
+
+      <div class="stat-card">
+        <div class="stat-icon priority">
+          <mat-icon>priority_high</mat-icon>
+        </div>
+        <div class="stat-content">
+          <div class="stat-value">{{ stats().highPriority }}</div>
+          <div class="stat-label">高优先级</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 搜索和筛选栏 -->
+    <div class="filter-bar">
+      <div class="search-section">
+        <mat-form-field appearance="outline" class="search-field ios-select">
+          <mat-label>搜索项目</mat-label>
+          <input matInput 
+                 placeholder="项目编号、项目名称或客户名称" 
+                 [(ngModel)]="searchTerm"
+                 (ngModelChange)="searchTerm.set($event)">
+          <mat-icon matSuffix>search</mat-icon>
+        </mat-form-field>
+      </div>
+
+      <div class="filter-section">
+        <mat-form-field appearance="outline" class="filter-field ios-select">
+          <mat-label>尾款状态</mat-label>
+          <mat-select [(ngModel)]="selectedPaymentStatus" 
+                      (ngModelChange)="selectedPaymentStatus.set($event)">
+            <mat-option value="all">
+              <div class="option-content">
+                <mat-icon>payment</mat-icon>
+                <span>全部</span>
+              </div>
+            </mat-option>
+            <mat-option value="pending">
+              <div class="option-content">
+                <mat-icon>schedule</mat-icon>
+                <span>待收款</span>
+              </div>
+            </mat-option>
+            <mat-option value="partial">
+              <div class="option-content">
+                <mat-icon>partial_fulfillment</mat-icon>
+                <span>部分收款</span>
+              </div>
+            </mat-option>
+            <mat-option value="completed">
+              <div class="option-content">
+                <mat-icon>check_circle</mat-icon>
+                <span>已完成</span>
+              </div>
+            </mat-option>
+            <mat-option value="overdue">
+              <div class="option-content">
+                <mat-icon>warning</mat-icon>
+                <span>逾期</span>
+              </div>
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="filter-field ios-select">
+          <mat-label>评价状态</mat-label>
+          <mat-select [(ngModel)]="selectedReviewStatus" 
+                      (ngModelChange)="selectedReviewStatus.set($event)">
+            <mat-option value="all">
+              <div class="option-content">
+                <mat-icon>star</mat-icon>
+                <span>全部</span>
+              </div>
+            </mat-option>
+            <mat-option value="pending">
+              <div class="option-content">
+                <mat-icon>star_border</mat-icon>
+                <span>待评价</span>
+              </div>
+            </mat-option>
+            <mat-option value="positive">
+              <div class="option-content">
+                <mat-icon>thumb_up</mat-icon>
+                <span>好评</span>
+              </div>
+            </mat-option>
+            <mat-option value="negative">
+              <div class="option-content">
+                <mat-icon>thumb_down</mat-icon>
+                <span>差评</span>
+              </div>
+            </mat-option>
+            <mat-option value="no-review">
+              <div class="option-content">
+                <mat-icon>help_outline</mat-icon>
+                <span>无评价</span>
+              </div>
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="filter-field ios-select">
+          <mat-label>优先级</mat-label>
+          <mat-select [(ngModel)]="selectedPriority" 
+                      (ngModelChange)="selectedPriority.set($event)">
+            <mat-option value="all">
+              <div class="option-content">
+                <mat-icon>priority_high</mat-icon>
+                <span>全部</span>
+              </div>
+            </mat-option>
+            <mat-option value="high">
+              <div class="option-content">
+                <mat-icon>keyboard_double_arrow_up</mat-icon>
+                <span>高</span>
+              </div>
+            </mat-option>
+            <mat-option value="medium">
+              <div class="option-content">
+                <mat-icon>keyboard_arrow_up</mat-icon>
+                <span>中</span>
+              </div>
+            </mat-option>
+            <mat-option value="low">
+              <div class="option-content">
+                <mat-icon>keyboard_arrow_down</mat-icon>
+                <span>低</span>
+              </div>
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+    </div>
+
+    <!-- 项目列表 -->
+    <div class="projects-list">
+      @for (project of filteredProjects(); track project.id) {
+        <div class="project-card" (click)="selectProject(project)">
+          <div class="project-header">
+            <div class="project-info">
+              <h3 class="project-name">{{ project.projectName }}</h3>
+              <div class="project-meta">
+                <span class="project-code">{{ project.projectCode }}</span>
+                <span class="customer-name">{{ project.customerName }}</span>
+                <span class="completion-date">完成于 {{ formatDate(project.completedDate) }}</span>
+              </div>
+            </div>
+            <div class="priority-badge" [class]="getPriorityClass(project.priority)">
+              {{ getPriorityText(project.priority) }}优先级
+            </div>
+          </div>
+
+          <div class="project-content">
+            <!-- 尾款状态 -->
+            <div class="status-section">
+              <div class="status-item">
+                <div class="status-label">尾款状态</div>
+                <div class="status-value">
+                  <span class="status-badge" [class]="getPaymentStatusClass(project.finalPaymentStatus)">
+                    {{ getPaymentStatusText(project.finalPaymentStatus) }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="payment-progress">
+                <div class="progress-info">
+                  <span>{{ formatAmount(project.paidAmount) }} / {{ formatAmount(project.finalPaymentAmount) }}</span>
+                  <span class="progress-percent">{{ getPaymentProgress(project) }}%</span>
+                </div>
+                <div class="progress-bar">
+                  <div class="progress-fill" [style.width.%]="getPaymentProgress(project)"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 评价状态 -->
+            <div class="status-section">
+              <div class="status-item">
+                <div class="status-label">客户评价</div>
+                <div class="status-value">
+                  <span class="status-badge" [class]="getReviewStatusClass(project.reviewStatus)">
+                    {{ getReviewStatusText(project.reviewStatus) }}
+                  </span>
+                  @if (project.reviewScore) {
+                    <div class="review-score">
+                      @for (star of [1,2,3,4,5]; track star) {
+                        <mat-icon [class.filled]="star <= project.reviewScore!">star</mat-icon>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+            </div>
+
+            <!-- 建议数量 -->
+            <div class="status-section">
+              <div class="status-item">
+                <div class="status-label">客户建议</div>
+                <div class="status-value">
+                  <span class="suggestion-count">{{ project.suggestionCount }} 条</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="project-footer">
+            <div class="last-contact">
+              最后联系：{{ formatDate(project.lastContactDate) }}
+            </div>
+            <div class="action-hint">
+              <mat-icon>arrow_forward</mat-icon>
+              点击查看详情
+            </div>
+          </div>
+        </div>
+      } @empty {
+        <div class="empty-state">
+          <mat-icon>inbox</mat-icon>
+          <h3>暂无售后项目</h3>
+          <p>当前筛选条件下没有找到相关项目</p>
+        </div>
+      }
+    </div>
+  }
+
+  <!-- 详情视图 -->
+  @if (currentView() === 'detail' && selectedProject()) {
+    <div class="detail-view">
+      <div class="detail-header">
+        <button class="back-button" (click)="backToOverview()">
+          <mat-icon>arrow_back</mat-icon>
+          返回概览
+        </button>
+        <div class="project-info">
+          <h2>{{ selectedProject()?.projectName }}</h2>
+          <span class="project-code">{{ selectedProject()?.projectCode }}</span>
+          <span class="customer-name">客户：{{ selectedProject()?.customerName }}</span>
+        </div>
+      </div>
+      
+      <!-- 功能模块标签 -->
+      <div class="detail-tabs">
+        <button 
+          class="tab-button"
+          [class.active]="activeDetailTab() === 'payment'"
+          (click)="switchDetailTab('payment')">
+          <mat-icon>payment</mat-icon>
+          尾款管理
+        </button>
+        <button 
+          class="tab-button"
+          [class.active]="activeDetailTab() === 'review'"
+          (click)="switchDetailTab('review')">
+          <mat-icon>star</mat-icon>
+          客户评价处理
+        </button>
+        <button 
+          class="tab-button"
+          [class.active]="activeDetailTab() === 'suggestion'"
+          (click)="switchDetailTab('suggestion')">
+          <mat-icon>feedback</mat-icon>
+          客户建议收集与处理
+        </button>
+      </div>
+      
+      <!-- 尾款管理模块 -->
+      @if (activeDetailTab() === 'payment') {
+        <div class="payment-management">
+          <div class="module-header">
+            <h3>尾款管理</h3>
+            <button class="upload-button" (click)="fileInput.click()" [disabled]="isUploadingFile()">
+              <mat-icon>upload</mat-icon>
+              {{ isUploadingFile() ? '上传中...' : '上传支付凭证' }}
+            </button>
+            <input #fileInput type="file" hidden multiple accept=".jpg,.jpeg,.png,.pdf" 
+                   (change)="handleFileUpload($event)">
+          </div>
+          
+          <div class="payment-summary">
+            <div class="summary-item">
+              <span class="label">应收尾款：</span>
+              <span class="amount">{{ formatCurrency(selectedProject()?.finalPaymentAmount || 0) }}</span>
+            </div>
+            <div class="summary-item">
+              <span class="label">已收金额：</span>
+              <span class="amount paid">{{ formatCurrency(selectedProject()?.paidAmount || 0) }}</span>
+            </div>
+            <div class="summary-item">
+              <span class="label">待收金额：</span>
+              <span class="amount pending">{{ formatCurrency((selectedProject()?.finalPaymentAmount || 0) - (selectedProject()?.paidAmount || 0)) }}</span>
+            </div>
+          </div>
+          
+          @if (selectedProject()?.paymentRecords && selectedProject()?.paymentRecords!.length > 0) {
+            <div class="payment-records">
+              <h4>支付记录</h4>
+              @for (record of selectedProject()?.paymentRecords; track record.id) {
+                <div class="payment-record">
+                  <div class="record-header">
+                    <span class="amount">{{ formatCurrency(record.amount) }}</span>
+                    <span class="status" [class]="'status-' + record.status">
+                      {{ getPaymentRecordStatusText(record.status) }}
+                    </span>
+                    <span class="date">{{ formatDate(record.paymentDate) }}</span>
+                  </div>
+                  <div class="record-details">
+                    <p><strong>支付方式：</strong>{{ record.paymentMethod }}</p>
+                    <p><strong>操作人：</strong>{{ record.operator }}</p>
+                    @if (record.remark) {
+                      <p><strong>备注：</strong>{{ record.remark }}</p>
+                    }
+                    @if (record.voucher) {
+                      <div class="voucher-preview">
+                        <strong>支付凭证：</strong>
+                        @if (record.voucher.previewUrl) {
+                          <img [src]="record.voucher.previewUrl" [alt]="record.voucher.fileName" class="voucher-image">
+                        } @else {
+                          <a [href]="record.voucher.fileUrl" target="_blank" class="voucher-link">
+                            <mat-icon>description</mat-icon>
+                            {{ record.voucher.fileName }}
+                          </a>
+                        }
+                      </div>
+                    }
+                  </div>
+                  
+                  @if (record.statusHistory.length > 0) {
+                    <div class="status-history">
+                      <h5>状态变更记录</h5>
+                      @for (history of record.statusHistory; track history.id) {
+                        <div class="history-item">
+                          <span class="history-date">{{ formatDate(history.changeDate) }}</span>
+                          <span class="history-operator">{{ history.operator }}</span>
+                          <span class="history-status">{{ history.status }}</span>
+                          <span class="history-reason">{{ history.reason }}</span>
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="empty-state">
+              <mat-icon>payment</mat-icon>
+              <p>暂无支付记录</p>
+            </div>
+          }
+        </div>
+      }
+      
+      <!-- 客户评价处理模块 -->
+      @if (activeDetailTab() === 'review') {
+        <div class="review-management">
+          <div class="module-header">
+            <h3>客户评价处理</h3>
+            <button class="add-review-button" (click)="showAddReviewForm = !showAddReviewForm">
+              <mat-icon>add</mat-icon>
+              录入评价
+            </button>
+          </div>
+          
+          @if (showAddReviewForm) {
+            <div class="add-review-form">
+              <div class="form-header">
+                <div class="header-content">
+                  <mat-icon class="header-icon">rate_review</mat-icon>
+                  <h4>录入客户评价</h4>
+                </div>
+                <button type="button" mat-icon-button class="close-button" (click)="showAddReviewForm = false">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </div>
+              
+              <form #reviewForm="ngForm" (ngSubmit)="addReviewRecord(reviewForm.value)" class="review-form">
+                <div class="form-grid">
+                  <div class="form-row">
+                    <mat-form-field class="ios-select" appearance="outline">
+                      <mat-label>反馈渠道</mat-label>
+                      <mat-select name="reviewChannel" ngModel required>
+                        <mat-option value="phone">
+                          <div class="option-content">
+                            <mat-icon>phone</mat-icon>
+                            <span>电话回访</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="wechat">
+                          <div class="option-content">
+                            <mat-icon>chat</mat-icon>
+                            <span>微信沟通</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="email">
+                          <div class="option-content">
+                            <mat-icon>email</mat-icon>
+                            <span>邮件反馈</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="face-to-face">
+                          <div class="option-content">
+                            <mat-icon>person</mat-icon>
+                            <span>面对面交流</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="other">
+                          <div class="option-content">
+                            <mat-icon>more_horiz</mat-icon>
+                            <span>其他渠道</span>
+                          </div>
+                        </mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                    
+                    <mat-form-field class="ios-select" appearance="outline">
+                      <mat-label>评价等级</mat-label>
+                      <mat-select name="rating" ngModel required>
+                        <mat-option value="5">
+                          <div class="option-content rating-option">
+                            <div class="stars">
+                              @for (star of [1,2,3,4,5]; track star) {
+                                <span class="star-icon filled">★</span>
+                              }
+                            </div>
+                            <span>非常满意</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="4">
+                          <div class="option-content rating-option">
+                            <div class="stars">
+                              @for (star of [1,2,3,4]; track star) {
+                                <span class="star-icon filled">★</span>
+                              }
+                              <span class="star-icon">☆</span>
+                            </div>
+                            <span>满意</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="3">
+                          <div class="option-content rating-option">
+                            <div class="stars">
+                              @for (star of [1,2,3]; track star) {
+                                <span class="star-icon filled">★</span>
+                              }
+                              @for (star of [4,5]; track star) {
+                                <span class="star-icon">☆</span>
+                              }
+                            </div>
+                            <span>一般</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="2">
+                          <div class="option-content rating-option">
+                            <div class="stars">
+                              @for (star of [1,2]; track star) {
+                                <span class="star-icon filled">★</span>
+                              }
+                              @for (star of [3,4,5]; track star) {
+                                <span class="star-icon">☆</span>
+                              }
+                            </div>
+                            <span>不满意</span>
+                          </div>
+                        </mat-option>
+                        <mat-option value="1">
+                          <div class="option-content rating-option">
+                            <span class="star-icon filled">★</span>
+                            @for (star of [2,3,4,5]; track star) {
+                              <span class="star-icon">☆</span>
+                            }
+                            <span>非常不满意</span>
+                          </div>
+                        </mat-option>
+                      </mat-select>
+                    </mat-form-field>
+                  </div>
+                  
+                  <mat-form-field class="full-width ios-select" appearance="outline">
+                    <mat-label>评价内容</mat-label>
+                    <textarea matInput rows="4" name="content" ngModel required 
+                              placeholder="请详细描述客户的评价内容，包括满意的方面和需要改进的地方"></textarea>
+                    <mat-hint>请尽量详细记录客户的反馈意见</mat-hint>
+                  </mat-form-field>
+                  
+                  <mat-form-field class="full-width ios-select" appearance="outline">
+                    <mat-label>处理建议</mat-label>
+                    <textarea matInput rows="2" name="remark" ngModel 
+                              placeholder="基于客户评价，提出相应的改进建议或后续处理方案"></textarea>
+                    <mat-hint>可选：添加针对性的改进建议</mat-hint>
+                  </mat-form-field>
+                </div>
+                
+                <div class="form-actions">
+                  <button type="button" mat-stroked-button (click)="showAddReviewForm = false">
+                    <mat-icon>close</mat-icon>
+                    取消
+                  </button>
+                  <button type="submit" mat-raised-button color="primary" [disabled]="isSubmittingForm()">
+                    <mat-icon>{{ isSubmittingForm() ? 'sync' : 'save' }}</mat-icon>
+                    {{ isSubmittingForm() ? '提交中...' : '确认录入' }}
+                  </button>
+                </div>
+              </form>
+            </div>
+          }
+          
+          @if (selectedProject()?.reviewRecords && selectedProject()?.reviewRecords!.length > 0) {
+            <div class="review-records">
+              <h4>评价记录</h4>
+              @for (review of selectedProject()?.reviewRecords; track review.id) {
+                <div class="review-record">
+                  <div class="review-header">
+                    <span class="review-type">{{ review.reviewType === 'system' ? '系统评价' : '手动录入' }}</span>
+                    <span class="review-channel">{{ review.reviewChannel }}</span>
+                    <span class="review-date">{{ formatDate(review.reviewDate) }}</span>
+                    @if (review.score) {
+                      <div class="review-score">
+                        @for (star of [1,2,3,4,5]; track star) {
+                          <mat-icon [class.filled]="star <= review.score!">star</mat-icon>
+                        }
+                      </div>
+                    }
+                  </div>
+                  <div class="review-content">
+                    <p>{{ review.content }}</p>
+                    @if (review.remark) {
+                      <p class="review-remark"><strong>备注：</strong>{{ review.remark }}</p>
+                    }
+                    @if (review.operator) {
+                      <p class="review-operator"><strong>录入人：</strong>{{ review.operator }}</p>
+                    }
+                  </div>
+                  @if (review.followUpReminder) {
+                    <div class="follow-up-reminder">
+                      <mat-icon>schedule</mat-icon>
+                      <span>跟进提醒：{{ formatDate(review.followUpReminder) }}</span>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="empty-state">
+              <mat-icon>star_border</mat-icon>
+              <p>暂无评价记录</p>
+            </div>
+          }
+        </div>
+      }
+      
+      <!-- 客户建议收集与处理模块 -->
+      @if (activeDetailTab() === 'suggestion') {
+        <div class="suggestion-management">
+          <div class="module-header">
+            <h3>客户建议收集与处理</h3>
+          </div>
+          
+          @if (selectedProject()?.suggestions && selectedProject()?.suggestions!.length > 0) {
+            <div class="suggestion-records">
+              @for (suggestion of selectedProject()?.suggestions; track suggestion.id) {
+                <div class="suggestion-record">
+                  <div class="suggestion-header">
+                    <span class="suggestion-category">{{ getSuggestionCategoryLabel(suggestion.category) }}</span>
+                    <span class="suggestion-status" [class]="'status-' + suggestion.status">
+                      {{ getSuggestionStatusText(suggestion.status) }}
+                    </span>
+                    <span class="suggestion-priority" [class]="'priority-' + suggestion.priority">
+                      {{ suggestion.priority === 'high' ? '高优先级' : suggestion.priority === 'medium' ? '中优先级' : '低优先级' }}
+                    </span>
+                    <span class="suggestion-date">{{ formatDate(suggestion.submitDate) }}</span>
+                  </div>
+                  
+                  <div class="suggestion-content">
+                    <p><strong>建议内容：</strong>{{ suggestion.content }}</p>
+                    @if (suggestion.assignee) {
+                      <p><strong>处理人：</strong>{{ suggestion.assignee }}</p>
+                    }
+                    @if (suggestion.response) {
+                      <div class="suggestion-response">
+                        <p><strong>回复内容：</strong>{{ suggestion.response }}</p>
+                        @if (suggestion.responseDate) {
+                          <p><strong>回复时间：</strong>{{ formatDate(suggestion.responseDate) }}</p>
+                        }
+                      </div>
+                    }
+                  </div>
+                  
+                  <div class="suggestion-actions">
+                    @if (suggestion.status !== 'completed' && suggestion.status !== 'rejected') {
+                      <button mat-button (click)="showUpdateForm[suggestion.id] = !showUpdateForm[suggestion.id]">
+                        <mat-icon>edit</mat-icon>
+                        更新状态
+                      </button>
+                    }
+                  </div>
+                  
+                  @if (showUpdateForm[suggestion.id]) {
+                    <div class="update-form">
+                      <div class="update-form-header">
+                        <div class="header-content">
+                          <mat-icon class="header-icon">edit_note</mat-icon>
+                          <h5>更新处理状态</h5>
+                        </div>
+                        <button type="button" mat-icon-button class="close-button" (click)="showUpdateForm[suggestion.id] = false">
+                          <mat-icon>close</mat-icon>
+                        </button>
+                      </div>
+                      
+                      <form #updateForm="ngForm" (ngSubmit)="updateSuggestionStatus(suggestion.id, updateForm.value.status, updateForm.value.response)" class="status-update-form">
+                        <div class="form-grid">
+                          <div class="form-row">
+                            <mat-form-field class="ios-select status-field" appearance="outline">
+                              <mat-label>处理状态</mat-label>
+                              <mat-select name="status" [ngModel]="suggestion.status" required>
+                                <mat-option value="pending">
+                                  <div class="option-content status-option">
+                                    <mat-icon class="status-icon pending">schedule</mat-icon>
+                                    <div class="status-info">
+                                      <span class="status-name">待处理</span>
+                                      <small class="status-desc">等待分配处理人员</small>
+                                    </div>
+                                  </div>
+                                </mat-option>
+                                <mat-option value="processing">
+                                  <div class="option-content status-option">
+                                    <mat-icon class="status-icon processing">sync</mat-icon>
+                                    <div class="status-info">
+                                      <span class="status-name">处理中</span>
+                                      <small class="status-desc">正在积极处理中</small>
+                                    </div>
+                                  </div>
+                                </mat-option>
+                                <mat-option value="completed">
+                                  <div class="option-content status-option">
+                                    <mat-icon class="status-icon completed">check_circle</mat-icon>
+                                    <div class="status-info">
+                                      <span class="status-name">已完成</span>
+                                      <small class="status-desc">建议已采纳并实施</small>
+                                    </div>
+                                  </div>
+                                </mat-option>
+                                <mat-option value="rejected">
+                                  <div class="option-content status-option">
+                                    <mat-icon class="status-icon rejected">cancel</mat-icon>
+                                    <div class="status-info">
+                                      <span class="status-name">已拒绝</span>
+                                      <small class="status-desc">建议不予采纳</small>
+                                    </div>
+                                  </div>
+                                </mat-option>
+                              </mat-select>
+                            </mat-form-field>
+                            
+                            <mat-form-field class="assignee-field ios-select" appearance="outline">
+              <mat-label>处理人员</mat-label>
+              <mat-select name="assignee" [ngModel]="suggestion.assignee">
+                <mat-option value="张三">
+                  <div class="option-content">
+                    <mat-icon>person</mat-icon>
+                    <span>张三 - 客服主管</span>
+                  </div>
+                </mat-option>
+                <mat-option value="李四">
+                  <div class="option-content">
+                    <mat-icon>person</mat-icon>
+                    <span>李四 - 技术支持</span>
+                  </div>
+                </mat-option>
+                <mat-option value="王五">
+                  <div class="option-content">
+                    <mat-icon>person</mat-icon>
+                    <span>王五 - 产品经理</span>
+                  </div>
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+                          </div>
+                          
+                          <mat-form-field class="full-width" appearance="outline">
+                            <mat-label>处理回复</mat-label>
+                            <textarea matInput rows="4" name="response" [ngModel]="suggestion.response" 
+                                      placeholder="请详细说明处理结果、采取的措施或拒绝原因"></textarea>
+                            <mat-hint>请提供详细的处理说明，便于后续跟踪</mat-hint>
+                          </mat-form-field>
+                        </div>
+                        
+                        <div class="form-actions">
+                          <button type="button" mat-stroked-button (click)="showUpdateForm[suggestion.id] = false">
+                            <mat-icon>close</mat-icon>
+                            取消
+                          </button>
+                          <button type="submit" mat-raised-button color="primary" [disabled]="isSubmittingForm()">
+                            <mat-icon>{{ isSubmittingForm() ? 'sync' : 'update' }}</mat-icon>
+                            {{ isSubmittingForm() ? '更新中...' : '确认更新' }}
+                          </button>
+                        </div>
+                      </form>
+                    </div>
+                  }
+                  
+                  @if (suggestion.statusHistory.length > 0) {
+                    <div class="status-history">
+                      <h5>处理记录</h5>
+                      @for (history of suggestion.statusHistory; track history.id) {
+                        <div class="history-item">
+                          <span class="history-date">{{ formatDate(history.changeDate) }}</span>
+                          <span class="history-operator">{{ history.operator }}</span>
+                          <span class="history-status">{{ history.status }}</span>
+                          <span class="history-remark">{{ history.remark }}</span>
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="empty-state">
+              <mat-icon>feedback</mat-icon>
+              <p>暂无客户建议</p>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  }
+</div>

src/app/pages/customer-service/dashboard/pages/after-sales/after-sales.component.scss

@@ -0,0 +1,2012 @@
+// 引入iOS主题样式
+@use '../../../../../shared/styles/ios-theme' as ios;
+@use '../../../../../shared/styles/variables';
+
+// 参考HR考勤页面的设计风格，使用iOS主题变量
+$primary-color: ios.$ios-primary;
+$primary-light: #3b82f6;
+$secondary-color: #0d9488;
+$success-color: ios.$ios-success;
+$warning-color: ios.$ios-warning;
+$error-color: ios.$ios-error;
+$info-color: ios.$ios-info;
+$text-primary: ios.$ios-text-primary;
+$text-secondary: ios.$ios-text-secondary;
+$text-tertiary: ios.$ios-text-tertiary;
+$bg-primary: ios.$ios-background;
+$bg-secondary: ios.$ios-background-secondary;
+$bg-tertiary: ios.$ios-background-tertiary;
+$border-color: ios.$ios-border;
+$shadow-sm: ios.$ios-shadow-sm;
+$shadow-md: ios.$ios-shadow-md;
+$shadow-lg: ios.$ios-shadow-lg;
+$border-radius: ios.$ios-radius-md;
+$transition: all 0.2s ease;
+
+// 主容器样式
+.after-sales-container {
+  padding: 24px;
+  min-height: 100vh;
+  background-color: $bg-secondary;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+// 页面标题
+.page-header {
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid $border-color;
+
+  h1 {
+    font-size: 28px;
+    font-weight: 700;
+    color: $text-primary;
+    margin: 0 0 8px 0;
+  }
+
+  .page-description {
+    font-size: 16px;
+    color: $text-secondary;
+    margin: 0;
+  }
+}
+
+// 统计数据看板
+.stats-dashboard {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+
+  .stat-card {
+    background-color: $bg-primary;
+    border-radius: $border-radius;
+    padding: 20px;
+    box-shadow: $shadow-sm;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    transition: $transition;
+
+    &: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;
+
+      &.total {
+        background-color: $primary-color;
+      }
+
+      &.pending {
+        background-color: $warning-color;
+      }
+
+      &.overdue {
+        background-color: $error-color;
+      }
+
+      &.review {
+        background-color: $secondary-color;
+      }
+
+      &.priority {
+        background-color: $info-color;
+      }
+
+      mat-icon {
+        font-size: 24px;
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .stat-content {
+      flex: 1;
+
+      .stat-value {
+        font-size: 24px;
+        font-weight: 700;
+        color: $text-primary;
+        margin-bottom: 4px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        color: $text-secondary;
+      }
+    }
+  }
+}
+
+// 搜索和筛选栏
+.filter-bar {
+  background-color: $bg-primary;
+  border-radius: $border-radius;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: $shadow-sm;
+
+  .search-section {
+    margin-bottom: ios.$ios-spacing-md;
+
+    .search-field {
+      width: 100%;
+      max-width: 400px;
+      
+      .mat-mdc-form-field {
+        border-radius: ios.$ios-radius-md;
+        font-family: ios.$ios-font-family;
+        
+        .mat-mdc-text-field-wrapper {
+          background: white;
+          border: 1px solid ios.$ios-border;
+          border-radius: ios.$ios-radius-md;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: ios.$ios-primary;
+          }
+        }
+
+        .mat-mdc-form-field-infix {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+          padding: ios.$ios-spacing-sm;
+        }
+
+        &.mat-focused .mat-mdc-text-field-wrapper {
+          border-color: ios.$ios-primary;
+          box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
+        }
+      }
+    }
+  }
+
+  .filter-section {
+    display: flex;
+    gap: ios.$ios-spacing-md;
+    flex-wrap: wrap;
+
+    .filter-field {
+      min-width: 150px;
+      
+      .mat-mdc-form-field {
+        border-radius: ios.$ios-radius-md;
+        font-family: ios.$ios-font-family;
+        
+        .mat-mdc-text-field-wrapper {
+          background: white;
+          border: 1px solid ios.$ios-border;
+          border-radius: ios.$ios-radius-md;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: ios.$ios-primary;
+          }
+        }
+
+        .mat-mdc-form-field-infix {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+          padding: ios.$ios-spacing-sm;
+        }
+
+        // 选择框样式
+        .mat-mdc-select-value {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+          padding: ios.$ios-spacing-sm 0;
+        }
+
+        .mat-mdc-select-arrow {
+          color: ios.$ios-text-secondary;
+          transition: transform 0.3s ease;
+        }
+
+        &.mat-focused {
+          .mat-mdc-text-field-wrapper {
+            border-color: ios.$ios-primary;
+            box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
+          }
+          
+          .mat-mdc-select-arrow {
+            color: ios.$ios-primary;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 项目列表
+.projects-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .project-card {
+    background-color: $bg-primary;
+    border-radius: $border-radius;
+    padding: 24px;
+    box-shadow: $shadow-sm;
+    cursor: pointer;
+    transition: $transition;
+    border: 2px solid transparent;
+
+    &:hover {
+      box-shadow: $shadow-md;
+      transform: translateY(-2px);
+      border-color: $primary-light;
+    }
+
+    .project-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 16px;
+
+      .project-info {
+        flex: 1;
+
+        .project-name {
+          font-size: 18px;
+          font-weight: 600;
+          color: $text-primary;
+          margin: 0 0 8px 0;
+        }
+
+        .project-meta {
+          display: flex;
+          gap: 16px;
+          flex-wrap: wrap;
+
+          span {
+            font-size: 14px;
+            color: $text-secondary;
+
+            &.project-code {
+              font-weight: 500;
+              color: $primary-color;
+            }
+          }
+        }
+      }
+
+      .priority-badge {
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 500;
+
+        &.priority-high {
+          background-color: rgba($error-color, 0.1);
+          color: $error-color;
+        }
+
+        &.priority-medium {
+          background-color: rgba($warning-color, 0.1);
+          color: $warning-color;
+        }
+
+        &.priority-low {
+          background-color: rgba($success-color, 0.1);
+          color: $success-color;
+        }
+      }
+    }
+
+    .project-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 20px;
+      margin-bottom: 16px;
+
+      .status-section {
+        .status-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 8px;
+
+          .status-label {
+            font-size: 14px;
+            color: $text-secondary;
+            font-weight: 500;
+          }
+
+          .status-value {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+
+            .status-badge {
+              padding: 4px 8px;
+              border-radius: 4px;
+              font-size: 12px;
+              font-weight: 500;
+
+              &.status-pending {
+                background-color: rgba($warning-color, 0.1);
+                color: $warning-color;
+              }
+
+              &.status-partial {
+                background-color: rgba($info-color, 0.1);
+                color: $info-color;
+              }
+
+              &.status-completed {
+                background-color: rgba($success-color, 0.1);
+                color: $success-color;
+              }
+
+              &.status-overdue {
+                background-color: rgba($error-color, 0.1);
+                color: $error-color;
+              }
+
+              &.review-pending {
+                background-color: rgba($warning-color, 0.1);
+                color: $warning-color;
+              }
+
+              &.review-positive {
+                background-color: rgba($success-color, 0.1);
+                color: $success-color;
+              }
+
+              &.review-negative {
+                background-color: rgba($error-color, 0.1);
+                color: $error-color;
+              }
+
+              &.review-none {
+                background-color: rgba($text-tertiary, 0.1);
+                color: $text-tertiary;
+              }
+            }
+
+            .review-score {
+              display: flex;
+              gap: 2px;
+
+              mat-icon {
+                font-size: 16px;
+                width: 16px;
+                height: 16px;
+                color: $text-tertiary;
+
+                &.filled {
+                  color: $warning-color;
+                }
+              }
+            }
+
+            .suggestion-count {
+              font-size: 14px;
+              font-weight: 500;
+              color: $text-primary;
+            }
+          }
+        }
+
+        .payment-progress {
+          margin-top: 8px;
+
+          .progress-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 4px;
+            font-size: 12px;
+            color: $text-secondary;
+
+            .progress-percent {
+              font-weight: 600;
+              color: $text-primary;
+            }
+          }
+
+          .progress-bar {
+            width: 100%;
+            height: 6px;
+            background-color: $bg-tertiary;
+            border-radius: 3px;
+            overflow: hidden;
+
+            .progress-fill {
+              height: 100%;
+              background-color: $success-color;
+              transition: width 0.3s ease;
+            }
+          }
+        }
+      }
+    }
+
+    .project-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-top: 16px;
+      border-top: 1px solid $border-color;
+
+      .last-contact {
+        font-size: 14px;
+        color: $text-secondary;
+      }
+
+      .action-hint {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 14px;
+        color: $primary-color;
+        font-weight: 500;
+
+        mat-icon {
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 60px 20px;
+    background-color: $bg-primary;
+    border-radius: $border-radius;
+    box-shadow: $shadow-sm;
+
+    mat-icon {
+      font-size: 64px;
+      width: 64px;
+      height: 64px;
+      color: $text-tertiary;
+      margin-bottom: 16px;
+    }
+
+    h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: $text-primary;
+      margin: 0 0 8px 0;
+    }
+
+    p {
+      font-size: 14px;
+      color: $text-secondary;
+      margin: 0;
+    }
+  }
+}
+
+// 详情视图
+.detail-view {
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 2px solid $border-color;
+
+    .back-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: transparent;
+      border: 1px solid $border-color;
+      border-radius: $border-radius;
+      color: $text-secondary;
+      cursor: pointer;
+      transition: $transition;
+      font-size: 14px;
+
+      &:hover {
+        color: $primary-color;
+        background-color: $bg-tertiary;
+        border-color: $primary-color;
+      }
+
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .project-info {
+      flex: 1;
+
+      h1 {
+        font-size: 24px;
+        font-weight: 700;
+        color: $text-primary;
+        margin: 0 0 8px 0;
+      }
+
+      .project-code,
+      .customer-name {
+        display: inline-block;
+        margin-right: 16px;
+        font-size: 14px;
+        color: $text-secondary;
+
+        &.project-code {
+          font-weight: 500;
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  // 详情页面标签
+  .detail-tabs {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 24px;
+    border-bottom: 1px solid $border-color;
+
+    .tab-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: $text-secondary;
+      cursor: pointer;
+      transition: $transition;
+      font-size: 14px;
+      font-weight: 500;
+
+      &:hover {
+        color: $primary-color;
+        background-color: $bg-tertiary;
+      }
+
+      &.active {
+        color: $primary-color;
+        border-bottom-color: $primary-color;
+        background-color: $bg-tertiary;
+      }
+
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+  }
+
+  // 模块通用样式
+  .module-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+
+    h3 {
+      margin: 0;
+      color: $text-primary;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .upload-button,
+    .add-review-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background-color: $primary-color;
+      color: white;
+      border: none;
+      border-radius: $border-radius;
+      cursor: pointer;
+      transition: $transition;
+      font-size: 14px;
+
+      &:hover:not(:disabled) {
+        background-color: $primary-light;
+        transform: translateY(-1px);
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      mat-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  // 尾款管理模块
+  .payment-management {
+    .payment-summary {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+      margin-bottom: 24px;
+
+      .summary-item {
+        padding: 16px;
+        background-color: $bg-primary;
+        border: 1px solid $border-color;
+        border-radius: $border-radius;
+
+        .label {
+          display: block;
+          color: $text-secondary;
+          font-size: 12px;
+          margin-bottom: 8px;
+        }
+
+        .amount {
+          font-size: 18px;
+          font-weight: 600;
+          color: $text-primary;
+
+          &.paid {
+            color: $success-color;
+          }
+
+          &.pending {
+            color: $warning-color;
+          }
+        }
+      }
+    }
+
+    .payment-records {
+      h4 {
+        margin: 0 0 16px 0;
+        color: $text-primary;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .payment-record {
+        background-color: $bg-primary;
+        border: 1px solid $border-color;
+        border-radius: $border-radius;
+        padding: 16px;
+        margin-bottom: 16px;
+
+        .record-header {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          margin-bottom: 12px;
+
+          .amount {
+            font-size: 16px;
+            font-weight: 600;
+            color: $text-primary;
+          }
+
+          .status {
+            padding: 4px 8px;
+            border-radius: $border-radius;
+            font-size: 12px;
+            font-weight: 500;
+
+            &.status-pending {
+              background-color: rgba($warning-color, 0.1);
+              color: $warning-color;
+            }
+
+            &.status-verified {
+              background-color: rgba($success-color, 0.1);
+              color: $success-color;
+            }
+
+            &.status-rejected {
+              background-color: rgba($error-color, 0.1);
+              color: $error-color;
+            }
+          }
+
+          .date {
+            color: $text-secondary;
+            font-size: 14px;
+          }
+        }
+
+        .record-details {
+          margin-bottom: 12px;
+
+          p {
+            margin: 4px 0;
+            color: $text-primary;
+            font-size: 14px;
+          }
+
+          .voucher-preview {
+            margin-top: 8px;
+
+            .voucher-image {
+              max-width: 200px;
+              max-height: 150px;
+              border-radius: $border-radius;
+              border: 1px solid $border-color;
+              margin-left: 8px;
+            }
+
+            .voucher-link {
+              display: inline-flex;
+              align-items: center;
+              gap: 4px;
+              color: $primary-color;
+              text-decoration: none;
+              margin-left: 8px;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+
+        .status-history {
+          margin-top: ios.$ios-spacing-md;
+          background: ios.$ios-background-tertiary;
+          border-radius: ios.$ios-radius-md;
+          padding: ios.$ios-spacing-md;
+
+          h5 {
+            margin: 0 0 ios.$ios-spacing-sm 0;
+            color: ios.$ios-text-primary;
+            font-size: ios.$ios-font-size-headline;
+            font-weight: ios.$ios-font-weight-semibold;
+            font-family: ios.$ios-font-family;
+            display: flex;
+            align-items: center;
+            gap: ios.$ios-spacing-xs;
+
+            &::before {
+              content: '📋';
+              font-size: ios.$ios-font-size-body;
+            }
+          }
+
+          .history-item {
+            display: grid;
+            grid-template-columns: auto auto auto 1fr;
+            gap: ios.$ios-spacing-sm;
+            padding: ios.$ios-spacing-xs 0;
+            font-size: ios.$ios-font-size-caption-1;
+            color: ios.$ios-text-secondary;
+            font-family: ios.$ios-font-family;
+            border-bottom: 1px solid ios.$ios-border;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            .history-date {
+              color: ios.$ios-text-primary;
+              font-weight: ios.$ios-font-weight-medium;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 客户评价处理模块
+  .review-management {
+    .add-review-form {
+      background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+      border: 1px solid rgba(0, 122, 255, 0.1);
+      border-radius: 20px;
+      margin-bottom: 24px;
+      box-shadow: 
+        0 8px 32px rgba(0, 0, 0, 0.08),
+        0 2px 8px rgba(0, 0, 0, 0.04);
+      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+      position: relative;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: linear-gradient(90deg, #007aff, #5ac8fa, #34c759);
+        border-radius: 20px 20px 0 0;
+      }
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 
+          0 12px 40px rgba(0, 0, 0, 0.12),
+          0 4px 16px rgba(0, 0, 0, 0.08);
+      }
+
+      .form-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 24px 16px;
+        border-bottom: 1px solid rgba(0, 122, 255, 0.1);
+        margin-bottom: 20px;
+
+        .header-content {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+
+          .header-icon {
+            color: ios.$ios-primary;
+            font-size: 24px;
+            width: 24px;
+            height: 24px;
+          }
+
+          h4 {
+            margin: 0;
+            color: #1d1d1f;
+            font-size: 20px;
+            font-weight: 700;
+            font-family: ios.$ios-font-family;
+          }
+        }
+
+        .close-button {
+          color: ios.$ios-text-secondary;
+          transition: all 0.2s ease;
+
+          &:hover {
+            color: ios.$ios-primary;
+            background: rgba(0, 122, 255, 0.1);
+          }
+        }
+      }
+
+      .review-form {
+        padding: 0 24px 24px;
+
+        .form-grid {
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
+
+          .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+
+            @media (max-width: 768px) {
+              grid-template-columns: 1fr;
+            }
+          }
+        }
+      }
+
+      // 评价等级选项样式
+      .rating-option {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .stars {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+        }
+
+        .star-icon {
+          font-size: 16px;
+          line-height: 1;
+          display: inline-block;
+          user-select: none;
+
+          &.filled {
+            color: #FFD700;
+          }
+
+          &:not(.filled) {
+            color: #E0E0E0;
+          }
+        }
+      }
+
+      // 表单字段样式 - 采用人事板块的ios-select样式
+      .mat-mdc-form-field {
+        width: 100%;
+        border-radius: ios.$ios-radius-md;
+        font-family: ios.$ios-font-family;
+        margin-bottom: ios.$ios-spacing-sm;
+        
+        &.ios-select {
+          .mat-mdc-form-field-outline {
+            border-radius: 12px;
+            border-color: rgba(0, 122, 255, 0.3);
+          }
+
+          .mat-mdc-form-field-outline-thick {
+            border-color: #007AFF;
+            border-width: 2px;
+          }
+
+          .mat-mdc-select-trigger {
+            padding: 12px 16px;
+            font-size: 16px;
+            color: #333;
+            min-height: 24px;
+            display: flex;
+            align-items: center;
+          }
+
+          .mat-mdc-select-arrow {
+            color: #007AFF;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.3s ease;
+          }
+
+          .mat-mdc-select-value {
+            display: flex;
+            align-items: center;
+            min-height: 24px;
+            color: #333;
+            font-family: ios.$ios-font-family;
+            font-size: 16px;
+          }
+
+          &.mat-focused {
+            .mat-mdc-select-arrow {
+              color: #007AFF;
+              transform: rotate(180deg);
+            }
+          }
+        }
+        
+        .mat-mdc-text-field-wrapper {
+          background: white;
+          border: 1px solid ios.$ios-border;
+          border-radius: ios.$ios-radius-md;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: ios.$ios-primary;
+          }
+        }
+
+        .mat-mdc-form-field-infix {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+          padding: ios.$ios-spacing-sm;
+        }
+
+        .mat-mdc-form-field-subscript-wrapper {
+          color: ios.$ios-text-secondary;
+          font-family: ios.$ios-font-family;
+          font-weight: ios.$ios-font-weight-medium;
+        }
+
+        .mat-mdc-form-field-error {
+          color: ios.$ios-error;
+          font-family: ios.$ios-font-family;
+          font-size: ios.$ios-font-size-caption-1;
+          margin-top: ios.$ios-spacing-xs;
+        }
+
+        // 输入框样式
+        .mat-mdc-input-element {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+        }
+
+        &.mat-focused .mat-mdc-input-element {
+          color: ios.$ios-text-primary;
+        }
+      }
+
+      .form-actions {
+        display: flex;
+        gap: ios.$ios-spacing-sm;
+        justify-content: flex-end;
+        margin-top: ios.$ios-spacing-md;
+        padding-top: ios.$ios-spacing-md;
+        border-top: 1px solid ios.$ios-border;
+
+        .mat-mdc-button {
+          font-family: ios.$ios-font-family;
+          border-radius: ios.$ios-radius-md;
+          padding: ios.$ios-spacing-sm ios.$ios-spacing-lg;
+          font-weight: ios.$ios-font-weight-medium;
+
+          &.mat-primary {
+            background: ios.$ios-primary;
+            color: white;
+            border: none;
+
+            &:hover {
+              background: #0056CC;
+              box-shadow: ios.$ios-shadow-sm;
+            }
+
+            &:disabled {
+              background: ios.$ios-text-tertiary;
+              color: white;
+            }
+          }
+
+          &.mat-stroked-button {
+            border: 1px solid ios.$ios-border;
+            color: ios.$ios-text-secondary;
+
+            &:hover {
+              color: ios.$ios-primary;
+              border-color: ios.$ios-primary;
+              box-shadow: ios.$ios-shadow-sm;
+            }
+          }
+
+          &:active {
+            transform: translateY(1px);
+          }
+        }
+      }
+    }
+
+    .review-records {
+      h4 {
+        margin: 0 0 ios.$ios-spacing-md 0;
+        color: ios.$ios-text-primary;
+        font-size: ios.$ios-font-size-body;
+        font-weight: ios.$ios-font-weight-semibold;
+        font-family: ios.$ios-font-family;
+        display: flex;
+        align-items: center;
+        gap: ios.$ios-spacing-xs;
+
+        &::before {
+          content: '';
+          width: 4px;
+          height: 20px;
+          background: ios.$ios-primary;
+          border-radius: 2px;
+        }
+      }
+
+      .review-record {
+        background: ios.$ios-card-background;
+        border: 1px solid ios.$ios-border;
+        border-radius: ios.$ios-radius-lg;
+        padding: ios.$ios-spacing-lg;
+        margin-bottom: ios.$ios-spacing-md;
+        box-shadow: ios.$ios-shadow-sm;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: ios.$ios-shadow-md;
+        }
+
+        .review-header {
+          display: flex;
+          align-items: center;
+          gap: ios.$ios-spacing-md;
+          margin-bottom: ios.$ios-spacing-sm;
+
+          .review-type,
+          .review-channel {
+            padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
+            background-color: rgba(ios.$ios-primary, 0.1);
+            color: ios.$ios-primary;
+            border-radius: ios.$ios-radius-md;
+            font-size: ios.$ios-font-size-caption-1;
+            font-weight: ios.$ios-font-weight-medium;
+            font-family: ios.$ios-font-family;
+          }
+
+          .review-date {
+            color: ios.$ios-text-secondary;
+            font-size: ios.$ios-font-size-subhead;
+            font-family: ios.$ios-font-family;
+          }
+
+          .review-score {
+            display: flex;
+            gap: 2px;
+
+            mat-icon {
+              font-size: 16px;
+              width: 16px;
+              height: 16px;
+              color: ios.$ios-border;
+
+              &.filled {
+                color: ios.$ios-warning;
+              }
+            }
+          }
+        }
+
+        .review-content {
+          background: ios.$ios-background-secondary;
+          border-radius: ios.$ios-radius-md;
+          padding: ios.$ios-spacing-md;
+
+          p {
+            margin: ios.$ios-spacing-xs 0;
+            color: ios.$ios-text-primary;
+            font-size: ios.$ios-font-size-subhead;
+            font-family: ios.$ios-font-family;
+            line-height: 1.5;
+          }
+
+          .review-remark,
+          .review-operator {
+            color: ios.$ios-text-secondary;
+            font-size: ios.$ios-font-size-caption-1;
+            font-family: ios.$ios-font-family;
+          }
+        }
+
+        .follow-up-reminder {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin-top: 12px;
+          padding: 8px;
+          background-color: rgba($warning-color, 0.1);
+          border-radius: $border-radius;
+          color: $warning-color;
+          font-size: 12px;
+
+          mat-icon {
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  // 客户建议收集与处理模块
+  .suggestion-management {
+    h3 {
+      margin: 0 0 ios.$ios-spacing-lg 0;
+      color: ios.$ios-text-primary;
+      font-size: ios.$ios-font-size-title-3;
+      font-weight: ios.$ios-font-weight-semibold;
+      font-family: ios.$ios-font-family;
+      display: flex;
+      align-items: center;
+      gap: ios.$ios-spacing-sm;
+
+      &::before {
+        content: '';
+        width: 4px;
+        height: 24px;
+        background: ios.$ios-primary;
+        border-radius: 2px;
+      }
+    }
+
+    .suggestion-records {
+      .suggestion-record {
+        background: ios.$ios-card-background;
+        border: 1px solid ios.$ios-border;
+        border-radius: ios.$ios-radius-lg;
+        padding: ios.$ios-spacing-lg;
+        margin-bottom: ios.$ios-spacing-md;
+        box-shadow: ios.$ios-shadow-md;
+        transition: all 0.3s ease;
+
+        &:hover {
+          transform: translateY(-2px);
+          box-shadow: ios.$ios-shadow-lg;
+        }
+
+        .suggestion-header {
+          display: flex;
+          align-items: center;
+          gap: ios.$ios-spacing-md;
+          margin-bottom: ios.$ios-spacing-sm;
+
+          .suggestion-category {
+            padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
+            background-color: rgba(ios.$ios-primary, 0.1);
+            color: ios.$ios-primary;
+            border-radius: ios.$ios-radius-md;
+            font-size: ios.$ios-font-size-caption-1;
+            font-weight: ios.$ios-font-weight-medium;
+            font-family: ios.$ios-font-family;
+          }
+
+          .suggestion-status {
+            padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
+            border-radius: ios.$ios-radius-md;
+            font-size: ios.$ios-font-size-caption-1;
+            font-weight: ios.$ios-font-weight-medium;
+            font-family: ios.$ios-font-family;
+
+            &.status-pending {
+              background-color: rgba(ios.$ios-warning, 0.1);
+              color: ios.$ios-warning;
+            }
+
+            &.status-processing {
+              background-color: rgba(ios.$ios-primary, 0.1);
+              color: ios.$ios-primary;
+            }
+
+            &.status-completed {
+              background-color: rgba(ios.$ios-success, 0.1);
+              color: ios.$ios-success;
+            }
+
+            &.status-rejected {
+              background-color: rgba(ios.$ios-error, 0.1);
+              color: ios.$ios-error;
+            }
+          }
+
+          .suggestion-priority {
+            padding: ios.$ios-spacing-xs ios.$ios-spacing-sm;
+            border-radius: ios.$ios-radius-md;
+            font-size: ios.$ios-font-size-caption-1;
+            font-weight: ios.$ios-font-weight-medium;
+            font-family: ios.$ios-font-family;
+
+            &.priority-high {
+              background-color: rgba(ios.$ios-error, 0.1);
+              color: ios.$ios-error;
+            }
+
+            &.priority-medium {
+              background-color: rgba(ios.$ios-warning, 0.1);
+              color: ios.$ios-warning;
+            }
+
+            &.priority-low {
+              background-color: rgba(ios.$ios-success, 0.1);
+              color: ios.$ios-success;
+            }
+          }
+
+          .suggestion-date {
+            color: ios.$ios-text-secondary;
+            font-size: ios.$ios-font-size-subhead;
+            font-family: ios.$ios-font-family;
+          }
+        }
+
+        .suggestion-content {
+          background: ios.$ios-background-secondary;
+          border-radius: ios.$ios-radius-md;
+          padding: ios.$ios-spacing-md;
+          margin-bottom: ios.$ios-spacing-sm;
+
+          p {
+            margin: ios.$ios-spacing-xs 0;
+            color: ios.$ios-text-primary;
+            font-size: ios.$ios-font-size-subhead;
+            font-family: ios.$ios-font-family;
+            line-height: 1.5;
+          }
+
+          .suggestion-response {
+            margin-top: ios.$ios-spacing-sm;
+            padding: ios.$ios-spacing-sm;
+            background: ios.$ios-background-tertiary;
+            border-radius: ios.$ios-radius-sm;
+            border-left: 3px solid ios.$ios-primary;
+          }
+        }
+
+        .suggestion-actions {
+          margin-bottom: ios.$ios-spacing-sm;
+
+          .mat-mdc-button {
+            font-family: ios.$ios-font-family;
+            border-radius: ios.$ios-radius-md;
+            padding: ios.$ios-spacing-xs ios.$ios-spacing-md;
+            font-weight: ios.$ios-font-weight-medium;
+            font-size: ios.$ios-font-size-caption-1;
+
+            &.mat-stroked-button {
+              border: 1px solid ios.$ios-border;
+              color: ios.$ios-text-secondary;
+
+              &:hover {
+                color: ios.$ios-primary;
+                border-color: ios.$ios-primary;
+                box-shadow: ios.$ios-shadow-sm;
+              }
+            }
+          }
+        }
+
+        .update-form {
+          background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+          border-radius: ios.$ios-radius-lg;
+          margin-top: ios.$ios-spacing-md;
+          margin-bottom: ios.$ios-spacing-sm;
+          border: 1px solid rgba(0, 122, 255, 0.1);
+          box-shadow: 
+            0 8px 32px rgba(0, 0, 0, 0.08),
+            0 2px 8px rgba(0, 0, 0, 0.04);
+          transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+          position: relative;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #007aff, #5ac8fa);
+            border-radius: ios.$ios-radius-lg ios.$ios-radius-lg 0 0;
+          }
+
+          .update-form-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 20px 12px;
+            border-bottom: 1px solid rgba(0, 122, 255, 0.1);
+            margin-bottom: 16px;
+
+            .header-content {
+              display: flex;
+              align-items: center;
+              gap: 10px;
+
+              .header-icon {
+                color: ios.$ios-primary;
+                font-size: 20px;
+                width: 20px;
+                height: 20px;
+              }
+
+              h5 {
+                margin: 0;
+                color: #1d1d1f;
+                font-size: 16px;
+                font-weight: 600;
+                font-family: ios.$ios-font-family;
+              }
+            }
+
+            .close-button {
+              color: ios.$ios-text-secondary;
+              transition: all 0.2s ease;
+
+              &:hover {
+                color: ios.$ios-primary;
+                background: rgba(0, 122, 255, 0.1);
+              }
+            }
+          }
+
+          .status-update-form {
+            padding: 0 20px 20px;
+
+            .form-grid {
+              display: flex;
+              flex-direction: column;
+              gap: 16px;
+
+              .form-row {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 16px;
+
+                @media (max-width: 768px) {
+                  grid-template-columns: 1fr;
+                }
+              }
+            }
+          }
+
+          // 状态选项样式
+          .status-option {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .status-icon {
+              font-size: 18px;
+              width: 18px;
+              height: 18px;
+
+              &.pending {
+                color: ios.$ios-warning;
+              }
+
+              &.processing {
+                color: ios.$ios-primary;
+              }
+
+              &.completed {
+                color: ios.$ios-success;
+              }
+
+              &.rejected {
+                color: ios.$ios-error;
+              }
+            }
+
+            .status-info {
+              display: flex;
+              flex-direction: column;
+              gap: 2px;
+
+              .status-name {
+                font-weight: 500;
+                font-size: 14px;
+              }
+
+              .status-desc {
+                font-size: 12px;
+                color: ios.$ios-text-tertiary;
+                opacity: 0.8;
+              }
+            }
+          }
+
+          // 表单字段样式
+          .mat-mdc-form-field {
+            width: 100%;
+            font-family: ios.$ios-font-family;
+            
+            &.status-field {
+              flex: 1;
+            }
+
+            &.assignee-field {
+              flex: 1;
+            }
+
+            &.full-width {
+              grid-column: 1 / -1;
+            }
+
+            // Outline appearance 样式
+            &.mat-mdc-form-field-appearance-outline {
+              .mat-mdc-form-field-outline {
+                border-radius: ios.$ios-radius-md;
+                border-color: ios.$ios-border;
+                transition: all 0.3s ease;
+              }
+
+              &:hover .mat-mdc-form-field-outline {
+                border-color: ios.$ios-primary;
+              }
+
+              &.mat-focused .mat-mdc-form-field-outline {
+                border-color: ios.$ios-primary;
+                border-width: 2px;
+              }
+            }
+
+            .mat-mdc-form-field-infix {
+              color: ios.$ios-text-primary;
+              font-family: ios.$ios-font-family;
+              padding: 12px;
+            }
+
+            // 选择框样式
+            .mat-mdc-select-value {
+              color: ios.$ios-text-primary;
+              font-family: ios.$ios-font-family;
+              font-size: 14px;
+            }
+
+            .mat-mdc-select-arrow {
+              color: ios.$ios-text-secondary;
+              transition: all 0.3s ease;
+            }
+
+            &.mat-focused .mat-mdc-select-arrow {
+              color: ios.$ios-primary;
+              transform: rotate(180deg);
+            }
+
+            // 输入框样式
+            .mat-mdc-input-element {
+              color: ios.$ios-text-primary;
+              font-family: ios.$ios-font-family;
+              font-size: 14px;
+            }
+
+            // 标签样式
+            .mat-mdc-floating-label {
+              color: ios.$ios-text-secondary;
+              font-family: ios.$ios-font-family;
+              font-weight: 500;
+            }
+
+            // 提示文本样式
+            .mat-mdc-form-field-hint {
+              color: ios.$ios-text-tertiary;
+              font-family: ios.$ios-font-family;
+              font-size: 12px;
+            }
+          }
+
+          .form-actions {
+            display: flex;
+            gap: ios.$ios-spacing-sm;
+            justify-content: flex-end;
+            margin-top: ios.$ios-spacing-md;
+            padding-top: ios.$ios-spacing-md;
+            border-top: 1px solid ios.$ios-border;
+
+            .mat-mdc-button {
+              font-family: ios.$ios-font-family;
+              border-radius: ios.$ios-radius-md;
+              padding: ios.$ios-spacing-sm ios.$ios-spacing-lg;
+              font-weight: ios.$ios-font-weight-medium;
+
+              &.mat-primary {
+                background: ios.$ios-primary;
+                color: white;
+                border: none;
+
+                &:hover {
+                  background: #0056CC;
+                  box-shadow: ios.$ios-shadow-sm;
+                }
+              }
+
+              &.mat-stroked-button {
+                border: 1px solid ios.$ios-border;
+                color: ios.$ios-text-secondary;
+
+                &:hover {
+                  color: ios.$ios-primary;
+                  border-color: ios.$ios-primary;
+                  box-shadow: ios.$ios-shadow-sm;
+                }
+              }
+
+              &:active {
+                transform: translateY(1px);
+              }
+            }
+          }
+        }
+
+        .status-history {
+          margin-top: ios.$ios-spacing-md;
+          background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+          border-radius: ios.$ios-radius-lg;
+          padding: ios.$ios-spacing-lg;
+          border: 2px solid rgba(0, 122, 255, 0.1);
+          position: relative;
+          overflow: hidden;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: linear-gradient(90deg, #34c759, #30d158, #32d74b);
+            border-radius: ios.$ios-radius-lg ios.$ios-radius-lg 0 0;
+          }
+
+          h5 {
+            margin: 0 0 ios.$ios-spacing-md 0;
+            color: ios.$ios-text-primary;
+            font-size: ios.$ios-font-size-headline;
+            font-weight: ios.$ios-font-weight-bold;
+            font-family: ios.$ios-font-family;
+            display: flex;
+            align-items: center;
+            gap: ios.$ios-spacing-sm;
+
+            &::before {
+              content: '📋';
+              font-size: 20px;
+            }
+          }
+
+          .history-item {
+            display: grid;
+            grid-template-columns: auto auto auto 1fr;
+            gap: ios.$ios-spacing-md;
+            padding: ios.$ios-spacing-sm 0;
+            font-size: ios.$ios-font-size-caption-1;
+            color: ios.$ios-text-secondary;
+            font-family: ios.$ios-font-family;
+            border-bottom: 1px solid rgba(0, 122, 255, 0.1);
+            transition: all 0.3s ease;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            &:hover {
+              background: rgba(0, 122, 255, 0.05);
+              border-radius: ios.$ios-radius-sm;
+              padding-left: ios.$ios-spacing-sm;
+              padding-right: ios.$ios-spacing-sm;
+            }
+
+            .history-date {
+              color: ios.$ios-text-primary;
+              font-weight: ios.$ios-font-weight-semibold;
+              background: rgba(0, 122, 255, 0.1);
+              padding: 4px 8px;
+              border-radius: ios.$ios-radius-sm;
+              font-size: ios.$ios-font-size-caption-2;
+            }
+
+            .history-status {
+              padding: 4px 8px;
+              border-radius: ios.$ios-radius-sm;
+              font-size: ios.$ios-font-size-caption-2;
+              font-weight: ios.$ios-font-weight-medium;
+
+              &.status-pending {
+                background: rgba(255, 149, 0, 0.1);
+                color: #ff9500;
+              }
+
+              &.status-processing {
+                background: rgba(0, 122, 255, 0.1);
+                color: #007aff;
+              }
+
+              &.status-completed {
+                background: rgba(52, 199, 89, 0.1);
+                color: #34c759;
+              }
+
+              &.status-rejected {
+                background: rgba(255, 59, 48, 0.1);
+                color: #ff3b30;
+              }
+            }
+
+            .history-operator {
+              color: ios.$ios-text-primary;
+              font-weight: ios.$ios-font-weight-medium;
+            }
+
+            .history-remark {
+              color: ios.$ios-text-secondary;
+              font-style: italic;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 空状态
+  .empty-state {
+    text-align: center;
+    padding: ios.$ios-spacing-xl ios.$ios-spacing-lg;
+    color: ios.$ios-text-secondary;
+    background: ios.$ios-background-secondary;
+    border-radius: ios.$ios-radius-lg;
+    border: 1px solid ios.$ios-border;
+
+    mat-icon {
+      font-size: 48px;
+      width: 48px;
+      height: 48px;
+      margin-bottom: ios.$ios-spacing-md;
+      opacity: 0.5;
+    }
+
+    p {
+      margin: 0;
+      font-size: ios.$ios-font-size-subhead;
+      font-family: ios.$ios-font-family;
+      color: ios.$ios-text-primary;
+    }
+  }
+
+  .detail-content {
+    background: ios.$ios-card-background;
+    border-radius: ios.$ios-radius-lg;
+    padding: ios.$ios-spacing-lg;
+    box-shadow: ios.$ios-shadow-sm;
+    border: 1px solid ios.$ios-border;
+  }
+}
+
+// 人事板块下拉列表样式
+.ios-select {
+  .mat-mdc-form-field-outline {
+    border-radius: 12px !important;
+    border: 1px solid #e0e0e0 !important;
+    background-color: #f8f9fa !important;
+    
+    &:hover {
+      border-color: #007aff !important;
+      background-color: #ffffff !important;
+    }
+  }
+  
+  .mat-mdc-select-trigger {
+    border-radius: 12px;
+    padding: 12px 16px;
+    min-height: 48px;
+    display: flex;
+    align-items: center;
+    
+    &:hover {
+      background-color: rgba(0, 122, 255, 0.05);
+    }
+  }
+  
+  .mat-mdc-select-arrow {
+    color: #007aff;
+    font-size: 20px;
+  }
+  
+  .mat-mdc-select-value {
+    color: #333;
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
+.option-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  
+  mat-icon {
+    color: #007aff;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+  
+  span {
+    font-size: 14px;
+    color: #333;
+  }
+}
+
+.filter-actions-group {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  
+  .ios-select {
+    flex: 1;
+    min-width: 200px;
+  }
+}
+
+// 全局下拉面板样式 - 采用人事板块样式，增加透明度
+:host ::ng-deep .mat-mdc-select-panel {
+  background: rgba(255, 255, 255, 0.85) !important;
+  backdrop-filter: blur(20px) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
+  border: 1px solid rgba(0, 122, 255, 0.2) !important;
+  max-height: 300px !important;
+  z-index: 9999 !important;
+  overflow: hidden !important;
+  
+  .mat-mdc-option {
+    background: rgba(255, 255, 255, 0.3) !important;
+    color: #333 !important;
+    font-size: 16px !important;
+    font-family: ios.$ios-font-family !important;
+    padding: 14px 16px !important;
+    border-bottom: 1px solid rgba(0, 122, 255, 0.1) !important;
+    transition: all 0.3s ease !important;
+    min-height: 48px !important;
+    display: flex !important;
+    align-items: center !important;
+    
+    &:hover {
+      background: rgba(0, 122, 255, 0.15) !important;
+      color: #007AFF !important;
+      transform: translateX(2px) !important;
+    }
+    
+    &.mdc-list-item--selected,
+    &.mat-selected {
+      background: rgba(0, 122, 255, 0.2) !important;
+      color: #007AFF !important;
+      font-weight: 500 !important;
+    }
+    
+    &:last-child {
+      border-bottom: none !important;
+    }
+
+    // 选项内容样式
+    .option-content {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      width: 100%;
+
+      mat-icon {
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+        color: inherit;
+        opacity: 0.8;
+      }
+
+      span {
+        flex: 1;
+        color: inherit;
+        font-size: 16px;
+        line-height: 1.4;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .after-sales-container {
+    padding: ios.$ios-spacing-md;
+  }
+
+  .stats-dashboard {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: ios.$ios-spacing-sm;
+
+    .stat-card {
+      padding: ios.$ios-spacing-md;
+      gap: ios.$ios-spacing-sm;
+
+      .stat-icon {
+        width: 40px;
+        height: 40px;
+
+        mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .stat-content .stat-value {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .filter-bar {
+    padding: ios.$ios-spacing-md;
+
+    .filter-section {
+      flex-direction: column;
+      gap: ios.$ios-spacing-sm;
+
+      .filter-field {
+        width: 100%;
+      }
+    }
+  }
+
+  .project-card {
+    padding: ios.$ios-spacing-md;
+
+    .project-content {
+      grid-template-columns: 1fr;
+      gap: ios.$ios-spacing-md;
+    }
+
+    .project-footer {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: ios.$ios-spacing-xs;
+    }
+  }
+
+  .detail-view {
+    .suggestion-management {
+      .suggestion-record {
+        padding: ios.$ios-spacing-md;
+
+        .suggestion-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: ios.$ios-spacing-xs;
+        }
+
+        .update-form {
+          padding: ios.$ios-spacing-md;
+
+          .form-actions {
+            flex-direction: column;
+            gap: ios.$ios-spacing-xs;
+
+            .mat-mdc-button {
+              width: 100%;
+            }
+          }
+        }
+
+        .status-history {
+          padding: ios.$ios-spacing-sm;
+
+          .history-item {
+            grid-template-columns: 1fr;
+            gap: ios.$ios-spacing-xs;
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .review-management {
+      .review-record {
+        padding: ios.$ios-spacing-md;
+
+        .review-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: ios.$ios-spacing-xs;
+        }
+      }
+
+      .add-review-form {
+        padding: ios.$ios-spacing-md;
+
+        .form-actions {
+          flex-direction: column;
+          gap: ios.$ios-spacing-xs;
+
+          .mat-mdc-button {
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .payment-management {
+      .payment-summary {
+        grid-template-columns: 1fr;
+        gap: ios.$ios-spacing-sm;
+      }
+
+      .payment-record {
+        padding: ios.$ios-spacing-md;
+
+        .record-header {
+          flex-direction: column;
+          align-items: flex-start;
+          gap: ios.$ios-spacing-xs;
+        }
+      }
+    }
+  }
+}

src/app/pages/customer-service/dashboard/pages/after-sales/after-sales.component.ts

@@ -0,0 +1,621 @@
+import { Component, OnInit, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule, Router } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+
+export interface AfterSalesProject {
+  id: string;
+  projectCode: string;
+  projectName: string;
+  customerName: string;
+  completedDate: Date;
+  finalPaymentStatus: 'pending' | 'partial' | 'completed' | 'overdue';
+  finalPaymentAmount: number;
+  paidAmount: number;
+  reviewStatus: 'pending' | 'positive' | 'negative' | 'no-review';
+  reviewScore?: number;
+  reviewContent?: string;
+  suggestionCount: number;
+  lastContactDate: Date;
+  priority: 'high' | 'medium' | 'low';
+  // 详情页面相关数据
+  paymentRecords?: PaymentRecord[];
+  reviewRecords?: ReviewRecord[];
+  suggestions?: CustomerSuggestion[];
+}
+
+export interface PaymentRecord {
+  id: string;
+  amount: number;
+  paymentDate: Date;
+  paymentMethod: string;
+  voucher?: FileUpload;
+  status: 'pending' | 'verified' | 'rejected';
+  operator: string;
+  remark?: string;
+  statusHistory: PaymentStatusHistory[];
+}
+
+export interface PaymentStatusHistory {
+  id: string;
+  status: string;
+  operator: string;
+  changeDate: Date;
+  reason: string;
+}
+
+export interface FileUpload {
+  id: string;
+  fileName: string;
+  fileType: string;
+  fileSize: number;
+  uploadDate: Date;
+  fileUrl: string;
+  previewUrl?: string;
+}
+
+export interface ReviewRecord {
+  id: string;
+  reviewType: 'system' | 'manual';
+  reviewChannel: string;
+  reviewDate: Date;
+  score?: number;
+  content: string;
+  status: 'pending' | 'processed';
+  followUpReminder?: Date;
+  operator?: string;
+  remark?: string;
+}
+
+export interface CustomerSuggestion {
+  id: string;
+  category: string;
+  content: string;
+  submitDate: Date;
+  status: 'pending' | 'processing' | 'completed' | 'rejected';
+  priority: 'high' | 'medium' | 'low';
+  assignee?: string;
+  response?: string;
+  responseDate?: Date;
+  statusHistory: SuggestionStatusHistory[];
+}
+
+export interface SuggestionStatusHistory {
+  id: string;
+  status: string;
+  operator: string;
+  changeDate: Date;
+  remark: string;
+}
+
+@Component({
+  selector: 'app-after-sales',
+  standalone: true,
+  imports: [
+    CommonModule, 
+    FormsModule, 
+    RouterModule,
+    MatIconModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatDatepickerModule,
+    MatNativeDateModule
+  ],
+  templateUrl: './after-sales.component.html',
+  styleUrls: ['./after-sales.component.scss']
+})
+export class AfterSalesComponent implements OnInit {
+  // 搜索和筛选条件
+  searchTerm = signal('');
+  selectedPaymentStatus = signal('all');
+  selectedReviewStatus = signal('all');
+  selectedPriority = signal('all');
+  dateRange = signal<{ start: Date | null; end: Date | null }>({ start: null, end: null });
+
+  // 售后项目数据
+  afterSalesProjects = signal<AfterSalesProject[]>([]);
+  
+  // 当前选中的项目
+  selectedProject = signal<AfterSalesProject | null>(null);
+  
+  // 视图状态
+  currentView = signal<'overview' | 'detail'>('overview');
+  
+  // 详情页面状态
+  activeDetailTab = signal<'payment' | 'review' | 'suggestion'>('payment');
+  
+  // 表单状态
+  isUploadingFile = signal(false);
+  isSubmittingForm = signal(false);
+  showAddReviewForm = false;
+  showUpdateForm: { [key: string]: boolean } = {};
+  
+  // 建议类别选项
+  suggestionCategories = signal([
+    { value: 'service-process', label: '服务流程' },
+    { value: 'product-function', label: '产品功能' },
+    { value: 'delivery-time', label: '交付周期' },
+    { value: 'communication', label: '沟通协调' },
+    { value: 'quality', label: '质量问题' },
+    { value: 'other', label: '其他建议' }
+  ]);
+  
+  // 筛选后的项目列表
+  filteredProjects = computed(() => {
+    let projects = this.afterSalesProjects();
+    
+    // 搜索筛选
+    if (this.searchTerm()) {
+      const term = this.searchTerm().toLowerCase();
+      projects = projects.filter(p => 
+        p.projectCode.toLowerCase().includes(term) ||
+        p.projectName.toLowerCase().includes(term) ||
+        p.customerName.toLowerCase().includes(term)
+      );
+    }
+    
+    // 尾款状态筛选
+    if (this.selectedPaymentStatus() !== 'all') {
+      projects = projects.filter(p => p.finalPaymentStatus === this.selectedPaymentStatus());
+    }
+    
+    // 评价状态筛选
+    if (this.selectedReviewStatus() !== 'all') {
+      projects = projects.filter(p => p.reviewStatus === this.selectedReviewStatus());
+    }
+    
+    // 优先级筛选
+    if (this.selectedPriority() !== 'all') {
+      projects = projects.filter(p => p.priority === this.selectedPriority());
+    }
+    
+    return projects;
+  });
+
+  // 统计数据
+  stats = computed(() => {
+    const projects = this.afterSalesProjects();
+    return {
+      total: projects.length,
+      pendingPayment: projects.filter(p => p.finalPaymentStatus === 'pending').length,
+      overduePayment: projects.filter(p => p.finalPaymentStatus === 'overdue').length,
+      pendingReview: projects.filter(p => p.reviewStatus === 'pending').length,
+      highPriority: projects.filter(p => p.priority === 'high').length
+    };
+  });
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.loadAfterSalesData();
+  }
+
+  private loadAfterSalesData(): void {
+    // 模拟数据
+    const mockData: AfterSalesProject[] = [
+      {
+        id: '1',
+        projectCode: 'PRJ-2024-001',
+        projectName: '企业官网设计开发',
+        customerName: '张三科技有限公司',
+        completedDate: new Date('2024-01-15'),
+        finalPaymentStatus: 'pending',
+        finalPaymentAmount: 50000,
+        paidAmount: 40000,
+        reviewStatus: 'positive',
+        reviewScore: 5,
+        reviewContent: '非常满意，设计很棒！',
+        suggestionCount: 2,
+        lastContactDate: new Date('2024-01-20'),
+        priority: 'high'
+      },
+      {
+        id: '2',
+        projectCode: 'PRJ-2024-002',
+        projectName: '移动端APP开发',
+        customerName: '李四网络科技',
+        completedDate: new Date('2024-01-10'),
+        finalPaymentStatus: 'overdue',
+        finalPaymentAmount: 80000,
+        paidAmount: 60000,
+        reviewStatus: 'pending',
+        suggestionCount: 1,
+        lastContactDate: new Date('2024-01-18'),
+        priority: 'high'
+      },
+      {
+        id: '3',
+        projectCode: 'PRJ-2024-003',
+        projectName: '电商平台升级',
+        customerName: '王五电商',
+        completedDate: new Date('2024-01-08'),
+        finalPaymentStatus: 'completed',
+        finalPaymentAmount: 120000,
+        paidAmount: 120000,
+        reviewStatus: 'positive',
+        reviewScore: 4,
+        reviewContent: '整体不错，有些细节需要优化',
+        suggestionCount: 3,
+        lastContactDate: new Date('2024-01-22'),
+        priority: 'medium'
+      }
+    ];
+    
+    this.afterSalesProjects.set(mockData);
+  }
+
+  // 选择项目进入详情页
+  selectProject(project: AfterSalesProject): void {
+    this.selectedProject.set(project);
+    this.currentView.set('detail');
+    this.loadProjectDetails(project.id);
+  }
+
+  // 返回概览页
+  backToOverview(): void {
+    this.currentView.set('overview');
+    this.selectedProject.set(null);
+    this.activeDetailTab.set('payment');
+  }
+
+  // 切换详情页面标签
+  switchDetailTab(tab: 'payment' | 'review' | 'suggestion'): void {
+    this.activeDetailTab.set(tab);
+  }
+
+  // 加载项目详情数据
+  async loadProjectDetails(projectId: string): Promise<void> {
+    try {
+      // 模拟API调用
+      const projectDetails = await this.mockLoadProjectDetails(projectId);
+      const currentProject = this.selectedProject();
+      if (currentProject) {
+        this.selectedProject.set({
+          ...currentProject,
+          ...projectDetails
+        });
+      }
+    } catch (error) {
+      console.error('加载项目详情失败:', error);
+    }
+  }
+
+  // 模拟加载项目详情数据
+  private async mockLoadProjectDetails(projectId: string) {
+    // 模拟API延迟
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    return {
+      paymentRecords: [
+        {
+          id: '1',
+          amount: 5000,
+          paymentDate: new Date('2024-01-15'),
+          paymentMethod: '银行转账',
+          status: 'verified' as const,
+          operator: '张三',
+          remark: '首期尾款',
+          statusHistory: [
+            {
+              id: '1',
+              status: '待验证',
+              operator: '系统',
+              changeDate: new Date('2024-01-15'),
+              reason: '客户上传支付凭证'
+            },
+            {
+              id: '2',
+              status: '已验证',
+              operator: '张三',
+              changeDate: new Date('2024-01-16'),
+              reason: '核实支付信息无误'
+            }
+          ]
+        }
+      ],
+      reviewRecords: [
+        {
+          id: '1',
+          reviewType: 'manual' as const,
+          reviewChannel: '电话回访',
+          reviewDate: new Date('2024-01-20'),
+          score: 5,
+          content: '服务很满意，交付及时',
+          status: 'processed' as const,
+          operator: '李四',
+          remark: '客户反馈良好'
+        }
+      ],
+      suggestions: [
+        {
+          id: '1',
+          category: 'service-process',
+          content: '希望能提供更详细的项目进度报告',
+          submitDate: new Date('2024-01-18'),
+          status: 'processing' as const,
+          priority: 'medium' as const,
+          assignee: '王五',
+          statusHistory: [
+            {
+              id: '1',
+              status: '待处理',
+              operator: '系统',
+              changeDate: new Date('2024-01-18'),
+              remark: '客户提交建议'
+            },
+            {
+              id: '2',
+              status: '处理中',
+              operator: '王五',
+              changeDate: new Date('2024-01-19'),
+              remark: '已分配处理人员'
+            }
+          ]
+        }
+      ]
+    };
+  }
+
+  // 文件上传处理
+  async handleFileUpload(event: Event, recordId?: string): Promise<void> {
+    const input = event.target as HTMLInputElement;
+    const files = input.files;
+    
+    if (!files || files.length === 0) return;
+    
+    this.isUploadingFile.set(true);
+    
+    try {
+      for (const file of Array.from(files)) {
+        await this.uploadFile(file, recordId);
+      }
+      // 显示成功提示
+      this.showSuccessMessage('文件上传成功');
+    } catch (error) {
+      console.error('文件上传失败:', error);
+      this.showErrorMessage('文件上传失败，请检查文件格式和大小');
+    } finally {
+      this.isUploadingFile.set(false);
+    }
+  }
+
+  // 上传文件
+  private async uploadFile(file: File, recordId?: string): Promise<FileUpload> {
+    // 验证文件类型和大小
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/pdf'];
+    const maxSize = 10 * 1024 * 1024; // 10MB
+    
+    if (!allowedTypes.includes(file.type)) {
+      throw new Error('文件格式不支持，请上传 JPG/PNG/PDF 格式');
+    }
+    
+    if (file.size > maxSize) {
+      throw new Error('文件大小超过限制，请上传小于10MB的文件');
+    }
+    
+    // 模拟上传过程
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    return {
+      id: Date.now().toString(),
+      fileName: file.name,
+      fileType: file.type,
+      fileSize: file.size,
+      uploadDate: new Date(),
+      fileUrl: URL.createObjectURL(file),
+      previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined
+    };
+  }
+
+  // 添加评价记录
+  async addReviewRecord(reviewData: Partial<ReviewRecord>): Promise<void> {
+    this.isSubmittingForm.set(true);
+    
+    try {
+      // 模拟API调用
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      const newRecord: ReviewRecord = {
+        id: Date.now().toString(),
+        reviewType: 'manual',
+        reviewChannel: reviewData.reviewChannel || '',
+        reviewDate: new Date(),
+        score: reviewData.score,
+        content: reviewData.content || '',
+        status: 'processed',
+        operator: '当前用户',
+        remark: reviewData.remark
+      };
+      
+      const currentProject = this.selectedProject();
+      if (currentProject && currentProject.reviewRecords) {
+        currentProject.reviewRecords.push(newRecord);
+        this.selectedProject.set({ ...currentProject });
+      }
+      
+      this.showSuccessMessage('评价记录添加成功');
+    } catch (error) {
+      console.error('添加评价记录失败:', error);
+      this.showErrorMessage('添加评价记录失败，请重试');
+    } finally {
+      this.isSubmittingForm.set(false);
+    }
+  }
+
+  // 更新建议状态
+  async updateSuggestionStatus(suggestionId: string, status: string, response?: string): Promise<void> {
+    this.isSubmittingForm.set(true);
+    
+    try {
+      // 模拟API调用
+      await new Promise(resolve => setTimeout(resolve, 500));
+      
+      const currentProject = this.selectedProject();
+      if (currentProject && currentProject.suggestions) {
+        const suggestion = currentProject.suggestions.find(s => s.id === suggestionId);
+        if (suggestion) {
+          suggestion.status = status as any;
+          suggestion.response = response;
+          suggestion.responseDate = new Date();
+          
+          // 添加状态历史
+          suggestion.statusHistory.push({
+            id: Date.now().toString(),
+            status,
+            operator: '当前用户',
+            changeDate: new Date(),
+            remark: response || '状态更新'
+          });
+          
+          this.selectedProject.set({ ...currentProject });
+        }
+      }
+      
+      this.showSuccessMessage('建议状态更新成功');
+    } catch (error) {
+      console.error('更新建议状态失败:', error);
+      this.showErrorMessage('更新建议状态失败，请重试');
+    } finally {
+      this.isSubmittingForm.set(false);
+    }
+  }
+
+  // 显示成功消息
+  private showSuccessMessage(message: string): void {
+    // 这里可以集成实际的消息提示组件
+    alert(message);
+  }
+
+  // 显示错误消息
+  private showErrorMessage(message: string): void {
+    // 这里可以集成实际的消息提示组件
+    alert(message);
+  }
+  
+  // 获取支付记录状态文本
+  getPaymentRecordStatusText(status: string): string {
+    const statusMap: { [key: string]: string } = {
+      'pending': '待验证',
+      'verified': '已验证',
+      'rejected': '已拒绝'
+    };
+    return statusMap[status] || status;
+  }
+  
+  // 获取建议状态文本
+  getSuggestionStatusText(status: string): string {
+    const statusMap: { [key: string]: string } = {
+      'pending': '待处理',
+      'processing': '处理中',
+      'completed': '已完成',
+      'rejected': '已拒绝'
+    };
+    return statusMap[status] || status;
+  }
+  
+  // 获取建议类别标签
+  getSuggestionCategoryLabel(category: string): string {
+    const categoryMap: { [key: string]: string } = {
+      'service-process': '服务流程',
+      'product-function': '产品功能',
+      'delivery-time': '交付周期',
+      'communication': '沟通协调',
+      'quality': '质量问题',
+      'other': '其他建议'
+    };
+    return categoryMap[category] || category;
+  }
+
+  // 获取尾款状态显示文本
+  getPaymentStatusText(status: string): string {
+    const statusMap: Record<string, string> = {
+      'pending': '待收款',
+      'partial': '部分收款',
+      'completed': '已完成',
+      'overdue': '逾期'
+    };
+    return statusMap[status] || status;
+  }
+
+  // 获取尾款状态样式类
+  getPaymentStatusClass(status: string): string {
+    const classMap: Record<string, string> = {
+      'pending': 'status-pending',
+      'partial': 'status-partial',
+      'completed': 'status-completed',
+      'overdue': 'status-overdue'
+    };
+    return classMap[status] || '';
+  }
+
+  // 获取评价状态显示文本
+  getReviewStatusText(status: string): string {
+    const statusMap: Record<string, string> = {
+      'pending': '待评价',
+      'positive': '好评',
+      'negative': '差评',
+      'no-review': '无评价'
+    };
+    return statusMap[status] || status;
+  }
+
+  // 获取评价状态样式类
+  getReviewStatusClass(status: string): string {
+    const classMap: Record<string, string> = {
+      'pending': 'review-pending',
+      'positive': 'review-positive',
+      'negative': 'review-negative',
+      'no-review': 'review-none'
+    };
+    return classMap[status] || '';
+  }
+
+  // 获取优先级显示文本
+  getPriorityText(priority: string): string {
+    const priorityMap: Record<string, string> = {
+      'high': '高',
+      'medium': '中',
+      'low': '低'
+    };
+    return priorityMap[priority] || priority;
+  }
+
+  // 获取优先级样式类
+  getPriorityClass(priority: string): string {
+    const classMap: Record<string, string> = {
+      'high': 'priority-high',
+      'medium': 'priority-medium',
+      'low': 'priority-low'
+    };
+    return classMap[priority] || '';
+  }
+
+  // 格式化金额
+  formatAmount(amount: number): string {
+    return `¥${amount.toLocaleString()}`;
+  }
+
+  // 格式化货币
+  formatCurrency(amount: number): string {
+    return `¥${amount.toLocaleString()}`;
+  }
+
+  // 格式化日期
+  formatDate(date: Date): string {
+    return date.toLocaleDateString('zh-CN');
+  }
+
+  // 计算尾款进度百分比
+  getPaymentProgress(project: AfterSalesProject): number {
+    return Math.round((project.paidAmount / project.finalPaymentAmount) * 100);
+  }
+}

src/app/shared/styles/_hr-dialog.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'ios-theme';
+@use 'variables';
+@use 'ios-theme' as ios;
 
 // HR模块通用对话框样式
 // 基于新增员工面板的设计，提供统一的对话框外观
@@ -7,27 +7,27 @@
 // 对话框容器样式
 .hr-dialog {
   .mat-mdc-dialog-container .mdc-dialog__surface {
-    border-radius: $ios-radius-lg;
-    background: $ios-card-background;
-    box-shadow: $ios-shadow-lg;
-    border: 1px solid $ios-border;
+    border-radius: ios.$ios-radius-lg;
+    background: ios.$ios-card-background;
+    box-shadow: ios.$ios-shadow-lg;
+    border: 1px solid ios.$ios-border;
     min-width: 500px;
     max-width: 700px;
   }
 
   .mat-mdc-dialog-title {
-    color: $ios-text-primary;
-    font-weight: $ios-font-weight-semibold;
-    font-family: $ios-font-family;
+    color: ios.$ios-text-primary;
+    font-weight: ios.$ios-font-weight-semibold;
+    font-family: ios.$ios-font-family;
     display: flex;
     align-items: center;
-    gap: $ios-spacing-sm;
-    padding: $ios-spacing-lg $ios-spacing-lg $ios-spacing-md;
+    gap: ios.$ios-spacing-sm;
+    padding: ios.$ios-spacing-lg ios.$ios-spacing-lg ios.$ios-spacing-md;
     margin: 0;
-    border-bottom: 1px solid $ios-border;
+    border-bottom: 1px solid ios.$ios-border;
 
     mat-icon {
-      color: $ios-primary;
+      color: ios.$ios-primary;
       font-size: 24px;
       width: 24px;
       height: 24px;
@@ -35,8 +35,8 @@
   }
 
   .mat-mdc-dialog-content {
-    padding: $ios-spacing-lg;
-    font-family: $ios-font-family;
+    padding: ios.$ios-spacing-lg;
+    font-family: ios.$ios-font-family;
     max-height: 70vh;
     overflow-y: auto;
 
@@ -45,372 +45,333 @@
     .dialog-content {
       display: flex;
       flex-direction: column;
-      gap: $ios-spacing-md;
+      gap: ios.$ios-spacing-md;
     }
 
-    .form-row,
-    .form-section {
+    .form-row {
       display: flex;
-      gap: $ios-spacing-md;
-      margin-bottom: $ios-spacing-sm;
-      
-      &.single-column {
-        flex-direction: column;
-      }
-      
-      mat-form-field {
+      gap: ios.$ios-spacing-md;
+      margin-bottom: ios.$ios-spacing-sm;
+
+      .form-group {
         flex: 1;
-        
-        &.full-width {
-          width: 100%;
-          margin-bottom: $ios-spacing-xs;
-        }
       }
     }
 
-    // 表单字段样式
-    mat-form-field {
-      margin-bottom: $ios-spacing-xs;
-      
-      .mat-mdc-form-field-outline {
-        border-radius: $ios-radius-md;
-        border-color: rgba(0, 122, 255, 0.2);
-        transition: all 0.3s ease;
-      }
-
-      &:hover .mat-mdc-form-field-outline {
-        border-color: rgba(0, 122, 255, 0.4);
+    .form-group {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: ios.$ios-spacing-xs;
+
+      label {
+        font-weight: 500;
+        margin-bottom: 6px;
+        color: #333;
+        font-size: 14px;
+        margin-bottom: ios.$ios-spacing-xs;
       }
 
-      &.mat-focused .mat-mdc-form-field-outline {
-        border-color: $ios-primary;
-        border-width: 2px;
-        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
-      }
+      .mat-mdc-form-field {
+        border-radius: ios.$ios-radius-md;
+        
+        .mat-mdc-text-field-wrapper {
+          background: white;
+          border: 1px solid #e0e0e0;
+          border-radius: 8px;
+          transition: all 0.3s ease;
+
+          &:hover {
+            border-color: ios.$ios-primary;
+          }
+        }
 
-      .mat-mdc-form-field-label {
-        color: $ios-text-secondary;
-        font-family: $ios-font-family;
-        font-weight: $ios-font-weight-medium;
-      }
+        .mat-mdc-form-field-subscript-wrapper {
+          color: ios.$ios-text-secondary;
+          font-family: ios.$ios-font-family;
+          font-weight: ios.$ios-font-weight-medium;
+        }
 
-      .mat-mdc-input-element {
-        color: $ios-text-primary;
-        font-family: $ios-font-family;
-        padding: $ios-spacing-sm;
-      }
+        .mat-mdc-form-field-infix {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+          padding: ios.$ios-spacing-sm;
+        }
 
-      .mat-mdc-form-field-error {
-        color: $ios-error;
-        font-family: $ios-font-family;
-        font-size: $ios-font-size-caption;
-        margin-top: $ios-spacing-xs;
-      }
+        .mat-mdc-form-field-error {
+          color: ios.$ios-error;
+          font-family: ios.$ios-font-family;
+          font-size: ios.$ios-font-size-caption-1;
+          margin-top: ios.$ios-spacing-xs;
+        }
 
-      // 选择框样式
-      .mat-mdc-select-value {
-        color: $ios-text-primary;
-        font-family: $ios-font-family;
-        padding: $ios-spacing-sm 0;
-      }
+        // 选择框样式
+        .mat-mdc-select-value {
+          color: ios.$ios-text-primary;
+          font-family: ios.$ios-font-family;
+          padding: ios.$ios-spacing-sm 0;
+        }
 
-      .mat-mdc-select-arrow {
-        color: $ios-text-secondary;
-        transition: transform 0.3s ease;
-      }
+        .mat-mdc-select-arrow {
+          color: ios.$ios-text-secondary;
+          transition: transform 0.3s ease;
+        }
 
-      &.mat-focused .mat-mdc-select-arrow {
-        transform: rotate(180deg);
-        color: $ios-primary;
-      }
+        &.mat-focused .mat-mdc-select-arrow {
+          color: ios.$ios-primary;
+        }
 
-      // 后缀图标样式
-      .mat-mdc-form-field-icon-suffix {
-        color: $ios-text-secondary;
-        transition: color 0.3s ease;
-      }
+        // 输入框样式
+        .mat-mdc-input-element {
+          color: ios.$ios-text-secondary;
+        }
 
-      &:hover .mat-mdc-form-field-icon-suffix {
-        color: $ios-primary;
+        &.mat-focused .mat-mdc-input-element {
+          color: ios.$ios-primary;
+        }
       }
     }
 
-    // 网格布局样式
-    .metrics-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: $ios-spacing-md;
+    // 信息展示区域
+    .info-section {
+      display: flex;
+      flex-direction: column;
+      gap: ios.$ios-spacing-md;
     }
 
-    // 预览区域
-    .preview-section {
-      background: $ios-background-secondary;
-      border: 1px solid $ios-border;
-      border-radius: $ios-radius-lg;
-      padding: $ios-spacing-lg;
-      margin-top: $ios-spacing-lg;
-      transition: all 0.3s ease;
+    .info-card {
+      background: ios.$ios-background-secondary;
+      border: 1px solid ios.$ios-border;
+      border-radius: ios.$ios-radius-lg;
+      padding: ios.$ios-spacing-lg;
+      margin-top: ios.$ios-spacing-lg;
 
       &:hover {
-        box-shadow: $ios-shadow-md;
-        border-color: rgba(0, 122, 255, 0.3);
+        transform: translateY(-2px);
+        box-shadow: ios.$ios-shadow-md;
       }
 
-      .preview-title {
-        font-family: $ios-font-family;
-        font-weight: $ios-font-weight-semibold;
-        color: $ios-text-primary;
-        margin-bottom: $ios-spacing-md;
-        font-size: $ios-font-size-body;
+      .card-title {
+        font-family: ios.$ios-font-family;
+        font-weight: ios.$ios-font-weight-semibold;
+        color: ios.$ios-text-primary;
+        margin-bottom: ios.$ios-spacing-md;
+        font-size: ios.$ios-font-size-body;
         display: flex;
         align-items: center;
-        gap: $ios-spacing-xs;
+        gap: ios.$ios-spacing-xs;
 
-        &::before {
-          content: '👁️';
-          font-size: 16px;
+        mat-icon {
+          color: #007AFF;
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
         }
       }
 
-      .item-preview-card {
-        background: white;
-        border: 1px solid $ios-border;
-        border-radius: $ios-radius-md;
-        padding: $ios-spacing-lg;
-        box-shadow: $ios-shadow-sm;
-        transition: all 0.3s ease;
+      .card-content {
+        border: 1px solid ios.$ios-border;
+        border-radius: ios.$ios-radius-md;
+        padding: ios.$ios-spacing-lg;
+        box-shadow: ios.$ios-shadow-sm;
 
         &:hover {
-          transform: translateY(-2px);
-          box-shadow: $ios-shadow-md;
+          transform: translateY(-1px);
+          box-shadow: ios.$ios-shadow-md;
         }
 
-        .preview-header {
-          display: flex;
-          align-items: center;
-          gap: $ios-spacing-md;
-          margin-bottom: $ios-spacing-md;
+        .content-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: ios.$ios-spacing-md;
+          margin-bottom: ios.$ios-spacing-md;
+        }
 
-          .preview-icon {
-            width: 32px;
-            height: 32px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: $ios-radius-md;
-            background: rgba(0, 122, 255, 0.1);
-            transition: all 0.3s ease;
-
-            &:hover {
-              background: rgba(0, 122, 255, 0.2);
-              transform: scale(1.1);
-            }
+        .content-item {
+          display: flex;
+          flex-direction: column;
+          padding: 12px;
+          background: #f8f9fa;
+          border-radius: ios.$ios-radius-md;
+
+          .label {
+            font-size: ios.$ios-font-size-caption-1;
+            color: ios.$ios-text-secondary;
+            font-family: ios.$ios-font-family;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: ios.$ios-spacing-xs;
           }
 
-          .preview-info {
-            flex: 1;
-
-            .preview-category {
-              font-size: $ios-font-size-caption;
-              color: $ios-text-secondary;
-              font-family: $ios-font-family;
-              text-transform: uppercase;
-              letter-spacing: 0.5px;
-              margin-bottom: $ios-spacing-xs;
-            }
-
-            .preview-name {
-              font-size: $ios-font-size-body;
-              color: $ios-text-primary;
-              font-family: $ios-font-family;
-              font-weight: $ios-font-weight-medium;
-            }
+          .value {
+            font-size: ios.$ios-font-size-body;
+            color: ios.$ios-text-primary;
+            font-family: ios.$ios-font-family;
+            font-weight: ios.$ios-font-weight-medium;
           }
         }
 
-        .metrics-preview {
+        .highlight-section {
           display: flex;
-          flex-direction: column;
-          gap: $ios-spacing-sm;
-          padding: $ios-spacing-md;
-          background: $ios-background-secondary;
-          border-radius: $ios-radius-sm;
-
-          .metric-name {
-            font-size: $ios-font-size-caption;
-            color: $ios-text-secondary;
-            font-family: $ios-font-family;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
+          align-items: center;
+          gap: ios.$ios-spacing-sm;
+          padding: ios.$ios-spacing-md;
+          background: ios.$ios-background-secondary;
+          border-radius: ios.$ios-radius-sm;
+
+          .highlight-label {
+            font-size: ios.$ios-font-size-caption-1;
+            color: ios.$ios-text-secondary;
+            font-family: ios.$ios-font-family;
           }
 
-          .metric-value {
-            font-size: $ios-font-size-title2;
-            font-weight: $ios-font-weight-bold;
-            color: $ios-primary;
-            font-family: $ios-font-family;
+          .highlight-value {
+            font-size: ios.$ios-font-size-title-2;
+            font-weight: ios.$ios-font-weight-bold;
+            color: ios.$ios-primary;
+            font-family: ios.$ios-font-family;
             display: flex;
-            align-items: baseline;
-            gap: $ios-spacing-xs;
+            align-items: center;
+            gap: ios.$ios-spacing-xs;
 
-            .metric-unit {
-              font-size: $ios-font-size-caption;
-              color: $ios-text-secondary;
-              font-weight: $ios-font-weight-regular;
+            .currency {
+              font-size: ios.$ios-font-size-caption-1;
+              color: ios.$ios-text-secondary;
+              font-weight: ios.$ios-font-weight-regular;
             }
           }
         }
       }
     }
 
-    // 分组标题样式
-    h3 {
-      margin: $ios-spacing-lg 0 $ios-spacing-md 0;
-      color: $ios-text-primary;
-      font-size: $ios-font-size-lg;
-      font-weight: $ios-font-weight-semibold;
-      font-family: $ios-font-family;
-
-      &:first-child {
-        margin-top: 0;
-      }
+    .section-title {
+      margin: ios.$ios-spacing-lg 0 ios.$ios-spacing-md 0;
+      color: ios.$ios-text-primary;
+      font-size: ios.$ios-font-size-lg;
+      font-weight: ios.$ios-font-weight-semibold;
+      font-family: ios.$ios-font-family;
+      border-bottom: 2px solid #007AFF;
+      padding-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
     }
   }
 
   .mat-mdc-dialog-actions {
-    padding: $ios-spacing-md $ios-spacing-lg $ios-spacing-lg;
-    border-top: 1px solid $ios-border;
-    gap: $ios-spacing-sm;
+    padding: ios.$ios-spacing-md ios.$ios-spacing-lg ios.$ios-spacing-lg;
+    border-top: 1px solid ios.$ios-border;
+    gap: ios.$ios-spacing-sm;
 
     .mat-mdc-button {
-      font-family: $ios-font-family;
-      border-radius: $ios-radius-md;
-      padding: $ios-spacing-sm $ios-spacing-lg;
-      
-      &[color="primary"] {
-        background: $ios-primary;
+      font-family: ios.$ios-font-family;
+      border-radius: ios.$ios-radius-md;
+      padding: ios.$ios-spacing-sm ios.$ios-spacing-lg;
+      font-weight: 500;
+
+      &.mat-primary {
+        background: ios.$ios-primary;
         color: white;
-        
+        border: none;
+
         &:hover {
-          background: rgba(0, 122, 255, 0.9);
+          background: #0056CC;
         }
-        
+
         &:disabled {
-          background: $ios-text-tertiary;
+          background: ios.$ios-text-tertiary;
           color: white;
         }
       }
-      
-      &:not([color]) {
-        color: $ios-text-secondary;
-        
+
+      &.mat-stroked-button {
+        color: ios.$ios-text-secondary;
+        border: 1px solid #e0e0e0;
+
         &:hover {
-          background: rgba(0, 122, 255, 0.05);
-          color: $ios-primary;
+          color: ios.$ios-primary;
+          border-color: #007AFF;
         }
       }
-    }
 
-    .mat-mdc-raised-button {
-      box-shadow: $ios-shadow-sm;
-      
       &:hover {
-        box-shadow: $ios-shadow-md;
+        box-shadow: ios.$ios-shadow-sm;
+      }
+
+      &:active {
+        box-shadow: ios.$ios-shadow-md;
+        transform: translateY(1px);
       }
     }
   }
 }
 
-// 图标颜色类
-.tech-icon { color: #2196F3; }
-.design-icon { color: #E91E63; }
-.product-icon { color: #FF9800; }
-.operation-icon { color: #4CAF50; }
-.hr-icon { color: #9C27B0; }
-.data-icon { color: #607D8B; }
-.marketing-icon { color: #FF5722; }
-.support-icon { color: #795548; }
-.new-icon { color: #00BCD4; }
-
-// 对话框背景遮罩样式
-.hr-dialog-backdrop {
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-// 选择框下拉面板样式
-.mat-mdc-select-panel {
-  background: white;
-  border-radius: $ios-radius-md;
-  box-shadow: $ios-shadow-lg;
-  border: 1px solid $ios-border;
-  max-height: 300px;
-  overflow-y: auto;
-
-  .mat-mdc-option {
-    font-family: $ios-font-family;
-    padding: $ios-spacing-sm $ios-spacing-md;
-    transition: all 0.2s ease;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &:hover {
-      background: rgba(0, 122, 255, 0.05);
-      color: $ios-primary;
-    }
+// 特殊样式：员工详情对话框
+.employee-detail-dialog {
+  .mat-mdc-dialog-container .mdc-dialog__surface {
+    min-width: 600px;
+    max-width: 800px;
+  }
 
-    &.mat-mdc-option-active {
-      background: rgba(0, 122, 255, 0.1);
-      color: $ios-primary;
-      font-weight: $ios-font-weight-medium;
-    }
+  .employee-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: ios.$ios-radius-md;
+    box-shadow: ios.$ios-shadow-lg;
+    border: 1px solid ios.$ios-border;
+    object-fit: cover;
+  }
 
-    .mat-mdc-option-text {
-      display: flex;
-      align-items: center;
-      gap: $ios-spacing-sm;
+  .employee-info {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    font-family: ios.$ios-font-family;
+    padding: ios.$ios-spacing-sm ios.$ios-spacing-md;
+
+    .info-text {
+      flex: 1;
+
+      .name {
+        font-size: 20px;
+        font-weight: 600;
+        color: ios.$ios-primary;
+        margin-bottom: 4px;
+      }
 
-      mat-icon {
-        font-size: 18px;
-        width: 18px;
-        height: 18px;
+      .position {
+        color: ios.$ios-primary;
+        font-weight: ios.$ios-font-weight-medium;
+        font-size: 14px;
       }
     }
   }
-}
 
-// 响应式调整
-@media (max-width: 768px) {
-  .hr-dialog {
-    .mat-mdc-dialog-container .mdc-dialog__surface {
-      min-width: 90vw;
-      max-width: 95vw;
-      margin: $ios-spacing-md;
-    }
+  .detail-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: ios.$ios-spacing-sm;
+    margin: ios.$ios-spacing-md;
 
-    .mat-mdc-dialog-content {
-      .form-row {
-        flex-direction: column;
-        
-        mat-form-field {
-          width: 100%;
-        }
+    .detail-item {
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      background: #f8f9fa;
+      border-radius: 8px;
+
+      .label {
+        font-size: 12px;
+        color: #666;
+        margin-bottom: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
       }
 
-      .metrics-grid {
-        grid-template-columns: 1fr;
+      .value {
+        font-size: 14px;
+        color: #333;
+        font-weight: 500;
       }
     }
   }
-
-  .mat-mdc-select-panel {
-    max-height: 250px;
-    
-    .mat-mdc-option {
-      padding: $ios-spacing-md;
-    }
-  }
 }