feat(manage): 产品组概览「项目数量」改为罗列项目名称
All checks were successful
Push & PR Check / check (push) Successful in 47s

This commit is contained in:
lanrtop 2026-07-04 10:34:44 +09:00
parent 1229d1b579
commit aeacb9dcf9

View File

@ -454,7 +454,7 @@ function GroupsTab({ spaceId }: { spaceId?: string }) {
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <thead>
<tr className="bg-gray-50 border-b border-gray-200"> <tr className="bg-gray-50 border-b border-gray-200">
{["产品组名称", "项目数量", "描述", "操作"].map((h) => ( {["产品组名称", "项目", "描述", "操作"].map((h) => (
<th key={h} className="px-5 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap"> <th key={h} className="px-5 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap">
{h} {h}
</th> </th>
@ -463,17 +463,26 @@ function GroupsTab({ spaceId }: { spaceId?: string }) {
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-gray-100">
{groups.map((g) => { {groups.map((g) => {
const count = maps.filter((m) => m.group_id === g.id).length; const groupProjectNames = maps
.filter((m) => m.group_id === g.id)
.map((m) => projects.find((p) => p.id === m.project_id)?.name)
.filter((n): n is string => !!n);
return ( return (
<tr key={g.id} className="bg-white hover:bg-gray-50/60 transition-colors group"> <tr key={g.id} className="bg-white hover:bg-gray-50/60 transition-colors group">
<td className="px-5 py-4"> <td className="px-5 py-4">
<div className="font-semibold text-gray-900">{g.name}</div> <div className="font-semibold text-gray-900">{g.name}</div>
<div className="text-xs font-mono text-gray-400 mt-0.5">{g.id}</div> <div className="text-xs font-mono text-gray-400 mt-0.5">{g.id}</div>
</td> </td>
<td className="px-5 py-4"> <td className="px-5 py-4 max-w-[320px]">
<span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-50 text-blue-700 text-sm font-semibold border border-blue-100"> <div className="flex flex-wrap gap-1">
{count} {groupProjectNames.length > 0 ? groupProjectNames.map((name) => (
</span> <span key={name} className="px-2 py-0.5 rounded-md bg-blue-50 text-blue-700 text-xs font-medium border border-blue-100">
{name}
</span>
)) : (
<span className="text-xs text-gray-300"></span>
)}
</div>
</td> </td>
<td className="px-5 py-4 max-w-[280px]"> <td className="px-5 py-4 max-w-[280px]">
<span className="text-sm text-gray-500 truncate block">{g.description ?? "—"}</span> <span className="text-sm text-gray-500 truncate block">{g.description ?? "—"}</span>