完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口

app/components/ui/StatusBadge.tsx

@@ -1,69 +1,83 @@
-import { ReviewStatus, REVIEW_STATUS_LABELS } from '~/routes/rules-files';
+import statusBadgeStyles from '~/styles/components/status-badge.css?url';
+
+export type StatusType = 'pending' | 'processing' | 'pass' | 'warning' | 'fail' | string;
 
 interface StatusBadgeProps {
-  status: ReviewStatus;
-  issueCount?: number;
+  status: StatusType;
+  text?: string;
   className?: string;
-  size?: 'default' | 'sm' | 'lg';
-  clickable?: boolean;
-  onClick?: () => void;
+  showIcon?: boolean;
+  customIcon?: string;
+}
+
+export function links() {
+  return [{ rel: "stylesheet", href: statusBadgeStyles }];
 }
 
 /**
- * 文件评查状态标签组件
- * 根据评查状态显示不同样式的标签
+ * 状态徽章组件
+ * 用于显示文档的处理状态，如待审核、审核中、通过等
  */
 export function StatusBadge({ 
   status, 
-  issueCount = 0, 
+  text, 
   className = '',
-  size,
-  clickable = false,
-  onClick
+  showIcon = true,
+  customIcon
 }: StatusBadgeProps) {
-  const statusMap: Record<ReviewStatus, string> = {
-    [ReviewStatus.PASS]: 'success',
-    [ReviewStatus.WARNING]: 'warning',
-    [ReviewStatus.FAIL]: 'error',
-    [ReviewStatus.PENDING]: 'processing'
-  };
-  
-  const badgeType = statusMap[status] || 'default';
-  const sizeClass = size ? `status-badge-${size}` : '';
-  const clickableClass = clickable ? 'status-badge-clickable' : '';
-  
-  // 根据状态选择图标
+  // 状态对应的图标
   const getStatusIcon = () => {
-    switch (status) {
-      case ReviewStatus.PASS:
-        return <i className="ri-checkbox-circle-line"></i>;
-      case ReviewStatus.WARNING:
-        return <i className="ri-alert-line"></i>;
-      case ReviewStatus.FAIL:
-        return <i className="ri-close-circle-line"></i>;
-      case ReviewStatus.PENDING:
-        return <i className="ri-time-line"></i>;
-      default:
-        return null;
-    }
+    // 如果提供了自定义图标，优先使用
+    if (customIcon) return customIcon;
+    
+    const statusIconMap: Record<string, string> = {
+      pending: 'ri-time-line',
+      processing: 'ri-loader-4-line',
+      pass: 'ri-checkbox-circle-line',
+      warning: 'ri-alert-line',
+      fail: 'ri-error-warning-line',
+    };
+    return statusIconMap[status] || '';
   };
 
-  const handleClick = () => {
-    if (clickable && onClick) {
-      onClick();
-    }
+  // 状态对应的文本
+  const getStatusText = () => {
+    if (text) return text;
+    
+    const statusTextMap: Record<string, string> = {
+      pending: '待审核',
+      processing: '审核中',
+      pass: '通过',
+      warning: '警告',
+      fail: '不通过',
+    };
+    
+    // 中英文映射，方便国际化
+    const statusEnglishTextMap: Record<string, string> = {
+      pending: 'Pending',
+      processing: 'Processing',
+      pass: 'Pass',
+      warning: 'Warning',
+      fail: 'Failed',
+    };
+    
+    // 获取当前语言环境，这里默认使用中文
+    const lang: string = 'zh';
+    
+    return lang === 'en' 
+      ? (statusEnglishTextMap[status] || status)
+      : (statusTextMap[status] || status);
+  };
+
+  // 获取状态对应的类名
+  const getStatusClass = () => {
+    return `status-badge status-${status}`;
   };
 
   return (
-    <span 
-      className={`status-badge status-badge-${badgeType} status-badge-with-icon ${sizeClass} ${clickableClass} ${className}`}
-      onClick={handleClick}
-      role={clickable ? "button" : undefined}
-      tabIndex={clickable ? 0 : undefined}
-    >
-      {getStatusIcon()}
-      {REVIEW_STATUS_LABELS[status]}
-      {issueCount > 0 && ` (${issueCount})`}
+    <span className={`${getStatusClass()} ${className}`}>
+      {showIcon && getStatusIcon() && <i className={`${getStatusIcon()} mr-1`}></i>}
+      {getStatusText()}
     </span>
   );
 }