GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-26 07:08:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(front): create FileUploadView and TextUploadView components for file and text uploads, enhancing the upload functionality on the index page

Browse Source
This commit is contained in:
keven1024
2025-04-24 11:09:01 +08:00
parent 26314fd67f
commit 1618f23d39
3 changed files with 68 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front/components/Upload/FileUploadView.vue Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts" setup>
import VeeForm from '@/components/VeeForm.vue'
import FileUploadField from '@/components/Field/FileUploadField.vue'
import FormButton from '@/components/Field/FormButton.vue'
import showDrawer from '@/lib/showDrawer'
import { h } from 'vue'
import FileShareDrawer from '@/components/Drawer/FileShareDrawer.vue'
</script>
<template>
<VeeForm>
<div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 gap-5 flex flex-col">
<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>
</template>

38
front/components/Upload/TextUploadView.vue Normal file
View File

@@ -0,0 +1,38 @@
<script lang="ts" setup>
import { get } 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'
import { cx } from 'class-variance-authority'
</script>
<template>
<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">
<div class="text-xl font-normal">输入文本</div>
<div class="relative">
<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: '' })
}">
<LucideX />
</Button>
</div>
<div class="flex flex-row gap-3">
<FormButton @click="(form) => {
const { text } = form?.values || {}
showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide, text }) })
}">
<LucideShare class="size-4" />提交
</FormButton>
</div>
</div>
</VeeForm>
</template>

56
front/pages/index.vue
View File

@@ -1,60 +1,14 @@
<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-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 }">
<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" 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: '' })
}">
<LucideX />
</Button>
</div>
<div class="flex flex-row gap-3">
<FormButton @click="(form) => {
const { text } = form?.values || {}
showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide, text }) })
}">
<LucideShare class="size-4" />提交
</FormButton>
</div>
</div>
</VeeForm>
<FileUploadView v-if="type === 'file'" />
<TextUploadView v-if="type === 'text'" />
</div>
</template>
<script setup lang="ts">
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'
import FileUploadView from '~/components/Upload/FileUploadView.vue'
import TextUploadView from '~/components/Upload/TextUploadView.vue'
import { isString } from 'lodash-es'
const route = useRoute()
const router = useRouter()