feat: Рефакторинг модальных окон с добавлением обработчиков клика по фону для закрытия. Обновление компонентов ConfirmDialog, ConfirmDiffModal, ConfirmModal, FormModal, HistoryModal, ImportModal, SettingsModal и WsUpdateModal для улучшения взаимодействия с пользователем и унификации интерфейса.

frontend/src/components/ConfirmDialog.jsx

@@ -18,12 +18,23 @@ export default function ConfirmDialog({
 }) {
   if (!open) return null;
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onCancel?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onCancel?.(); }}
       >
         <div className={`modal-dialog ${size === 'sm' ? 'modal-sm' : size === 'lg' ? 'modal-lg' : ''} modal-dialog-centered`} role="document">
@@ -49,7 +60,7 @@ export default function ConfirmDialog({
           >
             <div className="modal-header">
               <h5 className="modal-title">{title}</h5>
-            <button type="button" className="btn-close" onClick={onCancel} />
+              <button type="button" className="btn-close" onClick={onCancel} aria-label="Закрыть" />
             </div>
             
             <div className="modal-body">
@@ -89,5 +100,6 @@ export default function ConfirmDialog({
           </div>
         </div>
       </div>
+    </>
   );
 }

frontend/src/components/ConfirmDiffModal.jsx

@@ -11,12 +11,23 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
   
   if (!show) return null;
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div className="modal-dialog modal-sm modal-dialog-centered" role="document">
@@ -42,7 +53,7 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
           >
             <div className="modal-header">
               <h5 className="modal-title">Подтвердить сохранение</h5>
-            <button type="button" className="btn-close" onClick={onClose} />
+              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
             </div>
             
             <div className="modal-body">
@@ -98,6 +109,7 @@ function ConfirmDiffModal({ show, diff, onConfirm, onClose, loading = false }) {
           </div>
         </div>
       </div>
+    </>
   );
 }
 

frontend/src/components/ConfirmModal.jsx

@@ -23,12 +23,23 @@ function ConfirmModal({
     onConfirm?.();
   };
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div className="modal-dialog modal-sm modal-dialog-centered" role="document">
@@ -54,7 +65,7 @@ function ConfirmModal({
           >
             <div className="modal-header">
               <h5 className="modal-title">{title}</h5>
-            <button type="button" className="btn-close" onClick={onClose} />
+              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
             </div>
             
             <div className="modal-body">
@@ -92,6 +103,7 @@ function ConfirmModal({
           </div>
         </div>
       </div>
+    </>
   );
 }
 

frontend/src/components/FormModal.jsx

@@ -36,12 +36,23 @@ function FormModal({
     }
   };
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={handleKeyDown}
       >
         <div 
@@ -52,7 +63,7 @@ function FormModal({
             <form onSubmit={handleSubmit}>
               <div className="modal-header">
                 <h5 className="modal-title">{title}</h5>
-              <button type="button" className="btn-close" onClick={onClose} />
+                <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
               </div>
               
               <div className="modal-body">
@@ -85,6 +96,7 @@ function FormModal({
           </div>
         </div>
       </div>
+    </>
   );
 }
 

frontend/src/components/HistoryModal.jsx

@@ -55,13 +55,23 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
     refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
   }
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
     <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-        style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -90,7 +100,7 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
                 <IconHistory className="me-2" size={24} />
                 История версий
               </h5>
-              <button type="button" className="btn-close" onClick={onClose} />
+              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
             </div>
             
             <div className="modal-body">

frontend/src/components/ImportModal.jsx

@@ -86,12 +86,23 @@ function ImportModal({
     URL.revokeObjectURL(url);
   };
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -101,7 +112,7 @@ function ImportModal({
                 <IconUpload className="me-2" size={24} />
                 {title}
               </h5>
-            <button type="button" className="btn-close" onClick={onClose} />
+              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
             </div>
           
           <div className="modal-body">

frontend/src/components/Modal.jsx

@@ -50,12 +50,23 @@ function Modal({
 
   if (!show) return null;
 
+  const handleBackdropClick = (e) => {
+    if (backdrop && e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className={`modal show d-block ${className}`}
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div 
@@ -107,6 +118,7 @@ function Modal({
           </div>
         </div>
       </div>
+    </>
   );
 }
 

frontend/src/components/SettingsModal.jsx

@@ -103,12 +103,23 @@ export default function SettingsModal({ open, onClose }) {
     }
   };
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div className="modal-dialog modal-dialog-centered" role="document">
@@ -118,7 +129,7 @@ export default function SettingsModal({ open, onClose }) {
                 <IconSettings className="me-2" size={24} />
                 Настройки интерфейса
               </h5>
-            <button type="button" className="btn-close" onClick={onClose} />
+              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
             </div>
           
           <div className="modal-body">

frontend/src/components/WsUpdateModal.jsx

@@ -117,12 +117,23 @@ function WsUpdateModal({ show, url, onClose }) {
     );
   };
 
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose?.();
+    }
+  };
+
   return (
+    <>
+      {/* Modal Backdrop */}
+      <div className="modal-backdrop show" onClick={handleBackdropClick} />
+      
+      {/* Modal */}
       <div 
         className="modal show d-block" 
         role="dialog" 
         aria-modal="true"
-      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        tabIndex={-1}
         onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
       >
         <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -133,7 +144,7 @@ function WsUpdateModal({ show, url, onClose }) {
                 Логи запуска
                 {getStatusBadge()}
               </h5>
-            <button type="button" className="btn-close" onClick={onClose} />
+              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
             </div>
           
           <div className="modal-body">