吴雨瞳添加了注释

aurora-vue/aurora-admin/src/views/album/Delete.vue

@@ -1,52 +1,73 @@
 <template>
   <el-card class="main-card">
+    <!-- 页面标题，使用当前路由名称 -->
     <div class="title">{{ this.$route.name }}</div>
+
+    <!-- 操作区域：包含全选功能和批量操作按钮 -->
     <div class="operation">
       <div class="all-check">
+        <!-- 全选复选框，indeterminate表示半选状态 -->
         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
           全选
         </el-checkbox>
+        <!-- 显示已选择的照片数量 -->
         <div class="check-count">已选择{{ selectPhotoIds.length }}张</div>
       </div>
+
+      <!-- 批量恢复按钮：将选中照片从回收站恢复，选择为空时禁用 -->
       <el-button
-        type="success"
-        @click="updatePhotoDelete(null)"
-        :disabled="selectPhotoIds.length == 0"
-        size="small"
-        icon="el-icon-deleteItem">
+          type="success"
+          @click="updatePhotoDelete(null)"
+          :disabled="selectPhotoIds.length == 0"
+          size="small"
+          icon="el-icon-deleteItem">
         批量恢复
       </el-button>
+
+      <!-- 批量删除按钮：彻底删除选中照片，选择为空时禁用 -->
       <el-button
-        type="danger"
-        @click="batchDeletePhoto = true"
-        :disabled="selectPhotoIds.length == 0"
-        size="small"
-        icon="el-icon-deleteItem">
+          type="danger"
+          @click="batchDeletePhoto = true"
+          :disabled="selectPhotoIds.length == 0"
+          size="small"
+          icon="el-icon-deleteItem">
         批量删除
       </el-button>
     </div>
+
+    <!-- 照片列表容器，加载状态时显示loading -->
     <el-row class="photo-container" :gutter="10" v-loading="loading">
+      <!-- 当回收站为空时显示空状态 -->
       <el-empty v-if="photos.length == 0" description="暂无照片" />
+
+      <!-- 复选框组：用于选择照片进行批量操作 -->
       <el-checkbox-group v-model="selectPhotoIds" @change="handleCheckedPhotoChange">
+        <!-- 遍历照片列表生成照片项 -->
         <el-col :md="4" v-for="item of photos" :key="item.id">
           <el-checkbox :label="item.id">
             <div class="photo-item">
+              <!-- 照片显示，支持预览 -->
               <el-image fit="cover" class="photo-img" :src="item.photoSrc" :preview-photoSrc-list="photos" />
+              <!-- 照片名称 -->
               <div class="photo-name">{{ item.photoName }}</div>
             </div>
           </el-checkbox>
         </el-col>
       </el-checkbox-group>
     </el-row>
+
+    <!-- 分页组件 -->
     <el-pagination
-      :hide-on-single-page="true"
-      class="pagination-container"
-      @size-change="sizeChange"
-      @current-change="currentChange"
-      :current-page="current"
-      :page-size="size"
-      :total="count"
-      layout="prev, pager, next" />
+        :hide-on-single-page="true"
+        class="pagination-container"
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="current"
+        :page-size="size"
+        :total="count"
+        layout="prev, pager, next" />
+
+    <!-- 批量删除确认弹窗 -->
     <el-dialog :visible.sync="batchDeletePhoto" width="30%">
       <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
       <div style="font-size: 1rem">是否删除选中照片？</div>
@@ -60,97 +81,115 @@
 
 <script>
 export default {
+  // 组件创建时加载回收站照片列表
   created() {
     this.listPhotos()
   },
   data: function () {
     return {
-      loading: true,
-      batchDeletePhoto: false,
-      isIndeterminate: false,
-      checkAll: false,
-      photos: [],
-      photoIds: [],
-      selectPhotoIds: [],
-      current: 1,
-      size: 18,
-      count: 0
+      loading: true, // 加载状态标识
+      batchDeletePhoto: false, // 批量删除确认弹窗显示状态
+      isIndeterminate: false, // 全选框半选状态
+      checkAll: false, // 全选框选中状态
+      photos: [], // 回收站照片列表
+      photoIds: [], // 所有照片ID集合（用于全选）
+      selectPhotoIds: [], // 选中的照片ID集合
+      current: 1, // 当前页码
+      size: 18, // 每页条数
+      count: 0 // 总条数
     }
   },
   methods: {
+    // 获取回收站照片列表
     listPhotos() {
       this.axios
-        .get('/api/admin/photos', {
-          params: {
-            current: this.current,
-            size: this.size,
-            isDelete: 1
-          }
-        })
-        .then(({ data }) => {
-          this.photos = data.data.records
-          this.count = data.data.count
-          this.loading = false
-        })
+          .get('/api/admin/photos', {
+            params: {
+              current: this.current, // 当前页
+              size: this.size, // 每页条数
+              isDelete: 1 // 1表示查询回收站照片
+            }
+          })
+          .then(({ data }) => {
+            this.photos = data.data.records // 照片列表数据
+            this.count = data.data.count // 总条数
+            this.loading = false // 关闭加载状态
+          })
     },
+    // 每页条数变化时触发
     sizeChange(size) {
       this.size = size
-      this.listPhotos()
+      this.listPhotos() // 重新加载列表
     },
+    // 当前页码变化时触发
     currentChange(current) {
       this.current = current
-      this.listPhotos()
+      this.listPhotos() // 重新加载列表
     },
+    // 恢复照片（单个或批量）
     updatePhotoDelete(id) {
       var param = {}
       if (id == null) {
-        param = { ids: this.selectPhotoIds, isDelete: 0 }
+        // 批量恢复：使用选中的照片ID集合
+        param = { ids: this.selectPhotoIds, isDelete: 0 } // isDelete=0表示恢复
       } else {
+        // 单个恢复：使用传入的照片ID
         param = { ids: [id], isDelete: 0 }
       }
       this.axios.put('/api/admin/photos/delete', param).then(({ data }) => {
         if (data.flag) {
+          // 操作成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listPhotos()
+          this.listPhotos() // 重新加载列表
         } else {
+          // 操作失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
       })
-      this.batchDeletePhoto = false
+      this.batchDeletePhoto = false // 关闭弹窗
     },
+    // 彻底删除照片（批量）
     deletePhotos() {
       this.axios.delete('/api/admin/photos', { data: this.selectPhotoIds }).then(({ data }) => {
         if (data.flag) {
+          // 删除成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listPhotos()
+          this.listPhotos() // 重新加载列表
         } else {
+          // 删除失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
       })
-      this.batchDeletePhoto = false
+      this.batchDeletePhoto = false // 关闭弹窗
     },
+    // 全选/取消全选事件
     handleCheckAllChange(val) {
+      // 全选时选中所有照片ID，取消全选时清空选中
       this.selectPhotoIds = val ? this.photoIds : []
-      this.isIndeterminate = false
+      this.isIndeterminate = false // 取消半选状态
     },
+    // 单个复选框选择变化事件
     handleCheckedPhotoChange(value) {
-      let checkedCount = value.length
+      const checkedCount = value.length
+      // 全选状态：选中数量等于总数量
       this.checkAll = checkedCount === this.photoIds.length
+      // 半选状态：选中数量大于0且小于总数量
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.photoIds.length
     }
   },
+  // 监听photos变化，同步更新所有照片ID集合
   watch: {
     photos() {
       this.photoIds = []
@@ -163,34 +202,40 @@ export default {
 </script>
 
 <style scoped>
+/* 操作区域样式 */
 .operation {
   display: flex;
   justify-content: flex-end;
   margin-top: 2.25rem;
   margin-bottom: 2rem;
 }
+/* 全选区域样式 */
 .all-check {
   display: inline-flex;
   align-items: center;
   margin-right: 1rem;
 }
+/* 已选数量样式 */
 .check-count {
   margin-left: 1rem;
   font-size: 12px;
 }
+/* 照片项样式 */
 .photo-item {
   position: relative;
   cursor: pointer;
   margin-bottom: 1rem;
 }
+/* 照片图片样式 */
 .photo-img {
   width: 100%;
   height: 7rem;
   border-radius: 4px;
 }
+/* 照片名称样式 */
 .photo-name {
   font-size: 14px;
   margin-top: 0.3rem;
   text-align: center;
 }
-</style>
+</style>