Step F1：前端工程骨架 & 登录鉴权

2025-12-16 20:21:30 +08:00
parent 5eab324c50
commit 78d13d077c
25 changed files with 523 additions and 1 deletions
@@ -0,0 +1,66 @@
+<template>
+  <el-container class="layout">
+    <el-header class="header">
+      <div class="logo">CTMS</div>
+      <div class="user-info">
+        <span>{{ auth.user?.username }}</span>
+        <el-tag size="small" class="role">{{ auth.user?.role }}</el-tag>
+        <el-button size="small" type="danger" @click="onLogout">退出登录</el-button>
+      </div>
+    </el-header>
+    <el-container>
+      <el-aside width="200px" class="aside">
+        <el-menu router default-active="/home">
+          <el-menu-item index="/home">首页</el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { useAuthStore } from "../store/auth";
+
+const auth = useAuthStore();
+const router = useRouter();
+
+const onLogout = () => {
+  auth.logout();
+  router.push("/login");
+};
+</script>
+
+<style scoped>
+.layout {
+  min-height: 100vh;
+}
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: #409eff;
+  color: #fff;
+}
+.logo {
+  font-weight: 600;
+  font-size: 18px;
+}
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.role {
+  background: #fff;
+  color: #409eff;
+  border: none;
+}
+.aside {
+  border-right: 1px solid #ebeef5;
+}
+</style>