From daeabec99f21de734908e810597fdadb71e7488b Mon Sep 17 00:00:00 2001
From: BTMuli <bt-muli@outlook.com>
Date: Thu, 29 Jan 2026 16:15:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20=E4=BF=AE=E5=A4=8D=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=B4=A8=E9=87=8F=E8=B0=83=E6=95=B4=E7=89=B9=E5=AE=9A?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E4=B8=8B=E6=B5=AE=E7=AA=97=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #207
---
 src/components/pageConfig/tco-imgQuality.vue | 32 ++++++++++++--------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/pageConfig/tco-imgQuality.vue b/src/components/pageConfig/tco-imgQuality.vue
index 93496098..2f590d63 100644
--- a/src/components/pageConfig/tco-imgQuality.vue
+++ b/src/components/pageConfig/tco-imgQuality.vue
@@ -1,6 +1,6 @@
 <!-- 设置图片质量浮窗 -->
 <template>
-  <TOverlay v-model="model" hide blur-val="10px">
+  <TOverlay v-model="model" :outer-close="clickOuter" blur-val="10px">
     <div class="toi-box">
       <div class="toi-top">
         <div class="toi-title">调整图片质量</div>
@@ -8,31 +8,33 @@
       </div>
       <div class="toi-mid">
         <v-slider
-          thumb-label="always"
-          color="var(--tgc-od-blue)"
-          thumb-color="var(--tgc-od-red)"
           v-model="quality"
           :max="100"
           :min="5"
           :step="1"
+          color="var(--tgc-od-blue)"
           hide-details
+          thumb-color="var(--tgc-od-red)"
+          thumb-label="always"
+          @end="handleSliderEnd"
+          @start="() => (clickOuter = false)"
         />
         <v-number-input
-          class="toi-input"
           v-model="quality"
-          control-variant="stacked"
-          density="compact"
-          variant="outlined"
-          style="max-width: 100px"
-          type="number"
           :max="100"
           :min="5"
           :step="1"
+          class="toi-input"
+          control-variant="stacked"
+          density="compact"
+          type="number"
+          variant="outlined"
+          width="100px"
         />
       </div>
       <div class="toi-bottom">
-        <v-btn variant="flat" class="toi-btn no-btn" @click="onCancel()">取消</v-btn>
-        <v-btn variant="elevated" class="toi-btn ok-btn" @click="onConfirm()">确定</v-btn>
+        <v-btn class="toi-btn no-btn" variant="flat" @click="onCancel()">取消</v-btn>
+        <v-btn class="toi-btn ok-btn" variant="elevated" @click="onConfirm()">确定</v-btn>
       </div>
     </div>
   </TOverlay>
@@ -48,6 +50,7 @@ const { imageQualityPercent } = storeToRefs(useAppStore());
 
 const model = defineModel<boolean>({ default: false });
 const quality = ref<number>(imageQualityPercent.value);
+const clickOuter = ref<boolean>(true);
 
 function onCancel(): void {
   model.value = false;
@@ -64,6 +67,11 @@ async function onConfirm(): Promise<void> {
   model.value = false;
   showSnackbar.success(`图片质量已修改为 ${quality.value}%`);
 }
+
+async function handleSliderEnd(): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, 200));
+  clickOuter.value = true;
+}
 </script>
 <style lang="scss" scoped>
 .toi-box {