duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 产品管理默认按设备分组+自动全部展开+全部展开/折叠按钮

Browse Source
This commit is contained in:
duxingchen
2026-08-10 11:18:01 +08:00
parent 2eed7db82d
commit c0fe7c94bb
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/pages/admin/AdminProductsPage.tsx
View File

@ -35,7 +35,7 @@ export default function AdminProductsPage() {
// 搜索 & 筛选 & 分组
const [keyword, setKeyword] = useState("");
const [statusFilter, setStatusFilter] = useState("");
const [groupBy, setGroupBy] = useState<"order" | "device">("order");
const [groupBy, setGroupBy] = useState<"order" | "device">("device");
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
// 打印
@ -71,7 +71,7 @@ export default function AdminProductsPage() {
useEffect(() => { loadProducts(); }, []); // eslint-disable-line react-hooks/exhaustive-deps
function handleSearch(e?: React.FormEvent) { e?.preventDefault(); setExpandedGroups(new Set()); loadProducts(); }
function handleSearch(e?: React.FormEvent) { e?.preventDefault(); loadProducts(); }
// ---- 分组 + 状态过滤 ----
const productGroups = useMemo<ProductGroup[]>(() => {
@ -93,6 +93,11 @@ export default function AdminProductsPage() {
}));
}, [products, statusFilter, groupBy]);
// 🔧 默认全部展开：productGroups 变化时自动展开所有面板
useEffect(() => {
setExpandedGroups(new Set(productGroups.map(g => g.groupKey)));
}, [productGroups]);
function toggleGroup(key: string) {
setExpandedGroups(prev => { const n = new Set(prev); if (n.has(key)) n.delete(key); else n.add(key); return n; });
}
@ -130,13 +135,21 @@ export default function AdminProductsPage() {
{/* 搜索 + 分组 + 状态过滤（移植自 AdminTasksPage） */}
<div className="mb-6 rounded-xl bg-white p-4 shadow-sm">
<div className="mb-3 flex items-center gap-2">
<span className="text-xs text-gray-400">分组:</span>
{(["order", "device"] as const).map(m => (
<button key={m} onClick={() => setGroupBy(m)} className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${groupBy === m ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-500 hover:bg-gray-200"}`}>
{m === "order" ? "按订单" : "按设备"}
</button>
))}
<div className="mb-3 flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-xs text-gray-400">分组:</span>
{(["order", "device"] as const).map(m => (
<button key={m} onClick={() => setGroupBy(m)} className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${groupBy === m ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-500 hover:bg-gray-200"}`}>
{m === "order" ? "按订单" : "按设备"}
</button>
))}
</div>
<div className="flex gap-1">
<button onClick={() => setExpandedGroups(new Set(productGroups.map(g => g.groupKey)))}
className="rounded px-2 py-1 text-[11px] text-blue-600 hover:bg-blue-50">全部展开</button>
<button onClick={() => setExpandedGroups(new Set())}
className="rounded px-2 py-1 text-[11px] text-gray-400 hover:bg-gray-100">全部折叠</button>
</div>
</div>
<form onSubmit={handleSearch} className="flex items-center gap-2">
<div className="relative flex-1 max-w-xl">