<template>
<el
-drawer v
-model="aiDrawer" title="全域智能问答" size="40%" direction="rtl">
<div class="ai
-content">
<!
-- 欢迎对话框（只在没有消息时显示）
-->
<div class="dialog
-box" v
-if="
messageList.length === 0">
<el
-avatar :size="40" :src="logo" />
<div class="dialog">
<p class="text
-20 mb
-20 font
-bold">
你好,
<br />
我是全域数据管理平台
</p>
<div>
<div class="flex justify
-between align
-center mb
-10 text
-16">
<p>你可以试看问我:</p>
<el
-button type="primary" text size="large" @click="refreshQuestions">换一换</el
-button>
</div>
<div class="questions
-list">
<div v
-for="(item, index) in questionsList" :key="index" @click="selectQuestion(item)">
{{ item }}
</div>
</div>
</div>
</div>
</div>
<!
-- 聊天消息区域
-->
<div class="chat
-messages" v
-if="
messageList.length > 0">
<div
v
-for="(
message, index) in
messageList"
:key="index"
class="
message"
:class="{
'
user-message':
message.placement === 'end',
'assistant
-message':
message.placement === 'start'
}"
>
<div class="
message-content">
<el
-avatar :size="30" :src="
message.avatar || logo" />
<div class="
message-text">
<div v
-if="
message.loading && !
message.complete" class="loading
-dots">
<span></span>
<span></span>
<span></span>
</div>
<template v
-else>
{{
message.content }}
</template>
</div>
</div>
</div>
</div>
<!
-- 问题输入区
-->
<div class="chat
-input">
<div class="update
-bnt">
<el
-button
type="primary"
plain
size="large"
round
@click="resetList"
v
-if="
messageList.length > 0"
:icon="ChatLineSquare"
>
开启新对话
</el
-button>
</div>
<div class="textarea
-box">
<el
-input
v
-model="textarea"
:autosize="{ minRows: 1, maxRows: 4 }"
type="textarea"
placeholder="给全域智能助手发消息"
show
-word
-limit
/>
<el
-button type="primary" :icon="Promotion" :loading="loading" plain circle @click="submitFn" />
</div>
</div>
</div>
</el
-drawer>
</template>
<script setup lang="ts">
import { ref, watch, nextTick } from 'vue'
import { storeToRefs } from 'pinia'
import { Promotion } from '@element
-plus/
icons-vue'
import { El
Message } from 'element
-plus'
import logo from '@/assets/images/logo.png'
import { useAIStore } from './ai'
import { ChatLineSquare } from '@element
-plus/
icons-vue'
const aiDrawer = ref(false)
const textarea = ref('')
const questionsList = ref(['如何分类分级', '如何编目', '如何审核', '如何发布', '如何智能分拨', '如何创建账号'])
const aiStore = useAIStore()
const {
messageList, loading } = storeToRefs(aiStore)
// 刷新问题列表
const refreshQuestions = () => {
// 简单打乱问题顺序
questionsList.value = [...questionsList.value].sort(() => Math.random()
- 0.5)
}
// 选择问题
const selectQuestion = (question: string) => {
textarea.value = question
submitFn()
}
// 发送消息
const submitFn = async () => {
if (!textarea.value.trim()) {
El
Message.warning('请输入问题')
return
}
if (loading.value) {
return
}
try {
await aiStore.send
Message(textarea.value)
textarea.value = ''
} catch (error) {
El
Message.error('发送消息失败')
}
}
// 重置消息列表
const resetList = () => {
messageList.value = []
}
//打开抽屉
const openDrawer = () => {
aiDrawer.value = true
}
//暴露方法
defineExpose({
openDrawer
})
// 自动滚动到底部
watch(
messageList,
() => {
nextTick(() => {
const container = document.querySelector('.chat
-messages')
if (container) {
container.scrollTop = container.scrollHeight
}
})
},
{ deep: true }
)
</script>
<style scoped lang="scss">
.ai
-content {
height: 100%;
position: relative;
.dialog
-box {
display: flex;
padding: 20px;
gap: 20px;
width: 100%;
border
-radius: 20px;
.dialog {
flex: 1;
padding: 0 20px;
.questions
-list {
display: flex;
flex
-wrap: wrap;
gap: 20px;
div {
padding: 20px;
width: calc(100% / 2
- 20px);
box-shadow: 1px 1px 10px #eee;
cursor: pointer;
transition: all 0.3s;
&:hover {
background
-color: #f5f7fa;
transform: translateY(
-2px);
}
}
}
}
}
.chat
-messages {
max
-height: 580px;
overflow: hidden;
flex: 1;
overflow
-y: auto;
display: flex;
flex
-direction: column;
gap: 20px;
.
message {
margin
-top: 20px;
.
message-content {
display: flex;
gap: 15px;
align
-items: flex
-start;
max
-width: 90%;
margin: 0 auto;
}
.
message-text {
padding: 12px 16px;
border
-radius: 12px;
line
-height: 1.6;
font
-size: 15px !important;
white
-space: pre
-wrap;
min
-height: 40px;
display: flex;
align
-items: center;
background
-color: #0097ff;
}
}
.
user-message {
.
message-content {
flex
-direction: row
-reverse;
}
.
message-text {
color: #fff;
}
}
.assistant
-message {
.
message-text {
background
-color: #eff6ff;
max
-width: 550px;
color: #333;
}
}
}
.loading
-dots {
display: inline
-flex;
align
-items: center;
height: 100%;
span {
display: inline
-block;
width: 8px;
height: 8px;
border
-radius: 50%;
background
-color: #999;
margin: 0 3px;
animation: bounce 1.4s infinite ease
-in
-out both;
&:nth
-child(1) {
animation
-delay:
-0.32s;
}
&:nth
-child(2) {
animation
-delay:
-0.16s;
}
}
}
.chat
-input {
width: 100%;
position: absolute;
bottom: 0;
.update
-bnt {
display: flex;
justify
-content: center;
margin
-bottom: 10px;
}
.textarea
-box {
width: 100%;
display: flex;
padding: 8px;
align
-items: center;
border
-radius: 10px;
border: 1px solid #dcdfe6;
:deep(.el
-textarea__inner) {
border: none !important;
box-shadow: none !important;
background: transparent !important;
resize: none;
font
-size: 16px;
}
}
}
}
@keyframes bounce {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
</style>
在我的代码里面使用Marked 和 Highlight.js
本文深入探讨了消息框的多种类型及其使用场景，包括AbortRetryIgnore、OK、OKCancel、RetryCancel、YesNo、YesNocancel等，并详细解释了它们各自的按钮布局和响应方式。同时，文章还介绍了消息框的模态性（如应用模态、系统模态、任务模态）、图标样式（如警告、信息、疑问、停止）以及默认按钮设置。通过阅读本文，开发者将能够更熟练地运用消息框进行用户交互。
扫一扫
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
