🚸 优化图片调整浮窗样式

src/components/pageConfig/tco-imgQuality.vue

@@ -0,0 +1,147 @@
+<!-- 设置图片质量浮窗 -->
+<template>
+  <TOverlay v-model="model" hide blur-val="10px">
+    <div class="toi-box">
+      <div class="toi-top">
+        <div class="toi-title">调整图片质量</div>
+        <div class="toi-desc">设置图片质量，数值越大图片越清晰，但也会占用更多空间</div>
+      </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"
+          hide-details
+        />
+        <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"
+        />
+      </div>
+      <div class="toi-bottom">
+        <button class="toi-btn no-btn" @click="onCancel()">取消</button>
+        <button class="toi-btn ok-btn" @click="onConfirm()">确定</button>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script lang="ts" setup>
+import TOverlay from "@comp/app/t-overlay.vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import useAppStore from "@store/app.js";
+import { storeToRefs } from "pinia";
+import { ref } from "vue";
+
+const { imageQualityPercent } = storeToRefs(useAppStore());
+
+const model = defineModel<boolean>({ default: false });
+const quality = ref<number>(imageQualityPercent.value);
+
+function onCancel(): void {
+  model.value = false;
+  quality.value = imageQualityPercent.value;
+}
+
+async function onConfirm(): Promise<void> {
+  if (quality.value === imageQualityPercent.value) {
+    model.value = false;
+    showSnackbar.info(`图片质量未修改`);
+    return;
+  }
+  imageQualityPercent.value = quality.value;
+  model.value = false;
+  showSnackbar.success(`图片质量已修改为 ${quality.value}%`);
+}
+</script>
+<style lang="scss" scoped>
+.toi-box {
+  display: flex;
+  width: 400px;
+  flex-direction: column;
+  padding: 8px;
+  border-radius: 4px;
+  background-color: var(--box-bg-1);
+  color: var(--app-page-content);
+  gap: 12px;
+}
+
+.toi-top {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-title);
+  row-gap: 4px;
+  text-align: center;
+
+  .toi-title {
+    color: var(--common-text-title);
+    font-size: 20px;
+  }
+
+  .toi-desc {
+    font-family: var(--font-text);
+    font-size: 12px;
+  }
+}
+
+.toi-mid {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding-left: 12px;
+  margin-top: 24px;
+  margin-bottom: 24px;
+  column-gap: 24px;
+
+  .toi-input {
+    max-width: 100px;
+    height: 48px;
+  }
+}
+
+.toi-bottom {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+}
+
+.toi-btn {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 20px;
+  border-radius: 24px;
+  background: var(--tgc-btn-1);
+  color: var(--btn-text);
+  cursor: pointer;
+  font-family: var(--font-title);
+
+  &.no-btn {
+    opacity: 0.8;
+  }
+
+  &:hover {
+    opacity: 0.75;
+  }
+}
+</style>

src/pages/common/PageConfig.vue

@@ -145,6 +145,7 @@
     <TcUserBadge />
     <TcGameBadge v-if="platform() === 'windows'" />
   </div>
+  <TcoImgQuality v-model="showImgQuality" />
 </template>
 <script lang="ts" setup>
 import showDialog from "@comp/func/dialog.js";
@@ -155,6 +156,7 @@ import TcDataDir from "@comp/pageConfig/tc-dataDir.vue";
 import TcGameBadge from "@comp/pageConfig/tc-gameBadge.vue";
 import TcInfo from "@comp/pageConfig/tc-info.vue";
 import TcUserBadge from "@comp/pageConfig/tc-userBadge.vue";
+import TcoImgQuality from "@comp/pageConfig/tco-imgQuality.vue";
 import OtherApi from "@req/otherReq.js";
 import TGSqlite from "@Sql/index.js";
 import useAppStore from "@store/app.js";
@@ -191,6 +193,8 @@ const showReset = ref<boolean>(false);
 const isNeedResize = ref<boolean>(needResize.value !== "false");
 const cacheSize = ref<number>(0);
 
+const showImgQuality = ref<boolean>(false);
+
 onMounted(async () => {
   await showLoading.start("正在加载设置页面", "正在获取缓存大小");
   await TGLogger.Info("[Config] 打开设置页面");
@@ -320,38 +324,7 @@ async function confirmShare(): Promise<void> {
 
 // 图片质量调整
 async function confirmImgQuality(): Promise<void> {
-  const input = await showDialog.input(
-    "请输入图片质量(1-100)",
-    "质量：",
-    imageQualityPercent.value.toString(),
-  );
-  if (input === undefined) {
-    showSnackbar.cancel("已取消修改图片质量");
-    return;
-  }
-  if (input === "") {
-    showSnackbar.error("质量不能为空!");
-    return;
-  }
-  if (isNaN(Number(input))) {
-    showSnackbar.error("质量必须为数字!");
-    return;
-  }
-  if (Number(input) === imageQualityPercent.value) {
-    showSnackbar.cancel("未修改图片质量");
-    return;
-  }
-  if (Number(input) > 100 || Number(input) < 1) {
-    showSnackbar.error("质量必须在1-100之间!");
-    return;
-  }
-  const check = await showDialog.check("确认修改图片质量吗？", `新质量为${input}`);
-  if (!check) {
-    showSnackbar.cancel("已取消修改图片质量");
-    return;
-  }
-  imageQualityPercent.value = Number(input);
-  showSnackbar.success(`成功修改图片质量!新质量为${input}`);
+  showImgQuality.value = true;
 }
 
 // 更新设备信息