支持物品规则分类筛选

apps/frontend/src/pages/admin/panels/ProductRulesPanel.tsx

@@ -202,8 +202,10 @@ export default function ProductRulesPanel() {
   }
 
   const [keyword, setKeyword] = useState('')
+  const [categoryId, setCategoryId] = useState<number | undefined>()
 
   const filteredRules = (rulesQuery.data?.data.items || []).filter((rule) => {
+    if (categoryId && Number(rule.categoryId || 0) !== categoryId) return false
     const keywordText = keyword.trim().toLowerCase()
     if (!keywordText) return true
     return [
@@ -625,9 +627,26 @@ export default function ProductRulesPanel() {
         </Card>
         <Card
           className="product-rules-list-card"
-          title="物品规则"
+          title={
+            <div className="product-rules-list-heading">
+              <span>物品规则</span>
+              <Tabs
+                className="product-rules-category-tabs"
+                size="small"
+                activeKey={categoryId ? String(categoryId) : 'all'}
+                onChange={(key) => setCategoryId(key === 'all' ? undefined : Number(key))}
+                items={[
+                  { key: 'all', label: '全部' },
+                  ...(categoriesQuery.data?.data.items || []).map((item) => ({
+                    key: String(item.categoryId),
+                    label: item.name,
+                  })),
+                ]}
+              />
+            </div>
+          }
           extra={
-            <Space>
+            <Space wrap>
               <Input.Search
                 allowClear
                 placeholder="搜索规则标识/商品/SKU/店铺"

apps/frontend/src/styles/main.css

@@ -2530,6 +2530,26 @@ select {
   min-width: 0;
 }
 
+.product-rules-list-heading {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  min-width: 0;
+}
+
+.product-rules-category-tabs {
+  min-width: 0;
+  transform: translateY(-6px);
+}
+
+.product-rules-category-tabs .ant-tabs-nav {
+  margin: 0;
+}
+
+.product-rules-category-tabs .ant-tabs-content-holder {
+  display: none;
+}
+
 .product-rules-list-card .ant-card-body {
   max-height: calc(100vh - 150px);
   overflow-y: auto;