refactor(front): update file sharing logic to use downloadFileByShareId for improved error handling and token management

front/components/Result/ImageCompressResult.vue

@@ -1,193 +1,166 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query";
-import { AsyncButton, Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import { filesize } from "filesize";
-import useMyAppShare from "@/composables/useMyAppShare";
-import { toast } from "vue-sonner";
+import { useQuery } from '@tanstack/vue-query'
+import { AsyncButton, Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { filesize } from 'filesize'
+import useMyAppShare from '@/composables/useMyAppShare'
+import { toast } from 'vue-sonner'
 const emit = defineEmits<{
-  (e: "change", key: string): void;
-}>();
+    (e: 'change', key: string): void
+}>()
 const props = defineProps<{
-  data: { file: File; config: any; handle_type: string; file_id: string };
-}>();
+    data: { file: File; config: any; handle_type: string; file_id: string }
+}>()
 
 const { data } = useQuery({
-  queryKey: ["create-image-compress", props?.data?.file_id],
-  queryFn: async () => {
-    const { file_id } = props?.data || {};
-    const data = await $fetch<{
-      code: number;
-      data: {
-        id?: string;
-      };
-    }>(`/api/image/compress`, {
-      method: "POST",
-      body: {
-        file_id,
-      },
-    });
-    return data?.data;
-  },
-  staleTime: Infinity,
-});
+    queryKey: ['create-image-compress', props?.data?.file_id],
+    queryFn: async () => {
+        const { file_id } = props?.data || {}
+        const data = await $fetch<{
+            code: number
+            data: {
+                id?: string
+            }
+        }>(`/api/image/compress`, {
+            method: 'POST',
+            body: {
+                file_id,
+            },
+        })
+        return data?.data
+    },
+    staleTime: Infinity,
+})
 
-const taskId = computed(() => data?.value?.id);
+const taskId = computed(() => data?.value?.id)
 
 const { data: taskData, refetch } = useQuery({
-  queryKey: ["image-compress-task", taskId],
-  queryFn: async () => {
-    const data = await $fetch<{
-      code: number;
-      data: {
-        result: {
-          old_file: {
-            id: string;
-            size: number;
-          };
-          new_file: {
-            id: string;
-            size: number;
-          };
-        }[];
-        status: "success" | "retry" | "archived";
-        err?: {
-          message?: string;
-          retry?: number;
-          max_retry?: number;
-        };
-      };
-    }>(`/api/image/compress/${taskId.value}`);
-    return data?.data;
-  },
-  enabled: !!taskId.value,
-});
+    queryKey: ['image-compress-task', taskId],
+    queryFn: async () => {
+        const data = await $fetch<{
+            code: number
+            data: {
+                result: {
+                    old_file: {
+                        id: string
+                        size: number
+                    }
+                    new_file: {
+                        id: string
+                        size: number
+                    }
+                }[]
+                status: 'success' | 'retry' | 'archived'
+                err?: {
+                    message?: string
+                    retry?: number
+                    max_retry?: number
+                }
+            }
+        }>(`/api/image/compress/${taskId.value}`)
+        return data?.data
+    },
+    enabled: !!taskId.value,
+})
 
-const { downloadFile, createFileShare } = useMyAppShare();
+const { downloadFileByShareId, createFileShare } = useMyAppShare()
 
-const { counter, pause } = useInterval(2000, { controls: true });
+const { counter, pause } = useInterval(2000, { controls: true })
 
 watch(
-  () => counter.value,
-  () => {
-    if (["success", "archived"].includes(taskData.value?.status ?? "")) {
-      pause();
-      return;
+    () => counter.value,
+    () => {
+        if (['success', 'archived'].includes(taskData.value?.status ?? '')) {
+            pause()
+            return
+        }
+        refetch()
     }
-    refetch();
-  },
-);
+)
 
 watch(
-  () => taskData.value?.err?.retry,
-  (newVal, oldVal) => {
-    if (!oldVal || !newVal || !taskData.value?.err?.max_retry) {
-      return;
+    () => taskData.value?.err?.retry,
+    (newVal, oldVal) => {
+        if (!oldVal || !newVal || !taskData.value?.err?.max_retry) {
+            return
+        }
+        if (newVal <= taskData.value?.err?.max_retry) {
+            toast.error(`处理错误: ${taskData.value?.err?.message}, 将再次重试`)
+        }
     }
-    if (newVal <= taskData.value?.err?.max_retry) {
-      toast.error(`处理错误: ${taskData.value?.err?.message}, 将再次重试`);
-    }
-  },
-);
+)
 </script>
 <template>
-  <div class="flex flex-col gap-3">
-    <h2 class="text-lg">上传成功</h2>
-    <div class="flex flex-col gap-1 items-center">
-      <div class="flex flex-col h-30 items-center justify-center">
-        <FilePreviewView :value="props?.data?.file" />
-      </div>
-    </div>
-    <div
-      v-if="taskData?.status === 'success'"
-      class="flex flex-col gap-2"
-      v-for="item in taskData?.result"
-    >
-      <div
-        class="bg-white/80 p-2 rounded-md w-full flex flex-row items-center justify-between gap-2"
-      >
-        <div class="flex flex-row gap-2 items-center max-w-2/3">
-          <div
-            class="flex flex-row items-center justify-center rounded-md bg-black/5 p-2"
-          >
-            <LucideImage />
-          </div>
-          <div class="truncate w-auto">{{ props?.data?.file?.name }}</div>
-          <div class="flex flex-row gap-2 items-center text-sm shrink-0">
-            <span class="opacity-75">{{
-              filesize(item.new_file.size ?? 0)
-            }}</span>
-            <span
-              class="bg-green-200 text-green-600 rounded-md px-1 py-0.5 flex flex-row gap-1 items-center text-xs"
-            >
-              <LucideChevronDown class="size-4" />
-              {{
-                ((1 - item.new_file.size / item.old_file.size) * 100).toFixed(
-                  2,
-                )
-              }}%
-            </span>
-          </div>
+    <div class="flex flex-col gap-3">
+        <h2 class="text-lg">上传成功</h2>
+        <div class="flex flex-col gap-1 items-center">
+            <div class="flex flex-col h-30 items-center justify-center">
+                <FilePreviewView :value="props?.data?.file" />
+            </div>
         </div>
-        <AsyncButton
-          variant="outline"
-          class="bg-black/5"
-          size="icon"
-          @click="
-            async () => {
-              const data = await createFileShare({
-                file_id: item.new_file.id,
-                config: {
-                  download_nums: 1,
-                  expire_time: 60,
-                  has_pickup_code: false,
-                  has_password: false,
-                },
-                file_name: props?.data?.file?.name,
-              });
-              const { id } = data?.data || {};
-              if (!id) {
-                return;
-              }
-              await downloadFile(id);
-            }
-          "
-        >
-          <LucideDownload />
-        </AsyncButton>
-      </div>
-    </div>
-    <div
-      v-else-if="taskData?.status !== 'retry' && !!taskData?.err?.message"
-      class="flex flex-col gap-2"
-    >
-      <div
-        class="w-full h-16 flex flex-row items-center gap-3 bg-white/80 rounded-md p-2"
-      >
-        <div
-          class="size-10 flex items-center justify-center rounded-md bg-red-200"
-        >
-          <LucideAlertTriangle class="size-5 text-red-600" />
+        <div v-if="taskData?.status === 'success'" class="flex flex-col gap-2" v-for="item in taskData?.result">
+            <div class="bg-white/80 p-2 rounded-md w-full flex flex-row items-center justify-between gap-2">
+                <div class="flex flex-row gap-2 items-center max-w-2/3">
+                    <div class="flex flex-row items-center justify-center rounded-md bg-black/5 p-2">
+                        <LucideImage />
+                    </div>
+                    <div class="truncate w-auto">{{ props?.data?.file?.name }}</div>
+                    <div class="flex flex-row gap-2 items-center text-sm shrink-0">
+                        <span class="opacity-75">{{ filesize(item.new_file.size ?? 0) }}</span>
+                        <span class="bg-green-200 text-green-600 rounded-md px-1 py-0.5 flex flex-row gap-1 items-center text-xs">
+                            <LucideChevronDown class="size-4" />
+                            {{ ((1 - item.new_file.size / item.old_file.size) * 100).toFixed(2) }}%
+                        </span>
+                    </div>
+                </div>
+                <AsyncButton
+                    variant="outline"
+                    class="bg-black/5"
+                    size="icon"
+                    @click="
+                        async () => {
+                            const data = await createFileShare({
+                                file_id: item.new_file.id,
+                                config: {
+                                    download_nums: 1,
+                                    expire_time: 60,
+                                    has_pickup_code: false,
+                                    has_password: false,
+                                },
+                                file_name: props?.data?.file?.name,
+                            })
+                            const { id } = data?.data || {}
+                            if (!id) {
+                                return
+                            }
+                            try {
+                                await downloadFileByShareId(id)
+                            } catch (error) {
+                                toast.error((error as any)?.data?.message || error)
+                            }
+                        }
+                    "
+                >
+                    <LucideDownload />
+                </AsyncButton>
+            </div>
         </div>
-        <div class="text-sm">
-          {{
-            `经过 ${taskData?.err?.retry} 次重试后任务处理失败: ${taskData?.err?.message}`
-          }}
+        <div v-else-if="taskData?.status !== 'retry' && !!taskData?.err?.message" class="flex flex-col gap-2">
+            <div class="w-full h-16 flex flex-row items-center gap-3 bg-white/80 rounded-md p-2">
+                <div class="size-10 flex items-center justify-center rounded-md bg-red-200">
+                    <LucideAlertTriangle class="size-5 text-red-600" />
+                </div>
+                <div class="text-sm">
+                    {{ `经过 ${taskData?.err?.retry} 次重试后任务处理失败: ${taskData?.err?.message}` }}
+                </div>
+            </div>
+            <div class="flex flex-row justify-center">
+                <Button @click="emit('change', 'input')"> 返回首页 </Button>
+            </div>
         </div>
-      </div>
-      <div class="flex flex-row justify-center">
-        <Button @click="emit('change', 'input')"> 返回首页 </Button>
-      </div>
-    </div>
 
-    <div
-      v-else="taskData?.status !== 'retry' && !!taskData?.err?.message"
-      class="flex flex-col gap-2"
-    >
-      <Skeleton
-        class="w-full h-16 flex flex-row items-center justify-between"
-        v-for="i in 3"
-      />
+        <div v-else="taskData?.status !== 'retry' && !!taskData?.err?.message" class="flex flex-col gap-2">
+            <Skeleton class="w-full h-16 flex flex-row items-center justify-between" v-for="i in 3" />
+        </div>
     </div>
-  </div>
 </template>

front/components/Share/FileShareView.vue

@@ -1,69 +1,81 @@
 <script setup lang="ts">
-import AsyncButton from "@/components/ui/button/AsyncButton.vue";
-import dayjs from "dayjs";
-import duration from "dayjs/plugin/duration";
-import relativeTime from "dayjs/plugin/relativeTime";
-import { isBoolean } from "lodash-es";
-import { LucideCheck, LucideX } from "lucide-vue-next";
-import { useQueryClient } from "@tanstack/vue-query";
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
+import AsyncButton from '@/components/ui/button/AsyncButton.vue'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { isBoolean } from 'lodash-es'
+import { LucideCheck, LucideX } from 'lucide-vue-next'
+import { useQueryClient } from '@tanstack/vue-query'
+import showDrawer from '~/lib/showDrawer'
+import { toast } from 'vue-sonner'
+import PasswallShareDrawer from '~/components/Drawer/PasswallShareDrawer.vue'
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
 
 const props = defineProps<{
-  data: any;
-}>();
+    data: any
+}>()
 
-const queryClient = useQueryClient();
-const { downloadFile } = useMyAppShare();
+const queryClient = useQueryClient()
+const { downloadFile, getShareToken } = useMyAppShare()
 
 const handleDownload = async () => {
-  const { id } = props?.data || {};
-  await downloadFile(id);
-  queryClient.invalidateQueries({ queryKey: ["share", id] });
-};
+    const { id } = props?.data || {}
+    try {
+        let token = null
+        if (props?.data?.has_password) {
+            token = await showDrawer({
+                render: ({ ...rest }) => h(PasswallShareDrawer, { ...rest, share_id: id }),
+            })
+        } else {
+            token = await getShareToken(id)
+        }
+        if (!token) {
+            throw new Error('获取token失败')
+        }
+        downloadFile(token)
+    } catch (error) {
+        toast.error((error as any)?.data?.message || error)
+    } finally {
+        queryClient.invalidateQueries({ queryKey: ['share', id] })
+    }
+}
 
 const expireSeconds = computed(() => {
-  return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
-});
+    return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
+})
 
-const { remaining, start } = useCountdown(expireSeconds.value);
+const { remaining, start } = useCountdown(expireSeconds.value)
 
 onMounted(() => {
-  start();
-});
+    start()
+})
 
 const fileShareInfo = computed(() => {
-  return [
-    { label: "需要密码", value: props?.data?.has_password ?? false },
-    {
-      label: "过期时间",
-      value: dayjs.duration(remaining.value, "seconds").format(`D天 HH:mm:ss`),
-    },
-    { label: "剩余下载次数", value: props?.data?.download_nums ?? 0 },
-  ];
-});
+    return [
+        { label: '需要密码', value: props?.data?.has_password ?? false },
+        {
+            label: '过期时间',
+            value: dayjs.duration(remaining.value, 'seconds').format(`D天 HH:mm:ss`),
+        },
+        { label: '剩余下载次数', value: props?.data?.download_nums ?? 0 },
+    ]
+})
 </script>
 
 <template>
-  <div class="flex flex-col gap-5 items-center">
-    <h1 class="text-xl font-bold">下载文件</h1>
-    <FilePreviewView :value="props?.data" />
-    <div class="flex flex-col gap-2 md:flex-row w-full">
-      <div
-        class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1"
-        v-for="item in fileShareInfo"
-      >
-        <div class="text-xs opacity-75">{{ item?.label }}</div>
-        <component
-          v-if="isBoolean(item?.value)"
-          :is="item?.value ? LucideCheck : LucideX"
-          class="size-6"
-        />
-        <div v-else class="md:text-xl">{{ item?.value }}</div>
-      </div>
+    <div class="flex flex-col gap-5 items-center">
+        <h1 class="text-xl font-bold">下载文件</h1>
+        <FilePreviewView :value="props?.data" />
+        <div class="flex flex-col gap-2 md:flex-row w-full">
+            <div class="flex flex-row md:flex-col md:gap-1 justify-between items-center md:flex-1" v-for="item in fileShareInfo">
+                <div class="text-xs opacity-75">{{ item?.label }}</div>
+                <component v-if="isBoolean(item?.value)" :is="item?.value ? LucideCheck : LucideX" class="size-6" />
+                <div v-else class="md:text-xl">{{ item?.value }}</div>
+            </div>
+        </div>
+        <div class="w-full">
+            <AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
+        </div>
     </div>
-    <div class="w-full">
-      <AsyncButton @click="handleDownload" class="w-full">下载</AsyncButton>
-    </div>
-  </div>
 </template>

front/composables/useMyAppShare.ts

@@ -36,16 +36,16 @@ const getShareToken = async (
     return token
 }
 
-const downloadFile = async (share_id: string) => {
-    try {
-        const token = await getShareToken(share_id)
-        if (!token) {
-            throw new Error('获取token失败')
-        }
-        window?.open(`/api/download?token=${token}`)
-    } catch (e) {
-        toast.error((e as any)?.data?.message || e)
+const downloadFile = (token: string) => {
+    window?.open(`/api/download?token=${token}`)
+}
+
+const downloadFileByShareId = async (share_id: string) => {
+    const token = await getShareToken(share_id)
+    if (!token) {
+        throw new Error('获取token失败')
     }
+    return downloadFile(token)
 }
 
 const createShare = async (data: any) => {
@@ -98,6 +98,7 @@ const createTextShare = async (data: { text: string; config: any }) => {
 const useMyAppShare = () => {
     return {
         downloadFile,
+        downloadFileByShareId,
         createShare,
         createFileShare,
         createTextShare,