From 593a91caa03f2e13a0de5e94cc730796a1bca3fe Mon Sep 17 00:00:00 2001
From: naocanmonster <naocanmonster@gmail.com>
Date: Wed, 26 Apr 2023 23:25:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=8A=8A=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E7=9A=84=E8=A1=A8=E6=A0=BC=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Home/Version/FunctionTable.tsx | 68 +++++++++++++++----
 1 file changed, 55 insertions(+), 13 deletions(-)

diff --git a/homepage/src/components/Home/Version/FunctionTable.tsx b/homepage/src/components/Home/Version/FunctionTable.tsx
index 251911db..a7143074 100644
--- a/homepage/src/components/Home/Version/FunctionTable.tsx
+++ b/homepage/src/components/Home/Version/FunctionTable.tsx
@@ -32,7 +32,7 @@ const Unlimited = () => {
 };
 
 const FunctionTable = () => {
-  const [open, setOpen] = useState<string[]>([]);
+  const [open, setOpen] = useState<string[]>(["基本功能", "高级防护能力", "部署形态", "流量接入方式"]);
 
   const cells = [
     {
@@ -42,21 +42,22 @@ const FunctionTable = () => {
           name: "可视化 DashBoard",
           experience: <Support />,
           basics: <Support />,
-        },
-        {
-          name: "自定义规则",
+        }, {
+          name: "自定义黑白名单",
           experience: <Support />,
           basics: <Support />,
-        },
-        {
-          name: "可防护站点数量",
-          experience: <Unlimited />,
-          basics: <Unlimited />,
-        },
-        {
+        }, {
           name: "自定义防护策略",
           experience: <Support />,
           basics: <Support />,
+        }, {
+          name: "可防护站点数量",
+          experience: <Unlimited />,
+          basics: <Unlimited />,
+        }, {
+          name: "可支撑流量大小",
+          experience: <Unlimited />,
+          basics: <Unlimited />,
         }
       ]
     },
@@ -84,6 +85,10 @@ const FunctionTable = () => {
           name: "Bot 管理",
           experience: <NotSupport />,
           basics: <Support />,
+        }, {
+          name: "拟态防护",
+          experience: <NotSupport />,
+          basics: <Support />,
         },
       ]
     },
@@ -145,7 +150,6 @@ const FunctionTable = () => {
     } else {
       setOpen((open) => [...open, id])
     }
-    // setOpen(!open);
   };
 
   return (
@@ -159,7 +163,45 @@ const FunctionTable = () => {
               px: "12px",
             },
           }}
-        />
+        >
+          <TableHead>
+            <TableRow>
+              <TableCell sx={{ width: "33%" }} />
+              <TableCell align="center" sx={{ width: "33%", fontSize: "16px" }}>
+                <Box
+                  sx={(theme) => ({
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "100%",
+                    height: "40px",
+                    borderRadius: "4px",
+                    color: theme.palette.primary.main,
+                    backgroundColor: alpha(theme.palette.primary.main, 0.2),
+                  })}
+                >
+                  社区版
+                </Box>
+              </TableCell>
+              <TableCell align="left" sx={{ width: "33%", fontSize: "16px" }}>
+                <Box
+                  sx={(theme) => ({
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    width: "100%",
+                    color: theme.palette.primary.main,
+                    backgroundColor: alpha(theme.palette.primary.main, 0.1),
+                    height: "40px",
+                    borderRadius: "4px",
+                  })}
+                >
+                  企业版
+                </Box>
+              </TableCell>
+            </TableRow>
+          </TableHead>
+        </Table>
       </TableContainer>
       {cells?.map(data =>
         <React.Fragment key={`sub-table-${data.title}`}>