141 lines
3.1 KiB
Vue
141 lines
3.1 KiB
Vue
<template>
|
|
<section class="chat">
|
|
<el-row align="middle">
|
|
<div class="modelInfo">
|
|
<img :src="config.model.avatar" alt=""/>
|
|
<div class="fill mar-l8">
|
|
<b v-text="config.model.name"/>
|
|
<div class="desc" v-text="config.model.desc"/>
|
|
</div>
|
|
</div>
|
|
<el-row justify="end" class="fill mar-l8 gap-8">
|
|
<!--聊天操作栏-->
|
|
<div class="optIcon clear"/>
|
|
<div class="optIcon setting" @click="$emit('setting')"/>
|
|
</el-row>
|
|
</el-row>
|
|
<thinking-bar v-show="loading"/>
|
|
<chat-content class="fill"/>
|
|
<chat-input/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import ChatContent from "../components/chatContent";
|
|
import ChatInput from "../components/chatInput";
|
|
import ThinkingBar from "../components/thinkingBar";
|
|
|
|
export default {
|
|
name: "chat",
|
|
components: {ChatContent, ChatInput, ThinkingBar},
|
|
props: {
|
|
config: {default: () => ({})}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
if (window.innerWidth <= 700) {
|
|
this.$nextTick(() => {
|
|
document.querySelectorAll('.chat-content')[0].style.height = '93%';
|
|
this.buttonStatus = false
|
|
const textareaMsg = document.getElementById("textareaMsg");
|
|
textareaMsg.style.marginLeft = "0px";
|
|
this.personInfoSpan = [14, 0, 10];
|
|
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
|
|
if (isMobile) {
|
|
document.querySelectorAll('.chatInputs')[0].style.margin = '0%';
|
|
} else {
|
|
document.querySelectorAll('.chatInputs')[0].style.margin = '3%';
|
|
}
|
|
});
|
|
} else {
|
|
this.$nextTick(() => {
|
|
document.querySelectorAll('.chat-content')[0].style.height = '88%';
|
|
this.buttonStatus = true
|
|
this.personInfoSpan = [1, 17, 6];
|
|
});
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
window.addEventListener('resize', this.handleResize)
|
|
},
|
|
unmounted() {
|
|
window.removeEventListener('resize', this.handleResize)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chat {
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.modelInfo {
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.4;
|
|
|
|
& > img {
|
|
border: 2px solid #fff;
|
|
border-radius: 50%;
|
|
padding: 4px;
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
b {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.desc {
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.optIcon {
|
|
box-sizing: border-box;
|
|
height: 40px;
|
|
min-width: 40px;
|
|
background-size: 24px 24px;
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
cursor: pointer;
|
|
opacity: .6;
|
|
padding-top: 24px;
|
|
|
|
&:after {
|
|
font-size: 12px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.clear {
|
|
background-image: url("../assets/clear.svg");
|
|
|
|
&:after {
|
|
content: "清空历史";
|
|
}
|
|
}
|
|
|
|
&.setting {
|
|
background-image: url("../assets/setting.svg");
|
|
|
|
&:after {
|
|
content: "设置";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|