Оптимизирована генерация QR-кода в компоненте LessonDetail: добавлена обработка изменения размера окна и улучшена логика очистки канваса. Обновлены стили для QRCanvas для обеспечения квадратного соотношения сторон и адаптивности на мобильных устройствах.

2025-03-23 17:24:04 +03:00
parent 1b337278fe
commit e66b616ba4
2 changed files with 65 additions and 14 deletions
@@ -72,17 +72,50 @@ const LessonDetail = () => {

  useEffect(() => {
    if (!isFetching && isSuccess) {
-      QRCode.toCanvas(
-        canvRef.current,
-        userUrl,
-        { width: 600 },
-        function (error) {
-          if (error) console.error(error)
-          console.log('success!')
-        },
-      )
+      const generateQRCode = () => {
+        if (!canvRef.current) return;
+        
+        // Получаем текущую ширину канваса, гарантируя квадратный QR-код
+        const canvas = canvRef.current;
+        const containerWidth = canvas.clientWidth;
+        
+        // Очищаем canvas перед новой генерацией
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        
+        // Устанавливаем одинаковые размеры для ширины и высоты (1:1)
+        canvas.width = containerWidth;
+        canvas.height = containerWidth;
+        
+        QRCode.toCanvas(
+          canvas,
+          userUrl,
+          { 
+            width: containerWidth,
+            margin: 1 // Небольшой отступ для лучшей читаемости
+          },
+          function (error) {
+            if (error) console.error(error)
+            console.log('success!')
+          },
+        )
+      }
+      
+      // Генерируем QR-код
+      generateQRCode();
+      
+      // Перегенерируем при изменении размера окна
+      const handleResize = () => {
+        generateQRCode();
+      };
+      
+      window.addEventListener('resize', handleResize);
+      
+      return () => {
+        window.removeEventListener('resize', handleResize);
+      };
    }
-  }, [isFetching, isSuccess])
+  }, [isFetching, isSuccess, userUrl])

  const studentsArr = useMemo(() => {
    let allStudents: (User & { present?: boolean })[] = [
@@ -146,10 +179,12 @@ const LessonDetail = () => {
            {t('journal.pl.common.people')}
          </Box>
        </VStack>
-        <Stack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' } }}>
-          <a href={userUrl}>
-            <QRCanvas ref={canvRef} />
-          </a>
+        <Stack spacing="8" direction={{ base: "column", md: "row" }}>
+          <Box flexShrink={0} alignSelf="center">
+            <a href={userUrl}>
+              <QRCanvas ref={canvRef} />
+            </a>
+          </Box>
          <StudentList>
            {isTeacher(user) && studentsArr.map((student) => (
              <UserCard