yss-project/src/modules/project/components/project-files-modal/project-files-modal.component.html

<!-- 模态框背景 -->
<div class="modal-overlay"
     *ngIf="isVisible"
     (click)="onBackdropClick($event)">

  <!-- 模态框内容 -->
  <div class="modal-container" (click)="$event.stopPropagation()">

    <!-- 模态框头部 -->
    <div class="modal-header">
      <div class="header-left">
        <h2 class="modal-title">
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
            <polyline points="14,2 14,8 20,8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
          </svg>
          项目文件
        </h2>
        <div class="file-stats">
          <span class="stat-item">
            <span class="stat-number">{{ totalFiles }}</span>
            <span class="stat-label">文件</span>
          </span>
          <span class="stat-item">
            <span class="stat-number">{{ formatFileSize(totalSize) }}</span>
            <span class="stat-label">总大小</span>
          </span>
          @if (imageCount > 0) {
            <span class="stat-item">
              <span class="stat-number">{{ imageCount }}</span>
              <span class="stat-label">图片</span>
            </span>
          }
          @if (documentCount > 0) {
            <span class="stat-item">
              <span class="stat-number">{{ documentCount }}</span>
              <span class="stat-label">文档</span>
            </span>
          }
        </div>
      </div>

      <div class="header-right">
        <!-- 视图切换 -->
        <div class="view-toggle">
          <button
            class="toggle-btn"
            [class.active]="previewMode === 'grid'"
            (click)="previewMode = 'grid'"
            title="网格视图">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="7" height="7"></rect>
              <rect x="14" y="3" width="7" height="7"></rect>
              <rect x="14" y="14" width="7" height="7"></rect>
              <rect x="3" y="14" width="7" height="7"></rect>
            </svg>
          </button>
          <button
            class="toggle-btn"
            [class.active]="previewMode === 'list'"
            (click)="previewMode = 'list'"
            title="列表视图">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="8" y1="6" x2="21" y2="6"></line>
              <line x1="8" y1="12" x2="21" y2="12"></line>
              <line x1="8" y1="18" x2="21" y2="18"></line>
              <line x1="3" y1="6" x2="3.01" y2="6"></line>
              <line x1="3" y1="12" x2="3.01" y2="12"></line>
              <line x1="3" y1="18" x2="3.01" y2="18"></line>
            </svg>
          </button>
        </div>

        <!-- 搜索框 -->
        <div class="search-box">
          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <input
            type="text"
            class="search-input"
            placeholder="搜索文件..."
            [(ngModel)]="searchQuery">
        </div>

        <!-- 过滤器 -->
        <select class="filter-select" [(ngModel)]="filterType">
          <option value="all">全部文件</option>
          <option value="images">图片</option>
          <option value="documents">文档</option>
          <option value="videos">视频</option>
        </select>

        <!-- 关闭按钮 -->
        <button class="close-btn" (click)="onClose()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>
      </div>
    </div>

    <!-- 模态框内容 -->
    <div class="modal-content">

      <!-- 加载状态 -->
      @if (loading) {
        <div class="loading-state">
          <div class="loading-spinner"></div>
          <p>加载文件中...</p>
        </div>
      } @else if (getFilteredFiles().length === 0) {
        <!-- 空状态 -->
        <div class="empty-state">
          <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
            <polyline points="13,2 13,9 20,9"></polyline>
          </svg>
          <h3>暂无文件</h3>
          <p>该项目还没有上传任何文件</p>
        </div>
      } @else {
        <!-- 文件列表 -->
        @if (previewMode === 'grid') {
          <div class="files-grid">
            @for (file of getFilteredFiles(); track file.id) {
              <div class="file-card" >
                <!-- 文件预览 -->
                <div class="file-preview" (click)="selectFile(file)">
                  @if (isImageFile(file)) {
                    <img [src]="file.url" [alt]="file.name" class="preview-image" />
                  } @else {
                    <div class="preview-placeholder">
                      <div class="file-icon">{{ getFileIcon(file.type) }}</div>
                      <div class="file-extension">{{ getFileExtension(file.name) }}</div>
                    </div>
                  }
                </div>

                <!-- 文件信息 -->
                <div class="file-info">
                  <h4 class="file-name" [title]="file.originalName">{{ file.originalName }}</h4>
                  <div class="file-meta">
                    <span class="file-size">{{ formatFileSize(file.size) }}</span>
                    <span class="file-date">{{ file.uploadedAt | date:'MM-dd HH:mm' }}</span>
                  </div>
                  <div class="file-description" *ngIf="file.description">
                    <p>{{ file.description }}</p>
                  </div>
                  <div class="file-footer">
                    <div class="uploader-info">
                      @if (file.uploadedBy?.avatar) {
                        <img [src]="file.uploadedBy?.avatar" [alt]="file.uploadedBy?.name" class="uploader-avatar" />
                      }
                      <span class="uploader-name">{{ file.uploadedBy?.name }}</span>
                      <span class="source-badge" [class]="getSourceBadgeClass(file.source)">
                        {{ getSourceLabel(file.source) }}
                      </span>
                    </div>
                    <div class="file-actions">
                      
                      @if(file && isImageFile(file)){
                        <button class="analyze-btn" (click)="openColorAnalysis(file)">色彩分析</button>
                      }
                      <button
                        class="action-btn download-btn"
                        (click)="downloadFile(file); $event.stopPropagation()"
                        title="下载">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                          <polyline points="7,10 12,15 17,10"></polyline>
                          <line x1="12" y1="15" x2="12" y2="3"></line>
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            }
          </div>
        } @else {
          <!-- 列表视图 -->
          <div class="files-list">
            @for (file of getFilteredFiles(); track file.id) {
              <div class="file-list-item" >
                <div class="list-file-icon" (click)="selectFile(file)">
                  @if (isImageFile(file)) {
                    <img [src]="file.url" [alt]="file.name" class="list-preview-image" />
                  } @else {
                    <span class="list-icon">{{ getFileIcon(file.type) }}</span>
                  }
                </div>
                <div class="list-file-info">
                  <div class="list-file-name">{{ file.originalName }}</div>
                  <div class="list-file-meta">
                    <span>{{ formatFileSize(file.size) }}</span>
                    <span>{{ file.uploadedAt | date:'MM-dd HH:mm' }}</span>
                    <span>{{ file.uploadedBy?.name }}</span>
                    <span class="source-badge" [class]="getSourceBadgeClass(file.source)">
                      {{ getSourceLabel(file.source) }}
                    </span>
                  </div>
                  @if (file.description) {
                    <div class="list-file-description">{{ file.description }}</div>
                  }
                </div>
                <div class="list-file-actions">
                  @if(isImageFile(file)){
                    <button class="analyze-btn" (click)="openColorAnalysis(file)">色彩分析</button>
                  }
                  <button
                    class="action-btn download-btn"
                    (click)="downloadFile(file); $event.stopPropagation()"
                    title="下载">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                      <polyline points="7,10 12,15 17,10"></polyline>
                      <line x1="12" y1="15" x2="12" y2="3"></line>
                    </svg>
                  </button>
                </div>
              </div>
            }
          </div>
        }
      }
    </div>
  </div>

  <!-- 文件预览模态框 -->
  @if (selectedFile) {
    <div class="preview-overlay" (click)="closePreview()">
      <div class="preview-container" (click)="$event.stopPropagation()">
        <div class="preview-header">
          <h3>{{ selectedFile.originalName }}</h3>
          <button class="preview-close" (click)="closePreview()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <div class="preview-content">
          @if (isImageFile(selectedFile)) {
            <img [src]="selectedFile.url" [alt]="selectedFile.originalName" class="preview-full-image" />
          } @else if (isVideoFile(selectedFile)) {
            <video [src]="selectedFile.url" controls class="preview-video"></video>
          } @else {
            <div class="preview-no-preview">
              <div class="preview-icon-large">{{ getFileIcon(selectedFile.type) }}</div>
              <p>该文件类型不支持预览</p>
              <button
                class="preview-download-btn"
                (click)="downloadFile(selectedFile)">
                下载文件
              </button>
            </div>
          }
        </div>

        <div class="preview-footer">
          <div class="preview-meta">
            <span>{{ formatFileSize(selectedFile.size) }}</span>
            <span>{{ selectedFile.uploadedAt | date:'yyyy-MM-dd HH:mm:ss' }}</span>
            <span>上传者: {{ selectedFile.uploadedBy?.name }}</span>
            <span class="source-badge" [class]="getSourceBadgeClass(selectedFile.source)">
              {{ getSourceLabel(selectedFile.source) }}
            </span>
          </div>
          <div class="preview-description">
            <textarea
              class="description-textarea"
              placeholder="添加文件说明..."
              [(ngModel)]="selectedFile.description"
              (blur)="updateFileDescription(selectedFile, selectedFile.description || '')">
            </textarea>
          </div>


        </div>
      </div>
    </div>
  }
</div>