diff --git a/src/app/notes/[id]/pageExtra.tsx b/src/app/notes/[id]/pageExtra.tsx index 83dab4ac7f..3a6f3c54bd 100644 --- a/src/app/notes/[id]/pageExtra.tsx +++ b/src/app/notes/[id]/pageExtra.tsx @@ -3,7 +3,6 @@ 'use client' import { useEffect } from 'react' -import Balancer from 'react-wrap-balancer' import clsx from 'clsx' import dayjs from 'dayjs' import type { Image } from '@mx-space/api-client' @@ -25,9 +24,7 @@ export const NoteTitle = () => { const title = useCurrentNoteDataSelector((data) => data?.data.title) if (!title) return null return ( -

- {title} -

+

{title}

) } diff --git a/src/components/ui/image/ZoomedImage.tsx b/src/components/ui/image/ZoomedImage.tsx index b9dd88ce74..4498840cfe 100644 --- a/src/components/ui/image/ZoomedImage.tsx +++ b/src/components/ui/image/ZoomedImage.tsx @@ -98,13 +98,24 @@ export const ImageLazy: Component = ({ }, [zoom, zoomer_, imageLoadStatus]) return ( - -
- +
+ + {imageLoadStatus !== ImageLoadStatus.Loaded && placeholder} + {imageLoadStatus === ImageLoadStatus.Error && ( +
+ + 图片加载失败 + + + + 查看原图 + +
+ )} = ({ } }} /> -
- - {!!figcaption && ( -
- - {figcaption} -
- )} -
- + +
+ + {!!figcaption && ( +
+ + {figcaption} +
+ )} +
) } diff --git a/src/components/widgets/peek/PeekLink.tsx b/src/components/widgets/peek/PeekLink.tsx index eb8f8662fb..41fa1d4b44 100644 --- a/src/components/widgets/peek/PeekLink.tsx +++ b/src/components/widgets/peek/PeekLink.tsx @@ -15,6 +15,12 @@ export const usePeek = () => { return useCallback( (href: string) => { if (isMobile) return + const basePresentProps = { + clickOutsideToDismiss: true, + title: 'Preview', + modalClassName: + 'relative mx-auto mt-[10vh] scrollbar-none max-w-full overflow-auto px-2 lg:max-w-[65rem] lg:p-0', + } if (href.startsWith('/notes/')) { requestAnimationFrame(async () => { @@ -22,10 +28,7 @@ export const usePeek = () => { (module) => module.NotePreview, ) present({ - clickOutsideToDismiss: true, - title: 'Preview', - modalClassName: 'flex justify-center', - modalContainerClassName: 'flex justify-center', + ...basePresentProps, CustomModalComponent: () => ( @@ -45,10 +48,7 @@ export const usePeek = () => { const slug = splitpath.pop()! const category = splitpath.pop()! present({ - clickOutsideToDismiss: true, - title: 'Preview', - modalClassName: 'flex justify-center', - modalContainerClassName: 'flex justify-center', + ...basePresentProps, CustomModalComponent: () => ( diff --git a/src/components/widgets/peek/PeekModal.tsx b/src/components/widgets/peek/PeekModal.tsx index 8b896e324f..1dee4aab62 100644 --- a/src/components/widgets/peek/PeekModal.tsx +++ b/src/components/widgets/peek/PeekModal.tsx @@ -10,25 +10,44 @@ export const PeekModal = ( to: string }>, ) => { - const { dismissAll } = useModalStack() + const { dismissAll, dismissTop } = useModalStack() + return ( - - {props.children} +
+ + {props.children} + - - - Go to this link - - + + + Go to this link + + + + +
) } diff --git a/src/styles/tailwindcss.css b/src/styles/tailwindcss.css index d47ef9049b..3b6e3bcdf0 100644 --- a/src/styles/tailwindcss.css +++ b/src/styles/tailwindcss.css @@ -61,3 +61,10 @@ input, textarea { font-size: 16px; } + +@layer components { + .scrollbar-none::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; + } +}