Skip to content

Commit

Permalink
Merge pull request #47 from naocanmonster/main
Browse files Browse the repository at this point in the history 
优化了官网首页的详细参数对比表格
  • Loading branch information
@zclaiqcc
zclaiqcc authored Apr 27, 2023
2 parents 2e28d37 + 593a91c commit 44310f6
Showing 1 changed file with 180 additions and 137 deletions.
317 changes: 180 additions & 137 deletions homepage/src/components/Home/Version/FunctionTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -32,83 +32,124 @@ 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 />,
},
const [open, setOpen] = useState<string[]>(["基本功能", "高级防护能力", "部署形态", "流量接入方式"]);

const cells = [
{
name: "SDK 接入",
experience: <NotSupport />,
basics: <Support />,
title: "基本功能",
data: [
{
name: "可视化 DashBoard",
experience: <Support />,
basics: <Support />,
}, {
name: "自定义黑白名单",
experience: <Support />,
basics: <Support />,
}, {
name: "自定义防护策略",
experience: <Support />,
basics: <Support />,
}, {
name: "可防护站点数量",
experience: <Unlimited />,
basics: <Unlimited />,
}, {
name: "可支撑流量大小",
experience: <Unlimited />,
basics: <Unlimited />,
}
]
},
{
name: "透明代理接入",
experience: <NotSupport />,
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 />,
}, {
name: "拟态防护",
experience: <NotSupport />,
basics: <Support />,
},
]
},
{
name: "透明桥接接入",
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 />,
}
]
},
{
name: "旁路镜像接入",
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 = () => {
setOpen(!open);
const handleClick = (id: string) => {
if (open?.includes(id)) {
const udpateOpen = [...open]
udpateOpen.splice(open?.indexOf(id), 1)
setOpen([...udpateOpen])
} else {
setOpen((open) => [...open, id])
}
};

return (
Expand Down Expand Up @@ -162,77 +203,79 @@ const FunctionTable = () => {
</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
{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>)}
</>
);
};
Expand Down

0 comments on commit 44310f6

Please sign in to comment.