update: 优化聊天界面,替换按钮为 Element Plus 组件,调整输入框样式,增强移动端适配

This commit is contained in:
Lexcubia 2025-04-21 11:57:11 +08:00
parent 6bc2b53381
commit ce61528088
1 changed files with 128 additions and 79 deletions

View File

@ -71,21 +71,33 @@
</div>
</div>
<div class="input-area">
<button class="new-chat-btn" @click="chatStore.startNewChat" :disabled="newChatButtonsDisabled">
<span class="new-chat-icon">+</span>
<el-button
class="new-chat-btn"
@click="chatStore.startNewChat"
:disabled="newChatButtonsDisabled"
:icon="Plus"
>
新会话
</button>
<textarea
</el-button>
<el-input
v-model="messageInput"
@keyup.enter.exact="sendMessage"
@keydown.enter.exact.prevent
type="textarea"
:rows="1"
:autosize="{ minRows: 1, maxRows: 6 }"
placeholder="请输入消息..."
rows="1"
@keyup.enter.exact.prevent="sendMessage"
resize="none"
ref="messageInputRef"
@input="adjustTextareaHeight"
:disabled="isInputDisabled"
></textarea>
<button class="send-btn" @click="sendMessage" :disabled="isInputDisabled || !messageInput.trim()">发送</button>
/>
<el-button
class="send-btn"
@click="sendMessage"
:disabled="isInputDisabled || !messageInput.trim()"
type="primary"
>
发送
</el-button>
</div>
<!-- 总结弹窗 -->
<div v-if="lastMessageWithDafen" class="summary-panel" :class="{ 'summary-panel-collapsed': isSummaryCollapsed }">
@ -107,7 +119,8 @@ import { marked } from 'marked'
import * as echarts from 'echarts'
import { useChatStore } from '@/store/chat'
import ChatHeader from '@/views/chat/ChatHeader.vue'
import { ElTag } from 'element-plus'
import { ElTag, ElButton, ElInput } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
defineOptions({
name: 'ChatInterface'
@ -692,95 +705,131 @@ onUnmounted(() => {
left: 0;
right: 0;
display: flex;
align-items: flex-end;
gap: 12px;
padding: 12px 16px;
padding: 16px;
background: #f5f5f5;
border-top: 1px solid #e5e5e5;
align-items: flex-end;
z-index: 101;
textarea {
:deep(.el-textarea) {
flex: 1;
padding: 10px 16px;
border: 1px solid #eee;
border-radius: 4px;
outline: none;
transition: all 0.3s;
background: #fff;
resize: none;
min-height: 42px;
max-height: calc(24px * 6);
line-height: 1.5;
&:focus {
border-color: #07c160;
box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}
.el-textarea__inner {
min-height: 40px !important;
padding: 8px 12px;
font-size: 14px;
line-height: 1.5;
border-radius: 4px;
border-color: #dcdfe6;
background-color: #fff;
transition: all 0.3s;
resize: none;
&:disabled {
background-color: #f5f5f5;
cursor: not-allowed;
color: #999;
border-color: #e0e0e0;
}
}
&:hover {
border-color: #c0c4cc;
}
button {
padding: 0 24px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
height: 42px;
transition: all 0.3s;
line-height: 42px;
border: 1px solid #ddd;
white-space: nowrap;
&:disabled {
background: #f5f5f5 !important;
border-color: #e0e0e0;
color: #999;
cursor: not-allowed;
&:focus {
border-color: var(--el-color-primary);
box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.1);
}
&:disabled {
background-color: #f5f5f5;
border-color: #e0e0e0;
color: #999;
cursor: not-allowed;
}
&::placeholder {
color: #999;
}
}
}
}
.new-chat-btn {
padding: 0 16px;
background: #fff;
color: #333;
:deep(.el-button) {
height: 40px;
padding: 0 20px;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
border-radius: 4px;
font-weight: 500;
&:hover {
background: #e8e8e8;
border-color: #ccc;
}
&:disabled {
background: #f5f5f5;
border-color: #ddd;
color: #999;
&.is-disabled {
background-color: #f5f5f5 !important;
border-color: #dcdfe6 !important;
color: #999 !important;
cursor: not-allowed;
}
.new-chat-icon {
font-size: 18px;
font-weight: bold;
line-height: 1;
&.new-chat-btn {
--el-button-bg-color: #f2f3f5;
--el-button-border-color: #dcdfe6;
--el-button-text-color: #606266;
--el-button-hover-bg-color: #e9ecef;
--el-button-hover-border-color: #c0c4cc;
--el-button-hover-text-color: #303133;
--el-button-active-bg-color: #e9ecef;
--el-button-active-border-color: #c0c4cc;
--el-button-active-text-color: #303133;
padding: 0 12px;
.el-icon {
font-size: 14px;
margin-right: 2px;
position: relative;
top: -1px;
}
}
}
.send-btn {
color: white;
background: #07c160;
&:hover {
background: #06ae56;
}
:deep(.el-button--primary) {
--el-button-bg-color: #07c160;
--el-button-border-color: #07c160;
--el-button-hover-bg-color: #06ae56;
--el-button-hover-border-color: #06ae56;
--el-button-active-bg-color: #06ae56;
--el-button-active-border-color: #06ae56;
}
.new-chat-btn {
display: flex;
align-items: center;
padding: 0 16px;
white-space: nowrap;
}
.send-btn {
min-width: 80px;
}
/* 移动端适配 */
@media screen and (max-width: 768px) {
.input-area {
padding: 12px;
gap: 8px;
}
:deep(.el-button) {
padding: 0 12px;
&.new-chat-btn {
.el-icon {
display: none;
}
}
}
.new-chat-btn {
padding: 0 12px;
}
.send-btn {
min-width: 60px;
}
}
/* 统一的滚动条样式 */
.chat-messages,
.summary-content,