feat(front): add TextShareView component for displaying file share information and preview functionality

front/components/Share/TextShareView.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import dayjs from 'dayjs';
+import AsyncButton from '@/components/ui/button/AsyncButton.vue'
+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 { cx } from 'class-variance-authority';
+import { toast } from 'vue-sonner';
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+
+const props = defineProps<{
+    data: any
+}>()
+
+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 },
+    ]
+})
+const previewText = ref<string | null>(null)
+
+const handlePreview = async () => {
+    try {
+        const { id } = props?.data || {}
+        const data = await $fetch<{
+            code: number
+            data: {
+                token?: string
+            }
+        }>(`/api/download`, {
+            method: 'POST',
+            body: {
+                share_id: id
+            }
+        })
+        const { token } = data?.data || {}
+        if (!token) {
+            return
+        }
+        const r = await $fetch<{
+            code: number
+            data: {
+                data: string
+            }
+        }>(`/api/download?token=${token}`)
+        previewText.value = r?.data?.data
+    } catch (error) {
+        toast.error(error?.data?.message || '获取失败')
+    }
+}
+</script>
+<template>
+    <div :class="cx('flex flex-col ', !!previewText ? 'gap-3' : 'gap-16 items-center')">
+        <h1 class="text-xl">查看文本</h1>
+        <template v-if="!previewText">
+            <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="handlePreview" class="w-full">浏览</AsyncButton>
+            </div>
+        </template>
+        <template v-else>
+            <div class="prose rounded-md bg-white/70 p-3 w-full max-w-full min-h-80" v-html="previewText" />
+        </template>
+    </div>
+</template>