V0.2.4.20250731

———————————————
图书管理员
———————————————

src/assets/managerial/BMA.css

@@ -0,0 +1,23 @@
+.common-layout {
+    background-color: rgba(0, 149, 5, 0.9);
+    height: 100lvh;
+    width: 100lvw;
+    margin: auto;
+}
+.container-header{
+    height: 8lvh;
+    display: flex;
+    align-items: center;
+}
+.container-all{
+    height: 100lvh;
+}
+.container-aside{
+    background-color: rgba(0, 149, 255, 0.9);
+    height: 100%;
+    margin: auto;
+    width: 200px;
+}
+.flex-grow {
+    flex-grow: 1;
+}

src/views/managerial/BMA.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import "@/assets/managerial/BMA.css"
+
+const imgsrc = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png') //头像
+const UserID = ref('管理员')
+import {MessageBox, Notebook, User} from "@element-plus/icons-vue";
+import {computed, ref} from "vue";
+import {useRoute} from "vue-router";
+
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+
+const route = useRoute()
+const activeIndex = computed(() => route.path)
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container class="container-all">
+      <el-header style="height: 8lvh; background-color: #4081bf;">
+        <div class="container-header">
+          <img src="#" alt="logo" style="background-color: aqua">
+          <div class="flex-grow"/>
+          <el-menu
+              class="el-menu-vertical-header"
+              @open="handleOpen"
+              @close="handleClose"
+          >
+            <el-sub-menu>
+              <template #title>
+                <el-avatar :src="imgsrc" :size="45" style="margin-right: 20px">请登录</el-avatar>
+                <span>{{UserID}}</span>
+              </template>
+
+              <el-menu-item v-if="true">注销</el-menu-item>
+            </el-sub-menu>
+          </el-menu>
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside class="container-aside">
+          <el-scrollbar>
+            <el-menu
+                :default-active="activeIndex"
+                class="el-menu-vertical-demo"
+                router
+            >
+              <el-sub-menu index="1">
+                <template #title>
+                  <el-icon>
+                    <User/>
+                  </el-icon>
+                  <span>账号管理</span>
+                </template>
+                <el-menu-item index="/BMA/AccountCancel" :route="{ name: 'AccountCancel' }">账号注册</el-menu-item>
+                <el-menu-item index="/BMA/AccountBusiness" :route="{ name: 'AccountBusiness' }">账号业务</el-menu-item>
+                <el-menu-item index="/UAA" :route="{ name: 'UAA' }">个人中心</el-menu-item>
+              </el-sub-menu>
+              <el-sub-menu index="2">
+                <template #title>
+                  <el-icon>
+                    <Notebook/>
+                  </el-icon>
+                  <span>借阅管理</span>
+                </template>
+                <el-menu-item index="/BMA/BookInquire" :route="{ name:'BookInquire'}">图书查询</el-menu-item>
+                <el-menu-item index="/BMA/BookBorrowBack" :route="{ name:'BookBorrowBack'}">借还业务</el-menu-item>
+              </el-sub-menu>
+              <el-sub-menu index="3">
+                <template #title>
+                  <el-icon><MessageBox /></el-icon>
+                  <span>咨询投诉</span>
+                </template>
+                <el-menu-item index="/BMA/TicketCreate" :route="{ name:'TicketCreate'}">工单创建</el-menu-item>
+                <el-menu-item index="/BMA/TicketInquire" :route="{ name:'TicketInquire'}">工单查询</el-menu-item>
+              </el-sub-menu>
+            </el-menu>
+          </el-scrollbar>
+        </el-aside>
+        <el-container>
+          <el-main>
+            <RouterView></RouterView>
+          </el-main>
+        </el-container>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<style scoped>
+
+</style>