658 lines
31 KiB
TypeScript
658 lines
31 KiB
TypeScript
import { useQuery } from '@tanstack/react-query'
|
|
import {
|
|
Award,
|
|
Briefcase,
|
|
CheckCircle2,
|
|
FileText,
|
|
GraduationCap,
|
|
MapPin,
|
|
Shield,
|
|
Star,
|
|
Tag,
|
|
User,
|
|
Wrench,
|
|
XCircle,
|
|
} from 'lucide-react'
|
|
import { fetchUserDetail, fetchUserInfo, fetchUserServices } from '@/api/modules/users'
|
|
import { fetchExcProvider } from '@/api/modules/exc'
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
} from '@/components/ui/sheet'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
|
|
|
interface UserDetailSheetProps {
|
|
uid: string | null
|
|
onClose: () => void
|
|
onAssignRoles?: () => void
|
|
}
|
|
|
|
export function UserDetailSheet({ uid, onClose, onAssignRoles }: UserDetailSheetProps) {
|
|
// 1. Basic user account query (GET /api/admin/v1/users/{uid})
|
|
const userQuery = useQuery({
|
|
queryKey: ['users', uid],
|
|
queryFn: () => (uid ? fetchUserDetail(uid) : null),
|
|
enabled: uid !== null,
|
|
})
|
|
|
|
// 2. Full user profile, careers, educations, honors, addresses (GET /api/admin/v1/users/{uid}/info)
|
|
const userInfoQuery = useQuery({
|
|
queryKey: ['user-info', uid],
|
|
queryFn: async () => {
|
|
if (!uid) return null
|
|
try {
|
|
const res = await fetchUserInfo(uid)
|
|
return res.data
|
|
} catch {
|
|
return null
|
|
}
|
|
},
|
|
enabled: uid !== null,
|
|
})
|
|
|
|
// 3. User provided services (GET /api/admin/v1/users/{uid}/services)
|
|
const userServicesQuery = useQuery({
|
|
queryKey: ['user-services', uid],
|
|
queryFn: async () => {
|
|
if (!uid) return null
|
|
try {
|
|
const res = await fetchUserServices(uid)
|
|
return res.data
|
|
} catch {
|
|
return null
|
|
}
|
|
},
|
|
enabled: uid !== null,
|
|
})
|
|
|
|
// 4. Provider profile query (GET /api/admin/v1/exc/providers/{uid})
|
|
const providerQuery = useQuery({
|
|
queryKey: ['exc-provider', uid],
|
|
queryFn: async () => {
|
|
if (!uid) return null
|
|
try {
|
|
const res = await fetchExcProvider(uid)
|
|
return res.data
|
|
} catch {
|
|
return null
|
|
}
|
|
},
|
|
enabled: uid !== null,
|
|
retry: false,
|
|
})
|
|
|
|
const user = userQuery.data?.data
|
|
const userInfo = userInfoQuery.data
|
|
const userServices = userServicesQuery.data?.expertises ?? []
|
|
const provider = providerQuery.data
|
|
|
|
return (
|
|
<Sheet open={uid !== null} onOpenChange={(open) => !open && onClose()}>
|
|
<SheetContent className="sm:max-w-xl p-6 overflow-y-auto flex flex-col">
|
|
<SheetHeader className="border-b pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="size-12">
|
|
<AvatarImage src={user?.avatar ?? undefined} alt="" />
|
|
<AvatarFallback className="text-base font-semibold">
|
|
{(user?.display_name ?? user?.username ?? 'U').slice(0, 1).toUpperCase()}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0 flex-1">
|
|
<SheetTitle className="truncate text-base font-semibold flex items-center gap-2">
|
|
<span>{userInfo?.profile?.computed_fullname ?? user?.display_name ?? user?.username ?? '用户详情'}</span>
|
|
{userInfo?.profile?.gender && (
|
|
<Badge variant="outline" className="text-[10px]">
|
|
{userInfo.profile.gender}
|
|
</Badge>
|
|
)}
|
|
</SheetTitle>
|
|
<SheetDescription className="truncate text-xs font-mono">
|
|
{user?.uid}
|
|
</SheetDescription>
|
|
</div>
|
|
</div>
|
|
</SheetHeader>
|
|
|
|
{userQuery.isPending ? (
|
|
<div className="py-8 text-center text-sm text-muted-foreground">加载中…</div>
|
|
) : !user ? (
|
|
<div className="py-8 text-center text-sm text-muted-foreground">未找到用户信息</div>
|
|
) : (
|
|
<Tabs defaultValue="account" className="mt-2 flex-1 flex flex-col">
|
|
<TabsList className="grid w-full grid-cols-3">
|
|
<TabsTrigger value="account" className="gap-1.5 text-xs">
|
|
<User className="size-3.5" />
|
|
账号基础
|
|
</TabsTrigger>
|
|
<TabsTrigger value="info" className="gap-1.5 text-xs">
|
|
<FileText className="size-3.5" />
|
|
个人资料
|
|
</TabsTrigger>
|
|
<TabsTrigger value="services" className="gap-1.5 text-xs">
|
|
<Wrench className="size-3.5" />
|
|
服务事项 ({userServices.length})
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* TAB 1: ACCOUNT BASIC */}
|
|
<TabsContent value="account" className="flex flex-col gap-6 py-4 outline-none">
|
|
{/* Status overview */}
|
|
<div className="flex flex-wrap gap-2">
|
|
<Badge variant={user.status ? 'default' : 'destructive'}>
|
|
{user.status ? '正常启用' : '已禁用'}
|
|
</Badge>
|
|
{user.is_robot ? (
|
|
<Badge variant="secondary">机器人账号</Badge>
|
|
) : (
|
|
<Badge variant="outline">真人账号</Badge>
|
|
)}
|
|
{user.sid_display && (
|
|
<Badge variant="outline" className="font-mono">
|
|
SID: {user.sid_display}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
|
|
{/* Account Basic Info */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
账号基础属性
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">用户名</div>
|
|
<div className="font-medium">{user.username ?? '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">显示名称</div>
|
|
<div className="font-medium">{user.display_name ?? '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">SID</div>
|
|
<div className="font-mono text-xs">{user.sid ?? '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">专业领域</div>
|
|
<div className="font-medium">{user.expertise ?? '—'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact & Verification */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
联系方式与验证
|
|
</h4>
|
|
<div className="grid gap-2 rounded-lg border p-3 text-sm">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">邮箱</div>
|
|
<div className="font-medium">{user.email ?? '—'}</div>
|
|
</div>
|
|
{user.email && (
|
|
<Badge variant={user.email_verified_at ? 'secondary' : 'outline'} className="gap-1">
|
|
{user.email_verified_at ? (
|
|
<>
|
|
<CheckCircle2 className="size-3 text-emerald-500" />
|
|
已验证
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="size-3 text-amber-500" />
|
|
未验证
|
|
</>
|
|
)}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center justify-between border-t pt-2">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">手机号</div>
|
|
<div className="font-medium">{user.phone ?? '—'}</div>
|
|
</div>
|
|
{user.phone && (
|
|
<Badge variant={user.phone_verified_at ? 'secondary' : 'outline'} className="gap-1">
|
|
{user.phone_verified_at ? (
|
|
<>
|
|
<CheckCircle2 className="size-3 text-emerald-500" />
|
|
已验证
|
|
</>
|
|
) : (
|
|
<>
|
|
<XCircle className="size-3 text-amber-500" />
|
|
未验证
|
|
</>
|
|
)}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Roles */}
|
|
<div className="grid gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
已分配角色
|
|
</h4>
|
|
{onAssignRoles && (
|
|
<Button variant="ghost" size="sm" onClick={onAssignRoles} className="h-6 text-xs gap-1">
|
|
<Shield className="size-3" />
|
|
分配角色
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5 rounded-lg border p-3">
|
|
{user.roles && user.roles.length > 0 ? (
|
|
user.roles.map((role) => (
|
|
<Badge key={role} variant="secondary">
|
|
{role}
|
|
</Badge>
|
|
))
|
|
) : (
|
|
<span className="text-xs text-muted-foreground">未分配任何角色</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timestamps */}
|
|
<div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-xs text-muted-foreground">
|
|
<div>
|
|
<span>注册时间：</span>
|
|
<span>{new Date(user.created_at).toLocaleString('zh-CN')}</span>
|
|
</div>
|
|
{user.updated_at && (
|
|
<div>
|
|
<span>更新时间：</span>
|
|
<span>{new Date(user.updated_at).toLocaleString('zh-CN')}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* TAB 2: DETAILED INFO */}
|
|
<TabsContent value="info" className="flex flex-col gap-6 py-4 outline-none">
|
|
{userInfoQuery.isPending ? (
|
|
<div className="py-8 text-center text-sm text-muted-foreground">加载个人资料中…</div>
|
|
) : (
|
|
<>
|
|
{/* Profile Headline & Bio */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
个人名片与简介
|
|
</h4>
|
|
<div className="rounded-lg border bg-muted/30 p-3 text-xs space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-semibold text-sm text-foreground">
|
|
{userInfo?.profile?.computed_fullname ?? user.display_name ?? '—'}
|
|
</span>
|
|
{userInfo?.profile?.gender && (
|
|
<Badge variant="outline">{userInfo.profile.gender}</Badge>
|
|
)}
|
|
</div>
|
|
{userInfo?.profile?.headline && (
|
|
<div className="font-medium text-foreground">{userInfo.profile.headline}</div>
|
|
)}
|
|
{userInfo?.profile?.bio ? (
|
|
<div className="text-muted-foreground leading-relaxed">{userInfo.profile.bio}</div>
|
|
) : (
|
|
<div className="text-muted-foreground italic">暂无个人简介</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Region & Timezone */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
地区与语言偏好
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">国家/地区</div>
|
|
<div className="font-medium">{user.country_code ?? '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">城市</div>
|
|
<div className="font-medium">{user.city ?? '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">时区</div>
|
|
<div className="font-medium">{user.timezone ?? '—'}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">语言偏好</div>
|
|
<div className="font-medium">{user.locale ?? '—'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Careers / Work Experience */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
|
|
<Briefcase className="size-3.5" />
|
|
工作经历 ({(userInfo?.careers ?? []).length})
|
|
</h4>
|
|
{userInfo?.careers && userInfo.careers.length > 0 ? (
|
|
<div className="space-y-2 rounded-lg border p-3 text-xs">
|
|
{userInfo.careers.map((career, idx) => (
|
|
<div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0">
|
|
<div className="flex items-center justify-between font-medium text-sm">
|
|
<span>{career.company_name ?? '未知公司'}</span>
|
|
{career.is_current && <Badge variant="secondary" className="text-[10px]">在职</Badge>}
|
|
</div>
|
|
<div className="text-muted-foreground font-medium mt-0.5">
|
|
{career.position} {career.department ? `· ${career.department}` : ''}
|
|
</div>
|
|
{(career.start_date || career.end_date) && (
|
|
<div className="text-[11px] text-muted-foreground mt-0.5">
|
|
{career.start_date ?? '—'} ~ {career.is_current ? '至今' : career.end_date ?? '—'}
|
|
</div>
|
|
)}
|
|
{career.description && (
|
|
<div className="text-muted-foreground mt-1 text-[11px] leading-relaxed">
|
|
{career.description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
|
|
暂无工作经历记录
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Education */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
|
|
<GraduationCap className="size-3.5" />
|
|
教育经历 ({(userInfo?.educations ?? []).length})
|
|
</h4>
|
|
{userInfo?.educations && userInfo.educations.length > 0 ? (
|
|
<div className="space-y-2 rounded-lg border p-3 text-xs">
|
|
{userInfo.educations.map((edu, idx) => (
|
|
<div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0">
|
|
<div className="flex items-center justify-between font-medium text-sm">
|
|
<span>{edu.school_name ?? '学校'}</span>
|
|
{edu.degree && <Badge variant="outline" className="text-[10px]">{edu.degree}</Badge>}
|
|
</div>
|
|
{edu.major && <div className="text-muted-foreground mt-0.5">{edu.major}</div>}
|
|
{(edu.start_date || edu.end_date) && (
|
|
<div className="text-[11px] text-muted-foreground mt-0.5">
|
|
{edu.start_date ?? '—'} ~ {edu.is_current ? '至今' : edu.end_date ?? '—'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
|
|
暂无教育经历记录
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Honors */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
|
|
<Award className="size-3.5" />
|
|
荣誉与奖项 ({(userInfo?.honors ?? []).length})
|
|
</h4>
|
|
{userInfo?.honors && userInfo.honors.length > 0 ? (
|
|
<div className="space-y-2 rounded-lg border p-3 text-xs">
|
|
{userInfo.honors.map((honor, idx) => (
|
|
<div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0">
|
|
<div className="flex items-center justify-between font-medium">
|
|
<span>{honor.title ?? '荣誉奖项'}</span>
|
|
{honor.date && <span className="text-[11px] text-muted-foreground">{honor.date}</span>}
|
|
</div>
|
|
{honor.issuer && <div className="text-muted-foreground text-[11px] mt-0.5">颁发单位：{honor.issuer}</div>}
|
|
{honor.description && <div className="text-muted-foreground text-[11px] mt-0.5">{honor.description}</div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
|
|
暂无荣誉与奖项记录
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Addresses */}
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
|
|
<MapPin className="size-3.5" />
|
|
常用服务地址 ({(userInfo?.addresses ?? []).length})
|
|
</h4>
|
|
{userInfo?.addresses && userInfo.addresses.length > 0 ? (
|
|
<div className="space-y-2 rounded-lg border p-3 text-xs">
|
|
{userInfo.addresses.map((addr, idx) => (
|
|
<div key={idx} className="border-b pb-2 last:border-b-0 last:pb-0 space-y-0.5">
|
|
<div className="flex items-center justify-between font-medium">
|
|
<span>{addr.contact_name ?? '联系人'}</span>
|
|
{addr.contact_phone_number && (
|
|
<span className="font-mono text-muted-foreground">{addr.contact_phone_number}</span>
|
|
)}
|
|
</div>
|
|
<div className="text-muted-foreground text-[11px]">
|
|
{[addr.province, addr.city, addr.district, addr.address_line]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed p-4 text-center text-xs text-muted-foreground">
|
|
暂无保存的服务地址
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</TabsContent>
|
|
|
|
{/* TAB 3: SERVICES */}
|
|
<TabsContent value="services" className="flex flex-col gap-6 py-4 outline-none">
|
|
{userServicesQuery.isPending ? (
|
|
<div className="py-8 text-center text-sm text-muted-foreground">加载服务事项中…</div>
|
|
) : userServices.length > 0 ? (
|
|
<div className="grid gap-4">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
专长项目与服务变体 ({userServices.length})
|
|
</h4>
|
|
{userServices.map((exp) => (
|
|
<div key={exp.id ?? exp.name} className="rounded-lg border p-3 shadow-xs space-y-3">
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<h5 className="font-semibold text-sm flex items-center gap-1.5">
|
|
<Wrench className="size-4 text-primary" />
|
|
{exp.name}
|
|
</h5>
|
|
{exp.tags && exp.tags.length > 0 && (
|
|
<div className="flex items-center gap-1">
|
|
{exp.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="text-[10px] gap-0.5">
|
|
<Tag className="size-2.5" />
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{exp.description && (
|
|
<p className="text-xs text-muted-foreground mt-1">{exp.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Service Variants */}
|
|
{exp.services && exp.services.length > 0 && (
|
|
<div className="space-y-2 border-t pt-2">
|
|
<div className="text-[11px] font-medium text-muted-foreground">包含的服务变体</div>
|
|
<div className="grid gap-2">
|
|
{exp.services.map((svc) => (
|
|
<div
|
|
key={svc.id ?? svc.service_type}
|
|
className="flex items-center justify-between rounded-md bg-muted/40 p-2.5 text-xs"
|
|
>
|
|
<div className="space-y-0.5">
|
|
<div className="flex items-center gap-2 font-medium">
|
|
<Badge variant="outline" className="text-[10px] uppercase">
|
|
{svc.service_type === 'onsite'
|
|
? '上门服务'
|
|
: svc.service_type === 'online'
|
|
? '在线服务'
|
|
: svc.service_type === 'remote'
|
|
? '远程协助'
|
|
: svc.service_type ?? '服务'}
|
|
</Badge>
|
|
<span>
|
|
{svc.charge_type === 'time'
|
|
? '按时计费'
|
|
: svc.charge_type === 'fixed'
|
|
? '固定价格'
|
|
: svc.charge_type === 'quote'
|
|
? '按需报价'
|
|
: svc.charge_type}
|
|
</span>
|
|
</div>
|
|
{svc.duration && (
|
|
<div className="text-[11px] text-muted-foreground">
|
|
预估服务时长: {svc.duration} 分钟
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="font-semibold text-sm text-foreground">
|
|
{svc.price != null
|
|
? `${svc.currency_code ?? '¥'} ${(svc.price / 100).toFixed(2)}`
|
|
: '按需报价'}
|
|
</div>
|
|
<Badge
|
|
variant={svc.enabled ? 'secondary' : 'outline'}
|
|
className="text-[10px] mt-0.5"
|
|
>
|
|
{svc.enabled ? '已上架' : '已下架'}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : provider ? (
|
|
/* Fallback to provider overview if userServices is empty */
|
|
<div className="grid gap-3">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
专长服务商资格
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-3 rounded-lg border p-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">在线状态</div>
|
|
<div className="mt-0.5 flex items-center gap-1.5 font-medium">
|
|
<span
|
|
className={`size-2 rounded-full ${
|
|
provider.status === 'online'
|
|
? 'bg-emerald-500'
|
|
: provider.status === 'busy'
|
|
? 'bg-amber-500'
|
|
: 'bg-muted-foreground'
|
|
}`}
|
|
/>
|
|
<span>
|
|
{provider.status === 'online'
|
|
? '在线'
|
|
: provider.status === 'busy'
|
|
? '忙碌'
|
|
: provider.status === 'offline'
|
|
? '离线'
|
|
: provider.status}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">实名认证</div>
|
|
<div className="mt-0.5">
|
|
<Badge variant={provider.is_verified ? 'secondary' : 'outline'}>
|
|
{provider.is_verified ? '已认证' : '未认证'}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">评分</div>
|
|
<div className="mt-0.5 flex items-center gap-1 font-medium">
|
|
<Star className="size-3.5 fill-amber-400 text-amber-400" />
|
|
<span>{provider.rating ? provider.rating.toFixed(1) : '暂无评分'}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">已完结订单</div>
|
|
<div className="mt-0.5 font-medium">{provider.completed_jobs ?? 0} 单</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed p-8 text-center text-sm text-muted-foreground">
|
|
<Wrench className="mx-auto mb-2 size-8 text-muted-foreground/50" />
|
|
<p className="font-medium text-foreground">暂无服务事项</p>
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|
该用户尚未创建或发布任何专长项目与服务变体。
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Provider Profile Settings if available */}
|
|
{provider && (
|
|
<div className="grid gap-3 pt-2">
|
|
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
专长服务商抢单与派单参数
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-2 rounded-lg border p-3 text-sm">
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">自动抢单模式</div>
|
|
<div className="font-medium">
|
|
{provider.dispatch_setting?.auto_grab_enabled ? '已开启' : '已关闭'}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">今日接单量</div>
|
|
<div className="font-medium">
|
|
{provider.dispatch_setting?.accepted_today ?? 0} /{' '}
|
|
{provider.dispatch_setting?.daily_accept_cap ?? '无限制'}
|
|
</div>
|
|
</div>
|
|
{provider.dispatch_setting?.min_price != null && (
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">最低接单起价</div>
|
|
<div className="font-medium">¥{provider.dispatch_setting.min_price}</div>
|
|
</div>
|
|
)}
|
|
{provider.dispatch_setting?.max_radius_meters != null && (
|
|
<div>
|
|
<div className="text-xs text-muted-foreground">服务接单半径</div>
|
|
<div className="font-medium">
|
|
{(provider.dispatch_setting.max_radius_meters / 1000).toFixed(1)} km
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</TabsContent>
|
|
</Tabs>
|
|
)}
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|