snapshot/frontend/src/components/UploadConfig.vue

<template>
  <div class="settings-container">
    <!-- 过期时间设置 -->
    <div class="setting-item">
      <label>⏰ 过期时间：</label>
      <div class="option-buttons">
        <button
          v-for="hours in expirationOptions"
          :key="hours"
          :class="['option-btn', { active: expirationHours === hours }]"
          @click="$emit('update:expirationHours', hours)"
        >
          {{ getExpirationLabel(hours) }}
        </button>
        <input
          :value="customHours"
          type="number"
          min="1"
          max="24"
          class="custom-input"
          placeholder="自定义"
          @input="onCustomHoursChange"
        >
      </div>
    </div>

    <!-- 下载次数限制 -->
    <div class="setting-item">
      <label>📥 下载次数：</label>
      <select
        :value="maxDownloadCount"
        class="setting-select"
        @change="$emit('update:maxDownloadCount', Number($event.target.value))"
      >
        <option v-for="option in downloadCountOptions" :key="option.value" :value="option.value">
          {{ option.label }}
        </option>
      </select>
    </div>

    <!-- 密码设置 -->
    <div class="setting-item">
      <label>🔒 访问密码：</label>
      <input
        :value="password"
        type="password"
        class="password-input"
        placeholder="选填，留空则无需密码"
        @input="$emit('update:password', $event.target.value)"
      >
    </div>

    <!-- 上传按钮 -->
    <button
      class="btn-upload"
      :disabled="!canUpload || uploading"
      @click="$emit('upload')"
    >
      <span v-if="uploading" class="spinner"></span>
      <span v-else>🚀 立即上传</span>
    </button>

    <!-- 上传进度条 -->
    <div v-if="uploading && uploadProgress > 0" class="upload-progress-container">
      <div class="progress-info">
        <span class="progress-percent">{{ uploadProgress }}%</span>
        <span class="progress-speed">{{ formatSpeed(uploadSpeed) }}</span>
        <span v-if="remainingTime > 0" class="progress-time">
          剩余 {{ formatTime(remainingTime) }}
        </span>
      </div>
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import config from '@/config'

const props = defineProps({
  expirationHours: {
    type: Number,
    default: 3
  },
  maxDownloadCount: {
    type: Number,
    default: -1
  },
  password: {
    type: String,
    default: ''
  },
  canUpload: {
    type: Boolean,
    default: false
  },
  uploading: {
    type: Boolean,
    default: false
  },
  uploadProgress: {
    type: Number,
    default: 0
  },
  uploadSpeed: {
    type: Number,
    default: 0
  },
  remainingTime: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits([
  'upload',
  'update:expirationHours',
  'update:maxDownloadCount',
  'update:password'
])

const expirationOptions = config.expirationOptions
const downloadCountOptions = config.downloadCountOptions
const customHours = ref(null)

function getExpirationLabel(hours) {
  return config.expirationLabels[hours] || `${hours}小时`
}

function onCustomHoursChange(e) {
  const val = Number(e.target.value)
  customHours.value = val
  if (val && val >= 1) {
    emit('update:expirationHours', val)
  }
}

// 格式化上传速度
function formatSpeed(bytesPerSecond) {
  if (bytesPerSecond === 0) return '0 B/s'
  const k = 1024
  const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s']
  const i = Math.floor(Math.log(bytesPerSecond) / Math.log(k))
  const speed = bytesPerSecond / Math.pow(k, i)
  return Math.round(speed * 100) / 100 + ' ' + sizes[i]
}

// 格式化剩余时间
function formatTime(seconds) {
  if (seconds < 60) {
    return `${seconds}秒`
  } else if (seconds < 3600) {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = seconds % 60
    return remainingSeconds > 0 ? `${minutes}分${remainingSeconds}秒` : `${minutes}分钟`
  } else {
    const hours = Math.floor(seconds / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    return minutes > 0 ? `${hours}小时${minutes}分钟` : `${hours}小时`
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.settings-container {
  @extend .card !optional;
  margin-bottom: $spacing-xl;
}

.setting-item {
  display: flex;
  align-items: center;
  gap: $spacing-md;
  margin-bottom: $spacing-lg;

  &:last-child {
    margin-bottom: 0;
  }

  label {
    min-width: 120px;
    color: $text-secondary;
  }
}

.option-buttons {
  display: flex;
  gap: $spacing-sm;
  flex-wrap: wrap;
  flex: 1;
}

.option-btn {
  padding: $spacing-sm $spacing-md;
  background: $bg-tertiary;
  border: 1px solid $border-color;
  border-radius: $radius-md;
  color: $text-primary;
  cursor: pointer;
  transition: all $transition-base ease;

  &:hover {
    background: $bg-hover;
  }

  &.active {
    background: linear-gradient(135deg, $primary-color, $secondary-color);
    border-color: transparent;
  }
}

.custom-input {
  width: 100px;
  padding: $spacing-sm $spacing-md;
  background: $bg-tertiary;
  border: 1px solid $border-color;
  border-radius: $radius-md;
  color: $text-primary;
  text-align: center;
}

.setting-select,
.password-input {
  flex: 1;
}

.btn-upload {
  width: 100%;
  margin-top: $spacing-lg;
  padding: $spacing-lg;
  font-size: $font-size-xl;
  font-weight: 600;
  border-radius: $radius-lg;
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 上传进度条样式
.upload-progress-container {
  margin-top: $spacing-md;
  padding: $spacing-md;
  background: rgba($bg-secondary, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid $border-color;
  border-radius: $radius-lg;
  animation: progressSlideIn 0.3s ease-out;
}

@keyframes progressSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing-sm;
  font-size: $font-size-sm;
  color: $text-secondary;

  .progress-percent {
    font-weight: 600;
    color: $primary-color;
    font-size: $font-size-base;
  }

  .progress-speed {
    color: $text-muted;
  }

  .progress-time {
    color: $warning-color;
    font-weight: 500;
  }
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: $bg-tertiary;
  border-radius: $radius-full;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, $primary-color 0%, $secondary-color 100%);
  border-radius: $radius-full;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: progressShimmer 2s infinite;
  }
}

@keyframes progressShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 768px) {
  .option-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $spacing-xs;
  }

  .option-btn {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-sm;
    text-align: center;
  }

  .custom-input {
    width: 100%;
    grid-column: 1 / -1;
  }

  .setting-item {
    flex-direction: column;
    align-items: stretch;
    gap: $spacing-xs;

    label {
      min-width: auto;
      margin-bottom: $spacing-xs;
    }
  }

  .upload-progress-container {
    padding: $spacing-sm;

    .progress-info {
      flex-wrap: wrap;
      gap: $spacing-xs;
      font-size: $font-size-xs;

      .progress-percent {
        font-size: $font-size-sm;
      }
    }

    .progress-bar {
      height: 6px;
    }
  }
}
</style>