Add AutoRobot directory with Windows line endings

AutoRobot/Windows/Robot/Web/src/components/MessageArea.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- 消息显示区域 - 优化的卡片设计 -->
+  <div class="w-full h-full flex flex-col">
+    <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl flex flex-col border border-gray-100 h-full">
+      <!-- 消息头部 -->
+      <div class="p-4 border-b border-gray-100 bg-gray-50/80 backdrop-blur-sm">
+        <h2 class="font-semibold text-lg flex items-center">
+          <i class="fa-solid fa-comments text-primary mr-2"></i>
+          <span>消息记录</span>
+          <span class="ml-2 text-xs text-gray-500 px-2 py-0.5 rounded-full bg-gray-200">
+            {{ messages.length }}
+          </span>
+        </h2>
+      </div>
+      
+      <!-- 消息列表区域 - 增强的滚动体验 -->
+      <div ref="messageContainer" class="flex-grow h-full p-4 min-h-0 overflow-y-auto">
+        <!-- 自定义滚动条 -->
+        <div class="scrollbar-thin scrollbar-thumb-primary/30 scrollbar-track-gray-100">
+          <!-- 消息列表 -->
+          <div class="space-y-1">
+            <div 
+              v-for="message in messages" 
+              :key="message.id" 
+              class="flex items-start animate-fadeIn"
+              :class="{ 'justify-end': message.sender === 'me', 'delay-300': message.isSystem }"
+            >
+              <!-- 系统消息 -->
+              <template v-if="message.isSystem">
+                <div class="w-full flex justify-start my-4">
+                  <div class="bg-primary/5 px-4 py-2 rounded-full inline-flex items-center max-w-md border border-primary/10 transition-all duration-300 hover:bg-primary/10">
+                    <i class="fa-solid fa-info-circle text-primary mr-2"></i>
+                    <span class="text-sm text-gray-600">{{ message.content }}</span>
+                  </div>
+                </div>
+              </template>
+              
+              <!-- 普通消息 -->
+              <template v-else>
+                <!-- 对方头像 -->
+                <template v-if="message.sender !== 'me'">
+                  <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3 flex-shrink-0 border border-gray-200 shadow-sm transition-all duration-300 hover:bg-gray-200">
+                    <i class="fa-solid fa-user text-primary"></i>
+                  </div>
+                </template>
+                
+                <!-- 消息气泡 -->
+                <div class="flex flex-col" :class="{ 'items-end': message.sender === 'me' }">
+                  <div class="flex items-center space-x-2 mb-1">
+                    <span class="text-xs font-medium text-gray-500">{{ message.sender === 'me' ? '我' : message.sender }}</span>
+                    <span class="text-xs text-gray-400">{{ message.time }}</span>
+                  </div>
+                  <div 
+                    :class="message.sender === 'me' ? 'bg-[#165DFF] text-white shadow-lg shadow-[#165DFF]/20 !important' : 'bg-gray-100 shadow-sm border border-gray-200'" 
+                    class="px-4 py-3 rounded-2xl max-w-md word-wrap break-word transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl"
+                    style="background-color: #165DFF !important; color: white !important;"
+                  >
+                    {{ message.content }}
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+
+// Props
+const props = defineProps({
+  messages: {
+    type: Array,
+    required: true
+  }
+});
+
+// Refs
+const messageContainer = ref(null);
+
+// 监听消息变化，自动滚动到底部
+watch(() => props.messages, () => {
+  nextTick(() => {
+    if (messageContainer.value) {
+      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+    }
+  });
+}, { deep: true });
+</script>