筛选调整

src/app/(public)/category/[slug]/[id]/page.tsx

@@ -308,7 +308,7 @@ export default async function CategoryPage({
               name: translation?.name ?? "",
             }}
           /> */}
-          <div className="felx justify-center">
+          <div className="flex justify-center">
               <Image
                src={categoryProductDatas? categoryProductDatas.categoryProducts.banner: ''}
                alt={'categoryBanner'}

src/components/theme/filters/NewMobileFilter.tsx

@@ -32,23 +32,32 @@ export default function MobileFilter({
   }, [filters, filterAttributes]);
 
   /**
-   * 单选切换
+   * 多选切换
    */
-  const toggleOption = (code: string, id: string) => {
-    setTempFilters((prev) => {
-      const current = prev[code];
-      if (current === id) {
-        const next = { ...prev };
-        delete next[code];
-        console.log("【点击选项后临时筛选tempFilters】", next);
-        return next;
-      }
-      return {
-        ...prev,
-        [code]: id,
-      };
-    });
-  };
+ const toggleOption = (code: string, id: string) => {
+  setTempFilters((prev) => {
+    const currentStr = prev[code] ?? "";
+    const selectedSet = new Set(currentStr ? currentStr.split(",") : []);
+    // debugger
+    if (selectedSet.has(id)) {
+      // 已选中 → 删除
+      selectedSet.delete(id);
+    } else {
+      // 未选中 → 添加
+      selectedSet.add(id);
+    }
+
+    const next = { ...prev };
+    if (selectedSet.size === 0) {
+      delete next[code];
+    } else {
+      next[code] = Array.from(selectedSet).join(",");
+    }
+    console.log("【点击选项后临时筛选tempFilters】", next);
+    return next;
+  });
+};
+
 
   const toggleGroupExpand = (code: string) => {
     setExpandedGroups((prev) => ({
@@ -120,23 +129,22 @@ export default function MobileFilter({
                     />
                   ) : (
                     (attr.node.options.edges || []).map((opt: any) => {
-                      const checked =
-                        tempFilters[attr.node.code] == opt.node._id;
-                      return opt.node.productCount > 0 &&  (
-                        <label
-                          key={opt.node._id}
-                          className="flex gap-3 text-lg items-center"
-                        >
-                          <input
-                            type="checkbox"
-                            checked={checked}
-                            onChange={() =>
-                              toggleOption(attr.node.code, opt.node._id)
-                            }
-                          />
-                          <span>{opt.node.adminName}</span>
-                        </label>
-                      );
+                        const selectedStr = tempFilters[attr.node.code] ?? "";
+                        const idStr = String(opt.node._id);
+                        const checked = selectedStr.split(",").includes(idStr);
+                        return opt.node.productCount > 0 && (
+                          <label
+                            key={opt.node._id}
+                            className="flex gap-3 text-lg items-center"
+                          >
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={() => toggleOption(attr.node.code, String(opt.node._id))}
+                            />
+                            <span className="wrap-break-word">{opt.node.adminName}</span>
+                          </label>
+                        );
                     })
                   )}
                 </div>