feat: 增加网页后台管理

WebRTCSignalServerWeb/src/layout/BasicLayout.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="layout">
+    <SideBar :collapsed="collapsed" />
+    <div class="layout-main">
+      <HeaderBar :collapsed="collapsed" @toggle="collapsed = !collapsed" />
+      <div class="layout-content">
+        <router-view v-slot="{ Component }">
+          <transition name="fade" mode="out-in">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import SideBar from './components/SideBar.vue';
+import HeaderBar from './components/HeaderBar.vue';
+
+const collapsed = ref(false);
+</script>
+
+<style scoped>
+.layout {
+  display: flex;
+  height: 100%;
+}
+.layout-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.layout-content {
+  flex: 1;
+  overflow: auto;
+  background: var(--admin-bg);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

WebRTCSignalServerWeb/src/layout/components/HeaderBar.vue

@@ -0,0 +1,116 @@
+<template>
+  <header class="header">
+    <div class="left">
+      <el-icon class="icon-btn" @click="emit('toggle')">
+        <component :is="collapsed ? 'Expand' : 'Fold'" />
+      </el-icon>
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>首页</el-breadcrumb-item>
+        <el-breadcrumb-item v-for="b in breadcrumb" :key="b">{{ b }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="right">
+      <el-tooltip content="刷新" placement="bottom">
+        <el-icon class="icon-btn" @click="refresh"><Refresh /></el-icon>
+      </el-tooltip>
+      <el-tooltip content="全屏" placement="bottom">
+        <el-icon class="icon-btn" @click="toggleFullscreen"><FullScreen /></el-icon>
+      </el-tooltip>
+      <el-dropdown trigger="click">
+        <span class="user">
+          <el-avatar :size="30" style="background: var(--admin-primary)">
+            {{ user.username.charAt(0).toUpperCase() }}
+          </el-avatar>
+          <span class="username">{{ user.username }}</span>
+          <el-icon><ArrowDown /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item disabled>{{ user.username }}</el-dropdown-item>
+            <el-dropdown-item divided @click="logout">
+              <el-icon><SwitchButton /></el-icon> 退出登录
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/user';
+import { ElMessage } from 'element-plus';
+
+defineProps<{ collapsed: boolean }>();
+const emit = defineEmits<{ toggle: [] }>();
+
+const route = useRoute();
+const router = useRouter();
+const user = useUserStore();
+
+const breadcrumb = computed(() =>
+  route.meta.title ? [route.meta.title as string] : [],
+);
+
+function toggleFullscreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+}
+
+function refresh() {
+  router.go(0);
+}
+
+function logout() {
+  user.logout();
+  ElMessage.success('已退出登录');
+  router.replace({ name: 'Login' });
+}
+</script>
+
+<style scoped>
+.header {
+  height: 60px;
+  background: var(--admin-header-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+  flex-shrink: 0;
+}
+.left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+.icon-btn {
+  font-size: 20px;
+  cursor: pointer;
+  color: #5b6573;
+}
+.icon-btn:hover {
+  color: var(--admin-primary);
+}
+.user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  outline: none;
+}
+.username {
+  font-size: 14px;
+  color: #303133;
+}
+</style>

WebRTCSignalServerWeb/src/layout/components/SideBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <aside class="sidebar" :class="{ 'is-collapsed': collapsed }">
+    <div class="logo">
+      <span class="logo-icon">📡</span>
+      <span v-show="!collapsed" class="logo-text">信令管理后台</span>
+    </div>
+    <el-menu
+      router
+      :default-active="activeMenu"
+      :collapse="collapsed"
+      :collapse-transition="false"
+      background-color="#1b1f2d"
+      text-color="#cbd5e1"
+      active-text-color="#ffffff"
+      class="menu"
+    >
+      <el-menu-item v-for="m in menus" :key="m.path" :index="m.path">
+        <el-icon><component :is="m.icon" /></el-icon>
+        <template #title>{{ m.title }}</template>
+      </el-menu-item>
+    </el-menu>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+defineProps<{ collapsed: boolean }>();
+
+const route = useRoute();
+const activeMenu = computed(() => route.path);
+
+const menus = [
+  { path: '/dashboard', title: '仪表盘', icon: 'Odometer' },
+  { path: '/devices', title: '设备管理', icon: 'Monitor' },
+  { path: '/connections', title: '连接请求', icon: 'Connection' },
+  { path: '/system/info', title: '服务器信息', icon: 'Cpu' },
+  { path: '/system/config', title: '系统配置', icon: 'Setting' },
+];
+</script>
+
+<style scoped>
+.sidebar {
+  width: 220px;
+  background: var(--admin-sidebar-bg);
+  display: flex;
+  flex-direction: column;
+  transition: width 0.2s;
+  flex-shrink: 0;
+}
+.sidebar.is-collapsed {
+  width: 64px;
+}
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 18px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.logo-icon {
+  font-size: 22px;
+}
+.menu {
+  border-right: none;
+  flex: 1;
+  width: 100%;
+}
+:deep(.el-menu-item.is-active) {
+  background: var(--admin-sidebar-active) !important;
+}
+:deep(.el-menu-item:hover) {
+  background: #2a3142 !important;
+}
+</style>