mirror of
https://github.com/keven1024/015.git
synced 2026-05-26 07:08:02 +00:00
refactor(front): replace clipboard functionality with CopyButton component in FileShareResult, TextShareResult, and TextShareView components
This commit is contained in:
keven1024
@@ -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" />
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user