From 2a42ca8cded339987b25ab8c086c021065831513 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Mon, 27 Apr 2026 23:20:35 +0800
Subject: [PATCH] feat(front): add CopyButton component for clipboard
 functionality and update icon sizes in existing components

---
 front/components/BaseCard.vue                 |  2 +-
 front/components/CopyButton.vue               | 32 +++++++++++++++++++
 .../Home/Text/TextUploadInputTextView.vue     |  2 +-
 front/components/Result/FileShareResult.vue   | 14 ++++----
 4 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 front/components/CopyButton.vue

diff --git a/front/components/BaseCard.vue b/front/components/BaseCard.vue
index 214c460..ac9183e 100644
--- a/front/components/BaseCard.vue
+++ b/front/components/BaseCard.vue
@@ -21,7 +21,7 @@ const router = useRouter()
                     }
                 "
             >
-                <LucideHome />
+                <LucideHome class="size-4" />
             </Button>
         </div>
         <slot />
diff --git a/front/components/CopyButton.vue b/front/components/CopyButton.vue
new file mode 100644
index 0000000..f5c648a
--- /dev/null
+++ b/front/components/CopyButton.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import asyncWait from '~/lib/asyncWait'
+import { toast } from 'vue-sonner'
+import { LucideCheck, LucideCopy } from 'lucide-vue-next'
+
+const isCopy = ref(false)
+const props = defineProps<{
+    value: string
+}>()
+const { copy } = useClipboard()
+const { t } = useI18n()
+</script>
+
+<template>
+    <Button
+        variant="outline"
+        class="transition-all duration-300"
+        size="icon"
+        @click="
+            async () => {
+                await copy(props?.value)
+                isCopy = true
+                toast.success(t('page.result.text.copySuccess'))
+                await asyncWait(3000)
+                isCopy = false
+            }
+        "
+    >
+        <component :is="isCopy ? LucideCheck : LucideCopy" class="size-1/2" />
+    </Button>
+</template>
diff --git a/front/components/Home/Text/TextUploadInputTextView.vue b/front/components/Home/Text/TextUploadInputTextView.vue
index 5249ab2..c076b72 100644
--- a/front/components/Home/Text/TextUploadInputTextView.vue
+++ b/front/components/Home/Text/TextUploadInputTextView.vue
@@ -44,7 +44,7 @@ const handleTextShare = ({ type, config }: { type: string; config: any }) => {
                     }
                 "
             >
-                <LucideX />
+                <LucideX class="size-4" />
             </Button>
         </div>
         <div class="flex flex-row gap-3">
diff --git a/front/components/Result/FileShareResult.vue b/front/components/Result/FileShareResult.vue
index 1dba911..f474625 100644
--- a/front/components/Result/FileShareResult.vue
+++ b/front/components/Result/FileShareResult.vue
@@ -104,7 +104,7 @@ const handleShowQrCode = (id: string) => {
                             size="icon"
                             @click.stop="handleShare(file?.id as string, file?.file_name)"
                         >
-                            <LucideShare />
+                            <LucideShare class="size-1/2" />
                         </Button>
                         <Button
                             variant="outline"
@@ -117,7 +117,7 @@ const handleShowQrCode = (id: string) => {
                                 }
                             "
                         >
-                            <LucideCopy />
+                            <LucideCopy class="size-1/2" />
                         </Button>
                         <Button
                             variant="outline"
@@ -125,7 +125,7 @@ const handleShowQrCode = (id: string) => {
                             size="icon"
                             @click.stop="handleShowQrCode(file?.id as string)"
                         >
-                            <LucideQrCode />
+                            <LucideQrCode class="size-1/2" />
                         </Button>
                     </div>
                 </div>
@@ -158,7 +158,7 @@ const handleShowQrCode = (id: string) => {
                                         }
                                     "
                                 >
-                                    <LucideCopy class="size-3" />
+                                    <LucideCopy class="size-1/2" />
                                 </Button>
                             </div>
                             <div class="flex flex-row gap-2">
@@ -185,7 +185,7 @@ const handleShowQrCode = (id: string) => {
                                 )
                             "
                         >
-                            <LucideShare />
+                            <LucideShare class="size-1/2" />
                         </Button>
                         <Button
                             variant="outline"
@@ -198,11 +198,11 @@ const handleShowQrCode = (id: string) => {
                                 }
                             "
                         >
-                            <LucideCopy />
+                            <LucideCopy class="size-4" />
                         </Button>
 
                         <Button variant="outline" class="bg-white/70" size="icon" @click="handleShowQrCode(selectedFileShare?.id as string)">
-                            <LucideQrCode />
+                            <LucideQrCode class="size-1/2" />
                         </Button>
                     </div>
                 </div>