[重构] 前端改造v5

atsf_server/web/features/users/components/users-page.tsx

@@ -1,10 +1,11 @@
-'use client';
-
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { EmptyState } from '@/components/feedback/empty-state';
 import { ErrorState } from '@/components/feedback/error-state';
@@ -92,10 +93,11 @@ function toPayload(values: UserFormValues): UserMutationPayload {
   };
 }
 
-export function UsersPage() {
-  const queryClient = useQueryClient();
-  const { user: currentUser } = useAuth();
-  const [page, setPage] = useState(0);
+export function UsersPage() {
+  const queryClient = useQueryClient();
+  const searchParams = useSearchParams();
+  const { user: currentUser } = useAuth();
+  const [page, setPage] = useState(0);
   const [searchInput, setSearchInput] = useState('');
   const [searchKeyword, setSearchKeyword] = useState('');
   const [editingUserId, setEditingUserId] = useState<number | null>(null);
@@ -127,15 +129,35 @@ export function UsersPage() {
     enabled: isAdmin && editingUserId !== null,
   });
 
-  useEffect(() => {
-    if (editingUserQuery.data) {
-      form.reset({
+  useEffect(() => {
+    if (editingUserQuery.data) {
+      form.reset({
         username: editingUserQuery.data.username,
         display_name: editingUserQuery.data.display_name || '',
         password: '',
       });
-    }
-  }, [editingUserQuery.data, form]);
+    }
+  }, [editingUserQuery.data, form]);
+
+  useEffect(() => {
+    const editParam = searchParams?.get('edit');
+    const modeParam = searchParams?.get('mode');
+
+    if (editParam) {
+      const parsedUserId = Number.parseInt(editParam, 10);
+      if (!Number.isNaN(parsedUserId) && parsedUserId > 0) {
+        setFeedback(null);
+        setEditingUserId(parsedUserId);
+      }
+      return;
+    }
+
+    if (modeParam === 'create') {
+      setFeedback(null);
+      setEditingUserId(null);
+      form.reset(defaultValues);
+    }
+  }, [form, searchParams]);
 
   const saveMutation = useMutation({
     mutationFn: async (values: UserFormValues) => {