From 2433c89c2b2335592bb60f43ddb9b1a06cfe1141 Mon Sep 17 00:00:00 2001
From: Light_Quanta <zch22248@foxmail.com>
Date: Wed, 27 Nov 2024 17:52:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E5=8C=85=E4=B8=8B=E8=BD=BD=E6=A0=BC=E5=BC=8F=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/emoji/[id].vue | 31 ++++++++++++++++++++++++++-----
 src/types.ts             |  6 +++---
 src/utils/image.ts       | 16 ++++++++--------
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/pages/emoji/[id].vue b/src/pages/emoji/[id].vue
index 6cf881e..31bb7dc 100644
--- a/src/pages/emoji/[id].vue
+++ b/src/pages/emoji/[id].vue
@@ -2,7 +2,7 @@
 import { APIFetch } from "../../APIFetch.ts";
 import {
   BatchDownloadTask,
-  EmojiImages,
+  EmojiImage,
   EmojiPackageDetail,
   SuitDetail,
   SuitEmojiPackageProperties
@@ -11,7 +11,7 @@ import { autoJump, resolveText } from "../../utils/linkResolver.ts";
 import { sep } from "@tauri-apps/api/path";
 import { UnwrapRef } from "vue";
 import { formatToUrl } from "../../utils/image.ts";
-import {globalConfig} from "../../utils/globalConfig.ts";
+import { allowedImageFormats, globalConfig } from "../../utils/globalConfig.ts";
 
 const route = useRoute<'/emoji/[id]'>()
 const loading = ref(false)
@@ -19,7 +19,7 @@ const loading = ref(false)
 const id = ref('')
 
 const name = ref('')
-const emojiInfo = ref<(EmojiImages & {
+const emojiInfo = ref<(EmojiImage & {
   name: string
 })[]>([])
 const link = ref('')
@@ -147,7 +147,10 @@ const resolveLink = async () => {
   }
 }
 
-const pictureLinks = computed(() => emojiInfo.value.map(e => e.image_webp ?? e.image_gif ?? e.image))
+// 是否为动态表情包
+const hasDynamicImage = computed(() => emojiInfo.value.some(e => e.image_webp !== undefined || e.image_gif !== undefined))
+
+const pictureLinks = computed(() => emojiInfo.value.map(image => formatToUrl(globalConfig.value.imageSaveFormat, image)))
 </script>
 
 <template>
@@ -195,6 +198,24 @@ const pictureLinks = computed(() => emojiInfo.value.map(e => e.image_webp ?? e.i
           点击解析
         </ElLink>
       </ElDescriptionsItem>
+
+      <ElDescriptionsItem
+        v-if="hasDynamicImage"
+        :span="2"
+        label="图片格式"
+      >
+        <ElSelect
+          v-model="globalConfig.imageSaveFormat"
+          placeholder="图片保存格式"
+        >
+          <ElOption
+            v-for="format in allowedImageFormats"
+            :key="format"
+            :label="format.toUpperCase()"
+            :value="format"
+          />
+        </ElSelect>
+      </ElDescriptionsItem>
     </ElDescriptions>
 
     <CustomDivider v-if="pictureLinks?.length ?? 0 > 0">
@@ -208,7 +229,7 @@ const pictureLinks = computed(() => emojiInfo.value.map(e => e.image_webp ?? e.i
       <ImageVideoCard
         v-for="(emoji, index) in emojiInfo"
         :key="emoji.name"
-        :image="emoji.image_webp ?? emoji.image_gif ?? emoji.image"
+        :image="pictureLinks[index]"
         :index="index"
         :preview-images="pictureLinks"
         :title="emoji.name"
diff --git a/src/types.ts b/src/types.ts
index 52cc7ce..2dedb4f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -229,7 +229,7 @@ interface SuitPendantProperties {
     image: string
 }
 
-interface EmojiImages {
+interface EmojiImage {
     image: string
     image_gif?: string
     image_webp?: string
@@ -260,7 +260,7 @@ interface SuitDetail {
             }[]
         })[]
         // 获取收藏集表情信息时用
-        emoji?: GeneralSuitItem<EmojiImages>[]
+        emoji?: GeneralSuitItem<EmojiImage>[]
 
         // 加载动画
         loading?: GeneralSuitItem<SuitLoadingProperties>[]
@@ -942,7 +942,7 @@ export type {
     MedalInfo,
     LotteryInfo,
     SuitProperties,
-    EmojiImages,
+    EmojiImage,
     SuitDetail,
     GeneralSuitItem,
     SuitSpaceBGProperties,
diff --git a/src/utils/image.ts b/src/utils/image.ts
index 1ffebfa..0662163 100644
--- a/src/utils/image.ts
+++ b/src/utils/image.ts
@@ -1,20 +1,20 @@
-import {invoke} from "@tauri-apps/api/core";
-import {EmojiImages} from "../types.ts";
+import { invoke } from "@tauri-apps/api/core";
+import { EmojiImage } from "../types.ts";
 
 const convertWebp2Gif = async (inputFile: string, outputFile: string) => {
-    await invoke('convert_webp2gif', {inputFile, outputFile})
+    await invoke('convert_webp2gif', { inputFile, outputFile })
 }
 
-const formatToUrl = (format: string, emoji:EmojiImages):string => {
+const formatToUrl = (format: string, emoji: EmojiImage): string => {
     switch (format) {
-        case 'wenp':
-            return emoji.image_webp ?? emoji.image_gif ?? emoji.image
+        case 'webp':
+            return emoji.image_webp ?? emoji.image
         case 'gif':
-            return emoji.image_gif  ?? emoji.image
+            return emoji.image_gif ?? emoji.image
         case 'png':
             return emoji.image
         default:
-            return emoji.image_webp ?? emoji.image_gif ?? emoji.image
+            return emoji.image_gif ?? emoji.image_webp ?? emoji.image
     }
 }