fix: honor target image size across compression paths

frontend/src/pages/HomePage.vue

@@ -24,6 +24,7 @@ interface UploadItem {
   status: ItemStatus
   result?: CompressResponse
   error?: string
+  targetSizeBytes?: number
 }
 
 const auth = useAuthStore()
@@ -135,6 +136,28 @@ function getTargetSizeBytes(): number | undefined {
   return Math.round(bytes)
 }
 
+function targetOutputFormat(file: File): OutputFormat {
+  const mime = file.type.trim().toLowerCase()
+  if (mime === 'image/jpeg' || mime === 'image/jpg') return 'jpeg'
+  if (mime === 'image/webp') return 'webp'
+  if (mime === 'image/avif') return 'avif'
+
+  const extension = file.name.split('.').pop()?.toLowerCase()
+  if (extension === 'jpg' || extension === 'jpeg') return 'jpeg'
+  if (extension === 'webp') return 'webp'
+  if (extension === 'avif') return 'avif'
+  return 'webp'
+}
+
+function targetResultHint(item: UploadItem): string | null {
+  if (!item.result || !item.targetSizeBytes) return null
+  const target = formatBytes(item.targetSizeBytes)
+  if (item.result.compressed_size * 4 < item.targetSizeBytes * 3) {
+    return `体积上限 ${target}；当前格式的最高保真结果本身更小，不会添加无效填充。`
+  }
+  return `体积上限 ${target}；结果已控制在上限内。`
+}
+
 function setCompressionMode(mode: CompressionMode) {
   options.mode = mode
   if (
@@ -159,7 +182,7 @@ async function runOne(item: UploadItem) {
     }
 
     const outputFormat: OutputFormat | undefined = options.outputFormat === 'auto'
-      ? (options.mode === 'size' ? 'webp' : undefined)
+      ? (options.mode === 'size' ? targetOutputFormat(item.file) : undefined)
       : options.outputFormat
 
     if (options.mode === 'size' && outputFormat && !targetSizeFormats.has(outputFormat)) {
@@ -188,6 +211,7 @@ async function runOne(item: UploadItem) {
       auth.token,
     )
 
+    item.targetSizeBytes = targetSizeBytes
     item.result = result
     item.status = 'done'
   } catch (err) {
@@ -452,6 +476,9 @@ async function resendVerification() {
                     {{ item.result.saved_percent.toFixed(2) }}%
                   </template>
                 </div>
+                <div v-if="targetResultHint(item)" class="mt-1 text-xs text-slate-500">
+                  {{ targetResultHint(item) }}
+                </div>
                 <div v-if="item.error" class="mt-1 text-xs text-rose-700">{{ item.error }}</div>
               </div>
 
@@ -547,7 +574,7 @@ async function resendVerification() {
                   :class="options.mode === 'size' ? 'bg-indigo-600 text-white' : 'text-slate-600 hover:bg-slate-100'"
                   @click="setCompressionMode('size')"
                 >
-                  按目标大小
+                  按体积上限
                 </button>
               </div>
             </div>
@@ -573,7 +600,7 @@ async function resendVerification() {
 
             <!-- 目标大小模式 -->
             <div v-else class="space-y-1">
-              <div class="text-xs font-medium text-slate-600">目标大小</div>
+              <div class="text-xs font-medium text-slate-600">最大输出大小</div>
               <div class="flex gap-2">
                 <input
                   v-model="options.targetSize"
@@ -591,7 +618,7 @@ async function resendVerification() {
                 </select>
               </div>
               <div class="text-xs text-slate-500">
-                仅支持 JPEG/WebP/AVIF；保持原格式时会自动输出 WebP，过小且无法保证清晰度的目标会被拒绝。
+                这是体积上限，不是固定输出大小。系统会优先使用原格式和最高可用画质；最高画质结果更小时不会填充无效数据。
               </div>
             </div>
 
@@ -601,7 +628,7 @@ async function resendVerification() {
                 v-model="options.outputFormat"
                 class="w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-800"
               >
-                <option value="auto">{{ options.mode === 'size' ? '自动选择 WebP（推荐）' : '保持原格式（推荐）' }}</option>
+                <option value="auto">{{ options.mode === 'size' ? '智能选择（优先原格式）' : '保持原格式（推荐）' }}</option>
                 <option value="jpeg">JPEG</option>
                 <option value="png" :disabled="options.mode === 'size'">PNG</option>
                 <option value="webp">WebP</option>
@@ -611,7 +638,7 @@ async function resendVerification() {
                 <option value="tiff" :disabled="options.mode === 'size'">TIFF</option>
                 <option value="ico" :disabled="options.mode === 'size'">ICO</option>
               </select>
-              <div class="text-xs text-slate-500">支持按需转码。目标大小模式建议配合 JPEG/WebP/AVIF。</div>
+              <div class="text-xs text-slate-500">支持按需转码。体积上限模式仅使用 JPEG/WebP/AVIF；其他输入会自动转为 WebP。</div>
             </label>
 
             <div class="grid grid-cols-2 gap-3">