Add AutoRobot directory with Windows line endings

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

@@ -0,0 +1,91 @@
+<template>
+  <!-- 导航栏 - 现代化设计 -->
+  <header class="bg-white/80 backdrop-blur-md shadow-lg sticky top-0 z-50 transition-all duration-300 hover:bg-white">
+    <div class="container mx-auto px-4 sm:px-6 py-2 flex justify-between items-center">
+      <div class="flex items-center space-x-2 group flex-nowrap min-w-max">
+        <div class="w-8 h-8 rounded-xl bg-[#165DFF] flex items-center justify-center text-white shadow-md shadow-primary/20 transition-all duration-300 group-hover:scale-110 flex-shrink-0">
+          <i class="fa-solid fa-bolt"></i>
+        </div>
+        <h1 class="text-base sm:text-lg font-bold text-primary whitespace-nowrap flex-shrink-0">
+          WebSocket 通信中心
+        </h1>
+      </div>
+      
+      <div class="flex items-center space-x-4">
+        <!-- 连接状态指示器 -->
+        <div class="hidden sm:flex items-center space-x-2 px-2 py-1 rounded-full bg-white shadow-sm border border-gray-100 transition-all duration-300 hover:shadow-md">
+          <div class="relative">
+            <span :class="connectionIconClass" class="animate-pulse block w-2 h-2"></span>
+            <span :class="connectionIconClass" class="absolute top-0 left-0 animate-ping opacity-30 block w-2 h-2 rounded-full"></span>
+          </div>
+          <span class="text-sm font-medium" :class="connectionTextClass">{{ connectionStatusText }}</span>
+        </div>
+        
+        <!-- 连接控制按钮 -->
+        <button 
+          @click="toggleConnection" 
+          class="px-4 py-2 rounded-lg font-medium transition-all duration-300 flex items-center space-x-2 shadow-sm hover:shadow-md transform hover:-translate-y-0.5"
+          :class="connectButtonClass"
+        >
+          <i :class="connectBtnIconClass"></i>
+          <span>{{ connectBtnText }}</span>
+        </button>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+  isConnected: {
+    type: Boolean,
+    required: true
+  },
+  wsUrl: {
+    type: String,
+    required: true
+  }
+});
+
+// Emits
+const emit = defineEmits(['toggle-connection']);
+
+// Computed
+const connectionStatusText = computed(() => {
+  return props.isConnected ? '已连接' : '未连接';
+});
+
+const connectionIconClass = computed(() => {
+  return props.isConnected 
+    ? 'rounded-full bg-green-500' 
+    : 'rounded-full bg-red-500';
+});
+
+const connectionTextClass = computed(() => {
+  return props.isConnected ? 'text-green-600' : 'text-red-600';
+});
+
+const connectButtonClass = computed(() => {
+  return props.isConnected 
+    ? 'bg-red-50 text-red-600 border border-red-200 hover:bg-red-100' 
+    : 'bg-[#165DFF] text-white hover:bg-[#1453e0]';
+});
+
+const connectBtnIconClass = computed(() => {
+  return props.isConnected 
+    ? 'fa-solid fa-plug-circle-xmark' 
+    : 'fa-solid fa-plug-circle-plus';
+});
+
+const connectBtnText = computed(() => {
+  return props.isConnected ? '断开连接' : '连接服务器';
+});
+
+// Methods
+const toggleConnection = () => {
+  emit('toggle-connection');
+};
+</script>