Merge pull request #691 from Herries/fe-update-versions

feat: 添加专业版
2026-02-09 02:03:25 +08:00 · 2024-02-23 09:50:52 +08:00
parent f44a4563e0 f447a350e4
commit 3e758a40cf
4 changed files with 156 additions and 94 deletions
--- a/website/public/images/discount.svg
+++ b/website/public/images/discount.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="76px" height="20px" viewBox="0 0 76 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <defs>
+        <linearGradient x1="-4.93008412e-13%" y1="46.5373961%" x2="90.5986697%" y2="53.4626039%" id="linearGradient-1">
+            <stop stop-color="#FFC193" offset="0%"></stop>
+            <stop stop-color="#FF5A5E" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="官网设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="版本（专业版特惠）" transform="translate(-1012.000000, -737.000000)">
+            <g id="编组-4" transform="translate(1012.000000, 737.000000)">
+                <path d="M8,0 L66,0 C71.5228475,-1.01453063e-15 76,4.4771525 76,10 C76,15.5228475 71.5228475,20 66,20 L0,20 L0,20 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="矩形" fill="url(#linearGradient-1)"></path>
+                <g id="人气、热度" transform="translate(8.000000, 5.000000)" fill="#FFDF00" fill-rule="nonzero">
+                    <path d="M6.40193705,3.27637496 C6.08232446,3.79522657 5.66447596,4.06226219 5.66447596,4.06226219 C6.43652715,0.986509858 3.28052577,0 3.28052577,0 C4.21445866,3.40781736 0,3.66793497 0,6.41438948 C0,9.160844 3.22241439,9.63818748 3.22241439,9.63818748 C0.437218955,6.56658596 4,4.82324455 4,4.82324455 C4,4.82324455 3.37737807,5.72120374 4.83708059,7.12002767 C5.86786579,8.10653753 4.73607748,9.63403667 4.73607748,9.63403667 C5.78623314,9.64787271 8,8.26565202 8,6.388101 C8,4.51193359 6.40193705,3.27637496 6.40193705,3.27637496 Z" id="路径"></path>
+                </g>
+                <text id="限时特惠" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="20" fill="#FFFFFF">
+                    <tspan x="20" y="14">限时特惠</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/website/src/components/Footer.tsx
+++ b/website/src/components/Footer.tsx
@@ -40,9 +40,9 @@ const LINKS = [
 ];

 export const items = [
-  { to: "/community", label: "开发计划" },
-  { to: "/version", label: "付费版本" },
-  { to: "", label: "用户协议" },
+  { to: "/community", label: "开发计划", target: "_self" },
+  { to: "/version", label: "付费版本", target: "_self" },
+  { to: "https://github.com/chaitin/SafeLine/blob/main/LICENSE.md", label: "用户协议", target: "_blank" },
 ];

 export default function Footer() {
@@ -88,7 +88,7 @@ export default function Footer() {
                {items.map((item, index) => (
                  <Box key={index} component="span" mr={5}>
                    {item.to ? (
-                      <Link sx={{ fontSize: '16px', fontWeight: 600, color: "common.white" }} href={item.to} rel={item.label}>
+                      <Link sx={{ fontSize: '16px', fontWeight: 600, color: "common.white" }} href={item.to} rel={item.label} target={item.target}>
                        {item.label}
                      </Link>
                    ) : (
--- a/website/src/components/Version/FunctionTable.tsx
+++ b/website/src/components/Version/FunctionTable.tsx
@@ -33,11 +33,11 @@ const Illustrate = ({ text }: { text: string }) => {

 const versions = [
  { title: '社区版', key: 'experience' },
-  // { title: '专业版', key: 'major' },
+  { title: '专业版', key: 'major' },
  { title: '企业版', key: 'basics' },
 ]

-const colors = ['light', 'main'] // 'lighter', 
+const colors = ['lighter', 'light', 'main']

 const FunctionTable = () => {
  const [open, setOpen] = useState<string[]>([
@@ -77,7 +77,7 @@ const FunctionTable = () => {
          basics: <Support />,
        },
        {
-          name: "人机验证",
+          name: "爬虫防护 / 人机验证",
          experience: <Support />,
          major: <Support />,
          basics: <Support />,
@@ -91,31 +91,43 @@ const FunctionTable = () => {
        {
          name: "威胁情报",
          experience: <Illustrate text="社区共享威胁 IP" />,
-          major: <Support />,
+          major: <Illustrate text="专业版威胁 IP" />,
          basics: <Illustrate text="高级威胁情报" />,
        },
+        {
+          name: "商业地理位置封禁",
+          experience: <NotSupport />,
+          major: <Support />,
+          basics: <Support />,
+        },
+        {
+          name: "应急补充规则",
+          experience: <NotSupport />,
+          major: <Support />,
+          basics: <Support />,
+        },
        {
          name: "高级 Bot 防护、API 防护",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "网页防篡改",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "灵活可编程插件",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "精细化引擎调节",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
      ],
@@ -133,13 +145,13 @@ const FunctionTable = () => {
        {
          name: "高级统计分析与报告",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "实时可视化大屏",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
      ],
@@ -147,23 +159,29 @@ const FunctionTable = () => {
    {
      title: "系统管理",
      data: [
+        {
+          name: "自定义拦截页面",
+          experience: <NotSupport />,
+          major: <Support />,
+          basics: <Support />,
+        },
        {
          name: "多设备集中管理",
          tip: "",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "多租户管理",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "安全合规与审计",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
      ],
@@ -177,40 +195,40 @@ const FunctionTable = () => {
          major: <Support />,
          basics: <Support />,
        },
-        {
-          name: "旁路、透明代理、路由等复杂接入方式",
-          experience: <NotSupport />,
-          major: <Support />,
-          basics: <Support />,
-        },
-        {
-          name: "集群式可扩展部署",
-          experience: <NotSupport />,
-          major: <Support />,
-          basics: <Support />,
-        },
        {
          name: "负载均衡",
          experience: <NotSupport />,
          major: <Support />,
          basics: <Support />,
        },
+        {
+          name: "旁路、透明代理、路由等复杂接入方式",
+          experience: <NotSupport />,
+          major: <NotSupport />,
+          basics: <Support />,
+        },
+        {
+          name: "集群式可扩展部署",
+          experience: <NotSupport />,
+          major: <NotSupport />,
+          basics: <Support />,
+        },
        {
          name: "紧急模式 / Bypass",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "硬件形态交付",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "高可用 / HA",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
      ],
@@ -227,19 +245,19 @@ const FunctionTable = () => {
        {
          name: "漏洞应急服务",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
-          name: "产品销售许可证",
+          name: "等保合规",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
        {
          name: "定制化",
          experience: <NotSupport />,
-          major: <Support />,
+          major: <NotSupport />,
          basics: <Support />,
        },
      ],
@@ -271,9 +289,9 @@ const FunctionTable = () => {
        >
          <TableHead sx={{ background: "transparent" }}>
            <TableRow sx={{ border: "0" }}>
-              <TableCell sx={{ width: { xs: "50%", sm: "33%" }}}/>
+              <TableCell sx={{ width: { xs: "25%" }}}/>
              {versions.map((item, index) => (
-                <TableCell key={item.title} align="center" sx={{ width: { xs: "25%", sm: "33%" }, fontSize: "16px" }}>
+                <TableCell key={item.title} align="center" sx={{ width: { xs: "25%" }, fontSize: "16px" }}>
                  <Box
                    sx={(theme) => ({
                      display: "flex",
@@ -354,13 +372,13 @@ const FunctionTable = () => {
                >
                  {data.data.map((item) => (
                    <TableRow key={item.name}>
-                      <TableCell sx={{ width: { xs: "50%", sm: "33%" }}}>
+                      <TableCell sx={{ width: { xs: "25%" }}}>
                        <Box>
                          <Typography variant="h6" sx={{ fontWeight: 400 }}>{item.name}</Typography>
                        </Box>
                      </TableCell>
                      {versions.map((v, index) => (
-                        <TableCell key={index} sx={{ width: { xs: "25%", sm: "33%" } }} align="center">
+                        <TableCell key={index} sx={{ width: { xs: "25%" } }} align="center">
                         {item[v.key as 'experience' | 'major' | 'basics']}
                       </TableCell>
                      ))}
--- a/website/src/components/Version/index.tsx
+++ b/website/src/components/Version/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { alpha, Box, Button, Typography } from "@mui/material";
+import { alpha, Box, Button, Typography, Stack } from "@mui/material";
 import dynamic from 'next/dynamic';
 import FunctionTable from "./FunctionTable";
+import Image from "next/image";

 const Consultation = dynamic(() => import('./Consultation'), {
  ssr: false,
@@ -14,7 +15,7 @@ const VERSION_LIST = [
    apply_desc: "适合小型个人网站或业余爱好项目",
    fee: "免费",
    fee_desc: "",
-    desc: "无限站点，无限规则",
+    desc: "",
    operation: (
      <Button
        variant="contained"
@@ -30,58 +31,73 @@ const VERSION_LIST = [
      </Button>
    ),
    functions: [
-      "语义分析防护",
-      "自定义规则",
-      "访问频率限制",
-      "人机验证",
-      "社区 IP 情报",
+      "Web 攻击防护",
+      "爬虫防护 / 人机验证",
+      "Web 访问控制 / Web 身份认证",
+      "CC 攻击防护 / 频率限制",
+      "黑 IP 情报防护",
+      "0 Day 漏洞情报防护",
+    ],
+  },
+  {
+    name: "专业版",
+    name_bg: "/images/professional-version.png",
+    apply_desc: "适合专业网站与小微企业",
+    fee: "¥1799",
+    fee_desc: "/年",
+    desc: (
+      <Stack direction="row" justifyContent="center">
+        <Typography variant="subtitle2" mr={1} sx={{ color: alpha("#000", 0.5), textDecoration: "line-through", lineHeight: "20px" }}>
+          原价 ¥3600 /年
+        </Typography>
+        <Image
+          src="/images/discount.svg"
+          alt="限时特惠"
+          width={76}
+          height={20}
+        />
+      </Stack>
+    ),
+    operation: (
+      <Button
+        variant="contained"
+        // target="_blank"
+        sx={{
+          width: 146,
+          my: 4,
+          boxShadow: "0px 15px 25px 0px rgba(15,198,194,0.3)",
+        }}
+        // href="https://rivers.chaitin.cn/app/safeline-cloud-12338/auth"
+      >
+        即将开放
+      </Button>
+    ),
+    functions: [
+      "所有社区版能力",
+      "Web 攻击加强防护",
+      "黑 IP 加强情报防护",
+      "自定义拦截页面",
+      "基于地理位置的访问控制",
+      "上游服务器负载均衡",
    ],
  },
-  // {
-  //   name: "专业版",
-  //   name_bg: "/images/professional-version.png",
-  //   apply_desc: "适合专业网站与关键业务",
-  //   fee: "¥88",
-  //   fee_desc: "/月 按年订阅",
-  //   desc: "¥118 按月订阅",
-  //   operation: (
-  //     <Button
-  //       variant="contained"
-  //       target="_blank"
-  //       sx={{
-  //         width: 146,
-  //         my: 4,
-  //         boxShadow: "0px 15px 25px 0px rgba(15,198,194,0.3)",
-  //       }}
-  //       href="https://stack.chaitin.com/tool/detail?id=717"
-  //     >
-  //       立即购买
-  //     </Button>
-  //   ),
-  //   functions: [
-  //     "所有社区版能力",
-  //     "自定义阻断页面",
-  //     "自定义相应动作",
-  //     "根据地区封禁",
-  //     "......",
-  //   ],
-  // },
  {
    name: "企业版",
    name_bg: "/images/enterprise-version.svg",
-    apply_desc: "适合小微到中大型企业",
-    fee: "按需定制",
+    apply_desc: "适合中大型企业",
+    fee: "定制包价",
    fee_desc: "",
    desc: "",
    operation: (
      <Consultation />
    ),
    functions: [
-      "所有社区版能力",
-      "高级统计分析与报告",
-      "智能业务建模",
-      "高级 Bot 防护、API 防护",
-      "......",
+      "所有专业版能力",
+      "软件、硬件、云原生等交付形式",
+      "反代、透明、路由、桥接、旁挂等方式部署",
+      "多活、主备、Bypass 等高可用形式",
+      "动态防护、拟态防护等高级防护形式",
+      "分布式集群部署，检测超大规模流量",
    ],
  },
 ]
@@ -101,7 +117,7 @@ const Version = () => {
          <Box
            key={item.name}
            sx={{
-              width: { xs: "100%", sm: "42%" },
+              width: { xs: "100%", md: "30.7%" },
              flexShrink: 0,
              height: { xs: "auto" },
              borderRadius: "12px",
@@ -151,6 +167,9 @@ const Version = () => {
                  </Typography>
                )}
              </Typography>
+              <Box sx={{ height: "20px" }}>
+                {item.desc}
+              </Box>
              <Box>{item.operation}</Box>
              <FunctionItems items={item.functions} />
            </Box>
@@ -185,16 +204,18 @@ const FunctionItems: React.FC<{ items: any[] }> = ({ items }) => {
            py: 2,
            position: "relative",
            pl: 2,
-            "&:before": {
-              content: "' '",
-              position: "absolute",
-              left: 0,
-              top: "22px",
-              width: 4,
-              height: 4,
-              borderRadius: "50%",
-              backgroundColor: "success.main",
-            },
+            fontSize: "14px",
+            textAlign: "center",
+            // "&:before": {
+            //   content: "' '",
+            //   position: "absolute",
+            //   left: 0,
+            //   top: "22px",
+            //   width: 4,
+            //   height: 4,
+            //   borderRadius: "50%",
+            //   backgroundColor: "success.main",
+            // },
          }}
        >
          {f}