yss-project/src/app/pages/admin/customers/customers.html

<div class="customers-page">
  <div class="page-header">
    <div class="header-left">
      <h2 class="page-title">客户管理</h2>
      <p class="page-description">管理客户档案</p>
    </div>
    <div class="header-actions">
      <button class="btn" (click)="exportCustomers()">导出</button>
    </div>
  </div>

  <div class="stats-cards">
    <div class="stat-card">
      <div class="stat-label">客户总数</div>
      <div class="stat-value">{{ total() }}</div>
    </div>
  </div>

  <div class="toolbar">
    <div class="search">
      <input placeholder="搜索客户名称/手机号" (input)="keyword.set($any($event.target).value)" [value]="keyword()"/>
    </div>
    <div class="filters">
      <button class="btn" (click)="resetFilters()">重置</button>
    </div>
  </div>

  <div class="table-card">
    <div class="table header">
      <div>客户名称</div>
      <div>手机号</div>
      <div>企微ID</div>
      <div>来源</div>
      <div>创建时间</div>
    </div>
    <div class="table row clickable" *ngFor="let c of filtered" (click)="openCustomerDetail(c)">
      <div class="name">
        <div class="title">{{ c.name }}</div>
      </div>
      <div>{{ c.mobile }}</div>
      <div>{{ c.external_userid || '-' }}</div>
      <div>{{ c.source || '-' }}</div>
      <div>{{ c.createdAt ? (c.createdAt | date:'yyyy-MM-dd') : '-' }}</div>
    </div>
    <div class="empty" *ngIf="filtered.length === 0">
      @if (loading()) {
        <span>加载中...</span>
      } @else {
        <span>暂无数据</span>
      }
    </div>
  </div>

  <!-- 客户详情面板 -->
  <div class="customer-panel-overlay" *ngIf="showCustomerPanel" (click)="closeCustomerPanel()">
    <div class="customer-panel" (click)="$event.stopPropagation()">
      <div class="panel-header">
        <h2>客户详情</h2>
        <button class="close-btn" (click)="closeCustomerPanel()">×</button>
      </div>
      <div class="panel-body">
        <app-contact *ngIf="selectedCustomer" [customer]="selectedCustomer"></app-contact>
      </div>
    </div>
  </div>
</div>