yss-project/src/modules/project/components/contact-selector/contact-selector.component.html

<div class="contact-selector" [class.disabled]="disabled">
  <div class="loading" *ngIf="loading">正在加载客户数据...</div>

  <!-- 已有客户卡片 -->
  <div class="customer-exists" *ngIf="currentCustomer">
    <div class="card">
      <div class="row">
        <div class="avatar" (click)="viewCustomerDetail()">
          <img *ngIf="currentCustomer.get('data')?.avatar" [src]="currentCustomer.get('data')?.avatar" alt="" />
          <div class="placeholder" *ngIf="!currentCustomer.get('data')?.avatar">👤</div>
        </div>
        <div class="info" (click)="viewCustomerDetail()">
          <div class="name">{{ currentCustomer.get('name') || currentCustomer.get('data')?.external_contact?.name || currentCustomer.get('data')?.name }}</div>
          <div class="meta">
            <span class="chip" *ngIf="currentCustomer.get('data')?.external_contact?.type">{{ currentCustomer.get('data')?.type === 1 ? '外部联系人' : '企业成员' }}</span>
            <span class="chip" *ngIf="canViewSensitiveInfo && currentCustomer.get('mobile')">{{ currentCustomer.get('mobile') }}</span>
          </div>
        </div>
        <div class="actions">
          <button class="btn outline" (click)="switchToSelecting()">重新选择</button>
          <button class="btn" (click)="viewCustomerDetail()">查看详情</button>
          <button class="btn" (click)="refreshContactInfo(currentCustomer)">刷新客户信息</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 选择客户列表 -->
  <div class="selecting" *ngIf="!currentCustomer">
    <div class="toolbar">
      <input class="search" type="text" [(ngModel)]="searchKeyword" [placeholder]="placeholder" />
    </div>

    <div class="section">
      <div class="section-title">已建档的群聊客户</div>
      <div class="list">
        <div class="item" *ngFor="let c of filteredCustomers" (click)="selectExistingCustomer(c)">
          <div class="thumb">
            <img *ngIf="c.get('data')?.avatar" [src]="c.get('data')?.avatar" alt="" />
            <div class="placeholder" *ngIf="!c.get('data')?.avatar">👤</div>
          </div>
          <div class="detail">
            <div class="title">{{ c.get('name') || c.get('data')?.name }}</div>
            <div class="sub" *ngIf="canViewSensitiveInfo && c.get('mobile')">{{ c.get('mobile') }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="section" *ngIf="showCreateButton">
      <div class="section-title">未建档的群聊外部联系人</div>
      <div class="list">
        <div class="item" *ngFor="let m of unbuiltExternalMembers">
          <div class="thumb">👤</div>
          <div class="detail">
            <div class="title">{{ m.name || '外部客户' }}</div>
            <div class="sub">{{ m.userid }}</div>
          </div>
          <div class="ops">
            <button class="btn primary" (click)="createFromMember(m.userid)">创建并关联</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 客户详情侧栏弹层 -->
  <div class="overlay" *ngIf="showCustomerPanel" (click)="closeCustomerDetail()"></div>
  <div class="customer-panel" *ngIf="showCustomerPanel">
    <app-contact [customer]="currentCustomer" [currentUser]="currentUser" [embeddedMode]="true" [projectIdFilter]="project?.id" (close)="closeCustomerDetail()"></app-contact>
    <button class="close" (click)="closeCustomerDetail()">返回</button>
  </div>
</div>