mirror of
https://gitee.com/blackfox/geekai.git
synced 2024-12-03 12:48:31 +08:00
the new skin is ready
This commit is contained in:
RockYang
parent
5a6f070f92
commit
df7d4d5b94
@ -57,13 +57,13 @@ func (s *Server) ChatHandle(c *gin.Context) {
|
||||
}
|
||||
|
||||
logger.Info("Receive a message: ", string(message))
|
||||
replyMessage(client, "当前 TOKEN 无效，请使用合法的 TOKEN 登录！", false)
|
||||
replyMessage(client, "", true)
|
||||
//replyMessage(client, "当前 TOKEN 无效，请使用合法的 TOKEN 登录！", false)
|
||||
//replyMessage(client, "", true)
|
||||
// TODO: 当前只保持当前会话的上下文，部保存用户的所有的聊天历史记录，后期要考虑保存所有的历史记录
|
||||
//err = s.sendMessage(session, chatRole, string(message), client, false)
|
||||
//if err != nil {
|
||||
// logger.Error(err)
|
||||
//}
|
||||
err = s.sendMessage(session, chatRole, string(message), client, false)
|
||||
if err != nil {
|
||||
logger.Error(err)
|
||||
}
|
||||
}
|
||||
}()
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ export default defineComponent({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
<style lang="stylus" scoped>
|
||||
.chat-line-right {
|
||||
justify-content: flex-end;
|
||||
|
||||
@ -40,7 +40,7 @@ export default defineComponent({
|
||||
margin-left 5px;
|
||||
|
||||
img {
|
||||
border-radius 5px;
|
||||
border-radius 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,9 +52,9 @@ export default defineComponent({
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #223A34;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-left: 10px solid #223A34;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 10px;
|
||||
|
||||
@ -33,58 +33,63 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.chat-line-left {
|
||||
justify-content: flex-start;
|
||||
.body-plus {
|
||||
.chat-line-left {
|
||||
justify-content: flex-start;
|
||||
|
||||
.chat-icon {
|
||||
margin-right 5px;
|
||||
.chat-icon {
|
||||
margin-right 5px;
|
||||
|
||||
img {
|
||||
border-radius 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 0 0 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 5px solid #404042;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 13px;
|
||||
img {
|
||||
border-radius 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height 20px;
|
||||
word-break break-word;
|
||||
padding: 12px 15px;
|
||||
color var(--content-color)
|
||||
background-color: #404042;
|
||||
font-size: var(--content-font-size);
|
||||
border-radius: 5px;
|
||||
.chat-item {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0 0 0 5px;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
line-height 1.5
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-right: 10px solid #404042;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
.content {
|
||||
min-height 20px;
|
||||
word-break break-word;
|
||||
padding: 12px 15px;
|
||||
color var(--content-color)
|
||||
background-color: #404042;
|
||||
font-size: var(--content-font-size);
|
||||
border-radius: 5px;
|
||||
|
||||
p:first-child {
|
||||
margin-top 0
|
||||
}
|
||||
p {
|
||||
line-height 1.5
|
||||
|
||||
code {
|
||||
color #f1f1f1
|
||||
background-color #202121
|
||||
padding 0 3px;
|
||||
border-radius 5px;
|
||||
}
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top 0
|
||||
}
|
||||
|
||||
p > code {
|
||||
color #cc0000
|
||||
background-color #f1f1f1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ import ElementPlus from "element-plus"
|
||||
import "element-plus/dist/index.css"
|
||||
import App from './App.vue'
|
||||
import ChatPlus from "@/views/ChatPlus.vue";
|
||||
import Chat from "@/views/Chat.vue";
|
||||
import NotFound from './views/404.vue'
|
||||
import TestPage from './views/Test.vue'
|
||||
import './utils/prototype'
|
||||
@ -11,7 +12,12 @@ import './utils/prototype'
|
||||
const routes = [
|
||||
{
|
||||
name: 'chat-plus', path: '/', component: ChatPlus, meta: {
|
||||
title: 'ChatGPT-Plus'
|
||||
title: 'ChatGPT-Plus for PC'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'chat-mobile', path: '/mobile', component: Chat, meta: {
|
||||
title: 'ChatGPT-Plus for Mobile'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="body">
|
||||
<div class="body-plus">
|
||||
<el-row>
|
||||
<div class="chat-head">
|
||||
<el-row class="row-center">
|
||||
@ -31,8 +31,13 @@
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="left-box">
|
||||
<div class="grid-content">
|
||||
|
||||
<div class="content">
|
||||
<el-row v-for="item in chatRoles" :key="item.key">
|
||||
<div :class="item.key === this.role?'chat-role-item active':'chat-role-item'" @click="changeRole(item)">
|
||||
<el-image :src="item.icon" class="avatar"/>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box" :style="{height: mainWinHeight+'px'}">
|
||||
@ -236,7 +241,7 @@ export default defineComponent({
|
||||
}
|
||||
// 将聊天框的滚动条滑动到最底部
|
||||
nextTick(() => {
|
||||
document.getElementById('container').scrollTo(0, document.getElementById('container').scrollHeight)
|
||||
document.getElementById('chat-box').scrollTo(0, document.getElementById('chat-box').scrollHeight)
|
||||
})
|
||||
};
|
||||
}
|
||||
@ -286,17 +291,13 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
// 更换角色
|
||||
changeRole: function () {
|
||||
changeRole: function (item) {
|
||||
this.loading = true
|
||||
this.role = item.key;
|
||||
this.replyIcon = item.icon;
|
||||
// 清空对话列表
|
||||
this.chatData = [];
|
||||
this.connect();
|
||||
for (const key in this.chatRoles) {
|
||||
if (this.chatRoles[key].key === this.role) {
|
||||
this.replyIcon = this.chatRoles[key].icon;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 从后端获取聊天历史记录
|
||||
@ -439,7 +440,7 @@ export default defineComponent({
|
||||
#app {
|
||||
height: 100%;
|
||||
|
||||
.body {
|
||||
.body-plus {
|
||||
height 100%;
|
||||
|
||||
.chat-head {
|
||||
@ -496,6 +497,39 @@ export default defineComponent({
|
||||
background-color: #28292A
|
||||
border-top: 1px solid #2F3032
|
||||
border-right: 1px solid #2F3032
|
||||
|
||||
.content {
|
||||
display flex
|
||||
flex-wrap: wrap;
|
||||
flex-direction column
|
||||
width 100%
|
||||
|
||||
.chat-role-item {
|
||||
display flex
|
||||
width 100%
|
||||
justify-content flex-start
|
||||
padding 10px 18px
|
||||
border-bottom: 1px solid #3c3c3c
|
||||
cursor pointer
|
||||
|
||||
|
||||
.avatar {
|
||||
width 36px;
|
||||
height 36px;
|
||||
border-radius 50%;
|
||||
}
|
||||
|
||||
span {
|
||||
color #c1c1c1
|
||||
padding 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-role-item.active {
|
||||
background-color: #363535;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-box {
|
||||
@ -506,6 +540,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#container {
|
||||
overflow hidden;
|
||||
width 100%;
|
||||
@ -560,7 +595,7 @@ export default defineComponent({
|
||||
.input-box {
|
||||
background-color #232425
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.input-container {
|
||||
@ -584,27 +619,6 @@ export default defineComponent({
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
margin-left 10px;
|
||||
|
||||
.el-row {
|
||||
flex-wrap nowrap
|
||||
//width 106px;
|
||||
align-items center
|
||||
}
|
||||
|
||||
.send {
|
||||
width 60px;
|
||||
height 40px;
|
||||
background-color: var(--el-color-success)
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
background-color: var(--el-button-disabled-bg-color);
|
||||
border-color: var(--el-button-disabled-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -617,32 +631,32 @@ export default defineComponent({
|
||||
justify-content center
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-message-box {
|
||||
width 90%;
|
||||
max-width 420px;
|
||||
}
|
||||
.el-message-box {
|
||||
width 90%;
|
||||
max-width 420px;
|
||||
}
|
||||
|
||||
.el-message {
|
||||
min-width: 100px;
|
||||
max-width 600px;
|
||||
}
|
||||
.el-message {
|
||||
min-width: 100px;
|
||||
max-width 600px;
|
||||
}
|
||||
|
||||
.token-dialog {
|
||||
.el-dialog {
|
||||
--el-dialog-width 90%;
|
||||
max-width 400px;
|
||||
.token-dialog {
|
||||
.el-dialog {
|
||||
--el-dialog-width 90%;
|
||||
max-width 400px;
|
||||
|
||||
.el-dialog__body {
|
||||
padding 10px 10px 20px 10px;
|
||||
}
|
||||
.el-dialog__body {
|
||||
padding 10px 10px 20px 10px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
flex-wrap nowrap
|
||||
.el-row {
|
||||
flex-wrap nowrap
|
||||
|
||||
button {
|
||||
margin-left 5px;
|
||||
button {
|
||||
margin-left 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user