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

<!-- 加载状态 -->
@if (isLoading) {
  <div class="loading-container">
    <div class="loading-spinner">
      <div class="spinner"></div>
      <p>正在加载案例详情...</p>
    </div>
  </div>
}

<!-- 案例详情内容 -->
@if (case && !isLoading) {
  <div class="case-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <button class="back-btn" (click)="goBack()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="m15 18-6-6 6-6"/>
          </svg>
          返回案例库
        </button>
        <div class="breadcrumb">
          <span>案例库</span>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="m9 18 6-6-6-6"/>
          </svg>
          <span>{{ case.name }}</span>
        </div>
      </div>
      
      <div class="header-actions">
        <button 
          class="action-btn favorite-btn" 
          [class.active]="case.isFavorite"
          (click)="toggleFavorite()"
        >
          <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>
          {{ case.isFavorite ? '已收藏' : '收藏' }}
        </button>
        
        <button class="action-btn share-btn" (click)="shareCase()">
          <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 class="main-content">
      <!-- 左侧：案例图片和基本信息 -->
      <div class="left-section">
        <!-- 封面图片 -->
        <div class="cover-image">
          <img [src]="coverImageOf(case)" [alt]="case.name" class="cover-img" onerror="this.src='/assets/presets/家装图片.jpg'">
          <div class="image-overlay">
            <div class="case-badges">
              <span class="badge project-type">{{ case.projectType }}</span>
              <span class="badge space-type">{{ case.spaceType }}</span>
              <span class="badge rendering-level">{{ case.renderingLevel }}</span>
            </div>
          </div>
        </div>

        <!-- 基本信息 -->
        <div class="basic-info">
          <h1 class="case-name">{{ case.name }}</h1>
          
          <div class="meta-grid">
            <div class="meta-item">
              <svg width="20" height="20" 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 class="meta-content">
                <span class="meta-label">设计师</span>
                <span class="meta-value">{{ case.designer }}</span>
                @if (isInternalUser) {
                  <span class="team-badge">{{ case.team }}</span>
                }
              </div>
            </div>

            <div class="meta-item">
              <svg width="20" height="20" 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>
              <div class="meta-content">
                <span class="meta-label">面积</span>
                <span class="meta-value">{{ case.area }}㎡</span>
              </div>
            </div>

            <div class="meta-item">
              <svg width="20" height="20" 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>
              <div class="meta-content">
                <span class="meta-label">浏览量</span>
                <span class="meta-value">{{ case.viewCount }}</span>
              </div>
            </div>

            <div class="meta-item">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M8 2v4"></path>
                <path d="M16 2v4"></path>
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
              <div class="meta-content">
                <span class="meta-label">创建时间</span>
                <span class="meta-value">{{ getFormattedDate(case.createdAt) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：详细信息 -->
      <div class="right-section">
        <!-- 风格标签 -->
        <div class="info-section">
          <h3 class="section-title">设计风格</h3>
          <div class="style-tags">
            @for (tag of case.styleTags; track $index) {
              <span class="style-tag">{{ tag }}</span>
            }
          </div>
        </div>

        <!-- 客户评价 -->
        @if (case.customerReview) {
          <div class="info-section">
            <h3 class="section-title">客户评价</h3>
            <div class="review-content">
              <div class="quote-icon">"</div>
              <p class="review-text">{{ case.customerReview }}</p>
            </div>
          </div>
        }

        <!-- 统计信息 -->
        <div class="info-section">
          <h3 class="section-title">案例统计</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-icon">
                <svg width="24" height="24" 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>
              </div>
              <div class="stat-content">
                <span class="stat-value">{{ case.viewCount }}</span>
                <span class="stat-label">浏览次数</span>
              </div>
            </div>

            <div class="stat-item">
              <div class="stat-icon">
                <svg width="24" height="24" 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>
              </div>
              <div class="stat-content">
                <span class="stat-value">{{ case.favoriteCount }}</span>
                <span class="stat-label">收藏次数</span>
              </div>
            </div>

            <div class="stat-item">
              <div class="stat-icon">
                <svg width="24" height="24" 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>
              </div>
              <div class="stat-content">
                <span class="stat-value">{{ case.shareCount }}</span>
                <span class="stat-label">分享次数</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 设计师内部信息 -->
        @if (isInternalUser) {
          <div class="info-section internal-section">
            <h3 class="section-title">内部信息</h3>
            <div class="internal-grid">
              <div class="internal-item">
                <span class="internal-label">案例等级</span>
                <span class="internal-badge" [class.excellent]="case.isExcellent">
                  {{ case.isExcellent ? '优秀案例' : '普通案例' }}
                </span>
              </div>
              <div class="internal-item">
                <span class="internal-label">所属团队</span>
                <span class="internal-value">{{ case.team }}</span>
              </div>
              <div class="internal-item">
                <span class="internal-label">案例ID</span>
                <span class="internal-value">{{ case.id }}</span>
              </div>
            </div>
          </div>
        }
      </div>
    </div>
  </div>
}

<!-- 案例不存在 -->
@if (!case && !isLoading) {
  <div class="error-container">
    <div class="error-content">
      <svg width="64" height="64" 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>
      <h3>案例不存在</h3>
      <p>抱歉，您访问的案例不存在或已被删除</p>
      <button class="btn btn-primary" (click)="goBack()">返回案例库</button>
    </div>
  </div>
}