739 lines
28 KiB
TypeScript
739 lines
28 KiB
TypeScript
"use client";
|
|
|
|
import type { ComponentType } from "react";
|
|
import { ChevronRight, Network, Pencil, Plus, Trash2, Users } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { AdminSubnav, AdminSubnavButton } from "@/components/admin/admin-subnav";
|
|
import { AdminNoResourceState, AdminTableNoResourceRow } from "@/components/admin/admin-no-resource-state";
|
|
import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
|
|
import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { AgentsPlayersPanel } from "@/modules/agents/agents-players-panel";
|
|
import { AgentProfileFields, type AgentProfileFieldsProps } from "@/modules/agents/agent-profile-fields";
|
|
import { formatCredit } from "@/modules/agents/agent-line-sidebar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { percentValueToUi } from "@/lib/admin-rate-percent";
|
|
import { resolveRoleStatusTone } from "@/lib/admin-status-tone";
|
|
import { cn } from "@/lib/utils";
|
|
import type { AgentNodeProfileSummary, AgentNodeRow, AgentProfileRow } from "@/types/api/admin-agent";
|
|
|
|
function relativeShareRate(totalShareRate: number | undefined, parentShareRate: number | undefined): string | null {
|
|
if (
|
|
totalShareRate == null ||
|
|
parentShareRate == null ||
|
|
parentShareRate <= 0
|
|
) {
|
|
return null;
|
|
}
|
|
|
|
return percentValueToUi((totalShareRate / parentShareRate) * 100);
|
|
}
|
|
|
|
export type AgentDetailTab = "overview" | "profile" | "downline" | "players";
|
|
|
|
export type AgentLineDetailPanelProps = {
|
|
node: AgentNodeRow | null;
|
|
profile: AgentProfileRow | null;
|
|
profileLoading: boolean;
|
|
childAgents: AgentNodeRow[];
|
|
childCountById: Map<number, number>;
|
|
siteCode: string;
|
|
siteLabel: string | null;
|
|
parentName: string | null;
|
|
detailTab: AgentDetailTab;
|
|
onDetailTabChange: (tab: AgentDetailTab) => void;
|
|
canViewProfileTab: boolean;
|
|
canEditProfileTab: boolean;
|
|
profileReadOnly: boolean;
|
|
canViewDownlineTab: boolean;
|
|
canViewPlayersTab: boolean;
|
|
playersTabHint?: string | null;
|
|
canManageNode: boolean;
|
|
canCreateChild: boolean;
|
|
canCreateChildAgent: boolean;
|
|
canCreatePlayerAction: boolean;
|
|
canDeleteChild: (node: AgentNodeRow) => boolean;
|
|
onEditChild: (node: AgentNodeRow) => void;
|
|
onDeleteChild: (node: AgentNodeRow) => void;
|
|
onAddChild: () => void;
|
|
onAddPlayer: () => void;
|
|
onEditCurrent: () => void;
|
|
onSelectChild: (node: AgentNodeRow) => void;
|
|
profileFields: AgentProfileFieldsProps | null;
|
|
profileSaving: boolean;
|
|
onSaveProfile: () => void;
|
|
playerCreateRequestKey?: number;
|
|
};
|
|
|
|
export function AgentLineDetailPanel({
|
|
node,
|
|
profile,
|
|
profileLoading,
|
|
childAgents,
|
|
childCountById,
|
|
siteCode,
|
|
siteLabel,
|
|
parentName,
|
|
detailTab,
|
|
onDetailTabChange,
|
|
canViewProfileTab,
|
|
canEditProfileTab,
|
|
profileReadOnly,
|
|
canViewDownlineTab,
|
|
canViewPlayersTab,
|
|
playersTabHint,
|
|
canManageNode,
|
|
canCreateChild,
|
|
canCreateChildAgent,
|
|
canCreatePlayerAction,
|
|
canDeleteChild,
|
|
onEditChild,
|
|
onDeleteChild,
|
|
onAddChild,
|
|
onAddPlayer,
|
|
onEditCurrent,
|
|
onSelectChild,
|
|
profileFields,
|
|
profileSaving,
|
|
onSaveProfile,
|
|
playerCreateRequestKey = 0,
|
|
}: AgentLineDetailPanelProps): React.ReactElement {
|
|
const { t } = useTranslation(["agents", "common"]);
|
|
|
|
if (node === null) {
|
|
return (
|
|
<div className="flex flex-1 flex-col items-center justify-center bg-muted/20 px-6 py-20 text-center">
|
|
<div className="flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/80 bg-background">
|
|
<Network className="size-6 text-muted-foreground/70" aria-hidden />
|
|
</div>
|
|
<p className="mt-4 text-sm font-medium text-foreground">
|
|
{t("lineUi.selectAgent", { defaultValue: "选择左侧代理查看占成与授信" })}
|
|
</p>
|
|
<p className="mt-2 max-w-sm text-sm text-muted-foreground">
|
|
{t("lineUi.selectAgentHint", {
|
|
defaultValue: "信用占成盘以代理树为结算边界，占成、授信与回水均在代理节点配置。",
|
|
})}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tabs: { key: AgentDetailTab; label: string; count?: number; visible: boolean }[] = [
|
|
{
|
|
key: "overview",
|
|
label: t("lineUi.tabOverview", { defaultValue: "概览" }),
|
|
visible: true,
|
|
},
|
|
{
|
|
key: "profile",
|
|
label: profileReadOnly
|
|
? t("lineUi.tabProfileReadOnly", { defaultValue: "占成与授信（只读）" })
|
|
: t("lineUi.tabProfile", { defaultValue: "占成与授信" }),
|
|
visible: canViewProfileTab,
|
|
},
|
|
{
|
|
key: "downline",
|
|
label: t("lineUi.tabDownline", { defaultValue: "直属下级" }),
|
|
count: childAgents.length,
|
|
visible: canViewDownlineTab,
|
|
},
|
|
{
|
|
key: "players",
|
|
label: t("lineUi.tabPlayers", { defaultValue: "直属玩家" }),
|
|
visible: canViewPlayersTab,
|
|
},
|
|
];
|
|
|
|
const siteDisplay =
|
|
siteLabel && siteCode.trim() !== ""
|
|
? `${siteLabel} (${siteCode})`
|
|
: siteLabel ?? siteCode;
|
|
const childActionHint = canCreateChild
|
|
? null
|
|
: canCreateChildAgent
|
|
? t("lineUi.addChildUnavailableHint", {
|
|
defaultValue: "当前代理未开启“允许创建下级代理”，如需新增请先调整该代理配置。",
|
|
})
|
|
: t("lineUi.addChildNoPermissionHint", {
|
|
defaultValue: "当前账号没有为该节点创建下级代理的权限。",
|
|
});
|
|
const playerActionHint =
|
|
canViewPlayersTab && !canCreatePlayerAction ? playersTabHint ?? null : null;
|
|
const showPrimaryAction = detailTab === "downline" || detailTab === "players";
|
|
const primaryActionEnabled =
|
|
detailTab === "players" ? canCreatePlayerAction : canCreateChild;
|
|
const primaryActionLabel =
|
|
detailTab === "players"
|
|
? t("lineUi.createDirectPlayer", { defaultValue: "创建直属玩家" })
|
|
: t("createChild", { defaultValue: "添加下级代理" });
|
|
const primaryActionHint =
|
|
detailTab === "players" ? playerActionHint : childActionHint;
|
|
|
|
return (
|
|
<div className="flex min-h-[28rem] min-w-0 flex-1 flex-col bg-background">
|
|
<header className="border-b border-border/60 bg-card px-5 py-4 sm:px-6">
|
|
<div className="flex flex-wrap items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-wrap items-center gap-2.5">
|
|
<h2 className="truncate text-xl font-semibold tracking-tight text-foreground">
|
|
{node.name}
|
|
</h2>
|
|
<AdminStatusBadge tone={resolveRoleStatusTone(node.status)} className="shrink-0">
|
|
{node.status === 1
|
|
? t("common:status.enabled", { defaultValue: "启用" })
|
|
: t("common:status.disabled", { defaultValue: "停用" })}
|
|
</AdminStatusBadge>
|
|
</div>
|
|
{siteDisplay ? (
|
|
<p className="mt-1 truncate text-sm text-muted-foreground" title={siteDisplay}>
|
|
{siteDisplay}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex shrink-0 flex-col items-end gap-2">
|
|
{canManageNode ? (
|
|
<>
|
|
<div className="flex flex-wrap justify-end gap-2">
|
|
<Button type="button" size="sm" variant="outline" onClick={onEditCurrent}>
|
|
<Pencil className="mr-1.5 size-3.5" />
|
|
{t("lineUi.editAgent", { defaultValue: "编辑代理" })}
|
|
</Button>
|
|
{showPrimaryAction && primaryActionEnabled ? (
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
onClick={detailTab === "players" ? onAddPlayer : onAddChild}
|
|
>
|
|
<Plus className="mr-1.5 size-3.5" />
|
|
{primaryActionLabel}
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
{primaryActionHint ? (
|
|
<p className="max-w-[26rem] text-right text-xs leading-5 text-muted-foreground">
|
|
{primaryActionHint}
|
|
</p>
|
|
) : null}
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<AdminSubnav
|
|
aria-label={t("detailTabs", { defaultValue: "代理详情" })}
|
|
className="overflow-x-auto bg-card px-4 sm:px-5"
|
|
>
|
|
{tabs
|
|
.filter((tab) => tab.visible)
|
|
.map((tab) => (
|
|
<AdminSubnavButton
|
|
key={tab.key}
|
|
active={detailTab === tab.key}
|
|
onClick={() => onDetailTabChange(tab.key)}
|
|
count={tab.count}
|
|
>
|
|
{tab.label}
|
|
</AdminSubnavButton>
|
|
))}
|
|
</AdminSubnav>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto bg-muted/15 px-5 py-5 sm:px-6 sm:py-6">
|
|
{detailTab === "overview" ? (
|
|
<OverviewTab
|
|
profile={profile}
|
|
profileLoading={profileLoading}
|
|
profileReadOnly={profileReadOnly}
|
|
canViewDownlineTab={canViewDownlineTab}
|
|
canViewPlayersTab={canViewPlayersTab}
|
|
playersTabHint={playersTabHint}
|
|
childCount={childAgents.length}
|
|
onGoToDownline={() => onDetailTabChange("downline")}
|
|
onGoToPlayers={() => onDetailTabChange("players")}
|
|
/>
|
|
) : null}
|
|
|
|
{detailTab === "profile" && canViewProfileTab && profileFields ? (
|
|
<Card className="mx-auto max-w-3xl border-border/70 shadow-sm">
|
|
<CardHeader className="border-b border-border/60 pb-4">
|
|
<CardTitle className="text-base">
|
|
{profileReadOnly
|
|
? t("lineUi.tabProfileReadOnly", { defaultValue: "占成与授信（只读）" })
|
|
: t("lineUi.tabProfile", { defaultValue: "占成与授信" })}
|
|
</CardTitle>
|
|
<p className="text-sm font-normal text-muted-foreground">
|
|
{profileReadOnly
|
|
? t("lineUi.profileReadOnlyHint", {
|
|
defaultValue: "占成、授信与回水由上级配置，如需调整请联系上级代理或平台。",
|
|
})
|
|
: t("lineUi.profileTabHint", {
|
|
defaultValue:
|
|
"占成、授信、回水与风控标签在此维护；登录名、密码与启停状态请用「编辑代理」。",
|
|
})}
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent className="pt-5">
|
|
<AgentProfileFields {...profileFields} idPrefix="inline-agent-profile" variant="card" />
|
|
{canManageNode && canEditProfileTab ? (
|
|
<div className="mt-6 flex justify-end border-t border-border/60 pt-5">
|
|
<Button
|
|
type="button"
|
|
className="min-w-[10rem]"
|
|
disabled={profileSaving || profileFields.loading}
|
|
onClick={onSaveProfile}
|
|
>
|
|
{profileSaving
|
|
? t("common:actions.saving", { defaultValue: "保存中…" })
|
|
: t("lineUi.saveProfile", { defaultValue: "保存占成与授信" })}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
|
|
{detailTab === "downline" && canViewDownlineTab ? (
|
|
<DownlineTable
|
|
childAgents={childAgents}
|
|
childCountById={childCountById}
|
|
parentTotalShareRate={profile?.total_share_rate}
|
|
canManageNode={canManageNode}
|
|
canCreateChild={canCreateChild}
|
|
canDeleteChild={canDeleteChild}
|
|
onEditChild={onEditChild}
|
|
onDeleteChild={onDeleteChild}
|
|
onSelectChild={onSelectChild}
|
|
onAddChild={onAddChild}
|
|
/>
|
|
) : null}
|
|
|
|
{detailTab === "players" && canViewPlayersTab ? (
|
|
<AgentsPlayersPanel
|
|
siteCode={siteCode}
|
|
agentNodeId={node.id}
|
|
allowCreatePlayer={profile?.can_create_player === true}
|
|
embedded
|
|
createRequestKey={playerCreateRequestKey}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OverviewTab({
|
|
profile,
|
|
profileLoading,
|
|
profileReadOnly,
|
|
canViewDownlineTab,
|
|
canViewPlayersTab,
|
|
playersTabHint,
|
|
childCount,
|
|
onGoToDownline,
|
|
onGoToPlayers,
|
|
}: {
|
|
profile: AgentProfileRow | null;
|
|
profileLoading: boolean;
|
|
profileReadOnly: boolean;
|
|
canViewDownlineTab: boolean;
|
|
canViewPlayersTab: boolean;
|
|
playersTabHint?: string | null;
|
|
childCount: number;
|
|
onGoToDownline: () => void;
|
|
onGoToPlayers: () => void;
|
|
}): React.ReactElement {
|
|
const { t } = useTranslation(["agents", "common"]);
|
|
|
|
const rebateCap =
|
|
profile && !profileLoading ? percentValueToUi(profile.rebate_limit ?? 0) : null;
|
|
const parentRelativeShare = relativeShareRate(
|
|
profile?.total_share_rate,
|
|
profile?.parent_caps?.total_share_rate,
|
|
);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-5xl space-y-6">
|
|
{profileReadOnly ? (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
|
|
<MetricCard
|
|
label={t("profile.creditLimit", { defaultValue: "授信额度" })}
|
|
value={profileLoading ? "…" : formatCredit(profile?.credit_limit ?? 0)}
|
|
/>
|
|
<MetricCard
|
|
label={t("lineUi.allocatedCredit", { defaultValue: "已下发" })}
|
|
value={profileLoading ? "…" : formatCredit(profile?.allocated_credit ?? 0)}
|
|
/>
|
|
<MetricCard
|
|
label={t("lineUi.availableCredit", { defaultValue: "可下发" })}
|
|
value={profileLoading ? "…" : formatCredit(profile?.available_credit ?? 0)}
|
|
highlight
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
|
<MetricCard
|
|
label={t("profile.totalShareRate", { defaultValue: "占成比例" })}
|
|
value={profileLoading ? "…" : `${profile?.total_share_rate ?? 0}%`}
|
|
subtitle={
|
|
parentRelativeShare
|
|
? t("profile.relativeShareRateValue", {
|
|
defaultValue: "占上级 {{rate}}%",
|
|
rate: parentRelativeShare,
|
|
})
|
|
: rebateCap !== null
|
|
? t("lineUi.shareRebateCap", {
|
|
defaultValue: "回水上限 {{rate}}%",
|
|
rate: rebateCap,
|
|
})
|
|
: undefined
|
|
}
|
|
accent
|
|
/>
|
|
<MetricCard
|
|
label={t("profile.creditLimit", { defaultValue: "授信额度" })}
|
|
value={profileLoading ? "…" : formatCredit(profile?.credit_limit ?? 0)}
|
|
/>
|
|
<MetricCard
|
|
label={t("lineUi.allocatedCredit", { defaultValue: "已下发" })}
|
|
value={profileLoading ? "…" : formatCredit(profile?.allocated_credit ?? 0)}
|
|
/>
|
|
<MetricCard
|
|
label={t("lineUi.availableCredit", { defaultValue: "可下发" })}
|
|
value={profileLoading ? "…" : formatCredit(profile?.available_credit ?? 0)}
|
|
highlight
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{!profileReadOnly && !profileLoading && profile ? (
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
<MetricCard
|
|
label={t("profile.rebateLimit", { defaultValue: "回水上限 (%)" })}
|
|
value={`${percentValueToUi(profile.rebate_limit ?? 0)}%`}
|
|
/>
|
|
<MetricCard
|
|
label={t("profile.defaultPlayerRebate", { defaultValue: "默认玩家回水 (%)" })}
|
|
value={`${percentValueToUi(profile.default_player_rebate ?? 0)}%`}
|
|
/>
|
|
<MetricCard
|
|
label={t("profile.riskTags", { defaultValue: "风控标签" })}
|
|
value={
|
|
(profile.risk_tags?.length ?? 0) > 0
|
|
? profile.risk_tags!.join(", ")
|
|
: t("common:states.none", { defaultValue: "无" })
|
|
}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
|
|
{profileReadOnly ? (
|
|
<p className="rounded-lg border border-border/60 bg-card px-4 py-3 text-sm text-muted-foreground">
|
|
{t("lineUi.selfAgentOverviewHint", {
|
|
defaultValue:
|
|
"以下为上级为您分配的授信额度，占成与回水由上级在后台维护，本账号不可查看或修改。",
|
|
})}
|
|
</p>
|
|
) : null}
|
|
|
|
{canViewDownlineTab || canViewPlayersTab || playersTabHint ? (
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
{canViewDownlineTab ? (
|
|
<OverviewLinkCard
|
|
icon={Network}
|
|
title={t("lineUi.tabDownline", { defaultValue: "直属下级" })}
|
|
summary={t("lineUi.overviewDownlineCount", {
|
|
defaultValue: "{{count}} 个",
|
|
count: childCount,
|
|
})}
|
|
description={t("lineUi.overviewDownlineHint", {
|
|
defaultValue: "直属下级 {{count}} 个，可在对应 Tab 管理下级代理。",
|
|
count: childCount,
|
|
})}
|
|
actionLabel={t("lineUi.viewDownline", { defaultValue: "查看直属下级" })}
|
|
onAction={onGoToDownline}
|
|
/>
|
|
) : null}
|
|
{canViewPlayersTab ? (
|
|
<OverviewLinkCard
|
|
icon={Users}
|
|
title={t("lineUi.tabPlayers", { defaultValue: "直属玩家" })}
|
|
summary={t("lineUi.overviewPlayersSummary", {
|
|
defaultValue: "玩家管理",
|
|
})}
|
|
description={t("lineUi.overviewPlayersHint", {
|
|
defaultValue: "直属玩家请在「直属玩家」Tab 维护。",
|
|
})}
|
|
actionLabel={t("lineUi.viewPlayers", { defaultValue: "查看直属玩家" })}
|
|
onAction={onGoToPlayers}
|
|
/>
|
|
) : null}
|
|
{!canViewPlayersTab && playersTabHint ? (
|
|
<Card className="border-border/70 shadow-sm">
|
|
<CardContent className="flex items-start gap-3 pt-5">
|
|
<div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground">
|
|
<Users className="size-5" aria-hidden />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="font-medium text-foreground">
|
|
{t("lineUi.tabPlayers", { defaultValue: "直属玩家" })}
|
|
</p>
|
|
<p className="mt-1 text-sm text-muted-foreground">{playersTabHint}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OverviewLinkCard({
|
|
icon: Icon,
|
|
title,
|
|
summary,
|
|
description,
|
|
actionLabel,
|
|
onAction,
|
|
}: {
|
|
icon: ComponentType<{ className?: string }>;
|
|
title: string;
|
|
summary: string;
|
|
description: string;
|
|
actionLabel: string;
|
|
onAction: () => void;
|
|
}): React.ReactElement {
|
|
return (
|
|
<Card
|
|
className="group relative cursor-pointer overflow-hidden border-border/70 shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
|
|
onClick={onAction}
|
|
>
|
|
<CardContent className="flex flex-col p-5">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
|
|
<Icon className="size-5.5" aria-hidden />
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
className="shrink-0 text-primary -mr-2"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onAction();
|
|
}}
|
|
>
|
|
{actionLabel}
|
|
<ChevronRight className="ml-0.5 size-4" aria-hidden />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
|
<p className={cn(
|
|
"mt-1 font-semibold tracking-tight text-foreground",
|
|
summary.length > 5 ? "text-xl" : "text-2xl tabular-nums"
|
|
)}>
|
|
{summary}
|
|
</p>
|
|
<p className="mt-2 text-sm leading-relaxed text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function DownlineTable({
|
|
childAgents,
|
|
childCountById,
|
|
parentTotalShareRate,
|
|
canManageNode,
|
|
canCreateChild,
|
|
canDeleteChild,
|
|
onEditChild,
|
|
onDeleteChild,
|
|
onSelectChild,
|
|
onAddChild,
|
|
}: {
|
|
childAgents: AgentNodeRow[];
|
|
childCountById: Map<number, number>;
|
|
parentTotalShareRate?: number;
|
|
canManageNode: boolean;
|
|
canCreateChild: boolean;
|
|
canDeleteChild: (node: AgentNodeRow) => boolean;
|
|
onEditChild: (node: AgentNodeRow) => void;
|
|
onDeleteChild: (node: AgentNodeRow) => void;
|
|
onSelectChild: (node: AgentNodeRow) => void;
|
|
onAddChild: () => void;
|
|
}): React.ReactElement {
|
|
const { t } = useTranslation(["agents", "common"]);
|
|
const createChildLabel = t("lineUi.createDownline", { defaultValue: "创建下级代理" });
|
|
const editChildLabel = t("lineUi.editDownline", { defaultValue: "编辑代理" });
|
|
const deleteChildLabel = t("lineUi.deleteDownline", { defaultValue: "删除代理" });
|
|
|
|
return (
|
|
<div className="admin-table-shell overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-muted/40 hover:bg-muted/40">
|
|
<TableHead>{t("agentCode", { defaultValue: "代理编码" })}</TableHead>
|
|
<TableHead>{t("agentName", { defaultValue: "代理名称" })}</TableHead>
|
|
<TableHead>{t("loginUsername", { defaultValue: "登录名" })}</TableHead>
|
|
<TableHead>{t("lineUi.downlineColumns.email", { defaultValue: "邮箱" })}</TableHead>
|
|
<TableHead className="text-right whitespace-nowrap">
|
|
{t("profile.totalShareRate", { defaultValue: "占成 (%)" })}
|
|
</TableHead>
|
|
<TableHead className="text-right whitespace-nowrap">
|
|
{t("profile.creditLimit", { defaultValue: "授信额度" })}
|
|
</TableHead>
|
|
<TableHead className="text-right whitespace-nowrap">
|
|
{t("lineUi.allocatedCredit", { defaultValue: "已下发" })}
|
|
</TableHead>
|
|
<TableHead className="text-center whitespace-nowrap">
|
|
{t("lineUi.downlineColumns.downlineCount", { defaultValue: "下级数" })}
|
|
</TableHead>
|
|
<TableHead className="w-24">{t("common:status.label", { defaultValue: "状态" })}</TableHead>
|
|
{canManageNode ? (
|
|
<TableHead className="sticky right-0 z-20 w-14 bg-muted whitespace-nowrap text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
|
|
{t("common:table.actions", { defaultValue: "操作" })}
|
|
</TableHead>
|
|
) : null}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{childAgents.length === 0 ? (
|
|
<AdminTableNoResourceRow colSpan={canManageNode ? 10 : 9} cellClassName="py-12 text-center" />
|
|
) : (
|
|
childAgents.map((child) => {
|
|
const summary = child.profile_summary;
|
|
return (
|
|
<TableRow
|
|
key={child.id}
|
|
className="cursor-pointer"
|
|
onClick={() => onSelectChild(child)}
|
|
>
|
|
<TableCell className="font-mono text-xs">{child.code}</TableCell>
|
|
<TableCell className="font-medium">{child.name}</TableCell>
|
|
<TableCell className="text-xs">{child.username ?? "—"}</TableCell>
|
|
<TableCell className="max-w-[10rem] truncate text-xs text-muted-foreground">
|
|
{child.email ?? "—"}
|
|
</TableCell>
|
|
<TableCell className="text-right tabular-nums text-xs">
|
|
{summary ? (
|
|
<div className="space-y-0.5">
|
|
<div>{`${summary.total_share_rate ?? 0}%`}</div>
|
|
{parentTotalShareRate && parentTotalShareRate > 0 ? (
|
|
<div className="text-[11px] text-muted-foreground">
|
|
{t("profile.relativeShareRateValue", {
|
|
defaultValue: "占上级 {{rate}}%",
|
|
rate: relativeShareRate(
|
|
summary.total_share_rate,
|
|
parentTotalShareRate,
|
|
) ?? "0",
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-right tabular-nums text-xs">
|
|
{summary ? formatCredit(summary.credit_limit) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-right tabular-nums text-xs">
|
|
{summary ? formatCredit(summary.allocated_credit) : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-center tabular-nums text-xs">
|
|
{childCountById.get(child.id) ?? 0}
|
|
</TableCell>
|
|
<TableCell>
|
|
<AdminStatusBadge tone={resolveRoleStatusTone(child.status)} className="shrink-0">
|
|
{child.status === 1
|
|
? t("common:status.enabled", { defaultValue: "启用" })
|
|
: t("common:status.disabled", { defaultValue: "停用" })}
|
|
</AdminStatusBadge>
|
|
</TableCell>
|
|
{canManageNode ? (
|
|
<TableCell
|
|
className="sticky right-0 z-10 bg-card text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<AdminRowActionsMenu
|
|
actions={[
|
|
{
|
|
key: "edit",
|
|
label: editChildLabel,
|
|
icon: Pencil,
|
|
onClick: () => onEditChild(child),
|
|
},
|
|
{
|
|
key: "delete",
|
|
label: deleteChildLabel,
|
|
icon: Trash2,
|
|
destructive: true,
|
|
disabled: !canDeleteChild(child),
|
|
onClick: () => onDeleteChild(child),
|
|
},
|
|
]}
|
|
/>
|
|
</TableCell>
|
|
) : null}
|
|
</TableRow>
|
|
);
|
|
})
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MetricCard({
|
|
label,
|
|
value,
|
|
subtitle,
|
|
accent = false,
|
|
highlight = false,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
subtitle?: string;
|
|
accent?: boolean;
|
|
highlight?: boolean;
|
|
}): React.ReactElement {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-xl border bg-card px-4 py-4 shadow-sm transition-colors",
|
|
highlight && "border-primary/25 bg-primary/[0.04]",
|
|
accent && !highlight && "border-border/70",
|
|
!accent && !highlight && "border-border/70",
|
|
)}
|
|
>
|
|
<p className="text-xs font-medium text-muted-foreground">{label}</p>
|
|
<p
|
|
className={cn(
|
|
"mt-1.5 text-2xl font-semibold tabular-nums tracking-tight",
|
|
highlight ? "text-primary" : "text-foreground",
|
|
)}
|
|
>
|
|
{value}
|
|
</p>
|
|
{subtitle ? <p className="mt-1 text-xs text-muted-foreground">{subtitle}</p> : null}
|
|
</div>
|
|
);
|
|
}
|