接口可参照CHATGPT.NET自行实现
<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import { MoreFilled ,CircleCheck} from "@element-plus/icons-vue";
import { ref,shallowReactive,shallowRef } from "vue";
import { chat } from "./api/chat";
import { ElMessage } from 'element-plus'
const textarea =ref("");
const buttonText =ref("Send");
const sendDisabled =shallowRef(false);
const sendChat = (data) => {
let prompt = textarea.value;
if(prompt!=''){
textarea.value='';
ElMessage({
message: '已发送请等待.',
type: 'success',
})
sendDisabled.value = true;
activities.splice(0,0,
{
content: "Robot: 正在努力思考。。。,受网络影响可能会需要一会",
timestamp: new Date(),
userType:'1',
size: "large",
type: "primary",
icon: MoreFilled
}, {
content: `You: ${prompt}`,
timestamp: new Date(),
userType:'2',
size: "large",
color: "#0bbd87",
icon: CircleCheck,
}
);
console.log('数组', activities);
chat({q:prompt}).then(res=>{
if(res.status){
textarea.value = '';
let content = res.response.replace(/\\n/g, '<br/>');
console.log(res.response);
activities[0] = {
content: content,
timestamp: new Date(),
size: "large",
type: "primary",
icon: CircleCheck,
};
}else{
ElMessage.error(`Oops, error ${res.response}.`)
}
sendDisabled.value = false;
}).catch(res=>{
sendDisabled.value = false;
activities[0] = {
content: '回答已超时，可以尝试更详细的对话',
timestamp: new Date(),
size: "large",
type: "primary",
icon: CircleCheck,
};
})
}
}
let activities = shallowReactive([
{
content: "Robot: 你可以开始跟我对话了",
timestamp: new Date(),
size: "large",
userType:'1',
type: "primary",
icon: CircleCheck,
},
]);
</script>
<template>
<div class="common-layout">
<el-container>
<el-header height="60px"
><div
class="mainH" style=" width: 100%;text-align: center; background-color: #409eff; color: #fff;font-size: 2rem; margin: 0 auto;"
>
<el-icon><IceTea /></el-icon>
ChatGpt在线体验
</div></el-header
>
<el-main
><div class=".mainContent" style="height: 80vh; overflow: hidden; ">
<div style="overflow-y: scroll; height: calc(80vh - 260px);">
<el-timeline style="font-size:large">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
<el-icon v-if="activity.userType==2"><User /></el-icon>
<el-icon v-if="activity.userType==1"><Bell /></el-icon>
<span v-html="activity.content"></span>
</el-timeline-item>
</el-timeline>
</div>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>输入对话</span>
</div>
</template>
<el-input
v-model="textarea"
:rows="4"
type="textarea"
placeholder="Please input"
/>
<el-button
type="primary"
:disabled="sendDisabled"
@click="sendChat"
style="width: 100%; height: 50px; margin-top: 10px"
>Send</el-button
>
</el-card>
</div></el-main
>
<el-footer height="5vh"><el-icon><Sunny /></el-icon>体验版(网络问题 回复时间会长，耐心等待) power by zhoufc</el-footer>
</el-container>
</div>
<!-- <header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header> -->
<!-- <RouterView /> -->
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
/* @media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
} */
</style>
