From 3703301468845ff861676dfed89d7e4ea035e5f2 Mon Sep 17 00:00:00 2001
From: "delong.wang" <w.del@qq.com>
Date: Mon, 22 May 2023 18:05:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(fe):=20=E6=A3=80=E6=B5=8B=E9=A1=B5?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AE=A1=E7=AE=97=E7=BB=93=E6=9E=9C=E8=AF=B4?=
 =?UTF-8?q?=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 homepage/src/components/detection/Result.tsx |  2 +-
 homepage/src/pages/detection.tsx             | 24 ++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/homepage/src/components/detection/Result.tsx b/homepage/src/components/detection/Result.tsx
index 181aaa7..984636d 100644
--- a/homepage/src/components/detection/Result.tsx
+++ b/homepage/src/components/detection/Result.tsx
@@ -19,7 +19,7 @@ function Result({ rows }: { rows: ResultRowsType }) {
         <Table sx={{ minWidth: 650 }}>
           <TableHead>
             <TableRow>
-              <TableCell>检测引擎</TableCell>
+              <TableCell>WAF 类别</TableCell>
               <TableCell>版本</TableCell>
               <TableCell>检出率</TableCell>
               <TableCell>误报率</TableCell>
diff --git a/homepage/src/pages/detection.tsx b/homepage/src/pages/detection.tsx
index d4d38c4..0144ef7 100644
--- a/homepage/src/pages/detection.tsx
+++ b/homepage/src/pages/detection.tsx
@@ -3,13 +3,16 @@ 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 {
   RecordSamplesType,
   ResultRowsType,
 } from "@/components/detection/types";
+import Grid from "@mui/material/Grid";
 import SampleList from "@/components/detection/SampleList";
+import { Typography } from "@mui/material";
 
 export default Detection;
 
@@ -76,6 +79,27 @@ function Detection() {
       <div style={{ height: "100px" }}></div>
       <SampleList value={samples} onSetIdChange={handleSetId} />
       <Result rows={result} />
+      <Grid
+        container
+        spacing={2}
+        sx={{ mt: 3, mb: 3, color: "text.auxiliary" }}
+      >
+        <Grid item md={3}>
+          <Typography>TP: 正确识别到攻击样本的数量</Typography><br />
+          <Typography>检出率 = TP / (TP + FN)</Typography>
+        </Grid>
+        <Grid item md={3}>
+          <Typography>TN: 正确识别到普通样本的数量</Typography><br />
+          <Typography>误报率 = FP / (TP + FP)</Typography>
+        </Grid>
+        <Grid item md={3}>
+          <Typography>FP: 将普通样本误报为攻击的数量</Typography><br />
+          <Typography>准确率 = (TP + TN) / (TP + TN + FP + FN)</Typography>
+        </Grid>
+        <Grid item md={3}>
+          <Typography>FN: 未识别到攻击样本的数量</Typography>
+        </Grid>
+      </Grid>
     </Container>
   );
 }