From 91eebf04d7d4543b6841ed92c1ea710abf0b2ac8 Mon Sep 17 00:00:00 2001
From: "delong.wang" <w.del@qq.com>
Date: Mon, 22 May 2023 22:40:20 +0800
Subject: [PATCH] feat(fe): refine detection page styles

---
 homepage/src/components/detection/SampleList.tsx |  8 ++++++--
 .../src/components/detection/SampleSteps.tsx     | 16 +++++++++++++---
 homepage/src/components/detection/detection.css  |  3 +++
 homepage/src/pages/_app.tsx                      |  1 +
 homepage/src/pages/detection.tsx                 |  1 -
 5 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 homepage/src/components/detection/detection.css

diff --git a/homepage/src/components/detection/SampleList.tsx b/homepage/src/components/detection/SampleList.tsx
index c49ef58..210f2c5 100644
--- a/homepage/src/components/detection/SampleList.tsx
+++ b/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>
diff --git a/homepage/src/components/detection/SampleSteps.tsx b/homepage/src/components/detection/SampleSteps.tsx
index bb287f5..ba639df 100644
--- a/homepage/src/components/detection/SampleSteps.tsx
+++ b/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>
diff --git a/homepage/src/components/detection/detection.css b/homepage/src/components/detection/detection.css
new file mode 100644
index 0000000..d7d86e4
--- /dev/null
+++ b/homepage/src/components/detection/detection.css
@@ -0,0 +1,3 @@
+.detection-samples-accordion::before {
+    display: none;
+}
\ No newline at end of file
diff --git a/homepage/src/pages/_app.tsx b/homepage/src/pages/_app.tsx
index 1ded640..b999dd2 100644
--- a/homepage/src/pages/_app.tsx
+++ b/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;
diff --git a/homepage/src/pages/detection.tsx b/homepage/src/pages/detection.tsx
index 0144ef7..32c7253 100644
--- a/homepage/src/pages/detection.tsx
+++ b/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 {