KGPython/vue/src/system/GraphBuilder.vue

<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 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">
              <h4>🔬 病历结构化分析结果</h4>

              <div v-if="msg.content.entities?.length" class="kg-section">
                <h5>识别出的实体</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>识别出的关系</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="action-buttons">
          <button class="btn" @click="insertPrefix('深度思考：')">
            <span>☰</span> 深度思考
          </button>
          <button class="btn" @click="insertPrefix('深度研究：')">
            <span>🔍</span> 深度研究
          </button>
          <button class="btn" @click="insertPrefix('```代码\n')">
            <span><></span> 代码
          </button>
          <button class="btn" @click="insertPrefix('生成一张图片：')">
            <span>🖼️</span> 图像
          </button>
          <button class="btn" @click="insertPrefix('翻译成英文：')">
            <span>🌐</span> 翻译
          </button>
          <button class="btn more-btn">...</button>
        </div>

        <div class="icon-group">
          <span class="icon" title="切换语言">🌍</span>
          <span class="icon" title="编辑模式">✏️</span>
          <button class="send-btn" @click="sendMessage" title="发送">
            <span>📤</span>
          </button>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Menu from "@/components/Menu.vue";
import axios from "axios";
import {analyze, getAIStatus} from "@/api/builder";

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()
      // 添加用户消息
      this.messages.push({ role: 'user', content: text });
      this.inputText = '';
      analyze(data).then(res=>{
        console.log(res)
        this.messages.push({ role: 'assistant',
          content: res,entities:res.entities,relations:res.relations,isKG:true });
      })
    },
    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;
        }
      });
    }
  },
  watch: {
    messages() {
      this.scrollToBottom();
    }
  },
  mounted() {
    this.scrollToBottom();
  }
};
</script>

<style scoped>
.qwen-chat {
  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;
}

/* === 消息区域 === */
.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  background-color: #f9f9f9;
  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: 14px;
  text-align: left;
}

.message.user .bubble {
  background-color: #007bff;
  color: white;
  border-bottom-right-radius: 4px;
}

.message.assistant .bubble {
  background-color: #e9ecef;
  color: #333;
  border-bottom-left-radius: 4px;
}

/* === 输入区域 === */
.input-area {
  padding: 16px;
  background: white;
  border-top: 1px solid #eee;
}

.input-box {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d9d9d9;
  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;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 4px;
}

.btn {
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.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: flex-end;
  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: #9b68ff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.send-btn:hover {
  background: #8a53e0;
}
/* === 自定义助手 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;
  border-bottom-left-radius: 4px;
}
</style>