show progress bar when automatically installing firmware

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,21 +10,7 @@ import { useRequest } from 'alova/client';
 import { useI18nContext } from 'i18n/i18n-react';
 
 import DragNdrop from './DragNdrop';
-
-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>
-  );
-}
+import { LinearProgressWithLabel } from './LinearProgressWithLabel';
 
 const SingleUpload = ({ doRestart }) => {
   const [md5, setMd5] = useState<string>();