Версия 1.2.19 Добавлен просмотр изображений путем нажатия кнопкой мыши при пред-просмотре данных статей для импорта.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-react-typescript-starter",
   "private": true,
-  "version": "1.2.18",
+  "version": "1.2.19",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/pages/ImportArticlesPage.tsx

@@ -26,6 +26,8 @@ export function ImportArticlesPage() {
   const [editingArticle, setEditingArticle] = useState<Article | null>(null);
   const [isSaving, setIsSaving] = useState(false);
   const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [previewImgUrl, setPreviewImgUrl] = useState<string | null>(null);
+  const [previewSize, setPreviewSize] = useState<{w: number; h: number} | null>(null);
   const [error, setError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -350,11 +352,17 @@ export function ImportArticlesPage() {
                                               <img
                                                   src={imageUrl}
                                                   alt={`image-${index + 1}`}
-                                                  className="w-full h-48 object-cover rounded-md mb-2"
+                                                  className="w-full h-48 object-cover rounded-md mb-2 cursor-pointer hover:opacity-80 transition"
+                                                  title="Показать изображение целиком"
+                                                  onClick={(e) => {
+                                                    const rect = e.currentTarget.getBoundingClientRect();
+                                                    setPreviewSize({ w: rect.width, h: rect.height });
+                                                    setPreviewImgUrl(imageUrl);
+                                                  }}
                                                   onError={(e) => {
-                                                    const tgt = e.currentTarget;
-                                                    tgt.onerror = null;
-                                                    tgt.src = fallbackImg;
+                                                    const target = e.currentTarget;
+                                                    target.onerror = null;
+                                                    target.src = fallbackImg;
                                                   }}
                                               />
 
@@ -506,6 +514,31 @@ export function ImportArticlesPage() {
                   </div>
                 </div>
             )}
+
+            {/* МОДАЛЬНОЕ ОКНО ПОЛНОГО ПРОСМОТРА ИЗОБРАЖЕНИЯ */}
+            {previewImgUrl && (
+                <div
+                    className="fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center z-50 p-4"
+                    onClick={() => setPreviewImgUrl(null)} // закрытие по клику на фон
+                >
+                  <div className="bg-white rounded-lg shadow-lg max-w-3xl w-full p-4 relative">
+
+                    <img
+                        src={previewImgUrl}
+                        alt="full-preview"
+                        style={{
+                          width: previewSize ? previewSize.w * 2 : 'auto',
+                          height: previewSize ? previewSize.h * 2 : 'auto',
+                          maxWidth: '90vw',
+                          maxHeight: '90vh',
+                        }}
+                        className="object-contain rounded cursor-pointer"
+                        onClick={() => setPreviewImgUrl(null)}
+                    />
+                  </div>
+                </div>
+            )}
+
           </main>
         </div>
       </AuthGuard>