yss-project/src/app/pages/customer-service/case-library/case-library.html

<div class="case-library-container">
  <!-- 中间内容区 -->
  <div class="content-wrapper">
      <!-- 欢迎区域 -->
      <section class="welcome-section">
        <h2>案例库</h2>
        <p>今天是 {{ currentDate.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' }) }}，为客户提供最佳的设计参考</p>
      </section>

      <!-- 筛选区域（固定在顶部） -->
      <section class="filter-section">
        <div class="filter-header">
          <button class="filter-toggle-btn" (click)="toggleFilterPanel()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <line x1="4" y1="10" x2="20" y2="10"></line>
              <line x1="4" y1="14" x2="20" y2="14"></line>
              <line x1="4" y1="18" x2="13" y2="18"></line>
            </svg>
            <span>高级筛选</span>
          </button>
          <button class="reset-filter-btn" (click)="resetFilters()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="23 4 23 10 17 10"></polyline>
              <polyline points="1 20 1 14 7 14"></polyline>
              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
            <span>重置筛选</span>
          </button>
        </div>

        <!-- 高级筛选面板 -->
        <div class="filter-panel" [class.show]="showFilterPanel()">
          <form [formGroup]="filterForm" class="filter-form">
            <div class="filter-row">
              <div class="filter-group">
                <label>装修风格</label>
                <div class="checkbox-group">
                  <label *ngFor="let style of styleOptions" class="checkbox-item">
                    <input 
                      type="checkbox" 
                      [value]="style"
                      [checked]="filterForm.get('style')?.value?.includes(style) || false"
                      (change)="onStyleChange(style, $event.target.checked)"
                    />
                    <span>{{ style }}</span>
                  </label>
                </div>
              </div>
              
              <div class="filter-group">
                <label>户型</label>
                <select formControlName="houseType">
                  <option value="">全部户型</option>
                  <option *ngFor="let type of houseTypeOptions" [value]="type">{{ type }}</option>
                </select>
              </div>
              
              <div class="filter-group">
                <label>楼盘</label>
                <select formControlName="property">
                  <option value="">全部楼盘</option>
                  <option *ngFor="let property of propertyOptions" [value]="property">{{ property }}</option>
                </select>
              </div>
            </div>
            
            <div class="filter-row">
              <div class="filter-group">
                <label>项目类型</label>
                <select formControlName="projectType">
                  <option value="">全部类型</option>
                  <option *ngFor="let pt of projectTypeOptions" [value]="pt">{{ pt }}</option>
                </select>
              </div>
              <div class="filter-group">
                <label>细分类型</label>
                <select formControlName="subType">
                  <option value="">全部细分</option>
                  <option *ngFor="let st of subTypeOptions" [value]="st">{{ st }}</option>
                </select>
              </div>
              <div class="filter-group">
                <label>渲染水平</label>
                <select formControlName="renderingLevel">
                  <option value="">全部水平</option>
                  <option *ngFor="let rl of renderingLevelOptions" [value]="rl">{{ rl }}</option>
                </select>
              </div>
              <div class="filter-group">
                <label>排序</label>
                <select formControlName="sortBy">
                  <option *ngFor="let opt of sortOptions" [value]="opt.value">{{ opt.label }}</option>
                </select>
              </div>
            </div>
            
            <div class="filter-row">
              <div class="filter-group">
                <label>房屋面积</label>
                <div class="range-inputs">
                  <input 
                    type="number" 
                    formControlName="minArea"
                    placeholder="最小面积"
                    min="0"
                  />
                  <span>-</span>
                  <input 
                    type="number" 
                    formControlName="maxArea"
                    placeholder="最大面积"
                    min="0"
                  />
                  <span>㎡</span>
                </div>
              </div>
              
              <div class="filter-group">
                <label>收藏案例</label>
                <label class="checkbox-item full-width">
                  <input type="checkbox" formControlName="favorite" />
                  <span>仅显示我收藏的案例</span>
                </label>
              </div>
            </div>
          </form>
        </div>
      </section>

      <!-- 案例展示区域 -->
      <section class="cases-section">
        <div class="section-header">
          <h3>精选案例 <span class="cases-count">({{ filteredCases().length }})</span></h3>
        </div>
        
        <!-- 案例网格（瀑布流布局） -->
        <div class="cases-grid">
          <div *ngIf="filteredCases().length === 0" class="empty-state">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
              <circle cx="8.5" cy="8.5" r="1.5"></circle>
              <polyline points="21 15 16 10 5 21"></polyline>
            </svg>
            <p>未找到符合条件的案例</p>
            <button class="btn-reset" (click)="resetFilters()">重置筛选条件</button>
          </div>
          
          <div *ngFor="let caseItem of paginatedCases()" class="case-card" (click)="viewCaseDetails(caseItem)">
            <div class="case-image-container">
              <img [src]="caseItem.coverImage" [alt]="caseItem.name" class="case-image">
              <div class="case-overlay">
                <button class="favorite-btn" (click)="$event.stopPropagation(); toggleFavorite(caseItem.id)">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                  </svg>
                  <span *ngIf="caseItem.isFavorite">已收藏</span>
                  <span *ngIf="!caseItem.isFavorite">收藏</span>
                </button>
                <button class="share-btn" (click)="$event.stopPropagation(); shareCase(caseItem.id)">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
                    <polyline points="16 6 12 2 8 6"></polyline>
                    <line x1="12" y1="2" x2="12" y2="15"></line>
                  </svg>
                  <span>分享</span>
                </button>
              </div>
            </div>
            
            <div class="case-info">
              <h4 class="case-name">{{ caseItem.name }}</h4>
              
              <div class="case-meta">
                <div class="meta-item">
                  <svg width="14" height="14" 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>
                  <span>{{ caseItem.designer }}</span>
                </div>
                <div class="meta-item">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                  </svg>
                  <span>{{ caseItem.area }}㎡</span>
                </div>
                <div class="meta-item">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M14 10h4.764a2 2 0 0 1 1.789 2.894l-3.5 7A2 2 0 0 1 15.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 0 0-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2h2.5"></path>
                  </svg>
                  <span>{{ caseItem.views }}浏览</span>
                </div>
              </div>
              
              <div class="case-tags">
                <span *ngFor="let tag of caseItem.tags" class="tag">{{ tag }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 分页控件 -->
        <div class="pagination" *ngIf="totalPages() > 1">
          <button class="page-btn" (click)="prevPage()" [disabled]="currentPage() === 1">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="15 18 9 12 15 6"></polyline>
            </svg>
          </button>
          
          <ng-container *ngFor="let page of pageNumbers()">
            <button 
              *ngIf="page !== -1; else ellipsis"
              class="page-btn"
              [class.active]="page === currentPage()"
              (click)="goToPage(page)"
            >
              {{ page }}
            </button>
            <ng-template #ellipsis>
              <div class="pagination-ellipsis">...</div>
            </ng-template>
          </ng-container>
          
          <button class="page-btn" (click)="nextPage()" [disabled]="currentPage() === totalPages()">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
      </section>
    </div>

  <!-- 案例详情模态框 -->
  <div class="case-modal" *ngIf="selectedCase()" (click)="closeCaseDetails()">
    <div class="modal-content" (click)="$event.stopPropagation()">
      <button class="close-btn" (click)="closeCaseDetails()">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
      
      <div class="case-detail-header">
        <h2>{{ selectedCase()?.name }}</h2>
        <div class="case-detail-meta">
          <span>{{ selectedCase()?.designer }}</span>
          <span>{{ selectedCase()?.area }}㎡</span>
          <span>{{ formatDate(selectedCase()?.createdAt!) }}</span>
        </div>
      </div>
      
      <!-- 案例图片轮播 -->
      <div class="case-image-gallery">
        <div class="main-image">
          <img [src]="selectedCase()?.coverImage" [alt]="selectedCase()?.name">
        </div>
        <div class="thumbnails">
          <img 
            *ngFor="let image of selectedCase()?.detailImages"
            [src]="image"
            [alt]="selectedCase()?.name"
            class="thumbnail"
          >
        </div>
      </div>
      
      <!-- 案例详情信息 -->
      <div class="case-detail-info">
        <div class="info-section">
          <h3>案例详情</h3>
          <p>{{ selectedCase()?.description }}</p>
          <p>本案例采用了{{ selectedCase()?.style }}风格设计，为{{ selectedCase()?.houseType }}户型，面积{{ selectedCase()?.area }}平方米。设计师{{ selectedCase()?.designer }}根据客户需求，融合了现代美学与实用功能，打造了舒适且富有个性的居住空间。</p>
        </div>
        
        <div class="info-section">
          <h3>基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <label>风格</label>
              <span>{{ getSelectedCaseStyle() }}</span>
            </div>
            <div class="info-item">
              <label>户型</label>
              <span>{{ selectedCase()?.houseType }}</span>
            </div>
            <div class="info-item">
              <label>楼盘</label>
              <span>{{ selectedCase()?.property }}</span>
            </div>
            <div class="info-item">
              <label>面积</label>
              <span>{{ selectedCase()?.area }}㎡</span>
            </div>
            <div class="info-item">
              <label>分类</label>
              <span>{{ selectedCase()?.category }}</span>
            </div>
            <div class="info-item">
              <label>项目类型</label>
              <span>{{ selectedCase()?.projectType }}</span>
            </div>
            <div class="info-item">
              <label>细分类型</label>
              <span>{{ selectedCase()?.subType }}</span>
            </div>
            <div class="info-item">
              <label>渲染水平</label>
              <span>{{ selectedCase()?.renderingLevel }}</span>
            </div>
            <div class="info-item">
              <label>浏览次数</label>
              <span>{{ selectedCase()?.views }}</span>
            </div>
            <div class="info-item">
              <label>收藏次数</label>
              <span>{{ selectedCase()?.favoriteCount }}</span>
            </div>
            <div class="info-item">
              <label>喜欢次数</label>
              <span>{{ selectedCase()?.likeCount }}</span>
            </div>
            <div class="info-item">
              <label>分享次数</label>
              <span>{{ selectedCase()?.shareCount }}</span>
            </div>
            <div class="info-item">
              <label>转化率</label>
              <span>{{ selectedCase()?.conversionRate }}%</span>
            </div>
          </div>
        </div>
        
        <div class="info-section">
          <h3>标签</h3>
          <div class="tags-container">
            <span *ngFor="let tag of selectedCase()?.tags" class="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="case-actions">
        <button 
          class="primary-btn"
          (click)="toggleFavorite(selectedCase()?.id!)"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
          </svg>
          <span *ngIf="selectedCase()?.isFavorite">已收藏</span>
          <span *ngIf="!selectedCase()?.isFavorite">收藏案例</span>
        </button>
        <button class="secondary-btn" (click)="shareCase(selectedCase()?.id!)">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
            <polyline points="16 6 12 2 8 6"></polyline>
            <line x1="12" y1="2" x2="12" y2="15"></line>
          </svg>
          <span>分享案例</span>
        </button>
        <button class="secondary-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
          </svg>
          <span>查看原图</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 分享弹窗 -->
  <div class="share-modal" *ngIf="showShareModal()" (click)="closeShareModal()">
    <div class="share-modal-content" (click)="$event.stopPropagation()">
      <button class="close-btn" (click)="closeShareModal()">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6 6L18 18M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
  
      <h3>分享案例</h3>
      <p class="share-tip">复制链接发送给客户，或扫码打开案例页</p>
  
      <div class="share-body">
        <div class="share-link-box">
          <input class="share-link-input" [value]="shareLink()" readonly />
          <button class="btn-primary" (click)="copyShareLink()">复制链接</button>
          <button class="btn-secondary" (click)="openShareLink()">打开</button>
        </div>
  
        <div class="qr-box">
          <img *ngIf="qrDataUrl(); else qrPlaceholder" [src]="qrDataUrl()" alt="分享二维码" width="160" height="160" />
          <ng-template #qrPlaceholder>
            <div class="qr-placeholder">二维码生成中或不可用</div>
          </ng-template>
          <div class="qr-actions" *ngIf="qrDataUrl()">
            <button class="btn-secondary" (click)="downloadQrCode()">下载二维码</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>