mirror of
https://gitee.com/wanwujie/sub2api-mobile
synced 2026-04-02 22:42:14 +08:00
245 lines
10 KiB
TypeScript
245 lines
10 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import * as Clipboard from 'expo-clipboard';
|
|
import { ArrowLeftRight, ChevronLeft, Copy, KeyRound, Search, Wallet } from 'lucide-react-native';
|
|
import { router, useLocalSearchParams } from 'expo-router';
|
|
import { useMemo, useState } from 'react';
|
|
import { Controller, useForm } from 'react-hook-form';
|
|
import { Pressable, Text, TextInput, View } from 'react-native';
|
|
import { z } from 'zod';
|
|
|
|
import { DetailRow } from '@/src/components/detail-row';
|
|
import { ListCard } from '@/src/components/list-card';
|
|
import { formatDisplayTime } from '@/src/lib/formatters';
|
|
import { ScreenShell } from '@/src/components/screen-shell';
|
|
import { useDebouncedValue } from '@/src/hooks/use-debounced-value';
|
|
import { getUser, getUserUsage, listUserApiKeys, updateUserBalance } from '@/src/services/admin';
|
|
import type { BalanceOperation } from '@/src/types/admin';
|
|
|
|
const schema = z.object({
|
|
amount: z.string().min(1, '请输入金额'),
|
|
notes: z.string().optional(),
|
|
});
|
|
|
|
type FormValues = z.infer<typeof schema>;
|
|
|
|
export default function UserDetailScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>();
|
|
const userId = Number(id);
|
|
const queryClient = useQueryClient();
|
|
const [operation, setOperation] = useState<BalanceOperation>('add');
|
|
const [keySearchText, setKeySearchText] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
|
|
const [copiedKeyId, setCopiedKeyId] = useState<number | null>(null);
|
|
const keySearch = useDebouncedValue(keySearchText.trim().toLowerCase(), 250);
|
|
const { control, handleSubmit, reset, formState } = useForm<FormValues>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: {
|
|
amount: '10',
|
|
notes: '',
|
|
},
|
|
});
|
|
|
|
const userQuery = useQuery({
|
|
queryKey: ['user', userId],
|
|
queryFn: () => getUser(userId),
|
|
enabled: Number.isFinite(userId),
|
|
});
|
|
|
|
const usageQuery = useQuery({
|
|
queryKey: ['user-usage', userId],
|
|
queryFn: () => getUserUsage(userId),
|
|
enabled: Number.isFinite(userId),
|
|
});
|
|
|
|
const apiKeysQuery = useQuery({
|
|
queryKey: ['user-api-keys', userId],
|
|
queryFn: () => listUserApiKeys(userId),
|
|
enabled: Number.isFinite(userId),
|
|
});
|
|
|
|
const balanceMutation = useMutation({
|
|
mutationFn: (values: FormValues & { operation: BalanceOperation }) =>
|
|
updateUserBalance(userId, {
|
|
balance: Number(values.amount),
|
|
operation: values.operation,
|
|
notes: values.notes,
|
|
}),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['user', userId] });
|
|
queryClient.invalidateQueries({ queryKey: ['users'] });
|
|
reset({ amount: '10', notes: '' });
|
|
},
|
|
});
|
|
|
|
const user = userQuery.data;
|
|
const usage = usageQuery.data;
|
|
const apiKeys = apiKeysQuery.data?.items ?? [];
|
|
const filteredApiKeys = useMemo(
|
|
() =>
|
|
apiKeys.filter((item) => {
|
|
const matchesStatus = statusFilter === 'all' ? true : item.status === statusFilter;
|
|
const matchesSearch = !keySearch
|
|
? true
|
|
: [item.name, item.key, item.group?.name]
|
|
.filter(Boolean)
|
|
.join(' ')
|
|
.toLowerCase()
|
|
.includes(keySearch);
|
|
|
|
return matchesStatus && matchesSearch;
|
|
}),
|
|
[apiKeys, keySearch, statusFilter]
|
|
);
|
|
|
|
function maskKey(value: string) {
|
|
if (!value || value.length < 16) {
|
|
return value;
|
|
}
|
|
|
|
return `${value.slice(0, 8)}••••••${value.slice(-8)}`;
|
|
}
|
|
|
|
async function copyKey(keyId: number, value: string) {
|
|
await Clipboard.setStringAsync(value);
|
|
setCopiedKeyId(keyId);
|
|
setTimeout(() => setCopiedKeyId((current) => (current === keyId ? null : current)), 1600);
|
|
}
|
|
|
|
return (
|
|
<ScreenShell
|
|
title={user?.username || user?.email || '用户详情'}
|
|
subtitle=""
|
|
titleAside={<Text className="text-[11px] text-[#a2988a]">用户余额、用量与密钥概览。</Text>}
|
|
variant="minimal"
|
|
right={
|
|
<Pressable className="h-11 w-11 items-center justify-center rounded-full bg-[#2d3134]" onPress={() => router.back()}>
|
|
<ChevronLeft color="#f6f1e8" size={18} />
|
|
</Pressable>
|
|
}
|
|
>
|
|
<ListCard title="基本信息" meta={user?.email} badge={user?.status || 'loading'} icon={Wallet}>
|
|
<DetailRow label="角色" value={user?.role || '--'} />
|
|
<DetailRow label="余额" value={Number(user?.balance ?? 0).toFixed(2)} />
|
|
<DetailRow label="并发" value={`${user?.concurrency ?? 0}`} />
|
|
<DetailRow label="更新时间" value={formatDisplayTime(user?.updated_at)} />
|
|
</ListCard>
|
|
|
|
<ListCard title="月度用量" meta="真实数据来自 /users/:id/usage" icon={ArrowLeftRight}>
|
|
<DetailRow label="Token" value={`${Number(usage?.tokens ?? usage?.total_tokens ?? 0)}`} />
|
|
<DetailRow label="请求数" value={`${Number(usage?.requests ?? usage?.total_requests ?? 0)}`} />
|
|
<DetailRow label="成本" value={`$${Number(usage?.cost ?? usage?.total_cost ?? 0).toFixed(4)}`} />
|
|
</ListCard>
|
|
|
|
<ListCard title="API 密钥" meta="直接聚合管理员 /users/:id/api-keys" icon={KeyRound}>
|
|
<View className="gap-3">
|
|
<View className="flex-row items-center rounded-[18px] bg-[#f1ece2] px-4 py-3">
|
|
<Search color="#7d7468" size={16} />
|
|
<TextInput
|
|
defaultValue=""
|
|
onChangeText={setKeySearchText}
|
|
placeholder="搜索 key 名称或分组"
|
|
placeholderTextColor="#9b9081"
|
|
className="ml-3 flex-1 text-sm text-[#16181a]"
|
|
/>
|
|
</View>
|
|
<View className="flex-row gap-2">
|
|
{(['all', 'active', 'inactive'] as const).map((item) => (
|
|
<Pressable
|
|
key={item}
|
|
className={statusFilter === item ? 'flex-1 rounded-[16px] bg-[#1d5f55] px-3 py-3' : 'flex-1 rounded-[16px] bg-[#e7dfcf] px-3 py-3'}
|
|
onPress={() => setStatusFilter(item)}
|
|
>
|
|
<Text className={statusFilter === item ? 'text-center text-sm font-semibold text-white' : 'text-center text-sm font-semibold text-[#4e463e]'}>
|
|
{item === 'all' ? '全部' : item === 'active' ? '启用' : '停用'}
|
|
</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
{filteredApiKeys.map((item) => (
|
|
<View key={item.id} className="rounded-[18px] bg-[#f1ece2] px-4 py-3">
|
|
<View className="flex-row items-center justify-between gap-3">
|
|
<Text className="flex-1 text-sm font-semibold text-[#16181a]">{item.name}</Text>
|
|
<Text className="text-xs uppercase tracking-[1.2px] text-[#7d7468]">{item.status}</Text>
|
|
</View>
|
|
<View className="mt-2 flex-row items-center gap-2">
|
|
<Text className="flex-1 text-xs text-[#7d7468]">{maskKey(item.key)}</Text>
|
|
<Pressable
|
|
className="rounded-full bg-[#e7dfcf] p-2"
|
|
onPress={() => copyKey(item.id, item.key)}
|
|
>
|
|
<Copy color="#4e463e" size={14} />
|
|
</Pressable>
|
|
</View>
|
|
<Text className="mt-2 text-xs text-[#7d7468]">
|
|
{copiedKeyId === item.id ? '已复制到剪贴板' : `最近使用 ${formatDisplayTime(item.last_used_at)}`}
|
|
</Text>
|
|
<Text className="mt-2 text-xs text-[#7d7468]">
|
|
已用 ${Number(item.quota_used ?? 0).toFixed(2)} / 配额 {item.quota ? `$${Number(item.quota).toFixed(2)}` : '无限制'}
|
|
</Text>
|
|
<Text className="mt-1 text-xs text-[#7d7468]">
|
|
分组 {item.group?.name || '未绑定'} · 5h 用量 {Number(item.usage_5h ?? 0).toFixed(2)}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
{filteredApiKeys.length === 0 ? <Text className="text-sm text-[#7d7468]">当前筛选条件下没有 API 密钥。</Text> : null}
|
|
</View>
|
|
</ListCard>
|
|
|
|
<ListCard title="余额调整" meta="默认执行增加余额，可继续扩成减余额和设定值。" icon={Wallet}>
|
|
<View className="gap-3">
|
|
<Controller
|
|
control={control}
|
|
name="amount"
|
|
render={({ field: { onChange, value } }) => (
|
|
<TextInput
|
|
value={value}
|
|
onChangeText={onChange}
|
|
keyboardType="decimal-pad"
|
|
placeholder="输入金额"
|
|
placeholderTextColor="#9b9081"
|
|
className="rounded-[18px] bg-[#f1ece2] px-4 py-4 text-base text-[#16181a]"
|
|
/>
|
|
)}
|
|
/>
|
|
<View className="flex-row gap-2">
|
|
{(['add', 'subtract', 'set'] as BalanceOperation[]).map((item) => (
|
|
<Pressable
|
|
key={item}
|
|
className={operation === item ? 'flex-1 rounded-[16px] bg-[#1d5f55] px-3 py-3' : 'flex-1 rounded-[16px] bg-[#e7dfcf] px-3 py-3'}
|
|
onPress={() => setOperation(item)}
|
|
>
|
|
<Text className={operation === item ? 'text-center text-sm font-semibold text-white' : 'text-center text-sm font-semibold text-[#4e463e]'}>
|
|
{item === 'add' ? '增加' : item === 'subtract' ? '扣减' : '设为'}
|
|
</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
<Controller
|
|
control={control}
|
|
name="notes"
|
|
render={({ field: { onChange, value } }) => (
|
|
<TextInput
|
|
value={value}
|
|
onChangeText={onChange}
|
|
placeholder="备注，可留空"
|
|
placeholderTextColor="#9b9081"
|
|
className="rounded-[18px] bg-[#f1ece2] px-4 py-4 text-base text-[#16181a]"
|
|
/>
|
|
)}
|
|
/>
|
|
{formState.errors.amount ? <Text className="text-sm text-[#c25d35]">{formState.errors.amount.message}</Text> : null}
|
|
<Pressable
|
|
className="rounded-[18px] bg-[#1d5f55] px-4 py-4"
|
|
onPress={handleSubmit((values) => balanceMutation.mutate({ ...values, operation }))}
|
|
>
|
|
<Text className="text-center text-sm font-semibold tracking-[1.2px] text-white">
|
|
{balanceMutation.isPending ? '提交中...' : operation === 'add' ? '增加余额' : operation === 'subtract' ? '扣减余额' : '设置余额'}
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
</ListCard>
|
|
</ScreenShell>
|
|
);
|
|
}
|