优化排序控件

src/App.tsx

@@ -268,11 +268,16 @@ function Showcase() {
   }
 
   function selectRange(minKey: "minCoin" | "minPrice", maxKey: "maxCoin" | "maxPrice", min: string, max: string) {
-    setFilters((current) => ({ ...current, [minKey]: min, [maxKey]: max }));
+    setFilters((current) => {
+      if (current[minKey] === min && current[maxKey] === max) {
+        return { ...current, [minKey]: "", [maxKey]: "" };
+      }
+      return { ...current, [minKey]: min, [maxKey]: max };
+    });
   }
 
   function setSort(sortKey: string) {
-    setActiveSort((current) => (current === sortKey && sortKey !== "recommended" ? "recommended" : sortKey));
+    setActiveSort(sortKey);
     setPage(1);
   }
 
@@ -351,7 +356,10 @@ function Showcase() {
       ) : null}
 
       <section className="filter-board">
-        <div className="section-title">筛选条件</div>
+        <div className="section-title">
+          <i />
+          筛选条件
+        </div>
         <div className="filter-grid">
           <FilterRow
             active={(item) => filters.minCoin === item.min && filters.maxCoin === item.max}
@@ -430,33 +438,39 @@ function Showcase() {
           <div className="range-fields">
             <label>
               <span>哈夫币范围</span>
-              <Input
-                inputMode="numeric"
-                placeholder="最小"
-                value={filters.minCoin}
-                onChange={(event) => updateFilter("minCoin", event.target.value)}
-              />
-              <Input
-                inputMode="numeric"
-                placeholder="最大"
-                value={filters.maxCoin}
-                onChange={(event) => updateFilter("maxCoin", event.target.value)}
-              />
+              <div className="range-inputs">
+                <Input
+                  inputMode="numeric"
+                  placeholder="最小"
+                  value={filters.minCoin}
+                  onChange={(event) => updateFilter("minCoin", event.target.value)}
+                />
+                <em>至</em>
+                <Input
+                  inputMode="numeric"
+                  placeholder="最大"
+                  value={filters.maxCoin}
+                  onChange={(event) => updateFilter("maxCoin", event.target.value)}
+                />
+              </div>
             </label>
             <label>
               <span>KD范围</span>
-              <Input
-                inputMode="decimal"
-                placeholder="最小"
-                value={filters.minKd}
-                onChange={(event) => updateFilter("minKd", event.target.value)}
-              />
-              <Input
-                inputMode="decimal"
-                placeholder="最大"
-                value={filters.maxKd}
-                onChange={(event) => updateFilter("maxKd", event.target.value)}
-              />
+              <div className="range-inputs">
+                <Input
+                  inputMode="decimal"
+                  placeholder="最小"
+                  value={filters.minKd}
+                  onChange={(event) => updateFilter("minKd", event.target.value)}
+                />
+                <em>至</em>
+                <Input
+                  inputMode="decimal"
+                  placeholder="最大"
+                  value={filters.maxKd}
+                  onChange={(event) => updateFilter("maxKd", event.target.value)}
+                />
+              </div>
             </label>
           </div>
           {skinSections.map((section) => (
@@ -472,19 +486,27 @@ function Showcase() {
         </div>
 
         <div className="filter-footer">
-          <Button type="link" onClick={() => setAdvancedOpen((open) => !open)}>
-            {advancedOpen ? "收起高级筛选" : "展开高级筛选"} <DownOutlined rotate={advancedOpen ? 180 : 0} />
-          </Button>
+          <button className="advanced-toggle" type="button" onClick={() => setAdvancedOpen((open) => !open)}>
+            {advancedOpen ? "收起高级筛选" : "展开高级筛选"}
+            <DownOutlined rotate={advancedOpen ? 180 : 0} />
+          </button>
         </div>
       </section>
 
       <section className="result-area">
         <div className="sort-toolbar">
-          <div className="sort-buttons">
+          <div className="sort-segment" role="tablist" aria-label="排序方式">
             {sortOptions.map((option) => (
-              <Button key={option.key} className={activeSort === option.key ? "active" : ""} onClick={() => setSort(option.key)}>
-                {option.label} <DownOutlined />
-              </Button>
+              <button
+                key={option.key}
+                type="button"
+                role="tab"
+                aria-selected={activeSort === option.key}
+                className={activeSort === option.key ? "active" : ""}
+                onClick={() => setSort(option.key)}
+              >
+                {option.label}
+              </button>
             ))}
           </div>
           <div className="toolbar-actions">
@@ -560,12 +582,19 @@ interface FilterRowProps<T> {
 function FilterRow<T>({ active, label, onSelect, options, render }: FilterRowProps<T>) {
   return (
     <div className="filter-row">
-      <span>{label}</span>
+      <span className="filter-label">{label}</span>
       <div className="chip-list">
         {options.map((item) => {
           const text = render(item);
+          const selected = active(item);
           return (
-            <button key={text} className={active(item) ? "selected" : ""} type="button" onClick={() => onSelect(item)}>
+            <button
+              key={text}
+              className={selected ? "selected" : ""}
+              type="button"
+              aria-pressed={selected}
+              onClick={() => onSelect(item)}
+            >
               {text}
             </button>
           );