Browse Source

✨ feat(users): 添加用户头像上传功能

- 导入FileSelector组件用于文件选择
- 添加头像选择对话框状态管理
- 在创建用户表单中添加头像上传字段
- 在编辑用户表单中添加头像上传字段
- 实现头像选择按钮交互逻辑
yourname 4 months ago
parent
commit
7b0a75bdad
1 changed files with 42 additions and 0 deletions
  1. 42 0
      src/client/admin-shadcn/pages/Users.tsx

+ 42 - 0
src/client/admin-shadcn/pages/Users.tsx

@@ -12,6 +12,7 @@ import { Badge } from '@/client/components/ui/badge';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/client/components/ui/dialog';
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/client/components/ui/form';
 import { DataTablePagination } from '@/client/admin-shadcn/components/DataTablePagination';
+import FileSelector from '@/client/admin-shadcn/components/FileSelector';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { toast } from 'sonner';
@@ -42,6 +43,7 @@ export const UsersPage = () => {
   const [editingUser, setEditingUser] = useState<any>(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [userToDelete, setUserToDelete] = useState<number | null>(null);
+  const [isAvatarSelectorOpen, setIsAvatarSelectorOpen] = useState(false);
 
   const [isCreateForm, setIsCreateForm] = useState(true);
   
@@ -439,6 +441,26 @@ export const UsersPage = () => {
                   )}
                 />
 
+                <FormField
+                  control={createForm.control}
+                  name="avatarFileId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>头像</FormLabel>
+                      <FormControl>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => setIsAvatarSelectorOpen(true)}
+                        >
+                          选择头像
+                        </Button>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
                 <FormField
                   control={createForm.control}
                   name="isDisabled"
@@ -560,6 +582,26 @@ export const UsersPage = () => {
                   )}
                 />
 
+                <FormField
+                  control={updateForm.control}
+                  name="avatarFileId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>头像</FormLabel>
+                      <FormControl>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={() => setIsAvatarSelectorOpen(true)}
+                        >
+                          选择头像
+                        </Button>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
                 <FormField
                   control={updateForm.control}
                   name="isDisabled"