feat: 历史配置表格添加排序和分页功能

- 后端API添加分页和排序参数支持
- 前端表格支持按ID、命令行参数、最后使用时间、使用次数排序
- 添加分页组件，支持选择每页显示数量
- 历史配置卡片显示ID标识

Author: lanshuizhiyue

src/backEnd/api/commonApi/scanPreset.py

@@ -142,19 +142,35 @@ async def get_preset_configs(
 
 @router.get("/history", summary="获取历史配置列表")
 async def get_history_configs(
-    limit: int = Query(20, ge=1, le=100, description="返回数量限制"),
+    page: int = Query(1, ge=1, description="页码"),
+    page_size: int = Query(10, ge=1, le=100, description="每页数量"),
+    sort_field: str = Query("last_used_at", description="排序字段"),
+    sort_order: str = Query("desc", regex="^(asc|desc)$", description="排序方向"),
     current_user: dict = Depends(get_current_user)
 ):
-    """获取历史配置列表"""
+    """
+    获取历史配置列表（带分页和排序）
+    
+    支持的排序字段：id, name, created_at, updated_at, last_used_at, use_count
+    """
     try:
-        presets = scanPresetService.get_history_configs(limit)
+        offset = (page - 1) * page_size
+        presets, total = scanPresetService.get_history_configs(
+            limit=page_size,
+            offset=offset,
+            sort_field=sort_field,
+            sort_order=sort_order
+        )
         return BaseResponseMsg(
             success=True,
             code=http_status.HTTP_200_OK,
             msg="获取成功",
             data={
                 "presets": [p.model_dump() for p in presets],
-                "total": len(presets)
+                "total": total,
+                "page": page,
+                "page_size": page_size,
+                "total_pages": (total + page_size - 1) // page_size if page_size > 0 else 0
             }
         )
     except Exception as e:

src/backEnd/model/ScanPresetDatabase.py

@@ -271,15 +271,53 @@ def get_default_preset(self) -> Optional[ScanPreset]:
         presets = self.get_presets_by_type(PresetType.DEFAULT)
         return presets[0] if presets else None
 
-    def get_history_presets(self, limit: int = 20) -> List[ScanPreset]:
-        """获取历史配置"""
+    def get_history_presets(
+        self,
+        limit: int = 20,
+        offset: int = 0,
+        sort_field: str = "last_used_at",
+        sort_order: str = "desc"
+    ) -> tuple[List[ScanPreset], int]:
+        """
+        获取历史配置（带分页和排序）
+        
+        Args:
+            limit: 每页数量
+            offset: 偏移量
+            sort_field: 排序字段 (id, name, created_at, updated_at, last_used_at, use_count)
+            sort_order: 排序方向 (asc, desc)
+        
+        Returns:
+            tuple: (预设列表, 总数)
+        """
+        # 验证排序字段，防止SQL注入
+        valid_sort_fields = {
+            "id": "id",
+            "name": "name",
+            "created_at": "created_at",
+            "updated_at": "updated_at",
+            "last_used_at": "last_used_at",
+            "use_count": "use_count"
+        }
+        
+        order_field = valid_sort_fields.get(sort_field, "last_used_at")
+        order_direction = "DESC" if sort_order.lower() == "desc" else "ASC"
+        
         try:
+            # 先获取总数
+            count_cursor = self.only_execute(
+                "SELECT COUNT(*) FROM scan_presets WHERE preset_type = ? AND is_active = 1",
+                (PresetType.HISTORY.value,)
+            )
+            total = count_cursor.fetchone()[0] if count_cursor else 0
+            
+            # 获取分页数据
             cursor = self.only_execute(
                 f"""SELECT {_PRESET_COLUMNS} FROM scan_presets 
                    WHERE preset_type = ? AND is_active = 1 
-                   ORDER BY last_used_at DESC 
-                   LIMIT ?""",
-                (PresetType.HISTORY.value, limit)
+                   ORDER BY {order_field} {order_direction}
+                   LIMIT ? OFFSET ?""",
+                (PresetType.HISTORY.value, limit, offset)
             )
 
             presets = []
@@ -288,11 +326,11 @@ def get_history_presets(self, limit: int = 20) -> List[ScanPreset]:
                     preset = self._row_to_preset(row)
                     if preset:
                         presets.append(preset)
-            return presets
+            return presets, total
 
         except Exception as e:
             logger.error(f"Failed to get history presets: {getSafeExString(e)}")
-            return []
+            return [], 0
 
     def update_preset(self, preset_id: int, data: ScanPresetUpdate) -> Optional[ScanPreset]:
         """更新预设配置"""

src/backEnd/service/scanPresetService.py

@@ -52,9 +52,26 @@ def get_preset_configs(self) -> List[ScanPreset]:
         """获取常用配置列表"""
         return self.db.get_presets_by_type(PresetType.PRESET)
 
-    def get_history_configs(self, limit: int = 20) -> List[ScanPreset]:
-        """获取历史配置列表"""
-        return self.db.get_history_presets(limit)
+    def get_history_configs(
+        self,
+        limit: int = 20,
+        offset: int = 0,
+        sort_field: str = "last_used_at",
+        sort_order: str = "desc"
+    ) -> tuple[List[ScanPreset], int]:
+        """
+        获取历史配置列表（带分页和排序）
+        
+        Args:
+            limit: 每页数量
+            offset: 偏移量
+            sort_field: 排序字段
+            sort_order: 排序方向
+        
+        Returns:
+            tuple: (预设列表, 总数)
+        """
+        return self.db.get_history_presets(limit, offset, sort_field, sort_order)
 
     def get_default_preset(self) -> Optional[ScanPreset]:
         """获取默认配置"""

src/frontEnd/src/api/scanPreset.ts

@@ -76,17 +76,47 @@ export async function getPresetConfigs(): Promise<ScanPreset[]> {
 }
 
 /**
- * 获取历史配置列表
+ * 历史配置列表响应
  */
-export async function getHistoryConfigs(limit = 20): Promise<ScanPreset[]> {
+export interface HistoryListResponse {
+  presets: ScanPreset[]
+  total: number
+  page: number
+  page_size: number
+  total_pages: number
+}
+
+/**
+ * 获取历史配置列表（带分页和排序）
+ */
+export async function getHistoryConfigs(
+  page: number = 1,
+  pageSize: number = 10,
+  sortField: string = 'last_used_at',
+  sortOrder: string = 'desc'
+): Promise<HistoryListResponse> {
   const result = await request.get<{
     presets: ScanPreset[]
     total: number
+    page: number
+    page_size: number
+    total_pages: number
   }>('/scan-preset/history', {
-    params: { limit }
+    params: {
+      page,
+      page_size: pageSize,
+      sort_field: sortField,
+      sort_order: sortOrder
+    }
   })
 
-  return result.presets || []
+  return {
+    presets: result.presets || [],
+    total: result.total || 0,
+    page: result.page || 1,
+    page_size: result.page_size || 10,
+    total_pages: result.total_pages || 0
+  }
 }
 
 /**

src/frontEnd/src/views/AddTask/components/PresetModePanel.vue

@@ -108,7 +108,10 @@
             @click="handleSelect(preset)"
           >
             <div class="preset-card-header">
-              <span class="preset-name">{{ preset.name }}</span>
+              <span class="preset-name">
+                <span class="preset-id">#{{ preset.id }}</span>
+                {{ preset.name }}
+              </span>
               <Tag severity="warn" value="历史" />
             </div>
             <div class="preset-card-params">
@@ -302,6 +305,18 @@ function handleSelect(preset: ScanPreset) {
   font-size: 0.95rem;
 }
 
+.preset-id {
+  display: inline-block;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--p-primary-color);
+  background: rgba(var(--p-primary-color-rgb, 99, 102, 241), 0.1);
+  padding: 1px 6px;
+  border-radius: 4px;
+  margin-right: 0.5rem;
+}
+
 .preset-card-desc {
   font-size: 0.8rem;
   color: var(--text-color-secondary);