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

app/routes/_index.tsx

@@ -3,10 +3,16 @@ import { type MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Card } from "~/components/ui/Card";
 import { Button } from "~/components/ui/Button";
+import { StatusBadge, links as statusBadgeLinks } from "~/components/ui/StatusBadge";
+import { FileTag, links as fileTagLinks } from "~/components/ui/FileTag";
+import { FileTypeTag, links as fileTypeTagLinks } from "~/components/ui/FileTypeTag";
 import homeStyles from "~/styles/pages/home.css?url";
 
 export const links = () => [
-  { rel: "stylesheet", href: homeStyles }
+  { rel: "stylesheet", href: homeStyles },
+  ...statusBadgeLinks(),
+  ...fileTagLinks(),
+  ...fileTypeTagLinks()
 ];
 
 export const meta: MetaFunction = () => {
@@ -174,11 +180,28 @@ export default function Index() {
           {recentFiles.map((file: RecentFile) => (
             <div key={file.id} className="doc-item">
               <div className="doc-info">
-                <i className={`doc-icon ${file.name.endsWith('.pdf') ? 'ri-file-pdf-line' : 'ri-file-word-line'}`}></i>
+                <FileTag 
+                  extension={file.name.endsWith('.pdf') ? 'pdf' : 'docx'} 
+                  showIcon={true}
+                  showText={false}
+                  showBackground={false}
+                  size="lg"
+                  className="mr-2"
+                />
                 <div>
                   <div className="doc-name">{file.name}</div>
                   <div className="doc-meta">
-                    {file.type} · {file.updatedAt}
+                    <FileTypeTag 
+                      type={file.type === "合同文档" ? "sales-contract" : 
+                            file.type === "专卖许可证" ? "license" : 
+                            file.type === "行政处罚决定书" ? "punishment" : "agreement"} 
+                      text={file.type}
+                      size="sm"
+                      showIcon={false}
+                      className="mr-2"
+                    />
+                    <span className="text-gray-500">·</span>
+                    <span className="ml-2 text-gray-500">{file.updatedAt}</span>
                   </div>
                 </div>
               </div>
@@ -240,42 +263,3 @@ function ShortcutItem({ icon, label, to }: ShortcutItemProps) {
     </Button>
   );
 }
-
-// 状态标签组件
-interface StatusBadgeProps {
-  status: string;
-}
-
-function StatusBadge({ status }: StatusBadgeProps) {
-  const statusMap: Record<string, { label: string, className: string, icon: string }> = {
-    pass: { 
-      label: '通过', 
-      className: 'status-badge status-success', 
-      icon: 'ri-checkbox-circle-line' 
-    },
-    warning: { 
-      label: '警告', 
-      className: 'status-badge status-warning', 
-      icon: 'ri-alert-line' 
-    },
-    fail: { 
-      label: '不通过', 
-      className: 'status-badge status-error', 
-      icon: 'ri-close-circle-line' 
-    },
-    pending: { 
-      label: '待确认', 
-      className: 'status-badge status-processing', 
-      icon: 'ri-time-line' 
-    }
-  };
-  
-  const { label, className, icon } = statusMap[status] || statusMap.pending;
-  
-  return (
-    <span className={className}>
-      <i className={`${icon} mr-1`}></i>
-      {label}
-    </span>
-  );
-}