From 73ca60e1cefeb8500012d3e09e4bfb35f1b9ea06 Mon Sep 17 00:00:00 2001
From: Noa Virellia <noa@requiem.garden>
Date: Wed, 11 Feb 2026 22:22:00 +0800
Subject: [PATCH] feat(events): add nickname requirement dialog for events

Signed-off-by: Noa Virellia <noa@requiem.garden>
---
 .../nickname-needed.dialog.container.tsx      | 15 ++++++++++++
 .../events/nickname-needed.dialog.view.tsx    | 24 +++++++++++++++++++
 .../routes/_workbenchLayout/events/index.tsx  |  2 ++
 .../routes/_workbenchLayout/profile/index.tsx |  6 +----
 .../events/nickname-needed-dialog.stories.tsx | 24 +++++++++++++++++++
 5 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 client/cms/src/components/events/nickname-needed.dialog.container.tsx
 create mode 100644 client/cms/src/components/events/nickname-needed.dialog.view.tsx
 create mode 100644 client/cms/src/stories/events/nickname-needed-dialog.stories.tsx

diff --git a/client/cms/src/components/events/nickname-needed.dialog.container.tsx b/client/cms/src/components/events/nickname-needed.dialog.container.tsx
new file mode 100644
index 0000000..608361e
--- /dev/null
+++ b/client/cms/src/components/events/nickname-needed.dialog.container.tsx
@@ -0,0 +1,15 @@
+import { useNavigate } from '@tanstack/react-router';
+import { isEmpty } from 'lodash-es';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
+import { Dialog } from '../ui/dialog';
+import { NicknameNeededDialogView } from './nickname-needed.dialog.view';
+
+export function NicknameNeededDialogContainer() {
+  const { data } = useUserInfo();
+  const navigate = useNavigate();
+  return (
+    <Dialog open={isEmpty(data?.data?.nickname)}>
+      <NicknameNeededDialogView onAction={() => void navigate({ to: '/profile' })} />
+    </Dialog>
+  );
+}
diff --git a/client/cms/src/components/events/nickname-needed.dialog.view.tsx b/client/cms/src/components/events/nickname-needed.dialog.view.tsx
new file mode 100644
index 0000000..195d298
--- /dev/null
+++ b/client/cms/src/components/events/nickname-needed.dialog.view.tsx
@@ -0,0 +1,24 @@
+import { HatGlasses } from 'lucide-react';
+import { Button } from '../ui/button';
+import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
+
+export function NicknameNeededDialogView({ onAction }: { onAction: () => void }) {
+  return (
+    <DialogContent
+      showCloseButton={false}
+    >
+      <DialogHeader>
+        <DialogTitle>请先填写昵称</DialogTitle>
+        <DialogDescription>
+          如要加入活动，请先于「个人资料」页面填写昵称。
+          <div className="flex justify-center my-12">
+            <HatGlasses size={100} className="stroke-[1.5]" />
+          </div>
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter>
+        <Button onClick={onAction}>去填写</Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
diff --git a/client/cms/src/routes/_workbenchLayout/events/index.tsx b/client/cms/src/routes/_workbenchLayout/events/index.tsx
index d5db551..807b240 100644
--- a/client/cms/src/routes/_workbenchLayout/events/index.tsx
+++ b/client/cms/src/routes/_workbenchLayout/events/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { EventGridContainer } from '@/components/events/event-grid/event-grid.container';
+import { NicknameNeededDialogContainer } from '@/components/events/nickname-needed.dialog.container';
 
 export const Route = createFileRoute('/_workbenchLayout/events/')({
   component: RouteComponent,
@@ -8,6 +9,7 @@ export const Route = createFileRoute('/_workbenchLayout/events/')({
 function RouteComponent() {
   return (
     <div className="py-4 px-6 md:gap-6 md:py-6 h-full">
+      <NicknameNeededDialogContainer />
       <EventGridContainer />
     </div>
   );
diff --git a/client/cms/src/routes/_workbenchLayout/profile/index.tsx b/client/cms/src/routes/_workbenchLayout/profile/index.tsx
index db4ea2d..ef8f2fe 100644
--- a/client/cms/src/routes/_workbenchLayout/profile/index.tsx
+++ b/client/cms/src/routes/_workbenchLayout/profile/index.tsx
@@ -1,7 +1,5 @@
 import { createFileRoute, Navigate } from '@tanstack/react-router';
-import { Suspense } from 'react';
 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/')({
@@ -14,8 +12,6 @@ export const Route = createFileRoute('/_workbenchLayout/profile/')({
 function RouteComponent() {
   const { data } = useUserInfo();
   return (
-    <Suspense fallback={<ProfileSkeleton />}>
-      <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
-    </Suspense>
+    <Navigate to="/profile/$userId" params={{ userId: data.data!.user_id! }} />
   );
 }
diff --git a/client/cms/src/stories/events/nickname-needed-dialog.stories.tsx b/client/cms/src/stories/events/nickname-needed-dialog.stories.tsx
new file mode 100644
index 0000000..27cf1e8
--- /dev/null
+++ b/client/cms/src/stories/events/nickname-needed-dialog.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NicknameNeededDialogView } from '@/components/events/nickname-needed.dialog.view';
+import { Dialog } from '@/components/ui/dialog';
+
+const meta = {
+  title: 'Events/NicknameNeededDialog',
+  component: NicknameNeededDialogView,
+  decorators: [
+    Story => (
+      <Dialog open={true}>
+        <Story />
+      </Dialog>
+    ),
+  ],
+} satisfies Meta<typeof NicknameNeededDialogView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    onAction: () => { },
+  },
+};