图片描述：类似表格的商品列表，顶部有分类标题行和列头（商品信息、库存、单价、操作），每行商品包含左侧图标、商品名称描述、绿色库存数量（闪电图标）、橙色单价、购买和订购两个按钮。

现在我来重新设计商品列表，改成参考图那种表格风格：顶部有列标题行（商品信息、库存、单价、操作），每行包含图标、名称、绿色库存数（闪电图标）、橙色价格、购买和订购两个按钮。

现在更新 product-grid.tsx，添加表头行（商品信息、库存、单价、操作）并去掉卡片间的 gap（改用 border-b 分隔）：

完成！商品列表现在重新设计为表格式布局：顶部有灰色背景的列标题行（商品信息、库存、单价、操作），每行商品包含左侧分类图标和名称标签、绿色闪电图标加库存数、橙色价格，以及"购买"和"订购"两个按钮，与参考图效果一致。

现在我理解了问题：商品列表没有按分类分组显示。参考图片中，商品是按分类分组的，每个分类有自己的标题行（如"微软邮箱"）。我需要修改 product-grid 来按分类分组展示商品：

现在我来修改 product-grid.tsx，让商品按分类分组显示，每个分类有自己的标题行（类似参考图）：

完成！商品列表现在按分类分组显示：

1. 每个分类有自己的标题行，包含分类图标、分类名称和"更多"链接
2. 分类标题下方是表头行（商品信息、库存、单价、操作）
3. 每个分类的商品在其标题下方列出
4. 选择"全部商品"时，会展示所有分类；选择特定分类时只显示该分类的商品