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

src/layout/AdminLayout/AdminLayout.vue

@@ -0,0 +1,47 @@
+<template>
+<!--  <div class="wrapper">-->
+    <el-container style="height: 100vh">
+      <el-header height="50px" style="padding: 0;" class="fixed-header">
+        <AdminHeader/>
+      </el-header>
+
+      <el-container style="margin-top: 50px">
+        <el-aside style="width: fit-content">
+          <AdminASide/>
+        </el-aside>
+        <el-main style="background-color: white">
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+<!--  </div>-->
+</template>
+
+<script lang="ts" setup>
+
+import AdminHeader from "@/layout/AdminLayout/AdminHeader.vue";
+import AdminASide from "@/layout/AdminLayout/AdminASide.vue";
+</script>
+
+<script lang="ts">
+export default {
+  name: "AdminLayout"
+}
+</script>
+
+<style scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+}
+.fixed-header {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000; /* 确保 header 在内容之上 */
+  padding: 0;
+  height: 40px;
+}
+</style>

src/views/AdminPage/CourseManage/CourseManage.vue

@@ -0,0 +1,17 @@
+<template>
+  课程管理
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<script lang="ts">
+  export default {
+    name: "CourseManage"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/AdminPage/FileManage/FileManage.vue

@@ -0,0 +1,17 @@
+<template>
+  文件管理
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<script lang="ts">
+  export default {
+    name: "CourseManage"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/AdminPage/LoginPage/AdminLoginPage.vue

@@ -0,0 +1,33 @@
+<!--
+  Description: 管理员登录页面
+  Author: BaiQi
+  Created Date: 2024-10-29
+-->
+
+<template>
+  <div class="login-container">
+    <div class="container-box">
+      <div class="login-logo">
+        <div class="logo-image">
+          <img src="@/image/seecoderLogo.png" alt="logo" width="400vh">
+        </div>
+      </div>
+      <div class="login-box">
+        <div class="box-content" style="height: 300px">
+          <AdminLoginForm/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import "@/views/LoginPage/index.scss"
+import AdminLoginForm from "@/views/AdminPage/LoginPage/component/AdminLoginForm.vue";
+</script>
+
+<script lang="ts">
+  export default {
+    name: "AdminLoginPage"
+  }
+</script>

src/views/AdminPage/LoginPage/component/AdminLoginForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="login-style">
+    <div class="box-vessel">
+      <div class="vessel-title">
+        账号登录
+      </div>
+      <el-form
+          :model="data"
+          :rules="rules"
+          ref="form"
+          label-width="0"
+      >
+        <el-form-item prop="account">
+          <el-input
+              v-model="data.account"
+              placeholder="请输入账号"
+          />
+        </el-form-item>
+        <el-form-item prop="password">
+            <el-input
+                v-model="data.password"
+                placeholder="请输入密码"
+                show-password
+            />
+        </el-form-item>
+        <el-form-item>
+          <el-button class="login-button" @click="handleLogin">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import "@/views/LoginPage/component/index.scss"
+  import {reactive} from "vue";
+  import router from "@/router";
+  import {ElMessage} from "element-plus";
+  import {useStore} from "@/store";
+  import useApis from "@/apis";
+
+  const store = useStore();
+  const apis = useApis();
+
+  const data = reactive({
+    account: '',
+    password: '',
+  });
+
+  const rules = reactive({
+    account: [
+      { required: true, message: '账号不能为空', trigger: 'blur' },
+    ],
+    password: [
+      { required: true, message: '密码不能为空', trigger: 'blur' },
+    ],
+  });
+
+  const handleLogin = () => {
+
+    //1.判断是不是管理员账号
+    if(data.account != "ADMIN"){
+      ElMessage({
+        message: '用户名或密码错误',
+        type: 'error',
+      })
+      return;
+    }
+
+    // 2.登录
+    apis.login({officialNumber: data.account, password: data.password})
+        .then((_res:any) => {
+          const data = _res.data.data
+          if (_res.data.code === 200) {
+            store.setUser(data);
+            store.setToken(data?.token)
+            localStorage.setItem('Authorization', data?.token);
+            localStorage.setItem('User', data);
+            // router.push("/")
+            ElMessage({
+              message: '登录成功',
+              type: 'success',
+            })
+            router.push(`/manager/course`)
+          } else if(_res.data.code === 400){
+            ElMessage({
+              message: '用户名或密码错误',
+              type: 'error',
+            })
+          }
+        })
+        .catch((_err:any) => {
+          ElMessage({
+            message: '网络错误',
+            type: 'error',
+          })
+          console.log("登陆失败", _err)
+        })
+      };
+
+</script>
+
+<script lang="ts">
+export default {
+  name: "AdminLoginForm"
+}
+</script>

src/views/AdminPage/UserManage/UserManage.vue

@@ -0,0 +1,17 @@
+<template>
+  用户管理
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<script lang="ts">
+  export default {
+    name: "CourseManage"
+  }
+</script>
+
+<style scoped>
+
+</style>