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

This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-23 17:24:04 +03:00
parent 1b337278fe
commit e66b616ba4
2 changed files with 65 additions and 14 deletions

View File

@ -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

View File

@ -24,10 +24,26 @@ export const StudentList = styled.ul`
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
@media (max-width: 768px) {
height: auto;
max-height: 600px;
padding-right: 0;
}
`
export const QRCanvas = styled.canvas`
display: block;
aspect-ratio: 1 / 1;
width: 450px;
min-width: 450px;
max-width: 100%;
height: auto;
@media (max-width: 768px) {
width: 300px;
min-width: auto;
}
`
export const ErrorSpan = styled.span`