feat:搭建管理员后端管理系统雏形

src/layout/AdminLayout/AdminASide.vue

@@ -0,0 +1,80 @@
+<template>
+
+  <el-menu
+      default-active="1"
+      :class="{menu:true, 'menu-active':!isCollapse}"
+      @open="handleOpen"
+      @close="handleClose"
+      @select="handleSelect"
+      :collapse="isCollapse"
+  >
+    <el-menu-item index="1">
+      <el-icon><icon-menu /></el-icon>
+      <span>课程管理</span>
+    </el-menu-item>
+    <el-menu-item index="2">
+      <el-icon><document /></el-icon>
+      <span>用户管理</span>
+    </el-menu-item>
+    <el-menu-item index="3">
+      <el-icon><setting /></el-icon>
+      <span>文件管理</span>
+    </el-menu-item>
+  </el-menu>
+
+</template>
+
+<script lang="ts" setup>
+  import {
+    Document,
+    Menu as IconMenu,
+    Location,
+    Setting,
+  } from '@element-plus/icons-vue'
+  import {ref} from "vue";
+  import router from "@/router";
+  import {ElMessage} from "element-plus";
+
+  let isCollapse = ref(false)
+
+  const handleOpen = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+  }
+
+  const handleClose = (key: string, keyPath: string[]) => {
+    console.log(key, keyPath)
+  }
+
+  const handleSelect = (index: number) => {
+    if(index == 1){
+      router.push(`/manager/course`)
+    } else if(index == 2){
+      router.push(`/manager/user`)
+    } else if(index == 3){
+      router.push(`/manager/file`)
+    } else {
+      ElMessage({
+        message: "菜单出错了",
+        type: "error"
+      })
+    }
+  }
+</script>
+
+<script lang="ts">
+export default {
+  name: "AdminASide"
+}
+</script>
+
+<style scoped>
+  .menu {
+    --el-menu-active-color: var(--admin-color);
+    --el-menu-text-color: #777777
+  }
+
+  .menu-active {
+    width: 200px;
+    min-height: calc(100vh - 50px);
+  }
+</style>

src/layout/AdminLayout/AdminHeader.vue

@@ -0,0 +1,55 @@
+<template>
+
+  <el-row style=" background-color: var(--admin-color); height: 50px">
+
+    <!--logo-->
+    <el-col :span="5" style="height: 100%">
+      <img src="@/image/seecoderLogo_wide.png" alt="logo" style="height: 46px; margin-left: 20px">
+    </el-col>
+
+    <!--系统名称-->
+    <el-col :span="3">
+      <div style=" text-align: center; height: 50px">
+        <span style="height: 50px; line-height: 50px; display: inline-block; font-size: 24px; color: white">EAI后台管理系统</span>
+      </div>
+    </el-col>
+
+    <!--头像和名字-->
+    <el-col :offset="14" :span="2">
+      <el-dropdown style="cursor: pointer">
+        <div style="padding-right: 20px; display: flex; align-items: center">
+          <img style="width: 40px; height: 40px; border-radius: 50%;" :src="store.user.userAvatar" alt="">
+          <span style="margin-left: 5px; color: white">{{ store.user.name }}</span><el-icon color="#fff"><arrow-down /></el-icon>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="router.push('/manager/person')">个人资料</el-dropdown-item>
+            <el-dropdown-item @click="router.push('/manager/password')">修改密码</el-dropdown-item>
+            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </el-col>
+
+  </el-row>
+
+</template>
+
+<script lang="ts" setup>
+  import router from "../../router";
+  import {useStore} from "@/store";
+  import {ArrowDown} from "@element-plus/icons-vue";
+
+  const store = useStore()
+
+  const logout = () => {
+    alert("TODO:logout")
+  }
+
+</script>
+
+<script lang="ts">
+export default {
+  name: "AdminHeader"
+}
+</script>