Fix KOC resource fuzzy filters

app/admin-app.tsx

@@ -1377,8 +1377,8 @@ function ResourcesPage({
 }) {
   const [query, setQuery] = useState("");
   const [platformFilter, setPlatformFilter] = useState("全部平台");
-  const [ipFilter, setIpFilter] = useState("全部IP地区");
-  const [sourceFilter, setSourceFilter] = useState("全部合作来源");
+  const [ipFilter, setIpFilter] = useState("");
+  const [sourceFilter, setSourceFilter] = useState("");
   const resourceAccounts = useMemo(() => {
     const deliveriesByAccount = new Map<string, Distribution[]>();
     distributions.forEach((distribution) => {
@@ -1430,31 +1430,37 @@ function ResourcesPage({
   );
   const filteredAccounts = useMemo(() => {
     const keyword = query.trim().toLocaleLowerCase("zh-CN");
+    const ipKeyword = ipFilter.trim().toLocaleLowerCase("zh-CN");
+    const sourceKeyword = sourceFilter.trim().toLocaleLowerCase("zh-CN");
     return resourceAccounts.filter(({ account, sources }) => {
       const searchable = `${account.nickname} ${account.public_account_id}`.toLocaleLowerCase(
         "zh-CN",
       );
+      const ipLocation = (account.ip_location || "待识别").toLocaleLowerCase(
+        "zh-CN",
+      );
       return (
         (!keyword || searchable.includes(keyword)) &&
         (platformFilter === "全部平台" ||
           account.platform === platformFilter) &&
-        (ipFilter === "全部IP地区" ||
-          (account.ip_location || "待识别") === ipFilter) &&
-        (sourceFilter === "全部合作来源" ||
-          sources.includes(sourceFilter))
+        (!ipKeyword || ipLocation.includes(ipKeyword)) &&
+        (!sourceKeyword ||
+          sources.some((source) =>
+            source.toLocaleLowerCase("zh-CN").includes(sourceKeyword),
+          ))
       );
     });
   }, [ipFilter, platformFilter, query, resourceAccounts, sourceFilter]);
   const hasActiveFilters =
     Boolean(query.trim()) ||
     platformFilter !== "全部平台" ||
-    ipFilter !== "全部IP地区" ||
-    sourceFilter !== "全部合作来源";
+    Boolean(ipFilter.trim()) ||
+    Boolean(sourceFilter.trim());
   const clearFilters = () => {
     setQuery("");
     setPlatformFilter("全部平台");
-    setIpFilter("全部IP地区");
-    setSourceFilter("全部合作来源");
+    setIpFilter("");
+    setSourceFilter("");
   };
   return (
     <div className="stack">
@@ -1494,7 +1500,7 @@ function ResourcesPage({
           </div>
         </div>
         <div className="resource-toolbar">
-          <label className="resource-search">
+          <div className="resource-search">
             <span aria-hidden="true">⌕</span>
             <input
               aria-label="搜索账号名称或账号ID"
@@ -1503,23 +1509,37 @@ function ResourcesPage({
               type="search"
               value={query}
             />
-          </label>
-          <select
-            aria-label="按IP地区筛选"
-            onChange={(event) => setIpFilter(event.target.value)}
-            value={ipFilter}
-          >
-            <option>全部IP地区</option>
-            {ipOptions.map((ip) => <option key={ip}>{ip}</option>)}
-          </select>
-          <select
-            aria-label="按合作来源筛选"
-            onChange={(event) => setSourceFilter(event.target.value)}
-            value={sourceFilter}
-          >
-            <option>全部合作来源</option>
-            {sourceOptions.map((source) => <option key={source}>{source}</option>)}
-          </select>
+          </div>
+          <div className="resource-filter-search">
+            <span aria-hidden="true">⌕</span>
+            <input
+              aria-label="模糊搜索IP地区"
+              list="resource-ip-options"
+              onChange={(event) => setIpFilter(event.target.value)}
+              placeholder="搜索IP地区"
+              type="search"
+              value={ipFilter}
+            />
+            <datalist id="resource-ip-options">
+              {ipOptions.map((ip) => <option key={ip} value={ip} />)}
+            </datalist>
+          </div>
+          <div className="resource-filter-search">
+            <span aria-hidden="true">⌕</span>
+            <input
+              aria-label="模糊搜索合作来源"
+              list="resource-source-options"
+              onChange={(event) => setSourceFilter(event.target.value)}
+              placeholder="搜索合作来源"
+              type="search"
+              value={sourceFilter}
+            />
+            <datalist id="resource-source-options">
+              {sourceOptions.map((source) => (
+                <option key={source} value={source} />
+              ))}
+            </datalist>
+          </div>
           <button
             className="resource-clear-button"
             disabled={!hasActiveFilters}