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/router/router.ts

@@ -1,12 +1,20 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
 import Home from "@/views/Home.vue";
 import NotFound from "@/error/NotFound.vue";
-import Admin from "@/views/managerial/admin.vue"
 import Account from "@/views/ordinary/account.vue"
 import Books from "@/views/ordinary/books.vue"
 import Journals from "@/views/ordinary/journals.vue"
 import Newspapers from "@/views/ordinary/newspapers.vue";
 import Main from "@/views/ordinary/main.vue";
+import SMA from "@/views/managerial/SMA.vue";
+import BMA from "@/views/managerial/BMA.vue";
+import UAA from "@/views/managerial/UAA.vue"
+import AccountCancel from "@/views/managerial/BMA/Account-Cancel.vue";
+import AccountBusiness from "@/views/managerial/BMA/Account-Business.vue";
+import BookInquire from "@/views/managerial/BMA/Book-Inquire.vue";
+import BookBorrowBack from "@/views/managerial/BMA/Book-BorrowBack.vue";
+import TicketCreate from "@/views/managerial/BMA/Ticket-Create.vue";
+import TicketInquire from "@/views/managerial/BMA/Ticket-Inquire.vue";
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -47,9 +55,52 @@ const routes: Array<RouteRecordRaw> = [
         component: Account,
     },
     {
-        path: "/5Usw4tshU6SRG2HxSxeG2UKfZZ7HKvSjEZjvBV7WExUFYwUKTX",
+        path: "/UAA",
-        name: "admin",
+        name: "UAA",
-        component: Admin,
+        component: UAA,
+    },
+    {
+        path: "/SMA",
+        name: "SMA",
+        component: SMA,
+    },
+    {
+        path: "/BMA",
+        name: "BMA",
+        component: BMA,
+        redirect: "/BMA/AccountBusiness", // 添加默认重定向到业务页
+        children:[
+            {
+              path:"AccountCancel",
+              name:"AccountCancel" ,
+              component:AccountCancel,
+            },
+            {
+              path:"AccountBusiness",
+              name:"AccountBusiness",
+              component:AccountBusiness,
+            },
+            {
+              path:"BookInquire",
+              name:"BookInquire",
+              component:BookInquire,
+            },
+            {
+                path:"BookBorrowBack",
+                name:"BookBorrowBack",
+                component:BookBorrowBack,
+            },
+            {
+                path:"TicketCreate",
+                name:"TicketCreate",
+                component:TicketCreate,
+            },
+            {
+                path:"TicketInquire",
+                name:"TicketInquire",
+                component:TicketInquire,
+            },
+        ]
     },
     {
         path: "/:pathMatch(.*)*",

src/views/Home.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import "@/assets/ordinary/Home.css"
 import {ref} from 'vue'
-import { UserFilled } from '@element-plus/icons-vue'
 import {useRouter} from "vue-router";
+const UserID = ref('用户')
 const imgsrc = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png') //头像
 const router = useRouter()
 const activeIndex = ref(router.currentRoute.value.path) // 根据当前路由设置激活状态
@@ -29,12 +29,16 @@ const handleSelect = (path: string) => {
         <el-menu-item index="/journals" :route="{ path: '/journals'}" class="el-menu-item-A">期刊</el-menu-item>
         <el-menu-item index="/newspapers" :route="{ path: '/newspapers'}" class="el-menu-item-A">报纸</el-menu-item>
         <!-- 弹性空间 -->
-        <div class="flex-grow"></div>
+        <div class="flex-grow"/>
-        <!-- 头像-->
+          <el-sub-menu>
-        <div style="margin: auto 0;">
+            <template #title>
-          <el-avatar :src="imgsrc" :icon="UserFilled"/>
+              <el-avatar :src="imgsrc" :size="45" style="margin-right: 20px">请登录</el-avatar>
-        </div>
+              <span>{{ UserID }}</span>
-        <el-menu-item index="/account" :route="{ path: '/account'}">读者登录</el-menu-item>
+            </template>
+            <el-menu-item index="/UAA" :route="{ path: '/UAA'}" v-if="true">个人中心</el-menu-item>
+            <el-menu-item v-if="true">注销</el-menu-item>
+            <el-menu-item v-if="false">登录</el-menu-item>
+          </el-sub-menu>
       </el-menu>
 <!--      <div class="h-6"/>-->
     </div>

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>

src/views/managerial/BMA/Account-Business.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+账号业务
+</template>
+
+<style scoped>
+
+</style>

src/views/managerial/BMA/Account-Cancel.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+账号注册
+</template>
+
+<style scoped>
+
+</style>

src/views/managerial/BMA/Book-BorrowBack.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+借还业务
+</template>
+
+<style scoped>
+
+</style>

src/views/managerial/BMA/Book-Inquire.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+图书查询
+</template>
+
+<style scoped>
+
+</style>

src/views/managerial/BMA/Ticket-Create.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+工单创建
+</template>
+
+<style scoped>
+
+</style>

src/views/managerial/BMA/Ticket-Inquire.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+工单查询
+</template>
+
+<style scoped>
+
+</style>

src/views/managerial/UAA.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>