feat:docs add recharge event (#4784)

docs/website/docusaurus.config.js

@@ -60,34 +60,34 @@ const config = {
 
   themeConfig: { // @type {import('@docusaurus/preset-classic').ThemeConfig}
     metadata: [{ name: 'title', content: 'Sealos by 环界云' }],
-    ...(!isChinese && {
-      announcementBar: {
-        id: 'sealos_tip',
-        content: `
-        <div class="sealos-banner-box">
-          <div  >如果您是国内用户，请直接访问 👉 </div>
-          <div class="sealos-banner-btn" onclick="window.open('https://sealos.run', '_blank');">
-            国内官网
-          </div>
-            <svg 
-            onclick="handleBannerClose()"
-            width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g clip-path="url(#clip0_1145_366)">
-              <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z" fill="white" fill-opacity="0.16"/>
-              <path d="M12 21.75C6.61507 21.75 2.25 17.3849 2.25 12C2.25 6.61507 6.61507 2.25 12 2.25C17.3849 2.25 21.75 6.61507 21.75 12C21.75 17.3849 17.3849 21.75 12 21.75Z" stroke="white" stroke-opacity="0.1" stroke-width="0.5"/>
-              <path d="M9.17184 7.75696L11.9998 10.586L14.8278 7.75696L16.2428 9.17196L13.4138 12L16.2428 14.828L14.8278 16.243L11.9998 13.414L9.17184 16.243L7.75684 14.828L10.5858 12L7.75684 9.17196L9.17184 7.75696Z" fill="white"/>
-              </g>
-              <defs>
-              <clipPath id="clip0_1145_366">
-              <rect width="24" height="24" fill="white"/>
-              </clipPath>
-              </defs>
-            </svg>
-        </div>
-      `,
-        isCloseable: true,
-      }
-    }),
+    // ...(!isChinese && {
+    //   announcementBar: {
+    //     id: 'sealos_tip',
+    //     content: `
+    //     <div class="sealos-banner-box">
+    //       <div  >如果您是国内用户，请直接访问 👉 </div>
+    //       <div class="sealos-banner-btn" onclick="window.open('https://sealos.run', '_blank');">
+    //         国内官网
+    //       </div>
+    //         <svg 
+    //         onclick="handleBannerClose()"
+    //         width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    //           <g clip-path="url(#clip0_1145_366)">
+    //           <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22Z" fill="white" fill-opacity="0.16"/>
+    //           <path d="M12 21.75C6.61507 21.75 2.25 17.3849 2.25 12C2.25 6.61507 6.61507 2.25 12 2.25C17.3849 2.25 21.75 6.61507 21.75 12C21.75 17.3849 17.3849 21.75 12 21.75Z" stroke="white" stroke-opacity="0.1" stroke-width="0.5"/>
+    //           <path d="M9.17184 7.75696L11.9998 10.586L14.8278 7.75696L16.2428 9.17196L13.4138 12L16.2428 14.828L14.8278 16.243L11.9998 13.414L9.17184 16.243L7.75684 14.828L10.5858 12L7.75684 9.17196L9.17184 7.75696Z" fill="white"/>
+    //           </g>
+    //           <defs>
+    //           <clipPath id="clip0_1145_366">
+    //           <rect width="24" height="24" fill="white"/>
+    //           </clipPath>
+    //           </defs>
+    //         </svg>
+    //     </div>
+    //   `,
+    //     isCloseable: true,
+    //   }
+    // }),
     algolia: {
       // Algolia 提供的应用 ID
       appId: "SLTSB7B9Y0",

docs/website/src/components/SaleBanner/index.scss

@@ -71,7 +71,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0 117px;
+  padding: 0 110px;
 
   color: #fff;
   font-style: normal;

docs/website/src/components/SaleBanner/index.tsx

@@ -3,17 +3,21 @@ import DrawIcon from '@site/static/icons/draw.svg';
 import LogoIcon from '@site/static/icons/sealos.svg';
 import React, { useEffect, useState } from 'react';
 import './index.scss';
+import useWindow from '@site/src/hooks/useWindow';
 
 export default function SaleBanner() {
   const [isBannerVisible, setIsBannerVisible] = useState(false);
-  const [doMain, setDoMain] = useState('cloud.sealos.io');
+  const { cloudUrl } = useWindow();
 
   const closeBanner = () => {
     setIsBannerVisible(false);
   };
 
   const goDetailFeishu = () => {
-    window.open(`https://forum.laf.run/d/1207`, '_blank');
+    window.open(
+      `https://fael3z0zfze.feishu.cn/wiki/SzKowEuQji5coRkm5o8cm8oJn3L?from=from_copylink`,
+      '_blank'
+    );
   };
 
   useEffect(() => {
@@ -32,7 +36,7 @@ export default function SaleBanner() {
   return (
     <>
       <div className="sealos-banner-box">
-        <Translate>🎉 Sealos 开春福利大放送！充值优惠限时开启，多充多送还有精美周边！</Translate>
+        <Translate>🎉Sealos 6.18 福利大放送！充值优惠限时开启，多充多送还有精美周边！</Translate>
         <div className="sealos-banner-btn" onClick={goDetailFeishu}>
           活动详情
           <DrawIcon />
@@ -46,16 +50,13 @@ export default function SaleBanner() {
             <span className="txt">Sealos</span>
           </div>
           <div className="sealos-banner-body">
-            <div className="banner-title">🎉 Sealos 开春福利大放送！</div>
+            <div className="banner-title">🎉Sealos 6.18 福利大放送！</div>
             <div className="banner-subtitle">充值优惠限时开启</div>
             <div className="banner-subtitle">多充多送还有精美周边！</div>
             <div
               className="btn"
               onClick={() => {
-                window.open(
-                  `https://${doMain}/?openapp=system-costcenter?openRecharge=true`,
-                  '_blank'
-                );
+                window.open(`${cloudUrl}/?openapp=system-costcenter?openRecharge=true`, '_blank');
                 closeBanner();
               }}
             >

docs/website/src/hooks/useWindow.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 
-export default function () {
+export default function useWindow() {
   const isBrowser = useIsBrowser();
   const [screenWidth, setScreenWidth] = useState(isBrowser ? document.body.clientWidth : 1440);
   const [currentLanguage, setCurrentLanguage] = useState(

docs/website/src/pages/components/Header/index.phone.scss

@@ -7,6 +7,7 @@
     justify-content: center;
     align-items: center;
     padding: 0;
+    padding-top: 48px;
 
     nav {
       padding: 28px 16px;

docs/website/src/pages/components/Header/index.scss

@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  padding-top: 48px;
 
   .header-img {
     width: 100%;

docs/website/src/pages/index.tsx

@@ -12,6 +12,7 @@ import Introduce from './components/Introduce';
 import HomeUserBy from './components/UserBy';
 import './index.scss';
 import Head from '@docusaurus/Head';
+import SaleBanner from '../components/SaleBanner';
 
 const Home = () => {
   const { screenWidth, currentLanguage } = useWindow();
@@ -71,6 +72,7 @@ const Home = () => {
       </Helmet>
       <Layout>
         <div className="home">
+          <SaleBanner />
           <HomeHeader isPc={isPc} />
           <Capability isPc={isPc} />
           <Introduce isPc={isPc} />