feat: 完成 Layout

RollCallClient/src/components/Layout.vue

@@ -0,0 +1,209 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useRouter} from "vue-router";
+import { useTokenStore } from "@/store/token.js";
+import {Clock, House, User} from '@element-plus/icons-vue'
+import { ElMessage } from "element-plus";
+import { useUsernameStore } from "@/store/username.js";
+
+const route = useRoute()
+const router = useRouter()
+const tokenStore = useTokenStore()
+const usernameStore = useUsernameStore()
+const activeMenu = computed(() => route.path)
+
+const handleQuit = () => {
+  tokenStore.removeToken()
+  usernameStore.removeUsername()
+  router.push('/login')
+  ElMessage.success('退出成功')
+}
+
+</script>
+
+
+<template>
+  <div class="layout-container">
+    <el-container class="layout-container-main">
+      <el-aside width="200px" class="sidebar">
+        <router-link to="/home" class="logo-container">
+          <img src="../assets/duck.png" alt="Logo" class="logo" />
+          <span class="logo-text">&nbsp;YaYa点名</span>
+        </router-link>
+        <el-menu
+            :default-active="activeMenu"
+            class="sidebar-menu"
+            router
+        >
+          <el-menu-item index="/home">
+            <el-icon><House /></el-icon>
+            <span class="menu-font">首 页</span>
+          </el-menu-item>
+          <el-menu-item index="/rollcall">
+            <el-icon><Clock /></el-icon>
+            <span class="menu-font">点 名</span>
+          </el-menu-item>
+          <el-menu-item index="/student">
+            <el-icon><User /></el-icon>
+            <span class="menu-font">学生管理</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+      <el-container>
+        <el-header height="55px" class="header">
+          <div class="header-content">
+            <div class="header-left"></div>
+            <div class="header-right">
+              <el-dropdown placement="bottom" class="user-option">
+                <button class="user-button">
+                  <span style="font-size: 14px">您好，{{ usernameStore.username }}</span>
+                </button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item @click="handleQuit">注销登录</el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </el-header>
+        <el-main class="main-content">
+          <router-view></router-view>
+        </el-main>
+        <el-footer height="45px" class="footer" style="font-family: Nautilus-pompilius, sans-serif; font-size: 18px; color: #333;">
+          Power By &nbsp;<a href="https://www.aspark.cc" target="_blank" style="text-decoration: none">Aspark.cc</a>
+        </el-footer>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+
+<style scoped>
+.menu-font {
+  font-weight: bold;
+  color: #606266;
+}
+
+.layout-container {
+  height: 100vh;
+  width: 100vw;
+}
+
+.layout-container-main {
+  height: 100%;
+}
+
+.sidebar {
+  background-color: #ebf1f6;
+  color: white;
+  display: flex;
+  flex-direction: column;
+}
+
+.logo-container {
+  height: 65px;
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+}
+
+.logo {
+  color: black;
+  max-width: 160px;
+  max-height: 40px;
+}
+
+.logo-text {
+  font-family: YaYa点名, sans-serif;
+  color: black;
+  font-size: 30px;
+}
+
+.sidebar-menu {
+  border-right: none;
+  background-color: #ebf1f6;
+}
+
+.header {
+  background-color: #ebf1f6;
+  padding: 0 20px;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+}
+
+.user-button {
+  background: none;
+  border: none;
+  padding: 15px 15px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+
+.user-button:hover {
+  background-color: #dde3e8;
+}
+
+.main-content {
+  padding: 20px;
+  background-color: #ffffff;
+  border-radius: 6px;
+}
+
+.footer {
+  background-color: #f6f6f6;
+  color: #333;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid #e6e6e6;
+}
+
+:deep(.el-menu) {
+  border-right: none;
+}
+
+:deep(.el-menu-item) {
+  color: #303133;
+  transition: all 0.3s;
+  margin: 6px 0;
+}
+
+:deep(.el-menu-item.is-active) {
+  color: #409EFF;
+  background-color: #f5f8fb;
+  margin-right: 6px;
+  margin-left: 6px;
+  border-radius: 6px;
+}
+
+:deep(.el-menu-item:hover) {
+  background-color: #dde3e8;
+  margin-right: 6px;
+  margin-left: 6px;
+  border-radius: 6px;
+}
+
+:deep(.el-dropdown-menu) {
+  border-radius: 4px;
+}
+
+:deep(.el-dropdown-menu__item) {
+  transition: all 0.3s;
+}
+
+:deep(.el-dropdown-menu__item:hover) {
+  background-color: #ecf5ff;
+  color: #409EFF;
+}
+
+</style>