nixcn/cms-server
1
0
Fork 1
Code Pull Requests Activity

refactor(profile): split view/container and update nav state

Browse Source 
Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
Noa Virellia
2026-01-31 18:30:34 +08:00
committed by Asai Neko
parent ff10fe10ce
commit 7ad479bc87
20 changed files with 173 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/cms/.zed/settings.json Normal file
View File

@@ -0,0 +1,18 @@
{
"file_scan_exclusions": [
"src/components/ui",
".tanstack",
"node_modules",
"dist",
// default values below
"**/.git",
"**/.svn",
"**/.hg",
"**/CVS",
"**/.DS_Store",
"**/Thumbs.db",
"**/.classpath",
"**/.settings",
],
}

15
client/cms/src/components/profile/edit-profile.dialog.container.tsx Normal file
View File

@@ -0,0 +1,15 @@
import type { ServiceUserUserInfoData } from '@/client';
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
import { EditProfileDialogView } from './edit-profile.dialog.view';
export function EditProfileDialogContainer({ data }: { data: ServiceUserUserInfoData }) {
const { mutateAsync } = useUpdateUser();
return (
<EditProfileDialogView
user={data}
updateProfile={async (data) => {
await mutateAsync({ body: data });
}}
/>
);
}

17
client/cms/src/components/profile/edit-profile-dialog.tsx → client/cms/src/components/profile/edit-profile.dialog.view.tsx
View File

@@ -1,6 +1,9 @@
import type { ServiceUserUserInfoData } from '@/client';
import { useForm } from '@tanstack/react-form';
import { useState } from 'react';
import {
useEffect,
useState,
} from 'react';
import { toast } from 'sonner';
import z from 'zod';
import { Button } from '@/components/ui/button';
@@ -21,7 +24,6 @@ import {
import {
Input,
} from '@/components/ui/input';
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
import { Switch } from '../ui/switch';
const formSchema = z.object({
@@ -31,9 +33,7 @@ const formSchema = z.object({
avatar: z.url().or(z.literal('')),
allow_public: z.boolean(),
});
export function EditProfileDialog({ user }: { user: ServiceUserUserInfoData }) {
const { mutateAsync } = useUpdateUser();
export function EditProfileDialogView({ user, updateProfile }: { user: ServiceUserUserInfoData; updateProfile: (data: ServiceUserUserInfoData) => Promise<void> }) {
const form = useForm({
defaultValues: {
avatar: user.avatar,
@@ -49,7 +49,7 @@ export function EditProfileDialog({ user }: { user: ServiceUserUserInfoData }) {
value,
}) => {
try {
await mutateAsync({ body: value });
await updateProfile(value);
toast.success('个人资料更新成功');
}
catch (error) {
@@ -61,11 +61,14 @@ export function EditProfileDialog({ user }: { user: ServiceUserUserInfoData }) {
const [open, setOpen] = useState(false);
useEffect(() => {
if (!open) {
setTimeout(() => {
const id = setTimeout(() => {
form.reset();
}, 200);
return () => clearTimeout(id);
}
}, [open, form]);
return (
<Dialog open={open} onOpenChange={setOpen}>

17
client/cms/src/components/profile/profile.container.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
import { useOtherUserInfo } from '@/hooks/data/useUserInfo';
import { utf8ToBase64 } from '@/lib/utils';
import { ProfileView } from './profile.view';
export function ProfileContainer({ userId }: { userId: string }) {
const { data } = useOtherUserInfo(userId);
const { mutateAsync } = useUpdateUser();
return (
<ProfileView
user={data.data!}
onSaveBio={async (bio) => {
await mutateAsync({ body: { bio: utf8ToBase64(bio) } });
}}
/>
);
}

12
client/cms/src/components/profile/profile.tsx → client/cms/src/components/profile/profile.view.tsx
View File

@@ -11,15 +11,13 @@ import { useMemo, useState } from 'react';
import Markdown from 'react-markdown';
import { toast } from 'sonner';
import { Avatar, AvatarImage } from '@/components/ui/avatar';
import { useUpdateUser } from '@/hooks/data/useUpdateUser';
import { base64ToUtf8, utf8ToBase64 } from '@/lib/utils';
import { base64ToUtf8 } from '@/lib/utils';
import { Button } from '../ui/button';
import { EditProfileDialog } from './edit-profile-dialog';
import { EditProfileDialogContainer } from './edit-profile.dialog.container';
export function Profile({ user }: { user: ServiceUserUserInfoData }) {
export function ProfileView({ user, onSaveBio }: { user: ServiceUserUserInfoData; onSaveBio: (bio: string) => Promise<void> }) {
const [bio, setBio] = useState<string | undefined>(() => base64ToUtf8(user.bio ?? ''));
const [enableBioEdit, setEnableBioEdit] = useState(false);
const { mutateAsync } = useUpdateUser();
const IdentIcon = useMemo(() => {
const avatar = createAvatar(identicon, {
@@ -48,7 +46,7 @@ export function Profile({ user }: { user: ServiceUserUserInfoData }) {
{user.email}
</div>
</div>
<EditProfileDialog user={user} />
<EditProfileDialogContainer data={user} />
</div>
</div>
<section className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center">
@@ -72,7 +70,7 @@ export function Profile({ user }: { user: ServiceUserUserInfoData }) {
else {
if (!isNil(bio)) {
try {
await mutateAsync({ body: { bio: utf8ToBase64(bio) } });
await onSaveBio(bio);
setEnableBioEdit(false);
}
catch (error) {

4
client/cms/src/components/sidebar/app-sidebar.tsx
View File

@@ -1,3 +1,4 @@
import type { NavData } from '@/lib/navData';
import * as React from 'react';
import NixOSLogo from '@/assets/nixos.svg?react';
import { NavMain } from '@/components/sidebar/nav-main';
@@ -11,10 +12,9 @@ import {
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/ui/sidebar';
import { navData } from '@/lib/navData';
import { NavUser } from './nav-user';
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
export function AppSidebar({ navData, ...props }: React.ComponentProps<typeof Sidebar> & { navData: NavData }) {
return (
<Sidebar collapsible="offcanvas" {...props}>
<SidebarHeader>

7
client/cms/src/components/sidebar/nav-user.tsx
View File

@@ -26,15 +26,14 @@ import {
useSidebar,
} from '@/components/ui/sidebar';
import { useUserInfo } from '@/hooks/data/useUserInfo';
import { useLogout } from '@/hooks/useLogout';
import { logout } from '@/lib/token';
import { withFallback } from '../hoc/with-fallback';
import { Skeleton } from '../ui/skeleton';
function NavUser_() {
export function NavUser_() {
const { isMobile } = useSidebar();
const { data } = useUserInfo();
const user = data.data!;
const { logout } = useLogout();
const IdentIcon = useMemo(() => {
const avatar = createAvatar(identicon, {
@@ -85,7 +84,7 @@ function NavUser_() {
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout}>
<DropdownMenuItem onClick={_e => logout()}>
<IconLogout />
登出
</DropdownMenuItem>

15
client/cms/src/components/site-header.tsx
View File

@@ -1,18 +1,7 @@
import { useRouterState } from '@tanstack/react-router';
import { Separator } from '@/components/ui/separator';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { navData } from '@/lib/navData';
export function SiteHeader() {
const pathname = useRouterState({ select: state => state.location.pathname });
const allNavItems = [...navData.navMain, ...navData.navSecondary];
const currentTitle
= allNavItems.find(item =>
item.url === '/'
? pathname === '/'
: pathname.startsWith(item.url),
)?.title ?? '工作台';
export function SiteHeader({ title }: { title: string }) {
return (
<header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
<div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
@@ -21,7 +10,7 @@ export function SiteHeader() {
orientation="vertical"
className="mx-2 data-[orientation=vertical]:h-4"
/>
<h1 className="text-base font-medium">{currentTitle}</h1>
<h1 className="text-base font-medium">{title}</h1>
</div>
</header>
);

7
client/cms/src/hooks/data/useUpdateUser.ts
View File

@@ -1,12 +1,17 @@
import type { ServiceUserUserInfoData } from '@/client';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { getUserInfoQueryKey, patchUserUpdateMutation } from '@/client/@tanstack/react-query.gen';
import { getUserInfoByUserIdQueryKey, getUserInfoQueryKey, patchUserUpdateMutation } from '@/client/@tanstack/react-query.gen';
export function useUpdateUser() {
const queryClient = useQueryClient();
const data: { data: ServiceUserUserInfoData | undefined } | undefined = queryClient.getQueryData(getUserInfoQueryKey());
return useMutation({
...patchUserUpdateMutation(),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: getUserInfoQueryKey() });
if ((data?.data?.user_id) != null) {
await queryClient.invalidateQueries({ queryKey: getUserInfoByUserIdQueryKey({ path: { user_id: data.data.user_id } }) });
}
},
});
}

14
client/cms/src/hooks/useLogout.ts
View File

@@ -1,14 +0,0 @@
import { useNavigate } from '@tanstack/react-router';
import { useCallback } from 'react';
import { clearTokens } from '@/lib/token';
export function useLogout() {
const navigate = useNavigate();
const logout = useCallback(() => {
clearTokens();
void navigate({ to: '/authorize' });
}, [navigate]);
return { logout };
}

1
client/cms/src/lib/navData.ts
View File

@@ -25,3 +25,4 @@ export const navData = {
},
],
};
export type NavData = typeof navData;

4
client/cms/src/lib/token.ts
View File

@@ -44,9 +44,9 @@ export async function doRefreshToken(refreshToken: string): Promise<ServiceAuthT
return data?.data;
}
export function logout(message: string = 'Logged out') {
export function logout(message: string = '已登出') {
clearTokens();
void router.navigate({ to: '/authorize' }).then(() => {
toast.error(message);
toast.info(message);
});
}

2
client/cms/src/routes/__root.tsx
View File

@@ -12,11 +12,9 @@ const queryClient = new QueryClient({
const status
// eslint-disable-next-line ts/no-unsafe-member-access
= error?.response?.status ?? error?.status;
if (status >= 400 && status < 500) {
return false;
}
return failureCount < 3;
},
},

16
client/cms/src/routes/_workbenchLayout.tsx
View File

@@ -1,13 +1,23 @@
import { createFileRoute, Outlet } from '@tanstack/react-router';
import { createFileRoute, Outlet, useRouterState } from '@tanstack/react-router';
import { AppSidebar } from '@/components/sidebar/app-sidebar';
import { SiteHeader } from '@/components/site-header';
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
import { navData } from '@/lib/navData';
export const Route = createFileRoute('/_workbenchLayout')({
component: RouteComponent,
});
function RouteComponent() {
const pathname = useRouterState({ select: state => state.location.pathname });
const allNavItems = [...navData.navMain, ...navData.navSecondary];
const title
= allNavItems.find(item =>
item.url === '/'
? pathname === '/'
: pathname.startsWith(item.url),
)?.title ?? '工作台';
return (
<SidebarProvider
style={
@@ -17,9 +27,9 @@ function RouteComponent() {
} as React.CSSProperties
}
>
<AppSidebar variant="inset" />
<AppSidebar navData={navData} variant="inset" />
<SidebarInset>
<SiteHeader />
<SiteHeader title={title} />
<div className="flex flex-1 flex-col">
<div className="@container/main flex flex-1 flex-col gap-2">
<Outlet />

10
client/cms/src/routes/_workbenchLayout/profile.$userId.tsx
View File

@@ -1,20 +1,14 @@
import { createFileRoute } from '@tanstack/react-router';
import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { Profile } from '@/components/profile/profile';
import { ProfileContainer } from '@/components/profile/profile.container';
import { ProfileError } from '@/components/profile/profile.error';
import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
import { useOtherUserInfo } from '@/hooks/data/useUserInfo';
export const Route = createFileRoute('/_workbenchLayout/profile/$userId')({
component: RouteComponent,
});
function ProfileByUserId({ userId }: { userId: string }) {
const { data } = useOtherUserInfo(userId);
return <Profile user={data.data!} />;
}
function RouteComponent() {
const { userId } = Route.useParams();
return (
@@ -26,7 +20,7 @@ function RouteComponent() {
}}
>
<Suspense fallback={<ProfileSkeleton />}>
<ProfileByUserId userId={userId} />
<ProfileContainer userId={userId} />
</Suspense>
</ErrorBoundary>
</div>

8
client/cms/src/routes/_workbenchLayout/profile.index.tsx
View File

@@ -1,4 +1,8 @@
import { createFileRoute, Navigate } from '@tanstack/react-router';
import { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { ProfileError } from '@/components/profile/profile.error';
import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
import { useUserInfo } from '@/hooks/data/useUserInfo';
export const Route = createFileRoute('/_workbenchLayout/profile/')({
@@ -8,6 +12,10 @@ export const Route = createFileRoute('/_workbenchLayout/profile/')({
function RouteComponent() {
const { data } = useUserInfo();
return (
<ErrorBoundary fallback={<ProfileError reason="获取用户个人资料失败" />}>
<Suspense fallback={<ProfileSkeleton />}>
<Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
</Suspense>
</ErrorBoundary>
);
}

2
client/cms/src/routes/authorize.tsx
View File

@@ -41,7 +41,7 @@ function RouteComponent() {
},
});
}
}, [token, mutation.isIdle]);
}, [token, mutation.isIdle, mutation, oauthParams.client_id, oauthParams.redirect_uri, oauthParams.state]);
return (
<div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
<div className="w-full max-w-sm">

12
client/cms/src/stories/nav-user.stories.tsx Normal file
View File

@@ -0,0 +1,12 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { NavUser_ } from '@/components/sidebar/nav-user';
const meta = {
title: 'NavUser',
component: NavUser_,
} satisfies Meta<typeof NavUser_>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {};

43
client/cms/src/stories/profile/edit-profile.dialog.stories.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { EditProfileDialogView } from '@/components/profile/edit-profile.dialog.view';
const meta = {
title: 'Profile/EditDialog',
component: EditProfileDialogView,
decorators: [
Story => (
<div style={{
height: '100vh',
maxWidth: '256px',
margin: 'auto',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<Story />
</div>
),
],
} satisfies Meta<typeof EditProfileDialogView>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
user: {
username: 'nvirellia',
nickname: 'Noa Virellia',
subtitle: '天生骄傲',
email: 'noa@requiem.garden',
bio: '',
avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
},
updateProfile: async () => { },
},
parameters: {
layout: 'fullscreen',
},
};

12
client/cms/src/stories/profile.stories.tsx → client/cms/src/stories/profile/profile.stories.tsx
View File

@@ -1,14 +1,14 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Profile } from '@/components/profile/profile';
import { ProfileError } from '@/components/profile/profile.error';
import { ProfileSkeleton } from '@/components/profile/profile.skeleton';
import { ProfileView } from '@/components/profile/profile.view';
const queryClient = new QueryClient();
const meta = {
title: 'Profile',
component: Profile,
title: 'Profile/View',
component: ProfileView,
decorators: [
Story => (
<QueryClientProvider client={queryClient}>
@@ -16,7 +16,7 @@ const meta = {
</QueryClientProvider>
),
],
} satisfies Meta<typeof Profile>;
} satisfies Meta<typeof ProfileView>;
export default meta;
type Story = StoryObj<typeof meta>;
@@ -31,13 +31,16 @@ export const Primary: Story = {
bio: '',
avatar: 'https://avatars.githubusercontent.com/u/54884471?v=4',
},
onSaveBio: async () => Promise.resolve(),
},
};
export const Skeleton: Story = {
render: () => <ProfileSkeleton />,
args: {
user: {},
onSaveBio: async () => Promise.resolve(),
},
};
@@ -47,5 +50,6 @@ export const Error: Story = {
user: {
allow_public: false,
},
onSaveBio: async () => Promise.resolve(),
},
};