feat: Добавить новые компоненты и улучшения UX/UI, включая Breadcrumbs с динамическими фильтрами, ToastContainer для уведомлений и CommandPalette для глобального поиска. Обновить TableSkeleton с анимацией и добавить новые skeleton компоненты для карточек, списков и форм. Обновить документацию по новым компонентам и улучшениям.

2025-10-02 18:02:22 +07:00
parent 495063a510
commit 339144fb11
12 changed files with 1950 additions and 24 deletions
@@ -0,0 +1,166 @@
+import { IconX } from '@tabler/icons-react'
+
+/**
+ * Компонент для отображения прогресса долгих операций
+ * Показывает progress bar и возможность отмены
+ */
+function ProgressIndicator({
+  progress = 0, // 0-100
+  total = 100,
+  current = 0,
+  message = 'Обработка...',
+  onCancel = null,
+  variant = 'blue', // blue, green, red, yellow, purple
+  showPercentage = true,
+  showCount = true,
+  animated = true,
+  className = ''
+}) {
+  const percentage = total > 0 ? Math.min(100, Math.max(0, (current / total) * 100)) : progress
+
+  return (
+    <div className={`card ${className}`}>
+      <div className="card-body">
+        <div className="d-flex justify-content-between align-items-center mb-2">
+          <div className="text-muted">{message}</div>
+          {onCancel && (
+            <button 
+              className="btn btn-sm btn-ghost-secondary btn-icon"
+              onClick={onCancel}
+              title="Отменить"
+            >
+              <IconX size={18} />
+            </button>
+          )}
+        </div>
+
+        {/* Progress bar */}
+        <div className="progress mb-2" style={{ height: '0.5rem' }}>
+          <div 
+            className={`progress-bar ${animated ? 'progress-bar-striped progress-bar-animated' : ''} bg-${variant}`}
+            role="progressbar"
+            style={{ width: `${percentage}%` }}
+            aria-valuenow={percentage}
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+          </div>
+        </div>
+
+        {/* Статистика */}
+        <div className="d-flex justify-content-between align-items-center">
+          {showCount && total > 0 && (
+            <div className="text-muted small">
+              Обработано: <strong>{current}</strong> из <strong>{total}</strong>
+            </div>
+          )}
+          {showPercentage && (
+            <div className={`text-${variant} fw-bold`}>
+              {percentage.toFixed(0)}%
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Линейный progress indicator (более компактный)
+ */
+export function LinearProgress({
+  progress = 0,
+  variant = 'blue',
+  message = null,
+  className = ''
+}) {
+  return (
+    <div className={className}>
+      {message && (
+        <div className="text-muted small mb-1">{message}</div>
+      )}
+      <div className="progress" style={{ height: '0.25rem' }}>
+        <div 
+          className={`progress-bar progress-bar-indeterminate bg-${variant}`}
+          style={progress > 0 ? { width: `${progress}%` } : {}}
+        ></div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Circular progress (кольцевой индикатор)
+ */
+export function CircularProgress({
+  progress = 0,
+  size = 64,
+  strokeWidth = 4,
+  variant = 'blue',
+  showPercentage = true,
+  className = ''
+}) {
+  const radius = (size - strokeWidth) / 2
+  const circumference = radius * 2 * Math.PI
+  const offset = circumference - (progress / 100) * circumference
+
+  // Цвета Tabler
+  const colors = {
+    blue: '#206bc4',
+    green: '#2fb344',
+    red: '#d63939',
+    yellow: '#f76707',
+    purple: '#ae3ec9',
+    azure: '#4299e1'
+  }
+
+  return (
+    <div className={`d-inline-flex align-items-center justify-content-center ${className}`}>
+      <svg width={size} height={size}>
+        {/* Фоновое кольцо */}
+        <circle
+          stroke="#e9ecef"
+          fill="transparent"
+          strokeWidth={strokeWidth}
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+        />
+        {/* Прогресс */}
+        <circle
+          stroke={colors[variant] || colors.blue}
+          fill="transparent"
+          strokeWidth={strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          strokeLinecap="round"
+          r={radius}
+          cx={size / 2}
+          cy={size / 2}
+          style={{
+            transform: 'rotate(-90deg)',
+            transformOrigin: '50% 50%',
+            transition: 'stroke-dashoffset 0.3s ease'
+          }}
+        />
+        {/* Процент в центре */}
+        {showPercentage && (
+          <text
+            x="50%"
+            y="50%"
+            textAnchor="middle"
+            dy=".3em"
+            fontSize="14"
+            fontWeight="600"
+            fill={colors[variant] || colors.blue}
+          >
+            {Math.round(progress)}%
+          </text>
+        )}
+      </svg>
+    </div>
+  )
+}
+
+export default ProgressIndicator
+