From 1cfbbb903809a41374aed0e216b2ddbfb7d5e78c Mon Sep 17 00:00:00 2001 From: Innei Date: Thu, 2 Jan 2025 16:37:59 +0800 Subject: [PATCH] feat: adjust rsshub page styles Signed-off-by: Innei --- apps/renderer/src/assets/rsshub.svg | 12 +++ .../src/modules/rsshub/set-modal-content.tsx | 83 ++++++++++--------- .../modules/user/ProfileButton.desktop.tsx | 5 +- .../(main)/(layer)/(subview)/rsshub/index.tsx | 29 ++++--- changelog/next.md | 10 ++- locales/settings/en.json | 2 +- locales/settings/zh-CN.json | 2 +- 7 files changed, 87 insertions(+), 56 deletions(-) create mode 100644 apps/renderer/src/assets/rsshub.svg diff --git a/apps/renderer/src/assets/rsshub.svg b/apps/renderer/src/assets/rsshub.svg new file mode 100644 index 000000000..0498fc242 --- /dev/null +++ b/apps/renderer/src/assets/rsshub.svg @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/apps/renderer/src/modules/rsshub/set-modal-content.tsx b/apps/renderer/src/modules/rsshub/set-modal-content.tsx index 39e1e5f18..8b8e3cfee 100644 --- a/apps/renderer/src/modules/rsshub/set-modal-content.tsx +++ b/apps/renderer/src/modules/rsshub/set-modal-content.tsx @@ -13,7 +13,7 @@ import type { RSSHubModel } from "@follow/models" import { zodResolver } from "@hookform/resolvers/zod" import { useEffect } from "react" import { useForm } from "react-hook-form" -import { useTranslation } from "react-i18next" +import { Trans, useTranslation } from "react-i18next" import { z } from "zod" import { whoami } from "~/atoms/user" @@ -66,32 +66,38 @@ export function SetModalContent({
{t("rsshub.useModal.about")}
-
-
{t("rsshub.table.owner")}
- -
-
-
{t("rsshub.table.description")}
-
{instance.description}
-
-
-
{t("rsshub.table.price")}
-
- {instance.price} -
-
-
-
{t("rsshub.table.userCount")}
-
{instance.userCount}
-
-
-
{t("rsshub.table.userLimit")}
-
{instance.userLimit || t("rsshub.table.unlimited")}
-
+ + + + + + + + + + + + + + + + + + + + + + + +
{t("rsshub.table.owner")} + +
{t("rsshub.table.description")}{instance.description}
{t("rsshub.table.price")} + {instance.price} +
{t("rsshub.table.userCount")}{instance.userCount}
{t("rsshub.table.userLimit")}{instance.userLimit || t("rsshub.table.unlimited")}
 {details.data?.purchase && ( @@ -111,9 +117,9 @@ export function SetModalContent({ control={form.control} name="months" render={({ field }) => ( - + {t("rsshub.useModal.months_label")} - +
@@ -121,10 +127,6 @@ export function SetModalContent({ {t("rsshub.useModal.month")}
-
- {price * field.value} - -
@@ -134,11 +136,16 @@ export function SetModalContent({ )}
diff --git a/apps/renderer/src/modules/user/ProfileButton.desktop.tsx b/apps/renderer/src/modules/user/ProfileButton.desktop.tsx index 811b7e61d..4f0c34a4d 100644 --- a/apps/renderer/src/modules/user/ProfileButton.desktop.tsx +++ b/apps/renderer/src/modules/user/ProfileButton.desktop.tsx @@ -12,6 +12,7 @@ import { forwardRef, memo, useCallback, useLayoutEffect, useState } from "react" import { useTranslation } from "react-i18next" import { useNavigate } from "react-router" +import rsshubLogoUrl from "~/assets/rsshub-icon.png?url" import { useIsZenMode, useSetZenMode } from "~/atoms/settings/ui" import { useUserRole } from "~/atoms/user" import { @@ -37,6 +38,8 @@ import { LoginButton } from "./LoginButton" import { PowerButton } from "./ProfileButton.shared" import { UserAvatar } from "./UserAvatar" +const rsshubLogo = new URL(rsshubLogoUrl, import.meta.url).href + export type ProfileButtonProps = LoginProps & { animatedAvatar?: boolean } @@ -169,7 +172,7 @@ export const ProfileButton: FC = memo((props) => { onClick={() => { navigate("/rsshub") }} - icon={} + icon={} > {t("words.rsshub")} diff --git a/apps/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx b/apps/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx index fe2bd4dd0..d92a40d43 100644 --- a/apps/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx +++ b/apps/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx @@ -11,7 +11,7 @@ import { import type { RSSHubModel } from "@follow/models" import { useTranslation } from "react-i18next" -import RSSHubIcon from "~/assets/rsshub-icon.png" +import RSSHubIconUrl from "~/assets/rsshub-icon.png?url" import { whoami } from "~/atoms/user" import { useModalStack } from "~/components/ui/modal/stacked/hooks" import { useAuthQuery } from "~/hooks/common" @@ -22,6 +22,7 @@ import { UserAvatar } from "~/modules/user/UserAvatar" import { Queries } from "~/queries" import { useSetRSSHubMutation } from "~/queries/rsshub" +const RSSHubIcon = new URL(RSSHubIconUrl, import.meta.url).href export function Component() { const { t } = useTranslation("settings") const { present } = useModalStack() @@ -32,7 +33,7 @@ export function Component() { return (
-
+
{t("words.rsshub", { ns: "common" })}
@@ -74,13 +75,13 @@ function List({ data }: { data?: RSSHubModel[] }) { {t("rsshub.table.description")} - + {t("rsshub.table.price")} - + {t("rsshub.table.userCount")} - + {t("rsshub.table.userLimit")} @@ -88,7 +89,7 @@ function List({ data }: { data?: RSSHubModel[] }) { - Official + Official @@ -97,12 +98,12 @@ function List({ data }: { data?: RSSHubModel[] }) { Follow Built-in RSSHub - + 0 - * - {t("rsshub.table.unlimited")} + * + {t("rsshub.table.unlimited")} {!status?.data?.usage?.rsshubId && (