From c36d359237b28c032708094266c411cde547607f Mon Sep 17 00:00:00 2001
From: Tinie13 <zhangmj198@163.com>
Date: Tue, 25 Jun 2024 16:54:32 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E4=B8=8D=E5=90=8C=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=8A=9F=E8=83=BD=E5=AF=B9=E6=AF=94=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cloud/FunctionalCompare.astro  | 151 ----
 .../cloud/FunctionalCompare/Correct.jsx       |  24 +
 .../cloud/FunctionalCompare/MobileTable.jsx   |  43 +
 .../cloud/FunctionalCompare/Tableplugin.jsx   | 105 +++
 .../cloud/FunctionalCompare/UpDown.jsx        |  24 +
 .../cloud/FunctionalCompare/index.jsx         | 138 ++++
 .../cloud/FunctionalCompare/style.css         | 112 +++
 .../FunctionalCompare/style.tableplugin.css   |  51 ++
 src/components/cloud/Tableplugin.astro        | 150 ----
 src/components/home/HomeIntroduce.astro       |   4 +-
 src/consts.ts                                 | 742 +++++++++++-------
 src/pages/cloud/index.astro                   |   4 +-
 src/pages/en/cloud/index.astro                |   4 +-
 13 files changed, 981 insertions(+), 571 deletions(-)
 delete mode 100644 src/components/cloud/FunctionalCompare.astro
 create mode 100644 src/components/cloud/FunctionalCompare/Correct.jsx
 create mode 100644 src/components/cloud/FunctionalCompare/MobileTable.jsx
 create mode 100644 src/components/cloud/FunctionalCompare/Tableplugin.jsx
 create mode 100644 src/components/cloud/FunctionalCompare/UpDown.jsx
 create mode 100644 src/components/cloud/FunctionalCompare/index.jsx
 create mode 100644 src/components/cloud/FunctionalCompare/style.css
 create mode 100644 src/components/cloud/FunctionalCompare/style.tableplugin.css
 delete mode 100644 src/components/cloud/Tableplugin.astro

diff --git a/src/components/cloud/FunctionalCompare.astro b/src/components/cloud/FunctionalCompare.astro
deleted file mode 100644
index 3a1fb242c68..00000000000
--- a/src/components/cloud/FunctionalCompare.astro
+++ /dev/null
@@ -1,151 +0,0 @@
----
-import { useTranslations, isChinese } from "@i18n/util";
-import Tableplugin from "./Tableplugin.astro";
-import Button from "@components/common/Button.astro";
-import {
-  Usability,
-  Enable,
-  Security,
-  Performance,
-  Observability,
-} from "../../consts";
-const t = useTranslations(Astro);
-const ifzh = isChinese(Astro);
----
-
-<functional-compare
-  class="functional-compare-wrapper top-[100px] flex flex-col justify-center items-center mt-10"
->
-  <div class="collapse bg-base-200 collapse-arrow bg-gray-02 w-[85.125rem]">
-    <input type="checkbox" checked />
-    <div class="collapse-title text-2xl font-normal">不同版本功能对比</div>
-    <div class="collapse-content">
-      <Tableplugin dataSource={Usability} title="易用性" isHead={true} />
-      <Tableplugin dataSource={Enable} title="可用性" />
-      <Tableplugin dataSource={Security} title="安全性" />
-      <Tableplugin dataSource={Performance} title="性能" />
-      <Tableplugin dataSource={Observability} title="可观测性" />
-    </div>
-  </div>
-  <!-- 吸底 -->
-  <table
-    class="table table-fixed sticky-table-bottom bg-gray-02 w-[85.125rem] mt-6 hidden"
-  >
-    <tr>
-      <th class="col1 border-0"></th>
-      <th class="col2 border-0"></th>
-      <th class="col3 overflow-hidden">
-        <p class="mb-6">免费版</p>
-        <Button
-          visibility={false}
-          href=" "
-          size="large"
-          target="_blank"
-          class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-        >
-          免费试用
-        </Button>
-      </th>
-      <th class="col4">
-        <p class="mb-6">开发版</p>
-        <Button
-          visibility={false}
-          href=""
-          size="large"
-          target="_blank"
-          class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-        >
-          咨询定价
-        </Button>
-      </th>
-      <th class="col5">
-        <p class="mb-6">专业版</p>
-        <Button
-          visibility={false}
-          href=""
-          size="large"
-          target="_blank"
-          class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-        >
-          咨询定价
-        </Button>
-      </th>
-      <th class="col6">
-        <p class="mb-6">Serverless 版</p>
-        <Button
-          visibility={false}
-          href=""
-          size="large"
-          target="_blank"
-          class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-        >
-          咨询定价
-        </Button>
-      </th>
-    </tr>
-  </table>
-</functional-compare>
-
-<style is:global>
-  th {
-    border-left: 1px dotted theme("colors.gray.03");
-    border-bottom: hidden;
-    text-align: center;
-    font-size: 24px;
-    font-weight: normal;
-    line-height: 32px;
-    color: theme("colors.gray.14");
-  }
-  .col1 {
-    width: 70px;
-    border-right: 0px;
-  }
-  .col2 {
-    width: 200px;
-    border-left: 0px;
-  }
-  .col3,
-  .col4,
-  .col5,
-  .col6 {
-    width: 200px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 18px;
-  }
-  .sticky-table-bottom {
-    position: sticky;
-    bottom: 0;
-  }
-  @media (max-width: 50rem) {
-  }
-
-  @media (min-width: 50rem) and (max-width: 86rem) {
-  }
-</style>
-
-<script>
-  class FunctionalCompare extends HTMLElement {
-    constructor() {
-      super();
-      this.init();
-    }
-
-    init() {
-      const collapse = this.querySelector('.collapse');
-      const stickyTable = this.querySelector('.sticky-table-bottom');
-      const checkPosition = () => {
-        const rect = collapse.getBoundingClientRect();
-        if (rect.top <= 0) {
-          stickyTable.classList.remove('hidden');
-        } else {
-          stickyTable.classList.add('hidden');
-        }
-      };
-
-      window.addEventListener('scroll', checkPosition);
-      checkPosition();
-    }
-  }
-  customElements.define('functional-compare', FunctionalCompare);
-</script>
diff --git a/src/components/cloud/FunctionalCompare/Correct.jsx b/src/components/cloud/FunctionalCompare/Correct.jsx
new file mode 100644
index 00000000000..e5544597e45
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/Correct.jsx
@@ -0,0 +1,24 @@
+
+
+const UpDown = (props) => {
+  return (
+    <svg
+      class="icon"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      p-id="2330"
+      width="24"
+      height="24"
+    >
+      <path
+        d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
+        fill="#444444"
+        p-id="2331"
+      >
+      </path>
+    </svg>
+  );
+};
+
+export default UpDown;
\ No newline at end of file
diff --git a/src/components/cloud/FunctionalCompare/MobileTable.jsx b/src/components/cloud/FunctionalCompare/MobileTable.jsx
new file mode 100644
index 00000000000..235d7198b54
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/MobileTable.jsx
@@ -0,0 +1,43 @@
+import { useEffect, useState } from "preact/hooks";
+import Correct from "./Correct";
+
+const MobileTable = (props) =>{
+const {dataSource, title ,version} = props;
+
+
+	return (
+    <div class="overflow-x-auto rounded-2xl mb-6">
+    <table class="table bg-gray-01 rounded-2xl table-fixed">
+      {
+        dataSource.map((item, index) => {
+          return (
+            <>
+              {index === 0 && <tr>
+                <td class="text-xl align-top text-left border-dotted border-b-2  border-gray-03" colspan={2}>
+                  {title}
+                </td>
+              </tr>}
+              <tr>
+                <td class="text-base font-normal color-gray-14">
+                  {item.name.title && <p>{item.name.title}</p>}
+                  {item.name.des && <p class="text-xs">{item.name.des}</p>}
+                </td>
+                <td class="text-center">
+                  {item[version]?.checked && <Correct />}
+                  {item[version]?.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item[version]?.des}
+                    </p>
+                  )}
+                </td>
+              </tr>
+            </>
+          );
+        })
+      }
+    </table>
+  </div>  
+	);
+};
+
+export default MobileTable;
\ No newline at end of file
diff --git a/src/components/cloud/FunctionalCompare/Tableplugin.jsx b/src/components/cloud/FunctionalCompare/Tableplugin.jsx
new file mode 100644
index 00000000000..89b2e650430
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/Tableplugin.jsx
@@ -0,0 +1,105 @@
+
+import { useEffect, useState } from "preact/hooks";
+import Correct from "./Correct";
+import "./style.tableplugin.css";
+
+
+
+const Tableplugin = (props) => {
+  const { dataSource, title, isHead = false } = props;
+  const totalRows = dataSource.length;
+
+  return (
+    <div class="overflow-x-auto rounded-2xl mb-6">
+      {
+        isHead && (
+          <table class="table table-fixed sticky-table-top">
+            <tr>
+              <th class="col1 border-0" />
+              <th class="col2 border-0" />
+              <th class="col3 overflow-hidden">
+                <p class="mb-6 "> 免费版</p>
+                <div class='text-gray-08 text-xs h-16 leading-8'>免费试用</div>
+              </th>
+              <th class="col4">
+                <p class="mb-6"> 开发版</p>
+                <p class='text-gray-08 text-xs'>目录价：118元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣价：47.2元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：月包7折，年包4折，新老同享</p>
+              </th>
+              <th class="col5">
+                <p class="mb-6"> 专业版</p>
+                <p class='text-gray-08 text-xs'>目录价：498元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣价：209.16元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：首购4.2折</p>
+              </th>
+              <th class="col6">
+                <p class="mb-6"> Serverless 版</p>
+                <p class='text-gray-08 text-xs'>目录价：0.16元/10个连接起</p>
+                <p class='text-gray-08 text-xs'>折扣价：0.15元/10个连接起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：节省计划9.5折，新老同享</p>
+              </th>
+            </tr>
+          </table>
+        )
+      }
+      <table class="table bg-gray-01 rounded-2xl table-fixed">
+        {
+          dataSource.map((item, index) => {
+            return (
+              <tr>
+                {index === 0 && (
+                  <td
+                    class="col1 text-xs align-top text-center "
+                    rowspan={totalRows}
+                  >
+                    {title}
+                  </td>
+                )}
+                <td class="col2 text-base font-normal color-gray-14">
+                  {item.name.title && <p>{item.name.title}</p>}
+                  {item.name.des && <p class="text-xs">{item.name.des}</p>}
+                </td>
+                <td class="col3 text-center">
+                  {item.free.checked && <Correct />}
+                  {item.free.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.free.des}
+                    </p>
+                  )}
+                </td>
+                <td class="col4 text-center">
+                  {item.develop.checked && <Correct />}
+                  {item.develop.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.develop.des}
+                    </p>
+                  )}
+
+                </td>
+                <td class="col5 text-center">
+                  {item.speciality.checked && <Correct />}
+                  {item.speciality.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.speciality.des}
+                    </p>
+                  )}
+                </td>
+                <td class="col6 text-center">
+                  {item.serverless.checked && <Correct />}
+                  {item.serverless.des && (
+                    <p class="text-xs font-normal color-gray-08">
+                      {item.serverless.des}
+                    </p>
+                  )}
+                </td>
+              </tr>
+            );
+          })
+        }
+      </table>
+    </div>
+  );
+};
+
+export default Tableplugin;
\ No newline at end of file
diff --git a/src/components/cloud/FunctionalCompare/UpDown.jsx b/src/components/cloud/FunctionalCompare/UpDown.jsx
new file mode 100644
index 00000000000..7ac46dca633
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/UpDown.jsx
@@ -0,0 +1,24 @@
+
+
+const UpDown = (props) => {
+  return (
+    <svg
+      width="10"
+      height="7"
+      viewBox="0 0 10 7"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.05264 2L5.05264 5.00649L2.05264 2"
+        stroke="#a3a6b3"
+        stroke-width="1.25"
+        stroke-linecap="square"
+      >
+      </path>
+    </svg>
+  );
+};
+
+export default UpDown;
\ No newline at end of file
diff --git a/src/components/cloud/FunctionalCompare/index.jsx b/src/components/cloud/FunctionalCompare/index.jsx
new file mode 100644
index 00000000000..5b29af1b2f2
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/index.jsx
@@ -0,0 +1,138 @@
+import { useEffect, useState, useRef } from "preact/hooks";
+import Tableplugin from "./Tableplugin.jsx";
+import MobileTable from "./MobileTable.jsx";
+import UpDown from "./UpDown.jsx";
+import {
+  versionDataSource
+} from "../../../consts.ts";
+import "./style.css";
+
+
+const FunctionalCompare = (props) => {
+  const dataVersion = ['免费版', '开发版', '专业版', 'Serverless 版']
+
+  const versionContain = {
+    '免费版': 'free',
+    '开发版': 'develop',
+    '专业版': 'speciality',
+    'Serverless 版': 'serverless',
+  }
+  const [version, setVersion] = useState('免费版');
+  const [isSticky, setIsSticky] = useState(false);
+  const [isShow, setIsShow] = useState(false);
+  const functionalCompareWrapperRef = useRef(null);
+
+  const handleScroll = () => {
+    const wrapper = functionalCompareWrapperRef.current;
+    if (wrapper) {
+      const distanceFromTop = wrapper.getBoundingClientRect().top;
+      setIsSticky(distanceFromTop < 0); // 当距离顶部大于0时展示元素
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+
+    // 移除事件监听器
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <functional-compare
+      ref={functionalCompareWrapperRef}
+      class="functional-compare-wrapper top-[100px] flex flex-col justify-center items-center mt-10"
+    >
+      <div class="collapse bg-base-200 collapse-arrow bg-gray-02">
+        <input type="checkbox" checked />
+        <div class="collapse-title text-2xl font-normal">不同版本功能对比</div>
+        <div class="collapse-content">
+          {versionDataSource.map((item, index) => {
+            return (
+              <Tableplugin dataSource={item.data} title={item.title} isHead={index == 0} />
+            )
+          })}
+        </div>
+      </div>
+      {/* <!-- 吸底 --> */}
+      {isSticky && <table
+        class={`table table-fixed sticky-table-bottom bg-gray-02 mt-6`}
+      >
+        <tr>
+              <th class="col1 border-0" />
+              <th class="col2 border-0" />
+              <th class="col3 overflow-hidden">
+                <p class="mb-6 "> 免费版</p>
+                <div class='text-gray-08 text-xs h-16 leading-8'>免费试用</div>
+              </th>
+              <th class="col4">
+                <p class="mb-6"> 开发版</p>
+                <p class='text-gray-08 text-xs'>目录价：118元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣价：47.2元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：月包7折，年包4折，新老同享</p>
+              </th>
+              <th class="col5">
+                <p class="mb-6"> 专业版</p>
+                <p class='text-gray-08 text-xs'>目录价：498元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣价：209.16元/月起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：首购4.2折</p>
+              </th>
+              <th class="col6">
+                <p class="mb-6"> Serverless 版</p>
+                <p class='text-gray-08 text-xs'>目录价：0.16元/10个连接起</p>
+                <p class='text-gray-08 text-xs'>折扣价：0.15元/10个连接起</p>
+                <p class='text-gray-08 text-xs'>折扣详情：节省计划9.5折，新老同享</p>
+              </th>
+            </tr>
+      </table>}
+
+      {/* <!-- 移动端 --> */}
+      <div class="mobile-content">
+        <div>
+          <label htmlFor="my_modal_6" className="text-center mb-4 inline-block w-full"  >
+            <span class="text-xl">{version}</span>
+            <UpDown class="w-8 h-4" />
+          </label>
+
+          <input type="checkbox" id="my_modal_6" className="modal-toggle" checked={isShow}  onChange={(e) => setIsShow(e.target.checked)} />
+          {
+            isShow && <div className="modal" role="dialog">
+              <div className="modal-box">
+                <div className="mb-6" >
+                  <span class="text-lg font-bold">选择版本</span>
+                  <span
+                    class="absolute right-8  "
+                    onclick={() => { setIsShow(false) }}
+                  >✕</span>
+                </div>
+                <div class="flex flex-col">
+                  {dataVersion.map((it, index) => {
+                    return (
+                      <button
+                        class="btn-select h-12 mb-4 bg-gray-02"
+                        onClick={() => { setVersion(it); setIsShow(false) }}
+                      >{it}</button>
+                    )
+                  })}
+                </div>
+              </div>
+            </div>}
+        </div>
+        <div>
+          {
+            versionDataSource.map((item, index) => {
+              return (
+                <MobileTable
+                  dataSource={item.data}
+                  title={item.title}
+                  version={versionContain[version]}
+                />
+              );
+            })
+          }
+        </div>
+      </div>
+    </functional-compare>
+  );
+};
+
+export default FunctionalCompare;
\ No newline at end of file
diff --git a/src/components/cloud/FunctionalCompare/style.css b/src/components/cloud/FunctionalCompare/style.css
new file mode 100644
index 00000000000..b3a27933fce
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/style.css
@@ -0,0 +1,112 @@
+.collapse,
+.sticky-table-bottom {
+  width: 85.125rem;
+}
+
+th {
+  border-left: 1px dotted theme("colors.gray.03");
+  border-bottom: hidden;
+  text-align: center;
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 32px;
+  color: theme("colors.gray.14");
+}
+
+.col1 {
+  width: 70px;
+  border-right: 0px;
+}
+
+.col2 {
+  width: 200px;
+  border-left: 0px;
+}
+
+.col3,
+.col4,
+.col5,
+.col6 {
+  width: 200px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.sticky-table-bottom {
+  position: sticky;
+  bottom: 0;
+}
+
+.btn-version {
+  width: 196px;
+}
+
+.mobile-content {
+  display: none;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  z-index: 1000;
+  /* 确保在页面上所有元素之上 */
+}
+
+/* 弹框样式 */
+.dialog {
+  background-color: white;
+  padding: 16px;
+  width: 100%;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1001;
+  /* 确保在遮罩层上面 */
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+@media (max-width: 50rem) {
+  .functional-compare-wrapper {
+    padding: 1.5rem;
+  }
+
+  .collapse,
+  .sticky-table-bottom {
+    display: none;
+  }
+
+  .mobile-content {
+    display: inline-block;
+  }
+}
+
+@media (min-width: 50rem) and (max-width: 86rem) {
+
+  .collapse,
+  .sticky-table-bottom {
+    width: 100%;
+  }
+
+  .col2,
+  .col3,
+  .col4,
+  .col5,
+  .col6 {
+    width: 100px;
+  }
+
+  .btn-version {
+    width: fit-content;
+  }
+}
\ No newline at end of file
diff --git a/src/components/cloud/FunctionalCompare/style.tableplugin.css b/src/components/cloud/FunctionalCompare/style.tableplugin.css
new file mode 100644
index 00000000000..5567168544f
--- /dev/null
+++ b/src/components/cloud/FunctionalCompare/style.tableplugin.css
@@ -0,0 +1,51 @@
+table,
+  td {
+    border-collapse: collapse;
+  }
+  td {
+    height: 60px;
+    border-left: 1px dotted theme("colors.gray.03");
+    border-right: 1px dotted theme("colors.gray.03");
+    border-bottom: 1px dotted theme("colors.gray.03");
+  }
+  th {
+    border-left: 1px dotted theme("colors.gray.03");
+    border-bottom: hidden;
+    text-align: center;
+    font-size: 24px;
+    font-weight: normal;
+    line-height: 32px;
+    color: theme("colors.gray.14");
+  }
+  .col1 {
+    width: 70px;
+    border-right: 0px;
+  }
+  .col2 {
+    width: 200px;
+    border-left: 0px;
+  }
+  .col3,
+  .col4,
+  .col5,
+  .col6 {
+    width: 200px;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+  }
+  .btn {
+    width: 196px ;
+  }
+  @media (min-width: 50rem) and (max-width: 86rem) {
+    .col2,
+    .col3,
+    .col4,
+    .col5,
+    .col6 {
+      width: 100px;
+    }
+    .btn {
+      width: fit-content;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/cloud/Tableplugin.astro b/src/components/cloud/Tableplugin.astro
deleted file mode 100644
index 9ce55258dd7..00000000000
--- a/src/components/cloud/Tableplugin.astro
+++ /dev/null
@@ -1,150 +0,0 @@
----
-import Correct from "../icon/Correct.astro";
-import Button from "@components/common/Button.astro";
-const { dataSource, title, isHead = false } = Astro.props;
-const totalRows = dataSource.length;
----
-
-  <div class="overflow-x-auto rounded-2xl mb-6">
-  {
-    isHead && (
-      <table class="table table-fixed sticky-table-top">
-        <tr>
-          <th class="col1 border-0" />
-          <th class="col2 border-0" />
-          <th class="col3 overflow-hidden">
-            <p class="mb-6"> 免费版</p>
-            <Button
-              visibility={false}
-              href=" "
-              size="large"
-              target="_blank"
-              class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-            >
-              免费试用
-            </Button>
-          </th>
-          <th class="col4">
-            <p class="mb-6"> 开发版</p>
-            <Button
-              visibility={false}
-              href=""
-              size="large"
-              target="_blank"
-              class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-            >
-              咨询定价
-            </Button>
-          </th>
-          <th class="col5">
-            <p class="mb-6"> 专业版</p>
-            <Button
-              visibility={false}
-              href=""
-              size="large"
-              target="_blank"
-              class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-            >
-              咨询定价
-            </Button>
-          </th>
-          <th class="col6">
-            <p class="mb-6"> Serverless 版</p>
-            <Button
-              visibility={false}
-              href=""
-              size="large"
-              target="_blank"
-              class="w-[196px] h-[54px] rounded-3xl text-xs font-medium"
-            >
-              咨询定价
-            </Button>
-          </th>
-        </tr>
-      </table>
-    )
-  }
-  <table class="table bg-gray-01 rounded-2xl table-fixed">
-    {
-      dataSource.map((item, index) => {
-        return (
-          <tr>
-            {index === 0 && (
-              <td
-                class="col1 text-xs align-top text-center "
-                rowspan={totalRows}
-              >
-                {title}
-              </td>
-            )}
-            <td class="col2 text-base font-normal color-gray-14">
-              {item.name.title && <p>{item.name.title}</p>}
-              {item.name.des && <p class="text-xs">{item.name.des}</p>}
-            </td>
-            <td class="col3 text-center">
-              {typeof item.free === "boolean" ? <Correct /> : item.free}
-            </td>
-            <td class="col4 text-center">
-              {typeof item.develop === "boolean" ? <Correct /> : item.develop}
-            </td>
-            <td class="col5 text-center">
-              {typeof item.speciality === "boolean" ? (
-                <Correct />
-              ) : (
-                item.speciality
-              )}
-            </td>
-            <td class="col6 text-center">
-              {item.serverless.checked && <Correct />}
-              {item.serverless.des && (
-                <p class="text-xs font-normal color-gray-08">
-                  {item.serverless.des}
-                </p>
-              )}
-            </td>
-          </tr>
-        );
-      })
-    }
-  </table>
-
-  </div>
-
-<style>
-  table,
-  td {
-    border-collapse: collapse;
-  }
-  td {
-    height: 60px;
-    border-left: 1px dotted theme("colors.gray.03");
-    border-right: 1px dotted theme("colors.gray.03");
-    border-bottom: 1px dotted theme("colors.gray.03");
-  }
-  th {
-    border-left: 1px dotted theme("colors.gray.03");
-    border-bottom: hidden;
-    text-align: center;
-    font-size: 24px;
-    font-weight: normal;
-    line-height: 32px;
-    color: theme("colors.gray.14");
-  }
-  .col1 {
-    width: 70px;
-    border-right: 0px;
-  }
-  .col2 {
-    width: 200px;
-    border-left: 0px;
-  }
-  .col3,
-  .col4,
-  .col5,
-  .col6 {
-    width: 200px;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 18px;
-  }
-</style>
diff --git a/src/components/home/HomeIntroduce.astro b/src/components/home/HomeIntroduce.astro
index a0b9a64f243..a4b1ede6643 100644
--- a/src/components/home/HomeIntroduce.astro
+++ b/src/components/home/HomeIntroduce.astro
@@ -10,7 +10,9 @@ const t = useTranslations(Astro);
 const ifzh = isChinese(Astro);
 
 // 服务端构建预先获取star数和fork数作为兜底
-const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("https://api.github.com/repos/alibaba/nacos");
+// const { stargazers_count=0, forks_count=0 }:StarAndForkT = await sendFetch("https://api.github.com/repos/alibaba/nacos");
+const stargazers_count=0;
+const forks_count=0
 ---
 
 <span class="home-introduce-wrapper">
diff --git a/src/consts.ts b/src/consts.ts
index 589461270dd..09a31b7ed5f 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -184,268 +184,480 @@ export const ALGOLIA_CONFIG = {
     indexName: 'nacos',
 }
 
-export const Usability = [
-    {
-        name: {
-            title: '自动化运维',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: false,
-            des: '免运维'
-        },
-    },
-    {
-        name: {
-            title: '域名自动绑定',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '故障节点自动摘除',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '云原生网关、治理深度集成',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '平滑迁移工具',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: 'Eureka 协议兼容',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-];
-
-export const Enable = [
-    {
-        name: {
-            title: 'SLA',
-        },
-        free: '',
-        develop: '无 SLA 保障',
-        speciality: '99.95%',
-        serverless: {
-            checked: false,
-            des: '99.95%'
-        },
-    },
-    {
-        name: {
-            title: '多节点容灾',
-        },
-        free: '',
-        develop: '',
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '多可区容灾',
-        },
-        free: '',
-        develop: '',
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '全局风险自动识别管理',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '注册中心推空保护',
-        },
-        free: '',
-        develop: '',
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '无损上下线能力',
-        },
-        free: '',
-        develop: '',
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '自动扩缩容',
-        },
-        free: '',
-        develop: '',
-        speciality: true,
-        serverless: {
-            checked: true,
-            des: '内置扩容上限，避免恶意攻击导致资损'
-        },
-    },
-];
-
-export const Security = [
-    {
-        name: {
-            title: 'RAM 鉴权体系',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: '无 AK 的 访问模式',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: 'ACL 控制',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: 'TLS 传输加密，变更实时生效',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-    {
-        name: {
-            title: 'KMS 存储加密，自定义轮转， 变更实时生效',
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-        },
-    },
-];
-
-export const Performance = [
-    {
-        name: {
-            title: 'TPS 性能提升',
-        },
-        free: '自行调优',
-        develop: '持平',
-        speciality: '40%',
-        serverless: {
-            checked: false,
-            des: '40%'
-        },
-    },
-    {
-        name: {
-            title: 'QPS 送性能提升',
-        },
-        free: '自行调优',
-        develop: '持平',
-        speciality: '55%',
-        serverless: {
-            checked: false,
-            des: '55%',
-        },
-    },
-];
-
-export const Observability = [
-    {
-        name: {
-            title: '基础监控告警',
-            des: '（注册中心、配置中心、资源用量等）'
-        },
-        free: '',
-        develop: true,
-        speciality: true,
-        serverless: {
-            checked: true,
-            des: '只提供业务监控指标，用于自动弹性伸缩'
-        },
-    },
-    {
-        name: {
-            title: '高级监控',
-            des: '（服务推送轨迹、配置推送轨迹等）'
-        },
-        free: '',
-        develop: '',
-        speciality: true,
-        serverless: {
-            checked: false,
-            des: '免运维'
-        },
-    },
-];
\ No newline at end of file
+export const versionDataSource = [
+    { title: "易用性", data:[
+        {
+            name: {
+                title: '自动化运维',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: false,
+                des: '免运维'
+            },
+        },
+        {
+            name: {
+                title: '域名自动绑定',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '故障节点自动摘除',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: '',
+            },
+        },
+        {
+            name: {
+                title: '云原生网关、治理深度集成',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '平滑迁移工具',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: 'Eureka 协议兼容',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+    ] },
+    { title: "可用性", data: [
+        {
+            name: {
+                title: 'SLA',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: '无 SLA 保障'
+            },
+            speciality: {
+                checked: false,
+                des: '99.95%',
+            },
+            serverless: {
+                checked: false,
+                des: '99.95%'
+            },
+        },
+        {
+            name: {
+                title: '多节点容灾',
+                des: ''
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '多可区容灾',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '全局风险自动识别管理',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '注册中心推空保护',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '无损上下线能力',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '自动扩缩容',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: '内置扩容上限，避免恶意攻击导致资损'
+            },
+        },
+    ] },
+    { title: "安全性", data: [
+        {
+            name: {
+                title: 'RAM 鉴权体系',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: '无 AK 的 访问模式',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: 'ACL 控制',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: 'TLS 传输加密，变更实时生效',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+        {
+            name: {
+                title: 'KMS 存储加密，自定义轮转， 变更实时生效',
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: ''
+            },
+        },
+    ] },
+    { title: "性能", data: [
+        {
+            name: {
+                title: 'TPS 性能提升',
+            },
+            free: {
+                checked: false,
+                des: '自行调优',
+            },
+            develop: {
+                checked: false,
+                des: '持平',
+            },
+            speciality: {
+                checked: false,
+                des: '40%',
+            },
+            serverless: {
+                checked: false,
+                des: '40%'
+            },
+        },
+        {
+            name: {
+                title: 'QPS 送性能提升',
+            },
+            free: {
+                checked: false,
+                des: '自行调优',
+            },
+            develop:  {
+                checked: false,
+                des: '持平',
+            },
+            speciality:{
+                checked: false,
+                des: '55%',
+            },
+            serverless: {
+                checked: false,
+                des: '55%',
+            },
+        },
+    ] },
+    { title: "可观测性", data: [
+        {
+            name: {
+                title: '基础监控告警',
+                des: '（注册中心、配置中心、资源用量等）'
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: true,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: true,
+                des: '只提供业务监控指标，用于自动弹性伸缩'
+            },
+        },
+        {
+            name: {
+                title: '高级监控',
+                des: '（服务推送轨迹、配置推送轨迹等）'
+            },
+            free: {
+                checked: false,
+                des: ''
+            },
+            develop: {
+                checked: false,
+                des: ''
+            },
+            speciality: {
+                checked: true,
+                des: ''
+            },
+            serverless: {
+                checked: false,
+                des: '免运维'
+            },
+        },
+    ] },
+]
diff --git a/src/pages/cloud/index.astro b/src/pages/cloud/index.astro
index 6be3a01ae61..59d744a9f3b 100644
--- a/src/pages/cloud/index.astro
+++ b/src/pages/cloud/index.astro
@@ -2,7 +2,7 @@
 import BaseLayout from '@layouts/BaseLayout.astro';
 import CloudIntroduce from '@components/cloud/CloudIntroduce.astro';
 import CompaniesFeedback from '@components/cloud/CompaniesFeedback.astro';
-import FunctionalCompare from '@/components/cloud/FunctionalCompare.astro';
+import FunctionalCompare from '@/components/cloud/FunctionalCompare/index';
 import CloudFooter from '@components/common/Footer.astro';
 import { useTranslations } from "@i18n/util";
 const t = useTranslations(Astro);
@@ -14,7 +14,7 @@ const t = useTranslations(Astro);
 >
   <CloudIntroduce />
 
-  <FunctionalCompare /> 
+  <FunctionalCompare client:load/> 
   <CompaniesFeedback />
 
   <CloudFooter />
diff --git a/src/pages/en/cloud/index.astro b/src/pages/en/cloud/index.astro
index db571e64d3e..a345dbaf8a1 100644
--- a/src/pages/en/cloud/index.astro
+++ b/src/pages/en/cloud/index.astro
@@ -1,7 +1,7 @@
 ---
 import BaseLayout from '@layouts/BaseLayout.astro';
 import CloudIntroduce from '@components/cloud/CloudIntroduce.astro';
-import FunctionalCompare from '@/components/cloud/FunctionalCompare.astro';
+import FunctionalCompare from '@/components/cloud/FunctionalCompare/index';
 import CompaniesFeedback from '@components/cloud/CompaniesFeedback.astro';
 import CloudFooter from '@components/common/Footer.astro';
 import { useTranslations } from "@i18n/util";
@@ -15,7 +15,7 @@ const t = useTranslations(Astro);
   <CloudIntroduce />
 
   <cloud-body>
-    <FunctionalCompare /> 
+    <FunctionalCompare client:load/> 
     <CompaniesFeedback />
   </cloud-body>