feat(frontend): 允许绕过页面宽度限制

kengwang · Oct 9, 2024 · 0601cc7 · 0601cc7
1 parent 76feddd
commit 0601cc7
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx b/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx
@@ -1,5 +1,5 @@
-import { Stack, Text, Title } from '@mantine/core'
-import { useViewportSize } from '@mantine/hooks'
+import { Button, Stack, Text, Title } from '@mantine/core'
+import { useLocalStorage, useViewportSize } from '@mantine/hooks'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import IconWiderScreenRequired from '@Components/icon/WiderScreenRequiredIcon'
@@ -15,12 +15,20 @@ const WithWiderScreen: FC<WithWiderScreenProps> = ({ children, minWidth = 1080 }
   const { t } = useTranslation()
 
   const tooSmall = minWidth > 0 && view.width > 0 && view.width < minWidth
+  const [forceDisplay, setForceDisplay] = useLocalStorage({
+    key: 'wider-screen-force-display',
+    defaultValue: 0,
+    getInitialValueInEffect: false,
+  })
 
-  return tooSmall ? (
-    <Stack gap={0} className={classes.board}>
+  return tooSmall && forceDisplay < Date.now() ? (
+    <Stack className={classes.board}>
       <IconWiderScreenRequired />
       <Title order={1}>{t('common.content.wider.title')}</Title>
       <Text fw="bold">{t('common.content.wider.text')}</Text>
+      <Button variant='light' size='xs' onClick={() => setForceDisplay(Date.now() + 10 * 60 * 1000)}>
+        {t('common.content.wider.button')}
+      </Button>
     </Stack>
   ) : (
     <>{children}</>

diff --git a/src/GZCTF/ClientApp/src/components/icon/WiderScreenRequiredIcon.tsx b/src/GZCTF/ClientApp/src/components/icon/WiderScreenRequiredIcon.tsx
@@ -7,8 +7,8 @@ const IconWiderScreenRequired: FC = () => {
       id="IconWiderScreenRequired"
       xmlns="http://www.w3.org/2000/svg"
       width="320"
-      height="320"
-      viewBox="0 0 6400 6400"
+      height="240"
+      viewBox="0 800 6400 4800"
     >
       <path
         id="arrowRodL2"

diff --git a/src/GZCTF/ClientApp/src/locales/en_US/common.json b/src/GZCTF/ClientApp/src/locales/en_US/common.json
@@ -54,6 +54,7 @@
     "no_data": "No data",
     "report_error": "Please report this error to the administrator if you think this is a bug",
     "wider": {
+      "button": "Still show (may cause unexpected effects)",
       "text": "Try to use a wider device",
       "title": "Not wide enough"
     }

diff --git a/src/GZCTF/ClientApp/src/locales/ja_JP/common.json b/src/GZCTF/ClientApp/src/locales/ja_JP/common.json
@@ -54,6 +54,7 @@
     "no_data": "データがありません",
     "report_error": "エラーが発生しました。管理者に連絡してください",
     "wider": {
+      "button": "それでも表示する（不正常な効果が生じる可能性があります）",
       "text": "このページにアクセスするには、より広いデバイスを使用してください",
       "title": "ページの幅が足りません"
     }

diff --git a/src/GZCTF/ClientApp/src/locales/zh_CN/common.json b/src/GZCTF/ClientApp/src/locales/zh_CN/common.json
@@ -54,6 +54,7 @@
     "no_data": "没有数据",
     "report_error": "如果你认为这是一个异常错误，请联系管理员",
     "wider": {
+      "button": "仍要显示（可能导致错位等异常）",
       "text": "请使用更宽的设备浏览本页面",
       "title": "页面宽度不足"
     }