feat(MikrotikBackupsManager): add large modal for displaying backup content with improved UI

frontend/src/MikrotikBackupsManager.jsx

@@ -7,7 +7,7 @@ import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import DataTable from './components/DataTable.jsx';
-import { FullscreenModal } from './components/Modal.jsx';
+import { LargeModal, FullscreenModal } from './components/Modal.jsx';
 import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRefresh,
@@ -138,6 +138,7 @@ function MikrotikBackupsManager() {
   const [viewConfigKey, setViewConfigKey] = useState(null);
   const [viewConfigText, setViewConfigText] = useState('');
   const [viewLoading, setViewLoading] = useState(false);
+  const [viewModalOpen, setViewModalOpen] = useState(false);
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
   const [diffModalOpen, setDiffModalOpen] = useState(false);
@@ -382,6 +383,7 @@ function MikrotikBackupsManager() {
       setViewLoading(true);
       setViewConfigKey(key);
       setViewConfigText('');
+      setViewModalOpen(true);
       const res = await api.get('/mikrotik/backups/item', { params: { key } });
       setViewConfigText(res.data?.config || '');
     } catch (err) {
@@ -852,45 +854,49 @@ function MikrotikBackupsManager() {
         </div>
       </div>
 
-      {viewConfigKey && (
-        <div className="row mt-4">
-          <div className="col-12">
-            <div className="card">
-              <div className="card-header d-flex align-items-center justify-content-between">
-                <div>
-                  <div className="card-title mb-0">Содержимое бэкапа</div>
-                  <div className="text-muted small text-truncate" title={viewConfigKey}>
-                    {viewConfigKey}
-                  </div>
-                </div>
-                <div className="btn-list">
-                  <button
-                    type="button"
-                    className="btn btn-outline-secondary btn-sm"
-                    onClick={() => handleCopyToClipboard(viewConfigText)}
-                    disabled={!viewConfigText}
-                  >
-                    <IconCopy size={16} className="me-1" />
-                    Копировать
-                  </button>
-                </div>
-              </div>
-              <div className="card-body">
-                {viewLoading ? (
-                  <TableSkeleton rows={6} columns={1} />
-                ) : (
-                  <pre
-                    className="mb-0"
-                    style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
-                  >
-                    {viewConfigText || '# Нет данных для отображения'}
-                  </pre>
-                )}
-              </div>
+      <LargeModal
+        show={viewModalOpen}
+        onClose={() => {
+          setViewModalOpen(false);
+        }}
+        title="Содержимое бэкапа MikroTik"
+        footer={(
+          <div className="d-flex justify-content-between w-100">
+            <div className="text-muted small text-truncate" title={viewConfigKey || ''}>
+              {viewConfigKey || 'Бэкап не выбран'}
+            </div>
+            <div className="btn-list mb-0">
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-sm"
+                onClick={() => handleCopyToClipboard(viewConfigText)}
+                disabled={!viewConfigText}
+              >
+                <IconCopy size={16} className="me-1" />
+                Копировать
+              </button>
+              <button
+                type="button"
+                className="btn btn-secondary btn-sm"
+                onClick={() => setViewModalOpen(false)}
+              >
+                Закрыть
+              </button>
             </div>
           </div>
-        </div>
-      )}
+        )}
+      >
+        {viewLoading ? (
+          <TableSkeleton rows={6} columns={1} />
+        ) : (
+          <pre
+            className="bg-dark text-white p-3 rounded"
+            style={{ maxHeight: 500, overflow: 'auto', fontSize: 12 }}
+          >
+            <code>{viewConfigText || '# Нет данных для отображения'}</code>
+          </pre>
+        )}
+      </LargeModal>
 
       <FullscreenModal
         show={diffModalOpen}