From 503170d4e52a37575cfe648b229b1a561f5e2955 Mon Sep 17 00:00:00 2001 From: Innei Date: Thu, 2 Nov 2023 15:17:17 +0800 Subject: [PATCH] feat: adjust subscribe bell button, and fix #137 Signed-off-by: Innei --- src/app/notes/[id]/pageImpl.tsx | 3 +-- .../[category]/[slug]/pageImpl.tsx | 3 +-- src/components/icons/menu-collection.tsx | 2 ++ src/components/layout/header/config.ts | 2 +- .../widgets/note/NoteActionAside.tsx | 22 +++++++++++++++--- .../widgets/post/PostActionAside.tsx | 23 +++++++++++++++---- .../widgets/shared/ActionAsideContainer.tsx | 7 ++++++ .../widgets/shared/AsideCommentButton.tsx | 3 ++- .../widgets/shared/AsideDonateButton.tsx | 4 +++- .../widgets/subscribe/SubscribeModal.tsx | 8 ++++++- 10 files changed, 62 insertions(+), 15 deletions(-) diff --git a/src/app/notes/[id]/pageImpl.tsx b/src/app/notes/[id]/pageImpl.tsx index 07624235a9..70fb34ae8f 100644 --- a/src/app/notes/[id]/pageImpl.tsx +++ b/src/app/notes/[id]/pageImpl.tsx @@ -15,7 +15,6 @@ import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside import { BanCopyWrapper } from '~/components/widgets/shared/BanCopyWrapper' import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator' import { SummarySwitcher } from '~/components/widgets/shared/SummarySwitcher' -import { SubscribeBell } from '~/components/widgets/subscribe' import { XLogInfoForNote } from '~/components/widgets/xlog' import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider' import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider' @@ -71,7 +70,7 @@ const NotePage = function (props: NoteModel) { - + {/* */} diff --git a/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx b/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx index 1ab1e9a3ca..2c743288b7 100644 --- a/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx +++ b/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx @@ -12,7 +12,6 @@ import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside import { GoToAdminEditingButton } from '~/components/widgets/shared/GoToAdminEditingButton' import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator' import { SummarySwitcher } from '~/components/widgets/shared/SummarySwitcher' -import { SubscribeBell } from '~/components/widgets/subscribe' import { XLogInfoForPost } from '~/components/widgets/xlog' import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider' import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider' @@ -66,7 +65,7 @@ const PostPage = (props: PostModel) => { - + {/* */} diff --git a/src/components/icons/menu-collection.tsx b/src/components/icons/menu-collection.tsx index 5f05271260..b1ef623530 100644 --- a/src/components/icons/menu-collection.tsx +++ b/src/components/icons/menu-collection.tsx @@ -230,6 +230,8 @@ export function RMixPlanet(props: SVGProps) { viewBox="0 0 24 24" width="1em" height="1em" + fill="currentColor" + {...props} > diff --git a/src/components/layout/header/config.ts b/src/components/layout/header/config.ts index c20a28fa17..ddbfdb095d 100644 --- a/src/components/layout/header/config.ts +++ b/src/components/layout/header/config.ts @@ -101,7 +101,7 @@ export const headerMenuConfig: IHeaderMenu[] = [ icon: h(FaSolidComments), }, { - title: '异次元之旅', + title: '跃迁', icon: h(RMixPlanet), path: 'https://travel.moe/go.html', }, diff --git a/src/components/widgets/note/NoteActionAside.tsx b/src/components/widgets/note/NoteActionAside.tsx index 1d1e1f9def..fb42db1151 100644 --- a/src/components/widgets/note/NoteActionAside.tsx +++ b/src/components/widgets/note/NoteActionAside.tsx @@ -19,16 +19,22 @@ import { import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider' import { useModalStack } from '~/providers/root/modal-stack-provider' -import { ActionAsideContainer } from '../shared/ActionAsideContainer' +import { + ActionAsideContainer, + ActionAsideIcon, + asideButtonStyles, +} from '../shared/ActionAsideContainer' import { AsideCommentButton } from '../shared/AsideCommentButton' import { AsideDonateButton } from '../shared/AsideDonateButton' import { ShareModal } from '../shared/ShareModal' +import { usePresentSubscribeModal } from '../subscribe' export const NoteActionAside: Component = ({ className }) => { return ( + @@ -104,7 +110,8 @@ const LikeButton = () => { > { ) } +const SubscribeButton = () => { + const { present } = usePresentSubscribeModal(['note_c']) + return ( + + + + ) +} + const ShareButton = () => { const isClient = useIsClient() const { present } = useModalStack() @@ -168,7 +184,7 @@ const ShareButton = () => { } }} > - + ) } diff --git a/src/components/widgets/post/PostActionAside.tsx b/src/components/widgets/post/PostActionAside.tsx index ae4270d606..64a6b7ab78 100644 --- a/src/components/widgets/post/PostActionAside.tsx +++ b/src/components/widgets/post/PostActionAside.tsx @@ -19,23 +19,37 @@ import { } from '~/providers/post/CurrentPostDataProvider' import { useModalStack } from '~/providers/root/modal-stack-provider' -import { ActionAsideContainer } from '../shared/ActionAsideContainer' +import { + ActionAsideContainer, + ActionAsideIcon, + asideButtonStyles, +} from '../shared/ActionAsideContainer' import { AsideCommentButton } from '../shared/AsideCommentButton' import { AsideDonateButton } from '../shared/AsideDonateButton' import { ShareModal } from '../shared/ShareModal' +import { usePresentSubscribeModal } from '../subscribe' export const PostActionAside: Component = ({ className }) => { return ( - + ) } +const SubscribeButton = () => { + const { present } = usePresentSubscribeModal(['post_c']) + return ( + + + + ) +} + const PostAsideCommentButton = () => { const { title, id } = useCurrentPostDataSelector((data) => { @@ -96,7 +110,8 @@ const LikeButton = () => { > { } }} > - + ) } diff --git a/src/components/widgets/shared/ActionAsideContainer.tsx b/src/components/widgets/shared/ActionAsideContainer.tsx index d79505d81c..43100a9303 100644 --- a/src/components/widgets/shared/ActionAsideContainer.tsx +++ b/src/components/widgets/shared/ActionAsideContainer.tsx @@ -5,6 +5,13 @@ import { clsxm } from '~/lib/helper' import { usePageScrollLocationSelector } from '~/providers/root/page-scroll-info-provider' import { useIsEOWrappedElement } from '~/providers/shared/WrappedElementProvider' +export const asideButtonStyles = { + base: 'text-[24px] opacity-80 duration-200 hover:opacity-100 relative', +} + +export const ActionAsideIcon: Component = (props) => { + return +} export const ActionAsideContainer: Component = ({ className, children }) => { const isEOA = useIsEOWrappedElement() const h = useViewport((v) => v.h) diff --git a/src/components/widgets/shared/AsideCommentButton.tsx b/src/components/widgets/shared/AsideCommentButton.tsx index ae2c2a9068..047df14a86 100644 --- a/src/components/widgets/shared/AsideCommentButton.tsx +++ b/src/components/widgets/shared/AsideCommentButton.tsx @@ -4,6 +4,7 @@ import { MotionButtonBase } from '~/components/ui/button' import { useIsClient } from '~/hooks/common/use-is-client' import { useModalStack } from '~/providers/root/modal-stack-provider' +import { ActionAsideIcon } from './ActionAsideContainer' import { CommentModal } from './CommentModal' // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -28,7 +29,7 @@ export const AsideCommentButton = ( }) }} > - + ) } diff --git a/src/components/widgets/shared/AsideDonateButton.tsx b/src/components/widgets/shared/AsideDonateButton.tsx index 8ee29f3b38..7207961cf1 100644 --- a/src/components/widgets/shared/AsideDonateButton.tsx +++ b/src/components/widgets/shared/AsideDonateButton.tsx @@ -11,6 +11,8 @@ import { useIsClient } from '~/hooks/common/use-is-client' import { clsxm } from '~/lib/helper' import { useAppConfigSelector } from '~/providers/root/aggregation-data-provider' +import { ActionAsideIcon } from './ActionAsideContainer' + // TODO this component only use once in current page. const positionAtom = atom({ x: 0, @@ -119,7 +121,7 @@ const DonateButtonInternal: Component> = ({ }} {...props} > - + ) } diff --git a/src/components/widgets/subscribe/SubscribeModal.tsx b/src/components/widgets/subscribe/SubscribeModal.tsx index f4808540de..ad6ab5680d 100644 --- a/src/components/widgets/subscribe/SubscribeModal.tsx +++ b/src/components/widgets/subscribe/SubscribeModal.tsx @@ -12,7 +12,7 @@ import { apiClient } from '~/lib/request' import { toast } from '~/lib/toast' import { useAggregationSelector } from '~/providers/root/aggregation-data-provider' -import { useSubscribeStatusQuery } from './hooks' +import { useIsEnableSubscribe, useSubscribeStatusQuery } from './hooks' interface SubscribeModalProps { onConfirm: () => void @@ -61,6 +61,8 @@ export const SubscribeModal: FC = ({ }) => { const [state, dispatch] = useFormData() + const canSub = useIsEnableSubscribe() + const stateRef = useStateToRef(state) useEffect(() => { @@ -86,6 +88,10 @@ export const SubscribeModal: FC = ({ const query = useSubscribeStatusQuery() const handleSubList: React.EventHandler = async (e) => { + if (!canSub) { + toast.error('订阅功能暂时没有开启哦') + return + } preventDefault(e) const { email, types } = state await apiClient.subscribe.subscribe(