From 86b8c86e592336f13c72c54289d88f4751b2d0c0 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Thu, 15 May 2025 18:25:58 +0800
Subject: [PATCH] feat(front): enhance FileShareView with countdown timer and
 file sharing details display

---
 front/components/Share/FileShareView.vue | 39 ++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/front/components/Share/FileShareView.vue b/front/components/Share/FileShareView.vue
index 24bcb6f..bd33524 100644
--- a/front/components/Share/FileShareView.vue
+++ b/front/components/Share/FileShareView.vue
@@ -1,5 +1,14 @@
 <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';
+
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+
 const props = defineProps<{
     data: any
 }>()
@@ -24,14 +33,38 @@ const handleDownload = async () => {
     (window as any)?.open(`/api/download?token=${token}`)
 }
 
+const expireSeconds = computed(() => {
+    return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
+})
+
+const { remaining, start} = useCountdown(expireSeconds.value)
+
+onMounted(() => {
+    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 },
+    ]
+})
 </script>
 
 <template>
     <div class="flex flex-col gap-5 items-center">
-        <h1>下载文件</h1>
+        <h1 class="text-xl font-bold">下载文件</h1>
         <FilePreviewView :value="props?.data" />
-        <div>
-            <AsyncButton @click="handleDownload">下载</AsyncButton>
+        <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>
 </template>
\ No newline at end of file