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

refactor(profile): update error display to use Empty component

Browse Source 
Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
Noa Virellia
2026-02-06 20:47:35 +08:00
parent 6411268090
commit 3c4e078bdd
3 changed files with 22 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/cms/src/components/profile/profile.error.tsx
View File

@@ -1,30 +1,16 @@
import { Mail } from 'lucide-react'; import { UserLock } from 'lucide-react';
import { Skeleton } from '../ui/skeleton'; import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../ui/empty';
export function ProfileError({ reason }: { reason: string }) { export function ProfileError({ reason }: { reason: string }) {
return ( return (
<div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8"> <Empty className="h-full">
<div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max"> <EmptyHeader>
<div className="flex flex-col w-full gap-3"> <EmptyMedia variant="icon">
<div className="flex flex-col w-full gap-3"> <UserLock />
<div className="flex flex-row gap-3 w-full lg:flex-col"> </EmptyMedia>
<Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" /> <EmptyTitle>无法查看此个人资料</EmptyTitle>
<div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2"> <EmptyDescription>{reason}</EmptyDescription>
<Skeleton className="w-32 h-8" /> </EmptyHeader>
<Skeleton className="w-20 h-6" /> </Empty>
</div>
</div>
<div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
<Mail className="h-4 w-4 stroke-muted-foreground" />
<Skeleton className="w-32 h-4" />
</div>
</div>
<Skeleton className="w-64 h-[40px]" />
</div>
</div>
<Skeleton 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 flex items-center justify-center">
{reason}
</Skeleton>
</div>
); );
} }

2
client/cms/src/stories/events/event-grid.stories.tsx
View File

@@ -65,7 +65,7 @@ export const Primary: Story = {
}; };
export const Empty: Story = { export const Empty: Story = {
decorators: [Story => <div className="h-screen">{Story()}</div>], decorators: [Story => <div className="h-screen"><Story /></div>],
args: { args: {
events: [], events: [],
footer: () => <Button className="w-full">加入活动</Button>, footer: () => <Button className="w-full">加入活动</Button>,

10
client/cms/src/stories/profile/profile.stories.tsx
View File

@@ -39,10 +39,20 @@ export const Loading: Story = {
export const Error: Story = { export const Error: Story = {
render: () => <ProfileError reason="用户个人资料未公开" />, render: () => <ProfileError reason="用户个人资料未公开" />,
decorators: [
Story => (
<div className="h-screen">
<Story />
</div>
),
],
args: { args: {
user: { user: {
allow_public: false, allow_public: false,
}, },
onSaveBio: async () => Promise.resolve(), onSaveBio: async () => Promise.resolve(),
}, },
parameters: {
layout: 'fullscreen',
},
}; };