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

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/profile/profile.error.tsx

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

client/cms/src/stories/events/event-grid.stories.tsx

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

client/cms/src/stories/profile/profile.stories.tsx

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