feat: Обновление компонента AutoUrlManager с добавлением новых функций, таких как импорт URL и очистка пустых строк. Внедрены новые компоненты для улучшения пользовательского интерфейса и взаимодействия, а также улучшена валидация и обработка ошибок.

2025-11-11 21:08:45 +07:00
parent c83a4dcd81
commit ae88a3a46a
1 changed files with 134 additions and 104 deletions
@@ -13,6 +13,11 @@ import {
  IconCircleCheck,
  IconCopy
 } from '@tabler/icons-react';
+import PageHeader from './components/PageHeader.jsx';
+import PageHeaderActions from './components/PageHeaderActions.jsx';
+import TableSkeleton, { TableEmpty } from './components/TableSkeleton.jsx';
+import EmptyState from './components/EmptyState.jsx';
+import ImportModal from './components/ImportModal.jsx';

 function AutoUrlManager() {
  const [urls, setUrls] = useState([]);
@@ -22,6 +27,7 @@ function AutoUrlManager() {
  const [message, setMessage] = useState('');
  const [messageType, setMessageType] = useState('');
  const [touched, setTouched] = useState({});
+  const [importOpen, setImportOpen] = useState(false);

  useEffect(() => {
    fetchUrls();
@@ -45,6 +51,10 @@ function AutoUrlManager() {
    setUrls([...urls, { url: '', community: '' }]);
  };

+  const clearEmptyRows = () => {
+    setUrls(urls.filter(u => u != null && (u.url || u.community)));
+  };
+
  const removeUrl = (index) => {
    setUrls(urls.filter((_, i) => i !== index));
  };
@@ -144,24 +154,83 @@ function AutoUrlManager() {
    }
  };

-  if (loading) {
-    return (
-      <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '200px' }}>
-        <div className="spinner-border" role="status" aria-label="Загрузка"></div>
-      </div>
-    );
-  }
-
  return (
    <div>
-      <div className="page-header d-print-none mb-4">
-        <div className="row align-items-center">
-          <div className="col">
-            <h2 className="page-title">Автоматические URL</h2>
-            <div className="page-pretitle">Управление автоматическими URL-адресами для загрузки списков IP и доменов</div>
+      <PageHeader
+        title="Автоматические URL"
+        pretitle="Управление автоматическими URL-адресами для загрузки списков IP и доменов"
+        actions={(
+          <div className="d-flex align-items-center justify-content-between">
+            <div className="btn-list">
+              <button 
+                className="btn btn-outline-primary"
+                type="button"
+                onClick={() => setImportOpen(true)}
+                disabled={saving || processing}
+                title="Импорт из текста или файла"
+              >
+                <IconUpload className="me-1" /> Импорт
+              </button>
+              <button 
+                className="btn btn-primary"
+                type="button"
+                onClick={addUrl}
+                disabled={saving || processing}
+                title="Добавить строку"
+              >
+                <IconPlus className="me-1" /> Добавить URL
+              </button>
+            </div>
+            <div className="ms-auto btn-list">
+              <button
+                className="btn btn-outline-secondary"
+                type="button"
+                onClick={clearEmptyRows}
+                disabled={saving || processing || urls.length === 0}
+                title="Удалить пустые строки"
+              >
+                Очистить пустые
+              </button>
+              <button
+                className="btn btn-outline-primary"
+                type="button"
+                onClick={saveUrls}
+                disabled={saving || processing || !hasAtLeastOneValidRow}
+                title="Сохранить список URL"
+              >
+                {saving ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" role="status" />
+                    Сохранение...
+                  </>
+                ) : (
+                  <>
+                    <IconDeviceFloppy className="me-1" /> Сохранить
+                  </>
+                )}
+              </button>
+              <button
+                className="btn btn-primary"
+                type="button"
+                onClick={processUrls}
+                disabled={saving || processing || !hasAtLeastOneValidRow}
+                title="Загрузить и обработать все URL"
+              >
+                {processing ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" role="status" />
+                    Обработка...
+                  </>
+                ) : (
+                  <>
+                    <IconDownload className="me-1" /> Загрузить списки
+                  </>
+                )}
+              </button>
+            </div>
          </div>
-        </div>
-      </div>
+        )}
+      />

      {message && (
        <div className={`alert alert-${messageType === 'error' ? 'danger' : 'success'} alert-dismissible`} role="alert">
@@ -174,53 +243,36 @@ function AutoUrlManager() {
      )}

      <div className="card">
-        <div className="card-header">
-          <h3 className="card-title">URL-адреса для автоматической загрузки</h3>
-          <div className="card-actions">
-            <div className="btn-list">
-              <button 
-                className="btn btn-outline-secondary btn-sm" 
-                onClick={() => {
-                  const text = window.prompt('Вставьте строки вида: URL ПРОБЕЛ COMMUNITY (по одной записи на строку)');
-                  if (!text) return;
-                  const lines = text.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
-                  const parsed = lines.map(l => {
-                    const [u, c] = l.split(/\s+/);
-                    return { url: u || '', community: c || '' };
-                  });
-                  setUrls(prev => [...prev, ...parsed]);
-                }}
-                disabled={saving || processing}
-                title="Массовое добавление из буфера"
-              >
-                <IconUpload className="me-1" />
-                Импорт
-              </button>
-              <button 
-                className="btn btn-primary btn-sm" 
-                onClick={addUrl}
-                disabled={saving || processing}
-              >
-                <IconPlus className="me-1" />
-                Добавить URL
-              </button>
-            </div>
-          </div>
-        </div>
        <div className="card-body">
-          {urls.length === 0 ? (
-            <div className="text-center text-muted py-4">
-              <IconAlertCircle size={48} className="mb-3" />
-              <p>Нет добавленных URL-адресов</p>
-              <button 
-                className="btn btn-primary" 
-                onClick={addUrl}
-                disabled={saving || processing}
-              >
-                <IconPlus className="me-1" />
-                Добавить первый URL
-              </button>
-            </div>
+          {loading ? (
+            <TableSkeleton rows={6} cols={3} />
+          ) : urls.length === 0 ? (
+            <EmptyState
+              icon={IconAlertCircle}
+              title="Нет добавленных URL-адресов"
+              description="Добавьте хотя бы одну строку с корректным URL и числовым community."
+              size="default"
+              action={(
+                <button 
+                  className="btn btn-primary" 
+                  onClick={addUrl}
+                  disabled={saving || processing}
+                >
+                  <IconPlus className="me-1" />
+                  Добавить первый URL
+                </button>
+              )}
+              secondaryAction={(
+                <button 
+                  className="btn btn-outline-primary"
+                  onClick={() => setImportOpen(true)}
+                  disabled={saving || processing}
+                >
+                  <IconUpload className="me-1" />
+                  Импорт
+                </button>
+              )}
+            />
          ) : (
            <div className="table-responsive">
              <table className="table card-table table-vcenter table-nowrap mb-0">
@@ -299,49 +351,8 @@ function AutoUrlManager() {
                <span className="badge bg-blue-lt text-blue">Всего URL-адресов: {urls.length}</span>
              )}
            </div>
-            <div>
-              <button
-                className="btn btn-outline-secondary me-2"
-                onClick={() => setUrls(urls.filter(u => u != null && (u.url || u.community)))}
-                disabled={saving || processing || urls.length === 0}
-                title="Удалить пустые строки"
-              >
-                Очистить пустые
-              </button>
-              <button
-                className="btn btn-outline-primary me-2"
-                onClick={saveUrls}
-                disabled={saving || processing || !hasAtLeastOneValidRow}
-              >
-                {saving ? (
-                  <>
-                    <span className="spinner-border spinner-border-sm me-2" role="status" />
-                    Сохранение...
-                  </>
-                ) : (
-                  <>
-                    <IconDeviceFloppy className="me-1" />
-                    Сохранить
-                  </>
-                )}
-              </button>
-              <button
-                className="btn btn-primary"
-                onClick={processUrls}
-                disabled={saving || processing || !hasAtLeastOneValidRow}
-              >
-                {processing ? (
-                  <>
-                    <span className="spinner-border spinner-border-sm me-2" role="status" />
-                    Обработка...
-                  </>
-                ) : (
-                  <>
-                    <IconDownload className="me-1" />
-                    Загрузить списки
-                  </>
-                )}
-              </button>
+            <div className="text-muted small">
+              Введите http/https URL и числовой community. Не валидные поля подсвечиваются.
            </div>
          </div>
        </div>
@@ -405,6 +416,25 @@ function AutoUrlManager() {
          </div>
        </div>
      </div>
+
+      {/* Модальное окно импорта */}
+      <ImportModal
+        show={importOpen}
+        title="Импорт URL + community"
+        description="Формат строк: URL ПРОБЕЛ COMMUNITY. Например: https://example.com/ips.txt 555"
+        sampleHeader={['url', 'community']}
+        placeholder={'https://example.com/ips.txt 555\nhttps://test.com/domains.txt 666'}
+        parseLine={(line) => {
+          const [u, c] = String(line).split(/\s+/);
+          return { url: u || '', community: c || '' };
+        }}
+        validateItem={(obj) => Boolean(obj?.url) && Boolean(obj?.community)}
+        onConfirm={(items) => {
+          setUrls(prev => [...prev, ...items]);
+          setImportOpen(false);
+        }}
+        onClose={() => setImportOpen(false)}
+      />
    </div>
  );
 }