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>