From 49cbb6d47227c4d2b70593fd6c8f0f353f97863b Mon Sep 17 00:00:00 2001
From: wyt <1955803161@qq.com>
Date: Wed, 29 Oct 2025 14:01:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E9=9B=A8=E7=9E=B3=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/article/ArticleList.vue         | 255 ++++++++++++------
 1 file changed, 171 insertions(+), 84 deletions(-)

diff --git a/aurora-vue/aurora-admin/src/views/article/ArticleList.vue b/aurora-vue/aurora-admin/src/views/article/ArticleList.vue
index 21bc36c..d624dbb 100644
--- a/aurora-vue/aurora-admin/src/views/article/ArticleList.vue
+++ b/aurora-vue/aurora-admin/src/views/article/ArticleList.vue
@@ -1,112 +1,155 @@
 <template>
+  <!-- 文章列表主卡片组件 -->
   <el-card class="main-card">
+    <!-- 页面标题，取自路由名称 -->
     <div class="title">{{ this.$route.name }}</div>
+
+    <!-- 文章状态筛选菜单 -->
     <div class="article-status-menu">
       <span>状态</span>
+      <!-- 全部状态 -->
       <span @click="changeStatus('all')" :class="isActive('all')">全部</span>
+      <!-- 公开状态 -->
       <span @click="changeStatus('public')" :class="isActive('public')"> 公开 </span>
+      <!-- 私密状态 -->
       <span @click="changeStatus('private')" :class="isActive('private')"> 私密 </span>
+      <!-- 草稿箱状态 -->
       <span @click="changeStatus('draft')" :class="isActive('draft')"> 草稿箱 </span>
+      <!-- 回收站状态 -->
       <span @click="changeStatus('delete')" :class="isActive('delete')"> 回收站 </span>
     </div>
+
+    <!-- 操作按钮区域 -->
     <div class="operation-container">
+      <!-- 批量删除按钮（非回收站状态） -->
       <el-button
-        v-if="isDelete == 0"
-        type="danger"
-        size="small"
-        icon="el-icon-delete"
-        :disabled="articleIds.length == 0"
-        @click="updateIsDelete = true">
+          v-if="isDelete == 0"
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          :disabled="articleIds.length == 0"
+          @click="updateIsDelete = true">
         批量删除
       </el-button>
+
+      <!-- 批量彻底删除按钮（回收站状态） -->
       <el-button
-        v-else
-        type="danger"
-        size="small"
-        icon="el-icon-delete"
-        :disabled="articleIds.length == 0"
-        @click="remove = true">
+          v-else
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          :disabled="articleIds.length == 0"
+          @click="remove = true">
         批量删除
       </el-button>
+
+      <!-- 批量导出按钮 -->
       <el-button
-        type="success"
-        size="small"
-        icon="el-icon-download"
-        :disabled="articleIds.length == 0"
-        style="margin-right: 1rem"
-        @click="isExport = true">
+          type="success"
+          size="small"
+          icon="el-icon-download"
+          :disabled="articleIds.length == 0"
+          style="margin-right: 1rem"
+          @click="isExport = true">
         批量导出
       </el-button>
+
+      <!-- 批量导入按钮 -->
       <el-upload
-        action="/api/admin/articles/import"
-        multiple
-        :limit="9"
-        :show-file-list="false"
-        :headers="uploadHeaders"
-        :on-success="uploadArticle">
+          action="/api/admin/articles/import"
+          multiple
+          :limit="9"
+          :show-file-list="false"
+          :headers="uploadHeaders"
+          :on-success="uploadArticle">
         <el-button type="primary" size="small" icon="el-icon-upload"> 批量导入 </el-button>
       </el-upload>
+
+      <!-- 右侧筛选区域 -->
       <div style="margin-left: auto">
+        <!-- 文章类型筛选 -->
         <el-select
-          clearable
-          v-model="type"
-          placeholder="请选择文章类型"
-          size="small"
-          style="margin-right: 1rem; width: 180px">
+            clearable
+            v-model="type"
+            placeholder="请选择文章类型"
+            size="small"
+            style="margin-right: 1rem; width: 180px">
           <el-option label="全部" value="" />
           <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
+
+        <!-- 文章分类筛选 -->
         <el-select
-          clearable
-          size="small"
-          v-model="categoryId"
-          filterable
-          placeholder="请选择分类"
-          style="margin-right: 1rem; width: 180px">
+            clearable
+            size="small"
+            v-model="categoryId"
+            filterable
+            placeholder="请选择分类"
+            style="margin-right: 1rem; width: 180px">
           <el-option label="全部" value="" />
           <el-option v-for="item in categories" :key="item.id" :label="item.categoryName" :value="item.id" />
         </el-select>
+
+        <!-- 文章标签筛选 -->
         <el-select
-          clearable
-          size="small"
-          v-model="tagId"
-          filterable
-          placeholder="请选择标签"
-          style="margin-right: 1rem; width: 180px">
+            clearable
+            size="small"
+            v-model="tagId"
+            filterable
+            placeholder="请选择标签"
+            style="margin-right: 1rem; width: 180px">
           <el-option label="全部" value="" />
           <el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.id" />
         </el-select>
+
+        <!-- 文章标题搜索框 -->
         <el-input
-          clearable
-          v-model="keywords"
-          prefix-icon="el-icon-search"
-          size="small"
-          placeholder="请输入文章名"
-          style="width: 200px"
-          @keyup.enter.native="searchArticles" />
+            clearable
+            v-model="keywords"
+            prefix-icon="el-icon-search"
+            size="small"
+            placeholder="请输入文章名"
+            style="width: 200px"
+            @keyup.enter.native="searchArticles" />
+
+        <!-- 搜索按钮 -->
         <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="searchArticles">
           搜索
         </el-button>
       </div>
     </div>
+
+    <!-- 文章列表表格 -->
     <el-table border :data="articles" @selection-change="selectionChange" v-loading="loading">
+      <!-- 选择列 -->
       <el-table-column type="selection" width="55" />
+
+      <!-- 文章封面列 -->
       <el-table-column prop="articleCover" label="文章封面" width="180" align="center">
         <template slot-scope="scope">
           <el-image
-            class="article-cover"
-            :src="
+              class="article-cover"
+              :src="
               scope.row.articleCover
                 ? scope.row.articleCover
                 : 'https://static.talkxj.com/articles/c5cc2b2561bd0e3060a500198a4ad37d.png'
             " />
+          <!-- 公开状态图标 -->
           <i v-if="scope.row.status == 1" class="iconfont el-icon-mygongkai article-status-icon" />
+          <!-- 密码状态图标 -->
           <i v-if="scope.row.status == 2" class="iconfont el-icon-mymima article-status-icon" />
+          <!-- 草稿状态图标 -->
           <i v-if="scope.row.status == 3" class="iconfont el-icon-mycaogaoxiang article-status-icon" />
         </template>
       </el-table-column>
+
+      <!-- 文章标题列 -->
       <el-table-column prop="articleTitle" label="标题" align="center" />
+
+      <!-- 文章分类列 -->
       <el-table-column prop="categoryName" label="分类" width="110" align="center" />
+
+      <!-- 文章标签列 -->
       <el-table-column prop="tagDTOs" label="标签" width="170" align="center">
         <template slot-scope="scope">
           <el-tag v-for="item of scope.row.tagDTOs" :key="item.tagId" style="margin-right: 0.2rem; margin-top: 0.2rem">
@@ -114,6 +157,8 @@
           </el-tag>
         </template>
       </el-table-column>
+
+      <!-- 浏览量列 -->
       <el-table-column prop="viewsCount" label="浏览量" width="70" align="center">
         <template slot-scope="scope">
           <span v-if="scope.row.viewsCount">
@@ -122,6 +167,8 @@
           <span v-else>0</span>
         </template>
       </el-table-column>
+
+      <!-- 文章类型列 -->
       <el-table-column prop="type" label="类型" width="80" align="center">
         <template slot-scope="scope">
           <el-tag :type="articleType(scope.row.type).tagType">
@@ -129,74 +176,93 @@
           </el-tag>
         </template>
       </el-table-column>
+
+      <!-- 发表时间列 -->
       <el-table-column prop="createTime" label="发表时间" width="130" align="center">
         <template slot-scope="scope">
           <i class="el-icon-time" style="margin-right: 5px" />
           {{ scope.row.createTime | date }}
         </template>
       </el-table-column>
+
+      <!-- 置顶状态列 -->
       <el-table-column prop="isTop" label="置顶" width="80" align="center">
         <template slot-scope="scope">
           <el-switch
-            v-model="scope.row.isTop"
-            active-color="#13ce66"
-            inactive-color="#F4F4F5"
-            :disabled="scope.row.isDelete == 1"
-            :active-value="1"
-            :inactive-value="0"
-            @change="changeTopAndFeatured(scope.row)" />
+              v-model="scope.row.isTop"
+              active-color="#13ce66"
+              inactive-color="#F4F4F5"
+              :disabled="scope.row.isDelete == 1"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeTopAndFeatured(scope.row)" />
         </template>
       </el-table-column>
+
+      <!-- 推荐状态列 -->
       <el-table-column prop="isFeatured" label="推荐" width="80" align="center">
         <template slot-scope="scope">
           <el-switch
-            v-model="scope.row.isFeatured"
-            active-color="#13ce66"
-            inactive-color="#F4F4F5"
-            :disabled="scope.row.isDelete == 1"
-            :active-value="1"
-            :inactive-value="0"
-            @change="changeTopAndFeatured(scope.row)" />
+              v-model="scope.row.isFeatured"
+              active-color="#13ce66"
+              inactive-color="#F4F4F5"
+              :disabled="scope.row.isDelete == 1"
+              :active-value="1"
+              :inactive-value="0"
+              @change="changeTopAndFeatured(scope.row)" />
         </template>
       </el-table-column>
+
+      <!-- 操作列 -->
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
+          <!-- 编辑按钮（非回收站状态） -->
           <el-button type="primary" size="mini" @click="editArticle(scope.row.id)" v-if="scope.row.isDelete == 0">
             编辑
           </el-button>
+
+          <!-- 删除按钮（非回收站状态） -->
           <el-popconfirm
-            title="确定删除吗？"
-            style="margin-left: 10px"
-            @confirm="updateArticleDelete(scope.row.id)"
-            v-if="scope.row.isDelete == 0">
+              title="确定删除吗？"
+              style="margin-left: 10px"
+              @confirm="updateArticleDelete(scope.row.id)"
+              v-if="scope.row.isDelete == 0">
             <el-button size="mini" type="danger" slot="reference"> 删除 </el-button>
           </el-popconfirm>
+
+          <!-- 恢复按钮（回收站状态） -->
           <el-popconfirm
-            title="确定恢复吗？"
-            v-if="scope.row.isDelete == 1"
-            @confirm="updateArticleDelete(scope.row.id)">
+              title="确定恢复吗？"
+              v-if="scope.row.isDelete == 1"
+              @confirm="updateArticleDelete(scope.row.id)">
             <el-button size="mini" type="success" slot="reference"> 恢复 </el-button>
           </el-popconfirm>
+
+          <!-- 彻底删除按钮（回收站状态） -->
           <el-popconfirm
-            style="margin-left: 10px"
-            v-if="scope.row.isDelete == 1"
-            title="确定彻底删除吗？"
-            @confirm="deleteArticles(scope.row.id)">
+              style="margin-left: 10px"
+              v-if="scope.row.isDelete == 1"
+              title="确定彻底删除吗？"
+              @confirm="deleteArticles(scope.row.id)">
             <el-button size="mini" type="danger" slot="reference"> 删除 </el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 分页组件 -->
     <el-pagination
-      class="pagination-container"
-      background
-      @size-change="sizeChange"
-      @current-change="currentChange"
-      :current-page="current"
-      :page-size="size"
-      :total="count"
-      :page-sizes="[10, 20]"
-      layout="total, sizes, prev, pager, next, jumper" />
+        class="pagination-container"
+        background
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="current"
+        :page-size="size"
+        :total="count"
+        :page-sizes="[10, 20]"
+        layout="total, sizes, prev, pager, next, jumper" />
+
+    <!-- 批量删除确认弹窗 -->
     <el-dialog :visible.sync="updateIsDelete" width="30%">
       <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
       <div style="font-size: 1rem">是否删除选中项？</div>
@@ -205,6 +271,8 @@
         <el-button type="primary" @click="updateArticleDelete(null)"> 确 定 </el-button>
       </div>
     </el-dialog>
+
+    <!-- 批量彻底删除确认弹窗 -->
     <el-dialog :visible.sync="remove" width="30%">
       <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
       <div style="font-size: 1rem">是否彻底删除选中项？</div>
@@ -213,6 +281,8 @@
         <el-button type="primary" @click="deleteArticles(null)"> 确 定 </el-button>
       </div>
     </el-dialog>
+
+    <!-- 批量导出确认弹窗 -->
     <el-dialog :visible.sync="isExport" width="30%">
       <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
       <div style="font-size: 1rem">是否导出选中文章？</div>
@@ -226,18 +296,30 @@
 
 <script>
 export default {
+  // 页面创建时执行的钩子函数
   created() {
+    // 从状态管理中获取当前页码
     this.current = this.$store.state.pageState.articleList
+    // 加载文章列表
     this.listArticles()
+    // 加载分类列表
     this.listCategories()
+    // 加载标签列表
     this.listTags()
   },
+
+  // 数据定义
   data: function () {
     return {
+      // 上传请求头，包含认证信息
       uploadHeaders: { Authorization: 'Bearer ' + sessionStorage.getItem('token') },
+      // 表格加载状态
       loading: true,
+      // 批量删除弹窗显示状态
       updateIsDelete: false,
+      // 彻底删除弹窗显示状态
       remove: false,
+      // 文章类型选项
       types: [
         {
           value: 1,
@@ -252,10 +334,15 @@ export default {
           label: '翻译'
         }
       ],
+      // 当前激活的状态筛选
       activeStatus: 'all',
+      // 文章列表数据
       articles: [],
+      // 选中的文章ID列表
       articleIds: [],
+      // 分类列表数据
       categories: [],
+      // 标签列表数据
       tags: [],
       keywords: null,
       type: null,