From 708c6b669a99712b92762ed23ecd6a6b521e0dbd Mon Sep 17 00:00:00 2001
From: naocanmonster <naocanmonster@gmail.com>
Date: Wed, 26 Apr 2023 23:02:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AF=A6=E7=BB=86?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Home/Version/FunctionTable.tsx | 367 +++++++++---------
 1 file changed, 184 insertions(+), 183 deletions(-)

diff --git a/homepage/src/components/Home/Version/FunctionTable.tsx b/homepage/src/components/Home/Version/FunctionTable.tsx
index 834878c..251911d 100644
--- a/homepage/src/components/Home/Version/FunctionTable.tsx
+++ b/homepage/src/components/Home/Version/FunctionTable.tsx
@@ -13,7 +13,7 @@ import {
   alpha,
   Tooltip,
 } from "@mui/material";
-import { useState } from "react";
+import React, { useState } from "react";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import { Icon } from "@/components";
@@ -32,83 +32,120 @@ const Unlimited = () => {
 };
 
 const FunctionTable = () => {
-  const [open, setOpen] = useState(true);
-  const bodyCell = [
-    {
-      name: "智能语义分析引擎",
-      tip: "",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "可防护站点数量",
-      experience: <Unlimited />,
-      basics: <Unlimited />,
-    },
-    {
-      name: "自定义白名单",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "自定义黑名单",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "反向代理接入",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "软件形态",
-      experience: <Support />,
-      basics: <Support />,
-    },
-    {
-      name: "硬件形态",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "智能业务建模",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "动态防护",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "分布式集群部署",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "SDK 接入",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "透明代理接入",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "透明桥接接入",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-    {
-      name: "旁路镜像接入",
-      experience: <NotSupport />,
-      basics: <Support />,
-    },
-  ];
+  const [open, setOpen] = useState<string[]>([]);
 
-  const handleClick = () => {
-    setOpen(!open);
+  const cells = [
+    {
+      title: "基本功能",
+      data: [
+        {
+          name: "可视化 DashBoard",
+          experience: <Support />,
+          basics: <Support />,
+        },
+        {
+          name: "自定义规则",
+          experience: <Support />,
+          basics: <Support />,
+        },
+        {
+          name: "可防护站点数量",
+          experience: <Unlimited />,
+          basics: <Unlimited />,
+        },
+        {
+          name: "自定义防护策略",
+          experience: <Support />,
+          basics: <Support />,
+        }
+      ]
+    },
+    {
+      title: "高级防护能力",
+      data: [
+        {
+          name: "智能语义分析引擎",
+          tip: "",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "智能业务建模",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "动态防护",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "API 防护",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "Bot 管理",
+          experience: <NotSupport />,
+          basics: <Support />,
+        },
+      ]
+    },
+    {
+      title: "部署形态",
+      data: [
+        {
+          name: "软件形态",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "硬件形态",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "分布式集群形态",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "云原生 K8S 集群形态",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }
+      ]
+    },
+    {
+      title: "流量接入方式",
+      data: [
+        {
+          name: "反向代理接入",
+          experience: <Support />,
+          basics: <Support />,
+        }, {
+          name: "SDK 接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "透明代理接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "透明桥接接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }, {
+          name: "旁路镜像接入",
+          experience: <NotSupport />,
+          basics: <Support />,
+        }
+      ]
+    }
+  ]
+
+  const handleClick = (id: string) => {
+    if (open?.includes(id)) {
+      const udpateOpen = [...open]
+      udpateOpen.splice(open?.indexOf(id), 1)
+      setOpen([...udpateOpen])
+    } else {
+      setOpen((open) => [...open, id])
+    }
+    // setOpen(!open);
   };
 
   return (
@@ -122,117 +159,81 @@ 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>
-      <ListItem
-        onClick={handleClick}
-        sx={{
-          backgroundColor: "#EFF1F8",
-          borderRadius: "4px",
-          cursor: "pointer",
-          pl: "20px",
-        }}
-      >
-        <ListItemText
-          primary="详细参数"
-          sx={{ ".MuiTypography-root": { fontSize: "16px" } }}
         />
-        <ListItemIcon sx={{ color: "#000" }}>
-          {open ? <ExpandLess /> : <ExpandMore />}
-        </ListItemIcon>
-      </ListItem>
-      <Collapse in={open} timeout="auto" unmountOnExit sx={{ width: "100%" }}>
-        <TableContainer>
-          <Table
+      </TableContainer>
+      {cells?.map(data =>
+        <React.Fragment key={`sub-table-${data.title}`}>
+          <ListItem
+            onClick={() => handleClick(data?.title)}
             sx={{
-              ".MuiTableRow-root": {
-                "&:last-of-type": {
-                  ".MuiTableCell-root": {
-                    borderBottom: "none",
-                  },
-                },
-              },
-              ".MuiTableCell-root": {
-                pl: "20px !important",
-                pr: "8px !important",
-                py: "12px !important",
-                backgroundColor: "transparent !important",
-                color: "#000",
-                borderRight: "1px solid",
-                borderColor: "rgba(0,0,0,.04)",
-                "&:last-of-type": {
-                  borderRight: "none",
-                },
-              },
+              backgroundColor: "#EFF1F8",
+              borderRadius: "4px",
+              cursor: "pointer",
+              pl: "20px",
             }}
           >
-            <TableBody
-              sx={{
-                backgroundColor: alpha("#EFF1F8", 0.6),
-              }}
-            >
-              {bodyCell.map((item) => (
-                <TableRow key={item.name}>
-                  <TableCell sx={{ width: "33%" }}>
-                    <Box sx={{ display: "flex", alignItems: "center" }}>
-                      {item.name}
-                      <Tooltip title={item.tip} arrow placement="right">
-                        <Box component="span" sx={{ ml: 1 }}>
-                          <Icon type="icon-bangzhu1" />
+            <ListItemText
+              primary={data.title}
+              sx={{ ".MuiTypography-root": { fontSize: "16px" } }}
+            />
+            <ListItemIcon sx={{ color: "#000" }}>
+              {open?.includes(data?.title) ? <ExpandLess /> : <ExpandMore />}
+            </ListItemIcon>
+          </ListItem>
+          <Collapse in={open?.includes(data?.title)} timeout="auto" unmountOnExit sx={{ width: "100%" }}>
+            <TableContainer>
+              <Table
+                sx={{
+                  ".MuiTableRow-root": {
+                    "&:last-of-type": {
+                      ".MuiTableCell-root": {
+                        borderBottom: "none",
+                      },
+                    },
+                  },
+                  ".MuiTableCell-root": {
+                    pl: "20px !important",
+                    pr: "8px !important",
+                    py: "12px !important",
+                    backgroundColor: "transparent !important",
+                    color: "#000",
+                    borderRight: "1px solid",
+                    borderColor: "rgba(0,0,0,.04)",
+                    "&:last-of-type": {
+                      borderRight: "none",
+                    },
+                  },
+                }}
+              >
+                <TableBody
+                  sx={{
+                    backgroundColor: alpha("#EFF1F8", 0.6),
+                  }}
+                >
+                  {data.data.map((item) => (
+                    <TableRow key={item.name}>
+                      <TableCell sx={{ width: "33%" }}>
+                        <Box sx={{ display: "flex", alignItems: "center" }}>
+                          {item.name}
+                          <Tooltip title={item.tip} arrow placement="right">
+                            <Box component="span" sx={{ ml: 1 }}>
+                              <Icon type="icon-bangzhu1" />
+                            </Box>
+                          </Tooltip>
                         </Box>
-                      </Tooltip>
-                    </Box>
-                  </TableCell>
-                  <TableCell sx={{ width: "33%" }} align="center">
-                    {item.experience}
-                  </TableCell>
-                  <TableCell sx={{ width: "33%" }} align="center">
-                    {item.basics}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Collapse>
+                      </TableCell>
+                      <TableCell sx={{ width: "33%" }} align="center">
+                        {item.experience}
+                      </TableCell>
+                      <TableCell sx={{ width: "33%" }} align="center">
+                        {item.basics}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </Collapse></React.Fragment>)}
     </>
   );
 };

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 2/2] =?UTF-8?q?=E9=BB=98=E8=AE=A4=E6=8A=8A=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=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 251911d..a714307 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}`}>