From d230d7474e106b4c9e498b5d99bb09df2967ca65 Mon Sep 17 00:00:00 2001
From: Noa Virellia <noa@requiem.garden>
Date: Fri, 13 Feb 2026 11:56:25 +0800
Subject: [PATCH] refactor: improve code quality

Signed-off-by: Noa Virellia <noa@requiem.garden>
---
 .../event-grid/event-grid.container.tsx       | 47 +++++++-----
 .../events/joined-events.containers.tsx       | 14 ++--
 client/cms/src/components/login-form.tsx      | 73 +++++++++++++------
 .../src/components/profile/profile.view.tsx   | 12 +--
 client/cms/src/lib/utils.ts                   | 10 ---
 5 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/client/cms/src/components/events/event-grid/event-grid.container.tsx b/client/cms/src/components/events/event-grid/event-grid.container.tsx
index a9722fe..8e4da25 100644
--- a/client/cms/src/components/events/event-grid/event-grid.container.tsx
+++ b/client/cms/src/components/events/event-grid/event-grid.container.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useEvents } from '@/hooks/data/useEvents';
 import { Button } from '../../ui/button';
 import { DialogTrigger } from '../../ui/dialog';
@@ -10,30 +11,36 @@ import { EventGridView } from './event-grid.view';
 export function EventGridContainer() {
   const { data, isLoading } = useEvents();
 
+  const events = useMemo(() => {
+    return data?.pages.flatMap(page => page.data ?? []).map(toEventInfo) ?? [];
+  }, [data]);
+
   return (
     isLoading
       ? <EventGridSkeleton />
       : (
-        <EventGridView
-          events={data.pages.flatMap(page => page.data ?? []).map(toEventInfo)}
-          footer={(eventInfo) => {
-            const Container = eventInfo.requireKyc ? KycDialogContainer : EventJoinDialogContainer;
+          <EventGridView
+            events={events}
+            footer={(eventInfo) => {
+              const Container = eventInfo.requireKyc ? KycDialogContainer : EventJoinDialogContainer;
 
-            return (
-              <Container event={eventInfo}>
-                {eventInfo.isJoined ? (
-                  <Button className="w-full" disabled>
-                    已加入
-                  </Button>
-                ) : (
-                  <DialogTrigger asChild>
-                    <Button className="w-full">加入活动</Button>
-                  </DialogTrigger>
-                )}
-              </Container>
-            );
-          }}
-        />
-      )
+              return (
+                <Container event={eventInfo}>
+                  {eventInfo.isJoined
+                    ? (
+                        <Button className="w-full" disabled>
+                          已加入
+                        </Button>
+                      )
+                    : (
+                        <DialogTrigger asChild>
+                          <Button className="w-full">加入活动</Button>
+                        </DialogTrigger>
+                      )}
+                </Container>
+              );
+            }}
+          />
+        )
   );
 }
diff --git a/client/cms/src/components/events/joined-events.containers.tsx b/client/cms/src/components/events/joined-events.containers.tsx
index 5dbdbbd..76b7283 100644
--- a/client/cms/src/components/events/joined-events.containers.tsx
+++ b/client/cms/src/components/events/joined-events.containers.tsx
@@ -37,12 +37,12 @@ export function JoinedEventsContainer() {
     isLoading
       ? <EventGridSkeleton />
       : (
-        <EventGridView
-          events={data.pages.flatMap(page => page.data ?? []).map(toEventInfo)}
-          footer={event => (
-            <JoinedEventGridFooter event={event} />
-          )}
-        />
-      )
+          <EventGridView
+            events={data.pages.flatMap(page => page.data ?? []).map(toEventInfo)}
+            footer={event => (
+              <JoinedEventGridFooter event={event} />
+            )}
+          />
+        )
   );
 }
diff --git a/client/cms/src/components/login-form.tsx b/client/cms/src/components/login-form.tsx
index d680048..d03042f 100644
--- a/client/cms/src/components/login-form.tsx
+++ b/client/cms/src/components/login-form.tsx
@@ -1,14 +1,17 @@
 import type { TurnstileInstance } from '@marsidev/react-turnstile';
 import type { AuthorizeSearchParams } from '@/routes/authorize';
 import { Turnstile } from '@marsidev/react-turnstile';
+import { useForm } from '@tanstack/react-form';
 import { useNavigate } from '@tanstack/react-router';
 import { Loader2 } from 'lucide-react';
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
+import z from 'zod';
 import NixOSLogo from '@/assets/nixos.svg?react';
 import { Button } from '@/components/ui/button';
 import {
   Field,
+  FieldError,
   FieldGroup,
   FieldLabel,
 } from '@/components/ui/field';
@@ -23,29 +26,43 @@ export function LoginForm({
 }: React.ComponentProps<'div'> & {
   oauthParams: AuthorizeSearchParams;
 }) {
-  const formRef = useRef<HTMLFormElement>(null);
   const turnstileRef = useRef<TurnstileInstance>(null);
   const [token, setToken] = useState<string | null>(import.meta.env.DEV ? 'turnstile_token' : null);
   const { mutateAsync, isPending } = useGetMagicLink();
   const navigate = useNavigate();
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const formData = new FormData(formRef.current!);
-    const email = formData.get('email')! as string;
-    mutateAsync({ body: { email, turnstile_token: token!, ...oauthParams } }).then(() => {
-      void navigate({ to: '/magicLinkSent', search: { email } });
-    }).catch((error) => {
-      console.error(error);
-      toast.error('请求登录链接失败');
-      turnstileRef.current?.reset();
-    });
-  };
+  const form = useForm({
+    defaultValues: {
+      email: '',
+    },
+    validators: {
+      onSubmit: z.object({
+        email: z.string().email('请输入有效的邮箱地址'),
+      }),
+    },
+    onSubmit: async ({ value }) => {
+      try {
+        await mutateAsync({ body: { email: value.email, turnstile_token: token!, ...oauthParams } });
+        await navigate({ to: '/magicLinkSent', search: { email: value.email } });
+      }
+      catch (error) {
+        console.error(error);
+        toast.error('请求登录链接失败');
+        turnstileRef.current?.reset();
+      }
+    },
+  });
 
   const isLoading = isPending || token === null;
   return (
     <div className={cn('flex flex-col gap-6', className)} {...props}>
-      <form ref={formRef} onSubmit={handleSubmit}>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
         <FieldGroup>
           <div className="flex flex-col items-center gap-2 text-center">
             <div className="flex size-8 items-center justify-center rounded-md">
@@ -54,16 +71,24 @@ export function LoginForm({
             <span className="sr-only">Nix CN CMS</span>
             <h1 className="text-xl font-bold">欢迎来到 Nix CN CMS</h1>
           </div>
-          <Field>
-            <FieldLabel htmlFor="email">参会登记Email</FieldLabel>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              placeholder="edolstra@gmail.com"
-              required
-            />
-          </Field>
+          <form.Field name="email">
+            {field => (
+              <Field>
+                <FieldLabel htmlFor="email">参会登记Email</FieldLabel>
+                <Input
+                  id="email"
+                  name="email"
+                  type="email"
+                  placeholder="edolstra@gmail.com"
+                  required
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={e => field.handleChange(e.target.value)}
+                />
+                <FieldError errors={field.state.meta.errors} />
+              </Field>
+            )}
+          </form.Field>
           <Field>
             <Button type="submit" disabled={isLoading}>
               {isLoading && <Loader2 className="animate-spin" />}
diff --git a/client/cms/src/components/profile/profile.view.tsx b/client/cms/src/components/profile/profile.view.tsx
index c0eb78d..7cd5438 100644
--- a/client/cms/src/components/profile/profile.view.tsx
+++ b/client/cms/src/components/profile/profile.view.tsx
@@ -54,12 +54,12 @@ export function ProfileView({ user, onSaveBio }: { user: ServiceUserUserInfoData
         {/* Bio */}
         {enableBioEdit
           ? (
-            <MDEditor
-              value={bio}
-              onChange={setBio}
-              height="100%"
-            />
-          )
+              <MDEditor
+                value={bio}
+                onChange={setBio}
+                height="100%"
+              />
+            )
           : <div className="p-6 prose dark:prose-invert"><Markdown>{bio}</Markdown></div>}
         <Button
           className="absolute bottom-4 right-4"
diff --git a/client/cms/src/lib/utils.ts b/client/cms/src/lib/utils.ts
index c9aea18..b47b021 100644
--- a/client/cms/src/lib/utils.ts
+++ b/client/cms/src/lib/utils.ts
@@ -1,4 +1,3 @@
-import type { Query } from '@tanstack/react-query';
 import type { ClassValue } from 'clsx';
 // eslint-disable-next-line unicorn/prefer-node-protocol
 import { Buffer } from 'buffer';
@@ -19,15 +18,6 @@ export function utf8ToBase64(utf8: string): string {
   return Buffer.from(utf8, 'utf-8').toString('base64');
 }
 
-export function invalidateBlurry(id: string) {
-  return {
-    predicate: (query: Query<unknown, Error, unknown, readonly unknown[]>) => {
-      const key = query.queryKey[0] as { _id: string };
-      return key?._id === id;
-    },
-  };
-}
-
 export function isInDateRange(start: Date, end: Date, target: Date = new Date()): boolean {
   const time = target.getTime();
   return time >= start.getTime() && time <= end.getTime();