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,