feat: UI优化和功能完善

- 添加公共分页组件，支持上边显示、分页大小10
- 侧边栏/Header按Liner风格优化，添加动画效果
- 异常处理列表支持分页和明细弹窗
- 任务结果页面支持已匹配列表分页
- 修复Dialog弹窗背景透明问题
- 新增dropdown-menu组件
- 添加parsed_file_record模型和回填脚本
- 前端枚举中文化

frontend/app/(dashboard)/tasks/page.tsx

@@ -7,11 +7,10 @@ import {
   Filter,
   ArrowRight,
   Loader2,
-  ChevronLeft,
-  ChevronRight
 } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Pagination } from "@/components/ui/pagination";
 import { useRouter } from "next/navigation";
 import { api } from "@/lib/api/client";
 import ENDPOINTS from "@/lib/api/endpoints";
@@ -59,24 +58,40 @@ export default function TasksPage() {
   const [loading, setLoading] = useState(true);
   const [selectedPeriod, setSelectedPeriod] = useState<string>("");
   const [availablePeriods] = useState(getAvailablePeriods);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
 
   const loadTasks = useCallback(async () => {
     try {
       setLoading(true);
-      const params = selectedPeriod ? { period: selectedPeriod } : {};
-      const res = await api.get<Task[]>(ENDPOINTS.TASK.LIST, { params });
-      setTasks(res.data);
+      const params = { 
+        page, 
+        page_size: pageSize,
+        ...(selectedPeriod ? { period: selectedPeriod } : {}) 
+      };
+      const res = await api.get<{ items: Task[]; total: number }>(ENDPOINTS.TASK.LIST, { params });
+      setTasks(res.data.items || []);
+      setTotal(res.data.total || 0);
     } catch (error) {
       console.error("加载任务列表失败:", error);
     } finally {
       setLoading(false);
     }
-  }, [selectedPeriod]);
+  }, [page, pageSize, selectedPeriod]);
 
   useEffect(() => {
     loadTasks();
   }, [loadTasks]);
 
+  function onPageChange(newPage: number, newPageSize: number) {
+    setPage(newPage);
+    if (newPageSize !== pageSize) {
+      setPageSize(newPageSize);
+    }
+    loadTasks();
+  }
+
   const getMatchRate = (task: Task) => {
     if (task.total_employees === 0) return "0%";
     const rate = Math.round((task.matched_count / task.total_employees) * 100);
@@ -176,7 +191,16 @@ export default function TasksPage() {
           </Card>
         </motion.div>
       ) : (
-        <div className="space-y-4">
+        <>
+          <div className="mb-4">
+            <Pagination
+              total={total}
+              page={page}
+              pageSize={pageSize}
+              onChange={onPageChange}
+            />
+          </div>
+          <div className="space-y-4">
           {tasks.map((task, index) => (
             <motion.div
               key={task.id}
@@ -241,16 +265,8 @@ export default function TasksPage() {
               </Card>
             </motion.div>
           ))}
-        </div>
-      )}
-
-      {/* Pagination hint */}
-      {tasks.length > 0 && (
-        <div className="mt-6 flex items-center justify-center gap-2 text-caption text-muted-foreground">
-          <ChevronLeft className="w-4 h-4" />
-          <span>显示最近 50 条记录</span>
-          <ChevronRight className="w-4 h-4" />
-        </div>
+          </div>
+        </>
       )}
     </div>
   );