refactor(MikrotikBackupsManager): optimize diff computation and synchronize scrolling between panels

frontend/src/MikrotikBackupsManager.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import * as Diff from 'diff';
 import api from './lib/api.js';
 import { useNotify } from './components/NotifyProvider.jsx';
@@ -75,9 +75,9 @@ const diffAddedBg = {
   borderLeft: '3px solid rgba(63, 185, 80, 0.9)',
 };
 
-function DiffPanel({ lines, side }) {
+function DiffPanel({ lines, side, innerRef, onScroll }) {
   return (
-    <pre style={diffPanelStyle}>
+    <pre style={diffPanelStyle} ref={innerRef} onScroll={onScroll}>
       {lines.length === 0 ? (
         <span style={diffLineStyle}># пусто</span>
       ) : (
@@ -141,6 +141,9 @@ function MikrotikBackupsManager() {
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
   const [diffModalOpen, setDiffModalOpen] = useState(false);
+  const leftDiffRef = useRef(null);
+  const rightDiffRef = useRef(null);
+  const isSyncingScrollRef = useRef(false);
 
   // UI-состояние выбора сервера для просмотра бэкапов (в стиле /filters)
   const [serverSearch, setServerSearch] = useState('');
@@ -254,12 +257,41 @@ function MikrotikBackupsManager() {
     return filteredBackupServers.slice(start, start + backupPageSize);
   }, [filteredBackupServers, backupPage, backupTotalPages]);
 
-  const diffLines = useMemo(
-    () => (diffResult?.configA != null && diffResult?.configB != null
-      ? getDiffLines(diffResult.configA, diffResult.configB)
-      : { left: [], right: [] }),
-    [diffResult?.configA, diffResult?.configB],
-  );
+  const diffComputed = useMemo(() => {
+    if (diffResult?.configA == null || diffResult?.configB == null) {
+      return {
+        left: [],
+        right: [],
+        stats: { removed: 0, added: 0, total: 0 },
+      };
+    }
+    const { left, right } = getDiffLines(diffResult.configA, diffResult.configB);
+    const removed = left.filter((l) => l.type === 'removed').length;
+    const added = right.filter((l) => l.type === 'added').length;
+    return {
+      left,
+      right,
+      stats: { removed, added, total: removed + added },
+    };
+  }, [diffResult?.configA, diffResult?.configB]);
+
+  const syncScroll = (source) => {
+    const leftEl = leftDiffRef.current;
+    const rightEl = rightDiffRef.current;
+    if (!leftEl || !rightEl) return;
+    const current = source === 'left' ? leftEl : rightEl;
+    const other = source === 'left' ? rightEl : leftEl;
+
+    if (isSyncingScrollRef.current) return;
+    isSyncingScrollRef.current = true;
+
+    const maxCurrent = current.scrollHeight - current.clientHeight;
+    const ratio = maxCurrent > 0 ? current.scrollTop / maxCurrent : 0;
+    const maxOther = other.scrollHeight - other.clientHeight;
+    other.scrollTop = ratio * (maxOther > 0 ? maxOther : 0);
+
+    isSyncingScrollRef.current = false;
+  };
 
   const handleBackupSort = (field) => {
     setBackupSortField((prevField) => {
@@ -891,20 +923,34 @@ function MikrotikBackupsManager() {
           </div>
         ) : (
           <>
-            {!diffResult.same && (
-              <div className="alert alert-info mb-3 small">
-                <IconAlertTriangle size={16} className="me-1 text-warning" />
-                Конфигурации отличаются — слева A, справа B. Проверьте различия перед откатом.
-              </div>
-            )}
+            <div className="alert alert-info mb-3 small d-flex justify-content-between align-items-center">
+              <span>
+                {!diffResult.same ? (
+                  <>
+                    <IconAlertTriangle size={16} className="me-1 text-warning" />
+                    Конфигурации отличаются — слева A, справа B. Проверьте различия перед откатом.
+                  </>
+                ) : (
+                  'Конфигурации идентичны — изменений нет.'
+                )}
+              </span>
+              <span>
+                Всего изменений:{' '}
+                <span className="fw-semibold">{diffComputed.stats.total}</span>
+                <span className="text-success ms-2">+{diffComputed.stats.added}</span>
+                <span className="text-danger ms-2">−{diffComputed.stats.removed}</span>
+              </span>
+            </div>
             <div className="row">
               <div className="col-md-6 mb-3 mb-md-0">
                 <div className="mb-2 small text-muted text-truncate" title={diffResult.a?.key}>
                   A: {diffResult.a?.key}
                 </div>
                 <DiffPanel
-                  lines={diffLines.left}
+                  lines={diffComputed.left}
                   side="left"
+                  innerRef={leftDiffRef}
+                  onScroll={() => syncScroll('left')}
                 />
               </div>
               <div className="col-md-6">
@@ -912,8 +958,10 @@ function MikrotikBackupsManager() {
                   B: {diffResult.b?.key}
                 </div>
                 <DiffPanel
-                  lines={diffLines.right}
+                  lines={diffComputed.right}
                   side="right"
+                  innerRef={rightDiffRef}
+                  onScroll={() => syncScroll('right')}
                 />
               </div>
             </div>