From ca5ca2bb9528c6c4500c9dace4a8ab8931b3af0b Mon Sep 17 00:00:00 2001
From: "Chester.X" <2931709855@qq.com>
Date: Fri, 5 Jul 2024 18:24:26 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E8=A7=82=E5=92=8C=E6=B1=89=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/courseManagement.js                |   7 +
 src/views/authentication/Login.vue            |  33 +++-
 src/views/authentication/Profile.vue          | 162 ++++++++++++------
 src/views/authentication/Register.vue         |  84 +++++++--
 .../course-management/BackgroundWrapper.vue   |  17 ++
 src/views/course-management/CourseList.vue    | 139 +++++++++------
 6 files changed, 313 insertions(+), 129 deletions(-)
 create mode 100644 src/views/course-management/BackgroundWrapper.vue

diff --git a/src/router/courseManagement.js b/src/router/courseManagement.js
index d1d895c..b2d7c1b 100644
--- a/src/router/courseManagement.js
+++ b/src/router/courseManagement.js
@@ -1,5 +1,6 @@
 import Course from '../views/course-management/Course.vue';
 import CourseList from '../views/course-management/CourseList.vue';
+import BackgroundWrapper from "@views/course-management/BackgroundWrapper.vue";
 
 export default [
     {
@@ -12,5 +13,11 @@ export default [
         path: '/courseList',
         name: 'CourseList',
         component: CourseList
+    },
+
+    {
+        path: '/backgroundWrapper',
+        name: 'BackgroundWrapper',
+        component: BackgroundWrapper
     }
 ];
\ No newline at end of file
diff --git a/src/views/authentication/Login.vue b/src/views/authentication/Login.vue
index 7f6ab70..021dc3f 100644
--- a/src/views/authentication/Login.vue
+++ b/src/views/authentication/Login.vue
@@ -18,11 +18,12 @@ const login = async () => {
     const response = await AuthenticationService.login(credentials);
     if (response.status === 200) {
       store.commit('authentication/setUser', { token: response.data.token });
+      router.push("/profile");
+      ElMessage.success('登录成功');
     }
-    router.push("/profile");
   } catch (error) {
-    ElMessage.error('Invalid username or password');
-    console.error("Login error:", error);
+    ElMessage.error('用户名或密码错误');
+    console.error("登录错误:", error);
   }
 };
 
@@ -37,10 +38,10 @@ const goToRegister = () => {
       <h1>用户登录</h1>
       <el-form @submit.prevent="login" label-width="100px">
         <el-form-item label="用户名：">
-          <el-input v-model="credentials.username" id="username"/>
+          <el-input v-model="credentials.username" id="username" class="short-input"/>
         </el-form-item>
         <el-form-item label="密码：">
-          <el-input v-model="credentials.password" id="password" type="password"/>
+          <el-input v-model="credentials.password" id="password" type="password" class="short-input"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" native-type="submit">登录</el-button>
@@ -64,15 +65,29 @@ const goToRegister = () => {
 .login-container {
   max-width: 400px;
   width: 100%;
-  padding: 20px;
+  padding: 30px;
   border: 1px solid #ebeef5;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 
 h1 {
   text-align: center;
+  margin-bottom: 30px;
+  font-size: 24px;
+  color: #333;
+}
+
+.el-form-item {
   margin-bottom: 20px;
 }
+
+.short-input {
+  width: 80%;
+}
+
+.el-button {
+  margin-right: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/authentication/Profile.vue b/src/views/authentication/Profile.vue
index 74dfcda..d61ce4d 100644
--- a/src/views/authentication/Profile.vue
+++ b/src/views/authentication/Profile.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="profile-wrapper">
     <div class="profile-container">
+      <el-button type="danger" @click="confirmLogout" class="logout-button">注销</el-button>
       <el-tabs v-model="activeTab">
         <el-tab-pane label="用户信息" name="userInformation"></el-tab-pane>
         <el-tab-pane label="信息修改" name="profile"></el-tab-pane>
         <el-tab-pane label="更改密码" name="changePassword"></el-tab-pane>
       </el-tabs>
 
-      <div v-if="activeTab === 'userInformation'">
+      <div v-if="activeTab === 'userInformation'" class="user-information">
         <h2>用户信息</h2>
         <div class="user-info">
           <div class="user-details">
@@ -18,25 +19,25 @@
             <p>创建日期: {{ user.createdDate }}</p>
           </div>
           <div class="user-avatar">
-            <img src= '@assets/avatar.jpg' alt="User Avatar" />
+            <img src='@assets/avatar.jpg' alt="用户头像" />
           </div>
         </div>
       </div>
 
-      <div v-if="activeTab === 'profile'">
+      <div v-if="activeTab === 'profile'" class="centered-content">
         <h2>信息修改</h2>
-        <el-form @submit.prevent="updateProfile" label-width="120px" class="profile-form">
+        <el-form @submit.prevent="updateProfile" label-width="120px" class="centered-form profile-form">
           <el-form-item label="用户名：">
-            <el-input v-model="user.username" id="username" disabled />
+            <el-input v-model="user.username" id="username" class="short-input" disabled />
           </el-form-item>
           <el-form-item label="电子邮箱：">
-            <el-input v-model="user.email" id="email" />
+            <el-input v-model="user.email" id="email" class="short-input" />
           </el-form-item>
           <el-form-item label="电话号码：">
-            <el-input v-model="user.phoneNumber" id="phoneNumber" />
+            <el-input v-model="user.phoneNumber" id="phoneNumber" class="short-input" />
           </el-form-item>
           <el-form-item label="所属企业：">
-            <el-input v-model="user.company" id="company" />
+            <el-input v-model="user.company" id="company" class="short-input" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" native-type="submit">更新</el-button>
@@ -44,17 +45,20 @@
         </el-form>
       </div>
 
-      <div v-if="activeTab === 'changePassword'">
+      <div v-if="activeTab === 'changePassword'" class="centered-content">
         <h2>更改密码</h2>
-        <el-form @submit.prevent="changePassword" label-width="120px" class="password-form">
+        <el-form @submit.prevent="changePassword" label-width="120px" class="centered-form password-form">
           <el-form-item label="旧密码：">
-            <el-input v-model="passwords.oldPassword" id="oldPassword" type="password" />
+            <el-input v-model="passwords.oldPassword" :type="showOldPassword ? 'text' : 'password'" class="short-password-input" />
+            <el-button @click="togglePasswordVisibility('oldPassword')">{{ showOldPassword ? '隐藏' : '显示' }}</el-button>
           </el-form-item>
           <el-form-item label="新密码：">
-            <el-input v-model="passwords.newPassword" id="newPassword" type="password" />
+            <el-input v-model="passwords.newPassword" :type="showNewPassword ? 'text' : 'password'" class="short-password-input" />
+            <el-button @click="togglePasswordVisibility('newPassword')">{{ showNewPassword ? '隐藏' : '显示' }}</el-button>
           </el-form-item>
           <el-form-item label="再次确认：">
-            <el-input v-model="passwords.confirmPassword" id="confirmPassword" type="password" />
+            <el-input v-model="passwords.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'" class="short-password-input" />
+            <el-button @click="togglePasswordVisibility('confirmPassword')">{{ showConfirmPassword ? '隐藏' : '显示' }}</el-button>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" native-type="submit">更改</el-button>
@@ -68,10 +72,12 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import { useStore } from 'vuex';
-import { ElMessage } from 'element-plus';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';  // 导入 ElMessageBox
 import AuthenticationService from '../../services/authenticationService';
 
 const store = useStore();
+const router = useRouter();
 const activeTab = ref('userInformation');
 
 const user = ref({
@@ -89,6 +95,10 @@ const passwords = ref({
   confirmPassword: ''
 });
 
+const showOldPassword = ref(false);
+const showNewPassword = ref(false);
+const showConfirmPassword = ref(false);
+
 const token = store.getters['authentication/token'];
 
 const fetchUserInfo = async () => {
@@ -96,24 +106,24 @@ const fetchUserInfo = async () => {
     const response = await AuthenticationService.getUserInfo(token);
     user.value = response.data;
   } catch (error) {
-    console.error("Error fetching user info:", error);
+    console.error("获取用户信息错误:", error);
   }
 };
 
 const updateProfile = async () => {
   try {
     await AuthenticationService.updateUserInfo(user.value);
-    ElMessage.success('Profile updated successfully');
+    ElMessage.success('个人信息更新成功');
     await fetchUserInfo();
   } catch (error) {
-    console.error("Error updating profile:", error);
-    ElMessage.error('Error updating profile');
+    console.error("更新个人信息错误:", error);
+    ElMessage.error('更新个人信息失败');
   }
 };
 
 const changePassword = async () => {
   if (passwords.value.newPassword !== passwords.value.confirmPassword) {
-    ElMessage.error('New password and confirm password do not match');
+    ElMessage.error('新密码和确认密码不一致');
     return;
   }
   try {
@@ -122,13 +132,36 @@ const changePassword = async () => {
       oldPassword: passwords.value.oldPassword,
       newPassword: passwords.value.newPassword
     });
-    ElMessage.success('Password changed successfully');
+    ElMessage.success('密码更改成功');
   } catch (error) {
-    console.error("Error changing password:", error);
-    ElMessage.error('Old password is incorrect');
+    console.error("更改密码错误:", error);
+    ElMessage.error('旧密码错误');
   }
 };
 
+const togglePasswordVisibility = (field) => {
+  if (field === 'oldPassword') {
+    showOldPassword.value = !showOldPassword.value;
+  } else if (field === 'newPassword') {
+    showNewPassword.value = !showNewPassword.value;
+  } else if (field === 'confirmPassword') {
+    showConfirmPassword.value = !showConfirmPassword.value;
+  }
+};
+
+const confirmLogout = () => {
+  ElMessageBox.confirm('是否确认注销?', '注销确认', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(logout).catch(() => {});
+};
+
+const logout = () => {
+  store.commit('authentication/logout');
+  router.push('/login');
+};
+
 onMounted(() => {
   fetchUserInfo();
 });
@@ -136,54 +169,83 @@ onMounted(() => {
 
 <style scoped>
 .profile-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  background-image: url('@public/background2.jpg');
-  background-size: cover;
-  background-position: center;
+display: flex;
+align-items: center;
+justify-content: center;
+height: 100vh;
+background-image: url('@public/background2.jpg');
+background-size: cover;
+background-position: center;
 }
 
 .profile-container {
-  max-width: 600px;
-  width: 100%;
-  padding: 20px;
-  background-color: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+max-width: 600px;
+width: 100%;
+padding: 20px;
+background-color: #fff;
+border-radius: 8px;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+position: relative;
 }
 
 h1, h2 {
-  text-align: center;
-  margin-bottom: 20px;
+text-align: center;
+margin-bottom: 20px;
 }
 
 .profile-form, .password-form {
-  margin-bottom: 30px;
+margin-bottom: 30px;
+}
+
+.centered-content {
+display: flex;
+flex-direction: column;
+align-items: center;
+}
+
+.centered-form {
+width: 100%;
+max-width: 400px;
 }
 
 .user-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  border-top: 1px solid #ebeef5;
-  margin-top: 20px;
+display: flex;
+justify-content: space-between;
+align-items: center;
+padding: 20px 20px 20px 80px;
+border-top: 1px solid #ebeef5;
+margin-top: 20px;
 }
 
 .user-details {
-  flex: 1;
+flex: 1;
+padding-right: 20px;
 }
 
 .user-avatar {
-  margin-left: 20px;
+padding-right: 50px;
 }
 
 .user-avatar img {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  object-fit: cover;
+width: 150px;
+height: 150px;
+border-radius: 50%;
+object-fit: cover;
+}
+
+.short-input {
+width: 90%;
+}
+
+.short-password-input {
+width: 80%;
+}
+
+.logout-button {
+position: absolute;
+top: 10px;
+right: 10px;
+z-index: 1000;
+padding: 10px 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/authentication/Register.vue b/src/views/authentication/Register.vue
index db59247..a306d58 100644
--- a/src/views/authentication/Register.vue
+++ b/src/views/authentication/Register.vue
@@ -1,34 +1,34 @@
 <template>
   <el-container class="register-container">
-    <el-main>
+    <el-main class="register-main">
       <el-card class="register-card">
         <el-header>
           <h2>注册</h2>
         </el-header>
         <el-form @submit.prevent="register" label-position="top" class="register-form">
           <el-form-item label="用户名" required>
-            <el-input type="text" v-model="username"></el-input>
+            <el-input class="form-input" type="text" v-model="username"></el-input>
           </el-form-item>
           <el-form-item label="密码" required>
-            <el-input type="password" v-model="password"></el-input>
+            <el-input class="form-input" type="password" v-model="password"></el-input>
           </el-form-item>
           <el-form-item label="电子邮箱" required>
-            <el-input type="email" v-model="email"></el-input>
+            <el-input class="form-input" type="email" v-model="email"></el-input>
           </el-form-item>
           <el-form-item label="电话号码" required>
-            <el-input type="text" v-model="phoneNumber"></el-input>
+            <el-input class="form-input" type="text" v-model="phoneNumber"></el-input>
           </el-form-item>
           <el-form-item label="所属企业" required>
-            <el-input type="text" v-model="company"></el-input>
+            <el-input class="form-input" type="text" v-model="company"></el-input>
           </el-form-item>
           <el-form-item label="选择身份">
-            <el-select v-model="role" placeholder="Select role">
+            <el-select class="form-input" v-model="role" placeholder="选择身份">
               <el-option label="租户" value="USER"></el-option>
               <el-option label="管理员" value="ADMIN"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="请输入验证码" required>
-            <el-input type="text" v-model="verificationCode"></el-input>
+            <el-input class="form-input" type="text" v-model="verificationCode"></el-input>
             <el-button class="verification-button" type="primary" @click="getVerificationCode">获取验证码</el-button>
           </el-form-item>
           <el-form-item>
@@ -64,8 +64,28 @@ const getVerificationCode = async () => {
 };
 
 const register = async () => {
+  if (!username.value) {
+    ElMessage.error('用户名不能为空！');
+    return;
+  }
+  if (!password.value) {
+    ElMessage.error('密码不能为空！');
+    return;
+  }
+  if (!email.value) {
+    ElMessage.error('电子邮箱不能为空！');
+    return;
+  }
+  if (!phoneNumber.value) {
+    ElMessage.error('电话号码不能为空！');
+    return;
+  }
+  if (!company.value) {
+    ElMessage.error('所属企业不能为空！');
+    return;
+  }
   if (!verificationCode.value) {
-    message.value = '验证码不能为空！';
+    ElMessage.error('验证码不能为空！');
     return;
   }
   try {
@@ -80,7 +100,7 @@ const register = async () => {
     message.value = response.data.message;
     router.push('/login');
   } catch (error) {
-    console.error("Registration failed:", error.response.data.message);
+    console.error("注册失败:", error.response.data.message);
     message.value = error.response.data.message;
   }
 };
@@ -93,7 +113,6 @@ const goToLogin = () => {
 <style scoped>
 .register-container {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
@@ -101,7 +120,12 @@ const goToLogin = () => {
   background-size: cover;
   background-position: center;
   padding: 20px;
-  overflow: hidden;
+}
+
+.register-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
 }
 
@@ -111,11 +135,18 @@ const goToLogin = () => {
   border-radius: 8px;
   background-color: white;
   width: 100%;
-  max-width: 300px;
+  max-width: 350px; /* 调整卡片的宽度 */
+  overflow: hidden;
 }
 
 .register-form {
   width: 100%;
+  max-height: 400px;
+  overflow-y: auto; /* 使表单内容可滚动 */
+}
+
+.el-form-item {
+  margin-bottom: 15px; /* 调整表单项之间的间距 */
 }
 
 .el-header h2 {
@@ -123,11 +154,36 @@ const goToLogin = () => {
   margin: 0 0 20px;
 }
 
+.form-input {
+  width: calc(100% - 12px); /* 调整输入框的宽度，与滚动条保持距离 */
+  padding-right: 12px; /* 增加右侧内边距 */
+  box-sizing: border-box; /* 确保宽度包含内边距 */
+}
+
 .verification-button {
-  margin-top: 20px;
+  margin-top: 10px; /* 调整验证码按钮上方的间距 */
 }
 
 .el-alert {
   margin-top: 20px;
 }
+
+/* 自定义滚动条样式 */
+.register-form::-webkit-scrollbar {
+  width: 8px; /* 滚动条宽度 */
+}
+
+.register-form::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道颜色 */
+  border-radius: 10px;
+}
+
+.register-form::-webkit-scrollbar-thumb {
+  background: #888; /* 滚动条滑块颜色 */
+  border-radius: 10px;
+}
+
+.register-form::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条滑块在悬停时的颜色 */
+}
 </style>
\ No newline at end of file
diff --git a/src/views/course-management/BackgroundWrapper.vue b/src/views/course-management/BackgroundWrapper.vue
new file mode 100644
index 0000000..969eac9
--- /dev/null
+++ b/src/views/course-management/BackgroundWrapper.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="background-wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.background-wrapper {
+  background: url('@public/background2.jpg') no-repeat center center fixed;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/course-management/CourseList.vue b/src/views/course-management/CourseList.vue
index 7f58b68..46772ec 100644
--- a/src/views/course-management/CourseList.vue
+++ b/src/views/course-management/CourseList.vue
@@ -5,6 +5,7 @@ import axios from "axios";
 import { useStore } from "vuex";
 import { useRouter } from "vue-router";
 import Course from "@views/course-management/Course.vue";
+import BackgroundWrapper from './BackgroundWrapper.vue';
 
 const router = useRouter();
 const store = useStore();
@@ -31,7 +32,7 @@ const loadCourses = async (forceReload = false) => {
     allCoursesData.value = [];
   }
 
-  if (firstTimeLoad.value || allCoursesData.value.length < (currentPage.value * pageSize.value) && (currentPage.value * pageSize.value) <= coursesCount) {
+  if (firstTimeLoad.value || allCoursesData.value.length < (currentPage.value * pageSize.value) && (currentPage.value * pageSize.value) <= coursesCount.value) {
     let params = {
       token: token,
       start: allCoursesData.value.length,
@@ -59,7 +60,7 @@ const handleSearch = async () => {
     const response = await axios.get('/api/courses/search', {
       params: {
         token: token,
-        title: searchTitle.value || '', // 如果为空则传递空字符串
+        title: searchTitle.value || '',
         author: searchAuthor.value || '',
         description: searchDescription.value || '',
         sortOrder: sortOrder.value || '',
@@ -98,6 +99,10 @@ const handleSort = async () => {
       }
     });
     const data = response.data;
+
+    // 检查返回的数据是否按预期排序
+    console.log(data.courseList);
+
     coursesCount.value = data.courseCount;
     allCoursesData.value = data.courseList;
     coursesData.value = allCoursesData.value.slice(0, pageSize.value);
@@ -164,69 +169,91 @@ const handleDeleteInTable = async (index) => {
 </script>
 
 <template>
-  <div class="container">
-    <div class="search-container">
-      <el-form inline>
-        <el-form-item label="课程名称">
-          <el-input v-model="searchTitle" placeholder="请输入课程名称" />
-        </el-form-item>
-        <el-form-item label="排序">
-          <el-input v-model="sortOrder" placeholder="请输入排序" />
-        </el-form-item>
-        <el-form-item label="作者">
-          <el-input v-model="searchAuthor" placeholder="请输入作者" />
-        </el-form-item>
-        <el-form-item label="课程简介">
-          <el-input v-model="searchDescription" placeholder="请输入简介" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleReset">重置</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
+  <BackgroundWrapper>
+    <div class="center-wrapper">
+      <div class="container">
+        <div class="search-container">
+          <el-form inline>
+            <el-form-item label="课程名称">
+              <el-input v-model="searchTitle" placeholder="请输入课程名称" />
+            </el-form-item>
+            <el-form-item label="排序">
+              <el-input v-model="sortOrder" placeholder="请输入排序" />
+            </el-form-item>
+            <el-form-item label="作者">
+              <el-input v-model="searchAuthor" placeholder="请输入作者" />
+            </el-form-item>
+            <el-form-item label="课程简介">
+              <el-input v-model="searchDescription" placeholder="请输入简介" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
 
-    <div class="button-container">
-      <el-button type="success" @click="router.push('/course?mode=create')">新增</el-button>
-      <el-button type="warning" @click="handleEditButton">修改</el-button>
-      <el-button type="danger" @click="handleDeleteButton">删除</el-button>
-      <el-button type="info" @click="handleSort">排序</el-button>
-    </div>
+        <div class="button-container">
+          <el-button type="success" @click="router.push('/course?mode=create')">新增</el-button>
+          <el-button type="warning" @click="handleEditButton">修改</el-button>
+          <el-button type="danger" @click="handleDeleteButton">删除</el-button>
+          <el-button type="info" @click="handleSort">排序</el-button>
+        </div>
 
-    <el-table :data="coursesData" style="width: 100%;" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55"></el-table-column>
-      <el-table-column prop="orderNo" label="排序" align="center"></el-table-column>
-      <el-table-column prop="title" label="课程名称" align="center"></el-table-column>
-      <el-table-column prop="author" label="作者" align="center"></el-table-column>
-      <el-table-column prop="description" label="课程简介" align="center"></el-table-column>
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
-          <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+        <el-table :data="coursesData" style="width: 100%;" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55"></el-table-column>
+          <el-table-column prop="orderNo" label="排序" align="center"></el-table-column>
+          <el-table-column prop="title" label="课程名称" align="center"></el-table-column>
+          <el-table-column prop="author" label="作者" align="center"></el-table-column>
+          <el-table-column prop="description" label="课程简介" align="center"></el-table-column>
+          <el-table-column label="操作" align="center">
+            <template #default="scope">
+              <el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
+              <el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
 
-    <div class="pagination-container">
-      <el-pagination
-          @size-change="pageSize = $event; loadCourses(true)"
-          @current-change="currentPage = $event; loadCourses(true)"
-          :current-page="currentPage"
-          :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="coursesCount"
-          :page-sizes="[10, 20, 50, 100]"
-      >
-      </el-pagination>
+        <div class="pagination-container">
+          <el-pagination
+              @size-change="pageSize = $event; loadCourses(true)"
+              @current-change="currentPage = $event; loadCourses(true)"
+              :current-page="currentPage"
+              :page-size="pageSize"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="coursesCount"
+              :page-sizes="[10, 20, 50, 100]"
+          >
+          </el-pagination>
+        </div>
+      </div>
     </div>
-  </div>
+  </BackgroundWrapper>
 </template>
 
 <style scoped>
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.center-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
 .container {
   padding: 20px;
+  background: rgba(255, 255, 255, 0.8); /* 为了让内容清晰，可加上一层半透明白色背景 */
+  border-radius: 15px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-width: 800px; /* 控制页面内容宽度 */
+  width: 100%;
 }
 
 .search-container {