zetaloop
315 lines
10 KiB
TypeScript
315 lines
10 KiB
TypeScript
"use client"
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { EmptyState } from "@/components/ui/empty-state"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import {
|
|
inviteShopPlayer,
|
|
listPlayers,
|
|
listPlayersByShop,
|
|
listShopInvitations,
|
|
removeShopPlayer,
|
|
} from "@/lib/api"
|
|
import { toApiError } from "@/lib/errors"
|
|
import { useMyShop } from "@/lib/hooks/use-my-shop"
|
|
import { notifyInfo, notifySuccess } from "@/lib/toast"
|
|
import type { Player } from "@/lib/types"
|
|
import { AlertCircle, MoreHorizontal, Star, UserPlus } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
available: "在线",
|
|
busy: "忙碌",
|
|
offline: "离线",
|
|
}
|
|
|
|
const statusVariants: Record<string, "default" | "secondary" | "outline"> = {
|
|
available: "default",
|
|
busy: "secondary",
|
|
offline: "outline",
|
|
}
|
|
|
|
export default function EmployeesPage() {
|
|
const [search, setSearch] = useState("")
|
|
const { shop, loading, error, refreshShop } = useMyShop()
|
|
const [players, setPlayers] = useState<Player[]>([])
|
|
const [shopPlayers, setShopPlayers] = useState<Player[]>([])
|
|
const [pendingPlayerIds, setPendingPlayerIds] = useState<Set<string>>(new Set())
|
|
const [dataLoading, setDataLoading] = useState(true)
|
|
const [saving, setSaving] = useState(false)
|
|
|
|
const loadData = useCallback(async () => {
|
|
if (!shop) return
|
|
|
|
setDataLoading(true)
|
|
try {
|
|
const [nextPlayers, nextShopPlayers, invitations] = await Promise.all([
|
|
listPlayers(),
|
|
listPlayersByShop(shop.id),
|
|
listShopInvitations(shop.id),
|
|
])
|
|
setPlayers(nextPlayers)
|
|
setShopPlayers(nextShopPlayers)
|
|
setPendingPlayerIds(
|
|
new Set(
|
|
invitations
|
|
.filter((invitation) => invitation.status === "pending")
|
|
.map((invitation) => String(invitation.playerId)),
|
|
),
|
|
)
|
|
} catch (error) {
|
|
notifyInfo(toApiError(error).msg)
|
|
} finally {
|
|
setDataLoading(false)
|
|
}
|
|
}, [shop])
|
|
|
|
useEffect(() => {
|
|
if (!shop) return
|
|
|
|
let cancelled = false
|
|
|
|
Promise.all([listPlayers(), listPlayersByShop(shop.id), listShopInvitations(shop.id)])
|
|
.then(([nextPlayers, nextShopPlayers, invitations]) => {
|
|
if (cancelled) return
|
|
setPlayers(nextPlayers)
|
|
setShopPlayers(nextShopPlayers)
|
|
setPendingPlayerIds(
|
|
new Set(
|
|
invitations
|
|
.filter((invitation) => invitation.status === "pending")
|
|
.map((invitation) => String(invitation.playerId)),
|
|
),
|
|
)
|
|
})
|
|
.catch((error) => {
|
|
if (cancelled) return
|
|
notifyInfo(toApiError(error).msg)
|
|
})
|
|
.finally(() => {
|
|
if (cancelled) return
|
|
setDataLoading(false)
|
|
})
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [shop])
|
|
|
|
const filteredPlayers = useMemo(() => {
|
|
if (!shop) return []
|
|
return shopPlayers.filter(
|
|
(player) =>
|
|
player.shopId === shop.id &&
|
|
player.user.nickname.toLowerCase().includes(search.trim().toLowerCase()),
|
|
)
|
|
}, [search, shop, shopPlayers])
|
|
|
|
const inviteCandidate = useMemo(
|
|
() =>
|
|
shop
|
|
? players.find((player) => player.shopId !== shop.id && !pendingPlayerIds.has(player.id))
|
|
: undefined,
|
|
[pendingPlayerIds, players, shop],
|
|
)
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-8">
|
|
<EmptyState title="员工信息加载中" icon={UserPlus} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-8">
|
|
<EmptyState title="员工信息加载失败" description={error} icon={AlertCircle} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!shop) {
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-8">
|
|
<EmptyState title="当前账号没有可管理的店铺" icon={UserPlus} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const handleInvite = async () => {
|
|
if (!inviteCandidate) return
|
|
|
|
setSaving(true)
|
|
try {
|
|
await inviteShopPlayer(shop.id, inviteCandidate.id)
|
|
await loadData()
|
|
notifySuccess("邀请已发送")
|
|
} catch (error) {
|
|
notifyInfo(toApiError(error).msg)
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
const handleRemove = async (player: Player) => {
|
|
setSaving(true)
|
|
try {
|
|
await removeShopPlayer(shop.id, player.id)
|
|
await Promise.all([loadData(), refreshShop()])
|
|
notifySuccess("打手已移除")
|
|
} catch (error) {
|
|
notifyInfo(toApiError(error).msg)
|
|
} finally {
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">员工管理</h1>
|
|
<Button
|
|
onClick={() => {
|
|
void handleInvite()
|
|
}}
|
|
disabled={saving || !inviteCandidate}
|
|
>
|
|
<UserPlus className="mr-1 h-4 w-4" />
|
|
邀请打手
|
|
</Button>
|
|
</div>
|
|
|
|
<Card className="border-border/80 shadow-sm">
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base">签约打手 ({filteredPlayers.length})</CardTitle>
|
|
<Input
|
|
placeholder="搜索打手..."
|
|
className="max-w-xs"
|
|
value={search}
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
/>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>打手</TableHead>
|
|
<TableHead>擅长游戏</TableHead>
|
|
<TableHead>评分</TableHead>
|
|
<TableHead>完成率</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{dataLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="py-6">
|
|
<EmptyState title="员工加载中" icon={UserPlus} className="min-h-[180px]" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredPlayers.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="py-6">
|
|
<EmptyState
|
|
title="暂无签约打手"
|
|
description="邀请打手加入后会出现在这里。"
|
|
icon={UserPlus}
|
|
className="min-h-[180px] border-dashed"
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredPlayers.map((player) => (
|
|
<TableRow key={player.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={player.user.avatar} />
|
|
<AvatarFallback>{player.user.nickname[0]}</AvatarFallback>
|
|
</Avatar>
|
|
<div>
|
|
<p className="text-sm font-medium">{player.user.nickname}</p>
|
|
<p className="text-xs text-muted-foreground">{player.totalOrders} 单</p>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex gap-1 flex-wrap">
|
|
{player.games.map((game) => (
|
|
<Badge key={game} variant="secondary" className="text-xs">
|
|
{game}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-1">
|
|
<Star className="h-3.5 w-3.5 fill-warning text-warning" />
|
|
{player.rating}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{(player.completionRate * 100).toFixed(0)}%</TableCell>
|
|
<TableCell>
|
|
<Badge variant={statusVariants[player.status]}>
|
|
{statusLabels[player.status]}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem asChild>
|
|
<Link href={`/player/${player.id}`}>查看详情</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href="/dashboard/shop/rules">调整抽成</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
className="text-destructive"
|
|
onClick={() => {
|
|
void handleRemove(player)
|
|
}}
|
|
disabled={saving}
|
|
>
|
|
移除打手
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|