feat: 完善注册流程的文件上传功能

lrj

昨天 9f8395fab13ca4b230a0f7d62636e209745c91d4

 web/src/views/carousel/index.vue

@@ -156,7 +156,7 @@
        <!-- 已上传的媒体列表 -->
        <div v-if="mediaList.length > 0">
          <h5>已上传媒体：</h5>
          <el-table :data="mediaList" size="small" style="width: 100%;">
          <el-table :data="mediaList" size="small" style="width: 100%;" v-loading="uploadingMedia">
            <el-table-column prop="name" label="文件名" min-width="200" />
            <el-table-column prop="mediaType" label="类型" width="100">
              <template #default="{ row }">
@@ -168,8 +168,19 @@
                <div v-if="row.mediaType === 1" class="media-preview" @click="openMediaInNewTab(row.fullUrl)">
                  <img :src="row.fullUrl" class="preview-image clickable" />
                </div>
                <div v-else-if="row.mediaType === 2" class="media-preview" @click="openMediaInNewTab(row.fullUrl)">
                  <video :src="row.fullUrl" class="preview-video clickable" muted></video>
                <div v-else-if="row.mediaType === 2" class="video-thumbnail-container" @click="openMediaInNewTab(row.fullUrl)">
                  <img v-if="row.thumbUrl || row.fullThumbUrl" 
                       :src="row.thumbUrl || row.fullThumbUrl" 
                       class="video-thumbnail" />
                  <div v-else class="video-placeholder">
                    <i class="el-icon-video-camera"></i>
                    <span>视频缩略图</span>
                  </div>
                  <div class="video-play-overlay">
                    <div class="video-play-button">
                      <i class="el-icon-video-play"></i>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
@@ -419,8 +430,8 @@
      ElMessage.error('只能上传图片或视频文件!')
      continue
    }
    if (file.size / 1024 / 1024 > 50) {
      ElMessage.error('文件大小不能超过 50MB!')
    if (file.size / 1024 / 1024 > 300) {
      ElMessage.error('文件大小不能超过 300MB!')
      continue
    }
    
@@ -692,6 +703,79 @@
  border-radius: 4px;
}

.video-thumbnail-container {
  position: relative;
  width: 80px;
  height: 60px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.video-placeholder {
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #999;
  font-size: 10px;
}

.video-placeholder i {
  font-size: 16px;
  margin-bottom: 2px;
}

.video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-thumbnail-container:hover .video-play-overlay {
  opacity: 1;
}

.video-play-button {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.3s ease;
}

.video-play-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.video-play-button i {
  font-size: 12px;
}

.clickable {
  cursor: pointer;
  transition: opacity 0.3s;