From 528df24988095c889c729f89f1a04483e13a39f2 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Mon, 27 Apr 2026 23:25:57 +0800
Subject: [PATCH] refactor(front): replace clipboard functionality with
 CopyButton component in FileShareResult, TextShareResult, and TextShareView
 components

---
 front/components/Result/FileShareResult.vue | 48 +++------------------
 front/components/Result/TextShareResult.vue | 31 +------------
 front/components/Share/TextShareView.vue    | 19 +-------
 3 files changed, 10 insertions(+), 88 deletions(-)

diff --git a/front/components/Result/FileShareResult.vue b/front/components/Result/FileShareResult.vue
index f474625..9e72c93 100644
--- a/front/components/Result/FileShareResult.vue
+++ b/front/components/Result/FileShareResult.vue
@@ -2,8 +2,7 @@
 import { Button } from '@/components/ui/button'
 import FilePreviewView from '@/components/FilePreviewView.vue'
 import { Input } from '@/components/ui/input'
-import { useClipboard, useShare } from '@vueuse/core'
-import { toast } from 'vue-sonner'
+import { useShare } from '@vueuse/core'
 import { useQuery } from '@tanstack/vue-query'
 import useMyAppShare from '@/composables/useMyAppShare'
 import useMyAppConfig from '@/composables/useMyAppConfig'
@@ -49,7 +48,6 @@ const getShareUrl = (id: string) => {
     return `${appConfig?.value?.site_url}/s/${id}`
 }
 
-const { copy } = useClipboard()
 const { share, isSupported: isShareSupported } = useShare()
 
 const handleShare = async (id: string, fileName?: string) => {
@@ -106,19 +104,11 @@ const handleShowQrCode = (id: string) => {
                         >
                             <LucideShare class="size-1/2" />
                         </Button>
-                        <Button
-                            variant="outline"
+                        <CopyButton
                             :class="cx('bg-white/70', selectedFile === file?.id && '!bg-white/30 border-none hover:text-white/80')"
-                            size="icon"
-                            @click.stop="
-                                () => {
-                                    copy(getShareUrl(file?.id as string))
-                                    toast.success(t('page.result.file.copySuccess'))
-                                }
-                            "
-                        >
-                            <LucideCopy class="size-1/2" />
-                        </Button>
+                            :value="getShareUrl(file?.id as string)"
+                            @click.stop
+                        />
                         <Button
                             variant="outline"
                             :class="cx('bg-white/70', selectedFile === file?.id && '!bg-white/30 border-none hover:text-white/80')"
@@ -147,19 +137,7 @@ const handleShowQrCode = (id: string) => {
                         <div class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1" v-if="selectedFileShare?.pickup_code">
                             <div class="flex flex-row justify-between w-full items-center">
                                 <div class="text-xs font-semibold">{{ t('page.result.file.pickupCode') }}</div>
-                                <Button
-                                    variant="outline"
-                                    class="bg-white/70 p-0 size-6"
-                                    size="icon"
-                                    @click="
-                                        () => {
-                                            copy(selectedFileShare?.pickup_code as string)
-                                            toast.success(t('page.result.file.copySuccess'))
-                                        }
-                                    "
-                                >
-                                    <LucideCopy class="size-1/2" />
-                                </Button>
+                                <CopyButton class="bg-white/70 p-0 size-6" :value="selectedFileShare?.pickup_code as string" />
                             </div>
                             <div class="flex flex-row gap-2">
                                 <div v-for="s in selectedFileShare?.pickup_code" class="text-2xl font-light">
@@ -187,19 +165,7 @@ const handleShowQrCode = (id: string) => {
                         >
                             <LucideShare class="size-1/2" />
                         </Button>
-                        <Button
-                            variant="outline"
-                            class="bg-white/70"
-                            size="icon"
-                            @click="
-                                () => {
-                                    copy(getShareUrl(selectedFileShare?.id as string))
-                                    toast.success(t('page.result.file.copySuccess'))
-                                }
-                            "
-                        >
-                            <LucideCopy class="size-4" />
-                        </Button>
+                        <CopyButton class="bg-white/70" :value="getShareUrl(selectedFileShare?.id as string)" />
 
                         <Button variant="outline" class="bg-white/70" size="icon" @click="handleShowQrCode(selectedFileShare?.id as string)">
                             <LucideQrCode class="size-1/2" />
diff --git a/front/components/Result/TextShareResult.vue b/front/components/Result/TextShareResult.vue
index 4fdd200..8e650e7 100644
--- a/front/components/Result/TextShareResult.vue
+++ b/front/components/Result/TextShareResult.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
-import { useClipboard } from '@vueuse/core'
-import { toast } from 'vue-sonner'
 import { useQuery } from '@tanstack/vue-query'
 import useMyAppShare from '@/composables/useMyAppShare'
 import useMyAppConfig from '@/composables/useMyAppConfig'
@@ -37,7 +35,6 @@ const url = computed(() => {
     return `${appConfig?.value?.site_url}/s/${id}`
 })
 
-const { copy } = useClipboard()
 const { t } = useI18n()
 </script>
 
@@ -60,19 +57,7 @@ const { t } = useI18n()
                     <div class="rounded-xl flex flex-col bg-black/10 px-3 py-2 gap-1" v-if="data?.pickup_code">
                         <div class="flex flex-row justify-between w-full items-center">
                             <div class="text-xs font-semibold">{{ t('page.result.text.pickupCode') }}</div>
-                            <Button
-                                variant="outline"
-                                class="bg-white/70 p-0 size-6"
-                                size="icon"
-                                @click="
-                                    () => {
-                                        copy(data?.pickup_code as string)
-                                        toast.success(t('page.result.text.copySuccess'))
-                                    }
-                                "
-                            >
-                                <LucideCopy class="size-3" />
-                            </Button>
+                            <CopyButton class="bg-white/70 p-0 size-6" :value="data?.pickup_code as string" />
                         </div>
                         <div class="flex flex-row gap-2">
                             <div v-for="s in data?.pickup_code" class="text-2xl font-light">
@@ -86,19 +71,7 @@ const { t } = useI18n()
                 <div class="text-sm font-semibold">{{ t('page.result.text.link') }}</div>
                 <div class="flex flex-row gap-2">
                     <Input v-model="url" class="bg-white/70" readonly />
-                    <Button
-                        variant="outline"
-                        class="bg-white/70"
-                        size="icon"
-                        @click="
-                            () => {
-                                copy(url)
-                                toast.success(t('page.result.text.copySuccess'))
-                            }
-                        "
-                    >
-                        <LucideCopy />
-                    </Button>
+                    <CopyButton class="bg-white/70" :value="url" />
 
                     <Button
                         variant="outline"
diff --git a/front/components/Share/TextShareView.vue b/front/components/Share/TextShareView.vue
index 77879fc..c66009d 100644
--- a/front/components/Share/TextShareView.vue
+++ b/front/components/Share/TextShareView.vue
@@ -8,9 +8,6 @@ import { LucideCheck, LucideX } from 'lucide-vue-next'
 import { cx } from 'class-variance-authority'
 import { toast } from 'vue-sonner'
 import MarkdownRender from '@/components/MarkdownRender.vue'
-import { Button } from '@/components/ui/button'
-import { LucideCopy } from 'lucide-vue-next'
-import { useClipboard } from '@vueuse/core'
 import showDrawer from '~/lib/showDrawer'
 import PasswallShareDrawer from '~/components/Drawer/PasswallShareDrawer.vue'
 
@@ -30,8 +27,6 @@ const expireSeconds = computed(() => {
 
 const { remaining, start } = useCountdown(expireSeconds.value)
 
-const { copy } = useClipboard()
-
 onMounted(() => {
     start()
 })
@@ -74,19 +69,7 @@ const handlePreview = async () => {
     <div :class="cx('flex flex-col max-h-full', !!previewText ? 'gap-3' : 'gap-16 items-center')">
         <div :class="cx('flex flex-row w-full', !!previewText ? 'justify-between' : 'justify-center')">
             <h1 class="text-xl">{{ t('page.shareView.textShare.title') }}</h1>
-            <Button
-                v-if="!!previewText"
-                variant="outline"
-                size="icon"
-                @click="
-                    () => {
-                        copy(previewText as string)
-                        toast.success(t('page.result.text.copySuccess'))
-                    }
-                "
-            >
-                <LucideCopy />
-            </Button>
+            <CopyButton v-if="!!previewText" :value="previewText as string" />
         </div>
         <template v-if="!previewText">
             <div class="flex flex-col gap-2 md:flex-row w-full">