From f888b0b45882ec3ff15f27810e733a78ee4e2203 Mon Sep 17 00:00:00 2001
From: QDKF <QDKF@project.com>
Date: Tue, 2 Sep 2025 18:39:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=EF=BC=8C=E7=BC=96=E8=BE=91=E8=AF=81=E4=B9=A6=E5=92=8C=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../certificate/CertificateManagement.vue     | 226 ++++++++++++++----
 1 file changed, 179 insertions(+), 47 deletions(-)

diff --git a/src/views/teacher/certificate/CertificateManagement.vue b/src/views/teacher/certificate/CertificateManagement.vue
index becc477..04ce9c6 100644
--- a/src/views/teacher/certificate/CertificateManagement.vue
+++ b/src/views/teacher/certificate/CertificateManagement.vue
@@ -20,38 +20,39 @@
       </div>
     </div>
 
-         <!-- 证书网格展示 -->
-     <div class="certificate-grid">
-       <div v-for="certificate in filteredCertificates" :key="certificate.id" class="certificate-card" @click="viewCertificateDetail(certificate)">
-         <div class="certificate-thumbnail">
-           <img :src="certificate.thumbnail" :alt="certificate.name" class="certificate-image" />
+    <!-- 证书网格展示 -->
+    <div class="certificate-grid">
+      <div v-for="certificate in filteredCertificates" :key="certificate.id" class="certificate-card"
+        @click="viewCertificateDetail(certificate)">
+        <div class="certificate-thumbnail">
+          <img :src="certificate.thumbnail" :alt="certificate.name" class="certificate-image" />
 
-         </div>
-         <div class="certificate-info">
-           <div class="certificate-name">{{ certificate.name }}</div>
-           <div class="certificate-category">证书分类: {{ certificate.category }}</div>
-         </div>
-         <div class="file-menu">
-           <button class="file-menu-btn" @click.stop="toggleFileMenu(certificate.id)">
-             <img src="/images/teacher/more.png" alt="更多操作" class="more-icon" />
-           </button>
-           <div v-if="activeFileMenu === certificate.id" class="file-menu-dropdown">
-             <div class="menu-item" @click.stop="downloadCertificate(certificate)">
-               <img src="/images/teacher/download.png" alt="下载" class="menu-icon" />
-               <span>下载</span>
-             </div>
-             <div class="menu-item" @click.stop="editCertificate(certificate)">
-               <img src="/images/teacher/edit.png" alt="编辑" class="menu-icon" />
-               <span>编辑</span>
-             </div>
-             <div class="menu-item" @click.stop="deleteCertificate(certificate)">
-               <img src="/images/teacher/delete.png" alt="删除" class="menu-icon" />
-               <span>删除</span>
-             </div>
-           </div>
-         </div>
-       </div>
-     </div>
+        </div>
+        <div class="certificate-info">
+          <div class="certificate-name">{{ certificate.name }}</div>
+          <div class="certificate-category">证书分类: {{ certificate.category }}</div>
+        </div>
+        <div class="file-menu">
+          <button class="file-menu-btn" @click.stop="toggleFileMenu(certificate.id)">
+            <img src="/images/teacher/more.png" alt="更多操作" class="more-icon" />
+          </button>
+          <div v-if="activeFileMenu === certificate.id" class="file-menu-dropdown">
+            <div class="menu-item" @click.stop="downloadCertificate(certificate)">
+              <img src="/images/teacher/download.png" alt="下载" class="menu-icon" />
+              <span>下载</span>
+            </div>
+            <div class="menu-item" @click.stop="editCertificate(certificate)">
+              <img src="/images/teacher/edit.png" alt="编辑" class="menu-icon" />
+              <span>编辑</span>
+            </div>
+            <div class="menu-item" @click.stop="deleteCertificate(certificate)">
+              <img src="/images/teacher/delete.png" alt="删除" class="menu-icon" />
+              <span>删除</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <!-- 添加证书模态框 -->
     <div v-if="showAddModal" class="modal-overlay" @click="closeAddModal">
@@ -65,12 +66,45 @@
         </div>
       </div>
     </div>
+
+    <!-- 删除确认对话框 -->
+    <n-modal v-model:show="showDeleteModal" :mask-closable="false" preset="dialog" title="删除确认" positive-text="确定删除"
+      negative-text="取消" @positive-click="confirmDelete" @negative-click="cancelDelete">
+      <div class="delete-confirm-content">
+        <div class="delete-icon">
+          <n-icon size="48" color="#ff4d4f">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+            </svg>
+          </n-icon>
+        </div>
+
+        <div class="delete-message">
+          <p class="message-title">确定要删除证书吗？</p>
+          <p class="message-content">删除"{{ certificateToDelete?.name }}"后无法恢复，请谨慎操作。</p>
+        </div>
+
+        <div class="delete-warning">
+          <n-alert type="warning" :show-icon="false">
+            <template #icon>
+              <n-icon size="16" color="#faad14">
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                </svg>
+              </n-icon>
+            </template>
+            <span class="warning-text">此操作不可逆，请确认后再执行。</span>
+          </n-alert>
+        </div>
+      </div>
+    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { useMessage } from 'naive-ui'
+import { useMessage, NModal, NIcon, NAlert } from 'naive-ui'
 import { useRouter, useRoute } from 'vue-router'
 
 const message = useMessage()
@@ -162,18 +196,13 @@ const filteredCertificates = computed(() => {
   return filtered
 })
 
-// 方法
 const addCertificate = () => {
-  message.info('添加证书功能正在开发中...')
-
   // 从当前路径中提取课程ID
-  // const currentPath = route.path;
-  // const courseIdMatch = currentPath.match(/\/course-editor\/(\d+)/);
-  // const courseId = courseIdMatch ? courseIdMatch[1] : '1';
-  
-  // 跳转到添加证书页面
-  // const targetPath = `/teacher/course-editor/${courseId}/certificate/add`;
-  // router.push(targetPath);
+  const currentPath = route.path;
+  const courseIdMatch = currentPath.match(/\/course-editor\/(\d+)/);
+  const courseId = courseIdMatch ? courseIdMatch[1] : '1';
+  const targetPath = `/teacher/course-editor/${courseId}/certificate/add`;
+  router.push(targetPath);
 }
 
 const closeAddModal = () => {
@@ -217,14 +246,33 @@ const editCertificate = (certificate: any) => {
 }
 
 const deleteCertificate = (certificate: any) => {
-  if (confirm(`确定要删除证书 "${certificate.name}" 吗？`)) {
-    const index = certificates.value.findIndex((c: any) => c.id === certificate.id)
+  // 设置要删除的证书信息
+  certificateToDelete.value = certificate
+  showDeleteModal.value = true
+  activeFileMenu.value = null
+}
+
+// 删除确认对话框状态
+const showDeleteModal = ref(false)
+const certificateToDelete = ref<any>(null)
+
+// 确认删除
+const confirmDelete = () => {
+  if (certificateToDelete.value) {
+    const index = certificates.value.findIndex((c: any) => c.id === certificateToDelete.value.id)
     if (index > -1) {
       certificates.value.splice(index, 1)
       message.success('删除成功')
     }
+    certificateToDelete.value = null
   }
-  activeFileMenu.value = null
+  showDeleteModal.value = false
+}
+
+// 取消删除
+const cancelDelete = () => {
+  certificateToDelete.value = null
+  showDeleteModal.value = false
 }
 
 const viewCertificateDetail = (certificate: any) => {
@@ -235,10 +283,10 @@ const viewCertificateDetail = (certificate: any) => {
   const courseIdMatch = currentPath.match(/\/course-editor\/(\d+)/);
   const courseId = courseIdMatch ? courseIdMatch[1] : '1';
   console.log('提取的课程ID:', courseId);
-  
+
   const targetPath = `/teacher/course-editor/${courseId}/certificate/detail/${certificate.id}`;
   console.log('目标路径:', targetPath);
-  
+
   router.push(targetPath);
 }
 
@@ -544,6 +592,90 @@ document.addEventListener('click', closeFileMenu)
   padding: 20px;
 }
 
+/* 删除确认对话框样式 */
+.delete-confirm-content {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.delete-icon {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+.delete-message {
+  margin-bottom: 20px;
+}
+
+.message-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+  margin: 0 0 8px 0;
+  line-height: 1.5;
+}
+
+.message-content {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+  line-height: 1.5;
+}
+
+.delete-warning {
+  margin-top: 16px;
+}
+
+.warning-text {
+  font-size: 13px;
+  color: #faad14;
+}
+
+/* 自定义naive-ui对话框样式 */
+:deep(.n-dialog) {
+  border-radius: 8px;
+}
+
+:deep(.n-dialog__header) {
+  padding: 20px 24px 0;
+  border-bottom: none;
+}
+
+:deep(.n-dialog__title) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+:deep(.n-dialog__content) {
+  padding: 0 24px 20px;
+}
+
+:deep(.n-dialog__action) {
+  padding: 0 24px 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+:deep(.n-button--primary-type) {
+  background-color: #ff4d4f;
+  border-color: #ff4d4f;
+}
+
+:deep(.n-button--primary-type:hover) {
+  background-color: #ff7875;
+  border-color: #ff7875;
+}
+
+:deep(.n-button--default-type) {
+  border-color: #d9d9d9;
+  color: #666;
+}
+
+:deep(.n-button--default-type:hover) {
+  border-color: #40a9ff;
+  color: #40a9ff;
+}
 /* 响应式设计 */
 @media (max-width: 1400px) {
   .certificate-grid {