Left.vue
2.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<template>
<div class="w-[350px] p-5 flex flex-col bg-[#f5f7f9]">
<h3 class="w-full h-full h-7 text-5 text-center leading-[28px] title">思维导图创作中心</h3>
<!--下面表单部分-->
<div class="flex-grow overflow-y-auto">
<div class="mt-[30ppx]">
<el-text tag="b">您的需求？</el-text>
<el-input
v-model="formData.prompt"
maxlength="1024"
:rows="5"
class="w-100% mt-15px"
input-style="border-radius: 7px;"
placeholder="请输入提示词，让AI帮你完善"
show-word-limit
type="textarea"
/>
<el-button
class="!w-full mt-[15px]"
type="primary"
:loading="isGenerating"
@click="emits('submit', formData)"
>
智能生成思维导图
</el-button>
</div>
<div class="mt-[30px]">
<el-text tag="b">使用已有内容生成？</el-text>
<el-input
v-model="generatedContent"
maxlength="1024"
:rows="5"
class="w-100% mt-15px"
input-style="border-radius: 7px;"
placeholder="例如：童话里的小屋应该是什么样子？"
show-word-limit
type="textarea"
/>
<el-button
class="!w-full mt-[15px]"
type="primary"
@click="emits('directGenerate', generatedContent)"
:disabled="isGenerating"
>
直接生成
</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { MindMapContentExample } from '@/views/ai/utils/constants'
const emits = defineEmits(['submit', 'directGenerate'])
defineProps<{
isGenerating: boolean
}>()
// 提交的提示词字段
const formData = reactive({
prompt: ''
})
const generatedContent = ref(MindMapContentExample) // 已有的内容
defineExpose({
setGeneratedContent(newContent: string) {
// 设置已有的内容，在生成结束的时候将结果赋值给该值
generatedContent.value = newContent
}
})
</script>
<style lang="scss" scoped>
.title {
color: var(--el-color-primary);
}
</style>