You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
457 lines
11 KiB
457 lines
11 KiB
<template>
|
|
<div style="display: flex;
|
|
height: 100vh;">
|
|
<Menu
|
|
:initial-active="1"
|
|
/>
|
|
<div class="qwen-chat">
|
|
<!-- 聊天消息区域 -->
|
|
<div ref="messagesContainer" class="chat-messages">
|
|
<div
|
|
v-for="(msg, index) in messages"
|
|
:key="index"
|
|
:class="['message', msg.role]"
|
|
>
|
|
<div>2025</div>
|
|
<div v-if="msg.role === 'user'" class="bubble">
|
|
{{ msg.content }}
|
|
</div>
|
|
<div v-else-if="msg.role === 'assistant'">
|
|
<div v-if="msg.isKG" class="kg-card">
|
|
<div v-if="msg.content.entities?.length" class="kg-section">
|
|
<h5 style="text-align: left">识别出的实体</h5>
|
|
<div class="entity-list">
|
|
<span
|
|
v-for="(ent, i) in msg.content.entities"
|
|
:key="i"
|
|
class="entity-tag"
|
|
:class="'tag-' + ent.t"
|
|
>
|
|
{{ ent.n }}<small>({{ ent.t }})</small>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="msg.content.relations?.length" class="kg-section">
|
|
<h5 style="text-align: left">识别出的关系</h5>
|
|
<ul class="relation-list">
|
|
<li v-for="(rel, i) in msg.content.relations" :key="i">
|
|
<span class="rel-subject">{{ rel.e1 }}</span>
|
|
<span class="rel-predicate">— {{ rel.r }} →</span>
|
|
<span class="rel-object">{{ rel.e2 }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="!msg.content.entities?.length && !msg.content.relations?.length" class="empty-state">
|
|
未提取到有效医学实体或关系。
|
|
</div>
|
|
</div>
|
|
<div v-else class="bubble assistant-text">
|
|
{{ msg.content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 输入区域（Qwen 风格） -->
|
|
<div class="input-area">
|
|
<textarea
|
|
v-model="inputText"
|
|
placeholder="有什么可以帮助您？"
|
|
class="input-box"
|
|
@keyup.enter.exact.prevent="sendMessage"
|
|
rows="1"
|
|
></textarea>
|
|
|
|
|
|
|
|
<div class="icon-group">
|
|
<img
|
|
|
|
src="../assets/upload.png"
|
|
alt="用户头像"
|
|
class="avatar"
|
|
style="margin-left: 10px;cursor:pointer;border-radius: 50%;width: 30px;box-shadow: rgb(0 0 0 / 18%) 0px 2px 8px; "
|
|
>
|
|
<div style="display: flex;align-items: center;">
|
|
<img
|
|
|
|
src="../assets/放大.png"
|
|
alt="用户头像"
|
|
class="avatar"
|
|
style="margin-left: 10px;cursor:pointer;width: 15px;margin-right: 26px "
|
|
>
|
|
<button class="send-btn" @click="sendMessage" title="发送">
|
|
发送
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import Menu from "@/components/Menu.vue";
|
|
import axios from "axios";
|
|
import {analyze, getAIStatus} from "@/api/builder";
|
|
import {qaAnalyze} from "@/api/qa";
|
|
|
|
export default {
|
|
name: 'QwenChat',
|
|
components: {Menu},
|
|
data() {
|
|
return {
|
|
inputText: '',
|
|
messages: [
|
|
{ role: 'assistant', content: '你好！我是图谱构建助手，有什么可以帮你的吗？',isKG:false }
|
|
],
|
|
status:"wait"
|
|
};
|
|
},
|
|
methods: {
|
|
pollAIStatus() {
|
|
if (this.status !== "wait") return; // 如果已结束，不再继续
|
|
try {
|
|
const data = getAIStatus();
|
|
if (data.status === "ok") {
|
|
this.status = "ok";
|
|
} else if (data.status === "error") {
|
|
this.status = "error";
|
|
} else {
|
|
setTimeout(() => this.pollAIStatus(), 3000);
|
|
}
|
|
} catch (error) {
|
|
console.error("轮询出错:", error);
|
|
this.status = "error";
|
|
alert("查询状态失败，请重试");
|
|
}
|
|
},
|
|
sendMessage() {
|
|
const text = this.inputText.trim();
|
|
if (!text) return;
|
|
let data={
|
|
"text":text
|
|
}
|
|
// this.pollAIStatus()
|
|
// 添加用户消息
|
|
let message={ role: 'user', content: text }
|
|
this.messages.push(message);
|
|
this.inputText = '';
|
|
analyze(data).then(res=>{
|
|
console.log(res)
|
|
let message={ role: 'assistant',
|
|
content: res,entities:res.entities,relations:res.relations,isKG:true }
|
|
this.messages.push(message);
|
|
})
|
|
// qaAnalyze(data).then(res=>{
|
|
//
|
|
// })
|
|
},
|
|
insertPrefix(prefix) {
|
|
this.inputText += prefix;
|
|
this.$nextTick(() => {
|
|
// 自动聚焦到 textarea 末尾（简单处理）
|
|
const el = this.$el.querySelector('.input-box');
|
|
el.focus();
|
|
});
|
|
},
|
|
scrollToBottom() {
|
|
this.$nextTick(() => {
|
|
const container = this.$refs.messagesContainer;
|
|
if (container) {
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
});
|
|
},
|
|
saveMessage(message) {
|
|
const messages = JSON.parse(localStorage.getItem('messages')) || [];
|
|
messages.push(message); // 将新消息添加到消息数组中
|
|
localStorage.setItem('messages', JSON.stringify(messages));
|
|
},
|
|
loadMessages() {
|
|
const savedMessages = JSON.parse(localStorage.getItem('messages')) || [];
|
|
this.messages = savedMessages; // 加载之前存储的消息
|
|
},
|
|
handleBeforeUnload() {
|
|
localStorage.removeItem('messages');
|
|
// 页面刷新或关闭前，保存所有消息
|
|
console.log("页面刷新或关闭前，保存消息...");
|
|
this.messages.forEach((message) => {
|
|
this.saveMessage(message);
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
messages() {
|
|
this.scrollToBottom();
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.loadMessages();
|
|
this.scrollToBottom();
|
|
window.addEventListener('beforeunload', this.handleBeforeUnload);
|
|
},
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.qwen-chat {
|
|
flex: 1; overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
margin: 0 auto;
|
|
border: 1px solid #e0e0e0;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: #F3F3F3;
|
|
}
|
|
|
|
/* === 消息区域 === */
|
|
.chat-messages {
|
|
flex: 1;
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.message {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.message.user {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.message.assistant {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.bubble {
|
|
padding: 10px 14px;
|
|
border-radius: 18px;
|
|
max-width: 75%;
|
|
word-break: break-word;
|
|
line-height: 1.5;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.message.user .bubble {
|
|
background-color: #155DFF;
|
|
color: white;
|
|
}
|
|
|
|
.message.assistant .bubble {
|
|
background-color: #fff;
|
|
color: #333;
|
|
}
|
|
|
|
/* === 输入区域 === */
|
|
.input-area {
|
|
padding: 16px;
|
|
background: white;
|
|
border-top-left-radius: 24px;
|
|
border-top-right-radius: 24px;
|
|
box-shadow: 2px -1px 14px 0px rgb(159 160 161 / 22%);
|
|
}
|
|
.input-box::placeholder {
|
|
color: #AFAFAF; /* 设置字体颜色为红色 */
|
|
font-weight: 500;
|
|
}
|
|
.input-box {
|
|
height: 75px;
|
|
width: 100%;
|
|
padding: 12px 16px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
resize: none;
|
|
outline: none;
|
|
transition: border-color 0.2s ease;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input-box:focus {
|
|
border-color: #007bff;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin: 12px 0;
|
|
white-space: nowrap;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.btn {
|
|
display: flex; /* 使用flex布局 */
|
|
justify-content: center; /* 水平居中 */
|
|
align-items: center; /* 垂直居中 */
|
|
width: 20px; /* 设置按钮的宽度为20px */
|
|
height: 20px; /* 设置按钮的高度为20px */
|
|
border-radius: 50%; /* 圆形按钮 */
|
|
background-color: white; /* 背景色为白色 */
|
|
font-size: 18px; /* 设置加号的字体大小 */
|
|
line-height: 20px; /* 设置行高，确保加号垂直居中 */
|
|
color: #333; /* 加号的颜色 */
|
|
font-weight: bold; /* 加号字体加粗 */
|
|
cursor: pointer; /* 鼠标悬停时显示为点击效果 */
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #e9e9e9;
|
|
}
|
|
|
|
.btn span {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.more-btn {
|
|
background: transparent;
|
|
border: 1px dashed #ccc;
|
|
color: #666;
|
|
}
|
|
|
|
.icon-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.icon,
|
|
.send-btn span {
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
color: #999;
|
|
}
|
|
|
|
.icon:hover,
|
|
.send-btn:hover span {
|
|
color: #333;
|
|
}
|
|
|
|
.send-btn {
|
|
background: #B9CDFF;
|
|
border: none;
|
|
width: 60px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.send-btn:hover {
|
|
background: #155DFF;
|
|
}
|
|
/* === 自定义助手 KG 卡片 === */
|
|
.kg-card {
|
|
background: white;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
width: 100%;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.kg-card h4 {
|
|
margin: 0 0 16px 0;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
color: #1a73e8;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.kg-section {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.kg-section h5 {
|
|
margin: 0 0 8px 0;
|
|
color: #555;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* 实体标签 */
|
|
.entity-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.entity-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
background: #f0f8ff;
|
|
color: #1e88e5;
|
|
border: 1px solid #bbdefb;
|
|
}
|
|
|
|
.entity-tag small {
|
|
margin-left: 6px;
|
|
opacity: 0.8;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* 按类型着色（可扩展） */
|
|
.tag-疾病 { background: #ffebee; color: #c62828; border-color: #ffcdd2; }
|
|
.tag-症状 { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
|
|
.tag-检查 { background: #fff8e1; color: #ff8f00; border-color: #ffecb3; }
|
|
.tag-药物 { background: #f3e5f5; color: #7b1fa2; border-color: #ce93d8; }
|
|
|
|
/* 关系列表 */
|
|
.relation-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.relation-list li {
|
|
padding: 6px 0;
|
|
border-bottom: 1px dashed #eee;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.relation-list li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.rel-subject { font-weight: 600; color: #1a237e; }
|
|
.rel-predicate { color: #d32f2f; font-weight: 500; }
|
|
.rel-object { font-weight: 600; color: #1b5e20; }
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
color: #999;
|
|
font-style: italic;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
/* 普通助手文本（非 KG） */
|
|
.assistant-text {
|
|
background-color: #e9ecef;
|
|
color: #333;
|
|
}
|
|
</style>
|