GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(front): add CopyButton component for clipboard functionality and update icon sizes in existing components

Browse Source
This commit is contained in:
keven1024
2026-04-27 23:20:35 +08:00
parent 6edb1fe222
commit 2a42ca8cde
4 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/components/BaseCard.vue
View File

@@ -21,7 +21,7 @@ const router = useRouter()
} }
" "
> >
<LucideHome /> <LucideHome class="size-4" />
</Button> </Button>
</div> </div>
<slot /> <slot />

32
front/components/CopyButton.vue Normal file
View File

@@ -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>

2
front/components/Home/Text/TextUploadInputTextView.vue
View File

@@ -44,7 +44,7 @@ const handleTextShare = ({ type, config }: { type: string; config: any }) => {
} }
" "
> >
<LucideX /> <LucideX class="size-4" />
</Button> </Button>
</div> </div>
<div class="flex flex-row gap-3"> <div class="flex flex-row gap-3">

14
front/components/Result/FileShareResult.vue
View File

@@ -104,7 +104,7 @@ const handleShowQrCode = (id: string) => {
size="icon" size="icon"
@click.stop="handleShare(file?.id as string, file?.file_name)" @click.stop="handleShare(file?.id as string, file?.file_name)"
> >
<LucideShare /> <LucideShare class="size-1/2" />
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -117,7 +117,7 @@ const handleShowQrCode = (id: string) => {
} }
" "
> >
<LucideCopy /> <LucideCopy class="size-1/2" />
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -125,7 +125,7 @@ const handleShowQrCode = (id: string) => {
size="icon" size="icon"
@click.stop="handleShowQrCode(file?.id as string)" @click.stop="handleShowQrCode(file?.id as string)"
> >
<LucideQrCode /> <LucideQrCode class="size-1/2" />
</Button> </Button>
</div> </div>
</div> </div>
@@ -158,7 +158,7 @@ const handleShowQrCode = (id: string) => {
} }
" "
> >
<LucideCopy class="size-3" /> <LucideCopy class="size-1/2" />
</Button> </Button>
</div> </div>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
@@ -185,7 +185,7 @@ const handleShowQrCode = (id: string) => {
) )
" "
> >
<LucideShare /> <LucideShare class="size-1/2" />
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -198,11 +198,11 @@ const handleShowQrCode = (id: string) => {
} }
" "
> >
<LucideCopy /> <LucideCopy class="size-4" />
</Button> </Button>
<Button variant="outline" class="bg-white/70" size="icon" @click="handleShowQrCode(selectedFileShare?.id as string)"> <Button variant="outline" class="bg-white/70" size="icon" @click="handleShowQrCode(selectedFileShare?.id as string)">
<LucideQrCode /> <LucideQrCode class="size-1/2" />
</Button> </Button>
</div> </div>
</div> </div>