2
0
Просмотр исходного кода

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

- 在用户列表中添加头像列
- 显示用户头像图片,若不存在则显示用户名/昵称首字母的默认头像
- 使用圆形样式展示头像,增强视觉效果
yourname 6 месяцев назад
Родитель
Сommit
8ec27f40d9
1 измененных файлов с 14 добавлено и 0 удалено
  1. 14 0
      src/client/admin/pages/Users.tsx

+ 14 - 0
src/client/admin/pages/Users.tsx

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