feat(fe): refine detection page styles

homepage/src/components/detection/SampleList.tsx

@@ -70,7 +70,7 @@ function SampleList({ value, onSetIdChange }: SampleListProps) {
         <SamplesForm onSetIdChange={onSetIdChange} />
       </Box>
 
-      <Accordion>
+      <Accordion sx={{ borderRadius: "4px" }} className="detection-samples-accordion">
         <AccordionSummary expandIcon={<ExpandMoreIcon />}>
           <SampleCount
             total={value.length}
@@ -110,7 +110,11 @@ function SampleList({ value, onSetIdChange }: SampleListProps) {
                     <Typography
                       title={row.summary}
                       noWrap
-                      sx={{ width: "600px" }}
+                      sx={{
+                        width: "600px",
+                        fontFamily:
+                          "ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace",
+                      }}
                     >
                       {row.summary}
                     </Typography>

homepage/src/components/detection/SampleSteps.tsx

@@ -7,6 +7,7 @@ import {
   TextField,
   FormControlLabel,
   Radio,
+  Typography,
 } from "@mui/material";
 import {
   Dialog,
@@ -77,8 +78,8 @@ function SampleSteps({ onDetect }: SampleStepsProps) {
   };
 
   const handleStep = (n: number) => {
-    if(completed[n]) setActiveStep(n)
-  }
+    if (completed[n]) setActiveStep(n);
+  };
 
   return (
     <Box>
@@ -217,7 +218,16 @@ function SampleMarkable({
                 </RadioGroup>
               </TableCell>
               <TableCell>{row.size}</TableCell>
-              <TableCell>{row.summary}</TableCell>
+              <TableCell>
+                <Typography
+                  sx={{
+                    fontFamily:
+                      "ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace",
+                  }}
+                >
+                  {row.summary}
+                </Typography>
+              </TableCell>
               <TableCell>
                 <Button onClick={handleSampleDetail(row.raw)}>详情</Button>
               </TableCell>

homepage/src/components/detection/detection.css

@@ -0,0 +1,3 @@
+.detection-samples-accordion::before {
+    display: none;
+}

homepage/src/pages/_app.tsx

@@ -6,6 +6,7 @@ import MainLayout from "@/layout/MainLayout";
 import type { ReactElement, ReactNode } from "react";
 import type { NextPage } from "next";
 import Script from "next/script";
+import "@/components/detection/detection.css"
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode;

homepage/src/pages/detection.tsx

@@ -3,7 +3,6 @@ import Container from "@mui/material/Container";
 import Result from "@/components/detection/Result";
 import { useRouter } from "next/router";
 import "highlight.js/styles/a11y-light.css";
-import Box from "@mui/material/Box";
 import { getSampleSet, getSampleSetResult } from "@/api/detection";
 import { Message } from "@/components";
 import type {