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

2025-03-27 19:58:58 +08:00
parent d9b9ce4676
commit 540618b8ca
33 changed files with 2613 additions and 987 deletions
@@ -0,0 +1,69 @@
+import { ReviewStatus, REVIEW_STATUS_LABELS } from '~/routes/rules-files';
+
+interface StatusBadgeProps {
+  status: ReviewStatus;
+  issueCount?: number;
+  className?: string;
+  size?: 'default' | 'sm' | 'lg';
+  clickable?: boolean;
+  onClick?: () => void;
+}
+
+/**
+ * 文件评查状态标签组件
+ * 根据评查状态显示不同样式的标签
+ */
+export function StatusBadge({ 
+  status, 
+  issueCount = 0, 
+  className = '',
+  size,
+  clickable = false,
+  onClick
+}: 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;
+    }
+  };
+
+  const handleClick = () => {
+    if (clickable && onClick) {
+      onClick();
+    }
+  };
+
+  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>
+  );
+}