Browse Source

✨ feat(users): 增加用户头像显示功能

- 在用户列表中添加头像列
- 实现头像显示逻辑:优先显示用户上传的头像,若无则显示用户名首字母的默认头像
- 优化头像样式,使用圆形显示并添加适当的尺寸和边距
yourname 4 tháng trước cách đây
mục cha
commit
7b01804e11
1 tập tin đã thay đổi với 18 bổ sung0 xóa
  1. 18 0
      src/client/admin-shadcn/pages/Users.tsx

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

@@ -268,6 +268,7 @@ export const UsersPage = () => {
             <Table>
               <TableHeader>
                 <TableRow>
+                  <TableHead>头像</TableHead>
                   <TableHead>用户名</TableHead>
                   <TableHead>昵称</TableHead>
                   <TableHead>邮箱</TableHead>
@@ -281,6 +282,23 @@ export const UsersPage = () => {
               <TableBody>
                 {users.map((user) => (
                   <TableRow key={user.id}>
+                    <TableCell>
+                      <div className="w-10 h-10">
+                        {user.avatarFile?.fullUrl ? (
+                          <img
+                            src={user.avatarFile.fullUrl}
+                            alt={user.username}
+                            className="w-10 h-10 rounded-full object-cover"
+                          />
+                        ) : (
+                          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+                            <span className="text-sm font-medium text-gray-500">
+                              {user.username?.charAt(0)?.toUpperCase() || 'U'}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
                     <TableCell className="font-medium">{user.username}</TableCell>
                     <TableCell>{user.nickname || '-'}</TableCell>
                     <TableCell>{user.email || '-'}</TableCell>