From 351806d05f37e65038964d95202c8580985a16c5 Mon Sep 17 00:00:00 2001
From: "Chester.X" <2931709855@qq.com>
Date: Fri, 5 Jul 2024 19:18:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=85=A8=E4=BD=93=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E6=94=B9=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                          | 247 +++++++++++++++------
 package.json                               |   8 +-
 src/views/course-management/Course.vue     | 247 +++++++++++++--------
 src/views/course-management/CourseList.vue | 152 ++++++++-----
 4 files changed, 437 insertions(+), 217 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d2b98ea..87b3567 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,19 +11,21 @@
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.2",
         "element-plus": "^2.7.6",
-        "vue": "^3.4.29",
+        "file-saver": "^2.0.5",
+        "vue": "^3.4.31",
         "vue-router": "^4.4.0",
         "vuex": "^4.1.0",
-        "vuex-persistedstate": "^4.1.0"
+        "vuex-persistedstate": "^4.1.0",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.5",
-        "vite": "^5.3.1"
+        "vite": "^5.3.3"
       }
     },
     "node_modules/@babel/parser": {
       "version": "7.24.7",
-      "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.24.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.7.tgz",
       "integrity": "sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==",
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -440,7 +442,7 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
-      "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@popperjs/core": {
@@ -699,36 +701,36 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
-      "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
+      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.30",
+        "@vue/shared": "3.4.31",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
-      "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
+      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-core": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
-      "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
+      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.30",
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/compiler-core": "3.4.31",
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
         "postcss": "^8.4.38",
@@ -736,12 +738,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
-      "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
+      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -750,49 +752,49 @@
       "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.4.30.tgz",
-      "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
+      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
       "dependencies": {
-        "@vue/shared": "3.4.30"
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
-      "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
+      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/reactivity": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
-      "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
+      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.30",
-        "@vue/runtime-core": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/reactivity": "3.4.31",
+        "@vue/runtime-core": "3.4.31",
+        "@vue/shared": "3.4.31",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
-      "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
+      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31"
       },
       "peerDependencies": {
-        "vue": "3.4.30"
+        "vue": "3.4.31"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.30.tgz",
-      "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg=="
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
+      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
     },
     "node_modules/@vueuse/core": {
       "version": "9.13.0",
@@ -877,6 +879,14 @@
         }
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
@@ -897,6 +907,26 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -908,9 +938,20 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/dayjs": {
@@ -961,7 +1002,7 @@
     },
     "node_modules/entities": {
       "version": "4.5.0",
-      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
       "engines": {
         "node": ">=0.12"
@@ -1015,9 +1056,14 @@
     },
     "node_modules/estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.6",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
@@ -1050,6 +1096,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -1086,7 +1140,7 @@
     },
     "node_modules/magic-string": {
       "version": "0.30.10",
-      "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.10.tgz",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
       "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -1118,7 +1172,7 @@
     },
     "node_modules/nanoid": {
       "version": "3.3.7",
-      "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
@@ -1140,13 +1194,13 @@
     },
     "node_modules/picocolors": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
       "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
       "funding": [
         {
           "type": "opencollective",
@@ -1163,7 +1217,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
@@ -1218,20 +1272,31 @@
     },
     "node_modules/source-map-js": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/vite": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.3.1.tgz",
-      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
+      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.38",
+        "postcss": "^8.4.39",
         "rollup": "^4.13.0"
       },
       "bin": {
@@ -1280,15 +1345,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.30.tgz",
-      "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
+      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-sfc": "3.4.30",
-        "@vue/runtime-dom": "3.4.30",
-        "@vue/server-renderer": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-sfc": "3.4.31",
+        "@vue/runtime-dom": "3.4.31",
+        "@vue/server-renderer": "3.4.31",
+        "@vue/shared": "3.4.31"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -1336,6 +1401,42 @@
       "peerDependencies": {
         "vuex": "^3.0 || ^4.0.0-rc"
       }
+    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 831b327..68dcd33 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,15 @@
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.7.2",
     "element-plus": "^2.7.6",
-    "vue": "^3.4.29",
+    "file-saver": "^2.0.5",
+    "vue": "^3.4.31",
     "vue-router": "^4.4.0",
     "vuex": "^4.1.0",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
-    "vite": "^5.3.1"
+    "vite": "^5.3.3"
   }
 }
diff --git a/src/views/course-management/Course.vue b/src/views/course-management/Course.vue
index ee47a1e..40a1a78 100644
--- a/src/views/course-management/Course.vue
+++ b/src/views/course-management/Course.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {onMounted, ref} from 'vue';
+import {onMounted, ref, computed} from 'vue';
 import {
   ElButton,
   ElForm,
@@ -7,8 +7,6 @@ import {
   ElInput,
   ElMessage,
   ElMessageBox,
-  ElOption,
-  ElSelect,
   ElUpload
 } from 'element-plus';
 
@@ -16,6 +14,7 @@ import {Delete, Plus, Refresh, ZoomIn} from "@element-plus/icons-vue";
 import {useRoute, useRouter} from "vue-router";
 import {useStore} from "vuex";
 import axios from "axios";
+import BackgroundWrapper from './BackgroundWrapper.vue';  // 导入 BackgroundWrapper
 
 const route = useRoute();
 const router = useRouter();
@@ -123,6 +122,10 @@ const handleCommit = async () => {
     await ElMessageBox.alert('请填写完整信息！');
     return;
   }
+  if (isNaN(form.value.orderNo)) {
+    await ElMessageBox.alert('排序必须是一个数字！');
+    return;
+  }
   if (imageFileList.value.length === 0 || videoFileList.value.length === 0) {
     await ElMessageBox.alert('请选择封面图片和课程视频！');
     return;
@@ -166,6 +169,15 @@ const fetchCourseDetail = async () => {
   videoFileList.value.push({url: res.data.videoPath});
 }
 
+const orderNo = computed({
+  get() {
+    return form.value.orderNo;
+  },
+  set(value) {
+    form.value.orderNo = value.replace(/\D/g, ''); // 只保留数字
+  }
+});
+
 onMounted(() => {
   token.value = store.getters['authentication/token'];
   form.value.token = token.value;
@@ -184,29 +196,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="form-container">
-    <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
-      <h2>{{ modeTitle }}</h2>
-      <ElFormItem label="课程名称" required>
-        <ElInput v-model="form.title" placeholder="请输入课程名称" required></ElInput>
-      </ElFormItem>
-      <ElFormItem label="课程封面" required>
-        <el-upload
-            :action="imageUploadUrl"
-            :limit="2"
-            :before-upload="beforeImageUpload"
-            :on-success="handleImageSuccess"
-            :on-error="handleImageError"
-            :on-change="handleImageChange"
-            :file-list="imageFileList"
-            list-type="picture-card"
-            auto-upload
-            v-model:file-list="imageFileList"
-        >
-          <template #file="{ file }">
-            <div>
-              <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
-              <span class="el-upload-list__item-actions">
+  <BackgroundWrapper class="background-wrapper">
+    <div class="form-container">
+      <ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
+        <h2>{{ modeTitle }}</h2>
+        <ElFormItem label="课程名称" required>
+          <ElInput v-model="form.title" placeholder="请输入课程名称" required></ElInput>
+        </ElFormItem>
+        <ElFormItem label="课程封面" required>
+          <el-upload
+              :action="imageUploadUrl"
+              :limit="2"
+              :before-upload="beforeImageUpload"
+              :on-success="handleImageSuccess"
+              :on-error="handleImageError"
+              :on-change="handleImageChange"
+              :file-list="imageFileList"
+              list-type="picture-card"
+              auto-upload
+              v-model:file-list="imageFileList"
+          >
+            <template #file="{ file }">
+              <div>
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
+                <span class="el-upload-list__item-actions">
           <span
               class="el-upload-list__item-preview"
               @click="handlePictureCardPreview(file)"
@@ -220,36 +233,36 @@ onMounted(() => {
             <el-icon><Delete/></el-icon>
           </span>
         </span>
-            </div>
-          </template>
-          <el-icon v-if="imageFileList.length === 0">
-            <Plus/>
-          </el-icon>
-          <el-icon v-else>
-            <Refresh/>
-          </el-icon>
-        </el-upload>
-        <div class="tip">
-          请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
-        </div>
-      </ElFormItem>
-      <ElFormItem label="课程视频" required>
-        <el-upload
-            :action="videoUploadUrl"
-            :limit="2"
-            :before-upload="beforeVideoUpload"
-            :on-success="handleVideoSuccess"
-            :on-error="handleVideoError"
-            :on-change="handleVideoChange"
-            :file-list="videoFileList"
-            list-type="picture-card"
-            auto-upload
-            v-model:file-list="videoFileList"
-        >
-          <template #file="{ file }">
-            <div>
-              <video class="el-upload-list__item-thumbnail" :src="file.url" controls></video>
-              <span class="el-upload-list__item-actions">
+              </div>
+            </template>
+            <el-icon v-if="imageFileList.length === 0">
+              <Plus/>
+            </el-icon>
+            <el-icon v-else>
+              <Refresh/>
+            </el-icon>
+          </el-upload>
+          <div class="tip">
+            请上传大小不超过 <span style="color: red;">5MB</span> 格式为 <span style="color: red;">png/jpg/jpeg</span> 的文件
+          </div>
+        </ElFormItem>
+        <ElFormItem label="课程视频" required>
+          <el-upload
+              :action="videoUploadUrl"
+              :limit="2"
+              :before-upload="beforeVideoUpload"
+              :on-success="handleVideoSuccess"
+              :on-error="handleVideoError"
+              :on-change="handleVideoChange"
+              :file-list="videoFileList"
+              list-type="picture-card"
+              auto-upload
+              v-model:file-list="videoFileList"
+          >
+            <template #file="{ file }">
+              <div>
+                <video class="el-upload-list__item-thumbnail" :src="file.url" controls></video>
+                <span class="el-upload-list__item-actions">
           <span
               class="el-upload-list__item-delete"
               @click="handleRemoveVideo(file)"
@@ -257,47 +270,80 @@ onMounted(() => {
             <el-icon><Delete/></el-icon>
           </span>
         </span>
-            </div>
-          </template>
-          <el-icon v-if="videoFileList.length === 0">
-            <Plus/>
-          </el-icon>
-          <el-icon v-else>
-            <Refresh/>
-          </el-icon>
-        </el-upload>
-        <div class="tip">
-          请上传大小不超过 <span style="color: red;">500MB</span> 格式为 <span style="color: red;">mp4</span> 的文件
-        </div>
-      </ElFormItem>
-      <ElFormItem label="课程简介" required>
-        <ElInput v-model="form.description" placeholder="请输入课程简介" required></ElInput>
-      </ElFormItem>
-      <ElFormItem label="课程排序" required>
-      <ElInput v-model="form.orderNo" placeholder="请输入课程排序" required></ElInput>
-      </ElFormItem>
-      <ElFormItem label="作者" required>
-        <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
-      </ElFormItem>
-      <ElFormItem>
-        <ElButton type="primary" native-type="submit">确定</ElButton>
-        <ElButton @click="router.push('/courseList')">取消</ElButton>
-      </ElFormItem>
-    </ElForm>
-  </div>
+              </div>
+            </template>
+            <el-icon v-if="videoFileList.length === 0">
+              <Plus/>
+            </el-icon>
+            <el-icon v-else>
+              <Refresh/>
+            </el-icon>
+          </el-upload>
+          <div class="tip">
+            请上传大小不超过 <span style="color: red;">500MB</span> 格式为 <span style="color: red;">mp4</span> 的文件
+          </div>
+        </ElFormItem>
+        <ElFormItem label="课程简介" required>
+          <ElInput v-model="form.description" placeholder="请输入课程简介" required></ElInput>
+        </ElFormItem>
+        <ElFormItem label="课程排序" required>
+          <ElInput v-model="orderNo" placeholder="请输入课程排序（数字）" required></ElInput>
+        </ElFormItem>
+        <ElFormItem label="作者" required>
+          <ElInput v-model="form.author" placeholder="请输入作者" required></ElInput>
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton type="primary" native-type="submit">确定</ElButton>
+          <ElButton @click="router.push('/courseList')">取消</ElButton>
+        </ElFormItem>
+      </ElForm>
+    </div>
 
-  <el-dialog v-model="dialogVisible" class="image-preview">
-    <img w-full :src="dialogImageUrl" alt="Preview Image"/>
-  </el-dialog>
+    <el-dialog v-model="dialogVisible" class="image-preview">
+      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
+    </el-dialog>
+  </BackgroundWrapper>
 </template>
 
 <style scoped>
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+.background-wrapper {
+  position: fixed;  /* 确保背景覆盖整个视口 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* 只在内容溢出时允许滚动 */
+  /* 自定义滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #007bff #f0f0f0;
+}
+
+/* 针对 Webkit 浏览器的自定义滚动条 */
+.background-wrapper::-webkit-scrollbar {
+  width: 8px;
+}
+
+.background-wrapper::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 10px;
+}
+
+.background-wrapper::-webkit-scrollbar-thumb {
+  background-color: #007bff;
+  border-radius: 10px;
+  border: 3px solid #f0f0f0;
+}
+
 .form-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  background: white;
+  height: 100%;
   overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
 }
 
@@ -323,9 +369,28 @@ onMounted(() => {
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 55%;
+  width: 65%;  /* 增加宽度 */
   max-height: 90vh; /* 确保表单不会超过视口高度 */
   overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
+  /* 自定义滚动条样式 */
+  scrollbar-width: thin;
+  scrollbar-color: #007bff #f0f0f0;
+}
+
+/* 针对 Webkit 浏览器的自定义滚动条 */
+.el-form::-webkit-scrollbar {
+  width: 8px;
+}
+
+.el-form::-webkit-scrollbar-track {
+  background: #f0f0f0;
+  border-radius: 10px;
+}
+
+.el-form::-webkit-scrollbar-thumb {
+  background-color: #007bff;
+  border-radius: 10px;
+  border: 3px solid #f0f0f0;
 }
 
 .el-form-item {
@@ -340,7 +405,7 @@ onMounted(() => {
 
 .el-input,
 .el-select {
-  width: 100%;
+  width: calc(100% - 12px);  /* 设置文本框宽度，使其与滚动条保持一定距离 */
 }
 
 .el-button--primary {
diff --git a/src/views/course-management/CourseList.vue b/src/views/course-management/CourseList.vue
index 46772ec..2192873 100644
--- a/src/views/course-management/CourseList.vue
+++ b/src/views/course-management/CourseList.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn } from 'element-plus';
+import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, ElPagination, ElTable, ElTableColumn } from 'element-plus';
 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';
+import _ from 'lodash';
+import { write, utils } from 'xlsx';
+import { saveAs } from 'file-saver';
 
 const router = useRouter();
 const store = useStore();
@@ -88,29 +91,44 @@ const handleReset = async () => {
 };
 
 const handleSort = async () => {
-  try {
-    const response = await axios.get('/api/courses/sort', {
-      params: {
-        token: token,
-        sortField: 'orderNo',
-        sortDirection: 'asc',
-        start: 0,
-        end: pageSize.value
-      }
-    });
-    const data = response.data;
+  // 将所有课程的排序字段转换成数值
+  const sortedCourses = _.cloneDeep(allCoursesData.value).map(course => ({
+    ...course,
+    orderNo: Number(course.orderNo)
+  })).sort((a, b) => a.orderNo - b.orderNo);
 
-    // 检查返回的数据是否按预期排序
-    console.log(data.courseList);
+  // 更新所有课程的数据
+  allCoursesData.value = sortedCourses;
 
-    coursesCount.value = data.courseCount;
-    allCoursesData.value = data.courseList;
-    coursesData.value = allCoursesData.value.slice(0, pageSize.value);
-    currentPage.value = 1;
-    firstTimeLoad.value = false;
-  } catch (e) {
-    console.error(e);
-  }
+  // 计算当前分页的数据
+  const start = (currentPage.value - 1) * pageSize.value;
+  const end = start + pageSize.value;
+  coursesData.value = allCoursesData.value.slice(start, end);
+};
+
+const handleExport = () => {
+  // 创建一个新的工作簿
+  const workbook = utils.book_new();
+
+  // 创建工作表数据，提取 allCoursesData
+  const sheetData = allCoursesData.value.map(course => ({
+    '课程名称': course.title,
+    '作者': course.author,
+    '课程简介': course.description,
+    '排序': course.orderNo
+  }));
+
+  // 将数据放入工作表
+  const worksheet = utils.json_to_sheet(sheetData);
+
+  // 将工作表添加到工作簿中
+  utils.book_append_sheet(workbook, worksheet, 'Courses');
+
+  // 生成 Excel 文件
+  const wbout = write(workbook, { bookType: 'xlsx', type: 'array' });
+
+  // 使用 file-saver 保存文件
+  saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '课程信息.xlsx');
 };
 
 const handleEditButton = () => {
@@ -132,18 +150,31 @@ const handleDeleteButton = async () => {
     ElMessage.warning('请先选择要删除的课程');
     return;
   }
-  try {
-    const deletePromises = selections.value.map(selection =>
-        axios.delete(`/api/courses/${selection.id}`, { params: { token: token } })
-    );
-    await Promise.all(deletePromises);
-    ElMessage.success('删除成功');
-    selections.value = []; // 清空选中项
-    await loadCourses(true); // 强制重新加载课程数据
-  } catch (e) {
-    ElMessage.error('删除失败');
-    console.error(e);
-  }
+
+  ElMessageBox.confirm(
+      '是否确认删除选中的课程？此操作不可撤销。',
+      '确认删除',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    try {
+      const deletePromises = selections.value.map(selection =>
+          axios.delete(`/api/courses/${selection.id}`, { params: { token: token } })
+      );
+      await Promise.all(deletePromises);
+      ElMessage.success('删除成功');
+      selections.value = []; // 清空选中项
+      await loadCourses(true); // 强制重新加载课程数据
+    } catch (e) {
+      ElMessage.error('删除失败');
+      console.error(e);
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除操作');
+  });
 };
 
 const handleSelectionChange = (newSelections) => {
@@ -155,21 +186,33 @@ const handleEditInTable = (index) => {
 };
 
 const handleDeleteInTable = async (index) => {
-  try {
-    await axios.delete(`/api/courses/${coursesData.value[index].id}`, { params: { token: token } });
-    coursesData.value.splice(index, 1);
-    allCoursesData.value.splice(index, 1);
-    coursesCount.value--;
-    await loadCourses(true); // 强制重新加载课程数据
-  } catch (e) {
-    ElMessage.error('删除失败');
-    console.error(e);
-  }
+  ElMessageBox.confirm(
+      '是否确认删除该课程？此操作不可撤销。',
+      '确认删除',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(async () => {
+    try {
+      await axios.delete(`/api/courses/${coursesData.value[index].id}`, { params: { token: token } });
+      coursesData.value.splice(index, 1);
+      allCoursesData.value.splice(index, 1);
+      coursesCount.value--;
+      await loadCourses(true); // 强制重新加载课程数据
+    } catch (e) {
+      ElMessage.error('删除失败');
+      console.error(e);
+    }
+  }).catch(() => {
+    ElMessage.info('已取消删除操作');
+  });
 };
 </script>
 
 <template>
-  <BackgroundWrapper>
+  <BackgroundWrapper class="background-wrapper">
     <div class="center-wrapper">
       <div class="container">
         <div class="search-container">
@@ -200,6 +243,7 @@ const handleDeleteInTable = async (index) => {
           <el-button type="warning" @click="handleEditButton">修改</el-button>
           <el-button type="danger" @click="handleDeleteButton">删除</el-button>
           <el-button type="info" @click="handleSort">排序</el-button>
+          <el-button type="primary" @click="handleExport">导出</el-button>
         </div>
 
         <el-table :data="coursesData" style="width: 100%;" @selection-change="handleSelectionChange">
@@ -239,6 +283,15 @@ html, body {
   margin: 0;
 }
 
+.background-wrapper {
+  position: fixed;  /* 确保背景覆盖整个视口 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* 只在内容溢出时允许滚动 */
+}
+
 .center-wrapper {
   display: flex;
   justify-content: center;
@@ -259,23 +312,22 @@ html, body {
 .search-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
-  margin-bottom: 20px;
+  gap: 10px;
 }
 
 .button-container {
   display: flex;
   gap: 10px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .el-table {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .pagination-container {
   display: flex;
   justify-content: flex-end;
-  margin-top: 20px;
+  margin-bottom: -10px;
 }
 </style>
\ No newline at end of file