+
+
+ {/* ===== 交互式 Filter ===== */}
+
+ 选择筛选条件后，下方 URL 参数会实时更新
+ ,
+ ,
+ ,
+ ],
+ ]}
+ />
+ {value.length > 0 && (
+ <>
+
+ 当前筛选值
+
+ {JSON.stringify(value, null, 2)}
+
+ 序列化后的 URL 参数
+
+ {liveUrlParams.toString() || '（无）'}
+
+
+ )}
+
+
+ {/* ===== filterToUrlParams ===== */}
+
+
+ 将筛选值数组序列化为 URLSearchParams，保留 label 信息以便反序列化还原
+
+ 输入：筛选值数组
+
+{JSON.stringify(sampleFilterValue, null, 2)}
+
+ 输出：URL 参数字符串
+
+ {roundTripResult.urlStr}
+
+
+
+ {/* ===== parseFilterEntry ===== */}
+
+
+ 将 URL 参数中的字符串反序列化为 {`{ label, value }`} 对象
+
+ {parsedEntries.map(({ input, output }, i) => (
+
+ {`parseFilterEntry(${input})`}
+ {' → '}
+ {JSON.stringify(output)}
+
+ ))}
+
+
+ {/* ===== takeFilterEntry ===== */}
+
+
+ 直接从 URLSearchParams 中读取并反序列化指定 key 的筛选值
+
+ {takeResults.map(({ input, output }, i) => (
+
+ {input}
+
+ 结果：
+ {JSON.stringify(output)}
+
+ ))}
+
+
+ {/* ===== createUrlFilterReader + 完整还原流程 ===== */}
+
+
+ 使用 createUrlFilterReader 从 URL 参数读取并还原完整的筛选状态，同时追踪已消费的 key
+
+ 步骤1：从 URL 参数读取各字段值
+
+{`const reader = createUrlFilterReader(searchParams);
+const keyword = reader.takeFilterEntry('keyword'); // → ${JSON.stringify(roundTripResult.keyword)}
+const city = reader.takeFilterEntry('city', { multi: true }); // → ${JSON.stringify(roundTripResult.city)}
+const status = reader.takeFilterEntry('status'); // → ${JSON.stringify(roundTripResult.status)}
+reader.getConsumedKeys(); // → ${JSON.stringify(roundTripResult.consumedKeys)}`}
+
+ 步骤2：还原为筛选值数组
+
+ {JSON.stringify(roundTripResult.restored, null, 2)}
+
+
+ 验证：还原后的数据与原始数据一致
+
+ 还原成功
+
+ keyword: {roundTripResult.keyword?.value} | city: [{roundTripResult.city?.map(c => c.value).join(', ')}] | status: {roundTripResult.status?.value}
+
+
+
+
+ {/* ===== createFilterValueMapper ===== */}
+
+
+ 实际业务中，先用 createFilterValueMapper 将筛选值映射为接口参数格式，再用 filterToUrlParams 序列化到 URL
+
+ 映射后的筛选值（用于接口请求）
+
+{`const mapFilterValue = createFilterValueMapper({
+ keyword: 'string', // 确保字符串
+ city: 'multi', // 多选 → string[]
+ status: 'single', // 单选 → string
+});
+
+mapFilterValue(filterValue, getFilterValue);
+// →`}
+{' ' + JSON.stringify(mappedSample, null, 2)}
+
+
+
+ );
+};
+
+render(
+
+
+ {/* ===== 交互式 Filter ===== */}
+
+ 选择筛选条件后，下方 URL 参数会实时更新
+ ,
+ ,
+ ,
+ ],
+ ]}
+ />
+ {value.length > 0 && (
+ <>
+
+ 当前筛选值
+
+ {JSON.stringify(value, null, 2)}
+
+ 序列化后的 URL 参数
+
+ {liveUrlParams.toString() || '（无）'}
+
+
+ )}
+
+
+ {/* ===== filterToUrlParams ===== */}
+
+
+ 将筛选值数组序列化为 URLSearchParams，保留 label 信息以便反序列化还原
+
+ 输入：筛选值数组
+
+{JSON.stringify(sampleFilterValue, null, 2)}
+
+ 输出：URL 参数字符串
+
+ {roundTripResult.urlStr}
+
+
+
+ {/* ===== parseFilterEntry ===== */}
+
+
+ 将 URL 参数中的字符串反序列化为 {`{ label, value }`} 对象
+
+ {parsedEntries.map(({ input, output }, i) => (
+
+ {`parseFilterEntry(${input})`}
+ {' → '}
+ {JSON.stringify(output)}
+
+ ))}
+
+
+ {/* ===== takeFilterEntry ===== */}
+
+
+ 直接从 URLSearchParams 中读取并反序列化指定 key 的筛选值
+
+ {takeResults.map(({ input, output }, i) => (
+
+ {input}
+
+ 结果：
+ {JSON.stringify(output)}
+
+ ))}
+
+
+ {/* ===== createUrlFilterReader + 完整还原流程 ===== */}
+
+
+ 使用 createUrlFilterReader 从 URL 参数读取并还原完整的筛选状态，同时追踪已消费的 key
+
+ 步骤1：从 URL 参数读取各字段值
+
+{`const reader = createUrlFilterReader(searchParams);
+const keyword = reader.takeFilterEntry('keyword'); // → ${JSON.stringify(roundTripResult.keyword)}
+const city = reader.takeFilterEntry('city', { multi: true }); // → ${JSON.stringify(roundTripResult.city)}
+const status = reader.takeFilterEntry('status'); // → ${JSON.stringify(roundTripResult.status)}
+reader.getConsumedKeys(); // → ${JSON.stringify(roundTripResult.consumedKeys)}`}
+
+ 步骤2：还原为筛选值数组
+
+ {JSON.stringify(roundTripResult.restored, null, 2)}
+
+
+ 验证：还原后的数据与原始数据一致
+
+ 还原成功
+
+ keyword: {roundTripResult.keyword?.value} | city: [{roundTripResult.city?.map(c => c.value).join(', ')}] | status: {roundTripResult.status?.value}
+
+
+
+
+ {/* ===== createFilterValueMapper ===== */}
+
+
+ 实际业务中，先用 createFilterValueMapper 将筛选值映射为接口参数格式，再用 filterToUrlParams 序列化到 URL
+
+ 映射后的筛选值（用于接口请求）
+
+{`const mapFilterValue = createFilterValueMapper({
+ keyword: 'string', // 确保字符串
+ city: 'multi', // 多选 → string[]
+ status: 'single', // 单选 → string
+});
+
+mapFilterValue(filterValue, getFilterValue);
+// →`}
+{' ' + JSON.stringify(mappedSample, null, 2)}
+
+
+
+ );
+};
+
+render(