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

<div class="case-library-container">
  <!-- 页面头部 -->
  <div class="page-header">
    <h1>案例库</h1>
    <div class="header-actions">
      <button class="btn btn-primary" (click)="showStatistics()">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M3 3v18h18"></path>
          <path d="m19 9-5 5-4-4-3 3"></path>
        </svg>
        数据统计
      </button>
    </div>
  </div>

  <!-- 统计模块 -->
  @if (showStatsPanel) {
    <div class="stats-panel">
      <div class="stats-grid">
        <div class="stat-card">
          <h3>Top5 分享案例</h3>
          <div class="stat-list">
            @for (item of topSharedCases; track item.id) {
              <div class="stat-item">
                <span class="case-name">{{ item.name }}</span>
                <span class="stat-value">{{ item.shareCount }} 次分享</span>
              </div>
            }
          </div>
        </div>
        
        <div class="stat-card">
          <h3>客户最喜欢案例风格</h3>
          <div class="stat-list">
            @for (item of favoriteStyles; track item.style) {
              <div class="stat-item">
                <span class="style-name">{{ item.style }}</span>
                <span class="stat-value">{{ item.count }} 次收藏</span>
              </div>
            }
          </div>
        </div>
        
        <div class="stat-card">
          <h3>设计师作品推荐率</h3>
          <div class="stat-list">
            @for (item of designerRecommendations; track item.designer) {
              <div class="stat-item">
                <span class="designer-name">{{ item.designer }}</span>
                <span class="stat-value">{{ item.rate }}% 推荐率</span>
              </div>
            }
          </div>
        </div>
      </div>
    </div>
  }

  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-group">
      <div class="search-box">
        <input 
          type="text" 
          placeholder="搜索案例名称、设计师或关键词..."
          [formControl]="searchControl"
          class="search-input"
        >
        <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <circle cx="11" cy="11" r="8"></circle>
          <path d="m21 21-4.3-4.3"></path>
        </svg>
      </div>
    </div>

    <div class="filter-group">
      <select [formControl]="projectTypeControl" class="filter-select">
        <option value="">项目类型</option>
        <option value="工装">工装</option>
        <option value="家装">家装</option>
      </select>

      <select [formControl]="spaceTypeControl" class="filter-select">
        <option value="">空间类型</option>
        <option value="平层">平层</option>
        <option value="复式">复式</option>
        <option value="别墅">别墅</option>
        <option value="自建房">自建房</option>
      </select>

      <select [formControl]="renderingLevelControl" class="filter-select">
        <option value="">渲染水平</option>
        <option value="高端">高端</option>
        <option value="中端">中端</option>
        <option value="低端">低端</option>
      </select>

      <select [formControl]="styleControl" class="filter-select">
        <option value="">设计风格</option>
        <option value="现代">现代</option>
        <option value="中式">中式</option>
        <option value="欧式">欧式</option>
        <option value="美式">美式</option>
        <option value="日式">日式</option>
        <option value="工业风">工业风</option>
        <option value="极简风">极简风</option>
        <option value="轻奢风">轻奢风</option>
      </select>

      <select [formControl]="areaRangeControl" class="filter-select">
        <option value="">面积范围</option>
        <option value="0-50">50㎡以下</option>
        <option value="50-100">50-100㎡</option>
        <option value="100-150">100-150㎡</option>
        <option value="150-200">150-200㎡</option>
        <option value="200+">200㎡以上</option>
      </select>
    </div>

    <div class="filter-actions">
      <button class="btn btn-secondary" (click)="resetFilters()">
        重置筛选
      </button>
      <button class="btn btn-primary" (click)="applyFilters()">
        应用筛选
      </button>
    </div>
  </div>

  <!-- 案例网格 -->
  <div class="cases-grid">
    @for (caseItem of paginatedCases; track caseItem.id) {
      <div class="case-card">
        <!-- 图片容器 -->
        <div class="case-image-container">
          <img 
            [src]="caseItem.coverImage" 
            [alt]="caseItem.name"
            class="case-image"
            (click)="viewCaseDetail(caseItem)"
          >
          
          <!-- 图片覆盖层 -->
          <div class="image-overlay">
            <div class="case-badges">
              <span class="badge project-type">{{ caseItem.projectType }}</span>
              <span class="badge space-type">{{ caseItem.spaceType }}</span>
              <span class="badge rendering-level">{{ caseItem.renderingLevel }}</span>
            </div>
            
            <div class="action-buttons">
              <button 
                class="btn-icon favorite-btn" 
                [class.active]="caseItem.isFavorite"
                (click)="toggleFavorite(caseItem)"
              >
                <svg width="20" height="20" viewBox="0 0 24 24" fill="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>
              </button>
              
              <button class="btn-icon share-btn" (click)="shareCase(caseItem)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <circle cx="18" cy="5" r="3"></circle>
                  <circle cx="6" cy="12" r="3"></circle>
                  <circle cx="18" cy="19" r="3"></circle>
                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                </svg>
              </button>
            </div>
          </div>
        </div>

        <!-- 案例信息 -->
        <div class="case-info">
          <div class="case-header">
            <h3 class="case-name" (click)="viewCaseDetail(caseItem)">{{ caseItem.name }}</h3>
            <button class="info-share-btn" (click)="shareCase(caseItem)" title="分享案例">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <circle cx="18" cy="5" r="3"></circle>
                <circle cx="6" cy="12" r="3"></circle>
                <circle cx="18" cy="19" r="3"></circle>
                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
              </svg>
            </button>
          </div>
          
          <div class="case-meta">
            <div class="meta-item">
              <svg width="16" height="16" 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>
              @if (isInternalUser) {
                <span class="team-badge">{{ caseItem.team }}</span>
              }
            </div>
            
            <div class="meta-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="9" x2="21" y2="9"></line>
              </svg>
              <span>{{ caseItem.area }}㎡</span>
            </div>
            
            <div class="meta-item">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
              </svg>
              <span>{{ caseItem.viewCount }} 浏览</span>
            </div>
          </div>

          <!-- 风格标签 -->
          <div class="case-tags">
            @for (tag of caseItem.styleTags; track $index) {
              <span class="tag">{{ tag }}</span>
            }
          </div>

          <!-- 客户评价 -->
          @if (caseItem.customerReview) {
            <div class="customer-review">
              <p class="review-text">"{{ caseItem.customerReview }}"</p>
            </div>
          }

          <!-- 设计师内部信息 -->
          @if (isInternalUser) {
            <div class="internal-info">
              <div class="internal-badge" [class.excellent]="caseItem.isExcellent">
                {{ caseItem.isExcellent ? '优秀案例库' : '普通案例' }}
              </div>
              <div class="internal-stats">
                <span>分享: {{ caseItem.shareCount }}</span>
                <span>收藏: {{ caseItem.favoriteCount }}</span>
              </div>
            </div>
          }
        </div>
      </div>
    } @empty {
      <div class="empty-state">
        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
          <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
        </svg>
        <h3>暂无案例</h3>
        <p>尝试调整筛选条件或刷新页面</p>
        <button class="btn btn-primary" (click)="resetFilters()">重置筛选</button>
      </div>
    }
  </div>

  <!-- 分页控件 -->
  @if (filteredCases.length > 0) {
    <div class="pagination">
      <button 
        class="pagination-btn" 
        [disabled]="currentPage === 1"
        (click)="previousPage()"
      >
        上一页
      </button>
      
      <span class="page-info">第 {{ currentPage }} 页 / 共 {{ totalPages }} 页 ({{ filteredCases.length }} 个案例)</span>
      
      <button 
        class="pagination-btn" 
        [disabled]="currentPage === totalPages"
        (click)="nextPage()"
      >
        下一页
      </button>
    </div>
  }

  <!-- 案例详情面板 -->
  @if (selectedCase) {
    <app-case-detail-panel
      [case]="selectedCase"
      [isInternalUser]="isInternalUser"
      (close)="closeCaseDetail()"
      (toggleFavorite)="toggleFavorite($event)"
      (share)="shareCase($event)"
    ></app-case-detail-panel>
  }

  <!-- 分享弹窗 -->
  @if (selectedCaseForShare) {
    <div class="share-modal" (click)="closeShareModal()">
      <div class="share-content" (click)="$event.stopPropagation()">
        <div class="share-header">
          <h3>分享案例</h3>
          <button class="close-btn" (click)="closeShareModal()">×</button>
        </div>
        
        <div class="share-options">
          <div class="qr-code">
            <img [src]="generateQRCode(selectedCaseForShare)" alt="分享二维码">
            <p>扫描二维码分享</p>
          </div>
          
          <div class="share-links">
            <div class="share-link">
              <input 
                type="text" 
                [value]="generateShareLink(selectedCaseForShare)" 
                readonly
                class="link-input"
              >
              <button class="btn btn-secondary" (click)="copyShareLink()">复制链接</button>
            </div>
            
            <div class="social-share">
              <button class="btn btn-primary" (click)="shareToWeCom()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                  <rect x="2" y="9" width="4" height="12"></rect>
                  <circle cx="4" cy="4" r="2"></circle>
                </svg>
                分享到企业微信
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</div>