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([]); + const [open, setOpen] = useState(["基本功能", "高级防护能力", "部署形态", "流量接入方式"]); const cells = [ { @@ -42,21 +42,22 @@ const FunctionTable = () => { name: "可视化 DashBoard", experience: , basics: , - }, - { - name: "自定义规则", + }, { + name: "自定义黑白名单", experience: , basics: , - }, - { - name: "可防护站点数量", - experience: , - basics: , - }, - { + }, { name: "自定义防护策略", experience: , basics: , + }, { + name: "可防护站点数量", + experience: , + basics: , + }, { + name: "可支撑流量大小", + experience: , + basics: , } ] }, @@ -84,6 +85,10 @@ const FunctionTable = () => { name: "Bot 管理", experience: , basics: , + }, { + name: "拟态防护", + experience: , + basics: , }, ] }, @@ -145,7 +150,6 @@ const FunctionTable = () => { } else { setOpen((open) => [...open, id]) } - // setOpen(!open); }; return ( @@ -159,7 +163,45 @@ const FunctionTable = () => { px: "12px", }, }} - /> + > + + + + + ({ + 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), + })} + > + 社区版 + + + + ({ + 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", + })} + > + 企业版 + + + + + {cells?.map(data =>