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

.customers-page{padding:24px}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.page-title{font-size:20px;margin:0 0 6px}.page-description{color:#64748b;margin:0}.btn{padding:8px 12px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}.btn.primary{background:#165DFF;color:#fff;border-color:#165DFF}
.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.stat-card{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06);padding:16px}.stat-label{color:#64748b;font-size:12px}.stat-value{font-size:22px;font-weight:700;margin-top:6px}
.toolbar{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06);margin-bottom:12px}.search input{width:320px;padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px}.filters{display:flex;gap:8px;align-items:center}.filters select{padding:8px;border:1px solid #e5e7eb;border-radius:8px}
.table-card{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}.table{display:grid;grid-template-columns:2fr 1.2fr 1.6fr 1fr 1fr 1.1fr;align-items:center;padding:12px 16px;border-bottom:1px solid #f1f5f9}.table.header{color:#64748b;font-weight:600;background:#f8fafc;border-top-left-radius:12px;border-top-right-radius:12px}.table.row{background:#fff}.table .name .title{font-weight:600;display:flex;align-items:center;gap:6px}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#eef2ff;color:#4f46e5;font-weight:600;font-size:12px}.tag.vip{background:#fff7ed;color:#f97316}.tag.svip{background:#fff1f2;color:#ef4444}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#94a3b8}.dot.green{background:#10b981}.dot.gray{background:#94a3b8}.actions{display:flex;gap:6px;justify-content:flex-end}.icon{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:6px 8px;cursor:pointer}.icon.danger{color:#ef4444;border-color:#fecaca}
.empty{padding:24px;text-align:center;color:#94a3b8}
@media (max-width: 992px){.stats-cards{grid-template-columns:repeat(2,1fr)}.search input{width:100%}.toolbar{flex-direction:column;gap:10px;align-items:flex-start}.table{grid-template-columns:1.6fr 1fr 1.4fr .9fr .9fr 1fr}}

/* 客户画像弹窗样式 */
.customer-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease-out;
  padding: 20px;
}

.customer-panel {
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    svg {
      flex-shrink: 0;
    }

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }

  .close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;

    &:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: rotate(90deg);
    }
  }
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #fafafa;

  /* 自定义滚动条 */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;

    &:hover {
      background: #a1a1a1;
    }
  }
}

/* 基本信息卡片 */
.profile-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.profile-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid #f0f0f0;
  flex-shrink: 0;
}

.profile-info {
  flex: 1;
}

.profile-name {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.profile-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
  flex-wrap: wrap;

  .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;

    svg {
      color: #999;
      flex-shrink: 0;
    }
  }
}

.profile-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  .tag {
    padding: 4px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
  }
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.info-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;

  svg {
    color: #165DFF;
    flex-shrink: 0;
  }
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
    font-weight: 500;
  }

  .info-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;

    &.phone {
      font-family: 'Courier New', monospace;
      letter-spacing: 0.5px;
    }

    &.budget {
      color: #00B42A;
      font-weight: 600;
    }
  }

  .badge {
    display: inline-block;
    padding: 4px 10px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;

    &.badge-enterprise {
      background: #fff7ed;
      color: #f97316;
    }
  }
}

/* 客户画像区块 */
.profile-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title-large {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f0f0;

  svg {
    color: #165DFF;
    flex-shrink: 0;
  }
}

.profile-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-item {
  label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .tag-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    .tag {
      padding: 6px 14px;
      background: #f0f7ff;
      color: #165DFF;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 500;
      border: 1px solid #d4e6ff;

      &.tag-style {
        background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
        color: #d63031;
        border: none;
      }
    }
  }
}

/* 群聊列表区块 */
.groups-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .section-subtitle {
    font-size: 13px;
    color: #999;
    margin: -8px 0 16px;
  }

  .groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;

    .group-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
      border: 1px solid #e8e9ff;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
        border-color: #6366f1;
      }

      .group-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border-radius: 10px;
        flex-shrink: 0;

        svg {
          stroke: white;
          width: 20px;
          height: 20px;
        }
      }

      .group-info {
        flex: 1;
        min-width: 0;

        .group-name {
          margin: 0 0 4px;
          font-size: 14px;
          font-weight: 500;
          color: #1a1a1a;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .group-project {
          display: flex;
          align-items: center;
          gap: 4px;
          font-size: 12px;
          color: #6366f1;
          margin: 0;

          svg {
            width: 14px;
            height: 14px;
            stroke: currentColor;
          }
        }

        .group-no-project {
          font-size: 12px;
          color: #999;
          margin: 0;
        }
      }
    }
  }
}

/* 相关项目区块 */
.projects-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.projects-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(135deg, #fafcff 0%, #fff 100%);
  border-radius: 10px;
  border: 1px solid #e8eeff;
  transition: all 0.2s;

  &:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
    transform: translateX(4px);
  }

  .project-content {
    flex: 1;
    min-width: 0;

    .project-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;

      h4 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .project-status {
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        flex-shrink: 0;

        &.status-待分配 {
          background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
          color: #0284c7;
        }

        &.status-进行中 {
          background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
          color: #ea580c;
        }

        &.status-已完成 {
          background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
          color: #16a34a;
        }

        &.status-已暂停 {
          background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
          color: #6b7280;
        }
      }
    }

    .project-details {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 13px;

      .project-stage {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #3b82f6;

        svg {
          width: 14px;
          height: 14px;
          stroke: currentColor;
        }
      }

      .project-time {
        color: #888;
      }
    }
  }

  .project-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: #3b82f6;
      border-color: #3b82f6;

      svg {
        stroke: white;
      }
    }

    svg {
      width: 16px;
      height: 16px;
      stroke: #94a3b8;
      transition: stroke 0.2s ease;
    }
  }
}

/* 跟进记录时间线 */
.timeline-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .timeline {
    margin-top: 16px;
    position: relative;

    .timeline-item {
      display: flex;
      gap: 16px;
      position: relative;

      &:not(:last-child) {
        margin-bottom: 20px;
      }

      .timeline-marker {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;

        .timeline-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
          border: 3px solid #ede9fe;
          flex-shrink: 0;
          z-index: 2;
        }

        .timeline-line {
          width: 2px;
          flex: 1;
          background: linear-gradient(180deg, #e9d5ff 0%, #f3f4f6 100%);
          margin-top: 4px;
          min-height: 20px;
        }
      }

      .timeline-content {
        flex: 1;
        min-width: 0;
        padding: 12px 16px;
        background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
        border: 1px solid #f0f0f0;
        border-radius: 10px;
        transition: all 0.2s ease;

        &:hover {
          border-color: #e9d5ff;
          background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
        }

        .timeline-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          .timeline-operator {
            font-weight: 500;
            font-size: 14px;
            color: #1a1a1a;
          }

          .timeline-time {
            font-size: 12px;
            color: #999;
          }
        }

        .timeline-body {
          .timeline-type {
            display: inline-block;
            padding: 2px 8px;
            background: linear-gradient(135deg, #ede9fe 0%, #e9d5ff 100%);
            color: #7c3aed;
            font-size: 12px;
            border-radius: 8px;
            margin-bottom: 6px;
            font-weight: 500;
          }

          .timeline-text {
            margin: 8px 0 0;
            font-size: 13px;
            color: #666;
            line-height: 1.6;
          }
        }
      }
    }
  }
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;

  svg {
    color: #ccc;
    margin-bottom: 16px;
  }

  p {
    margin: 0;
    font-size: 14px;
    color: #999;
  }
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(40px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

// ========================================
// 客户管理移动端适配
// ========================================

@media (max-width: 768px) {
  // 客户画像面板移动端全屏显示
  .customer-panel-overlay {
    padding: 0;
  }

  .customer-panel {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;

    .panel-header {
      padding: 16px;
      position: sticky;
      top: 0;
      z-index: 10;

      h2 {
        font-size: 18px;
      }

      .close-btn {
        width: 36px;
        height: 36px;
      }
    }

    .panel-body {
      padding: 16px;
      height: calc(100vh - 60px);
      overflow-y: auto;
    }

    // 个人信息卡片
    .profile-card {
      padding: 16px;

      .profile-avatar {
        width: 60px;
        height: 60px;
      }

      .profile-name {
        font-size: 18px;
      }

      .profile-meta {
        flex-direction: column;
        gap: 8px;

        .meta-item {
          font-size: 12px;
        }
      }

      .profile-tags {
        flex-wrap: wrap;
        gap: 6px;

        .tag {
          font-size: 11px;
          padding: 3px 8px;
        }
      }
    }

    // 信息网格
    .info-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .info-section {
      padding: 16px;

      .section-title {
        font-size: 14px;
      }

      .info-item {
        padding: 10px 0;

        .label {
          font-size: 12px;
        }

        .value {
          font-size: 13px;
        }
      }
    }

    // 客户画像详情
    .profile-section {
      padding: 16px;

      .section-title-large {
        font-size: 16px;
      }

      .profile-item {
        font-size: 13px;

        strong {
          font-size: 12px;
        }
      }
    }

    // 群聊部分
    .groups-section {
      padding: 16px;

      .section-title-large {
        font-size: 16px;
      }

      .groups-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .group-card {
        padding: 12px;

        .group-name {
          font-size: 14px;
        }

        .group-project {
          font-size: 12px;
        }
      }
    }

    // 项目部分
    .projects-section {
      padding: 16px;

      .section-title-large {
        font-size: 16px;
      }

      .projects-list {
        gap: 12px;
      }

      .project-card {
        padding: 12px;

        .project-title {
          font-size: 14px;
        }

        .project-status {
          font-size: 11px;
          padding: 3px 8px;
        }

        .project-meta {
          flex-direction: column;
          gap: 6px;

          .meta-item {
            font-size: 12px;
          }
        }
      }
    }

    // 跟进记录时间线
    .timeline-section {
      padding: 16px;

      .section-title-large {
        font-size: 16px;
      }

      .timeline {
        padding-left: 24px;
      }

      .timeline-item {
        padding-left: 24px;

        .timeline-dot {
          width: 10px;
          height: 10px;
          left: -5px;
        }

        .timeline-content {
          padding: 12px;

          .timeline-operator {
            font-size: 13px;
          }

          .timeline-time {
            font-size: 11px;
          }

          .timeline-type {
            font-size: 12px;
            padding: 3px 8px;
          }

          .timeline-text {
            font-size: 12px;
          }
        }
      }
    }
  }
}