feat: 新增7列文章列表点击排序功能

cfc-web/src/views/admin/ArticleManage.vue

@@ -63,12 +63,18 @@
           </template>
         </el-table-column>
         <el-table-column label="标题" min-width="220">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('title', $event)">标题<span v-if="sortIndex('title') !== null" class="sort-index" :class="sortClass('title') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('title') }}</span>{{ sortIcon('title') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <span>{{ row.title }}</span>
             <el-tag v-if="row.isFeatured === 1 || row.isFeatured === true" size="mini" type="warning" style="margin-left: 6px;">精选{{ row.sortOrder && row.sortOrder > 0 ? ' ' + toChineseNum(row.sortOrder) : '' }}</el-tag>
           </template>
         </el-table-column>
           <el-table-column label="可见性" width="90">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('visibility', $event)">可见性<span v-if="sortIndex('visibility') !== null" class="sort-index" :class="sortClass('visibility') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('visibility') }}</span>{{ sortIcon('visibility') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <el-tag v-if="row.visibility === 'public'" size="small" type="success">公开</el-tag>
             <el-tag v-else-if="row.visibility === 'login'" size="small" type="primary">登录</el-tag>
@@ -76,6 +82,9 @@
           </template>
         </el-table-column>
         <el-table-column label="内容类型" width="90">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('contentType', $event)">内容类型<span v-if="sortIndex('contentType') !== null" class="sort-index" :class="sortClass('contentType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('contentType') }}</span>{{ sortIcon('contentType') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <el-tag v-if="row.contentType === 'article'" size="small" type="primary">文章</el-tag>
             <el-tag v-else-if="row.contentType === 'knowledge'" size="small" type="success">知识点</el-tag>
@@ -85,12 +94,18 @@
           </template>
         </el-table-column>
         <el-table-column label="难度" width="70">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('difficultyLevel', $event)">难度<span v-if="sortIndex('difficultyLevel') !== null" class="sort-index" :class="sortClass('difficultyLevel') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('difficultyLevel') }}</span>{{ sortIcon('difficultyLevel') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <span v-if="row.difficultyLevel && row.difficultyLevel > 0">{{ row.difficultyLevel }}星</span>
             <span v-else>-</span>
           </template>
         </el-table-column>
         <el-table-column label="维度" width="100">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('dimensionIds', $event)">维度<span v-if="sortIndex('dimensionIds') !== null" class="sort-index" :class="sortClass('dimensionIds') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('dimensionIds') }}</span>{{ sortIcon('dimensionIds') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <span v-if="row.dimensionIds">{{ row.dimensionIds }}</span>
             <span v-else>-</span>
@@ -102,6 +117,9 @@
           </template>
         </el-table-column>
         <el-table-column label="状态" width="100">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('status', $event)">状态<span v-if="sortIndex('status') !== null" class="sort-index" :class="sortClass('status') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('status') }}</span>{{ sortIcon('status') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <el-tag v-if="row.status === 'draft' && row.auditStatus === 'pending'" size="small" type="warning">待审核</el-tag>
             <el-tag v-else-if="row.status === 'draft'" size="small" type="info">草稿箱</el-tag>
@@ -112,6 +130,9 @@
           </template>
         </el-table-column>
         <el-table-column label="审核状态" width="120">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('auditStatus', $event)">审核状态<span v-if="sortIndex('auditStatus') !== null" class="sort-index" :class="sortClass('auditStatus') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('auditStatus') }}</span>{{ sortIcon('auditStatus') }}</span>
+          </template>
           <template slot-scope="{ row }">
             <el-tag v-if="row.auditStatus === 'approved'" size="small" type="success">已通过</el-tag>
             <el-tag v-else-if="row.auditStatus === 'pending'" size="small" type="warning">待审核</el-tag>
@@ -131,6 +152,9 @@
         </el-table-column>
 
         <el-table-column label="发布时间" width="160">
+          <template slot="header">
+            <span class="sort-header" @click.stop="onSortClick('publishedAt', $event)">发布时间<span v-if="sortIndex('publishedAt') !== null" class="sort-index" :class="sortClass('publishedAt') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('publishedAt') }}</span>{{ sortIcon('publishedAt') }}</span>
+          </template>
           <template slot-scope="{ row }">
             {{ formatTime(row.publishedAt) }}
           </template>
@@ -355,7 +379,7 @@ export default {
         tagId: '',
         keyword: ''
       },
-      sortableColumns: { viewCount: '阅读', id: 'ID', author: '作者' },
+      sortableColumns: { id: 'ID', title: '标题', visibility: '可见性', contentType: '内容类型', difficultyLevel: '难度', dimensionIds: '维度', author: '作者', status: '状态', auditStatus: '审核状态', viewCount: '阅读', publishedAt: '发布时间' },
 
       categories: [],
       tagOptions: [],