<script setup>

const message = "你好，欢迎来和我聊天！"; // 定义一个欢迎信息

function generateResponse(input) {
// 这里可以编写生成 AI 回复的代码
return `您输入了: ${input}`; // 目前只是简单地回复用户输入内容
}
</script>

<template>
<div>
<p>{{ message }}</p>
<input v-model="inputText" @keyup.enter="sendMessage" placeholder="请输入消息" />
<div v-for="message in messageList">
<p>{{ message.text }}</p>
<hr />
</div>
</div>
</template>

<script>
export default {
data() {
return {
inputText: "",
messageList: []
};
},
methods: {
sendMessage() {
const input = this.inputText;
this.messageList.push({ text: `我: ${input}` });
this.inputText = "";
const response = generateResponse(input);
this.messageList.push({ text: `AI: ${response}` });
}
}
};
</script>

<style>
hr {
border: none;
height: 1px;
background-color: #ccc;
}
</style>