update: 优化聊天界面,替换按钮为 Element Plus 组件,调整输入框样式,增强移动端适配
This commit is contained in:
parent
6bc2b53381
commit
ce61528088
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue