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

app/styles/components/status-badge.css

@@ -2,71 +2,90 @@
  * 状态徽章组件样式
  */
 
-/* 状态徽章基础样式 */
 .status-badge {
-  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+/* 状态颜色 - 从 documents_index.css 同步 */
+.status-pending {
+  background-color: #E6F7FF;
+  color: #1890FF;
+}
+
+.status-processing {
+  background-color: #FFF7E6;
+  color: #FA8C16;
+}
+
+.status-pass {
+  background-color: #F6FFED;
+  color: #52C41A;
+}
+
+.status-warning {
+  background-color: #FFFBE6;
+  color: #FAAD14;
+}
+
+.status-fail {
+  background-color: #FFF1F0;
+  color: #F5222D;
+}
+
+/* 动画效果 - 用于processing状态 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.status-processing i {
+  animation: spin 1.2s linear infinite;
 }
 
 /* 状态徽章尺寸 */
 .status-badge-sm {
-  @apply px-2 py-0.5 text-xs;
+  padding: 0px 4px;
+  font-size: 11px;
 }
 
 .status-badge-lg {
-  @apply px-3 py-1 text-sm;
-}
-
-/* 状态徽章类型 */
-.status-badge-success {
-  @apply bg-green-100 text-green-800;
-}
-
-.status-badge-processing {
-  @apply bg-blue-100 text-blue-800;
-}
-
-.status-badge-warning {
-  @apply bg-yellow-100 text-yellow-800;
-}
-
-.status-badge-error {
-  @apply bg-red-100 text-red-800;
-}
-
-.status-badge-default {
-  @apply bg-gray-100 text-gray-800;
+  padding: 3px 10px;
+  font-size: 14px;
 }
 
 /* 带图标的状态徽章 */
-.status-badge-with-icon {
-  @apply pl-1.5;
-}
-
 .status-badge i {
-  @apply mr-1;
+  margin-right: 4px;
 }
 
 /* 可点击的状态徽章 */
 .status-badge-clickable {
-  @apply cursor-pointer transition-colors duration-200;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
-.status-badge-clickable.status-badge-success:hover {
-  @apply bg-green-200;
+.status-badge-clickable.status-pending:hover {
+  background-color: #BAE7FF;
 }
 
-.status-badge-clickable.status-badge-processing:hover {
-  @apply bg-blue-200;
+.status-badge-clickable.status-processing:hover {
+  background-color: #FFE7BA;
 }
 
-.status-badge-clickable.status-badge-warning:hover {
-  @apply bg-yellow-200;
+.status-badge-clickable.status-pass:hover {
+  background-color: #D9F7BE;
 }
 
-.status-badge-clickable.status-badge-error:hover {
-  @apply bg-red-200;
+.status-badge-clickable.status-warning:hover {
+  background-color: #FFF1B8;
 }
 
-.status-badge-clickable.status-badge-default:hover {
-  @apply bg-gray-200;
+.status-badge-clickable.status-fail:hover {
+  background-color: #FFCCC7;
 }