feat(front): add FileShareDrawer component for file sharing functionalities and enhance index page layout

front/components/Drawer/FileShareDrawer.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>

front/components/Field/FileUploadField.vue

@@ -40,8 +40,8 @@ onUnmounted(() => {
             isOverDropZone && '!bg-green-100/50 '
         )">
             <template v-if="!!value">
-                <div v-if="!!imageUrl" class="flex size-16">
-                    <div class="object-contain mx-auto">
+                <div v-if="!!imageUrl" class="flex max-w-30 max-h-20">
+                    <div class="object-contain m-auto h-full">
                         <img :src="imageUrl" class="w-full h-full  border border-black/20 rounded" />
                     </div>
                 </div>

front/pages/index.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="flex flex-col gap-5 py-5 items-center w-full h-full">
     <VeeForm>
-      <div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-200" v-if="type === 'file'">
-        1
+      <div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 gap-5 flex flex-col"
+        v-if="type === 'file'">
+        <div class="text-xl font-normal">上传文件</div>
+        <FileUploadField name="file" rules="required" />
+        <div class="flex flex-row gap-3">
+          <FormButton @click="(form) => {
+            const { file } = form?.values || {}
+            showDrawer({ render: ({ hide }) => h(FileShareDrawer, { hide, file }) })
+          }">
+            <LucideShare class="size-4" />提交
+          </FormButton>
+        </div>
       </div>
     </VeeForm>
     <VeeForm v-slot="{ setValues, getValues }">
@@ -10,20 +20,23 @@
         v-if="type === 'text'">
         <div class="text-xl font-normal">输入文本</div>
         <div class="relative">
-          <MarkdownInputField name="text" class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10"
-            rules="required" />
-          <Button variant="ghost" size="icon" class="absolute right-2 top-2 hover:bg-black/10" @click="() => {
+          <MarkdownInputField name="text" placeholder="使用我们的文本处理器轻松分享，翻译，总结，生成图片，询问大模型"
+            class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10" rules="required" />
+          <Button variant="ghost" size="icon" :class="cx('absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
+            get(getValues(), 'text')?.length > 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          )" @click="() => {
             setValues({ text: '' })
-            console.log('text', getValues())
           }">
             <LucideX />
           </Button>
         </div>
         <div class="flex flex-row gap-3">
           <FormButton @click="(form) => {
-            console.log('text form', form)
-            showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide }) })
-          }">发送</FormButton>
+            const { text } = form?.values || {}
+            showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide, text }) })
+          }">
+            <LucideShare class="size-4" />提交
+          </FormButton>
         </div>
       </div>
     </VeeForm>
@@ -31,14 +44,18 @@
 </template>
 
 <script setup lang="ts">
-import { isString } from 'lodash-es'
+import { isString, get } from 'lodash-es'
 import VeeForm from '@/components/VeeForm.vue'
 import MarkdownInputField from '@/components/Field/MarkdownInputField.vue'
+import FileUploadField from '@/components/Field/FileUploadField.vue'
 import FormButton from '@/components/Field/FormButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 import showDrawer from '@/lib/showDrawer'
 import { h } from 'vue'
 import TextShareDrawer from '@/components/Drawer/TextShareDrawer.vue'
+import FileShareDrawer from '@/components/Drawer/FileShareDrawer.vue'
+import { cx } from 'class-variance-authority'
+
 const route = useRoute()
 const router = useRouter()
 const type = computed(() => route?.query?.type)