吴雨瞳添加了注释

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

@@ -1,103 +1,139 @@
 <template>
   <el-card class="main-card">
+    <!-- 页面标题，使用当前路由名称 -->
     <div class="title">{{ this.$route.name }}</div>
+
+    <!-- 相册信息区域 -->
     <div class="album-info">
+      <!-- 相册封面图片 -->
       <el-image fit="cover" class="album-cover" :src="albumInfo.albumCover" />
+
+      <!-- 相册详情信息 -->
       <div class="album-detail">
         <div style="margin-bottom: 0.6rem">
+          <!-- 相册名称 -->
           <span class="album-name">{{ albumInfo.albumName }}</span>
+          <!-- 照片数量 -->
           <span class="photo-count">{{ albumInfo.photoCount }}张</span>
         </div>
         <div>
+          <!-- 相册描述（存在时显示） -->
           <span v-if="albumInfo.albumDesc" class="album-desc">
             {{ albumInfo.albumDesc }}
           </span>
+          <!-- 上传照片按钮，点击打开上传弹窗 -->
           <el-button icon="el-icon-picture" type="primary" size="small" @click="uploadPhoto = true">
             上传照片
           </el-button>
         </div>
       </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="movePhoto = true"
-          :disabled="selectphotoIds.length == 0"
-          size="small"
-          icon="el-icon-deleteItem">
+            type="success"
+            @click="movePhoto = true"
+            :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>
     </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">
+              <!-- 照片操作菜单（更多按钮） -->
               <div class="photo-opreation">
                 <el-dropdown @command="handleCommand">
                   <i class="el-icon-more" style="color: #fff" />
                   <el-dropdown-menu slot="dropdown">
+                    <!-- 编辑照片信息的下拉项 -->
                     <el-dropdown-item :command="JSON.stringify(item)">
                       <i class="el-icon-edit" />编辑
                     </el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
               </div>
+
+              <!-- 照片显示，支持预览 -->
               <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"
-      @current-change="currentChange"
-      :current-page="current"
-      :page-size="size"
-      :total="count"
-      layout="prev, pager, next" />
+        :hide-on-single-page="true"
+        class="pagination-container"
+        @current-change="currentChange"
+        :current-page="current"
+        :page-size="size"
+        :total="count"
+        layout="prev, pager, next" />
+
+    <!-- 上传照片弹窗 -->
     <el-dialog :visible.sync="uploadPhoto" width="70%" top="10vh">
       <div class="dialog-title-container" slot="title">上传照片</div>
       <div class="upload-container">
+        <!-- 已选择文件列表模式（当有文件时显示） -->
         <el-upload
-          v-show="uploads.length > 0"
-          action="/api/admin/photos/upload"
-          list-type="picture-card"
-          :file-list="uploads"
-          multiple
-          :headers="headers"
-          :before-upload="beforeUpload"
-          :on-success="upload"
-          :on-remove="handleRemove">
-          <i class="el-icon-plus" />
-        </el-upload>
-        <div class="upload">
-          <el-upload
-            v-show="uploads.length == 0"
-            drag
+            v-show="uploads.length > 0"
             action="/api/admin/photos/upload"
+            list-type="picture-card"
+            :file-list="uploads"
             multiple
             :headers="headers"
             :before-upload="beforeUpload"
             :on-success="upload"
-            :show-file-list="false">
+            :on-remove="handleRemove">
+          <i class="el-icon-plus" />
+        </el-upload>
+
+        <!-- 拖拽上传模式（当无文件时显示） -->
+        <div class="upload">
+          <el-upload
+              v-show="uploads.length == 0"
+              drag
+              action="/api/admin/photos/upload"
+              multiple
+              :headers="headers"
+              :before-upload="beforeUpload"
+              :on-success="upload"
+              :show-file-list="false">
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
             <div class="el-upload__tip" slot="tip">支持上传jpg/png文件</div>
@@ -106,6 +142,7 @@
       </div>
       <div slot="footer">
         <div class="upload-footer">
+          <!-- 显示已上传的照片数量 -->
           <div class="upload-count">共上传{{ uploads.length }}张照片</div>
           <div style="margin-left: auto">
             <el-button @click="uploadPhoto = false">取 消</el-button>
@@ -114,6 +151,8 @@
         </div>
       </div>
     </el-dialog>
+
+    <!-- 编辑照片信息弹窗 -->
     <el-dialog :visible.sync="editPhoto" width="30%">
       <div class="dialog-title-container" slot="title">修改信息</div>
       <el-form label-width="80px" size="medium" :model="photoForm">
@@ -129,6 +168,8 @@
         <el-button type="primary" @click="updatePhoto"> 确 定 </el-button>
       </div>
     </el-dialog>
+
+    <!-- 批量删除确认弹窗 -->
     <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>
@@ -137,13 +178,19 @@
         <el-button type="primary" @click="updatePhotoDelete(null)"> 确 定 </el-button>
       </div>
     </el-dialog>
+
+    <!-- 移动照片弹窗（选择目标相册） -->
     <el-dialog :visible.sync="movePhoto" width="30%">
       <div class="dialog-title-container" slot="title">移动照片</div>
+      <!-- 当没有其他相册时显示空状态 -->
       <el-empty v-if="albumList.length < 2" description="暂无其他相册" />
+
+      <!-- 相册选择表单（当存在其他相册时显示） -->
       <el-form v-else label-width="80px" size="medium" :model="photoForm">
         <el-radio-group v-model="albumId">
           <div class="album-check-item">
             <template v-for="item of albumList">
+              <!-- 排除当前相册，只显示其他相册选项 -->
               <el-radio v-if="item.id != albumInfo.id" :key="item.id" :label="item.id" style="margin-bottom: 1rem">
                 <div class="album-check">
                   <el-image fit="cover" class="album-check-cover" :src="item.albumCover" />
@@ -163,163 +210,186 @@
 </template>
 
 <script>
+// 导入图片压缩工具
 import * as imageConversion from 'image-conversion'
 export default {
+  // 组件创建时初始化数据
   created() {
+    // 获取当前相册ID
     this.albumId = this.$route.params.albumId
+    // 从状态管理中获取分页状态（保持分页位置）
     if (this.albumId == this.$store.state.pageState.photo.albumId) {
       this.current = this.$store.state.pageState.photo.current
     } else {
       this.current = 1
+      // 更新状态管理中的分页信息
       this.$store.commit('updatePhotoPageState', {
         albumId: this.$route.params.albumId,
         current: this.current
       })
     }
+    // 加载相册信息、相册列表和照片列表
     this.getAlbumInfo()
     this.listAlbums()
     this.listPhotos()
   },
   data: function () {
     return {
-      loading: true,
-      checkAll: false,
-      isIndeterminate: false,
-      uploadPhoto: false,
-      editPhoto: false,
-      movePhoto: false,
-      batchDeletePhoto: false,
-      uploads: [],
-      photos: [],
-      photoIds: [],
-      selectphotoIds: [],
-      albumList: [],
-      albumInfo: {
+      loading: true, // 加载状态标识
+      checkAll: false, // 全选框选中状态
+      isIndeterminate: false, // 全选框半选状态
+      uploadPhoto: false, // 上传照片弹窗显示状态
+      editPhoto: false, // 编辑照片弹窗显示状态
+      movePhoto: false, // 移动照片弹窗显示状态
+      batchDeletePhoto: false, // 批量删除弹窗显示状态
+      uploads: [], // 上传的照片列表
+      photos: [], // 当前相册的照片列表
+      photoIds: [], // 所有照片ID集合（用于全选）
+      selectphotoIds: [], // 选中的照片ID集合
+      albumList: [], // 相册列表（用于移动照片时选择目标相册）
+      albumInfo: { // 当前相册信息
         id: null,
         albumName: '',
         albumDesc: '',
         albumCover: '',
         photoCount: 0
       },
-      photoForm: {
+      photoForm: { // 照片表单（用于编辑照片信息）
         id: null,
         photoName: '',
         photoDesc: ''
       },
-      albumId: null,
-      current: 1,
-      size: 18,
-      count: 0,
-      headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') }
+      albumId: null, // 当前相册ID
+      current: 1, // 当前页码
+      size: 18, // 每页条数
+      count: 0, // 总条数
+      headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') } // 请求头（包含认证信息）
     }
   },
   methods: {
+    // 获取当前相册详情信息
     getAlbumInfo() {
       this.axios.get('/api/admin/photos/albums/' + this.$route.params.albumId + '/info').then(({ data }) => {
         this.albumInfo = data.data
       })
     },
+    // 获取所有相册列表（用于移动照片）
     listAlbums() {
       this.axios.get('/api/admin/photos/albums/info').then(({ data }) => {
         this.albumList = data.data
       })
     },
+    // 获取当前相册的照片列表
     listPhotos() {
       this.axios
-        .get('/api/admin/photos', {
-          params: {
-            current: this.current,
-            size: this.size,
-            albumId: this.$route.params.albumId,
-            isDelete: 0
-          }
-        })
-        .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, // 每页条数
+              albumId: this.$route.params.albumId, // 当前相册ID
+              isDelete: 0 // 0表示查询未删除的照片
+            }
+          })
+          .then(({ data }) => {
+            this.photos = data.data.records // 照片列表数据
+            this.count = data.data.count // 总条数
+            this.loading = false // 关闭加载状态
+          })
     },
+    // 页码变化时触发
     currentChange(current) {
       this.current = current
+      // 更新状态管理中的分页信息
       this.$store.commit('updatePhotoPageState', {
         albumId: this.$route.params.albumId,
         current: this.current
       })
-      this.listPhotos()
+      this.listPhotos() // 重新加载照片列表
     },
+    // 保存上传的照片（将上传的照片关联到当前相册）
     savePhotos() {
       var photoUrls = []
+      // 收集上传成功的照片URL
       this.uploads.forEach((item) => {
         photoUrls.push(item.url)
       })
       this.axios
-        .post('/api/admin/photos', {
-          albumId: this.$route.params.albumId,
-          photoUrls: photoUrls
-        })
-        .then(({ data }) => {
-          if (data.flag) {
-            this.$notify.success({
-              title: '成功',
-              message: data.message
-            })
-            this.uploads = []
-            this.listPhotos()
-            this.getAlbumInfo()
-          } else {
-            this.$notify.error({
-              title: '失败',
-              message: data.message
-            })
-          }
-        })
-      this.uploadPhoto = false
+          .post('/api/admin/photos', {
+            albumId: this.$route.params.albumId, // 当前相册ID
+            photoUrls: photoUrls // 照片URL列表
+          })
+          .then(({ data }) => {
+            if (data.flag) {
+              // 操作成功提示
+              this.$notify.success({
+                title: '成功',
+                message: data.message
+              })
+              this.uploads = [] // 清空上传列表
+              this.listPhotos() // 重新加载照片列表
+              this.getAlbumInfo() // 更新相册信息（照片数量变化）
+            } else {
+              // 操作失败提示
+              this.$notify.error({
+                title: '失败',
+                message: data.message
+              })
+            }
+          })
+      this.uploadPhoto = false // 关闭上传弹窗
     },
+    // 更新照片信息（名称和描述）
     updatePhoto() {
+      // 校验照片名称不能为空
       if (this.photoForm.photoName.trim() == '') {
         this.$message.error('照片名称不能为空')
         return false
       }
       this.axios.put('/api/admin/photos', this.photoForm).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.editPhoto = false
+        this.editPhoto = false // 关闭编辑弹窗
       })
     },
+    // 移动照片到目标相册
     updatePhotoAlbum() {
       this.axios
-        .put('/api/admin/photos/album', {
-          albumId: this.albumId,
-          photoIds: this.selectphotoIds
-        })
-        .then(({ data }) => {
-          if (data.flag) {
-            this.$notify.success({
-              title: '成功',
-              message: data.message
-            })
-            this.getAlbumInfo()
-            this.listPhotos()
-          } else {
-            this.$notify.error({
-              title: '失败',
-              message: data.message
-            })
-          }
-          this.movePhoto = false
-        })
+          .put('/api/admin/photos/album', {
+            albumId: this.albumId, // 目标相册ID
+            photoIds: this.selectphotoIds // 要移动的照片ID集合
+          })
+          .then(({ data }) => {
+            if (data.flag) {
+              // 操作成功提示
+              this.$notify.success({
+                title: '成功',
+                message: data.message
+              })
+              this.getAlbumInfo() // 更新当前相册信息（照片数量减少）
+              this.listPhotos() // 重新加载照片列表
+            } else {
+              // 操作失败提示
+              this.$notify.error({
+                title: '失败',
+                message: data.message
+              })
+            }
+            this.movePhoto = false // 关闭移动弹窗
+          })
     },
+    // 移除上传的照片（从上传列表中删除）
     handleRemove(file) {
       this.uploads.forEach((item, index) => {
         if (item.url == file.url) {
@@ -327,57 +397,75 @@ export default {
         }
       })
     },
+    // 照片上传成功回调
     upload(response) {
-      this.uploads.push({ url: response.data })
+      this.uploads.push({ url: response.data }) // 将上传成功的照片URL添加到上传列表
     },
+    // 上传前处理（压缩图片）
     beforeUpload(file) {
       return new Promise((resolve) => {
+        // 如果文件大小小于限制，直接上传
         if (file.size / 1024 < this.config.UPLOAD_SIZE) {
           resolve(file)
+        } else {
+          // 否则压缩图片到限制大小
+          imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
+            resolve(res)
+          })
         }
-        imageConversion.compressAccurately(file, this.config.UPLOAD_SIZE).then((res) => {
-          resolve(res)
-        })
       })
     },
+    // 全选/取消全选事件
     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
     },
+    // 照片操作菜单命令处理（编辑）
     handleCommand(command) {
+      // 将选中的照片信息填入表单，打开编辑弹窗
       this.photoForm = JSON.parse(command)
       this.editPhoto = true
     },
+    // 删除照片（单个或批量，移至回收站）
     updatePhotoDelete(id) {
       var param = {}
       if (id == null) {
+        // 批量删除：使用选中的照片ID集合，isDelete=1表示移至回收站
         param = { ids: this.selectphotoIds, isDelete: 1 }
       } else {
+        // 单个删除：使用传入的照片ID，isDelete=1表示移至回收站
         param = { ids: [id], isDelete: 1 }
       }
       this.axios.put('/api/admin/photos/delete', param).then(({ data }) => {
         if (data.flag) {
+          // 操作成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listPhotos()
-          this.getAlbumInfo()
+          this.listPhotos() // 重新加载照片列表
+          this.getAlbumInfo() // 更新相册信息（照片数量减少）
         } else {
+          // 操作失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
       })
-      this.batchDeletePhoto = false
+      this.batchDeletePhoto = false // 关闭删除弹窗
     }
   },
+  // 监听photos变化，同步更新所有照片ID集合（用于全选功能）
   watch: {
     photos() {
       this.photoIds = []
@@ -390,86 +478,104 @@ export default {
 </script>
 
 <style scoped>
+/* 相册信息区域样式 */
 .album-info {
   display: flex;
   margin-top: 2.25rem;
   margin-bottom: 2rem;
 }
+/* 相册封面样式 */
 .album-cover {
   border-radius: 4px;
   width: 5rem;
   height: 5rem;
 }
+/* 相册选择项中的封面样式 */
 .album-check-cover {
   border-radius: 4px;
   width: 4rem;
   height: 4rem;
 }
+/* 相册详情区域样式 */
 .album-detail {
   padding-top: 0.4rem;
   margin-left: 0.8rem;
 }
+/* 相册描述样式 */
 .album-desc {
   font-size: 14px;
   margin-right: 0.8rem;
 }
+/* 操作按钮区域样式 */
 .operation {
   padding-top: 1.5rem;
   margin-left: auto;
 }
+/* 全选区域样式 */
 .all-check {
   display: inline-flex;
   align-items: center;
   margin-right: 1rem;
 }
+/* 已选数量样式 */
 .check-count {
   margin-left: 1rem;
   font-size: 12px;
 }
+/* 相册名称样式 */
 .album-name {
   font-size: 1.25rem;
 }
+/* 照片数量样式 */
 .photo-count {
   font-size: 12px;
   margin-left: 0.5rem;
 }
+/* 照片项样式 */
 .photo-item {
   width: 100%;
   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;
 }
+/* 上传容器样式 */
 .upload-container {
   height: 400px;
 }
+/* 拖拽上传区域样式 */
 .upload {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+/* 上传弹窗底部样式 */
 .upload-footer {
   display: flex;
   align-items: center;
 }
+/* 照片操作菜单样式 */
 .photo-opreation {
   position: absolute;
   z-index: 1000;
   top: 0.3rem;
   right: 0.5rem;
 }
+/* 相册选择项样式 */
 .album-check {
   display: flex;
   align-items: center;
 }
-</style>
+</style>