280 lines
6.7 KiB
Vue
280 lines
6.7 KiB
Vue
<template>
|
||
<d-modal
|
||
v-model="visible"
|
||
title="AI问答"
|
||
@ok="handleClose"
|
||
:cancel="handleClose"
|
||
style="width: 900px;"
|
||
>
|
||
<div class="log-content">
|
||
<McLayout>
|
||
<!-- <McLayoutHeader>
|
||
<McHeader :logoImg="'/logo.svg'" :title="'MateChat'"></McHeader>
|
||
</McLayoutHeader>-->
|
||
<McLayoutContent v-if="visible" style="margin: 16px 0;">
|
||
<div ref="conversationRef" class="conversation-area">
|
||
<!-- 欢迎提示 -->
|
||
<div v-if="messages.length === 0" class="welcome-message">
|
||
|
||
<div class="welcome-page">
|
||
<div class="home-title">
|
||
<img src="@/assets/imgs/jyh/aiLogo2.png" alt="logo" />
|
||
<h1>可信开源代码库AI助手</h1>
|
||
</div>
|
||
<div class="home-detail">
|
||
<div class="home-detail-1">Hi，欢迎使用可信开源代码库AI助手</div>
|
||
<div class="home-detail-2">可信开源代码库AI助手 可以辅助研发人员进行软件查询、批量校验、查看软件详情等。</div>
|
||
<div class="home-detail-2">作为AI模型，可信开源代码库AI助手 提供的答案可能不总是确定或准确的，但您的反馈可以帮助 可信开源代码库AI助手 做得更好。</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="welcome-icon">-->
|
||
<!-- <i class="fa fa-comment-dots"></i>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="welcome-text">-->
|
||
<!-- <h3>请输入你想问的内容</h3>-->
|
||
<!-- <p>与AI助手开始对话，获取智能回答</p>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
|
||
<template v-for="(msg, idx) in messages" :key="idx">
|
||
<McBubble v-if="msg.role === 'user'" :content="msg.content" :align="'right'"></McBubble>
|
||
<McBubble v-else :loading="msg.loading ?? false">
|
||
<McMarkdownCard :content="msg.content" :theme="theme"></McMarkdownCard>
|
||
</McBubble>
|
||
</template>
|
||
</div>
|
||
</McLayoutContent>
|
||
<McLayoutSender>
|
||
<McInput :value="inputValue" :maxLength="2000" @submit="onSubmit" showCount></McInput>
|
||
</McLayoutSender>
|
||
</McLayout>
|
||
</div>
|
||
</d-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch,nextTick } from 'vue';
|
||
import { Message } from 'vue-devui';
|
||
import axios from 'axios';
|
||
import {uvdV1Chat} from "@/api/inboundTask/inboundTaskApi";
|
||
|
||
const messages = ref([]);
|
||
const history = ref([]);
|
||
const resultInfo = ref(null);
|
||
const inputValue = ref('');
|
||
const conversationRef = ref(null);
|
||
|
||
// 组件状态
|
||
const visible = ref(false);
|
||
const VITE_AI_API_HOST = import.meta.env.VITE_AI_API_HOST;
|
||
// 打开弹框时调用接口
|
||
const open = async (id) => {
|
||
if (!id) return Message.error('缺少result_id参数');
|
||
visible.value = true;
|
||
resultInfo.value = id
|
||
};
|
||
|
||
const onSubmit = (e) => {
|
||
if(e === '') {
|
||
return;
|
||
}
|
||
if(messages.value[messages.value.length-1]?.loading) return;
|
||
inputValue.value = '';
|
||
messages.value.push({
|
||
role: 'user',
|
||
content: e,
|
||
});
|
||
nextTick(() => {
|
||
conversationRef.value?.scrollTo({
|
||
top: conversationRef.value.scrollHeight,
|
||
behavior: 'smooth',
|
||
});
|
||
});
|
||
getAIAnswer(e);
|
||
};
|
||
|
||
const getAIAnswer = async (content) => {
|
||
messages.value.push({
|
||
role: 'assistant',
|
||
content: '',
|
||
loading: true,
|
||
});
|
||
|
||
const res = await uvdV1Chat({
|
||
"resultInfo": resultInfo.value,
|
||
"query": content,
|
||
"history": history.value || []
|
||
});
|
||
|
||
let reply = res?.data?.data?.reply || '';
|
||
history.value.push({role: "user", content: content});
|
||
history.value.push({role: "assistant", content: reply});
|
||
messages.value[messages.value.length - 1].content = reply;
|
||
messages.value[messages.value.length - 1].loading = false;
|
||
nextTick(() => {
|
||
conversationRef.value?.scrollTo({
|
||
top: conversationRef.value.scrollHeight
|
||
});
|
||
});
|
||
/* 模拟流式数据返回 */
|
||
// setTimeout(async () => {
|
||
// messages.value.at(-1).loading = false;
|
||
// for (let i = 0; i < reply.length;) {
|
||
// await new Promise(r => setTimeout(r, 300 * Math.random()));
|
||
// messages.value[messages.value.length - 1].content = reply.slice(0, i += Math.random() * 10);
|
||
// nextTick(() => {
|
||
// conversationRef.value?.scrollTo({
|
||
// top: conversationRef.value.scrollHeight
|
||
// });
|
||
// });
|
||
// }
|
||
// }, 1000);
|
||
};
|
||
|
||
// 暴露给父组件的方法
|
||
defineExpose({
|
||
open // 通过ref调用open方法传递resultId
|
||
});
|
||
|
||
// 关闭弹框
|
||
const handleClose = () => {
|
||
messages.value = [];
|
||
history.value = [];
|
||
result_id.value = null;
|
||
inputValue.value = '';
|
||
visible.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.log-content {
|
||
padding: 24px;
|
||
line-height: 1.6;
|
||
white-space: pre-wrap; // 保留日志换行
|
||
word-break: break-all; // 自动换行长单词
|
||
min-height: 200px;
|
||
|
||
p {
|
||
margin: 0;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.conversation-area,
|
||
.welcome-page {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
padding: 0 12px;
|
||
min-height: 400px;
|
||
max-height: 600px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.conversation-area {
|
||
gap: 8px;
|
||
}
|
||
|
||
.welcome-message {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: 32px;
|
||
text-align: center;
|
||
|
||
.welcome-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
background-color: #e6f4ff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 16px;
|
||
|
||
i {
|
||
font-size: 28px;
|
||
color: #1677ff;
|
||
}
|
||
}
|
||
|
||
.welcome-text {
|
||
h3 {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.home-title {
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 20px;
|
||
h1 {
|
||
color: #191919;
|
||
font-family: Huawei Sans;
|
||
font-weight: bold;
|
||
font-size: 32px;
|
||
line-height: 48px;
|
||
letter-spacing: 0px;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
img {
|
||
width: 64px;
|
||
//filter: brightness(0);
|
||
}
|
||
}
|
||
|
||
.home-detail {
|
||
.home-detail-1 {
|
||
color: #191919;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: medium;
|
||
font-size: 24px;
|
||
line-height: 32px;
|
||
letter-spacing: 0px;
|
||
text-align: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
.home-detail-2 {
|
||
color: #777777;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: regular;
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
letter-spacing: 0px;
|
||
text-align: center;
|
||
|
||
}
|
||
}
|
||
|
||
.welcome-page {
|
||
//height: 90%;
|
||
width: 100%;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: auto;
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.welcome-page {
|
||
gap: 16px;
|
||
justify-content: center;
|
||
}
|
||
</style>
|