chore: optimize imports for better tree shaking (#781)

* part1

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* part2

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* part3

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

* part4

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

---------

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/DataListView/DataListView.tsx

@@ -1,10 +1,11 @@
-import { Typography, Chip } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material';
 import { formatFieldType } from '@/utils';
 import DataView from '@/components/DataView/DataView';
 import { DYNAMIC_FIELD } from '@/consts';
 import CopyButton from '@/components/advancedSearch/CopyButton';
+import type { Theme } from '@mui/material/styles';
 import type { CollectionFullObject } from '@server/types';
 
 interface DataListViewProps {

client/src/components/DataView/DataView.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import MediaPreview from '../MediaPreview/MediaPreview';
 
 const DataView = (props: { type: string; value: any }) => {

client/src/components/MediaPreview/MediaPreview.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import icons from '../icons/Icons';
 
 const MediaPreview = (props: { value: string }) => {

client/src/components/advancedSearch/Condition.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, FC, useMemo } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Theme, IconButton, TextField, SelectChangeEvent } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import CloseIcon from '@mui/icons-material/Close';
 import CustomSelector from '../customSelector/CustomSelector';
 import { LOGICAL_OPERATORS, DataTypeStringEnum } from '@/consts';
 import { formatValue, checkValue } from './utils';
+import type { FC } from 'react';
 import type { ConditionProps } from './Types';
 import type { FieldObject } from '@server/types';
 

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -1,4 +1,4 @@
-import React, { useState, FC } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
@@ -6,6 +6,7 @@ import { ToggleButton, ToggleButtonGroup } from '@mui/lab';
 import ConditionItem from './Condition';
 import icons from '../icons/Icons';
 import CustomButton from '../customButton/CustomButton';
+import type { FC } from 'react';
 import type {
   ConditionGroupProps,
   BinaryLogicalOpProps,

client/src/components/advancedSearch/CopyButton.tsx

@@ -1,9 +1,10 @@
-import React, { useState, FC } from 'react';
+import React, { useState } from 'react';
 import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import icons from '../icons/Icons';
 import CustomIconButton from '../customButton/CustomIconButton';
 import { useTranslation } from 'react-i18next';
+import type { FC } from 'react';
 import type { CopyButtonProps } from './Types';
 
 const CopyIcon = icons.copyExpression;

client/src/components/advancedSearch/Dialog.tsx

@@ -1,20 +1,17 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Theme,
-  Typography,
-  IconButton,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from '@mui/material';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import { makeStyles } from '@mui/styles';
 import CustomButton from '../customButton/CustomButton';
 import ConditionGroup from './ConditionGroup';
 import icons from '../icons/Icons';
 import CopyBtn from './CopyButton';
-// import DialogTemplate from '../customDialog/DialogTemplate';
+import type { Theme } from '@mui/material/styles';
 import type { DialogProps } from './Types';
 
 const AdvancedDialog = (props: DialogProps) => {

client/src/components/advancedSearch/Filter.tsx

@@ -1,11 +1,13 @@
 import { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
-import { Theme, Chip, Tooltip } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from '@mui/styles';
 import { useTranslation } from 'react-i18next';
 import icons from '@/components/icons/Icons';
 import { generateIdByHash } from '@/utils/Common';
 import AdvancedDialog from './Dialog';
 import CustomButton from '../customButton/CustomButton';
+import type { Theme } from '@mui/material/styles';
 import type { FilterProps, ConditionData } from './Types';
 
 const Filter = forwardRef((props: FilterProps, ref) => {

client/src/components/cards/EmptyCard.tsx

@@ -1,7 +1,9 @@
-import { FC } from 'react';
-import { Theme, Typography, CardContent } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import CardContent from '@mui/material/CardContent';
 import { makeStyles } from '@mui/styles';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
+import type { FC } from 'react';
+import type { Theme } from '@mui/material/styles';
 import type { EmptyCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/code/CodeBlock.tsx

@@ -1,10 +1,11 @@
-import { Theme, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { vs2015, github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { FC } from 'react';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CodeBlockProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/code/CodeView.tsx

@@ -1,10 +1,11 @@
-import { Theme, Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomTabList from '../customTabList/CustomTabList';
 import CodeBlock from './CodeBlock';
-import { CodeViewProps } from './Types';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
+import type { CodeViewProps } from './Types';
 import type { ITab } from '../customTabList/Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/customButton/CustomButton.tsx

@@ -1,5 +1,8 @@
-import { Button, ButtonProps, Tooltip, Theme } from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from '@mui/styles';
+import type { ButtonProps } from '@mui/material/Button';
+import type { Theme } from '@mui/material/styles';
 
 const buttonStyle = makeStyles((theme: Theme) => ({
   button: {

client/src/components/customButton/CustomIconButton.tsx

@@ -1,5 +1,8 @@
-import { IconButtonProps, Tooltip, IconButton, Theme } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
 import { makeStyles } from '@mui/styles';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import type { Theme } from '@mui/material/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/components/customButton/RefreshButton.tsx

@@ -1,8 +1,9 @@
-import { useState, MouseEvent } from 'react';
+import { useState } from 'react';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
-import { IconButtonProps } from '@mui/material';
 import icons from '@/components/icons/Icons';
+import type { MouseEvent } from 'react';
+import type { IconButtonProps } from '@mui/material';
 
 const RefreshButton = (
   props: IconButtonProps & {

client/src/components/customDialog/CustomDialog.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
-import {
-  DialogActions,
-  DialogContent,
-  Dialog,
-  Theme,
-  Typography,
-} from '@mui/material';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import Dialog from '@mui/material/Dialog';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '../customButton/CustomButton';
 import CustomDialogTitle from './CustomDialogTitle';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CustomDialogType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -1,7 +1,9 @@
-import { DialogTitleProps, Typography, Theme } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import MuiDialogTitle from '@mui/material/DialogTitle';
 import icons from '../icons/Icons';
 import { makeStyles } from '@mui/styles';
+import type { DialogTitleProps } from '@mui/material/DialogTitle';
+import type { Theme } from '@mui/material/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -1,19 +1,18 @@
-import {
-  DialogActions,
-  DialogContent,
-  TextField,
-  Theme,
-  Typography,
-  Checkbox,
-  FormControlLabel,
-} from '@mui/material';
-import { ChangeEvent, FC, useContext, useState } from 'react';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { FC, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '@/components/customButton/CustomButton';
 import CustomDialogTitle from '@/components/customDialog/CustomDialogTitle';
-import { DeleteDialogContentType } from '@/components/customDialog/Types';
 import { rootContext } from '@/context';
 import { makeStyles } from '@mui/styles';
+import type { ChangeEvent } from 'react';
+import type { Theme } from '@mui/material/styles';
+import type { DeleteDialogContentType } from '@/components/customDialog/Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/customDialog/DialogTemplate.tsx

@@ -1,15 +1,13 @@
 import { FC, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  DialogContent,
-  DialogActions,
-  Theme,
-  CircularProgress,
-} from '@mui/material';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import CircularProgress from '@mui/material/CircularProgress';
 import CustomDialogTitle from './CustomDialogTitle';
 import CustomButton from '../customButton/CustomButton';
 import CodeView from '../code/CodeView';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { DialogContainerProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/customDrawer/CustomDrawer.tsx

@@ -1,5 +1,7 @@
 import { useContext } from 'react';
-import { Drawer, Box, Button } from '@mui/material';
+import Drawer from '@mui/material/Drawer';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { rootContext } from '@/context';
 
 const CustomDrawer = () => {

client/src/components/customInput/CustomInput.tsx

@@ -1,19 +1,17 @@
-import {
-  FilledTextFieldProps,
-  FormControl,
-  FormHelperText,
-  Grid,
-  IconButton,
-  Input,
-  InputAdornment,
-  InputLabel,
-  StandardTextFieldProps,
-  TextField,
-  Theme,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText from '@mui/material/FormHelperText';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputLabel from '@mui/material/InputLabel';
+import TextField from '@mui/material/TextField';
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
 import { ReactElement } from 'react';
+import type { FilledTextFieldProps } from '@mui/material/TextField';
+import type { StandardTextFieldProps } from '@mui/material/TextField';
+import type { Theme } from '@mui/material/styles';
 import type {
   IAdornmentConfig,
   IIconConfig,

client/src/components/customInput/SearchInput.tsx

@@ -1,8 +1,10 @@
-import { InputAdornment, TextField, Theme } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
 import { makeStyles } from '@mui/styles';
 import { useRef, FC, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icons from '../icons/Icons';
+import type { Theme } from '@mui/material/styles';
 import type { SearchType } from './Types';
 
 const useSearchStyles = makeStyles((theme: Theme) => ({

client/src/components/customRadio/CustomRadio.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { FormGroup, FormControlLabel, Switch } from '@mui/material';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 
 export const CustomRadio = (props: {
   label: string;

client/src/components/customSelector/CustomGroupedSelect.tsx

@@ -1,13 +1,11 @@
-import {
-  FormControl,
-  InputLabel,
-  ListSubheader,
-  MenuItem,
-  Select,
-  Theme,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { makeStyles } from '@mui/styles';
 import { FC } from 'react';
+import type { Theme } from '@mui/material/styles';
 import type { GroupOption, ICustomGroupSelect } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/customSelector/CustomMultiSelector.tsx

@@ -1,11 +1,9 @@
 import { FC } from 'react';
-import {
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-  Checkbox,
-} from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Checkbox from '@mui/material/Checkbox';
 import { withStyles } from '@mui/styles';
 import { generateId } from '../../utils/Common';
 import type { CustomMultiSelectorType } from './Types';

client/src/components/customSelector/CustomSelector.tsx

@@ -1,5 +1,8 @@
 import { FC } from 'react';
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { generateId } from '../../utils/Common';
 import type { CustomSelectorType } from './Types';
 

client/src/components/customSnackBar/CustomSnackBar.tsx

@@ -1,8 +1,11 @@
 import { forwardRef, FC } from 'react';
 import MuiAlert from '@mui/material/Alert';
-import { Snackbar, Theme, AlertProps } from '@mui/material';
-import Slide, { SlideProps } from '@mui/material/Slide';
+import Snackbar from '@mui/material/Snackbar';
+import Slide from '@mui/material/Slide';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
+import type { AlertProps } from '@mui/material/Alert';
+import type { SlideProps } from '@mui/material/Slide';
 import type { CustomSnackBarType } from './Types';
 
 // if we need to use slide component

client/src/components/customSwitch/CustomSwitch.tsx

@@ -1,7 +1,9 @@
-import { FormControlLabel, Switch, Theme } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CustomSwitchProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/customTabList/CustomTabList.tsx

@@ -1,4 +1,6 @@
-import { Box, Tab, Tabs } from '@mui/material';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import { FC, useState } from 'react';
 import { useStyles } from './style';
 import type { ITabListProps, ITabPanel } from './Types';

client/src/components/customTabList/RouteTabList.tsx

@@ -1,4 +1,6 @@
-import { Box, Tab, Tabs } from '@mui/material';
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import { FC } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useStyles } from './style';

client/src/components/customToolTip/CustomToolTip.tsx

@@ -1,7 +1,7 @@
 import Tooltip from '@mui/material/Tooltip';
 import { FC } from 'react';
-import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { CustomToolTipType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/grid/ActionBar.tsx

@@ -1,9 +1,12 @@
 import { FC } from 'react';
-import { IconButton, Theme, Button, Typography } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
-import type { ActionBarType } from './Types';
 import CustomToolTip from '../customToolTip/CustomToolTip';
+import type { Theme } from '@mui/material/styles';
+import type { ActionBarType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/grid/Grid.tsx

@@ -1,7 +1,6 @@
 import { FC, MouseEvent, useRef, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Typography from '@mui/material/Typography';
-import { Theme } from '@mui/material/styles/createTheme';
 import Grid from '@mui/material/Grid';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
 import TablePagination from '@mui/material/TablePagination';
@@ -9,6 +8,7 @@ import { makeStyles } from '@mui/styles';
 import CustomToolbar from './ToolBar';
 import Table from './Table';
 import TablePaginationActions from './TablePaginationActions';
+import type { Theme } from '@mui/material/styles/createTheme';
 import type { AttuGridType } from './Types';
 
 const userStyle = makeStyles((theme: Theme) => ({

client/src/components/grid/LoadingTable.tsx

@@ -1,4 +1,6 @@
-import { CircularProgress, Typography, Box } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 import { useTranslation } from 'react-i18next';
 
 const LoadingTable = (props: { wrapperClass?: string; count: number }) => {

client/src/components/grid/Table.tsx

@@ -6,14 +6,17 @@ import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
 import Checkbox from '@mui/material/Checkbox';
 import { makeStyles } from '@mui/styles';
-import type { TableType } from './Types';
-import { Box, Button, Typography, Theme } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import EnhancedTableHead from './TableHead';
 import EditableTableHead from './TableEditableHead';
 import ActionBar from './ActionBar';
 import LoadingTable from './LoadingTable';
 import CopyButton from '../advancedSearch/CopyButton';
 import { useTranslation } from 'react-i18next';
+import type { Theme } from '@mui/material/styles';
+import type { TableType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {

client/src/components/grid/TableEditableHead.tsx

@@ -1,6 +1,9 @@
 import { FC } from 'react';
-import { TableHead, TableRow, TableCell, Theme } from '@mui/material';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { TableEditableHeadType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/grid/TableHead.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
 import React from 'react';
-import {
-  TableHead,
-  TableRow,
-  TableCell,
-  Checkbox,
-  TableSortLabel,
-  Typography,
-  Theme,
-} from '@mui/material';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import Checkbox from '@mui/material/Checkbox';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { TableHeadType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/grid/TablePaginationActions.tsx

@@ -1,9 +1,10 @@
-import { Theme, Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import CustomButton from '../customButton/CustomButton';
 import icons from '../icons/Icons';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { TablePaginationActionsProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/grid/TableSwitch.tsx

@@ -1,7 +1,7 @@
-import { Theme } from '@mui/material';
 import { FC, useState } from 'react';
 import Icons from '../icons/Icons';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { TableSwitchType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/grid/ToolBar.tsx

@@ -1,5 +1,7 @@
 import { FC, useMemo } from 'react';
-import { Grid, Typography, Theme, IconButton } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 import CustomButton from '../customButton/CustomButton';
 import Icons from '../icons/Icons';
 import SearchInput from '../customInput/SearchInput';
@@ -7,6 +9,7 @@ import TableSwitch from './TableSwitch';
 import { throwErrorForDev } from '../../utils/Common';
 import CustomIconButton from '../customButton/CustomIconButton';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { ToolBarConfig, ToolBarType } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({

client/src/components/layout/GlobalEffect.tsx

@@ -41,7 +41,7 @@ const GlobalEffect = ({ children }: { children: React.ReactNode }) => {
         },
         error => {
           const { response } = error;
-          let messageType = 'error';
+          let messageType: 'error' | 'warning' = 'error';
 
           if (response) {
             switch (response.status) {

client/src/components/layout/Header.tsx

@@ -1,6 +1,5 @@
 import { FC, useContext, useState, MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Theme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import Menu from '@mui/material/Menu';
@@ -10,12 +9,13 @@ import { navContext, dataContext, authContext, rootContext } from '@/context';
 import { MilvusService } from '@/http';
 import CustomSelector from '@/components/customSelector/CustomSelector';
 import StatusIcon from '@/components/status/StatusIcon';
-import { LoadingType } from '@/components/status/StatusIcon';
 import UpdateUser from '@/pages/user/dialogs/UpdateUserPassDialog';
 import icons from '../icons/Icons';
 import { makeStyles } from '@mui/styles';
 import IconButton from '@mui/material/IconButton';
 import { ColorModeContext } from '@/context';
+import { LoadingType } from '@/components/status/StatusIcon';
+import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   header: {

client/src/components/layout/Wrapper.tsx

@@ -1,6 +1,6 @@
 import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import type { Theme } from '@mui/material/styles';
 
 interface WrapperProps {
   hasPermission?: boolean;

client/src/components/menu/SimpleMenu.tsx

@@ -2,10 +2,10 @@ import { FC, useMemo } from 'react';
 import React from 'react';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import { generateId } from '../../utils/Common';
 import CustomButton from '../customButton/CustomButton';
-import { Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
+import { generateId } from '../../utils/Common';
+import type { Theme } from '@mui/material/styles';
 import type { SimpleMenuType } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/components/status/Status.tsx

@@ -1,9 +1,12 @@
 import { FC, useMemo } from 'react';
-import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
+import StatusIcon from '@/components/status/StatusIcon';
 import { useTranslation } from 'react-i18next';
-import { Theme, Typography, useTheme } from '@mui/material';
-import { LOADING_STATE } from '@/consts';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
 import { makeStyles } from '@mui/styles';
+import { LOADING_STATE } from '@/consts';
+import { LoadingType } from '@/components/status/StatusIcon';
+import type { Theme } from '@mui/material/styles';
 
 export type StatusType = {
   status: LOADING_STATE;

client/src/components/status/StatusIcon.tsx

@@ -1,6 +1,7 @@
-import { CircularProgress, Theme } from '@mui/material';
+import CircularProgress from '@mui/material/CircularProgress';
 import { FC, ReactElement } from 'react';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 
 export enum LoadingType {
   CREATING = 'creating',
@@ -19,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'flex-left',
     alignItems: 'center',
-    paddingLeft: theme.spacing(.5),
+    paddingLeft: theme.spacing(0.5),
   },
   svg: {
     color: theme.palette.primary.main,

client/src/components/uploader/Uploader.tsx

@@ -1,9 +1,9 @@
-import { Theme } from '@mui/material';
 import { FC, useContext, useRef } from 'react';
 import { rootContext } from '@/context';
 import CustomButton from '../customButton/CustomButton';
 import { FILE_MIME_TYPE } from '@/consts';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 import type { UploaderProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({

client/src/context/ColorMode.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { createTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import getCommonThemes from '../styles/theme';
-import { ThemeProvider } from '@mui/material';
 
 export const ColorModeContext = React.createContext({
   toggleColorMode: () => {},

client/src/context/Types.ts

@@ -60,7 +60,7 @@ export type SnackBarType = {
 
 export type OpenSnackBarType = (
   message: string | ReactElement,
-  type?: 'error' | 'info' | 'success' | 'warning' | string,
+  type?: 'error' | 'info' | 'success' | 'warning',
   autoHideDuration?: number | null,
   position?: {
     horizontal: 'center' | 'left' | 'right';

client/src/pages/connect/AuthForm.tsx

@@ -1,5 +1,7 @@
 import React, { useContext, useEffect, useMemo, useState } from 'react';
-import { Typography, Menu, Checkbox } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import Menu from '@mui/material/Menu';
+import Checkbox from '@mui/material/Checkbox';
 import { useTranslation } from 'react-i18next';
 import CustomButton from '@/components/customButton/CustomButton';
 import CustomInput from '@/components/customInput/CustomInput';
@@ -14,7 +16,6 @@ import CustomToolTip from '@/components/customToolTip/CustomToolTip';
 import CustomIconButton from '@/components/customButton/CustomIconButton';
 import { useStyles } from './style';
 import type { AuthReq } from '@server/types';
-
 type Connection = AuthReq & {
   time: number;
 };

client/src/pages/connect/ConnectContainer.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
-import { Theme, Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import Icons from '@/components/icons/Icons';
 import { AuthForm } from './AuthForm';
 import CustomButton from '@/components/customButton/CustomButton';
 import { MilvusService } from '@/http';
 import { makeStyles } from '@mui/styles';
+import type { Theme } from '@mui/material/styles';
 
 const getContainerStyles = makeStyles((theme: Theme) => ({
   wrapper: {

client/src/pages/databases/Databases.tsx

@@ -1,9 +1,7 @@
 import { useContext, useEffect, useState, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Theme } from '@mui/material';
 import { useNavigationHook } from '@/hooks';
-import { ALL_ROUTER_TYPES } from '@/router/consts';
 import RouteTabList from '@/components/customTabList/RouteTabList';
 import DatabaseTree from '@/pages/databases/tree';
 import Partitions from './collections/partitions/Partitions';
@@ -14,9 +12,12 @@ import Properties from './collections/properties/Properties';
 import Search from './collections/search/Search';
 import { dataContext, authContext } from '@/context';
 import Collections from './collections/Collections';
-import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
+import StatusIcon from '@/components/status/StatusIcon';
 import { ConsistencyLevelEnum, DYNAMIC_FIELD } from '@/consts';
+import { ALL_ROUTER_TYPES } from '@/router/consts';
 import { makeStyles } from '@mui/styles';
+import { LoadingType } from '@/components/status/StatusIcon';
+import type { Theme } from '@mui/material/styles';
 import type { SearchParams, QueryState } from './types';
 import type { CollectionObject, CollectionFullObject } from '@server/types';
 import type { ITab } from '@/components/customTabList/Types';