17.侧边栏和封装侧边栏组件

src/assets/admin/css/home.css

@@ -0,0 +1,113 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-size: 14px;
+}
+
+a {
+    outline: none;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+ul,
+li {
+    list-style-type: none;
+}
+
+/* .dr-home */
+.dr-home {
+    display: flex;
+    flex-direction: column; /* 容器内的元素从上至下排列 */
+    height: 100vh;
+}
+
+/* .dr-home .header */
+.dr-home .header {
+    display: flex;
+    height: 55px;
+    background: #393d49;
+}
+
+.dr-home .header .title {
+    display: flex;
+    width: 200px;
+    background: #0c0c0c;
+}
+
+.dr-home .header .title .logo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+}
+
+.dr-home .header .title .logo i {
+    color: lightslategray;
+    font-size: 30px;
+}
+
+.dr-home .header .title .text {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.dr-home .header .title .text a {
+    color: lightslategray;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.dr-home .header .info {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1;
+}
+
+.dr-home .header .info .admin {
+    display: flex;
+    color: #fff;
+    font-size: 15px;
+}
+
+.dr-home .header .info .admin .name {
+    padding-right: 10px;
+    height: 55px;
+    line-height: 55px;
+    text-align: center;
+}
+
+.dr-home .header .info .admin .name i {
+    color: #FF5722;
+    font-size: 13px;
+}
+
+.dr-home .header .info .admin .exit {
+    width: 90px;
+    height: 55px;
+    line-height: 55px;
+    text-align: center;
+    background: #555c64;
+    cursor: pointer;
+}
+
+/* .dr-home .main */
+.dr-home .main {
+    display: flex;
+    height: calc(100vh - 55px); /* 减去 header 高度 */
+}
+
+.dr-home .main .side {
+    width: 200px;
+    background: #545c64;
+}
+
+.dr-home .main .content {
+    padding: 5px;
+    flex: 1;
+    overflow-y: auto;
+}

src/components/admin/home/HomeHeader.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="header">
+    <div class="title">
+      <div class="logo">
+        <el-icon><MostlyCloudy /></el-icon>
+      </div>
+      <div class="text">
+        <a href="/admin">李龙龙编程</a>
+      </div>
+    </div>
+    <div class="info">
+      <div class="admin">
+        <div class="name">
+          <span>李龙龙</span>
+          <el-icon><Bell /></el-icon>
+        </div>
+
+        <div class="exit">
+          退出
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/admin/home/HomeSide.vue

@@ -0,0 +1,27 @@
+<template>
+      <div class="side">
+        <el-menu router background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
+          <el-sub-menu index="admin">
+            <template #title>
+              <el-icon><UserFilled /></el-icon> 管理员
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="/admin/administrator/add">添加管理员</el-menu-item>
+              <el-menu-item index="/admin/administrator/list">管理员列表</el-menu-item>
+            </el-menu-item-group>
+          </el-sub-menu>
+
+          <el-menu-item index="/admin/category/list?parent_id=0">
+            <el-icon><Files /></el-icon> 类别管理
+          </el-menu-item>
+        </el-menu>
+
+      </div>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/router/index.js

@@ -1,6 +1,10 @@
 import { createRouter, createWebHistory } from "vue-router"
 import {useAdminStore} from "@/stores/admin/admin.js";
 const routes= [
+    {
+        path: "/",  //http://localhost:5173/
+        redirect: "/admin" //重定向
+    },
     {
         path: "/login", // http://localhost:5173/login
         component: () => import("@/views/admin/login.vue")
@@ -9,6 +13,24 @@ const routes= [
         path: "/admin", // http://localhost:5173/admin
         component: () => import("@/views/admin/home.vue"),
         meta: { requiresAuth: true }, //身份验证
+        children: [
+            //管理员
+            {
+                path: "administrator/add", // http://localhost:5173/admin/administrator/add
+                component: () => import("@/views/admin/administrator/add.vue")
+            },
+            {
+                path: "administrator/list", // http://localhost:5173/admin/administrator/list
+                component: () => import("@/views/admin/administrator/list.vue")
+            },
+
+            //类别管理
+            {
+                path: "category/list", // http://localhost:5173/admin/category/list
+                component: () => import("@/views/admin/category/list.vue")
+            },
+
+        ]
     }
 ]
 

src/views/admin/administrator/add.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    添加管理员
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/admin/administrator/list.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    管理员列表
+
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/admin/category/list.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    类别管理页面
+
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+
+
+    return {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/admin/home.vue

@@ -1,9 +1,24 @@
 <script setup>
+import '@/assets/admin/css/home.css' //导入样式
+import HomeSide from "@/components/admin/home/HomeSide.vue";
+import HomeHeader from "@/components/admin/home/HomeHeader.vue";
+
+import {HomeFilled} from "@element-plus/icons-vue";
 
 </script>
 
 <template>
-  <h3>后台页面</h3>
+  <div class="dr-home">
+    <HomeHeader />
+
+    <div class="main">
+      <HomeSide />
+
+      <div class="content">
+        <router-view />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>