Sfoglia il codice sorgente

feat: 屏蔽下载按钮

F-DEV 2 ore fa
parent
commit
96b85cc921

BIN
public/favicon.ico


+ 1 - 1
src/components/Topbar/index.tsx

@@ -186,7 +186,7 @@ const Topbar = memo(() => {
                                         closeMobileMenu();
                                         openLoginDialog();
                                     }}
-                                    className="text-base leading-[1.5] font-normal text-[#999] hover:text-white transition-colors border-none bg-transparent whitespace-nowrap"
+                                    className="text-base leading-[1.5] font-normal text-[#999] hover:text-white transition-colors border-none bg-transparent whitespace-nowrap hidden"
                                 >
                                     {t('components.topbar.login')}
                                 </button>

+ 39 - 0
src/hooks/useComingSoonDialog.tsx

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { dialogModel } from '@/models/dialogModel';
+
+export interface ComingSoonDialogOptions {
+    /** 弹窗标题的 i18n key,默认 common.comingSoon.dialogTitle */
+    titleKey?: string;
+    /** 提示文案的 i18n key,默认 common.comingSoon.dialogPrompt */
+    promptKey?: string;
+}
+
+export function useComingSoonDialog() {
+    const { t } = useTranslation();
+    const { openDialog, closeDialog } = dialogModel.useModel();
+
+    return useCallback(
+        (options?: ComingSoonDialogOptions) => {
+            const titleKey = options?.titleKey ?? 'common.comingSoon.dialogTitle';
+            const promptKey = options?.promptKey ?? 'common.comingSoon.dialogPrompt';
+
+            const id = openDialog({
+                title: t(titleKey),
+                content: <p className="text-white/80 text-sm">{t(promptKey)}</p>,
+                buttons: [
+                    {
+                        label: t('common.comingSoon.ok'),
+                        variant: 'primary',
+                        onClick: () => closeDialog(id),
+                    },
+                ],
+                maskClosable: true,
+                closeable: true,
+            });
+        },
+        [t, openDialog, closeDialog]
+    );
+}

+ 5 - 0
src/locales/en-US/common.ts

@@ -4,4 +4,9 @@ export default {
         dialogPrompt:
             'No account? <linkText>Go to app</linkText> to register, or <downloadLink>download app</downloadLink>',
     },
+    comingSoon: {
+        dialogTitle: 'Coming Soon',
+        dialogPrompt: 'This platform is coming soon. Stay tuned!',
+        ok: 'Got it',
+    },
 };

+ 5 - 0
src/locales/fa-IR/common.ts

@@ -4,4 +4,9 @@ export default {
         dialogPrompt:
             'حساب ندارید؟ <linkText>به اپ بروید</linkText> برای ثبت‌نام، یا <downloadLink>دانلود اپ</downloadLink>',
     },
+    comingSoon: {
+        dialogTitle: 'به‌زودی',
+        dialogPrompt: 'این پلتفرم به‌زودی در دسترس قرار می‌گیرد. منتظر باشید!',
+        ok: 'متوجه شدم',
+    },
 };

+ 5 - 0
src/locales/zh-CN/common.ts

@@ -4,4 +4,9 @@ export default {
         dialogPrompt:
             '没有账号?<linkText>前往 APP</linkText> 注册,或 <downloadLink>下载 APP</downloadLink>',
     },
+    comingSoon: {
+        dialogTitle: '即将上线',
+        dialogPrompt: '该平台即将上线,敬请期待!',
+        ok: '我知道了',
+    },
 };

+ 20 - 4
src/pages/home/components/ChoosePlatform.tsx

@@ -6,7 +6,8 @@ import btnGooglePlay from '@/assets/images/home/btn-google-play.svg';
 import btnMacos from '@/assets/images/home/btn-macos.svg';
 import btnWindows from '@/assets/images/home/btn-windows.svg';
 import devicesMockup from '@/assets/images/home/devices-mockup.png';
-import { useAppUrls, type AppUrls } from '@/hooks/useAppUrls';
+import { /*useAppUrls,*/ type AppUrls } from '@/hooks/useAppUrls';
+import { useComingSoonDialog } from '@/hooks/useComingSoonDialog';
 
 import Wrapper from './Wrapper';
 
@@ -26,7 +27,8 @@ const STORE_BUTTONS: PlatformButton[] = [
 
 export function ChoosePlatform() {
     const { t } = useTranslation();
-    const urls = useAppUrls();
+    const openComingSoonDialog = useComingSoonDialog();
+    // const urls = useAppUrls();
 
     return (
         <section className="w-full py-8 sm:py-10 lg:py-16">
@@ -42,7 +44,21 @@ export function ChoosePlatform() {
                     </div>
 
                     <div className="grid grid-cols-2 gap-6 px-4 w-full sm:flex sm:flex-wrap sm:items-center sm:justify-center">
-                        {STORE_BUTTONS.map(({ image, alt, urlKey }) => {
+                        {STORE_BUTTONS.map(({ image, alt }) => (
+                            <button
+                                key={alt}
+                                type="button"
+                                onClick={() => openComingSoonDialog()}
+                                className="h-[50px] p-0 bg-transparent border-none cursor-pointer outline-none focus:outline-none [-webkit-tap-highlight-color:transparent]"
+                            >
+                                <img
+                                    src={image}
+                                    alt={alt}
+                                    className="h-full w-full object-contain sm:w-auto"
+                                />
+                            </button>
+                        ))}
+                        {/* {STORE_BUTTONS.map(({ image, alt, urlKey }) => {
                             const url = urls[urlKey];
                             if (!url) return null;
                             return (
@@ -60,7 +76,7 @@ export function ChoosePlatform() {
                                     />
                                 </a>
                             );
-                        })}
+                        })} */}
                     </div>
                 </div>
 

+ 2 - 0
src/router/routes.tsx

@@ -37,11 +37,13 @@ const routes: AppRouteObject[] = [
                 name: 'privacyPolicy',
                 path: '/privacy',
                 element: <PrivacyPolicy />,
+                hideInMenu: true,
             },
             {
                 name: 'termsOfService',
                 path: '/terms-of-service',
                 element: <TermsOfService />,
+                hideInMenu: true,
             },
             // {
             //     name: 'featureDemo',