From 1caeafba096914625745c3a687c8551c4104a4f2 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Fri, 18 Apr 2025 23:49:01 +0800
Subject: [PATCH] feat(front): update VeeForm to use v-slot for better slot
 binding and add TextShareDrawer component for sharing functionalities

---
 front/components/Drawer/TextShareDrawer.vue | 45 +++++++++++++++++++++
 front/components/VeeForm.vue                |  4 +-
 2 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 front/components/Drawer/TextShareDrawer.vue

diff --git a/front/components/Drawer/TextShareDrawer.vue b/front/components/Drawer/TextShareDrawer.vue
new file mode 100644
index 0000000..73e1042
--- /dev/null
+++ b/front/components/Drawer/TextShareDrawer.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { LucideShare, LucideImage, LucideBot, LucideLanguages } from 'lucide-vue-next'
+import { cx } from 'class-variance-authority'
+
+const props = defineProps<{
+    hide: () => void
+}>()
+const actions = [
+    {
+        label: '分享文本', icon: LucideShare, className: 'bg-green-300', onClick: () => {
+            console.log('复制链接')
+        }
+    },
+    {
+        label: '生成图文', icon: LucideImage, className: 'bg-red-300', onClick: () => {
+            console.log('复制链接')
+        }
+    },
+    {
+        label: '问大模型', icon: LucideBot, className: 'bg-blue-300', onClick: () => {
+            console.log('复制链接')
+        }
+    },
+    {
+        label: '文本翻译', icon: LucideLanguages, className: 'bg-orange-300', onClick: () => {
+            console.log('复制链接')
+        }
+    },
+]
+</script>
+<template>
+    <div class="flex flex-col gap-5 p-5">
+        <div class="flex flex-row gap-5">
+            <div v-for="item in actions" :key="item.label" class="flex flex-col items-center gap-2" @click="()=>{
+                item?.onClick()
+                props?.hide()
+            }">
+                <div :class="cx('size-14 flex justify-center items-center rounded-full', item?.className)">
+                    <component :is="item?.icon" />
+                </div>
+                <div class="text-sm">{{ item?.label }}</div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/front/components/VeeForm.vue b/front/components/VeeForm.vue
index 8bb9f12..d6e4af4 100644
--- a/front/components/VeeForm.vue
+++ b/front/components/VeeForm.vue
@@ -1,6 +1,6 @@
 <template>  
-    <Form>
-        <slot />
+    <Form as="" v-slot="slots">
+        <slot v-bind="slots" />
     </Form>
 </template>