From 4c6b66ccfed61bd272bd44fc871b54024b448734 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Fri, 18 Apr 2025 23:48:46 +0800
Subject: [PATCH] feat(front): create index page with VeeForm for file and text
 input handling, and adjust layout padding for better responsiveness

---
 front/layouts/default.vue |  2 +-
 front/pages/index.vue     | 50 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 front/pages/index.vue

diff --git a/front/layouts/default.vue b/front/layouts/default.vue
index 5373d1f..1073fe9 100644
--- a/front/layouts/default.vue
+++ b/front/layouts/default.vue
@@ -2,7 +2,7 @@
   <div class="h-screen w-screen ">
     <GlobalDrawer />
     <img class="w-full h-full object-cover absolute inset-0 -z-[1]" src="https://fuwari.vercel.app/_astro/demo-banner.DFyx781H_Z1gN7UP.webp" />
-    <div class=" h-full w-full flex flex-col items-center p-10">
+    <div class=" h-full w-full flex flex-col items-center lg:p-10 p-5">
       <Navbar />
       <slot />
     </div>
diff --git a/front/pages/index.vue b/front/pages/index.vue
new file mode 100644
index 0000000..7c645c9
--- /dev/null
+++ b/front/pages/index.vue
@@ -0,0 +1,50 @@
+<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>
+    </VeeForm>
+    <VeeForm v-slot="{ setValues, getValues }">
+      <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 === '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="() => {
+            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>
+        </div>
+      </div>
+    </VeeForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { isString } from 'lodash-es'
+import VeeForm from '@/components/VeeForm.vue'
+import MarkdownInputField from '@/components/Field/MarkdownInputField.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'
+const route = useRoute()
+const router = useRouter()
+const type = computed(() => route?.query?.type)
+onMounted(() => {
+  if (!isString(type.value) || type.value?.length === 0) {
+    router.push({ query: { type: 'file' }, replace: true })
+  }
+})
+</script>
\ No newline at end of file