refactor: update agent API schemas, standardize UI text styling, and enhance settlement credit ledger components

src/modules/agents/agent-line-detail-panel.tsx

@@ -5,7 +5,7 @@ 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 } from "@/components/admin/admin-no-resource-state";
+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 {
@@ -26,17 +26,16 @@ import { resolveRoleStatusTone } from "@/lib/admin-status-tone";
 import { cn } from "@/lib/utils";
 import type { AgentNodeProfileSummary, AgentNodeRow, AgentProfileRow } from "@/types/api/admin-agent";
 
-function settlementCycleLabel(
-  cycle: AgentNodeProfileSummary["settlement_cycle"] | undefined,
-  t: (key: string, opts?: { defaultValue?: string }) => string,
-): string {
-  if (cycle === "daily") {
-    return t("profile.cycleDaily", { defaultValue: "日结" });
+function relativeShareRate(totalShareRate: number | undefined, parentShareRate: number | undefined): string | null {
+  if (
+    totalShareRate == null ||
+    parentShareRate == null ||
+    parentShareRate <= 0
+  ) {
+    return null;
   }
-  if (cycle === "monthly") {
-    return t("profile.cycleMonthly", { defaultValue: "月结" });
-  }
-  return t("profile.cycleWeekly", { defaultValue: "周结" });
+
+  return percentValueToUi((totalShareRate / parentShareRate) * 100);
 }
 
 export type AgentDetailTab = "overview" | "profile" | "downline" | "players";
@@ -57,18 +56,22 @@ export type AgentLineDetailPanelProps = {
   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({
@@ -87,18 +90,22 @@ export function AgentLineDetailPanel({
   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"]);
 
@@ -120,13 +127,6 @@ export function AgentLineDetailPanel({
     );
   }
 
-  const cycleLabel =
-    profile?.settlement_cycle === "daily"
-      ? t("profile.cycleDaily", { defaultValue: "日结" })
-      : profile?.settlement_cycle === "monthly"
-        ? t("profile.cycleMonthly", { defaultValue: "月结" })
-        : t("profile.cycleWeekly", { defaultValue: "周结" });
-
   const tabs: { key: AgentDetailTab; label: string; count?: number; visible: boolean }[] = [
     {
       key: "overview",
@@ -157,8 +157,6 @@ export function AgentLineDetailPanel({
     siteLabel && siteCode.trim() !== ""
       ? `${siteLabel} (${siteCode})`
       : siteLabel ?? siteCode;
-  const codeText = typeof node.code === "string" ? node.code.trim() : "";
-  const usernameText = typeof node.username === "string" ? node.username.trim() : "";
   const childActionHint = canCreateChild
     ? null
     : canCreateChildAgent
@@ -168,11 +166,22 @@ export function AgentLineDetailPanel({
       : 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-5 sm:px-6">
-        <div className="flex flex-wrap items-start justify-between gap-4">
+      <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">
@@ -184,60 +193,38 @@ export function AgentLineDetailPanel({
                   : t("common:status.disabled", { defaultValue: "停用" })}
               </AdminStatusBadge>
             </div>
-            {(codeText !== "" || usernameText !== "" || parentName) ? (
-              <div className="mt-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
-                {codeText !== "" ? (
-                  <span className="rounded-md bg-muted/50 px-2 py-1 font-mono text-xs text-foreground/80">
-                    {t("lineUi.agentCode", { defaultValue: "编码" })} {codeText}
-                  </span>
-                ) : null}
-                {usernameText !== "" ? (
-                  <span className="rounded-md bg-muted/50 px-2 py-1 text-xs">
-                    {t("lineUi.agentUsername", { defaultValue: "账号" })} {usernameText}
-                  </span>
-                ) : null}
-                {parentName ? (
-                  <span className="rounded-md bg-muted/50 px-2 py-1 text-xs">
-                    {t("parentAgent", { defaultValue: "上级代理" })} {parentName}
-                  </span>
-                ) : null}
-              </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 sm:flex-row sm:items-center">
-            {siteDisplay ? (
-              <div
-                className="rounded-lg border border-border/70 bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground"
-                title={siteDisplay}
-              >
-                <span className="font-medium text-foreground/90">
-                  {t("lineUi.currentSite", { defaultValue: "当前站点" })}
-                </span>
-                <span className="mx-1.5 text-border">|</span>
-                <span className="truncate">{siteDisplay}</span>
-              </div>
-            ) : null}
+          <div className="flex shrink-0 flex-col items-end gap-2">
             {canManageNode ? (
-              <div className="flex max-w-[28rem] flex-col items-end gap-2">
+              <>
                 <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>
-                  {canCreateChild ? (
-                    <Button type="button" size="sm" onClick={onAddChild}>
+                  {showPrimaryAction && primaryActionEnabled ? (
+                    <Button
+                      type="button"
+                      size="sm"
+                      onClick={detailTab === "players" ? onAddPlayer : onAddChild}
+                    >
                       <Plus className="mr-1.5 size-3.5" />
-                      {t("createChild", { defaultValue: "添加下级代理" })}
+                      {primaryActionLabel}
                     </Button>
                   ) : null}
                 </div>
-                {childActionHint ? (
-                  <p className="text-right text-xs leading-5 text-muted-foreground">
-                    {childActionHint}
+                {primaryActionHint ? (
+                  <p className="max-w-[26rem] text-right text-xs leading-5 text-muted-foreground">
+                    {primaryActionHint}
                   </p>
                 ) : null}
-              </div>
+              </>
             ) : null}
           </div>
         </div>
@@ -266,10 +253,10 @@ export function AgentLineDetailPanel({
           <OverviewTab
             profile={profile}
             profileLoading={profileLoading}
-            cycleLabel={cycleLabel}
             profileReadOnly={profileReadOnly}
             canViewDownlineTab={canViewDownlineTab}
             canViewPlayersTab={canViewPlayersTab}
+            playersTabHint={playersTabHint}
             childCount={childAgents.length}
             onGoToDownline={() => onDetailTabChange("downline")}
             onGoToPlayers={() => onDetailTabChange("players")}
@@ -319,6 +306,7 @@ export function AgentLineDetailPanel({
           <DownlineTable
             childAgents={childAgents}
             childCountById={childCountById}
+            parentTotalShareRate={profile?.total_share_rate}
             canManageNode={canManageNode}
             canCreateChild={canCreateChild}
             canDeleteChild={canDeleteChild}
@@ -335,6 +323,7 @@ export function AgentLineDetailPanel({
             agentNodeId={node.id}
             allowCreatePlayer={profile?.can_create_player === true}
             embedded
+            createRequestKey={playerCreateRequestKey}
           />
         ) : null}
       </div>
@@ -345,20 +334,20 @@ export function AgentLineDetailPanel({
 function OverviewTab({
   profile,
   profileLoading,
-  cycleLabel,
   profileReadOnly,
   canViewDownlineTab,
   canViewPlayersTab,
+  playersTabHint,
   childCount,
   onGoToDownline,
   onGoToPlayers,
 }: {
   profile: AgentProfileRow | null;
   profileLoading: boolean;
-  cycleLabel: string;
   profileReadOnly: boolean;
   canViewDownlineTab: boolean;
   canViewPlayersTab: boolean;
+  playersTabHint?: string | null;
   childCount: number;
   onGoToDownline: () => void;
   onGoToPlayers: () => void;
@@ -367,6 +356,10 @@ function OverviewTab({
 
   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">
@@ -392,12 +385,17 @@ function OverviewTab({
             label={t("profile.totalShareRate", { defaultValue: "占成比例" })}
             value={profileLoading ? "…" : `${profile?.total_share_rate ?? 0}%`}
             subtitle={
-              rebateCap !== null
-                ? t("lineUi.shareRebateCap", {
-                    defaultValue: "回水上限 {{rate}}%",
-                    rate: rebateCap,
+              parentRelativeShare
+                ? t("profile.relativeShareRateValue", {
+                    defaultValue: "占上级 {{rate}}%",
+                    rate: parentRelativeShare,
                   })
-                : undefined
+                : rebateCap !== null
+                  ? t("lineUi.shareRebateCap", {
+                      defaultValue: "回水上限 {{rate}}%",
+                      rate: rebateCap,
+                    })
+                  : undefined
             }
             accent
           />
@@ -418,17 +416,24 @@ function OverviewTab({
       )}
 
       {!profileReadOnly && !profileLoading && profile ? (
-        <p className="text-xs text-muted-foreground">
-          {t("lineUi.profileFootnote", {
-            defaultValue: "回水上限 {{rebate}}% · 默认回水 {{defaultRebate}}% · {{cycle}}",
-            rebate: percentValueToUi(profile.rebate_limit ?? 0),
-            defaultRebate: percentValueToUi(profile.default_player_rebate ?? 0),
-            cycle: cycleLabel,
-          })}
-          {(profile.risk_tags?.length ?? 0) > 0
-            ? ` · ${t("profile.riskTags", { defaultValue: "风控" })}: ${profile.risk_tags?.join(", ")}`
-            : ""}
-        </p>
+        <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 ? (
@@ -440,14 +445,18 @@ function OverviewTab({
         </p>
       ) : null}
 
-      {canViewDownlineTab || canViewPlayersTab ? (
+      {canViewDownlineTab || canViewPlayersTab || playersTabHint ? (
         <div className="grid gap-4 md:grid-cols-2">
           {canViewDownlineTab ? (
             <OverviewLinkCard
               icon={Network}
               title={t("lineUi.tabDownline", { defaultValue: "直属下级" })}
-              description={t("lineUi.overviewDownlineCard", {
-                defaultValue: "{{count}} 个，可在对应 Tab 管理下级代理。",
+              summary={t("lineUi.overviewDownlineCount", {
+                defaultValue: "{{count}} 个",
+                count: childCount,
+              })}
+              description={t("lineUi.overviewDownlineHint", {
+                defaultValue: "直属下级 {{count}} 个，可在对应 Tab 管理下级代理。",
                 count: childCount,
               })}
               actionLabel={t("lineUi.viewDownline", { defaultValue: "查看直属下级" })}
@@ -458,6 +467,9 @@ function OverviewTab({
             <OverviewLinkCard
               icon={Users}
               title={t("lineUi.tabPlayers", { defaultValue: "直属玩家" })}
+              summary={t("lineUi.overviewPlayersSummary", {
+                defaultValue: "玩家管理",
+              })}
               description={t("lineUi.overviewPlayersHint", {
                 defaultValue: "直属玩家请在「直属玩家」Tab 维护。",
               })}
@@ -465,6 +477,21 @@ function OverviewTab({
               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>
@@ -474,38 +501,55 @@ function OverviewTab({
 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="border-border/70 shadow-sm">
-      <CardContent className="flex items-start justify-between gap-4 pt-5">
-        <div className="flex min-w-0 gap-3">
-          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary/8 text-primary">
-            <Icon className="size-5" aria-hidden />
-          </div>
-          <div className="min-w-0">
-            <p className="font-medium text-foreground">{title}</p>
-            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    <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>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="shrink-0 text-primary hover:text-primary"
-          onClick={onAction}
-        >
-          {actionLabel}
-          <ChevronRight className="ml-0.5 size-3.5" aria-hidden />
-        </Button>
       </CardContent>
     </Card>
   );
@@ -514,6 +558,7 @@ function OverviewLinkCard({
 function DownlineTable({
   childAgents,
   childCountById,
+  parentTotalShareRate,
   canManageNode,
   canCreateChild,
   canDeleteChild,
@@ -524,6 +569,7 @@ function DownlineTable({
 }: {
   childAgents: AgentNodeRow[];
   childCountById: Map<number, number>;
+  parentTotalShareRate?: number;
   canManageNode: boolean;
   canCreateChild: boolean;
   canDeleteChild: (node: AgentNodeRow) => boolean;
@@ -537,122 +583,120 @@ function DownlineTable({
   const editChildLabel = t("lineUi.editDownline", { defaultValue: "编辑代理" });
   const deleteChildLabel = t("lineUi.deleteDownline", { defaultValue: "删除代理" });
 
-  if (childAgents.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border/70 bg-card px-6 py-16 text-center shadow-sm">
-        <AdminNoResourceState className="py-4">
-          {canManageNode && canCreateChild ? (
-            <Button type="button" className="mt-2" onClick={onAddChild}>
-              <Plus className="mr-1.5 size-4" />
-              {createChildLabel}
-            </Button>
-          ) : null}
-        </AdminNoResourceState>
-      </div>
-    );
-  }
-
   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="whitespace-nowrap">
-                {t("profile.settlementCycle", { 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-10 w-14 bg-muted/40 text-center shadow-[-1px_0_0_var(--border)]">
-                  {t("common:table.actions", { defaultValue: "操作" })}
+        <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>
-              ) : null}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {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 ? `${summary.total_share_rate ?? 0}%` : "—"}
-                  </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="whitespace-nowrap text-xs text-muted-foreground">
-                    {summary ? settlementCycleLabel(summary.settlement_cycle, t) : "—"}
-                  </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_var(--border)]"
-                      onClick={(e) => e.stopPropagation()}
+                <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)}
                     >
-                      <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>
+                      <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>
   );
 }