feat: Добавить компонент AccordionCard в менеджеры ASNs, Domains и IPRanges для улучшения интерфейса ввода данных и поддержки функции перетаскивания файлов для импорта

frontend/src/ASNsNewManager.jsx

@@ -31,6 +31,7 @@ import ErrorAlert from './components/ErrorAlert.jsx';
 import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
 import ImportModal from './components/ImportModal.jsx';
 import QuickAddBar from './components/QuickAddBar.jsx';
+import AccordionCard from './components/AccordionCard.jsx';
 
 const API_URL = '/api';
 
@@ -523,7 +524,8 @@ function ASNsNewManager() {
             </div>
           </div>
 
-          {/* QuickAdd stays for batch input */}
+          {/* Дополнительные варианты */}
+          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false}>
             <QuickAddBar
               placeholder={'12345 65000:100'}
               help={'Вставьте строки: ASN ПРОБЕЛ COMMUNITY'}
@@ -541,6 +543,15 @@ function ASNsNewManager() {
                 });
               }}
             />
+            <div className="card card-md border-dashed mt-3"
+                 onDragOver={(e) => { e.preventDefault(); }}
+                 onDrop={onDropImport}
+            >
+              <div className="card-body text-center text-muted">
+                Перетащите файл TXT/CSV сюда для импорта (формат: ASN community)
+              </div>
+            </div>
+          </AccordionCard>
           {/* Drag & Drop импорт */}
           <div
             className="card card-md border-dashed"

frontend/src/DomainsNewManager.jsx

@@ -31,6 +31,7 @@ import ErrorAlert from './components/ErrorAlert.jsx';
 import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
 import ImportModal from './components/ImportModal.jsx';
 import QuickAddBar from './components/QuickAddBar.jsx';
+import AccordionCard from './components/AccordionCard.jsx';
 
 const API_URL = '/api';
 
@@ -529,7 +530,8 @@ function DomainsNewManager() {
             </div>
           </div>
 
-          {/* QuickAdd stays for batch input */}
+          {/* Дополнительные варианты */}
+          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false}>
             <QuickAddBar
               placeholder={'example.com 65000:100'}
               help={'Вставьте строки: DOMAIN ПРОБЕЛ COMMUNITY'}
@@ -547,6 +549,15 @@ function DomainsNewManager() {
                 });
               }}
             />
+            <div className="card card-md border-dashed mt-3"
+                 onDragOver={(e) => { e.preventDefault(); }}
+                 onDrop={onDropImport}
+            >
+              <div className="card-body text-center text-muted">
+                Перетащите файл TXT/CSV сюда для импорта (формат: domain community)
+              </div>
+            </div>
+          </AccordionCard>
 
           {/* Карточка действий больше не нужна — действия перенесены в page-header */}
           {/* Drag & Drop импорт */}

frontend/src/IPRangesManager.jsx

@@ -31,6 +31,7 @@ import ErrorAlert from './components/ErrorAlert.jsx';
 import { notifyMutationSuccess } from './components/NotifyProvider.jsx';
 import ImportModal from './components/ImportModal.jsx';
 import QuickAddBar from './components/QuickAddBar.jsx';
+import AccordionCard from './components/AccordionCard.jsx';
 
 const API_URL = '/api';
 
@@ -779,7 +780,8 @@ function IPRangesManager() {
             </div>
           </div>
 
-          {/* QuickAdd stays for batch input */}
+          {/* Дополнительные варианты */}
+          <AccordionCard title={'Дополнительные варианты'} defaultOpen={false}>
             <QuickAddBar
               placeholder={'192.168.1.0/24 65000:100'}
               help={'Вставьте строки: CIDR ПРОБЕЛ COMMUNITY'}
@@ -797,6 +799,15 @@ function IPRangesManager() {
                 });
               }}
             />
+            <div className="card card-md border-dashed mt-3"
+                 onDragOver={(e) => { e.preventDefault(); }}
+                 onDrop={onDropImport}
+            >
+              <div className="card-body text-center text-muted">
+                Перетащите файл TXT/CSV сюда для импорта (формат: CIDR community)
+              </div>
+            </div>
+          </AccordionCard>
           {/* Drag & Drop импорт */}
           <div
             className="card card-md border-dashed"

frontend/src/components/AccordionCard.jsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { IconChevronDown } from '@tabler/icons-react';
+
+function AccordionCard({ title, defaultOpen = false, children }) {
+  const [open, setOpen] = useState(Boolean(defaultOpen));
+  return (
+    <div className="card card-md">
+      <div className="card-header d-flex align-items-center justify-content-between" role="button" onClick={() => setOpen(v => !v)} aria-expanded={open}>
+        <h3 className="card-title m-0">{title}</h3>
+        <IconChevronDown className={`icon ms-2 transition ${open ? 'rotate-180' : ''}`} />
+      </div>
+      {open && (
+        <div className="card-body">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AccordionCard;
+
+

frontend/src/components/PageHeader.jsx

@@ -17,7 +17,7 @@ function PageHeader({ title, pretitle, actions, meta }) {
       </div>
       {/* Отдельная строка под заголовком: действия страницы */}
       {actions && (
-        <div className="mt-3 d-print-none">
+        <div className="mt-4 d-print-none">
           {actions}
         </div>
       )}