91 lines
3.0 KiB
Vue
91 lines
3.0 KiB
Vue
<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> |