style: 添加课件

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>