feat: enhance TextShareView component with copy functionality for preview text and update share data structure

front/components/Share/TextShareView.vue

@@ -1,93 +1,97 @@
 <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";
-import MarkdownRender from "@/components/MarkdownRender.vue";
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
+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'
+import MarkdownRender from '@/components/MarkdownRender.vue'
+import { Button } from '@/components/ui/button'
+import { LucideCopy } from 'lucide-vue-next'
+import { useClipboard } from '@vueuse/core'
+
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
 
 const props = defineProps<{
-  data: any;
-}>();
+    data: any
+}>()
 
-const { getShareToken } = useMyAppShare();
+const { getShareToken } = useMyAppShare()
 
 const expireSeconds = computed(() => {
-  return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix();
-});
+    return dayjs(props?.data?.expire_at * 10e2).unix() - dayjs().unix()
+})
 
-const { remaining, start } = useCountdown(expireSeconds.value);
+const { remaining, start } = useCountdown(expireSeconds.value)
+
+const { copy } = useClipboard()
 
 onMounted(() => {
-  start();
-});
+    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);
+    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 token = await getShareToken(props?.data?.id);
-    const r = await $fetch<{
-      code: number;
-      data: {
-        data: string;
-      };
-    }>(`/api/download?token=${token}`);
-    previewText.value = r?.data?.data;
-  } catch (error) {
-    toast.error((error as any)?.data?.message || error);
-  }
-};
+    try {
+        const token = await getShareToken(props?.data?.id)
+        const r = await $fetch<{
+            code: number
+            data: {
+                data: string
+            }
+        }>(`/api/download?token=${token}`)
+        previewText.value = r?.data?.data
+    } catch (error) {
+        toast.error((error as any)?.data?.message || error)
+    }
+}
 </script>
 <template>
-  <div
-    :class="
-      cx(
-        'flex flex-col max-h-full',
-        !!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 :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">查看文本</h1>
+            <Button
+                v-if="!!previewText"
+                variant="outline"
+                size="icon"
+                @click="
+                    () => {
+                        copy(previewText as string)
+                        toast.success('复制成功')
+                    }
+                "
+            >
+                <LucideCopy />
+            </Button>
         </div>
-      </div>
-      <div class="w-full">
-        <AsyncButton @click="handlePreview" class="w-full">浏览</AsyncButton>
-      </div>
-    </template>
-    <template v-else>
-      <MarkdownRender
-        :markdown="previewText"
-        class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto"
-      />
-    </template>
-  </div>
+        <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>
+            <MarkdownRender :markdown="previewText" class="rounded-md bg-white/70 p-3 w-full max-w-full min-h-80 overflow-y-auto" />
+        </template>
+    </div>
 </template>

front/composables/useMyAppShare.ts

@@ -1,98 +1,102 @@
-import { toast } from "vue-sonner";
+import { toast } from 'vue-sonner'
 
-let shareIdTokenMap: WeakMap<{ share_id: string }, string>;
+let shareIdTokenMap: WeakMap<{ share_id: string }, string>
 
 const getShareToken = async (share_id: string): Promise<string | undefined> => {
-  if (!shareIdTokenMap) {
-    shareIdTokenMap = new WeakMap();
-  }
-  let token = shareIdTokenMap.get({ share_id });
-  if (!token) {
-    const data = await $fetch<{
-      code: number;
-      message: string;
-      data: {
-        token?: string;
-      };
-    }>(`/api/download`, {
-      method: "POST",
-      body: {
-        share_id,
-      },
-    });
-    if (!data?.data?.token) {
-      throw new Error(data?.message || "获取token失败");
+    if (!shareIdTokenMap) {
+        shareIdTokenMap = new WeakMap()
     }
-    token = data.data.token;
-    shareIdTokenMap.set({ share_id }, token);
-  }
-  return token;
-};
+    let token = shareIdTokenMap.get({ share_id })
+    if (!token) {
+        const data = await $fetch<{
+            code: number
+            message: string
+            data: {
+                token?: string
+            }
+        }>(`/api/download`, {
+            method: 'POST',
+            body: {
+                share_id,
+            },
+        })
+        if (!data?.data?.token) {
+            throw new Error(data?.message || '获取token失败')
+        }
+        token = data.data.token
+        shareIdTokenMap.set({ share_id }, token)
+    }
+    return token
+}
 
 const downloadFile = async (share_id: string) => {
-  try {
-    const token = await getShareToken(share_id);
-    if (!token) {
-      throw new Error("获取token失败");
-      return;
+    try {
+        const token = await getShareToken(share_id)
+        if (!token) {
+            throw new Error('获取token失败')
+            return
+        }
+        ;(window as any)?.open(`/api/download?token=${token}`)
+    } catch (e) {
+        toast.error((e as any)?.data?.message || e)
     }
-    (window as any)?.open(`/api/download?token=${token}`);
-  } catch (e) {
-    toast.error((e as any)?.data?.message || e);
-  }
-};
+}
 
 const createShare = async (data: any) => {
-  return await $fetch<{
-    code: number;
-    data: {
-      id?: string;
-    };
-  }>(`/api/share`, {
-    method: "POST",
-    body: data,
-  });
-};
+    return await $fetch<{
+        code: number
+        data: {
+            id?: string
+            download_nums?: number
+            expire_at?: number
+            file_name?: string
+            pickup_code?: string
+        }
+    }>(`/api/share`, {
+        method: 'POST',
+        body: data,
+    })
+}
 
 const createFileShare = async (data: {
-  file_id: string;
-  config: {
-    download_nums: number;
-    expire_time: number;
-    has_pickup_code?: boolean;
-    has_password?: boolean;
-    pickup_code?: string;
-    password?: string;
-    notify_email?: string;
-  };
-  file_name: string;
+    file_id: string
+    config: {
+        download_nums: number
+        expire_time: number
+        has_pickup_code?: boolean
+        has_password?: boolean
+        pickup_code?: string
+        password?: string
+        notify_email?: string
+    }
+    file_name: string
 }) => {
-  const { file_id, config, file_name } = data || {};
-  return await createShare({
-    type: "file",
-    data: file_id,
-    config,
-    file_name,
-  });
-};
+    const { file_id, config, file_name } = data || {}
+    return await createShare({
+        type: 'file',
+        data: file_id,
+        config,
+        file_name,
+    })
+}
 
 const createTextShare = async (data: { text: string; config: any }) => {
-  const { text, config } = data || {};
-  return await createShare({
-    type: "text",
-    data: text,
-    config,
-  });
-};
+    const { text, config } = data || {}
+    return await createShare({
+        type: 'text',
+        data: text,
+        config,
+    })
+}
 
 const useMyAppShare = () => {
-  return {
-    downloadFile,
-    createShare,
-    createFileShare,
-    createTextShare,
-    getShareToken,
-  };
-};
+    return {
+        downloadFile,
+        createShare,
+        createFileShare,
+        createTextShare,
+        getShareToken,
+    }
+}
 
-export default useMyAppShare;
+export default useMyAppShare