feat: Implement initial full-stack application structure including frontend pages, components, hooks, API integration, and backend services for account pooling and management.

2026-01-30 07:40:35 +08:00
commit f4448bbef2
106 changed files with 19282 additions and 0 deletions
--- a/frontend/src/components/common/StatusBadge.tsx
+++ b/frontend/src/components/common/StatusBadge.tsx
@@ -0,0 +1,66 @@
+import { type HTMLAttributes, forwardRef } from 'react'
+import type { AccountStatus } from '../../types'
+
+export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  status: AccountStatus | 'active' | 'inactive' | 'error'
+  size?: 'sm' | 'md'
+}
+
+const StatusBadge = forwardRef<HTMLSpanElement, StatusBadgeProps>(
+  ({ className = '', status, size = 'md', ...props }, ref) => {
+    const getStatusConfig = (status: string) => {
+      const configs: Record<string, { label: string; color: string }> = {
+        pending: {
+          label: '待检查',
+          color: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
+        },
+        checking: {
+          label: '检查中',
+          color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
+        },
+        active: {
+          label: '正常',
+          color: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+        },
+        banned: {
+          label: '封禁',
+          color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+        },
+        token_expired: {
+          label: '过期',
+          color: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
+        },
+        error: {
+          label: '错误',
+          color: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+        },
+        inactive: {
+          label: '停用',
+          color: 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300',
+        },
+      }
+      return configs[status] || configs.error
+    }
+
+    const config = getStatusConfig(status)
+
+    const sizeStyles = {
+      sm: 'px-2 py-0.5 text-xs',
+      md: 'px-2.5 py-1 text-xs',
+    }
+
+    return (
+      <span
+        ref={ref}
+        className={`inline-flex items-center font-medium rounded-full ${config.color} ${sizeStyles[size]} ${className}`}
+        {...props}
+      >
+        {config.label}
+      </span>
+    )
+  }
+)
+
+StatusBadge.displayName = 'StatusBadge'
+
+export default StatusBadge