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

<div class="designers-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 btn-primary" (click)="addDesigner()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="12" y1="5" x2="12" y2="19"></line>
          <line x1="5" y1="12" x2="19" y2="12"></line>
        </svg>
        添加设计师
      </button>
      <button class="btn btn-secondary" (click)="exportDesigners()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="7 10 12 15 17 10"></polyline>
          <line x1="12" y1="15" x2="12" y2="3"></line>
        </svg>
        导出数据
      </button>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-overview">
    <div class="stat-card">
      <div class="stat-icon primary">
        <svg width="24" height="24" 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>
      <div class="stat-content">
        <div class="stat-value">{{ totalDesigners() }}</div>
        <div class="stat-label">设计师总数</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon success">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <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>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ activeDesigners() }}</div>
        <div class="stat-label">在线设计师</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon warning">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ busyDesigners() }}</div>
        <div class="stat-label">忙碌设计师</div>
      </div>
    </div>

    <div class="stat-card">
      <div class="stat-icon danger">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="15" y1="9" x2="9" y2="15"></line>
          <line x1="9" y1="9" x2="15" y2="15"></line>
        </svg>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ inactiveDesigners() }}</div>
        <div class="stat-label">离线设计师</div>
      </div>
    </div>
  </div>

  <!-- 筛选和搜索 -->
  <div class="filters-section">
    <div class="search-box">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <circle cx="11" cy="11" r="8"></circle>
        <path d="M21 21l-4.35-4.35"></path>
      </svg>
      <input 
        type="text" 
        placeholder="搜索设计师姓名或邮箱..."
        [(ngModel)]="searchTerm"
        (input)="searchTerm.set($any($event.target).value)"
      >
    </div>

    <div class="filter-controls">
      <select [(ngModel)]="selectedDepartment" (change)="selectedDepartment.set($any($event.target).value)">
        <option value="all">全部部门</option>
        <option *ngFor="let dept of departments" [value]="dept">{{ dept }}</option>
      </select>

      <select [(ngModel)]="selectedLevel" (change)="selectedLevel.set($any($event.target).value)">
        <option value="all">全部等级</option>
        <option value="junior">初级</option>
        <option value="intermediate">中级</option>
        <option value="senior">高级</option>
        <option value="expert">专家</option>
      </select>

      <select [(ngModel)]="selectedStatus" (change)="selectedStatus.set($any($event.target).value)">
        <option value="all">全部状态</option>
        <option value="active">在线</option>
        <option value="busy">忙碌</option>
        <option value="inactive">离线</option>
      </select>

      <button class="btn btn-outline" (click)="resetFilters()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <polyline points="1 4 1 10 7 10"></polyline>
          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
        </svg>
        重置
      </button>
    </div>
  </div>

  <!-- 设计师列表 -->
  <div class="designers-grid">
    <div class="designer-card" *ngFor="let designer of filteredDesigners">
      <div class="designer-header">
        <div class="designer-avatar">
          <img [src]="designer.avatar" [alt]="designer.name">
          <div class="status-indicator" [class]="getStatusClass(designer.status)"></div>
        </div>
        <div class="designer-info">
          <h3 class="designer-name">{{ designer.name }}</h3>
          <p class="designer-department">{{ designer.department }}</p>
          <div class="designer-level">
            <span class="level-badge" [class]="'level-' + designer.level">
              {{ getLevelText(designer.level) }}
            </span>
            <span class="status-text" [class]="getStatusClass(designer.status)">
              {{ getStatusText(designer.status) }}
            </span>
          </div>
        </div>
        <div class="designer-actions">
          <button class="action-btn" (click)="viewDesigner(designer)" title="查看详情">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
              <circle cx="12" cy="12" r="3"></circle>
            </svg>
          </button>
          <button class="action-btn" (click)="editDesigner(designer)" title="编辑">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
          </button>
          <button class="action-btn danger" (click)="deleteDesigner(designer)" title="删除">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="3 6 5 6 21 6"></polyline>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="designer-stats">
        <div class="stat-item">
          <span class="stat-label">项目数量</span>
          <span class="stat-value">{{ designer.projectCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">完成率</span>
          <span class="stat-value">{{ designer.completionRate }}%</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">满意度</span>
          <span class="stat-value">{{ designer.satisfactionScore }}/5.0</span>
        </div>
      </div>

      <div class="designer-skills">
        <span class="skill-tag" *ngFor="let skill of designer.skills">{{ skill }}</span>
      </div>

      <div class="designer-contact">
        <div class="contact-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
            <polyline points="22 6 12 13 2 6"></polyline>
          </svg>
          <span>{{ designer.email }}</span>
        </div>
        <div class="contact-item">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
          </svg>
          <span>{{ designer.phone }}</span>
        </div>
      </div>

      <div class="designer-footer">
        <span class="join-date">入职时间：{{ designer.joinDate | date:'yyyy-MM-dd' }}</span>
        <span class="last-active">最后活跃：{{ designer.lastActiveDate | date:'MM-dd HH:mm' }}</span>
      </div>
    </div>
  </div>

  <!-- 空状态 -->
  <div class="empty-state" *ngIf="filteredDesigners.length === 0">
    <svg width="64" height="64" 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>
    <h3>暂无设计师数据</h3>
    <p>没有找到符合条件的设计师，请调整筛选条件或添加新的设计师。</p>
    <button class="btn btn-primary" (click)="addDesigner()">
      添加设计师
    </button>
  </div>
</div>