refactor(auth): migrate user center logout and refactor callback logic

- Migrate from static `Modal.confirm` to `App.useModal` in UserCenter for better context support.
- Refactor Logto Callback page:
  - Remove unused `useEffect` dependency on `isAuthenticated`.
  - Inline redirect logic directly into the `onSuccess` callback of `useHandleSignInCallback`.
  - Preserve existing redirect flow logic while simplifying the component structure.

src/page/Logto/Callback.tsx

@@ -1,28 +1,20 @@
 import { useHandleSignInCallback } from '@logto/react';
 import { Spin } from 'antd';
-import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
-import { useLocation, useNavigate } from 'react-router';
 
 export const CallbackPage = () => {
+  const navigate = useNavigate();
   const { isLoading, isAuthenticated, error } = useHandleSignInCallback(() => {
     // Navigate to root path when finished
-  });
-
-  const navigate = useNavigate();
-  const location = useLocation();
-  useEffect(() => {
-    if (isAuthenticated) {
-      console.debug({ isLoading, isAuthenticated, error });
     const redirect = sessionStorage.getItem('redirect');
     if (redirect) {
-        navigate(redirect);
       sessionStorage.removeItem('redirect');
+      navigate(redirect);
     } else {
       navigate('/user-center');
     }
-    }
+  });
-  }, [isAuthenticated]);
+
-  // When it's working in progress
   if (isLoading) {
     return (
       <Spin spinning>

src/page/UserCenter.tsx

@@ -1,6 +1,6 @@
 import { EditOutlined, FileTextOutlined, HomeOutlined, KeyOutlined, LockOutlined, LoginOutlined, LogoutOutlined, MailOutlined, MobileOutlined } from "@ant-design/icons";
 import { useLogto, type IdTokenClaims } from "@logto/react";
-import { Avatar, Button, Divider, Flex, Modal, Typography } from "antd";
+import { App, Avatar, Button, Divider, Flex, Modal, Typography } from "antd";
 import { useCallback, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 
@@ -39,6 +39,7 @@ export const UserCenter = () => {
   const handleModifyInfo = useCallback((url: string) => {
     window.location.href = `${logto}${url}?redirect=${redirect}`;
   }, []);
+  const [modal, contextHolder] = Modal.useModal();
   if (!isAuthenticated) {
     return (
       <div className="app">
@@ -54,8 +55,9 @@ export const UserCenter = () => {
       </div>
     );
   }
-  console.debug(user);
   return (
+    <>
+      {contextHolder}
       <Flex className="app" gap={12} vertical align="center" style={{ maxWidth: 600 }}>
         <Avatar size={128} src={user?.picture ?? user?.name} />
         <Flex>
@@ -75,11 +77,11 @@ export const UserCenter = () => {
           block
           danger
           icon={<LoginOutlined />}
-        onClick={() => Modal.confirm({
+          onClick={() => modal.confirm({
+            maskClosable: true,
             title: '确认登出？',
-          cancelText: '回到首页',
+            cancelText: '保持登录',
             cancelButtonProps: { icon: <HomeOutlined /> },
-          onCancel: () => navigate('/'),
             okText: '确认登出',
             okButtonProps: {
               icon: <LogoutOutlined />,
@@ -91,5 +93,6 @@ export const UserCenter = () => {
           登出
         </Button>
       </Flex>
+    </>
   );
 }