From 56f5e7077ec65ec0dcf1c8cdaf5babc053968dcf Mon Sep 17 00:00:00 2001
From: guoan <2394128749@qq.com>
Date: Fri, 22 Aug 2025 19:59:17 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=B7=BB=E5=8A=A0=E8=AF=BE=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../teacher/course/CoursewareManagement.vue   | 40 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/views/teacher/course/CoursewareManagement.vue b/src/views/teacher/course/CoursewareManagement.vue
index 9054447..4a28c5b 100644
--- a/src/views/teacher/course/CoursewareManagement.vue
+++ b/src/views/teacher/course/CoursewareManagement.vue
@@ -56,6 +56,13 @@
         </div>
       </div>
     </div>
+
+    <!-- 添加课件模态框 -->
+    <div v-if="showAddCoursewareModal" class="modal-overlay" @click="closeModal">
+      <div class="modal-wrapper" @click.stop>
+        <AddCoursewareModal @close="closeModal" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -63,9 +70,13 @@
 import { ref, computed, h, onMounted, onUnmounted } from 'vue'
 import { NButton, NDropdown, NTag, useMessage, NDataTable, NConfigProvider, zhCN, dateZhCN } from 'naive-ui'
 import type { DataTableColumns, DropdownOption } from 'naive-ui'
+import AddCoursewareModal from './AddCoursewareModal.vue'
 
 const message = useMessage()
 
+// 控制模态框显示
+const showAddCoursewareModal = ref(false)
+
 // 文件类型定义
 interface FileItem {
   id: number
@@ -551,7 +562,7 @@ const columns = computed((): DataTableColumns<FileItem> => [
 
 // 文件操作方法
 const addCourseware = () => {
-  message.info('添加课件功能')
+  showAddCoursewareModal.value = true
 }
 
 const createFolder = () => {
@@ -678,6 +689,11 @@ const toggleFolder = (folder: FileItem) => {
     folder.expanded = !folder.expanded
   }
 }
+
+// 关闭模态框
+const closeModal = () => {
+  showAddCoursewareModal.value = false
+}
 </script>
 
 <style scoped>
@@ -1245,4 +1261,26 @@ const toggleFolder = (folder: FileItem) => {
   white-space: nowrap;
   display: inline-block;
 }
+
+/* 模态框样式 */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
 </style>