初始提交

2025-03-18 16:40:47 +08:00
commit 1dfedce690
23 changed files with 4025 additions and 0 deletions
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="chat-message" :class="{ 'user-message': isUser, 'ai-message': !isUser }">
+    <div class="message-content">
+      <div class="message-text">{{ message.content }}</div>
+      <div class="message-time">{{ formattedTime }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'ChatMessage',
+  
+  props: {
+    message: {
+      type: Object,
+      required: true,
+      validator: (value) => {
+        return value.content !== undefined && value.sender !== undefined && value.timestamp !== undefined;
+      }
+    }
+  },
+  
+  setup(props) {
+    // Determine if the message is from the user
+    const isUser = computed(() => props.message.sender === 'user');
+    
+    // Format the timestamp
+    const formattedTime = computed(() => {
+      const date = new Date(props.message.timestamp);
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    });
+    
+    return {
+      isUser,
+      formattedTime
+    };
+  }
+};
+</script>
+
+<style scoped>
+.chat-message {
+  display: flex;
+  margin-bottom: 16px;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.user-message {
+  justify-content: flex-end;
+}
+
+.ai-message {
+  justify-content: flex-start;
+}
+
+.message-content {
+  max-width: 80%;
+  padding: 12px 16px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-message .message-content {
+  background-color: #1890ff;
+  color: white;
+  border-top-right-radius: 4px;
+}
+
+.ai-message .message-content {
+  background-color: #f0f2f5;
+  color: #333;
+  border-top-left-radius: 4px;
+}
+
+.message-text {
+  font-size: 16px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.message-time {
+  font-size: 12px;
+  margin-top: 4px;
+  text-align: right;
+  opacity: 0.7;
+}
+
+.user-message .message-time {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.ai-message .message-time {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .message-content {
+    max-width: 90%;
+  }
+  
+  .message-text {
+    font-size: 14px;
+  }
+}
+</style>