v3.7.2

interface/src/components/ButtonTooltip.tsx

@@ -0,0 +1,17 @@
+import { Tooltip, type TooltipProps, styled, tooltipClasses } from '@mui/material';
+
+export const ButtonTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} placement="top" arrow classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.arrow}`]: {
+    color: theme.palette.success.main
+  },
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.success.main,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 10
+  }
+}));
+
+export default ButtonTooltip;

interface/src/components/MessageBox.tsx

@@ -11,7 +11,7 @@ type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';
 
 export interface MessageBoxProps extends BoxProps {
   level: MessageBoxLevel;
-  message: string;
+  message?: string;
 }
 
 const LEVEL_ICONS: {
@@ -53,8 +53,8 @@ const MessageBox: FC<MessageBoxProps> = ({
       {...rest}
     >
       <Icon />
-      <Typography sx={{ ml: 2, flexGrow: 1 }} variant="body1">
-        {message}
+      <Typography sx={{ ml: 2 }} variant="body1">
+        {message ?? ''}
       </Typography>
       {children}
     </Box>

interface/src/components/index.ts

@@ -7,3 +7,4 @@ export { default as SectionContent } from './SectionContent';
 export { default as ButtonRow } from './ButtonRow';
 export { default as MessageBox } from './MessageBox';
 export { default as BlockNavigation } from './routing/BlockNavigation';
+export { default as ButtonTooltip } from './ButtonTooltip';

interface/src/components/layout/LayoutMenu.tsx

@@ -73,11 +73,6 @@ const LayoutMenu = () => {
           >
             <ListItemText
               primary={LL.MODULES()}
-              primaryTypographyProps={{
-                fontWeight: '600',
-                mb: '2px',
-                color: 'lightblue'
-              }}
               // secondary={
               //   LL.CUSTOMIZATIONS() +
               //   ', ' +
@@ -92,6 +87,13 @@ const LayoutMenu = () => {
               //   color: menuOpen ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)'
               // }}
               sx={{ my: 0 }}
+              slotProps={{
+                primary: {
+                  fontWeight: '600',
+                  mb: '2px',
+                  color: 'lightblue'
+                }
+              }}
             />
             <KeyboardArrowDown
               sx={{
@@ -132,7 +134,6 @@ const LayoutMenu = () => {
           )}
         </Box>
       </List>
-
       <List style={{ marginTop: `auto` }}>
         <LayoutMenuItem
           icon={AssessmentIcon}
@@ -158,7 +159,6 @@ const LayoutMenu = () => {
           </ListItemButton>
         </ListItem>
       </List>
-
       <Popover
         id={id}
         open={open}

interface/src/components/loading/FormLoader.tsx

@@ -1,20 +1,15 @@
 import RefreshIcon from '@mui/icons-material/Refresh';
-import { Box, Button, CircularProgress, Typography } from '@mui/material';
+import { Box, Button, CircularProgress } from '@mui/material';
 
 import { MessageBox } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 
 interface FormLoaderProps {
-  message?: string;
   errorMessage?: string;
   onRetry?: () => void;
 }
 
-const FormLoader = ({
-  errorMessage,
-  onRetry,
-  message = 'Loading…'
-}: FormLoaderProps) => {
+const FormLoader = ({ errorMessage, onRetry }: FormLoaderProps) => {
   const { LL } = useI18nContext();
 
   if (errorMessage) {
@@ -22,6 +17,7 @@ const FormLoader = ({
       <MessageBox my={2} level="error" message={errorMessage}>
         {onRetry && (
           <Button
+            sx={{ ml: 2 }}
             startIcon={<RefreshIcon />}
             variant="contained"
             color="error"
@@ -38,9 +34,6 @@ const FormLoader = ({
       <Box py={2}>
         <CircularProgress size={100} />
       </Box>
-      <Typography variant="h6" fontWeight={400} textAlign="center">
-        {message}
-      </Typography>
     </Box>
   );
 };

interface/src/components/loading/LoadingSpinner.tsx

@@ -1,15 +1,11 @@
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Box, CircularProgress } from '@mui/material';
 import type { Theme } from '@mui/material';
 
-import { useI18nContext } from 'i18n/i18n-react';
-
 interface LoadingSpinnerProps {
   height?: number | string;
 }
 
 const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
-  const { LL } = useI18nContext();
-
   return (
     <Box
       display="flex"
@@ -26,9 +22,6 @@ const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
         })}
         size={100}
       />
-      <Typography variant="h4" color="textSecondary">
-        {LL.LOADING()}&hellip;
-      </Typography>
     </Box>
   );
 };

interface/src/components/routing/index.ts

@@ -2,5 +2,3 @@ export { default as RouterTabs } from './RouterTabs';
 export { default as RequireAdmin } from './RequireAdmin';
 export { default as RequireAuthenticated } from './RequireAuthenticated';
 export { default as RequireUnauthenticated } from './RequireUnauthenticated';
-
-export * from './useRouterTab';

interface/src/components/routing/useRouterTab.ts

@@ -1,8 +0,0 @@
-import { useMatch, useResolvedPath } from 'react-router';
-
-export const useRouterTab = () => {
-  const routerTabPathMatch = useMatch(useResolvedPath(':tab').pathname);
-  const routerTab = routerTabPathMatch?.params?.tab || false;
-
-  return { routerTab } as const;
-};

interface/src/components/upload/DragNdrop.tsx

@@ -10,7 +10,7 @@ import { useI18nContext } from 'i18n/i18n-react';
 
 import './dragNdrop.css';
 
-const DragNdrop = ({ onFileSelected }) => {
+const DragNdrop = ({ text, onFileSelected }) => {
   const [file, setFile] = useState<File>();
   const [dragged, setDragged] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -73,7 +73,7 @@ const DragNdrop = ({ onFileSelected }) => {
     >
       <div className="upload-info">
         <CloudUploadIcon sx={{ marginRight: 4 }} color="primary" fontSize="large" />
-        <p>{LL.UPLOAD_DRAG()}</p>
+        <p>{text}</p>
       </div>
 
       <input

interface/src/components/upload/LinearProgressWithLabel.tsx

@@ -0,0 +1,23 @@
+import {
+  Box,
+  LinearProgress,
+  type LinearProgressProps,
+  Typography
+} from '@mui/material';
+
+export function LinearProgressWithLabel(
+  props: LinearProgressProps & { value: number }
+) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}

interface/src/components/upload/SingleUpload.tsx

@@ -2,13 +2,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 import CancelIcon from '@mui/icons-material/Cancel';
-import {
-  Box,
-  Button,
-  LinearProgress,
-  type LinearProgressProps,
-  Typography
-} from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 
 import * as SystemApi from 'api/system';
 
@@ -16,23 +10,9 @@ import { useRequest } from 'alova/client';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import DragNdrop from './DragNdrop';
+import { LinearProgressWithLabel } from './LinearProgressWithLabel';
 
-function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 1 }}>
-        <LinearProgress variant="determinate" {...props} />
-      </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography variant="body2" color="text.secondary">{`${Math.round(
-          props.value
-        )}%`}</Typography>
-      </Box>
-    </Box>
-  );
-}
-
-const SingleUpload = ({ doRestart }) => {
+const SingleUpload = ({ text, doRestart }) => {
   const [md5, setMd5] = useState<string>();
   const [file, setFile] = useState<File>();
   const { LL } = useI18nContext();
@@ -93,7 +73,7 @@ const SingleUpload = ({ doRestart }) => {
           </Button>
         </>
       ) : (
-        <DragNdrop onFileSelected={setFile} />
+        <DragNdrop text={text} onFileSelected={setFile} />
       )}
 
       {md5 && (