聊天界面所有前端
Change-Id: I0278cae1cd7152f4f797c00ac68cbdb36a2dd768
diff --git a/src/components/chat.css b/src/components/chat.css
new file mode 100644
index 0000000..b02d961
--- /dev/null
+++ b/src/components/chat.css
@@ -0,0 +1,216 @@
+/* chat.css */
+.chatbox-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background: #fafafa;
+ border: 1px solid #d9d9d9;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.chatbox-header {
+ padding: 16px;
+ background-color: #f0f5ff;
+ border-bottom: 1px solid #adc6ff;
+ text-align: center;
+}
+
+.chatbox-content {
+ flex: 1;
+ padding: 16px;
+ background-color: #fff;
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #91d5ff transparent;
+}
+
+.chatbox-content::-webkit-scrollbar {
+ width: 8px;
+}
+
+.chatbox-content::-webkit-scrollbar-thumb {
+ background-color: #91d5ff;
+ border-radius: 4px;
+}
+
+.chatbox-content::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.no-messages {
+ color: #999;
+ text-align: center;
+ margin-top: 40px;
+ font-size: 14px;
+}
+
+.chat-message {
+ display: flex;
+ align-items: flex-end;
+ margin-bottom: 10px;
+ gap: 8px;
+ max-width: 100%;
+}
+
+.chat-message.sender {
+ justify-content: flex-end;
+}
+
+.chat-message.receiver {
+ justify-content: flex-start;
+}
+
+.message-bubble-wrapper {
+ max-width: 75%;
+}
+
+.message-bubble {
+ padding: 10px 14px;
+ border-radius: 14px;
+ font-size: 14px;
+ word-break: break-word;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.chat-message.sender .message-bubble {
+ background-color: #69c0ff;
+ color: #fff;
+ border-bottom-right-radius: 0;
+}
+
+.chat-message.receiver .message-bubble {
+ background-color: #e6f7ff;
+ color: #000;
+ border-bottom-left-radius: 0;
+}
+
+.message-time {
+ font-size: 10px;
+ color: #666;
+ margin-top: 4px;
+ text-align: right;
+}
+
+.avatar {
+ flex-shrink: 0;
+ user-select: none;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
+}
+
+.chatbox-footer {
+ display: flex;
+ padding: 12px;
+ border-top: 1px solid #f0f0f0;
+ background-color: #fff;
+ gap: 8px;
+ align-items: flex-end;
+}
+
+.chat-input {
+ flex: 1;
+ border-radius: 8px;
+ resize: none;
+}
+
+.send-btn {
+ min-width: 80px;
+ border-radius: 8px;
+ height: 44px;
+}
+
+.emoji-btn {
+ background: white;
+ border: none;
+ padding: 6px;
+ border-radius: 8px;
+ color: #666;
+ font-size: 18px;
+ cursor: pointer;
+ height: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.emoji-btn:hover {
+ background-color: #f0f0f0;
+ color: #333;
+}
+
+.emoji-picker {
+ display: grid;
+ grid-template-columns: repeat(8, 1fr);
+ gap: 6px;
+ padding: 10px;
+ width: 280px;
+ max-height: 260px;
+ overflow-y: auto;
+}
+
+.emoji-item {
+ font-size: 20px;
+ padding: 4px;
+ cursor: pointer;
+ text-align: center;
+ transition: all 0.2s ease;
+}
+
+.emoji-item:hover {
+ transform: scale(1.2);
+ background: #f0f9ff;
+ border-radius: 4px;
+}
+
+.emoji-popover .ant-popover-inner {
+ padding: 0;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.emoji-popover .ant-popover-title {
+ padding: 8px;
+ border-bottom: 1px solid #f0f0f0;
+ font-weight: bold;
+ background-color: #f9f9f9;
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+ .chatbox-container {
+ border-radius: 0;
+ border: none;
+ }
+
+ .chatbox-header {
+ padding: 12px;
+ }
+
+ .chatbox-content {
+ padding: 12px;
+ }
+
+ .message-bubble-wrapper {
+ max-width: 85%;
+ }
+
+ .chatbox-footer {
+ padding: 8px;
+ gap: 6px;
+ }
+
+ .emoji-picker {
+ width: 240px;
+ grid-template-columns: repeat(7, 1fr);
+ }
+
+ .send-btn {
+ min-width: 60px;
+ height: 40px;
+ }
+
+ .emoji-btn {
+ height: 40px;
+ }
+}
\ No newline at end of file