feat: add vue admin transition shell

WonderQ-Admin-UI-Vue/src/layouts/AdminLayout.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElMessageBox } from "element-plus";
+import { useAuthStore } from "@/stores/auth";
+import MenuTree from "@/components/MenuTree.vue";
+
+const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+const activePath = computed(() => route.path);
+
+async function logout() {
+  await ElMessageBox.confirm("确定退出当前后台会话吗？", "退出登录", { type: "warning" });
+  await auth.logout();
+  await router.replace({ name: "login" });
+}
+</script>
+
+<template>
+  <el-container class="admin-shell">
+    <el-aside width="244px" class="admin-aside">
+      <div class="brand">
+        <div class="brand-mark">WQ</div>
+        <div><strong>WonderQ</strong><span>内容运营后台</span></div>
+      </div>
+      <el-scrollbar>
+        <el-menu :default-active="activePath" router class="sidebar-menu">
+          <MenuTree :menus="auth.menus" />
+        </el-menu>
+      </el-scrollbar>
+      <div class="aside-note">Vue3 迁移过渡端</div>
+    </el-aside>
+    <el-container>
+      <el-header class="admin-header">
+        <div>
+          <p class="eyebrow">OPERATIONS / ADMIN</p>
+          <h1>{{ route.meta.title || "内容运营" }}</h1>
+        </div>
+        <div class="header-actions">
+          <el-tag type="success" effect="light">权限已加载</el-tag>
+          <span class="user-name">{{ auth.user?.name }}</span>
+          <el-button text @click="logout">退出</el-button>
+        </div>
+      </el-header>
+      <el-main class="admin-main"><RouterView /></el-main>
+    </el-container>
+  </el-container>
+</template>