Добавлено расширение темы Chakra UI, реализован компонент AppHeader с переключением темной/светлой темы, обновлены стили для поддержки темной темы, улучшена загрузка компонентов с учетом цветовой схемы.

2025-03-23 08:48:34 +03:00 · 2025-03-23 08:48:34 +03:00 · 433e3b87bf
commit 433e3b87bf
parent aef215c6e0
14 changed files with 278 additions and 158 deletions
--- a/src/app.tsx
+++ b/src/app.tsx
@ -4,15 +4,24 @@ import { Global } from '@emotion/react'
 import { BrowserRouter } from 'react-router-dom';
 import ruLocale from 'dayjs/locale/ru';
 import dayjs from 'dayjs';
-import { ChakraProvider } from '@chakra-ui/react'
+import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'

 import { Dashboard } from './dashboard';
 import { globalStyles } from './global.styles';

 dayjs.locale('ru', ruLocale);

+// Расширяем тему Chakra UI
+const theme = extendTheme({
+  config: {
+    initialColorMode: 'light',
+    useSystemColorMode: false,
+  },
+})
+
 const App = ({ store }) => (
-    <ChakraProvider>
+    <ChakraProvider theme={theme}>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <BrowserRouter>
            <Helmet>
                <meta name="viewport" content="width=device-width, user-scalable=no" />
--- a/src/components/app-header/app-header.tsx
+++ b/src/components/app-header/app-header.tsx
@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  Flex,
+  IconButton,
+  useColorMode,
+} from '@chakra-ui/react';
+import { MoonIcon, SunIcon } from '@chakra-ui/icons';
+
+interface AppHeaderProps {
+  serviceMenuContainerRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  
+  return (
+    <Flex 
+      as="header" 
+      width="100%" 
+      py={4} 
+      px={8} 
+      justifyContent="space-between" 
+      alignItems="center"
+      position="sticky"
+      top={0}
+      zIndex={10}
+      bg={colorMode === 'light' ? 'white' : 'gray.800'}
+      boxShadow="sm"
+    >
+      {serviceMenuContainerRef && <div id="dots" ref={serviceMenuContainerRef}></div>}
+      
+      <IconButton
+        aria-label={colorMode === 'light' ? 'Включить темную тему' : 'Включить светлую тему'}
+        icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+        onClick={toggleColorMode}
+        variant="ghost"
+        size="md"
+      />
+    </Flex>
+  );
+}; 
--- a/src/components/app-header/index.ts
+++ b/src/components/app-header/index.ts
@ -0,0 +1 @@
+export { AppHeader } from './app-header'; 
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -0,0 +1,4 @@
+export { PageLoader } from './page-loader/page-loader';
+export { XlSpinner } from './xl-spinner/xl-spinner';
+export { ErrorBoundary } from './error-boundary';
+export { AppHeader } from './app-header'; 
--- a/src/components/page-loader/page-loader.tsx
+++ b/src/components/page-loader/page-loader.tsx
@ -3,18 +3,23 @@ import {
    Spinner,
    Container,
    Center,
+    useColorMode
 } from '@chakra-ui/react'

-export const PageLoader = () => (
-    <Container maxW="container.xl">
-        <Center h="300px">
-            <Spinner
-                thickness="4px"
-                speed="0.65s"
-                emptyColor="gray.200"
-                color="blue.500"
-                size="xl"
-            />
-        </Center>
-    </Container>
-)
+export const PageLoader = () => {
+    const { colorMode } = useColorMode();
+    
+    return (
+        <Container maxW="container.xl">
+            <Center h="300px">
+                <Spinner
+                    thickness="4px"
+                    speed="0.65s"
+                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
+                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
+                    size="xl"
+                />
+            </Center>
+        </Container>
+    )
+}
--- a/src/components/user-card/style.ts
+++ b/src/components/user-card/style.ts
@ -10,10 +10,10 @@ export const Avatar = styled.img`

 export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
  list-style: none;
-  background-color: #ffffff;
+  background-color: var(--chakra-colors-white);
  padding: 16px;
  border-radius: 12px;
-  box-shadow: 2px 2px 6px #0000005c;
+  box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-400);
  transition: all 0.5;
  position: relative;
  width: 180px;
@ -31,11 +31,22 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
  ${(props) =>
    props.warn
      ? css`
-          background-color: #000000;
+          background-color: var(--chakra-colors-blackAlpha-800);
          opacity: 0.7;
-          color: #e4e4e4;
+          color: var(--chakra-colors-gray-200);
        `
      : ''}
+
+  .chakra-ui-dark & {
+    background-color: var(--chakra-colors-gray-700);
+    color: var(--chakra-colors-white);
+    box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-600);
+  }
+  
+  .chakra-ui-dark &.warn {
+    background-color: var(--chakra-colors-blackAlpha-900);
+    color: var(--chakra-colors-gray-300);
+  }
 `

 export const AddMissedButton = styled.button`
@ -43,8 +54,9 @@ export const AddMissedButton = styled.button`
  bottom: 8px;
  right: 12px;
  border: none;
-  background-color: #00000000;
+  background-color: transparent;
  opacity: 0.2;
+  color: inherit;

  :hover {
    cursor: pointer;
--- a/src/components/user-card/user-card.tsx
+++ b/src/components/user-card/user-card.tsx
@ -1,5 +1,6 @@
 import React from 'react'
 import { sha256 } from 'js-sha256'
+import { useColorMode } from '@chakra-ui/react'

 import { User } from '../../__data__/model'

@ -26,10 +27,20 @@ export const UserCard = ({
  onAddUser?: (user: User) => void
  wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
 }) => {
+  const { colorMode } = useColorMode();
+  
  return (
-    <Wrapper warn={!present} as={wrapperAS} width={width}>
+    <Wrapper 
+      warn={!present} 
+      as={wrapperAS} 
+      width={width}
+      className={!present ? 'warn' : ''}
+    >
      <Avatar src={student.picture || getGravatarURL(student.email, null)} />
-      <p style={{ marginTop: 6 }}>
+      <p style={{ 
+        marginTop: 6,
+        color: colorMode === 'light' ? 'inherit' : 'var(--chakra-colors-gray-100)'
+      }}>
        {student.name || student.preferred_username}{' '}
      </p>
      {onAddUser && !present && (
--- a/src/components/xl-spinner/xl-spinner.tsx
+++ b/src/components/xl-spinner/xl-spinner.tsx
@ -3,18 +3,23 @@ import {
    Container,
    Center,
    Spinner,
+    useColorMode
 } from '@chakra-ui/react'

-export const XlSpinner = () => (
-    <Container maxW="container.xl">
-        <Center h="300px">
-            <Spinner
-                thickness="4px"
-                speed="0.65s"
-                emptyColor="gray.200"
-                color="blue.500"
-                size="xl"
-            />
-        </Center>
-    </Container>
-)
+export const XlSpinner = () => {
+    const { colorMode } = useColorMode();
+    
+    return (
+        <Container maxW="container.xl">
+            <Center h="300px">
+                <Spinner
+                    thickness="4px"
+                    speed="0.65s"
+                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
+                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
+                    size="xl"
+                />
+            </Center>
+        </Container>
+    )
+}
--- a/src/dashboard.tsx
+++ b/src/dashboard.tsx
@ -1,8 +1,8 @@
-import React, { useEffect, Suspense } from 'react'
+import React, { useEffect, Suspense, useRef, useState } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 import { Provider } from 'react-redux'
-import { getNavigationsValue } from '@brojs/cli'
-import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
+import { getNavigationValue } from '@brojs/cli'
+import { Box, Container, Spinner, VStack, useColorMode } from '@chakra-ui/react'

 import {
  CourseListPage,
@ -11,7 +11,31 @@ import {
  UserPage,
  AttendancePage,
 } from './pages'
-import { ErrorBoundary } from './components/error-boundary'
+import { ErrorBoundary, AppHeader } from './components'
+import { keycloak } from './__data__/kc'
+
+const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
+
+const loadServiceMenu = () => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = MENU_SCRIPT_URL
+    script.onload = () => setTimeout(() => resolve(true), 1000)
+    script.onerror = reject
+    document.body.appendChild(script)
+  })
+}
+
+declare global {
+  interface Window {
+    createServiceMenu?: (options: any) => {
+      show: () => void;
+      hide: () => void;
+      update: () => void;
+      destroy: () => void;
+    };
+  }
+}

 const Wrapper = ({ children }: { children: React.ReactElement }) => (
  <Suspense
@ -37,49 +61,97 @@ const Wrapper = ({ children }: { children: React.ReactElement }) => (
  </Suspense>
 )

-export const Dashboard = ({ store }) => (
-  <Provider store={store}>
-    <Routes>
-      <Route
-        path={getNavigationsValue('journal.main')}
-        element={
-          <Wrapper>
-            <CourseListPage />
-          </Wrapper>
+interface DashboardProps {
+  store: any; // Используем any, поскольку точный тип store не указан
+}
+
+export const Dashboard = ({ store }: DashboardProps) => {
+  const serviceMenuContainerRef = useRef<HTMLDivElement>(null);
+  const serviceMenuInstanceRef = useRef<any>(null);
+  const [serviceMenu, setServiceMenu] = useState(false);
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    loadServiceMenu().then(() => {
+      setServiceMenu(true)
+    }).catch(console.error)
+  }, [])
+  
+  useEffect(() => {
+    // Проверяем, что библиотека загружена и есть контейнер для меню
+    if (window.createServiceMenu && serviceMenuContainerRef.current && serviceMenu) {
+      // Создаем меню сервисов
+      serviceMenuInstanceRef.current = window.createServiceMenu({
+        accessToken: keycloak.token,
+        apiUrl: 'https://admin.bro-js.ru',
+        targetElement: serviceMenuContainerRef.current,
+        styles: {
+          dotColor: colorMode === 'light' ? '#333' : '#ccc',
+          hoverColor: colorMode === 'light' ? '#eee' : '#444',
+          backgroundColor: colorMode === 'light' ? '#fff' : '#2D3748',
+          textColor: colorMode === 'light' ? '#333' : '#fff',
+        },
+        translations: {
+          menuTitle: 'Сервисы BRO',
+          menuAriaLabel: 'Сервисы BRO',
        }
-      />
-      <Route
-        path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
-        element={
-          <Wrapper>
-            <LessonListPage />
-          </Wrapper>
-        }
-      />
-      <Route
-        path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
-        element={
-          <Wrapper>
-            <UserPage />
-          </Wrapper>
-        }
-      />
-      <Route
-        path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
-        element={
-          <Wrapper>
-            <LessonDetailsPage />
-          </Wrapper>
-        }
-      />
-      <Route
-        path={`${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`}
-        element={
-          <Wrapper>
-            <AttendancePage />
-          </Wrapper>
-        }
-      />
-    </Routes>
-  </Provider>
-)
+      });
+    }
+
+    // Очистка при размонтировании
+    return () => {
+      if (serviceMenuInstanceRef.current) {
+        serviceMenuInstanceRef.current.destroy();
+        serviceMenuInstanceRef.current = null;
+      }
+    };
+  }, [keycloak.token, serviceMenu, colorMode]);
+  
+  return (
+    <Provider store={store}>
+      <AppHeader serviceMenuContainerRef={serviceMenuContainerRef} />
+      <Routes>
+        <Route
+          path={getNavigationValue('journal.main')}
+          element={
+            <Wrapper>
+              <CourseListPage />
+            </Wrapper>
+          }
+        />
+        <Route
+          path={`${getNavigationValue('journal.main')}/lessons-list/:courseId`}
+          element={
+            <Wrapper>
+              <LessonListPage />
+            </Wrapper>
+          }
+        />
+        <Route
+          path={`${getNavigationValue('journal.main')}/u/:lessonId/:accessId`}
+          element={
+            <Wrapper>
+              <UserPage />
+            </Wrapper>
+          }
+        />
+        <Route
+          path={`${getNavigationValue('journal.main')}/lesson/:courseId/:lessonId`}
+          element={
+            <Wrapper>
+              <LessonDetailsPage />
+            </Wrapper>
+          }
+        />
+        <Route
+          path={`${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`}
+          element={
+            <Wrapper>
+              <AttendancePage />
+            </Wrapper>
+          }
+        />
+      </Routes>
+    </Provider>
+  )
+}
--- a/src/global.styles.ts
+++ b/src/global.styles.ts
@ -30,6 +30,27 @@ body {
    /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
    font-weight: 600;
 }
+
+/* Стили для темной темы */
+html[data-theme="dark"] body {
+    color: #fff;
+    background: radial-gradient(
+        farthest-side at bottom left,
+        rgba(23, 138, 3, 0.709), 
+        rgba(0, 0, 0, 0) 65%
+    ),
+    radial-gradient(
+        farthest-corner at bottom center,
+        rgba(155, 155, 7, 0.5), 
+        rgba(0, 0, 0, 0) 40%
+    ),
+    radial-gradient(
+        farthest-side at bottom right,
+        rgba(0, 116, 153, 0.6), 
+        rgb(18, 25, 31) 65%
+    );
+}
+
 #app {
    height: 100%;
    overflow-y: auto;
--- a/src/pages/attendance/attendance.tsx
+++ b/src/pages/attendance/attendance.tsx
@ -130,7 +130,7 @@ const ShortText = ({ text }: { text: string }) => {

  if (needShortText) {
    return (
-      <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+      <Tooltip label={text} fontSize="12px" top="16px">
        <Text>{text.slice(0, 20)}...</Text>
      </Tooltip>
    )
--- a/src/pages/course-list/course-list.tsx
+++ b/src/pages/course-list/course-list.tsx
@ -19,38 +19,14 @@ import {
  useColorMode,
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
-
-const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
-
-const loadServiceMenu = () => {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = MENU_SCRIPT_URL
-    script.onload = () => setTimeout(() => resolve(true), 1000)
-    script.onerror = reject
-    document.body.appendChild(script)
-  })
-}
+import { AddIcon } from '@chakra-ui/icons'

 import { ErrorSpan } from '../style'
-declare global {
-  interface Window {
-    createServiceMenu?: (options: any) => {
-      show: () => void;
-      hide: () => void;
-      update: () => void;
-      destroy: () => void;
-    };
-  }
-}
-
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
 import { isTeacher } from '../../utils/user'
-import { AddIcon } from '@chakra-ui/icons'
 import { PageLoader } from '../../components/page-loader/page-loader'
 import { CourseCard } from './course-card'
-import { keycloak } from '../../__data__/kc'

 interface NewCourseForm {
  startDt: string
@ -65,13 +41,7 @@ export const CoursesList = () => {
  const [showForm, setShowForm] = useState(false)
  const toastRef = useRef(null)

-  const [serviceMenu, setServiceMenu] = useState(false)
-
-  useEffect(() => {
-    loadServiceMenu().then(() => {
-      setServiceMenu(true)
-    }).catch(console.error)
-  }, [])
+  const { colorMode } = useColorMode();

  const {
    control,
@ -111,39 +81,6 @@ export const CoursesList = () => {
    }
  }, [crucQuery.isSuccess])

-  const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
-  const serviceMenuInstanceRef = useRef<any>(null)
-
-  useEffect(() => {
-    // Проверяем, что библиотека загружена и есть контейнер для меню
-    if (window.createServiceMenu && serviceMenuContainerRef.current) {
-      // Создаем меню сервисов
-      serviceMenuInstanceRef.current = window.createServiceMenu({
-        accessToken: keycloak.token,
-        apiUrl: 'https://admin.bro-js.ru',
-        targetElement: serviceMenuContainerRef.current,
-        styles: {
-          dotColor: '#333',
-          hoverColor: '#eee',
-          backgroundColor: '#fff',
-          textColor: '#333',
-        },
-        translations: {
-          menuTitle: 'Сервисы BRO',
-          menuAriaLabel: 'Сервисы BRO',
-        }
-      });
-    }
-
-    // Очистка при размонтировании
-    return () => {
-      if (serviceMenuInstanceRef.current) {
-        serviceMenuInstanceRef.current.destroy();
-        serviceMenuInstanceRef.current = null;
-      }
-    };
-  }, [keycloak.token, serviceMenu]);
-
  if (isLoading) {
    return (
      <PageLoader />
@ -151,8 +88,6 @@ export const CoursesList = () => {
  }

  return (
-    <>
-    <div style={{ position: 'absolute', top: 6, left: 6 }} id="dots" ref={serviceMenuContainerRef}></div>
    <Container maxW="container.xl">
      {isTeacher(user) && (
        <Box mt="15" mb="15">
@ -263,6 +198,5 @@ export const CoursesList = () => {
        ))}
      </VStack>
    </Container>
-        </>
  )
 }
--- a/src/pages/lesson-list/components/item.tsx
+++ b/src/pages/lesson-list/components/item.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { Link } from 'react-router-dom'
-import { getNavigationsValue, getFeatures } from '@brojs/cli'
+import { getNavigationValue, getFeatures } from '@brojs/cli'
 import {
  Button,
  Tr,
@ -105,7 +105,7 @@ export const Item: React.FC<ItemProps> = ({
      {isTeacher && (
        <Td>
          <Link
-            to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
+            to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${id}`}
            style={{ display: 'flex' }}
          >
            <img width={24} src={qrCode} style={{ margin: '0 auto' }} />
--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@ -31,9 +31,14 @@ export const QRCanvas = styled.canvas`
 `

 export const ErrorSpan = styled.span`
-  color: #f9e2e2;
+  color: var(--chakra-colors-red-100);
  display: block;
  padding: 16px;
-  background-color: #d32f0b;
+  background-color: var(--chakra-colors-red-600);
  border-radius: 11px;
+
+  .chakra-ui-dark & {
+    color: var(--chakra-colors-red-200);
+    background-color: var(--chakra-colors-red-800);
+  }
 `