From 32edc0b4eb637977a3f574b087c22d372b301b73 Mon Sep 17 00:00:00 2001 From: Innei Date: Thu, 22 Jun 2023 16:46:24 +0800 Subject: [PATCH] fix: css style Signed-off-by: Innei --- src/app/notes/[id]/layout.tsx | 19 +++---- .../[category]/[slug]/layout.tsx | 18 +++++-- .../(post-detail)/[category]/[slug]/page.tsx | 14 ++++-- src/components/common/QueryHydration.tsx | 19 +++++++ .../layout/header/internal/hooks.ts | 13 ++++- .../CodeHighlighter.module.css | 2 +- src/components/ui/dlalog/index.ts | 1 + src/components/ui/input/index.ts | 1 + .../ui/markdown/markdown.module.css | 8 ++- .../ui/markdown/renderers/collapse.tsx | 2 +- .../widgets/note/NoteFooterNavigation.tsx | 8 +-- src/components/widgets/post/PostItem.tsx | 49 ++++++++++--------- src/components/widgets/post/PostPinIcon.tsx | 2 +- src/components/widgets/xlog/XLogInfo.tsx | 4 +- .../root/page-scroll-info-provider.tsx | 17 +++++-- 15 files changed, 117 insertions(+), 60 deletions(-) create mode 100644 src/components/common/QueryHydration.tsx create mode 100644 src/components/ui/dlalog/index.ts create mode 100644 src/components/ui/input/index.ts diff --git a/src/app/notes/[id]/layout.tsx b/src/app/notes/[id]/layout.tsx index b11c6b1c02..9f7ac56dd0 100644 --- a/src/app/notes/[id]/layout.tsx +++ b/src/app/notes/[id]/layout.tsx @@ -1,6 +1,7 @@ import { headers } from 'next/dist/client/components/headers' import type { Metadata } from 'next' +import { QueryHydration } from '~/components/common/QueryHydration' import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' import { REQUEST_QUERY } from '~/constants/system' import { attachUA } from '~/lib/attach-ua' @@ -59,16 +60,16 @@ export default async ( ) => { attachUA() const searchParams = new URLSearchParams(headers().get(REQUEST_QUERY) || '') - - await getQueryClient().fetchQuery( - queries.note.byNid( - props.params.id, - searchParams.get('password') || undefined, - ), + const query = queries.note.byNid( + props.params.id, + searchParams.get('password') || undefined, ) + const { data } = await getQueryClient().fetchQuery(query) return ( - - {props.children} - + + + {props.children} + + ) } diff --git a/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx b/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx index cd08236f6d..6c31cce7c1 100644 --- a/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx +++ b/src/app/posts/(post-detail)/[category]/[slug]/layout.tsx @@ -1,5 +1,7 @@ +import React from 'react' import type { Metadata } from 'next' +import { QueryHydration } from '~/components/common/QueryHydration' import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' import { attachUA } from '~/lib/attach-ua' import { getSummaryFromMd } from '~/lib/markdown' @@ -58,12 +60,18 @@ export default async (props: NextPageParams) => { const { params: { category, slug }, } = props - await getQueryClient().fetchQuery(queries.post.bySlug(category, slug)) + const query = queries.post.bySlug(category, slug) + const queryKey = query.queryKey + const data = await getQueryClient().fetchQuery(query) return ( -
- {props.children} + +
+ + {props.children} + - -
+ +
+ ) } diff --git a/src/app/posts/(post-detail)/[category]/[slug]/page.tsx b/src/app/posts/(post-detail)/[category]/[slug]/page.tsx index cc73a2e0b8..45ad0df748 100644 --- a/src/app/posts/(post-detail)/[category]/[slug]/page.tsx +++ b/src/app/posts/(post-detail)/[category]/[slug]/page.tsx @@ -6,7 +6,6 @@ import type { Image, PostModel } from '@mx-space/api-client' import { ReadIndicator } from '~/components/common/ReadIndicator' import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks' -import { Loading } from '~/components/ui/loading' import { Markdown } from '~/components/ui/markdown' import { PostActionAside } from '~/components/widgets/post/PostActionAside' import { PostMetaBar } from '~/components/widgets/post/PostMetaBar' @@ -19,6 +18,8 @@ import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRe import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider' import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider' +import Loading from './loading' + const useHeaderMeta = (data?: PostModel | null) => { const setHeader = useSetHeaderMetaInfo() useEffect(() => { @@ -38,12 +39,12 @@ const useHeaderMeta = (data?: PostModel | null) => { data?.slug, ]) } -export default () => { +const PostPage = () => { const data = useCurrentPostData() useHeaderMeta(data) if (!data) { - return + return } return ( @@ -62,7 +63,11 @@ export default () => { - + @@ -83,3 +88,4 @@ export default () => { ) } +export default PostPage diff --git a/src/components/common/QueryHydration.tsx b/src/components/common/QueryHydration.tsx new file mode 100644 index 0000000000..6d47f111b3 --- /dev/null +++ b/src/components/common/QueryHydration.tsx @@ -0,0 +1,19 @@ +'use client' + +import { useQueryClient } from '@tanstack/react-query' +import { memo } from 'react' +import type { QueryKey } from '@tanstack/react-query' +import type { PropsWithChildren } from 'react' + +import { useBeforeMounted } from '~/hooks/common/use-before-mounted' + +export const QueryHydration = memo( + (props: PropsWithChildren & { data: any; queryKey: QueryKey }) => { + const client = useQueryClient() + useBeforeMounted(() => { + client.setQueriesData(props.queryKey, props.data) + }) + + return props.children + }, +) diff --git a/src/components/layout/header/internal/hooks.ts b/src/components/layout/header/internal/hooks.ts index af0a09d431..9114494cdd 100644 --- a/src/components/layout/header/internal/hooks.ts +++ b/src/components/layout/header/internal/hooks.ts @@ -1,5 +1,7 @@ +import { useEffect } from 'react' import { atom, useAtomValue, useSetAtom } from 'jotai' +import { useViewport } from '~/atoms' import { jotaiStore } from '~/lib/store' import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider' @@ -23,8 +25,8 @@ export const useMenuVisibility = () => useMenuOpacity() > 0 export const useHeaderBgOpacity = () => { const threshold = 50 - - const headerShouldShowBg = useHeaderShouldShowBg() + const isMobile = useViewport((v) => v.sm || !v.sm) + const headerShouldShowBg = useHeaderShouldShowBg() || isMobile return usePageScrollLocationSelector( (y) => @@ -49,6 +51,13 @@ export const useHeaderMetaShouldShow = () => { return useAtomValue(headerMetaShouldShowAtom) && !v } export const useSetHeaderMetaInfo = () => { + useEffect(() => { + return () => { + jotaiStore.set(headerMetaTitleAtom, '') + jotaiStore.set(headerMetaDescriptionAtom, '') + jotaiStore.set(headerMetaSlugAtom, '') + } + }, []) return ({ title, description, diff --git a/src/components/ui/code-highlighter/CodeHighlighter.module.css b/src/components/ui/code-highlighter/CodeHighlighter.module.css index eb04e2e16e..77e2bb802f 100644 --- a/src/components/ui/code-highlighter/CodeHighlighter.module.css +++ b/src/components/ui/code-highlighter/CodeHighlighter.module.css @@ -1,5 +1,5 @@ .code-wrap { - position: relative; + @apply relative flex w-full flex-col overflow-auto; pre > code { @apply block bg-base-100 font-mono text-[14px] font-medium; diff --git a/src/components/ui/dlalog/index.ts b/src/components/ui/dlalog/index.ts new file mode 100644 index 0000000000..f404ece542 --- /dev/null +++ b/src/components/ui/dlalog/index.ts @@ -0,0 +1 @@ +export * from './DialogOverlay' diff --git a/src/components/ui/input/index.ts b/src/components/ui/input/index.ts new file mode 100644 index 0000000000..54e51f6c7b --- /dev/null +++ b/src/components/ui/input/index.ts @@ -0,0 +1 @@ +export * from './Input' diff --git a/src/components/ui/markdown/markdown.module.css b/src/components/ui/markdown/markdown.module.css index f09b63688f..b9bc7afda1 100644 --- a/src/components/ui/markdown/markdown.module.css +++ b/src/components/ui/markdown/markdown.module.css @@ -1,4 +1,6 @@ .md { + @apply relative; + :global { & .spoiler { position: relative; @@ -87,6 +89,10 @@ } code { - @apply font-mono; + @apply bg-zinc-200 font-mono dark:bg-neutral-800; + } + + pre { + @apply min-w-0 max-w-full flex-shrink flex-grow overflow-x-auto; } } diff --git a/src/components/ui/markdown/renderers/collapse.tsx b/src/components/ui/markdown/renderers/collapse.tsx index 14264f166f..602b455785 100644 --- a/src/components/ui/markdown/renderers/collapse.tsx +++ b/src/components/ui/markdown/renderers/collapse.tsx @@ -22,7 +22,7 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => { > diff --git a/src/components/widgets/note/NoteFooterNavigation.tsx b/src/components/widgets/note/NoteFooterNavigation.tsx index f05f4d3109..fa4815d927 100644 --- a/src/components/widgets/note/NoteFooterNavigation.tsx +++ b/src/components/widgets/note/NoteFooterNavigation.tsx @@ -4,10 +4,6 @@ import Link from 'next/link' import { useRouter } from 'next/navigation' import type { FC } from 'react' -import { - IcRoundKeyboardDoubleArrowLeft, - IcRoundKeyboardDoubleArrowRight, -} from '~/components/icons/arrow' import { MdiClockTimeThreeOutline } from '~/components/icons/clock' import { Divider } from '~/components/ui/divider' import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile' @@ -45,7 +41,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({ scroll={false} prefetch={false} > - + 前一篇 )} @@ -60,7 +56,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({ className="hover:text-primary" > 后一篇 - + )} diff --git a/src/components/widgets/post/PostItem.tsx b/src/components/widgets/post/PostItem.tsx index f9dd21dc37..be59555c7a 100644 --- a/src/components/widgets/post/PostItem.tsx +++ b/src/components/widgets/post/PostItem.tsx @@ -5,7 +5,6 @@ import Link from 'next/link' import RemoveMarkdown from 'remove-markdown' import type { PostModel } from '@mx-space/api-client' -import { IcRoundKeyboardDoubleArrowRight } from '~/components/icons/arrow' import { PostPinIcon } from '~/components/widgets/post/PostPinIcon' import { PostItemHoverOverlay } from './PostItemHoverOverlay' @@ -23,39 +22,41 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => { return ( -

+

{data.title}

- {!!data.summary && ( -

- 摘要： {data.summary} -

- )} -
- {hasImage && ( -
+
+ {!!data.summary && ( +

+ 摘要： {data.summary} +

)} -

- {displayText} -

-
+
+ {hasImage && ( +
+ )} +

+ {displayText} +

+
+ -
+
- + 阅读全文 - +
diff --git a/src/components/widgets/post/PostPinIcon.tsx b/src/components/widgets/post/PostPinIcon.tsx index 8cd13b3b4d..1163429706 100644 --- a/src/components/widgets/post/PostPinIcon.tsx +++ b/src/components/widgets/post/PostPinIcon.tsx @@ -27,7 +27,7 @@ export const PostPinIcon = memo(({ pin, id }: { pin: boolean; id: string }) => { return (