peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(styles): 调整聊天界面UI布局

Browse Source
This commit is contained in:
ronger 2024-05-28 17:42:55 +08:00
parent 8cf2e0c7b3
commit e800618546
1 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
pages/chats/_account.vue
View File

@ -1,24 +1,8 @@
<template> <template>
<client-only> <client-only>
<el-row class="wrapper" v-if="user"> <el-row class="wrapper" v-if="user">
<el-col> <el-col style="padding: 0 .5rem 1rem 0;max-height: 38rem;overflow-y: auto;" id="messagesContent">
<div id="contentEditor"></div> <el-col v-for="message in messages" :key="message.dataId" style="max-height: 38rem;">
</el-col>
<el-col style="margin-top: 1rem;padding-right:3rem;text-align: right;">
<el-button type="primary" :loading="loading" @click="send" plain>发送</el-button>
</el-col>
<el-col style="margin-top: 2rem;" id="messagesContent">
<el-col v-if="message">
<el-col :span="2">
<el-avatar :src="to.avatarUrl"></el-avatar>
</el-col>
<el-col :span="22" style="text-align: left;">
<div class="to-message">
<div v-html="message"></div>
</div>
</el-col>
</el-col>
<el-col v-for="message in messages" :key="message.dataId">
<el-col v-if="message.from === user.account"> <el-col v-if="message.from === user.account">
<el-col :span="22" style="text-align: right;"> <el-col :span="22" style="text-align: right;">
<div class="from-message"> <div class="from-message">
@ -40,6 +24,24 @@
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-col>
<el-col v-if="message">
<el-col :span="2">
<el-avatar :src="to.avatarUrl"></el-avatar>
</el-col>
<el-col :span="22" style="text-align: left;">
<div class="to-message">
<div v-html="message"></div>
</div>
</el-col>
</el-col>
</el-col>
<el-col style="position: fixed;bottom: 5.5rem;max-width: 71rem;left: 30rem;">
<el-col :span="20">
<div id="contentEditor"></div>
</el-col>
<el-col :span="4" style="position: fixed;bottom: 6rem;right: 15.5rem;">
<el-button type="primary" :loading="loading" @click="send" plain>发送</el-button>
</el-col>
</el-col> </el-col>
</el-row> </el-row>
</client-only> </client-only>
@ -127,7 +129,7 @@ export default {
}] }]
return new Vue.Vditor(data.id, { return new Vue.Vditor(data.id, {
toolbar, toolbar,
mode: 'sv', mode: 'ir',
tab: '\t', tab: '\t',
cdn: apiConfig.VDITOR, cdn: apiConfig.VDITOR,
cache: { cache: {
@ -192,7 +194,7 @@ export default {
} }
_ts.messages.push(message); _ts.messages.push(message);
_ts.messages.sort((a, b) => { _ts.messages.sort((a, b) => {
return b.dataId - a.dataId; return a.dataId - b.dataId;
}); });
_ts.contentEditor.setValue('') _ts.contentEditor.setValue('')
_ts.$axios.$post('/api/openai/new-chat', _ts.messages).then(async res => { _ts.$axios.$post('/api/openai/new-chat', _ts.messages).then(async res => {
@ -208,7 +210,7 @@ export default {
content: html content: html
}); });
_ts.messages.sort((a, b) => { _ts.messages.sort((a, b) => {
return b.dataId - a.dataId; return a.dataId - b.dataId;
}); });
_ts.message = ''; _ts.message = '';
}); });
@ -294,7 +296,7 @@ export default {
_ts.contentEditor = _ts._initEditor({ _ts.contentEditor = _ts._initEditor({
id: 'contentEditor', id: 'contentEditor',
mode: 'both', mode: 'both',
height: 200, height: 160,
placeholder: '', //this.$t('inputContent', this.$store.state.locale) placeholder: '', //this.$t('inputContent', this.$store.state.locale)
resize: false, resize: false,
value: '' value: ''
@ -324,8 +326,8 @@ export default {
background-color: skyblue; background-color: skyblue;
border-bottom-color: skyblue; border-bottom-color: skyblue;
/*为了给after伪元素自动继承*/ /*为了给after伪元素自动继承*/
color: #fff; color: #000;
font-size: 12px; font-size: 14px;
line-height: 18px; line-height: 18px;
padding: 5px 12px 5px 12px; padding: 5px 12px 5px 12px;
box-sizing: border-box; box-sizing: border-box;
@ -342,8 +344,8 @@ export default {
background-color: skyblue; background-color: skyblue;
border-bottom-color: skyblue; border-bottom-color: skyblue;
/*为了给after伪元素自动继承*/ /*为了给after伪元素自动继承*/
color: #fff; color: #000;
font-size: 12px; font-size: 14px;
line-height: 18px; line-height: 18px;
padding: 5px 12px 5px 12px; padding: 5px 12px 5px 12px;
box-sizing: border-box; box-sizing: border-box;