用vue3和antd来实现

好的，首先需要安装 Vue3 和 Ant Design Vue：

npm install vue@next ant-design-vue@2.2.7

接着在 main.js 中引入：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App)
  .use(Antd)
  .mount('#app');

然后在 App.vue 中使用 Ant Design Vue 提供的组件，比如 Button、Input、Card 等等，具体可以参考 Ant Design Vue 的文档。

<template>
  <div class="container">
    <a-card :title="title">
      <a-input v-model="input" placeholder="请输入内容" @pressEnter="handlePressEnter" />
      <a-button type="primary" @click="handleClick">发送</a-button>
      <ul class="chat-list">
        <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
      </ul>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'ChitGPT',
      input: '',
      messages: [],
    };
  },
  methods: {
    handleClick() {
      if (this.input.trim() === '') return;
      this.messages.push(`我: ${this.input}`);
      this.input = '';
    },
    handlePressEnter() {
      this.handleClick();
    },
  },
};
</script>

这样就可以实现一个简单的聊天界面了。当然，还需要使用 AI 模型来处理用户输入并生成回复，这部分需要另外实现。