yss-project/src/modules/project/pages/contact/contact.component.html

<div class="contact-page">
  <div class="header">
    <div class="header-toolbar">
      <button class="back-button" (click)="goBack()">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M244 400L100 256l144-144M120 256h292" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"/></svg>
      </button>
      <h1 class="title">客户画像</h1>
    </div>
  </div>

  <div class="content">
    <!-- 加载中 -->
    @if (loading) {
      <div class="loading-container">
        <div class="spinner"></div>
        <p>加载客户信息...</p>
      </div>
    }

    <!-- 错误 -->
    @if (error && !loading) {
      <div class="error-container">
        <svg class="icon-large" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 80c-8.66 0-16.58 7.36-16 16l8 216a8 8 0 008 8h0a8 8 0 008-8l8-216c.58-8.64-7.34-16-16-16z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><circle cx="256" cy="416" r="16" fill="currentColor"/></svg>
        <p>{{ error }}</p>
        <button class="btn btn-outline" (click)="loadData()">重试</button>
      </div>
    }

    <!-- 客户画像内容 -->
    @if (!loading && !error && contactInfo) {
      <div class="contact-container">
        <!-- 头部：头像 + 基础信息 -->
        <div class="card header-card">
          <div class="customer-header">
            <div class="customer-avatar">
              @if (profile.basic.avatar) {
                <img [src]="profile.basic.avatar" alt="头像" />
              } @else {
                <img src="/assets/images/default-avatar.svg" alt="头像" />
              }
            </div>
            <div class="customer-info">
              <h2>{{ profile.basic.name }}</h2>
              <div class="source-badge">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160m80-80H176"/></svg>
                <span>{{ profile.basic.source }}</span>
              </div>
            </div>
          </div>

          <!-- 标签 -->
          @if (profile.basic.tags.length > 0) {
            <div class="tags-container">
              @for (tag of profile.basic.tags; track tag) {
                <span class="chip chip-primary">{{ tag }}</span>
              }
            </div>
          }
        </div>

        <!-- 基础信息 -->
        <div class="card basic-info-card">
          <div class="card-header">
            <h3 class="card-title">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="64"/><path d="M490.84 238.6c-26.46-40.92-60.79-75.68-99.27-100.53C349 110.55 302 96 255.66 96c-42.52 0-84.33 12.15-124.27 36.11-40.73 24.43-77.63 60.12-109.68 106.07a31.92 31.92 0 00-.64 35.54c26.41 41.33 60.4 76.14 98.28 100.65C162 402 207.9 416 255.66 416c46.71 0 93.81-14.43 136.2-41.72 38.46-24.77 72.72-59.66 99.08-100.92a32.2 32.2 0 00-.1-34.76zM256 352a96 96 0 1196-96 96.11 96.11 0 01-96 96z"/></svg>
              基础信息
            </h3>
          </div>
          <div class="card-content">
            <div class="info-list">
              <div class="info-item">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M391 480c-19.52 0-46.94-7.06-88-30-49.93-28-88.55-53.85-138.21-103.38C116.91 298.77 93.61 267.79 61 208.45c-36.84-67-30.56-102.12-23.54-117.13C45.82 73.38 58.16 62.65 74.11 52a176.3 176.3 0 0128.64-15.2c1-.43 1.93-.84 2.76-1.21 4.95-2.23 12.45-5.6 21.95-2 6.34 2.38 12 7.25 20.86 16 18.17 17.92 43 57.83 52.16 77.43 6.15 13.21 10.22 21.93 10.23 31.71 0 11.45-5.76 20.28-12.75 29.81-1.31 1.79-2.61 3.5-3.87 5.16-7.61 10-9.28 12.89-8.18 18.05 2.23 10.37 18.86 41.24 46.19 68.51s57.31 42.85 67.72 45.07c5.38 1.15 8.33-.59 18.65-8.47 1.48-1.13 3-2.3 4.59-3.47 10.66-7.93 19.08-13.54 30.26-13.54h.06c9.73 0 18.06 4.22 31.86 11.18 18 9.08 59.11 33.59 77.14 51.78 8.77 8.84 13.66 14.48 16.05 20.81 3.6 9.53.21 17-2 22-.37.83-.78 1.74-1.21 2.75a176.49 176.49 0 01-15.29 28.58c-10.63 15.9-21.4 28.21-39.38 36.58A67.42 67.42 0 01391 480z"/></svg>
                <div class="info-text">
                  <p class="info-label">手机号</p>
                  <h4 class="info-value">{{ profile.basic.mobile }}</h4>
                </div>
              </div>
              <div class="info-item">
                <svg class="icon icon-wechat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M408.67 298.53a21 21 0 1120.9-21 20.85 20.85 0 01-20.9 21m-102.17 0a21 21 0 1120.9-21 20.84 20.84 0 01-20.9 21m152.09 118.86C491.1 394.08 512 359.13 512 319.51c0-71.08-68.5-129.35-154.41-129.35s-154.42 58.27-154.42 129.35 68.5 129.34 154.42 129.34c17.41 0 34.83-2.33 49.92-7 2.49-.86 3.48-1.17 4.64-1.17a16.67 16.67 0 018.13 2.34L454 462.83a11.62 11.62 0 003.48 1.17 5 5 0 005-4.65v-.33a47.62 47.62 0 00-4.16-26.26 11.62 11.62 0 01-1.15-4.65 14.35 14.35 0 011.65-7.32"/><path d="M246.13 178.51a24.47 24.47 0 010-48.94c12.77 0 24.38 11.65 24.38 24.47 1 12.82-11.61 24.47-24.38 24.47m-123.06 0a24.47 24.47 0 1124.38-24.47c.01 12.82-11.6 24.47-24.38 24.47m74.13 145.09c-85.87 0-154.41-58.26-154.41-129.34S126.73 65 212.6 65 367 123.27 367 194.35c0 37.08-19.15 71.49-51.82 94.45-1.15 1.17-1.15 2.34-1.15 4.65a36.44 36.44 0 01-1.15 8.14 49.21 49.21 0 00-3.49 14.78 11.05 11.05 0 01-3.48 4.65c-1.15 1.17-3.49 1.17-4.64.07l-38-21.05a28.13 28.13 0 00-7-2.34c-1.16 0-2.32 0-4.64 1.16-13.97 4.66-28.97 6.99-44.95 7z"/></svg>
                <div class="info-text">
                  <p class="info-label">微信号</p>
                  <h4 class="info-value">{{ profile.basic.wechat || '未绑定' }}</h4>
                </div>
              </div>
              @if (!canViewSensitiveInfo) {
                <div class="permission-notice">
                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336 208v-95a80 80 0 00-160 0v95" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><rect x="96" y="208" width="320" height="272" rx="48" ry="48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
                  <span>仅客服和组长可查看完整联系方式</span>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- 客户画像 -->
        <div class="card preferences-card">
          <div class="card-header">
            <h3 class="card-title">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11-35.5-3.6-47.7zM120 216c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm40 134c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm40-134c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm64 212c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm72-78c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm24-136c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"/></svg>
              客户画像
            </h3>
          </div>
          <div class="card-content">
            <div class="preference-grid">
              <!-- 风格偏好 -->
              <div class="preference-item">
                <div class="preference-label">
                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M452.37 59.63h0a40.49 40.49 0 00-57.26 0L184 294.74c23.08 4.7 46.12 27.29 49.26 49.26l219.11-211.11a40.49 40.49 0 000-57.26zM138 336c-29.88 0-54 24.5-54 54.86 0 23.95-20.88 36.57-36 36.57C64.56 449.74 92.82 464 120 464c39.78 0 72-32.73 72-73.14 0-30.36-24.12-54.86-54-54.86z"/></svg>
                  <span>风格偏好</span>
                </div>
                <div class="preference-value">
                  @if (profile.preferences.style.length > 0) {
                    @for (style of profile.preferences.style; track style) {
                      <span class="badge badge-tertiary">{{ style }}</span>
                    }
                  } @else {
                    <span class="empty">未设置</span>
                  }
                </div>
              </div>

              <!-- 预算范围 -->
              <div class="preference-item">
                <div class="preference-label">
                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path d="M310.4 140.6c-17.8 0-32.4 14.2-32.4 31.7v151.4c0 17.5 14.6 31.7 32.4 31.7M201.6 140.6c17.8 0 32.4 14.2 32.4 31.7v151.4c0 17.5-14.6 31.7-32.4 31.7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
                  <span>预算范围</span>
                </div>
                <div class="preference-value">
                  <span class="badge badge-success">
                    {{ formatBudget(profile.preferences.budget) }}
                  </span>
                </div>
              </div>

              <!-- 色彩氛围 -->
              @if (profile.preferences.colorAtmosphere) {
                <div class="preference-item">
                  <div class="preference-label">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="208" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 48v208m121.57-38.13l-169.14 169.14m207.57-85.01H208"/></svg>
                    <span>色彩氛围</span>
                  </div>
                  <div class="preference-value">
                    <span class="badge badge-warning">
                      {{ profile.preferences.colorAtmosphere }}
                    </span>
                  </div>
                </div>
              }

              <!-- 需求类型 -->
              @if (profile.preferences.demandType) {
                <div class="preference-item">
                  <div class="preference-label">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M240 128h64m-64 64h64m-192 64h192m-192 64h192m-192 64h192"/><path d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z"/></svg>
                    <span>需求类型</span>
                  </div>
                  <div class="preference-value">
                    <span class="badge badge-medium">
                      {{ profile.preferences.demandType }}
                    </span>
                  </div>
                </div>
              }
            </div>
          </div>
        </div>

        <!-- 所在群聊 -->
        @if (profile.groups.length > 0) {
          <div class="card groups-card">
            <div class="card-header">
              <h3 class="card-title">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M87.48 380c1.2-4.38-1.43-10.47-3.94-14.86a42.63 42.63 0 00-2.54-3.8 199.81 199.81 0 01-33-110C47.65 139.09 140.73 48 255.83 48 356.21 48 440 117.54 459.58 209.85a199 199 0 014.42 41.64c0 112.41-89.49 204.93-204.59 204.93-18.3 0-43-4.6-56.47-8.37s-26.92-8.77-30.39-10.11a31.09 31.09 0 00-11.12-2.07 30.71 30.71 0 00-12.09 2.43l-67.83 24.48a16 16 0 01-4.67 1.22 9.6 9.6 0 01-9.57-9.74 15.85 15.85 0 01.6-3.29z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>
                所在群聊
              </h3>
              <p class="card-subtitle">点击可跳转到群聊</p>
            </div>
            <div class="card-content">
              <div class="groups-grid">
                @for (item of profile.groups; track item.groupChat.id) {
                  <div class="group-item" (click)="navigateToGroupChat(item.groupChat.get('chat_id'))">
                    <div class="group-info">
                      <svg class="icon icon-group" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path d="M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/><path d="M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32"/></svg>
                      <div class="group-text">
                        <h4>{{ item.groupChat.get('name') }}</h4>
                        @if (item.project) {
                          <p class="project-name">
                            <svg class="icon-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M336 264.13V352h86.13A80 80 0 00336 264.13z"/><path d="M256 232v-80a24 24 0 00-24-24H88a24 24 0 00-24 24v144a24 24 0 0024 24h144a24 24 0 0024-24v-40a8 8 0 018-8c3.55 0 8.3 2.6 10.41 5.67l46.78 68.14a24 24 0 0019.79 10.19h81.19z"/><path d="M264 216a40 40 0 1140 40 40 40 0 01-40-40z"/></svg>
                            {{ item.project.get('title') }}
                          </p>
                        } @else {
                          <p class="no-project">暂无关联项目</p>
                        }
                      </div>
                    </div>
                    <svg class="icon arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>
                  </div>
                }
              </div>
            </div>
          </div>
        }

        <!-- 历史项目 -->
        @if (profile.projects.length > 0) {
          <div class="card projects-card">
            <div class="card-header">
              <h3 class="card-title">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M440 432H72a40 40 0 01-40-40V120a40 40 0 0140-40h75.89a40 40 0 0122.19 6.72l27.84 18.56a40 40 0 0022.19 6.72H440a40 40 0 0140 40v240a40 40 0 01-40 40z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/></svg>
                历史项目
              </h3>
            </div>
            <div class="card-content">
              <div class="project-list">
                @for (project of profile.projects; track project.id) {
                  <div class="project-item" (click)="navigateToProject(project)">
                    <div class="project-content">
                      <h4>{{ project.get('title') }}</h4>
                      <p class="project-status">
                        <span class="badge" [class]="getProjectStatusClass(project.get('status'))">
                          {{ project.get('status') }}
                        </span>
                        <span class="stage">{{ project.get('currentStage') }}</span>
                      </p>
                      <p class="project-time">
                        更新时间: {{ formatDate(project.get('updatedAt')) }}
                      </p>
                    </div>
                    <svg class="icon arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"/></svg>
                  </div>
                }
              </div>
            </div>
          </div>
        }

        <!-- 跟进记录时间线 -->
        @if (profile.followUpRecords.length > 0) {
          <div class="card timeline-card">
            <div class="card-header">
              <h3 class="card-title">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 64C150 64 64 150 64 256s86 192 192 192 192-86 192-192S362 64 256 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 128v144h96"/></svg>
                跟进记录
              </h3>
            </div>
            <div class="card-content">
              <div class="timeline">
                @for (record of profile.followUpRecords; track $index) {
                  <div class="timeline-item">
                    <div class="timeline-dot">
                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 176v160m80-80H176"/></svg>
                    <span>{{ record.operator }}</span>
                    <p>{{ record.content }}</p>
                    </div>
                    <div class="timeline-content">
                      <div class="timeline-time">{{ formatDate(record.time) }}</div>
                      <div class="timeline-text">
                        <strong>{{ record.operator }}</strong>
                        <p>{{ record.content }}</p>
                      </div>
                    </div>
                  </div>
                }
              </div>
            </div>
          </div>
        }
      </div>
    }
  </div>
</div>