feat: home page

src/components/test/test-box.tsx

@@ -4,7 +4,8 @@ export const TestBox = styled(Box)(({ theme, "aria-selected": selected }) => {
   const { mode, primary, text } = theme.palette;
   const key = `${mode}-${!!selected}`;
 
-  const backgroundColor = mode === "light" ? "#ffffff" : "#282A36";
+  const backgroundColor =
+    mode === "light" ? alpha(primary.main, 0.05) : alpha(primary.main, 0.08);
 
   const color = {
     "light-true": text.secondary,
@@ -27,11 +28,17 @@ export const TestBox = styled(Box)(({ theme, "aria-selected": selected }) => {
     cursor: "pointer",
     textAlign: "left",
     borderRadius: 8,
-    boxShadow: theme.shadows[2],
+    boxShadow: theme.shadows[1],
     padding: "8px 16px",
     boxSizing: "border-box",
     backgroundColor,
     color,
     "& h2": { color: h2color },
+    transition: "background-color 0.3s, box-shadow 0.3s",
+    "&:hover": {
+      backgroundColor:
+        mode === "light" ? alpha(primary.main, 0.1) : alpha(primary.main, 0.15),
+      boxShadow: theme.shadows[2],
+    },
   };
 });

src/components/test/test-item.tsx

@@ -3,15 +3,7 @@ import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import {
-  Box,
-  Typography,
-  Divider,
-  MenuItem,
-  Menu,
-  styled,
-  alpha,
-} from "@mui/material";
+import { Box, Divider, MenuItem, Menu, styled, alpha } from "@mui/material";
 import { BaseLoading } from "@/components/base";
 import { LanguageRounded } from "@mui/icons-material";
 import { Notice } from "@/components/base";
@@ -149,11 +141,7 @@ export const TestItem = (props: Props) => {
             </Box>
           )}
 
-          <Box sx={{ display: "flex", justifyContent: "center" }}>
-            <Typography variant="h6" component="h2" noWrap title={name}>
-              {name}
-            </Typography>
-          </Box>
+          <Box sx={{ display: "flex", justifyContent: "center" }}>{name}</Box>
         </Box>
         <Divider sx={{ marginTop: "8px" }} />
         <Box