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 class="bubble">{{ msg.content }}</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";

export default {
  name: 'QwenChat',
  components: {Menu},
  data() {
    return {
      inputText: '',
      messages: [
        { role: 'assistant', content: '你好！我是 Qwen，有什么可以帮你的吗？' }
      ]
    };
  },
  methods: {
    sendMessage() {
      const text = this.inputText.trim();
      if (!text) return;

      // 添加用户消息
      this.messages.push({ role: 'user', content: text });
      this.inputText = '';

      // 模拟 AI 回复（可替换为真实 API）
      setTimeout(() => {
        this.messages.push({
          role: 'assistant',
          content: `你刚才说：“${text}” —— 这是一个模拟回复。`
        });
      }, 600);
    },
    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;
  max-width: 800px;
  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;
}

.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;
}
</style>