<template>
  <div id="app">
    <div class="chat-container">
      <div class="chat-messages">
        <div v-for="(message, index) in messages" :key="index"
          :class="{ 'user-message': message.sender === 'user', 'ai-message': message.sender === 'ai' }">
          <div v-if="message.sender === 'user'">{{ message.content }}</div>
          <div v-else v-html="renderMarkdown(message.content)"></div>
        </div>
      </div>
      <div class="input-container">
        <input v-model="inputMessage" placeholder="输入你的问题" @keyup.enter="sendMessage">
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import MarkdownIt from 'markdown-it';

const md = new MarkdownIt();
const renderMarkdown = (content) => md.render(content);

const messages = ref([]);
const inputMessage = ref('');

const sendMessage = async () => {
  if (inputMessage.value.trim() === '') return;
  messages.value.push({ sender: 'user', content: inputMessage.value });
  inputMessage.value = '';
  const msgData = {
    "model": "qwen-plus",
    "messages": [
      {
        "role": "system",
        "content": messages.value[messages.value.length - 1].content
      }
    ],
    "stream": false
  };
  try {
    const response = await axios({
      method: "POST",
      url: "/api/compatible-mode/v1/chat/completions",
      headers: {
        "Authorization": "Bearer {你的key}",
        "Content-type": "application/json",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Method": "POST,GET"
      },
      data: msgData
    });
    messages.value.push({ sender: 'ai', content: response.data.choices[0].message.content });
  } catch (error) {
    console.error('请求出错:', error);
    messages.value.push({ sender: 'ai', content: '请求出错，请稍后再试。' });
  }
};
</script>

<style scoped>
.chat-container {
  width: 800px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}
.chat-messages {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.user-message {
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.ai-message {
  text-align: left;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
}
.input-container {
  display: flex;
}
.input-container input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input-container button {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  background-color: #2196f3;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
</style>

https://www.doubao.com/thread/wde257350d09c7a1b