refactor(front): update FileShareView and [id].vue to utilize @tanstack/vue-query for data fetching and state management

front/components/Share/FileShareView.vue

@@ -5,7 +5,7 @@ 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)
 
@@ -13,6 +13,8 @@ const props = defineProps<{
     data: any
 }>()
 
+const queryClient = useQueryClient()
+
 const handleDownload = async () => {
     const { id } = props?.data || {}
     const data = await $fetch<{
@@ -31,6 +33,7 @@ const handleDownload = async () => {
         return
     }
     (window as any)?.open(`/api/download?token=${token}`)
+    queryClient.invalidateQueries({ queryKey: ['share', id] })
 }
 
 const expireSeconds = computed(() => {

front/pages/s/[id].vue

@@ -5,25 +5,28 @@ import { Skeleton } from '@/components/ui/skeleton'
 import dayjs from 'dayjs'
 import FileShareView from '@/components/Share/FileShareView.vue'
 import TextShareView from '@/components/Share/TextShareView.vue'
+import { useQuery } from '@tanstack/vue-query'
 const route = useRoute()
 const router = useRouter()
-
 const id = computed(() => route.params.id)
 
-const { state, isLoading } = useAsyncState(async () => {
-    const data = await $fetch<{
-        code: number
-        data: {
-            id?: string
-            expire_at?: number
-        }
-    }>(`/api/share/${id.value}`)
-    return data?.data
-}, null)
+const { data, isLoading } = useQuery({
+    queryKey: ['share', id.value],
+    queryFn: async () => {
+        const data = await $fetch<{
+            code: number
+            data: {
+                id?: string
+                expire_at?: number
+            }
+        }>(`/api/share/${id.value}`)
+        return data?.data
+    }
+})
 
 const isExpired = computed(() => {
-    const { expire_at } = state.value || {}
-    return !state || !expire_at || dayjs(expire_at * 10e2).isBefore(dayjs())
+    const { expire_at } = data.value || {}
+    return !data || !expire_at || dayjs(expire_at * 10e2).isBefore(dayjs())
 })
 
 </script>
@@ -48,8 +51,8 @@ const isExpired = computed(() => {
                 }">返回首页</Button>
             </div>
             <template v-else>
-                <FileShareView :data="state" />
-                <TextShareView :data="state" />
+                <FileShareView :data="data" />
+                <TextShareView :data="data" />
             </template>
         </template>
     </div>