feat: improve asset inventory statistics and responsive UX (v1.1.16)

2026-09-23 11:07:36 +08:00
parent 9b0980e349
commit b0cba26fbb
30 changed files with 626 additions and 498 deletions
@@ -1,71 +1,33 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef, useId } from 'react';
 import { ChevronDown } from 'lucide-react';

 export function SearchSelect({ value, onChange, options, placeholder, className }: {
-  value: string;
-  onChange: (v: string) => void;
-  options: string[];
-  placeholder: string;
-  className?: string;
+  value: string; onChange: (value: string) => void; options: string[]; placeholder: string; className?: string;
 }) {
-  const [open, setOpen] = useState(false);
-  const [query, setQuery] = useState('');
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, []);
-
-  const filtered = useMemo(() => {
-    if (!query) return options;
-    const q = query.toLowerCase();
-    return options.filter((o) => o.toLowerCase().includes(q));
-  }, [options, query]);
-
-  const displayValue = value || '';
-
-  return (
-    <div ref={ref} className="relative">
-      <div
-        className={`flex items-center bg-white border border-gray-200 rounded-lg shadow-sm cursor-pointer transition-all focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500 ${className || 'text-xs py-1.5 px-2'}`}
-        onClick={() => setOpen(!open)}
-      >
-        <input
-          type="text"
-          className="flex-1 outline-none bg-transparent min-w-0 text-inherit"
-          placeholder={displayValue || placeholder}
-          value={open ? query : displayValue}
-          onChange={(e) => { setQuery(e.target.value); if (!open) setOpen(true); }}
-          onFocus={() => { setOpen(true); setQuery(''); }}
-        />
-        <ChevronDown size={14} className={`text-gray-400 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
-      </div>
-      {open && (
-        <div className="absolute z-50 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-48 overflow-auto">
-          <div
-            className="px-2 py-1.5 text-xs text-gray-400 cursor-pointer hover:bg-gray-50"
-            onClick={() => { onChange(''); setQuery(''); setOpen(false); }}
-          >
-            {placeholder}
-          </div>
-          {filtered.map((o) => (
-            <div
-              key={o}
-              className={`px-2 py-1.5 text-xs cursor-pointer hover:bg-blue-50 transition-colors ${o === value ? 'bg-blue-50 text-blue-600 font-bold' : 'text-gray-700'}`}
-              onClick={() => { onChange(o); setQuery(''); setOpen(false); }}
-            >
-              {o}
-            </div>
-          ))}
-          {filtered.length === 0 && (
-            <div className="px-2 py-3 text-xs text-gray-400 text-center">无匹配项</div>
-          )}
-        </div>
-      )}
+  const [open,setOpen]=useState(false);
+  const [query,setQuery]=useState('');
+  const [active,setActive]=useState(0);
+  const ref=useRef<HTMLDivElement>(null);
+  const inputRef=useRef<HTMLInputElement>(null);
+  const id=useId();
+  const filtered=useMemo(()=>options.filter(option=>option.toLowerCase().includes(query.toLowerCase())),[options,query]);
+  const choices=['',...filtered];
+  const choose=(option:string)=>{onChange(option);setQuery('');setOpen(false);};
+  useEffect(()=>{const outside=(event:MouseEvent)=>{if(ref.current && !ref.current.contains(event.target as Node))setOpen(false);};document.addEventListener('mousedown',outside);return()=>document.removeEventListener('mousedown',outside);},[]);
+  useEffect(()=>{if(open)document.getElementById(`${id}-${active}`)?.scrollIntoView({block:'nearest'});},[open,active,id]);
+  return <div ref={ref} className="relative">
+    <div className={`flex items-center rounded-lg border border-slate-200 bg-white shadow-sm focus-within:ring-2 focus-within:ring-blue-500/20 ${className || 'px-3 py-2 text-sm'}`}>
+      <input ref={inputRef} type="text" role="combobox" aria-label={placeholder} aria-expanded={open} aria-controls={`${id}-list`} aria-autocomplete="list" aria-activedescendant={open?`${id}-${active}`:undefined}
+        className="min-w-0 flex-1 bg-transparent text-inherit outline-none" placeholder={placeholder} value={open?query:value}
+        onClick={()=>setOpen(true)} onFocus={()=>{setOpen(true);setQuery('');setActive(0);}}
+        onChange={e=>{setQuery(e.target.value);setActive(0);setOpen(true);}}
+        onKeyDown={e=>{if(e.key==='Escape'){e.stopPropagation();setOpen(false);}else if(e.key==='ArrowDown'||e.key==='ArrowUp'){e.preventDefault();setOpen(true);setActive(i=>(i+(e.key==='ArrowDown'?1:-1)+choices.length)%choices.length);}else if(e.key==='Enter'&&open){e.preventDefault();choose(choices[active]??'');}else if(e.key==='Tab')setOpen(false);}}
+      />
+      <button type="button" tabIndex={-1} aria-label={open?'收起选项':'展开选项'} onMouseDown={e=>e.preventDefault()} onClick={()=>{setQuery('');setActive(0);setOpen(v=>!v);}} className="p-1 text-slate-500"><ChevronDown size={15} className={open?'rotate-180':''}/></button>
    </div>
-  );
+    {open && <div id={`${id}-list`} role="listbox" aria-label={placeholder} className="absolute left-0 right-0 z-50 mt-1 max-h-56 overflow-auto rounded-xl border border-slate-200 bg-white p-1 shadow-xl">
+      {choices.map((option,index)=><button key={option} type="button" id={`${id}-${index}`} role="option" aria-selected={option===value} tabIndex={-1} onMouseDown={e=>e.preventDefault()} onClick={()=>choose(option)} className={`block min-h-10 w-full rounded-lg px-3 py-2 text-left text-xs ${index===active?'bg-blue-50 text-blue-700':'text-slate-700 hover:bg-slate-50'}`}>{option||'全部'}</button>)}
+      {filtered.length===0 && <p className="p-3 text-center text-xs text-slate-500">无匹配项</p>}
+    </div>}
+  </div>;
 }