add delte button by ai

src/api/project.js

@@ -59,6 +59,14 @@ function forkProject(projectId, name = null) {
   });
 }
 
+function deleteForkProject(projectId) {
+  return axios.delete(`${prefix}/deleteFork`, {
+    params: {
+      projectId,
+    }
+  });
+}
+
 function findAllPublicProjectsGroupByCourse() {
   return axios.get(`${prefix}/findAllPublicGroupByCourse`);
 }
@@ -73,6 +81,7 @@ const projectAPIs = {
   createProject,
   updateCourseProjectState,
   forkProject,
+  deleteForkProject,
   findAllPublicProjectsGroupByCourse,
 };
 

src/views/CourseDetailPage/tabs/ProjectTab/ProjectLongCard.vue

@@ -1,28 +1,33 @@
 <template>
   <el-card class="project-long-card" shadow="hover" @click="toDevcloud">
-    <div style="display:flex;justify-content: space-between;align-items: center">
-      <div v-if="project.name">
-        <span class="project-long-card-name">名称：{{ project.name }}</span>
-      </div>
-      <div v-else>
-        <span>项目ID：{{ project.id }}</span>
-      </div>
-      <div v-if="project.name">
-        <span>成员：
-          <span v-for="item in members" :key="'project'+project.id+'member'+item.id"
-                class="project-long-card-member">{{ item.username }}
+    <div class="project-long-card-header">
+      <div class="project-long-card-info">
+        <div v-if="project.name">
+          <span class="project-long-card-name">名称：{{ project.name }}</span>
+        </div>
+        <div v-else>
+          <span>项目ID：{{ project.id }}</span>
+        </div>
+        <div v-if="project.name">
+          <span>成员：
+            <span v-for="item in members" :key="'project'+project.id+'member'+item.id"
+                  class="project-long-card-member">{{ item.username }}
+            </span>
+            <span v-if="members.length===0">无权限查看</span>
           </span>
-          <span v-if="members.length===0">无权限查看</span>
-        </span>
+        </div>
+      </div>
+      <div class="project-long-card-actions">
+        <el-button v-if="isTeacher" size="small" type="primary" @click.stop="$emit('switch')">
+          设为{{ isPublic ? "私有" : "公共" }}
+        </el-button>
+        <el-button v-if="isPublic&&!isTeacher" size="small" type="primary" @click.stop="$emit('fork')">
+          Fork
+        </el-button>
+        <el-button v-if="canDeleteFork" size="small" type="danger" plain @click.stop="handleDeleteFork">
+          删除
+        </el-button>
       </div>
-      <el-button v-if="isTeacher" size="small" type="primary"
-                 @click.stop="$emit('switch')">
-        设为{{ isPublic ? "私有" : "公共" }}
-      </el-button>
-      <el-button v-if="isPublic&&!isTeacher" size="small" type="primary"
-                 @click.stop="$emit('fork')">
-        Fork
-      </el-button>
     </div>
     <el-divider v-if="project.name"/>
     <div v-if="project.name">描述：{{ project.description }}</div>
@@ -34,6 +39,7 @@
 </template>
 
 <script>
+import {ElMessage, ElMessageBox} from "element-plus";
 
 export default {
   name: "ProjectLongCard",
@@ -49,9 +55,13 @@ export default {
     isTeacher: {
       type: Boolean,
       default: false,
+    },
+    canDeleteFork: {
+      type: Boolean,
+      default: false,
     }
   },
-  emits: ["switch", "fork"],
+  emits: ["switch", "fork", "delete"],
   data() {
     return {
       members: [],
@@ -65,7 +75,6 @@ export default {
     }
   },
   async mounted() {
-    console.log(this.GitURL);
     const _this = this;
     const res = (await _this.$apis.findProjectMembers(_this.project.id)).data;
     if (!res.code) {
@@ -73,6 +82,29 @@ export default {
     }
   },
   methods: {
+    async handleDeleteFork() {
+      try {
+        await ElMessageBox.confirm(
+            `是否确认删除 fork 项目“${this.project.name || this.project.id}”？`,
+            "提示",
+            {
+              confirmButtonText: "确认删除",
+              cancelButtonText: "我再想想",
+              type: "warning",
+              center: true,
+            }
+        );
+        const res = (await this.$apis.deleteForkProject(this.project.id)).data;
+        if (res.code) {
+          ElMessage.error(res.message);
+          return;
+        }
+        ElMessage.success("删除成功！");
+        this.$emit("delete", this.project.id);
+      } catch (e) {
+        // 取消删除
+      }
+    },
     toDevcloud() {
       if (this.members.length !== 0) {
         window.open("https://developer-nju.seec.seecoder.cn/project/" + this.project.id + "/schedule?id_token=" + this.$store.state.user.token);
@@ -94,6 +126,30 @@ export default {
   cursor: pointer;
 }
 
+.project-long-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.project-long-card-info {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  min-width: 0;
+}
+
+.project-long-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .el-divider {
   margin: 2px;
 }
@@ -102,9 +158,6 @@ export default {
   margin-right: 5px;
 }
 
-.project-long-card-member:hover {
-  /*color: #409EFF;*/
-}
 
 .el-icon-document-copy {
   margin-left: 10px;

src/views/CourseDetailPage/tabs/ProjectTab/ProjectTab.vue

@@ -27,8 +27,9 @@
           </div>
           <div v-else>
             <project-long-card v-for="item in projects.private" :key="'project'+item.id"
-                               :project="item" :is-teacher="isCreator"
-                               @switch="handleSwitchProject(item.id)"/>
+                               :project="item" :is-teacher="isCreator" :can-delete-fork="true"
+                               @switch="handleSwitchProject(item.id)"
+                               @delete="handleDeleteForkProject(item.id)"/>
           </div>
         </div>
       </el-tab-pane>
@@ -173,6 +174,10 @@ export default {
       }
     },
 
+    handleDeleteForkProject(id) {
+      this.projects.private = this.projects.private.filter((item) => item.id !== id);
+    },
+
     handleProjectFormClose() {
       const _this = this;
       _this.projectDialog = false;