FileHost/app/components/UploadPreferencesPanel.vue

<script setup lang="ts">
import type { UploadMediaKind } from '~/composables/useUploadPreferences'

const props = withDefaults(defineProps<{
  /** 每个上传页各自一份偏好 */
  kind?: UploadMediaKind
}>(), {
  kind: 'image'
})

const emit = defineEmits<{
  back: []
}>()

const {
  compressEnabled,
  autoCopyMarkdown,
  copyFormat,
  clientWebpQuality,
  transcodeToHls,
  loadPreferences
} = useUploadPreferences(props.kind)

/** 视频床 / 文件床没有图片压缩相关选项 */
const isImageKind = computed(() => props.kind === 'image')
const isVideoKind = computed(() => props.kind === 'video')
const gridClass = computed(() => {
  if (isImageKind.value) return 'sm:grid-cols-3 sm:gap-6'
  if (isVideoKind.value) return 'sm:grid-cols-2 sm:gap-6'
  return 'mx-auto w-full max-w-md'
})

const { t } = useI18n()

const {
  userSettings,
  enabled: userAutoDeleteEnabled,
  daysDraft: userAutoDeleteDaysDraft,
  load: loadUserSettings
} = useUserAutoDeleteSettings()

const { isAdmin } = useAuth()
const {
  concurrency: transcodeConcurrency,
  threads: transcodeThreads,
  maxConcurrency: maxTranscodeConcurrency,
  maxThreads: maxTranscodeThreads,
  preset: transcodePreset,
  bitratePercent: transcodeBitratePercent,
  minBitratePercent,
  maxBitratePercent,
  load: loadTranscodeSettings
} = useTranscodeSettings()

const presetItems = computed(() => [
  { value: 'copy', label: t('preferences.presetCopy') },
  { value: 'veryfast', label: t('preferences.presetSpeed') },
  { value: 'medium', label: t('preferences.presetBalanced') },
  { value: 'slow', label: t('preferences.presetQuality') },
  { value: 'compress', label: t('preferences.presetCompress') }
])

function onBitrateInput(event: Event) {
  const value = Number((event.target as HTMLInputElement).value)
  transcodeBitratePercent.value = Number.isFinite(value) ? value : 80
}

const copyFormatItems = computed(() => [
  { label: t('copy.url'), value: 'url' as const },
  { label: t('copy.markdown'), value: 'markdown' as const },
  { label: t('copy.html'), value: 'html' as const },
  { label: t('copy.bbcode'), value: 'bbcode' as const }
])

const clientQualityLevel = computed(() => {
  if (clientWebpQuality.value >= 85) return t('preferences.qualityHigh')
  if (clientWebpQuality.value >= 60) return t('preferences.qualityMedium')
  return t('preferences.qualityLow')
})

function setCopyFormat(value: 'url' | 'markdown' | 'html' | 'bbcode') {
  copyFormat.value = value
}

function onClientQualityInput(event: Event) {
  const value = Number((event.target as HTMLInputElement).value)
  clientWebpQuality.value = Number.isFinite(value) ? value : 80
}

function selectPreset(value: string) {
  transcodePreset.value = value
}

onMounted(() => {
  loadPreferences()
  void loadUserSettings()
  void loadTranscodeSettings()
})
</script>

<template>
  <div class="upload-card-surface upload-card-surface--panel flex max-sm:min-h-0 flex-col overflow-hidden max-sm:overflow-visible sm:h-full">
    <div class="flex items-start justify-between gap-3 border-b border-default px-5 py-4 sm:px-6">
      <div class="flex min-w-0 items-start gap-2">
        <UIcon
          name="i-lucide-settings-2"
          class="mt-0.5 size-5 shrink-0 text-primary"
        />
        <div class="min-w-0">
          <h2 class="text-base font-semibold">
            {{ t('preferences.title') }}
          </h2>
          <p class="mt-0.5 text-xs text-muted">
            {{ t('preferences.subtitle') }}
          </p>
        </div>
      </div>
      <UButton
        :label="t('common.back')"
        icon="i-lucide-arrow-left"
        variant="ghost"
        color="neutral"
        size="sm"
        class="shrink-0"
        :aria-label="t('preferences.back')"
        @click="emit('back')"
      />
    </div>

    <div class="flex flex-1 flex-col justify-center p-5 sm:p-6">
      <div
        class="grid gap-5"
        :class="gridClass"
      >
        <div
          v-if="isImageKind"
          class="space-y-4"
        >
          <h3 class="text-sm font-semibold">
            {{ t('preferences.processing') }}
          </h3>

          <label class="flex cursor-pointer items-start gap-2.5">
            <UCheckbox
              v-model="compressEnabled"
              class="mt-0.5"
            />
            <span>
              <span class="block text-sm">{{ t('preferences.clientCompress') }}</span>
              <span class="mt-1 block text-xs leading-relaxed text-muted">
                {{ t('preferences.clientCompressHint') }}
              </span>
            </span>
          </label>

          <div
            v-if="userSettings"
            class="border-t border-default pt-4"
          >
            <label class="flex cursor-pointer items-start gap-2.5">
              <UCheckbox
                v-model="userAutoDeleteEnabled"
                class="mt-0.5"
              />
              <span class="min-w-0 flex-1">
                <span class="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm">
                  <span>{{ t('preferences.autoDeletePrefix') }}</span>
                  <UInput
                    v-model.number="userAutoDeleteDaysDraft"
                    type="number"
                    min="1"
                    max="3650"
                    size="xs"
                    class="w-14 tabular-nums"
                    :class="userAutoDeleteEnabled ? '' : 'pointer-events-none opacity-40'"
                  />
                  <span>{{ t('preferences.autoDeleteSuffix') }}</span>
                </span>
                <span class="mt-1 block text-xs leading-relaxed text-muted">
                  {{ t('preferences.autoDeleteHint') }}
                </span>
              </span>
            </label>
          </div>
          <div
            v-else
            class="flex justify-center border-t border-default py-4"
          >
            <UIcon
              name="i-lucide-loader-circle"
              class="size-5 animate-spin text-muted"
            />
          </div>
        </div>

        <div
          v-if="isVideoKind"
          class="space-y-4"
        >
          <h3 class="text-sm font-semibold">
            {{ t('preferences.videoProcessing') }}
          </h3>

          <label class="flex cursor-pointer items-start gap-2.5">
            <UCheckbox
              v-model="transcodeToHls"
              class="mt-0.5"
            />
            <span>
              <span class="block text-sm">{{ t('preferences.transcodeToHls') }}</span>
              <span class="mt-1 block text-xs leading-relaxed text-muted">
                {{ t('preferences.transcodeToHlsHint') }}
              </span>
            </span>
          </label>

          <div
            v-if="transcodeToHls"
            class="ml-7 space-y-3 border-t border-default pt-4"
          >
            <div class="flex items-center gap-2 text-sm">
              <span class="shrink-0">{{ t('preferences.transcodeConcurrency') }}</span>
              <UInput
                v-model.number="transcodeConcurrency"
                type="number"
                min="1"
                :max="maxTranscodeConcurrency"
                size="xs"
                class="w-16 tabular-nums"
                :disabled="!isAdmin"
              />
              <span class="text-muted">{{ t('preferences.unitCount') }}</span>
              <span class="text-xs text-muted">{{ t('preferences.concurrentHint') }}</span>
            </div>

            <div class="flex items-center gap-2 text-sm">
              <span class="shrink-0">{{ t('preferences.transcodeThreads') }}</span>
              <UInput
                v-model.number="transcodeThreads"
                type="number"
                min="1"
                :max="maxTranscodeThreads"
                size="xs"
                class="w-16 tabular-nums"
                :disabled="!isAdmin"
              />
              <span class="text-muted">{{ t('preferences.unitCount') }}</span>
              <span class="text-xs text-muted">{{ t('preferences.threadsHint') }}</span>
            </div>

            <div class="flex items-center gap-2 text-sm">
              <span class="shrink-0">{{ t('preferences.transcodeQuality') }}</span>
              <div class="flex gap-1 rounded-lg border border-default p-0.5">
                <UButton
                  v-for="item in presetItems"
                  :key="item.value"
                  size="xs"
                  class="flex-1 justify-center"
                  :variant="transcodePreset === item.value ? 'solid' : 'ghost'"
                  :color="transcodePreset === item.value ? 'primary' : 'neutral'"
                  :label="item.label"
                  :disabled="!isAdmin"
                  @click="selectPreset(item.value)"
                />
              </div>
            </div>

            <div
              class="flex items-center gap-2 text-sm"
              :class="transcodePreset === 'compress' ? '' : 'opacity-40'"
            >
              <span class="shrink-0">{{ t('preferences.compressBitrate') }}</span>
              <input
                type="range"
                :min="minBitratePercent"
                :max="maxBitratePercent"
                :value="transcodeBitratePercent"
                :disabled="!isAdmin || transcodePreset !== 'compress'"
                class="h-2 min-w-24 flex-1 cursor-pointer appearance-none rounded-full bg-default accent-primary disabled:opacity-40"
                @input="onBitrateInput"
              >
              <span class="w-12 shrink-0 text-right tabular-nums text-muted">
                {{ transcodeBitratePercent }}%
              </span>
            </div>
          </div>
        </div>

        <div
          v-if="isImageKind"
          class="space-y-4"
        >
          <h3 class="text-sm font-semibold">
            {{ t('preferences.webpQuality') }}
          </h3>
          <p class="text-xs leading-relaxed text-muted">
            {{ t('preferences.webpQualityHint') }}
          </p>
          <div class="flex items-center justify-between gap-2 text-sm text-muted">
            <span>{{ t('preferences.current', { n: clientWebpQuality }) }}</span>
            <span>{{ clientQualityLevel }}</span>
          </div>
          <input
            type="range"
            min="1"
            max="100"
            :value="clientWebpQuality"
            class="h-2 w-full cursor-pointer appearance-none rounded-full bg-default accent-primary"
            @input="onClientQualityInput"
          >
        </div>

        <div class="space-y-4">
          <h3 class="text-sm font-semibold">
            {{ t('preferences.convenience') }}
          </h3>
          <label class="flex cursor-pointer items-start gap-2.5">
            <UCheckbox
              v-model="autoCopyMarkdown"
              class="mt-0.5"
            />
            <span>
              <span class="block text-sm">{{ t('preferences.autoCopy') }}</span>
              <span class="mt-1 block text-xs leading-relaxed text-muted">
                {{ t('preferences.autoCopyHint') }}
              </span>
            </span>
          </label>
          <div
            class="ml-7 flex gap-1 rounded-lg border border-default p-0.5"
            :class="autoCopyMarkdown ? '' : 'pointer-events-none opacity-40'"
          >
            <UButton
              v-for="item in copyFormatItems"
              :key="item.value"
              size="xs"
              class="flex-1 justify-center"
              :variant="copyFormat === item.value ? 'solid' : 'ghost'"
              :color="copyFormat === item.value ? 'primary' : 'neutral'"
              :label="item.label"
              @click="setCopyFormat(item.value)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>