封装公共组件，调整样式文件的布局，修改路由页面样式

app/components/ui/StatusDot.tsx

@@ -4,12 +4,16 @@ interface StatusDotProps {
   status: StatusType | boolean;
   text?: string;
   className?: string;
+  size?: 'default' | 'sm' | 'lg';
+  pulse?: boolean;
 }
 
 export function StatusDot({ 
   status, 
   text, 
-  className = ''
+  className = '',
+  size = 'default',
+  pulse = false
 }: StatusDotProps) {
   // 如果status是布尔值，则转换为对应的状态类型
   const statusType = typeof status === 'boolean' 
@@ -23,11 +27,14 @@ export function StatusDot({
     statusType === 'warning' ? '警告' :
     statusType === 'processing' ? '处理中' : '未知'
   );
+
+  const sizeClass = size !== 'default' ? `status-dot-${size}` : '';
+  const pulseClass = pulse ? 'status-dot-pulse' : '';
   
   return (
-    <span className={`inline-flex items-center ${className}`}>
-      <i className={`status-dot status-dot-${statusType}`}></i>
-      {statusText}
+    <span className={`status-dot-with-text ${className}`}>
+      <span className={`status-dot status-dot-${statusType} ${sizeClass} ${pulseClass}`}></span>
+      <span className="status-dot-text">{statusText}</span>
     </span>
   );
 }