feat: 实现表情包下载格式选择

LightQuanta · Nov 27, 2024 · 2433c89 · 2433c89
1 parent 5df4ead
commit 2433c89
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git 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,15 +11,15 @@ 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)
 
 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
@@ -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
@@ -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
     }
 }