diff --git a/src/views/chat/ChatInterface.vue b/src/views/chat/ChatInterface.vue index 85fd7f4..e50fcc7 100644 --- a/src/views/chat/ChatInterface.vue +++ b/src/views/chat/ChatInterface.vue @@ -71,21 +71,33 @@
- - - + /> + + 发送 +
@@ -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,