GitHub/015
1
0
Fork 0
mirror of https://github.com/keven1024/015.git synced 2026-05-30 17:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(front): implement text sharing functionality with new TextShareHandle and TextShareResult components

Browse Source
This commit is contained in:
keven1024
2025-05-20 10:39:02 +08:00
parent 838d425369
commit c1fd4e7bbd
6 changed files with 227 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
front/components/Home/Text/TextUploadIndexView.vue
View File

@@ -1,38 +1,32 @@
<script lang="ts" setup>
import { get } from 'lodash-es'
import VeeForm from '@/components/VeeForm.vue'
import MarkdownInputField from '@/components/Field/MarkdownInputField.vue'
import TextUploadInputTextView from './TextUploadInputTextView.vue'
import ResultIndexView from '@/components/Result/ResultIndexView.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'
const textStepList = [
{ component: TextUploadInputTextView, key: 'input' },
{ component: ResultIndexView, key: 'result' },
]
const step = ref('input')
const renderComponent = computed(() => {
return textStepList.find((item) => item.key === step.value)?.component
})
const formRef = ref<InstanceType<typeof VeeForm>>()
watch(() => step.value, (newVal) => {
if (newVal === 'input') {
formRef.value?.form?.resetForm()
// formRef.value?.form?.setValues({ file: null })
}
})
</script>
<template>
<VeeForm v-slot="{ setValues, values }">
<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',
values.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="async (form) => {
const { text } = form?.values || {}
showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide, text }) })
}">
<LucideShare class="size-4" />提交
</FormButton>
</div>
<VeeForm ref="formRef" v-slot="{ values }" :keepValues="true">
<div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200">
<component :is="renderComponent" :data="values" @change="(key: string) => {
step = key
}" />
</div>
</VeeForm>
</template>

45
front/components/Home/Text/TextUploadInputTextView.vue Normal file
View File

@@ -0,0 +1,45 @@
<script lang="ts" setup>
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'
const form = useFormContext()
const emit = defineEmits<{
(e: 'change', key: string): void
}>()
const handleTextShare = ({ type, config }: { type: string, config: any }) => {
form?.setFieldValue('handle_type', type)
form?.setFieldValue('config', config)
emit('change', 'result')
}
</script>
<template>
<div class="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',
form?.values.text?.length > 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'
)" @click="() => {
form?.setValues({ text: '' })
}">
<LucideX />
</Button>
</div>
<div class="flex flex-row gap-3">
<FormButton @click="async (form) => {
const { text } = form?.values || {}
showDrawer({ render: ({ hide }) => h(TextShareDrawer, { hide, text, onTextHandle: handleTextShare }) })
}">
<LucideShare class="size-4" />提交
</FormButton>
</div>
</div>
</template>