chore: 添加模拟数据
This commit is contained in:
parent
6ad8d59dc4
commit
847da73198
|
@ -1,7 +1,64 @@
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { NButton, NInput, NScrollbar } from 'naive-ui'
|
import { onMounted, ref } from 'vue'
|
||||||
|
import { NButton, NInput, NScrollbar, useMessage } from 'naive-ui'
|
||||||
import Message from './components/Message.vue'
|
import Message from './components/Message.vue'
|
||||||
import { SvgIcon } from '@/components'
|
import { SvgIcon } from '@/components'
|
||||||
|
|
||||||
|
const ms = useMessage()
|
||||||
|
|
||||||
|
const value = ref('')
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const list = ref<{
|
||||||
|
date: string
|
||||||
|
message: string
|
||||||
|
user?: boolean
|
||||||
|
}[]>([])
|
||||||
|
|
||||||
|
onMounted(initChat)
|
||||||
|
|
||||||
|
function initChat() {
|
||||||
|
list.value = [
|
||||||
|
{
|
||||||
|
date: '1 minute ago',
|
||||||
|
message: 'Hi, I am ChatGPT, a chatbot based on GPT-3.',
|
||||||
|
user: false,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClear() {
|
||||||
|
list.value = []
|
||||||
|
setTimeout(initChat, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEnter(event: KeyboardEvent) {
|
||||||
|
if (event.key === 'Enter')
|
||||||
|
handleSubmit()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit() {
|
||||||
|
if (!value.value) {
|
||||||
|
ms.warning('Please enter a message')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
loading.value = true
|
||||||
|
list.value.push({ date: '1 minute ago', message: value.value, user: true })
|
||||||
|
const message = await mock()
|
||||||
|
value.value = ''
|
||||||
|
list.value.push({ date: '1 minute ago', message, user: false })
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function mock(): Promise<string> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const message = 'ChatGPT 是一个基于深度学习的对话系统,可以用于自动生成聊天机器人的回答。它可以用于一些客服的工作,可以帮助客服团队处理大量的常见问题,从而提高工作效率。'
|
||||||
|
resolve(message)
|
||||||
|
}, 2000)
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -9,30 +66,31 @@ import { SvgIcon } from '@/components'
|
||||||
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
|
<div class="flex flex-col h-full overflow-hidden border rounded-md shadow-md">
|
||||||
<header class="flex items-center justify-between p-4">
|
<header class="flex items-center justify-between p-4">
|
||||||
<div>会话</div>
|
<div>会话</div>
|
||||||
<div> </div>
|
<div>
|
||||||
|
<button
|
||||||
|
class="w-[40px] h-[40px] rounded-full hover:bg-neutral-100 transition flex justify-center items-center"
|
||||||
|
@click="handleClear"
|
||||||
|
>
|
||||||
|
<SvgIcon icon="ri:delete-bin-6-line" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<main class="flex-1 overflow-hidden border-y">
|
<main class="flex-1 overflow-hidden border-y">
|
||||||
<div class="h-full">
|
<div class="h-full">
|
||||||
<NScrollbar class="h-full p-4">
|
<NScrollbar class="h-full p-4">
|
||||||
<div>
|
<div>
|
||||||
<Message date="10 hours ago" message="hello world" />
|
<Message
|
||||||
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
|
v-for="(item, index) of list" :key="index" :date="item.date" :message="item.message"
|
||||||
<Message date="10 hours ago" message="hello world" />
|
:user="item.user"
|
||||||
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
|
/>
|
||||||
<Message date="10 hours ago" message="hello world" />
|
|
||||||
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
|
|
||||||
<Message date="10 hours ago" message="hello world" />
|
|
||||||
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
|
|
||||||
<Message date="10 hours ago" message="hello world" />
|
|
||||||
<Message date="10 hours ago" message="Reprehenderit ut voluptas sapiente ratione nostrum est." user />
|
|
||||||
</div>
|
</div>
|
||||||
</NScrollbar>
|
</NScrollbar>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="p-4">
|
<footer class="p-4">
|
||||||
<div class="flex items-center justify-between space-x-2">
|
<div class="flex items-center justify-between space-x-2">
|
||||||
<NInput placeholder="Type a message" />
|
<NInput v-model:value="value" placeholder="Type a message" :disabled="loading" @keyup="handleEnter" />
|
||||||
<NButton type="primary">
|
<NButton type="primary" :loading="loading" @click="handleSubmit">
|
||||||
<SvgIcon icon="ri:send-plane-fill" />
|
<SvgIcon icon="ri:send-plane-fill" />
|
||||||
</NButton>
|
</NButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue