From 26877ffd5264088458d66ca4c387edfa88461766 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Sat, 16 Sep 2023 08:57:08 +0800 Subject: [PATCH] feat: modify 404 page (#4383) --- apps/core/src/pages/404.tsx | 71 +++++----- .../src/components/not-found-page/index.tsx | 1 + .../not-found-page/not-found-page.tsx | 52 ++++++++ .../not-found-page/not-found-pattern.tsx | 121 ++++++++++++++++++ .../components/not-found-page/styles.css.ts | 18 +++ packages/i18n/src/resources/en.json | 5 +- 6 files changed, 227 insertions(+), 41 deletions(-) create mode 100644 packages/component/src/components/not-found-page/index.tsx create mode 100644 packages/component/src/components/not-found-page/not-found-page.tsx create mode 100644 packages/component/src/components/not-found-page/not-found-pattern.tsx create mode 100644 packages/component/src/components/not-found-page/styles.css.ts diff --git a/apps/core/src/pages/404.tsx b/apps/core/src/pages/404.tsx index 9e23a54581..43dcfda28d 100644 --- a/apps/core/src/pages/404.tsx +++ b/apps/core/src/pages/404.tsx @@ -1,46 +1,37 @@ -import { displayFlex, styled } from '@affine/component'; -import { useAFFiNEI18N } from '@affine/i18n/hooks'; -import { Button } from '@toeverything/components/button'; +import { NotFoundPage } from '@affine/component/not-found-page'; +// eslint-disable-next-line @typescript-eslint/no-restricted-imports +import { useSession } from 'next-auth/react'; import type { ReactElement } from 'react'; import { useCallback } from 'react'; -import { useNavigateHelper } from '../hooks/use-navigate-helper'; - -export const StyledContainer = styled('div')(() => { - return { - ...displayFlex('center', 'center'), - flexDirection: 'column', - height: '100vh', - - img: { - width: '360px', - height: '270px', - }, - p: { - fontSize: '22px', - fontWeight: 600, - margin: '24px 0', - }, - }; -}); - -export const NotFoundPage = () => { - const t = useAFFiNEI18N(); - const { jumpToIndex } = useNavigateHelper(); - const handleBackButtonClick = useCallback(() => jumpToIndex(), [jumpToIndex]); - - return ( - - 404 - -

{t['com.affine.notFoundPage.title']()}

- - - ); -}; +import { RouteLogic, useNavigateHelper } from '../hooks/use-navigate-helper'; +import { signOutCloud } from '../utils/cloud-utils'; export const Component = (): ReactElement => { - return ; + const { data: session } = useSession(); + const { jumpToIndex } = useNavigateHelper(); + const handleBackButtonClick = useCallback( + () => jumpToIndex(RouteLogic.REPLACE), + [jumpToIndex] + ); + const handleSignOut = useCallback(async () => { + await signOutCloud({ + callbackUrl: '/signIn', + }); + }, []); + return ( + + ); }; diff --git a/packages/component/src/components/not-found-page/index.tsx b/packages/component/src/components/not-found-page/index.tsx new file mode 100644 index 0000000000..f8810ffd23 --- /dev/null +++ b/packages/component/src/components/not-found-page/index.tsx @@ -0,0 +1 @@ +export * from './not-found-page'; diff --git a/packages/component/src/components/not-found-page/not-found-page.tsx b/packages/component/src/components/not-found-page/not-found-page.tsx new file mode 100644 index 0000000000..f31dcdc86a --- /dev/null +++ b/packages/component/src/components/not-found-page/not-found-page.tsx @@ -0,0 +1,52 @@ +import { useAFFiNEI18N } from '@affine/i18n/hooks'; +import { SignOutIcon } from '@blocksuite/icons'; +import { Avatar } from '@toeverything/components/avatar'; +import { Button, IconButton } from '@toeverything/components/button'; +import { Tooltip } from '@toeverything/components/tooltip'; + +import { NotFoundPattern } from './not-found-pattern'; +import { notFoundPageContainer, wrapper } from './styles.css'; + +export interface NotFoundPageProps { + user: { + name: string; + email: string; + avatar: string; + } | null; + onBack: () => void; + onSignOut: () => void; +} +export const NotFoundPage = ({ + user, + onBack, + onSignOut, +}: NotFoundPageProps) => { + const t = useAFFiNEI18N(); + + return ( +
+
+
+ +
+
+ +
+

{t['404.hint']()}

+ {user ? ( +
+ + {user.email} + + + + + +
+ ) : null} +
+
+ ); +}; diff --git a/packages/component/src/components/not-found-page/not-found-pattern.tsx b/packages/component/src/components/not-found-page/not-found-pattern.tsx new file mode 100644 index 0000000000..c0abf8df17 --- /dev/null +++ b/packages/component/src/components/not-found-page/not-found-pattern.tsx @@ -0,0 +1,121 @@ +export const NotFoundPattern = () => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/packages/component/src/components/not-found-page/styles.css.ts b/packages/component/src/components/not-found-page/styles.css.ts new file mode 100644 index 0000000000..bc2a0b76db --- /dev/null +++ b/packages/component/src/components/not-found-page/styles.css.ts @@ -0,0 +1,18 @@ +import { style } from '@vanilla-extract/css'; + +export const notFoundPageContainer = style({ + fontSize: 'var(--affine-font-base)', + color: 'var(--affine-text-primary-color)', + height: '100vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + width: '100vw', +}); + +export const wrapper = style({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + margin: '24px auto 0', +}); diff --git a/packages/i18n/src/resources/en.json b/packages/i18n/src/resources/en.json index f11eb85b12..5008835ee4 100644 --- a/packages/i18n/src/resources/en.json +++ b/packages/i18n/src/resources/en.json @@ -574,5 +574,8 @@ "Click to replace photo": "Click to replace photo", "Remove photo": "Remove photo", "Removed successfully": "Removed successfully", - "Successfully enabled AFFiNE Cloud": "Successfully enabled AFFiNE Cloud" + "Successfully enabled AFFiNE Cloud": "Successfully enabled AFFiNE Cloud", + "404.hint": "Sorry, you do not have access or this content does not exist...", + "404.back": "Back to My Content", + "404.signOut": "Sign in to another account" }