59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useUser } from './user-context';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { ROLE_LABELS } from '@/lib/constants';
|
|
import { User, Settings, Crown, Briefcase } from 'lucide-react';
|
|
|
|
const roleIcons = {
|
|
owner: Crown,
|
|
pm: Briefcase,
|
|
member: User,
|
|
};
|
|
|
|
export function UserSwitcher() {
|
|
const { currentUser, users, setCurrentUserId, isLoading } = useUser();
|
|
|
|
if (isLoading || users.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed bottom-4 left-4 z-50">
|
|
<div className="bg-white rounded-lg shadow-lg border p-3 min-w-[220px]">
|
|
<div className="flex items-center gap-2 mb-2 text-xs text-muted-foreground">
|
|
<Settings className="h-3 w-3" />
|
|
<span>当前用户视角</span>
|
|
</div>
|
|
<Select value={currentUser?.id || ''} onValueChange={setCurrentUserId}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="选择用户" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{users.map((user) => {
|
|
const Icon = roleIcons[user.role];
|
|
return (
|
|
<SelectItem key={user.id} value={user.id}>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="h-6 w-6">
|
|
<AvatarFallback className="text-xs bg-slate-100">
|
|
{user.name.charAt(0)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span>{user.name}</span>
|
|
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
|
<Icon className="h-3 w-3" />
|
|
{ROLE_LABELS[user.role]}
|
|
</span>
|
|
</div>
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|