feat: backstage tools confirmation

Co-Authored-By: Snowball_233 <[email protected]>
TeamVastsea · Sep 9, 2024 · 2ef8f0f · 2ef8f0f
1 parent 576d68b
commit 2ef8f0f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/app/(root)/backstage/components/BadgeCard.tsx b/app/(root)/backstage/components/BadgeCard.tsx
@@ -5,7 +5,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconSettings2 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import SurveyBasicContentsEditor from './SurveyBasicContentsEditor'; // Correct import
+import SurveyBasicContentsEditor from './SurveyBasicContentsEditor';
 import { SurveyInfo } from '@/api/SurveyApi';
 
 export default function BadgeCard({ survey, showBadge, routeAdmin }: BadgeCardProps) {
@@ -74,7 +74,7 @@ export default function BadgeCard({ survey, showBadge, routeAdmin }: BadgeCardPr
 
             <Modal opened={opened} onClose={close} title={`编辑 ${survey.title} 基本信息`}>
                 <SurveyBasicContentsEditor
-                  survey={editingSurvey} // Pass only `survey`
+                  survey={editingSurvey}
                 />
             </Modal>
         </>

diff --git a/app/(root)/backstage/components/Tools.tsx b/app/(root)/backstage/components/Tools.tsx
@@ -1,21 +1,42 @@
-import { Box, Button, Center, Collapse, Group, Menu, Space, Stack, Tooltip } from '@mantine/core';
-import { IconCategory2, IconHome, IconLogout } from '@tabler/icons-react';
+import { Box, Button, Center, Collapse, Group, Menu, Modal, Space, Stack, Tooltip, Text } from '@mantine/core';
+import { IconCategory2, IconHome, IconSettings, IconLogout } from '@tabler/icons-react';
 import { useDisclosure } from '@mantine/hooks';
+import { useState } from 'react';
 import { Cookie } from '@/components/cookie';
 
 export default function Tools() {
     const [opened, { toggle }] = useDisclosure(false);
+    const [openedModal, { open, close }] = useDisclosure(false);
+    const [actionType, setActionType] = useState<'home' | 'backstage' | null>(null);
 
     function goHome() {
         window.location.href = '/';
     }
 
+    function goBackstage() {
+        window.location.href = '/backstage';
+    }
+
     function logOut() {
         Cookie.clearAllCookies();
         sessionStorage.setItem('logOutAndRedirect', 'true');
         window.location.reload();
     }
 
+    const openConfirmationModal = (action: 'home' | 'backstage') => {
+        setActionType(action);
+        open();
+    };
+
+    const handleConfirm = () => {
+        if (actionType === 'home') {
+            goHome();
+        } else if (actionType === 'backstage') {
+            goBackstage();
+        }
+        close();
+    };
+
     return (
         <Box
           maw={50}
@@ -26,13 +47,34 @@ export default function Tools() {
                 right: '40px',
             }}
         >
+            <Modal opened={openedModal} onClose={close} title="确认操作">
+                <Text>您确定要执行此操作吗？如果您正在编辑或批改问卷，建议先保存您的进度，以免丢失重要的修改内容。确保一切都已妥当后再继续操作哦！</Text>
+                <Group position="center" mt="md" w="100%">
+                    <Button color="blue" onClick={handleConfirm}>是</Button>
+                    <Button color="red" onClick={close}>否</Button>
+                </Group>
+            </Modal>
+
             <Collapse in={opened} style={{ transformOrigin: 'bottom center' }}>
                 <Menu shadow="md" withArrow position="top">
                     <Stack>
                         <Menu.Item>
                             <Center>
                                 <Tooltip label="回到首页" zIndex={1200}>
-                                    <IconHome onClick={goHome} style={{ cursor: 'pointer' }} />
+                                    <IconHome
+                                      onClick={() => openConfirmationModal('home')}
+                                      style={{ cursor: 'pointer' }}
+                                    />
+                                </Tooltip>
+                            </Center>
+                        </Menu.Item>
+                        <Menu.Item>
+                            <Center>
+                                <Tooltip label="回到后台首页" zIndex={1200}>
+                                    <IconSettings
+                                      onClick={() => openConfirmationModal('backstage')}
+                                      style={{ cursor: 'pointer' }}
+                                    />
                                 </Tooltip>
                             </Center>
                         </Menu.Item>