封装评查点的相关接口，完成评查点列表的简单搜索和查询

app/routes/rules-files.tsx

@@ -6,6 +6,8 @@ import { FileIcon } from "~/components/ui/FileIcon";
 import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
 import { Pagination } from "~/components/ui/Pagination";
 import { Table } from "~/components/ui/Table";
+import { FileTypeTag } from "~/components/ui/FileTypeTag";
+import { StatusBadge } from "~/components/ui/StatusBadge";
 import rulesFilesStyles from "~/styles/pages/rules-files.css?url";
 
 export const links = () => [
@@ -371,22 +373,6 @@ export default function RulesFiles() {
     { value: DateRange.CUSTOM, label: '自定义时间段' }
   ];
   
-  // 获取文件状态对应的图标和类名
-  const getStatusInfo = (status: ReviewStatus) => {
-    switch (status) {
-      case ReviewStatus.PASS:
-        return { icon: "ri-checkbox-circle-line", className: "success" };
-      case ReviewStatus.WARNING:
-        return { icon: "ri-alert-line", className: "warning" };
-      case ReviewStatus.FAIL:
-        return { icon: "ri-close-circle-line", className: "error" };
-      case ReviewStatus.PENDING:
-        return { icon: "ri-time-line", className: "processing" };
-      default:
-        return { icon: "", className: "default" };
-    }
-  };
-  
   // 定义表格列配置
   const columns = [
     {
@@ -414,14 +400,11 @@ export default function RulesFiles() {
       key: "fileType",
       width: "12%",
       render: (_: unknown, file: ReviewFile) => (
-        <span className={`file-type-tag file-type-tag-${file.fileType}`}>
-          {file.fileType === FileType.CONTRACT && <i className="ri-file-list-3-line"></i>}
-          {file.fileType === FileType.LICENSE && <i className="ri-vip-crown-line"></i>}
-          {file.fileType === FileType.PUNISHMENT && <i className="ri-scales-line"></i>}
-          {file.fileType === FileType.REPORT && <i className="ri-file-chart-line"></i>}
-          {file.fileType === FileType.OTHER && <i className="ri-file-line"></i>}
-          {FILE_TYPE_LABELS[file.fileType]}
-        </span>
+        <FileTypeTag 
+          type={file.fileType} 
+          text={FILE_TYPE_LABELS[file.fileType]}
+          showIcon={true}
+        />
       )
     },
     {
@@ -440,16 +423,13 @@ export default function RulesFiles() {
       title: "评查状态",
       key: "reviewStatus",
       width: "12%",
-      render: (_: unknown, file: ReviewFile) => {
-        const statusInfo = getStatusInfo(file.reviewStatus);
-        return (
-          <span className={`status-badge status-badge-${statusInfo.className.replace('status-', '')}`}>
-            <i className={`${statusInfo.icon} mr-1`}></i>
-            {REVIEW_STATUS_LABELS[file.reviewStatus]}
-            {file.issueCount > 0 && ` (${file.issueCount})`}
-          </span>
-        );
-      }
+      render: (_: unknown, file: ReviewFile) => (
+        <StatusBadge 
+          status={file.reviewStatus} 
+          text={file.issueCount > 0 ? `${REVIEW_STATUS_LABELS[file.reviewStatus]} (${file.issueCount})` : REVIEW_STATUS_LABELS[file.reviewStatus]} 
+          showIcon={true}
+        />
+      )
     },
     {
       title: "问题摘要",