From 239a6287a62d94feb4849c57f2040edc5fcd9d71 Mon Sep 17 00:00:00 2001
From: anibilag <anibilag@yandex.ru>
Date: Sat, 13 Dec 2025 22:49:20 +0300
Subject: [PATCH] =?UTF-8?q?=D0=92=D0=B5=D1=80=D1=81=D0=B8=D1=8F=201.2.19?=
 =?UTF-8?q?=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=20=D0=B8=D0=B7=D0=BE?=
 =?UTF-8?q?=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=BF=D1=83?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BC=20=D0=BD=D0=B0=D0=B6=D0=B0=D1=82=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=BE=D0=B9=20=D0=BC=D1=8B?=
 =?UTF-8?q?=D1=88=D0=B8=20=D0=BF=D1=80=D0=B8=20=D0=BF=D1=80=D0=B5=D0=B4-?=
 =?UTF-8?q?=D0=BF=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B5=20=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=BD=D1=8B=D1=85=20=D1=81=D1=82=D0=B0=D1=82=D0=B5?=
 =?UTF-8?q?=D0=B9=20=D0=B4=D0=BB=D1=8F=20=D0=B8=D0=BC=D0=BF=D0=BE=D1=80?=
 =?UTF-8?q?=D1=82=D0=B0.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 +-
 src/pages/ImportArticlesPage.tsx | 41 ++++++++++++++++++++++++++++----
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 2c046f1..8699cbf 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/ImportArticlesPage.tsx b/src/pages/ImportArticlesPage.tsx
index 5821339..a3090d5 100644
--- a/src/pages/ImportArticlesPage.tsx
+++ b/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>