Skip to content

Commit 32edc0b

Browse files
InneiInnei
committed
fix: css style
Signed-off-by: Innei <[email protected]>
1 parent c424e54 commit 32edc0b

File tree

15 files changed

+117
-60
lines changed

15 files changed

+117
-60
lines changed

‎src/app/notes/[id]/layout.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { headers } from 'next/dist/client/components/headers'
22
import type { Metadata } from 'next'
33

4+
import { QueryHydration } from '~/components/common/QueryHydration'
45
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
56
import { REQUEST_QUERY } from '~/constants/system'
67
import { attachUA } from '~/lib/attach-ua'
@@ -59,16 +60,16 @@ export default async (
5960
) => {
6061
attachUA()
6162
const searchParams = new URLSearchParams(headers().get(REQUEST_QUERY) || '')
62-
63-
await getQueryClient().fetchQuery(
64-
queries.note.byNid(
65-
props.params.id,
66-
searchParams.get('password') || undefined,
67-
),
63+
const query = queries.note.byNid(
64+
props.params.id,
65+
searchParams.get('password') || undefined,
6866
)
67+
const { data } = await getQueryClient().fetchQuery(query)
6968
return (
70-
<BottomToUpTransitionView>
71-
<Paper>{props.children}</Paper>
72-
</BottomToUpTransitionView>
69+
<QueryHydration queryKey={query.queryKey} data={data}>
70+
<BottomToUpTransitionView className="min-w-0">
71+
<Paper>{props.children}</Paper>
72+
</BottomToUpTransitionView>
73+
</QueryHydration>
7374
)
7475
}

‎src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import React from 'react'
12
import type { Metadata } from 'next'
23

4+
import { QueryHydration } from '~/components/common/QueryHydration'
35
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
46
import { attachUA } from '~/lib/attach-ua'
57
import { getSummaryFromMd } from '~/lib/markdown'
@@ -58,12 +60,18 @@ export default async (props: NextPageParams<PageParams>) => {
5860
const {
5961
params: { category, slug },
6062
} = props
61-
await getQueryClient().fetchQuery(queries.post.bySlug(category, slug))
63+
const query = queries.post.bySlug(category, slug)
64+
const queryKey = query.queryKey
65+
const data = await getQueryClient().fetchQuery(query)
6266
return (
63-
<div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
64-
<BottomToUpTransitionView>{props.children}</BottomToUpTransitionView>
67+
<QueryHydration queryKey={queryKey} data={data}>
68+
<div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
69+
<BottomToUpTransitionView className="min-w-0">
70+
{props.children}
71+
</BottomToUpTransitionView>
6572

66-
<LayoutRightSideProvider className="relative hidden lg:block" />
67-
</div>
73+
<LayoutRightSideProvider className="relative hidden lg:block" />
74+
</div>
75+
</QueryHydration>
6876
)
6977
}

‎src/app/posts/(post-detail)/[category]/[slug]/page.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import type { Image, PostModel } from '@mx-space/api-client'
66

77
import { ReadIndicator } from '~/components/common/ReadIndicator'
88
import { useSetHeaderMetaInfo } from '~/components/layout/header/hooks'
9-
import { Loading } from '~/components/ui/loading'
109
import { Markdown } from '~/components/ui/markdown'
1110
import { PostActionAside } from '~/components/widgets/post/PostActionAside'
1211
import { PostMetaBar } from '~/components/widgets/post/PostMetaBar'
@@ -19,6 +18,8 @@ import { MarkdownImageRecordProvider } from '~/providers/article/MarkdownImageRe
1918
import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
2019
import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
2120

21+
import Loading from './loading'
22+
2223
const useHeaderMeta = (data?: PostModel | null) => {
2324
const setHeader = useSetHeaderMetaInfo()
2425
useEffect(() => {
@@ -38,12 +39,12 @@ const useHeaderMeta = (data?: PostModel | null) => {
3839
data?.slug,
3940
])
4041
}
41-
export default () => {
42+
const PostPage = () => {
4243
const data = useCurrentPostData()
4344

4445
useHeaderMeta(data)
4546
if (!data) {
46-
return <Loading useDefaultLoadingText />
47+
return <Loading />
4748
}
4849

4950
return (
@@ -62,7 +63,11 @@ export default () => {
6263
<MarkdownImageRecordProvider
6364
images={data.images || (noopArr as Image[])}
6465
>
65-
<Markdown value={data.text} as="main" />
66+
<Markdown
67+
value={data.text}
68+
as="main"
69+
className="min-w-0 overflow-hidden"
70+
/>
6671
</MarkdownImageRecordProvider>
6772

6873
<LayoutRightSidePortal>
@@ -83,3 +88,4 @@ export default () => {
8388
</div>
8489
)
8590
}
91+
export default PostPage

‎src/components/common/QueryHydration.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use client'
2+
3+
import { useQueryClient } from '@tanstack/react-query'
4+
import { memo } from 'react'
5+
import type { QueryKey } from '@tanstack/react-query'
6+
import type { PropsWithChildren } from 'react'
7+
8+
import { useBeforeMounted } from '~/hooks/common/use-before-mounted'
9+
10+
export const QueryHydration = memo(
11+
(props: PropsWithChildren & { data: any; queryKey: QueryKey }) => {
12+
const client = useQueryClient()
13+
useBeforeMounted(() => {
14+
client.setQueriesData(props.queryKey, props.data)
15+
})
16+
17+
return props.children
18+
},
19+
)

‎src/components/layout/header/internal/hooks.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { useEffect } from 'react'
12
import { atom, useAtomValue, useSetAtom } from 'jotai'
23

4+
import { useViewport } from '~/atoms'
35
import { jotaiStore } from '~/lib/store'
46
import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider'
57

@@ -23,8 +25,8 @@ export const useMenuVisibility = () => useMenuOpacity() > 0
2325

2426
export const useHeaderBgOpacity = () => {
2527
const threshold = 50
26-
27-
const headerShouldShowBg = useHeaderShouldShowBg()
28+
const isMobile = useViewport((v) => v.sm || !v.sm)
29+
const headerShouldShowBg = useHeaderShouldShowBg() || isMobile
2830

2931
return usePageScrollLocationSelector(
3032
(y) =>
@@ -49,6 +51,13 @@ export const useHeaderMetaShouldShow = () => {
4951
return useAtomValue(headerMetaShouldShowAtom) && !v
5052
}
5153
export const useSetHeaderMetaInfo = () => {
54+
useEffect(() => {
55+
return () => {
56+
jotaiStore.set(headerMetaTitleAtom, '')
57+
jotaiStore.set(headerMetaDescriptionAtom, '')
58+
jotaiStore.set(headerMetaSlugAtom, '')
59+
}
60+
}, [])
5261
return ({
5362
title,
5463
description,

‎src/components/ui/code-highlighter/CodeHighlighter.module.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.code-wrap {
2-
position: relative;
2+
@apply relative flex w-full flex-col overflow-auto;
33

44
pre > code {
55
@apply block bg-base-100 font-mono text-[14px] font-medium;

‎src/components/ui/dlalog/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './DialogOverlay'

‎src/components/ui/input/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './Input'

‎src/components/ui/markdown/markdown.module.css

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
.md {
2+
@apply relative;
3+
24
:global {
35
& .spoiler {
46
position: relative;
@@ -87,6 +89,10 @@
8789
}
8890

8991
code {
90-
@apply font-mono;
92+
@apply bg-zinc-200 font-mono dark:bg-neutral-800;
93+
}
94+
95+
pre {
96+
@apply min-w-0 max-w-full flex-shrink flex-grow overflow-x-auto;
9197
}
9298
}

‎src/components/ui/markdown/renderers/collapse.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const MDetails: FC<{ children: ReactNode[] }> = (props) => {
2222
>
2323
<i
2424
className={clsx(
25-
'mr-2 transform transition-transform duration-500',
25+
'icon-[mingcute--align-arrow-down-line] mr-2 transform transition-transform duration-500',
2626
open && 'rotate-90',
2727
)}
2828
>

‎src/components/widgets/note/NoteFooterNavigation.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import Link from 'next/link'
44
import { useRouter } from 'next/navigation'
55
import type { FC } from 'react'
66

7-
import {
8-
IcRoundKeyboardDoubleArrowLeft,
9-
IcRoundKeyboardDoubleArrowRight,
10-
} from '~/components/icons/arrow'
117
import { MdiClockTimeThreeOutline } from '~/components/icons/clock'
128
import { Divider } from '~/components/ui/divider'
139
import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
@@ -45,7 +41,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
4541
scroll={false}
4642
prefetch={false}
4743
>
48-
<IcRoundKeyboardDoubleArrowLeft />
44+
<i className="icon-[mingcute--arrow-left-line]" />
4945
<span>前一篇</span>
5046
</Link>
5147
)}
@@ -60,7 +56,7 @@ export const NoteFooterNavigation: FC<{ noteId: string }> = ({
6056
className="hover:text-primary"
6157
>
6258
<span>后一篇</span>
63-
<IcRoundKeyboardDoubleArrowRight />
59+
<i className="icon-[mingcute--arrow-right-line]" />
6460
</Link>
6561
)}
6662
</div>

‎src/components/widgets/post/PostItem.tsx

+25-24
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Link from 'next/link'
55
import RemoveMarkdown from 'remove-markdown'
66
import type { PostModel } from '@mx-space/api-client'
77

8-
import { IcRoundKeyboardDoubleArrowRight } from '~/components/icons/arrow'
98
import { PostPinIcon } from '~/components/widgets/post/PostPinIcon'
109

1110
import { PostItemHoverOverlay } from './PostItemHoverOverlay'
@@ -23,39 +22,41 @@ export const PostItem = memo<{ data: PostModel }>(({ data }) => {
2322
return (
2423
<Link
2524
href={postLink}
26-
className="relative flex flex-col space-y-2 py-6 focus-visible:!shadow-none"
25+
className="relative flex flex-col py-6 focus-visible:!shadow-none"
2726
>
2827
<PostItemHoverOverlay />
29-
<h2 className="relative text-2xl font-medium">
28+
<h2 className="relative text-center text-2xl font-medium lg:text-left">
3029
<Balancer>{data.title}</Balancer>
3130

3231
<PostPinIcon pin={!!data.pin} id={data.id} />
3332
</h2>
34-
{!!data.summary && (
35-
<p className="break-all leading-relaxed text-gray-900 dark:text-slate-50">
36-
摘要： {data.summary}
37-
</p>
38-
)}
39-
<div className="relative overflow-hidden">
40-
{hasImage && (
41-
<div
42-
className={clsx(
43-
'float-right h-24 w-24 overflow-hidden rounded-md',
44-
'bg-contain bg-center bg-no-repeat',
45-
)}
46-
style={{ backgroundImage: `url(${hasImage})` }}
47-
/>
33+
<main className="relative mt-8 space-y-2">
34+
{!!data.summary && (
35+
<p className="break-all leading-relaxed text-gray-900 dark:text-slate-50">
36+
摘要： {data.summary}
37+
</p>
4838
)}
49-
<p className="break-all leading-loose text-gray-800/90 dark:text-gray-200/90">
50-
{displayText}
51-
</p>
52-
</div>
39+
<div className="relative overflow-hidden">
40+
{hasImage && (
41+
<div
42+
className={clsx(
43+
'float-right h-24 w-24 overflow-hidden rounded-md',
44+
'bg-contain bg-center bg-no-repeat',
45+
)}
46+
style={{ backgroundImage: `url(${hasImage})` }}
47+
/>
48+
)}
49+
<p className="break-all leading-loose text-gray-800/90 dark:text-gray-200/90">
50+
{displayText}
51+
</p>
52+
</div>
53+
</main>
5354

54-
<div className="post-meta-bar flex select-none items-center gap-4 text-base-content/60">
55+
<div className="post-meta-bar mt-2 flex select-none flex-wrap items-center justify-end gap-4 text-base-content/60">
5556
<PostMetaBar data={data} />
56-
<span className="flex flex-shrink-0 select-none items-center space-x-1 text-accent hover:text-accent [&>svg]:hover:ml-2">
57+
<span className="flex flex-shrink-0 select-none items-center space-x-1 text-right text-accent hover:text-accent [&>svg]:hover:ml-2">
5758
<span>阅读全文</span>
58-
<IcRoundKeyboardDoubleArrowRight className="text-lg transition-[margin]" />
59+
<i className="icon-[mingcute--arrow-right-line] text-lg transition-[margin]" />
5960
</span>
6061
</div>
6162
</Link>

‎src/components/widgets/post/PostPinIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const PostPinIcon = memo(({ pin, id }: { pin: boolean; id: string }) => {
2727
return (
2828
<MotionButtonBase
2929
className={clsxm(
30-
'absolute bottom-0 right-0 top-0 z-[10] -m-4 box-content hidden h-5 w-5 items-center p-4',
30+
'absolute bottom-0 right-0 top-[4px] z-[10] -m-5 box-content hidden h-5 w-5 items-center p-5',
3131
isLogged && 'inline-flex cursor-pointer',
3232
!isLogged && pinState && 'pointer-events-none',
3333
pinState && '!inline-flex text-uk-red-light',

‎src/components/widgets/xlog/XLogInfo.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,14 @@ const XLogInfoBase: FC<{
9696
tabIndex={0}
9797
className={clsx(
9898
'-mx-2 flex w-[100%+0.5rem] items-center justify-between rounded-lg p-2 text-left transition-colors duration-300 md:rounded-xl',
99-
'hover:bg-zinc-100 dark:hover:bg-neutral-800',
99+
'hover:bg-zinc-200 dark:hover:bg-neutral-800',
100100
)}
101101
onClick={() => {
102102
setCollapse((c) => !c)
103103
}}
104104
>
105105
<div className="flex w-full items-center justify-between">
106-
<span className="flex flex-grow space-x-2">
106+
<span className="flex flex-grow items-center space-x-2">
107107
<SafeIcon />
108108
<span>
109109
此数据所有权由区块链加密技术和智能合约保障仅归创作者所有。

‎src/providers/root/page-scroll-info-provider.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { useCallback, useEffect, useRef } from 'react'
3+
import { startTransition, useCallback, useEffect, useRef } from 'react'
44
import { atom, useAtomValue, useSetAtom } from 'jotai'
55
import { selectAtom } from 'jotai/utils'
66
import type { FC, PropsWithChildren } from 'react'
@@ -21,17 +21,26 @@ const ScrollDetector = () => {
2121
const setPageScrollLocation = useSetAtom(pageScrollLocationAtom)
2222
const setPageScrollDirection = useSetAtom(pageScrollDirectionAtom)
2323
const prevScrollY = useRef(0)
24+
2425
useEffect(() => {
25-
window.addEventListener('scroll', () => {
26+
const scrollHandler = () => {
2627
const currentTop = document.documentElement.scrollTop
2728

2829
setPageScrollDirection(
2930
prevScrollY.current - currentTop > 0 ? 'up' : 'down',
3031
)
3132
prevScrollY.current = currentTop
33+
startTransition(() => {
34+
setPageScrollLocation(prevScrollY.current)
35+
})
36+
}
37+
window.addEventListener('scroll', scrollHandler)
38+
39+
scrollHandler()
3240

33-
setPageScrollLocation(prevScrollY.current)
34-
})
41+
return () => {
42+
window.removeEventListener('scroll', scrollHandler)
43+
}
3544
}, [])
3645

3746
return null

0 commit comments

Comments
 (0)