You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

210 lines
4.1 KiB

<script setup lang="ts">
import { useChatStore } from "@/stores/chat";
const store = useChatStore();
</script>
<template>
<div
class="chatbox-main"
v-if="store.targetChatId"
>
<!--聊天顶部区-->
<el-header class="chat-header">
<div class="header-title">
<span v-if="store.targetUserInfo.nickname">{{
store.targetUserInfo.nickname
}}</span>
<span v-else-if="store.targetGroupInfo.name">{{
store.targetGroupInfo.name
}}</span>
</div>
</el-header>
<!--聊天主体区-->
<el-main class="msg-main">
<el-scrollbar ref="store.scrollbarRef">
<div ref="store.innerRef">
<ChatMessage />
</div>
</el-scrollbar>
</el-main>
<!--聊天输入区和发送按钮等-->
<el-footer class="msg-footer">
<!--聊天输入选项-->
<div class="input-option">
<el-icon
:size="20"
class="input-option-icon"
>
<Picture />
</el-icon>
<el-icon
:size="20"
class="input-option-icon"
>
<Link />
</el-icon>
<el-icon
:size="20"
class="input-option-icon"
>
<Delete />
</el-icon>
</div>
<!--聊天输入区-->
<div class="input-textarea">
<el-input
type="textarea"
maxlength="1000"
resize="none"
class="textarea"
@keyup.enter.exact="store.sendMessage"
v-model="store.message"
/>
</div>
<!--聊天发送按钮-->
<el-tooltip
placement="top"
content="按enter键发送,按ctrl+enter键换行"
>
<el-icon
@click="store.sendMessage"
:size="22"
class="input-button"
>
<Promotion />
</el-icon>
</el-tooltip>
</el-footer>
</div>
<!-- <div class="no-message-container" v-else>
<el-icon :size="180" color="#0078d7">
<ChatDotSquare />
</el-icon>
<p>欢迎使用GodoOS</p>
</div> -->
</template>
<style scoped>
.chatbox-main {
width: 100%;
height: 100%;
}
.chat-header {
width: 100%;
/* 占据整个宽度 */
height: 50px;
line-height: 50px;
padding: 0;
-webkit-app-region: drag;
}
header-title {
font-size: 20px;
text-align: left;
margin-left: 15px;
}
.msg-main {
width: 100%;
/* 占据整个宽度 */
height: calc(70% - 50px);
padding: 0;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-right-width: 0;
border-color: #d6d6d6;
border-style: solid;
}
.msg-footer {
width: 100%;
/* 占据整个宽度 */
height: 30%;
padding: 0;
}
.input-option {
height: 20px;
padding: 5px;
}
.input-option-icon {
color: #494949;
margin-left: 20px;
margin-top: 5px;
cursor: pointer;
}
.input-textarea {
height: calc(100% - 50px);
width: calc(100% - 20px);
/* 减去左右边距 */
margin: 10px;
}
.textarea {
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
--el-input-border-radius: 0;
--el-input-border-color: transparent;
--el-input-hover-border-color: transparent;
--el-input-clear-hover-color: transparent;
--el-input-focus-border-color: transparent;
}
.input-button {
position: absolute;
bottom: 12px;
right: 12px;
width: 30px;
/* 缩小宽度 */
height: 30px;
/* 减小高度 */
border-radius: 50%;
/* 较小的圆角 */
background-color: #e8f0fe;
/* 浅蓝色,符合Win11的轻量风格 */
color: #0078d4;
/* 使用Win11的强调色作为文字颜色 */
font-weight: bold;
border: 1px solid #b3d4fc;
/* 添加边框,保持简洁风格 */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
/* 轻微阴影 */
transition: all 0.2s ease;
/* 快速过渡效果 */
}
.input-button:hover {
background-color: #d1e4ff;
/* 悬浮时颜色略深,保持浅色调 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* 稍微增强阴影 */
}
.input-button:active {
background-color: #b3d4fc;
/* 按下时颜色更深,但依然保持清新 */
box-shadow: 0 1px 2px rgba(0, 0, 0.1);
/* 回复初始阴影 */
transform: translateY(1px);
/* 微小下移,模拟按下 */
}
.no-message-container {
height: 100%;
margin: 120px auto;
text-align: center;
justify-content: center;
}
</style>