diff --git a/src/app/(app)/(home)/page.tsx b/src/app/(app)/(home)/page.tsx index f0137d2586..32c2c49f44 100644 --- a/src/app/(app)/(home)/page.tsx +++ b/src/app/(app)/(home)/page.tsx @@ -16,8 +16,10 @@ import { PeekLink } from '~/components/modules/peek/PeekLink' import { PostMetaBar } from '~/components/modules/post' import { MotionButtonBase } from '~/components/ui/button' import { RelativeTime } from '~/components/ui/relative-time' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' -import { TextUpTransitionView } from '~/components/ui/transition/TextUpTransitionView' +import { + BottomToUpTransitionView, + TextUpTransitionView, +} from '~/components/ui/transition' import { microReboundPreset, softBouncePreset, diff --git a/src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx b/src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx index 0d52c21122..643bde8b64 100644 --- a/src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx +++ b/src/app/(app)/(note-topic)/notes/(topic-detail)/topics/[slug]/page.tsx @@ -7,8 +7,10 @@ import { useParams } from 'next/navigation' import { LoadMoreIndicator } from '~/components/modules/shared/LoadMoreIndicator' import { TimelineList } from '~/components/ui/list/TimelineList' import { Loading } from '~/components/ui/loading' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { + BottomToUpSoftScaleTransitionView, + BottomToUpTransitionView, +} from '~/components/ui/transition' import { apiClient } from '~/lib/request' import { routeBuilder, Routes } from '~/lib/route-builder' diff --git a/src/app/(app)/(note-topic)/notes/topics/page.tsx b/src/app/(app)/(note-topic)/notes/topics/page.tsx index 39e5f66f40..8392e18801 100644 --- a/src/app/(app)/(note-topic)/notes/topics/page.tsx +++ b/src/app/(app)/(note-topic)/notes/topics/page.tsx @@ -4,8 +4,10 @@ import { useQuery } from '@tanstack/react-query' import Link from 'next/link' import { TimelineList } from '~/components/ui/list/TimelineList' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { + BottomToUpSoftScaleTransitionView, + BottomToUpTransitionView, +} from '~/components/ui/transition' import { routeBuilder, Routes } from '~/lib/route-builder' import { topicsQuery } from './query' diff --git a/src/app/(app)/(page-detail)/[slug]/layout.tsx b/src/app/(app)/(page-detail)/[slug]/layout.tsx index bba546e396..d3f36e1655 100644 --- a/src/app/(app)/(page-detail)/[slug]/layout.tsx +++ b/src/app/(app)/(page-detail)/[slug]/layout.tsx @@ -9,8 +9,10 @@ import { } from '~/components/modules/activity' import { CommentAreaRootLazy } from '~/components/modules/comment' import { TocFAB } from '~/components/modules/toc/TocFAB' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { + BottomToUpSoftScaleTransitionView, + BottomToUpTransitionView, +} from '~/components/ui/transition' import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile' import { attachUAAndRealIp } from '~/lib/attach-ua' import { getOgUrl } from '~/lib/helper.server' diff --git a/src/app/(app)/categories/[slug]/page.tsx b/src/app/(app)/categories/[slug]/page.tsx index 2710006c90..76a4dd0019 100644 --- a/src/app/(app)/categories/[slug]/page.tsx +++ b/src/app/(app)/categories/[slug]/page.tsx @@ -6,8 +6,10 @@ import { useParams } from 'next/navigation' import { BackToTopFAB } from '~/components/ui/fab' import { TimelineList } from '~/components/ui/list/TimelineList' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { + BottomToUpSoftScaleTransitionView, + BottomToUpTransitionView, +} from '~/components/ui/transition' import { routeBuilder, Routes } from '~/lib/route-builder' import { getPageBySlugQuery } from './query' diff --git a/src/app/(app)/friends/page.tsx b/src/app/(app)/friends/page.tsx index 9cc07c5773..4255d19e81 100644 --- a/src/app/(app)/friends/page.tsx +++ b/src/app/(app)/friends/page.tsx @@ -18,7 +18,7 @@ import { BackToTopFAB } from '~/components/ui/fab' import { Form, FormInput } from '~/components/ui/form' import { Loading } from '~/components/ui/loading' import { useModalStack } from '~/components/ui/modal' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { BottomToUpTransitionView } from '~/components/ui/transition' import { shuffle } from '~/lib/lodash' import { apiClient, getErrorMessageFromRequestError } from '~/lib/request' import { toast } from '~/lib/toast' diff --git a/src/app/(app)/notes/[id]/layout.tsx b/src/app/(app)/notes/[id]/layout.tsx index 5807256237..9999a371ed 100644 --- a/src/app/(app)/notes/[id]/layout.tsx +++ b/src/app/(app)/notes/[id]/layout.tsx @@ -7,7 +7,7 @@ import { CommentAreaRootLazy } from '~/components/modules/comment' import { NoteFontSettingFab } from '~/components/modules/note/NoteFontFab' import { NoteMainContainer } from '~/components/modules/note/NoteMainContainer' import { TocFAB } from '~/components/modules/toc/TocFAB' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' +import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition' import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile' import { getOgUrl } from '~/lib/helper.server' import { getSummaryFromMd } from '~/lib/markdown' diff --git a/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx b/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx index c46f7292c2..f13d1d1c05 100644 --- a/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx +++ b/src/app/(app)/posts/(post-detail)/[category]/[slug]/layout.tsx @@ -5,8 +5,10 @@ import type { PageParams } from './api' import { buildRoomName, RoomProvider } from '~/components/modules/activity' import { CommentAreaRootLazy } from '~/components/modules/comment' import { TocFAB } from '~/components/modules/toc/TocFAB' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { + BottomToUpSoftScaleTransitionView, + BottomToUpTransitionView, +} from '~/components/ui/transition' import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile' import { getOgUrl } from '~/lib/helper.server' import { getSummaryFromMd } from '~/lib/markdown' diff --git a/src/app/(app)/posts/page.tsx b/src/app/(app)/posts/page.tsx index dadc72d345..6f11ac2f04 100644 --- a/src/app/(app)/posts/page.tsx +++ b/src/app/(app)/posts/page.tsx @@ -7,7 +7,7 @@ import { PostPagination } from '~/components/modules/post/PostPagination' import { NothingFound } from '~/components/modules/shared/NothingFound' import { SearchFAB } from '~/components/modules/shared/SearchFAB' import { BackToTopFAB } from '~/components/ui/fab' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { BottomToUpTransitionView } from '~/components/ui/transition' import { OnlyDesktop } from '~/components/ui/viewport' import { apiClient } from '~/lib/request' diff --git a/src/app/(app)/projects/page.tsx b/src/app/(app)/projects/page.tsx index f4385bc408..b6ec6d90d7 100644 --- a/src/app/(app)/projects/page.tsx +++ b/src/app/(app)/projects/page.tsx @@ -6,7 +6,7 @@ import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon' import { ProjectList } from '~/components/modules/project/ProjectList' import { NothingFound } from '~/components/modules/shared/NothingFound' import { Loading } from '~/components/ui/loading' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' +import { BottomToUpTransitionView } from '~/components/ui/transition' import { noopArr } from '~/lib/noop' import { apiClient } from '~/lib/request' import { useAggregationSelector } from '~/providers/root/aggregation-data-provider' diff --git a/src/app/(app)/says/page.tsx b/src/app/(app)/says/page.tsx index 7da22fd581..5d487c47bf 100644 --- a/src/app/(app)/says/page.tsx +++ b/src/app/(app)/says/page.tsx @@ -1,59 +1,19 @@ 'use client' -import { useInfiniteQuery } from '@tanstack/react-query' -import { memo, useMemo } from 'react' -import { m } from 'framer-motion' -import Markdown from 'markdown-to-jsx' -import type { SayModel } from '@mx-space/api-client' -import type { MarkdownToJSX } from 'markdown-to-jsx' - -import { useIsMobile } from '~/atoms/hooks' -import { LoadMoreIndicator } from '~/components/modules/shared/LoadMoreIndicator' +import { useSayListQuery } from '~/components/modules/say/hooks' +import { SayMasonry } from '~/components/modules/say/SayMasonry' import { NothingFound } from '~/components/modules/shared/NothingFound' -import { Loading } from '~/components/ui/loading' -import { Masonry } from '~/components/ui/masonry' -import { RelativeTime } from '~/components/ui/relative-time' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' -import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView' -import { useIsDark } from '~/hooks/common/use-is-dark' -import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color' -import { apiClient } from '~/lib/request' - -import { sayQueryKey } from './query' +import { FullPageLoading } from '~/components/ui/loading' export default function Page() { - const { fetchNextPage, hasNextPage, data, isLoading } = useInfiniteQuery({ - queryKey: sayQueryKey, - queryFn: async ({ pageParam }) => { - const data = await apiClient.say.getAllPaginated(pageParam) - return data - }, - initialPageParam: 1, - getNextPageParam: (lastPage) => - lastPage.pagination.hasNextPage - ? lastPage.pagination.currentPage + 1 - : undefined, - }) - - const isMobile = useIsMobile() + const { data, isLoading } = useSayListQuery() if (isLoading) { - return + return } if (!data || data.pages.length === 0) return - const list = data.pages - .map((page) => page.data) - .flat() - .map((say) => { - return { - text: say.text, - item: say, - id: say.id, - } - }) - return (
@@ -61,93 +21,8 @@ export default function Page() {
- - - {hasNextPage && ( - - - - - - )} +
) } -const placeholderData = Array.from({ length: 10 }).map((_, index) => ({ - index, - text: '', - id: index.toFixed(), - item: {} as SayModel, -})) -const SaySkeleton = memo(() => { - return ( -
-
-
-
-
-
-
-
-
- ) -}) -SaySkeleton.displayName = 'SaySkeleton' - -const options = { - disableParsingRawHTML: true, - forceBlock: true, -} satisfies MarkdownToJSX.Options - -const Item = memo<{ - item: SayModel - index: number -}>(({ item: say, index: i }) => { - const hasSource = !!say.source - const hasAuthor = !!say.author - // const color = colorsMap.get(say.id) - const { dark: darkColors, light: lightColors } = useMemo( - () => getColorScheme(stringToHue(say.id)), - [say.id], - ) - const isDark = useIsDark() - - return ( - - - {`${say.text}`} -
-
- 发布于 - -
-
-
- {hasSource && `出自“${say.source}”`} - {hasSource && hasAuthor && ', '} - {hasAuthor && `作者：${say.author}`} - {!hasAuthor && !hasSource && '站长说'} -
-
-
- - - ) -}) -Item.displayName = 'Item' diff --git a/src/app/(app)/says/query.ts b/src/app/(app)/says/query.ts deleted file mode 100644 index f346e62b6c..0000000000 --- a/src/app/(app)/says/query.ts +++ /dev/null @@ -1 +0,0 @@ -export const sayQueryKey = ['says'] diff --git a/src/app/(app)/timeline/page.tsx b/src/app/(app)/timeline/page.tsx index fd54cdbb3f..03523b6a5f 100644 --- a/src/app/(app)/timeline/page.tsx +++ b/src/app/(app)/timeline/page.tsx @@ -16,7 +16,7 @@ import { TimelineProgress } from '~/components/modules/timeline/TimelineProgress import { Divider } from '~/components/ui/divider' import { BackToTopFAB } from '~/components/ui/fab' import { TimelineList } from '~/components/ui/list/TimelineList' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' +import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition' import { apiClient } from '~/lib/request' import { springScrollToElement } from '~/lib/scroller' diff --git a/src/components/modules/comment/Comments.tsx b/src/components/modules/comment/Comments.tsx index d20567af62..9d8fd805e9 100644 --- a/src/components/modules/comment/Comments.tsx +++ b/src/components/modules/comment/Comments.tsx @@ -7,7 +7,7 @@ import type { CommentBaseProps } from './types' import { ErrorBoundary } from '~/components/common/ErrorBoundary' import { NotSupport } from '~/components/common/NotSupport' -import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView' +import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition' import { apiClient } from '~/lib/request' import { LoadMoreIndicator } from '../shared/LoadMoreIndicator' diff --git a/src/components/modules/note/NoteTimelineItem.tsx b/src/components/modules/note/NoteTimelineItem.tsx index eb9be12ecc..7a9e7e2176 100644 --- a/src/components/modules/note/NoteTimelineItem.tsx +++ b/src/components/modules/note/NoteTimelineItem.tsx @@ -6,7 +6,7 @@ import Link from 'next/link' import { tv } from 'tailwind-variants' import type { Target, TargetAndTransition } from 'framer-motion' -import { LeftToRightTransitionView } from '~/components/ui/transition/LeftToRightTransitionView' +import { LeftToRightTransitionView } from '~/components/ui/transition' import { clsxm } from '~/lib/helper' import { routeBuilder, Routes } from '~/lib/route-builder' import { springScrollToTop } from '~/lib/scroller' diff --git a/src/components/modules/say/SayMasonry.tsx b/src/components/modules/say/SayMasonry.tsx new file mode 100644 index 0000000000..c6d8aea001 --- /dev/null +++ b/src/components/modules/say/SayMasonry.tsx @@ -0,0 +1,130 @@ +'use client' + +import { memo, useMemo } from 'react' +import { m } from 'framer-motion' +import Markdown from 'markdown-to-jsx' +import type { SayModel } from '@mx-space/api-client' +import type { MarkdownToJSX } from 'markdown-to-jsx' + +import { useIsMobile } from '~/atoms/hooks' +import { LoadMoreIndicator } from '~/components/modules/shared/LoadMoreIndicator' +import { Masonry } from '~/components/ui/masonry' +import { RelativeTime } from '~/components/ui/relative-time' +import { + BottomToUpSoftScaleTransitionView, + BottomToUpTransitionView, +} from '~/components/ui/transition' +import { useIsDark } from '~/hooks/common/use-is-dark' +import { addAlphaToHSL, getColorScheme, stringToHue } from '~/lib/color' + +import { useSayListQuery } from './hooks' + +export const SayMasonry = () => { + const { fetchNextPage, hasNextPage, data } = useSayListQuery() + + const isMobile = useIsMobile() + + if (!data) return null + + const list = data.pages + .map((page) => page.data) + .flat() + .map((say) => { + return { + text: say.text, + item: say, + id: say.id, + } + }) + + return ( + <> + + {hasNextPage && ( + + + + + + )} + + ) +} + +const placeholderData = Array.from({ length: 10 }).map((_, index) => ({ + index, + text: '', + id: index.toFixed(), + item: {} as SayModel, +})) +const SaySkeleton = memo(() => { + return ( +
+
+
+
+
+
+
+
+
+ ) +}) +SaySkeleton.displayName = 'SaySkeleton' + +const options = { + disableParsingRawHTML: true, + forceBlock: true, +} satisfies MarkdownToJSX.Options + +const Item = memo<{ + item: SayModel + index: number +}>(({ item: say, index: i }) => { + const hasSource = !!say.source + const hasAuthor = !!say.author + // const color = colorsMap.get(say.id) + const { dark: darkColors, light: lightColors } = useMemo( + () => getColorScheme(stringToHue(say.id)), + [say.id], + ) + const isDark = useIsDark() + + return ( + + + {`${say.text}`} +
+
+ 发布于 + +
+
+
+ {hasSource && `出自“${say.source}”`} + {hasSource && hasAuthor && ', '} + {hasAuthor && `作者：${say.author}`} + {!hasAuthor && !hasSource && '站长说'} +
+
+
+ + + ) +}) +Item.displayName = 'Item' diff --git a/src/components/modules/say/hooks.ts b/src/components/modules/say/hooks.ts new file mode 100644 index 0000000000..9ed62c9f13 --- /dev/null +++ b/src/components/modules/say/hooks.ts @@ -0,0 +1,20 @@ +import { useInfiniteQuery } from '@tanstack/react-query' + +import { apiClient } from '~/lib/request' + +export const sayQueryKey = ['says'] + +export const useSayListQuery = () => { + return useInfiniteQuery({ + queryKey: sayQueryKey, + queryFn: async ({ pageParam }) => { + const data = await apiClient.say.getAllPaginated(pageParam) + return data + }, + initialPageParam: 1, + getNextPageParam: (lastPage) => + lastPage.pagination.hasNextPage + ? lastPage.pagination.currentPage + 1 + : undefined, + }) +} diff --git a/src/components/modules/shared/PinIconToggle.tsx b/src/components/modules/shared/PinIconToggle.tsx index e5dd161d52..3e98f700d5 100644 --- a/src/components/modules/shared/PinIconToggle.tsx +++ b/src/components/modules/shared/PinIconToggle.tsx @@ -4,7 +4,7 @@ import type { MouseEventHandler, SVGProps } from 'react' import { useIsLogged } from '~/atoms/hooks' import { MotionButtonBase } from '~/components/ui/button' -import { IconTransition } from '~/components/ui/transition/IconTransiton' +import { IconTransition } from '~/components/ui/transition/IconTransition' import { clsxm } from '~/lib/helper' export const PinIconToggle: Component<{ diff --git a/src/components/modules/toc/TocTree.tsx b/src/components/modules/toc/TocTree.tsx index 1997dbe63c..c69f4f8c84 100644 --- a/src/components/modules/toc/TocTree.tsx +++ b/src/components/modules/toc/TocTree.tsx @@ -16,7 +16,7 @@ import type { TocSharedProps } from './TocAside' import type { ITocItem } from './TocItem' import { Divider } from '~/components/ui/divider' -import { RightToLeftTransitionView } from '~/components/ui/transition/RightToLeftTransitionView' +import { RightToLeftTransitionView } from '~/components/ui/transition' import { useStateToRef } from '~/hooks/common/use-state-ref' import { useMaskScrollArea } from '~/hooks/shared/use-mask-scrollarea' import { clsxm } from '~/lib/helper' diff --git a/src/components/ui/transition/IconTransiton.tsx b/src/components/ui/transition/IconTransition.tsx similarity index 97% rename from src/components/ui/transition/IconTransiton.tsx rename to src/components/ui/transition/IconTransition.tsx index f0074829e3..a23d57c82e 100644 --- a/src/components/ui/transition/IconTransiton.tsx +++ b/src/components/ui/transition/IconTransition.tsx @@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react' import { useAnimationControls } from 'framer-motion' import type { FC } from 'react' -import { FadeInOutTransitionView } from '~/components/ui/transition/FadeInOutTransitionView' +import { FadeInOutTransitionView } from '~/components/ui/transition' interface IconTransitionProps { solidIcon: JSX.Element diff --git a/src/components/ui/transition/index.ts b/src/components/ui/transition/index.ts new file mode 100644 index 0000000000..0789240837 --- /dev/null +++ b/src/components/ui/transition/index.ts @@ -0,0 +1,10 @@ +export * from './BottomToUpSoftScaleTransitionView' +export * from './BottomToUpTransitionView' +export * from './FadeInOutTransitionView' +export * from './IconTransition' +export * from './LeftToRightTransitionView' +export * from './RightToLeftTransitionView' +export * from './ScaleTransitionView' +export * from './TextUpTransitionView' + +export * from './typings' diff --git a/src/socket/handler.ts b/src/socket/handler.ts index 233e4fb0bb..531a987b6d 100644 --- a/src/socket/handler.ts +++ b/src/socket/handler.ts @@ -12,7 +12,6 @@ import type { InfiniteData } from '@tanstack/react-query' import type { ActivityPresence } from '~/models/activity' import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime' -import { sayQueryKey } from '~/app/(app)/says/query' import { setOnlineCount } from '~/atoms' import { deleteActivityPresence, @@ -25,6 +24,7 @@ import { IcTwotoneSignpost, MdiLightbulbOn20, } from '~/components/icons/menu-collection' +import { sayQueryKey } from '~/components/modules/say/hooks' import { DOMCustomEvents } from '~/constants/event' import { TrackerAction } from '~/constants/tracker' import { isDev } from '~/lib/env'